/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.4.1.3
*/

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.single-product div.images{
    position:relative;
}
.single-product .product-footer > .container {
    background: white;
    margin-bottom: 50px;
}
.reset_variations {
    display: none !important;
}
.woocommerce-cart #content > .row,
.woocommerce-checkout #content > .row {
    background-color: #ffffff;
}
.woocommerce-checkout label {
    margin-bottom: 0;
}
.cartflows-instant-checkout .wcf-instant-thankyou .wcf-ic-layout-container h2.woocommerce-order-status {
    text-transform: none !important;
}
/* Trak */
.garancija-ribbon{
    --trak-barva:#c82333;         /* po želji spremenite barvo */
    position:absolute;
    top:-15px; left:50%;
    transform:translateX(-50%);
    background: var(--trak-barva);
    color:#fff;
    padding:8px 44px;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    line-height:1;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    z-index:15;
}
/* “Zobci” – konca traku */
.garancija-ribbon:before,
.garancija-ribbon:after{
    content:"";
    position:absolute;
    top:100%;
    width:0; height:0;
    border-top:10px solid var(--trak-barva);
}
.garancija-ribbon:before{
    left:0;
    border-right:10px solid transparent;
}
.garancija-ribbon:after{
    right:0;
    border-left:10px solid transparent;
}

/* Majhen pop vnosa: rahla “pulse” animacija ob nalaganju */
@keyframes garancijaPulse{
    0%{transform:translateX(-50%) scale(0.9);}
    60%{transform:translateX(-50%) scale(1.05);}
    100%{transform:translateX(-50%) scale(1);}
}
.garancija-ribbon{
    animation:garancijaPulse .6s ease-out;
}

/* GLOBAL "hidden" util */
.xyz-display--hidden,.product-main .price.product-page-price {display:none;}

/* container ------------------------------------------------------ */
#xyz-preview{
    position:relative;
    margin-top:1rem;
    padding:1rem 1.5rem 1.25rem;
    border:1px solid #e4e4e4;
    background:#fcfcfb;
    font-size:1rem;
    line-height:1.4;
}

/* spinner -------------------------------------------------------- */
.xyz-spinner{
    width:24px;height:24px;
    border:3px solid #ddd;border-top-color:#444;
    border-radius:50%;
    animation:xyz-spin .8s linear infinite;
    position:absolute;top:1rem;right:1rem;display:none;
}
#xyz-display-wrap.xyz-loading .xyz-spinner{display:block;}
@keyframes xyz-spin{to{transform:rotate(360deg);}}

/* visual (fence + stack) ---------------------------------------- */
.xyz-visual{position:relative;width:100%;padding:4px 9px;}
.xyz-visual[data-clip-color="Gozdno zelena"] .xyz-clip {
    background-color: #2e5130 !important;
}
.xyz-visual[data-clip-color="Antracit siva"] .xyz-clip {
    background-color: #3f4042 !important;
}
.xyz-visual[data-clip-color="Kavna rjava"] .xyz-clip {
    background-color: #4d2d15 !important;
}
.xyz-visual[data-clip-color="Perla siva"] .xyz-clip {
    background-color: #bfbfbf !important;
}
.xyz-visual[data-clip-color="Polarna bela"] .xyz-clip {
    background-color: #f3f3f3 !important;
}

.xyz-fence{
    position:absolute;inset:0;z-index:1;border-radius:5px;
    background:
            repeating-linear-gradient(#2a2e35 0 2px, transparent 2px 22px),
            repeating-linear-gradient(90deg,#2a2e35 0 2px,transparent 2px 14px),
            linear-gradient(90deg,#2a2e35 0 6px,transparent 6px calc(100% - 6px),
            #2a2e35 calc(100% - 6px) 100%);
    opacity:.55;
}

.xyz-stack{
    display:flex;flex-direction:column-reverse;gap:1px;
    position:relative;z-index:2;
}
.xyz-strip{
    display:flex;align-items:center;width:100%;border-radius:5px;
    box-shadow:0 2px 4px rgba(0,0,0,.12);overflow:hidden;
}
.xyz-strip__label{
    margin-left:10px;font-size:.8rem;font-weight:600;
    text-shadow:0 1px 1px rgba(0,0,0,.45);
}

/* totals table -------------------------------------------------- */
.xyz-totals{margin-bottom:1rem;}
.xyz-table{width:100%;border-collapse:collapse;font-size:.95rem;}
.xyz-table th,.xyz-table td{padding:6px 8px;}
.xyz-table thead{background:#f1f1f1;font-weight:600;}
.xyz-table tbody tr{background:#fafafa;}

/* hide Woo’s original variation price */
.woocommerce-variation-price{display:none!important;}

/* style the new price line */
#xyz-price-holder{margin-bottom:.8rem;font-size:1.05rem;font-weight:600;}

/* Make room for end-clips inside every tape strip */
.xyz-strip{
    position:relative;
    overflow:visible;
}

/* Two end-clips per strip (shown only when bump is ticked) */
.xyz-clip{
    position:absolute;
    top:-2px;                    /* 1 px above the strip   */
    height:calc(100% + 4px);     /* 1 px below the strip   */
    width:6px;
    border-radius:2px;
    box-shadow:0 1px 2px rgba(0,0,0,.25);
    pointer-events:none;         /* never grab clicks      */
}
.xyz-clip--left  { left:-3px;  } /* half outside the strip */
.xyz-clip--right { right:-3px; }

/* -----------------------------------------------------------------
   Clip bump card – v4.1
   -----------------------------------------------------------------*/
.sticky-add-to-cart {
    background: #f7f0e5 !important;
}
.woocommerce-variation-add-to-cart {
    padding: 0 !important;
}
.clip-bump{margin:0 0 1.5rem;font-size:1rem;line-height:1.4;overflow:hidden;border:1px solid;box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;}
.clip-bump__row1{background:#f2f2f2;padding:1rem;transition:.25s}
.clip-bump--active .clip-bump__row1{background:#fff2b3;border-bottom:1px solid #f5d348}

.clip-bump__toggle{display:flex;align-items:center;gap:.75rem;cursor:pointer}
.clip-bump__toggle input{display:none}
.clip-bump__fakebox{width:24px;height:24px;border:2px solid #666;border-radius:4px;background:#fff;position:relative;transition:.25s}
.clip-bump--active .clip-bump__fakebox{background:#4caf50;border-color:#4caf50}
.clip-bump--active .clip-bump__fakebox:after{content:"";position:absolute;top:3px;left:7px;width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.clip-bump__title{font-weight:700;font-size:1.05rem}
.clip-bump__pieces{font-weight:600}
.clip-bump__desc{display:block;margin-top:.35rem;font-size:.875rem;color:#555}

.clip-bump__row2{display:none;border:1px solid #e0e0e0;border-top:none;padding:1rem;gap:1rem;align-items:flex-start;background:#ffffff}
.clip-bump--active .clip-bump__row2{display:flex}

.clip-bump__img{flex:0 0 33%}
.clip-bump__img img{width:100%;height:auto;border-radius:4px;display:block}

.clip-bump__details{flex:1}
.clip-bump__details select{width:100%;max-width:260px;margin-bottom:.6rem}

/* custom qty */
.clip-bump__qty{margin-bottom:.6rem}
.clip-bump__qty .qty{width:80px;text-align:center}
.cb-btn{cursor:pointer;padding:0 12px;line-height:2rem;border:1px solid #ddd;background:#fafafa;margin: 0 !important;}
.cb-btn:active{background:#eee}

.clip-bump__price{font-weight:700}
.clip-bump--waiting{display:none}

/* === SALE BADGE (shiny) === */
.f-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    color: #fff;
    font-family: inherit;
    border-bottom-right-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
    overflow: hidden;
    pointer-events: none;
    transform: translateZ(0);
}
.f-badge--sale {
    background: linear-gradient(135deg, #d10e0e 0%, #a70707 60%, #7f0505 100%);
}
.f-badge__top { display: flex; gap: 6px; align-items: center; }
.f-badge__flash {
    background: #000; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; letter-spacing: .06em; font-weight: 800;
}
.f-badge__percent {
    font-weight: 900; font-size: 18px; line-height: 1;
    text-shadow: 0 2px 0 rgba(0,0,0,.25);
    animation: f-bounce 3s ease-in-out infinite;
}
.f-badge__save { margin-top: 6px; font-size: 12px; font-weight: 700; }
.f-badge__save strong .amount { color: #fff !important; }

.f-badge__shine{
    content:"";
    position:absolute;
    top:0; bottom:0;
    left:-40%; right:-40%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
    transform: translateX(-60%);
    animation: f-shine 4.2s linear infinite;
    will-change: transform;
}

/* Animations */
@keyframes f-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    12%      { transform: translateY(-1px) scale(1.04); }
    24%      { transform: translateY(0) scale(1); }
}
@keyframes f-shine {
    0%   { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}

/* Optional: tiny Flatsome nicety so badge doesn’t get pushed by theme wrappers */
.badge-container { margin: 0 !important; }

@media screen and (max-width: 768px) {
    .f-badge {
        padding: 6px 10px;
    }
    .f-badge .f-badge__save, .f-badge .f-badge__flash {
        font-size: 10px !important;
    }
    .f-badge .f-badge__percent {
        font-size: 14px !important;
    }
}