/**
 * PROgraf Plus — Darila Product Frontend Styling (1.42.5)
 *
 * Layout: 2-stolpčni (galerija | konfig), responsivno → 1-stolpčni mobile.
 * Stilski jezik: skladen s tekstil-product.css (zelena 2a6049, beige acccent).
 */

/* ============== ROOT WRAPPER ============== */
.prograf-darila {
    max-width: 1440px;   /* 1.48.131: poenoteno s tiskovinami (prej 1280px) */
    margin: 24px auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color: #222;
    overflow-x: clip;   /* 1.48.147: preprečimo horizontal overflow children-jev */
    box-sizing: border-box;
}
/* 1.48.147: global box-sizing reset za vse children (preprečimo accidental overflow zaradi padding/border) */
.prograf-darila *,
.prograf-darila *::before,
.prograf-darila *::after {
    box-sizing: border-box;
}

/* ============== HEADER ============== */
.prograf-darila__header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 24px;
}
.prograf-darila__header-text {
    flex: 1;
    min-width: 0;
}
.prograf-darila__title {
    /* 1.48.132: poenoteno s tiskovinami (prej 28px / 700) */
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: #1f2937;
}
.prograf-darila__meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}
.prograf-darila__sku {
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 13px;
    color: #666;
}
.prograf-darila__sku strong {
    color: #222;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
}
.prograf-darila__type-tag {
    background: #fef9e7;
    color: #8a6914;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 12px;
}
.prograf-darila__tag {
    background: #f0f7f4;
    color: var(--prograf-primary, #2a6049);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
}
.prograf-darila__short-desc {
    margin: 8px 0 0;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

/* ============== BODY 2-COL ============== */
/* 1.48.131: Poenoteno s tiskovinami — enako velika stolpca, gap 48px, breakpoint 1100px.
 * Pred 1.48.131: konfigurator stolpec je bil omejen na max 480px,
 * kar je pri vidiku desktop produktov stiskalo qty tabelo in line items. */
.prograf-darila__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 1100px) {
    .prograf-darila__body {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ============== LEFT: gallery (1.48.139: flex row — main image | vertikalni thumb stack desno) ============== */
.prograf-darila__gallery {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
}
body.single-product .prograf-darila__gallery-main,
.prograf-darila__gallery-main {
    /* 1.48.142: fixed flex-basis 480 px (prej flex:1 — slika je rasla čez celoten levi stolpec) */
    flex: 0 0 480px !important;
    width: 480px !important;
    max-width: 480px !important;
    min-width: 0;
    background: #fff !important;
    border: 1px solid var(--prograf-border, #e5e7eb) !important;
    border-radius: var(--prograf-radius, 8px) !important;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.prograf-darila__gallery-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 0 !important;
}
/* Thumb stack: vertikalni column z arrow ▲/▼ gumboma (1.48.145: container 480 = main height, 3 vidni thumbi 132 px) */
.prograf-darila__gallery-thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
    margin-top: 0 !important;
    width: 132px;
    height: 480px !important;   /* match main image height */
    flex-shrink: 0;
    flex-wrap: nowrap !important;
}
.prograf-darila__thumbs-arrow {
    width: 132px;
    height: 26px;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    cursor: pointer;
    color: #6b7280 !important;
    font-size: 12px;
    line-height: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, opacity 0.15s;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
    text-shadow: none !important;
    flex-shrink: 0;
}
.prograf-darila__thumbs-arrow:hover:not(:disabled) {
    background: #e5e7eb !important;
    color: #1f2937 !important;
}
.prograf-darila__thumbs-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
/* 1.48.147: toggle ikon — desktop ▲/▼ (vertical), mobile ◄/► (horizontal) */
.prograf-darila__thumbs-arrow-icon-h {
    display: none;
}
.prograf-darila__thumbs-arrow-icon-v {
    display: inline;
}
@media (max-width: 700px) {
    .prograf-darila__thumbs-arrow-icon-v {
        display: none;
    }
    .prograf-darila__thumbs-arrow-icon-h {
        display: inline;
    }
}
.prograf-darila__thumbs-viewport {
    /* 1.48.145: flex:1 → raste do 480 - 26×2 - 6×2 = 416 px (= 3 × 132 + 2 × 10) */
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    /* 1.51.0.138: overflow-y: auto (prej "hidden") da puščice ▲/▼ dejansko premikajo thumbe. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    width: 132px;
    flex-shrink: 1 !important;
    scroll-behavior: smooth;
    /* Skrij scrollbar (vizualna čistost), ohrani funkcionalnost */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.prograf-darila__thumbs-viewport::-webkit-scrollbar {
    display: none;
}
/* Mobile: thumbs spodaj kot vrstica (kot prej) */
@media (max-width: 700px) {
    /* 1.48.147: na mobile horizontal slider — 3 vidni thumbs + ◄/► arrows na bočni strani.
     * Layout: [◄] [thumb] [thumb] [thumb] [►] — vse na isti vrstici pod main sliko. */
    .prograf-darila {
        max-width: 100vw !important;
        overflow-x: hidden !important;   /* preprečimo horizontal scroll cele strani */
    }
    .prograf-darila__gallery {
        flex-direction: column;
        gap: 12px;
    }
    .prograf-darila__gallery-thumbs {
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
        gap: 6px;
        align-items: stretch;
    }
    .prograf-darila__thumbs-viewport {
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 0 !important;   /* zavzame preostali prostor med ◄ in ► */
        min-width: 0 !important;
        /* 1.51.0.139: max-width: 100% in width: 0 (s flex-grow) preprečita, da bi
         * viewport zrasel po vsoti thumbov in push-al ► gumb izven viewporta. */
        width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        /* 1.51.0.138: overflow-x: auto (prej "hidden") da puščice in touch swipe dejansko premikajo thumbe. */
        overflow-x: auto !important;
        overflow-y: visible !important;
        flex-wrap: nowrap !important;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* Skrij scrollbar (vizualna čistost), ohrani funkcionalnost */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .prograf-darila__thumbs-viewport::-webkit-scrollbar {
        display: none;
    }
    .prograf-darila__thumbs-viewport .prograf-darila-thumb {
        scroll-snap-align: start;
    }
    /* Thumb size na mobile: kvadrati, vsak ~28% širine zaslona da se vidijo 3
     * (in del 4. da je jasno, da je slider). 1.51.0.139: uporabimo fiksno
     * vw enoto namesto % viewporta (% je glede na scrollWidth, ne clientWidth). */
    body.single-product .prograf-darila__thumbs-viewport [role="button"].prograf-darila-thumb,
    body.single-product .prograf-darila__thumbs-viewport button.prograf-darila-thumb,
    .prograf-darila .prograf-darila-thumb {
        width: 28vw !important;
        max-width: 132px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
    }
    /* Arrows: pokažemo, vendar horizontal layout */
    .prograf-darila__thumbs-arrow {
        display: flex !important;
        width: 32px !important;
        height: auto !important;
        min-height: 60px !important;
        align-self: stretch;
        flex-shrink: 0 !important;
    }
    /* Mobile main image: full-width (override desktop fixed 480px) */
    body.single-product .prograf-darila__gallery-main,
    .prograf-darila__gallery-main {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

.prograf-darila__description {
    margin-top: 24px;
}
.prograf-darila__description h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}
.prograf-darila__description-body {
    color: #444;
    font-size: 14px;
    line-height: 1.6;
}
.prograf-darila__description-body p {
    margin: 0 0 12px;
}

/* ============== RIGHT: config (tekstil-style: e5e7eb border, 24px padding) ============== */
.prograf-darila__config {
    /* 1.48.132: poenoteno s tiskovinami — NI več wrapper card.
     * Vsak section dobi svojo card-style ovoj (background + border + radius + padding) v .prograf-darila-section.
     * Sticky ostane: ko stranka scrolla galerijo levo, konfigurator desno ostane vsiden. */
    position: sticky;
    top: 20px;
}
.prograf-darila__sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.prograf-darila__loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 14px;
}
.prograf-darila__loading .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top-color: var(--prograf-primary, #2a6049);
    border-radius: 50%;
    animation: prograf-darila-spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes prograf-darila-spin {
    to { transform: rotate(360deg); }
}

.prograf-darila-error {
    color: #b00020;
    background: #fef0f0;
    border: 1px solid #f5c6cb;
    padding: 12px;
    border-radius: 4px;
    font-size: 13px;
}

/* ============== SECTIONS (1.48.132: tiskovinski card style — vsak section svoj card) ============== */
.prograf-darila-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px 20px;
}
.prograf-darila-section:last-child {
    margin-bottom: 0;
}
.prograf-darila-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.prograf-darila-section__num {
    /* 1.48.134: Sivi numbered badge skladno s tiskovinami (prej zelen). */
    width: 22px;
    height: 22px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.prograf-darila-section__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1f2937;
}
.prograf-darila-section__body {
    /* 1.48.132: brez padding-left, ker je section sam card-padded.
     * (Prej je bil padding-left 32px, da bi indentiral pod numbered badge.) */
    padding-left: 0;
}
.prograf-darila-empty {
    margin: 0;
    color: #999;
    font-style: italic;
    font-size: 13px;
}

/* ============== COLORS (tekstil-style: kompaktni krogi) ============== */
.prograf-darila-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.prograf-darila-color {
    width: 36px;
    height: 36px;
    border: 2px solid var(--prograf-border, #e5e7eb);
    border-radius: 50%;
    cursor: pointer;
    padding: 2px;
    background: #fff;
    transition: all 0.15s ease;
    position: relative;
    /* FIX: Jajčaste barve (paralelno tekstilu) — flex parent ne sme razstegniti gumb */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}
.prograf-darila-color:hover {
    border-color: #9ca3af;
    transform: scale(1.05);
}
.prograf-darila-color.is-current {
    border-color: var(--prograf-primary, #2a6049);
    border-width: 3px;
    transform: scale(1.1);
}
.prograf-darila-color__inner {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

/* Hint pod swatchi */
.prograf-darila-color-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #4b5563;
}
.prograf-darila-color-hint strong {
    color: var(--prograf-primary, #2a6049);
}
.prograf-darila-color-tip {
    color: #6b7280;
    font-size: 12px;
    font-style: italic;
}

/* ============== VARIANTS ============== */
.prograf-darila-variants {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.prograf-darila-variant {
    padding: 8px 16px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}
.prograf-darila-variant:hover {
    border-color: var(--prograf-primary, #2a6049);
}
.prograf-darila-variant.is-active {
    background: var(--prograf-primary, #2a6049);
    color: #fff;
    border-color: var(--prograf-primary, #2a6049);
}

/* ============== TECHNIQUES + POSITIONS ============== */
.prograf-darila-techniques {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.prograf-darila-technique {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}
.prograf-darila-technique:hover {
    border-color: var(--prograf-primary, #2a6049);
}
.prograf-darila-technique.is-active {
    background: var(--prograf-primary, #2a6049);
    color: #fff;
    border-color: var(--prograf-primary, #2a6049);
}
.prograf-darila-technique__icon {
    font-size: 14px;
}
.prograf-darila-technique small {
    opacity: 0.85;
    font-size: 11px;
    margin-left: 4px;
}

/* »Brez tiska« opcija — vidno ločena (subtle dashed border) */
.prograf-darila-technique--none {
    border-style: dashed;
    color: #888;
}
.prograf-darila-technique--none .prograf-darila-technique__icon {
    color: #aaa;
    font-weight: 700;
}
.prograf-darila-technique--none.is-active {
    background: #555;
    color: #fff;
    border-color: #555;
    border-style: solid;
}
.prograf-darila-technique--none.is-active .prograf-darila-technique__icon {
    color: #fff;
}

.prograf-darila-positions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
}
.prograf-darila-positions h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.prograf-darila-positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.prograf-darila-position-card {
    display: block;
    border: 1px solid var(--prograf-border, #e5e7eb);
    border-radius: var(--prograf-radius, 8px);
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s;
    position: relative;
}
.prograf-darila-position-card:hover {
    border-color: var(--prograf-primary, #2a6049);
}
.prograf-darila-position-card.is-on {
    border-color: var(--prograf-primary, #2a6049);
    border-width: 2px;
    background: #f0f7f4;
}
.prograf-darila-position-cb {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}
.prograf-darila-position-card__thumb {
    background: #fafafa;
    padding: 8px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prograf-darila-position-card__thumb svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.prograf-darila-position-card__thumb-empty {
    color: #ccc;
    font-size: 24px;
}
.prograf-darila-position-card__body {
    padding: 8px 10px;
    border-top: 1px solid #f0f0f0;
}
.prograf-darila-position-card__name {
    font-size: 12px;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
}
.prograf-darila-position-card__view {
    margin-top: 2px;
    display: inline-block;
    background: #fef9e7;
    color: #8a6914;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}
.prograf-darila-position-card__meta {
    margin-top: 4px;
    font-size: 11px;
    color: #888;
}

/* ============== QTY STEPPER (tekstil-style: composit z border okoli celote) ============== */
.prograf-darila-qty-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 1.51.0.94: stepper identičen tiskovinskemu (.prograf-qty-stepper).
   Group obsega [−][input][+] v eni vrstici z border-jem okoli. */
.prograf-darila-qty-stepper__group {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1.5px solid #cfd4da !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 0 !important;
}

button.prograf-darila-qty-btn,
.prograf-darila-qty-stepper__group button.prograf-darila-qty-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    background-image: none !important;
    color: #6b7280 !important;
    cursor: pointer;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    box-sizing: border-box !important;
    transition: all 0.15s !important;
}
button.prograf-darila-qty-btn:hover {
    background: #e8f3ee !important;
    color: var(--prograf-primary, #2a6049) !important;
}
button.prograf-darila-qty-btn::before,
button.prograf-darila-qty-btn::after {
    display: none !important;
    content: none !important;
}

input#prograf-darila-qty-input,
.prograf-darila-qty-stepper input#prograf-darila-qty-input {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 44px !important;
    min-height: 44px !important;
    text-align: center !important;
    border: 0 !important;
    border-left: 1.5px solid #cfd4da !important;
    border-right: 1.5px solid #cfd4da !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: #fff !important;
    color: #1f2937 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    font-variant-numeric: tabular-nums !important;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    flex: 0 0 90px !important;
}
input#prograf-darila-qty-input::-webkit-outer-spin-button,
input#prograf-darila-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
input#prograf-darila-qty-input:focus {
    outline: none !important;
    background: #e8f3ee !important;
}

.prograf-darila-qty-meta {
    color: #888;
    font-size: 12px;
}

/* ============== PRESETS TABLE ============== */
.prograf-darila-presets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.prograf-darila-presets-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #777;
    font-weight: 600;
}
.prograf-darila-presets-table__price {
    text-align: right;
}
.prograf-darila-presets-table__row {
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}
.prograf-darila-presets-table__row:hover {
    background: #f9f9f9;
}
.prograf-darila-presets-table__row td {
    padding: 12px 10px;
    vertical-align: middle;
}
.prograf-darila-presets-table__row.is-current {
    background: #f0f7f4;
}
.prograf-darila-presets-table__row.is-popular .prograf-darila-presets-table__star {
    color: #f5b62b;
    font-size: 14px;
}
.prograf-darila-presets-table__radio {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    transition: all 0.1s;
}
.prograf-darila-presets-table__row:hover .prograf-darila-presets-table__radio {
    border-color: var(--prograf-primary, #2a6049);
}
.prograf-darila-presets-table__radio.is-checked {
    border-color: var(--prograf-primary, #2a6049);
    background: radial-gradient(circle, var(--prograf-primary, #2a6049) 40%, transparent 45%);
}

/* ============== PRICE BREAKDOWN ============== */
.prograf-darila-price__hero {
    text-align: right;
    padding: 12px 0;
    margin-bottom: 8px;
}
.prograf-darila-price__hero-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #777;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.prograf-darila-price__hero-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--prograf-primary, #2a6049);
}

.prograf-darila-price__breakdown {
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
    margin-top: 10px;
}
.prograf-darila-price__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
    color: #555;
}
.prograf-darila-price__line-amount {
    font-weight: 600;
    color: #222;
    white-space: nowrap;
}

.prograf-darila-price__totals {
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
    margin-top: 10px;
}
.prograf-darila-price__total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    color: #444;
}
.prograf-darila-price__total-row--final {
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
    margin-top: 4px;
    font-size: 16px;
    color: #222;
}
.prograf-darila-price__total-row--final strong {
    color: var(--prograf-primary, #2a6049);
    font-size: 18px;
}

/* 1.48.150/151: .prograf-darila-cta uporablja iste razrede kot tiskovinski .prograf-btn--primary,
 * VENDAR baseline ne deluje znotraj .prograf-darila scope-a (verjetno Flatsome theme povozi).
 * Eksplicitno force-amo styling z !important + visoka specifičnost. */
body.single-product .prograf-darila button.prograf-darila-cta,
.prograf-darila .prograf-darila-cta {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding: 18px 28px !important;
    background: var(--prograf-primary, #2a6049) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: background 0.15s;
    white-space: nowrap;
    min-height: 48px;   /* fallback for height collapse */
}
body.single-product .prograf-darila button.prograf-darila-cta:hover:not(:disabled),
.prograf-darila .prograf-darila-cta:hover:not(:disabled) {
    background: #1f4936 !important;
    color: #ffffff !important;
}
.prograf-darila .prograf-darila-cta:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* ============================================================
 * 1.42.5 — Skrij WooCommerce/Flatsome default product elements
 * (slika kategorije/featured image, default summary, tabs)
 * ============================================================ */
body.prograf-product-page.single-product .product > .row,
body.prograf-product-page.single-product .product > .summary,
body.prograf-product-page.single-product .product > .images,
body.prograf-product-page.single-product .product .single-product-content,
body.prograf-product-page.single-product .product-info-main,
body.prograf-product-page.single-product .single-product-main-image-container,
body.prograf-product-page.single-product .product-gallery-slider,
body.prograf-product-page.single-product .woocommerce-product-gallery,
body.prograf-product-page.single-product .product-image,
body.prograf-product-page.single-product .product-thumbnails,
body.prograf-product-page.single-product .product-page-image,
body.prograf-product-page.single-product .product-summary,
body.prograf-product-page.single-product .price-on-sale,
body.prograf-product-page.single-product .yith-wcwl-add-to-wishlist,
/* 1.51.0.132: ODSTRANJENI .related in .upsells iz skritja — povezani izdelki naj se prikažejo pod konfiguratorjem. */
body.prograf-product-page.single-product .product-section.product-extras,
body.prograf-product-page.single-product div.product:not(.prograf-darila):not(.prograf-tekstil) > *:not(.prograf-darila):not(.prograf-tekstil):not(.related):not(.upsells) {
    display: none !important;
}

/* Flatsome theme — single product wrapper element s sliko */
body.prograf-product-page.single-product .product-cat-image,
body.prograf-product-page.single-product .single-prod-cat-img,
body.prograf-product-page.single-product .product-categories-image,
body.prograf-product-page.single-product .term-thumbnail,
body.prograf-product-page.single-product .cat-image {
    display: none !important;
}

/* ============================================================
 * 1.42.6 — Theme button reset za vse prograf-darila button-e
 * (Flatsome ima default before/after pseudoelement-e z width/height,
 *  uppercase transform, gradient bg ki razstegnejo gumb)
 * ============================================================ */
button[class^="prograf-darila-"],
button[class*=" prograf-darila-"] {
    background-image: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
    min-height: 0 !important;
    min-width: 0 !important;
}
button[class^="prograf-darila-"]::before,
button[class*=" prograf-darila-"]::before,
button[class^="prograf-darila-"]::after,
button[class*=" prograf-darila-"]::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Color swatch krogi: dvojno-zagotovi okroglost — Flatsome dela override
 * preko padding/margin/min-height na vseh button elementih. */
.prograf-darila-color {
    margin: 0 !important;
    line-height: 0 !important;
}
 * ============================================================ */
/* 1.48.140/141/145: thumb size 132×132 (3 vidni v 416 px viewport-u, container = main image 480 px) */
body.single-product .prograf-darila__thumbs-viewport [role="button"].prograf-darila-thumb,
body.single-product .prograf-darila__thumbs-viewport button.prograf-darila-thumb,
.prograf-darila .prograf-darila-thumb {
    width: 132px !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    padding: 4px !important;
    border: 2px solid var(--prograf-border, #e5e7eb) !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: 132px !important;
    transition: border-color 0.15s;
    box-sizing: border-box !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.prograf-darila-thumb img {
    width: 100%;
    height: 100%;
    /* 1.43.5: contain namesto cover */
    object-fit: contain;
    padding: 4px;
    border-radius: 4px;
    display: block;
}
.prograf-darila .prograf-darila-thumb:hover:not(.is-active) {
    border-color: #9ca3af !important;
}
.prograf-darila .prograf-darila-thumb.is-active {
    border-color: var(--prograf-primary, #2a6049) !important;
    border-width: 3px !important;
}

/* 1.42.5 — UI warning ko cene niso nastavljene */
.prograf-darila-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* ============================================================================
 * 1.48.129: POENOTITEV S TISKOVINAMI (reklamni izdelki = baseline)
 * ============================================================================
 *
 * Darila uporabljajo baseline UI razrede iz product.css za:
 *  - .prograf-qty-custom         (stepper + SKUPAJ card row)
 *  - .prograf-qty-stepper        (- input +)
 *  - .prograf-qty-divider        ("ALI IZBERI PREDNASTAVLJENO")
 *  - .prograf-qty-table          (preset table z radio | qty | cena | prihranek)
 *  - .prograf-product__pricing   (pricing wrapper)
 *  - .prograf-pricing__breakdown (line items)
 *  - .prograf-pricing__total     ("SKUPAJ z DDV" big card)
 *
 * Tukaj samo darila-specific dodatki + override-i.
 */

/* Muted breakdown row (npr. »Cena za kos brez DDV« kot dodatna info) */
.prograf-darila .prograf-pricing__breakdown-row--muted span,
.prograf-darila .prograf-pricing__breakdown-row--muted strong {
    color: #777;
    font-size: 13px;
}

/* 1.48.149/150: CTA »Dodaj v povpraševanje« block odstranjen — zdaj inheritira styling iz
 * tiskovinskega .prograf-btn .prograf-btn--primary .prograf-btn--large (definirano v product.css).
 * Razlog: Flatsome theme dela override-e na butt-on barvi, ki so težko premagljivi z !important.
 * Z uporabo istih razredov kot tiskovine, CTA pristane v isti že-delujoči baseline sistem. */

/* Pri darilih je tabela v .prograf-darila-section__body — daj rahel padding popravek */
.prograf-darila-section__body .prograf-qty-divider {
    margin-top: 0;
}

/* ============================================================================
 * 1.48.132: presets-table sekcija nima header-ja
 * ============================================================================
 */

/* Section brez header-ja: presets-table sekcija nima section__head naslova,
 * ker je »ALI IZBERI PREDNASTAVLJENO« divider že znotraj tabele. */
.prograf-darila-section--no-head {
    /* Manjši padding zgoraj, ker ni header-ja */
    padding-top: 12px;
}

/* === Qty preset tabela: stolpcev ne dopuščamo zlomiti v dve vrstici === */
.prograf-darila .prograf-qty-table {
    table-layout: auto;
    width: 100%;
}
.prograf-darila .prograf-qty-table th,
.prograf-darila .prograf-qty-table td.prograf-qty-cell-price,
.prograf-darila .prograf-qty-table td.prograf-qty-cell-savings {
    white-space: nowrap;   /* "Cena/kos", "Prihranek", cene, % — vse na 1 vrstici */
}
/* Qty cell SME wrappirati (zaradi popular badge-a) */
.prograf-darila .prograf-qty-table td.prograf-qty-cell-qty {
    white-space: normal;
}

/* Popular badge: inline manjši + ne razteguj cell-a navpično */
.prograf-darila .prograf-qty-popular-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9px;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

/* === Pricing breakdown: dolge labele (»Tehnika: LASERSKO GRAVIRANJE A — …«) === */
.prograf-darila .prograf-pricing__breakdown-row {
    align-items: baseline;
    gap: 12px;
}
.prograf-darila .prograf-pricing__breakdown-row > span,
.prograf-darila .prograf-pricing__breakdown-row > em {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;   /* dopustimo break-line znotraj cele besede če je nujno */
}
.prograf-darila .prograf-pricing__breakdown-row > strong {
    flex: 0 0 auto;
    white-space: nowrap;
}
.prograf-darila .prograf-pricing__breakdown-row--muted > span,
.prograf-darila .prograf-pricing__breakdown-row--muted > strong {
    font-size: 12px;
}

/* ============================================================================
 * 1.48.133: MOBILE RESPONSIVE — po vzoru tiskovin (product.css @700px)
 * ============================================================================
 *
 * Trije breakpoint-i:
 *  - 1100 px: že je 1-stolpčni layout (defined zgoraj), tukaj samo dodatno odpravim sticky.
 *  - 700 px:  main mobile tweaks (font sizes, paddings, tabela).
 *  - 380 px:  zelo ozki ekrani (mini telefoni) — pozicije v 1 stolpcu.
 */

@media (max-width: 1100px) {
    /* Pri stacked layoutu sticky behaviour nima smisla — config bi bil prilepljen
     * pod galerijo in onemogočil normalno scrollanje. */
    .prograf-darila__config {
        position: static;
        top: auto;
    }
}

@media (max-width: 700px) {
    .prograf-darila {
        padding: 0 12px;       /* 1.48.133: down od 16px */
        margin: 12px auto;
        /* 1.48.163: padding-bottom da CTA gumb »Dodaj v povpraševanje« ni prekrit s
         * Flatsome mobile sticky footer-jem (»add to cart« bar). Flatsome footer je cca 60px. */
        padding-bottom: 80px;
    }

    /* Title: 32px je na mobile prevelik */
    .prograf-darila__title {
        font-size: 24px;
        letter-spacing: -0.3px;
    }
    .prograf-darila__header {
        padding: 16px 0 12px;
        margin-bottom: 20px;
    }

    /* Sections: manjši padding znotraj card-a */
    .prograf-darila-section {
        padding: 14px;
    }
    .prograf-darila__sections {
        gap: 16px;   /* down od 24px */
    }
    .prograf-darila-section__title {
        font-size: 13px;
    }
    .prograf-darila-section__num {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    /* Qty stepper: manjši gumb-i + input (kot tiskovinski mobile) — desktop border-left/right ohranjen */
    .prograf-darila .prograf-qty-stepper input {
        width: 70px !important;
        height: 38px !important;
        line-height: 38px !important;
        font-size: 15px !important;
        flex: 0 0 70px !important;
    }
    .prograf-darila .prograf-qty-stepper__btn {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        flex: 0 0 38px !important;
        font-size: 20px !important;
    }
    /* 1.48.148: Qty custom row na mobile — wrap-amo, label + stepper v 1. vrstici, CENA/KOS v 2.
     * Force-amo s !important (Flatsome baseline ima margin-left: auto + nowrap defaults). */
    .prograf-darila .prograf-qty-custom {
        gap: 10px !important;
        row-gap: 12px !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    .prograf-darila .prograf-qty-custom__price {
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        text-align: right !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: row !important;   /* label + value v isti vrstici, lažje skenirati */
        align-items: baseline !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }
    .prograf-darila .prograf-qty-custom__price-label {
        order: 1;
    }
    .prograf-darila .prograf-qty-custom__price-value {
        order: 2;
        font-size: 22px !important;
    }
    /* Stepper ne sme rasti čez viewport */
    .prograf-darila .prograf-qty-stepper {
        flex-shrink: 0 !important;
    }
    .prograf-darila .prograf-qty-stepper input {
        width: 60px !important;   /* down od 70-90px */
    }
    .prograf-darila .prograf-qty-stepper__btn {
        width: 36px !important;
        height: 38px !important;
    }

    /* 1.48.148: Qty preset tabela — manjši padding/font + Prihranek stolpec ne sme overflowi */
    .prograf-darila .prograf-qty-table {
        table-layout: auto !important;
        font-size: 12px !important;
    }
    .prograf-darila .prograf-qty-table th,
    .prograf-darila .prograf-qty-table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    .prograf-darila .prograf-qty-table th:first-child,
    .prograf-darila .prograf-qty-table td:first-child {
        padding-left: 4px !important;
        padding-right: 0 !important;
        width: 24px !important;   /* radio cell ozak */
    }
    .prograf-darila .prograf-qty-table th:last-child,
    .prograf-darila .prograf-qty-table td:last-child {
        padding-right: 4px !important;
    }
    /* Cell-i ki kažejo cene/prihranek: nowrap, manjši font, tighter */
    .prograf-darila .prograf-qty-cell-price,
    .prograf-darila .prograf-qty-cell-savings {
        white-space: nowrap !important;
        font-size: 12px !important;
    }
    /* Popular badge na mobile: cel novo vrstico pod številko (ne stiska prihranek stolpec) */
    .prograf-darila .prograf-qty-popular-badge {
        display: inline-block !important;
        margin-left: 0 !important;
        margin-top: 2px !important;
        font-size: 8px !important;
        padding: 1px 4px !important;
    }
    .prograf-darila .prograf-qty-cell-qty {
        white-space: normal !important;
    }
    /* Section padding manjši na mobile (bilo 14 px) */
    .prograf-darila-section {
        padding: 12px !important;
    }

    /* Pricing breakdown: manjši font, tighter gap */
    .prograf-darila .prograf-pricing__breakdown-row {
        font-size: 12px;
        gap: 8px;
    }
    .prograf-darila .prograf-pricing__breakdown-row--muted > span,
    .prograf-darila .prograf-pricing__breakdown-row--muted > strong {
        font-size: 11px;
    }
    .prograf-darila .prograf-pricing__total-value {
        font-size: 24px;   /* down od ~30px */
    }
    .prograf-darila .prograf-pricing__total-label {
        font-size: 11px;
    }

    /* Tehnike (Brez tiska + LASERSKO GRAVIRANJE buttons): naj wrap-ajo, full-width if needed */
    .prograf-darila-technique {
        font-size: 13px;
        padding: 8px 10px;
    }

    /* Pozicije: 2 v vrstici je verjetno preveč na mobile (140px min × 2 + gap = ~300px) */
    .prograf-darila-positions-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }

    /* CTA gumb na mobile — manjši padding, ohrani vse force-d defaults */
    .prograf-darila .prograf-darila-cta {
        padding: 14px 16px !important;
        font-size: 15px !important;
    }

    /* Color swatches malo manjši, da pri 13+ barvah ne porabijo preveč vrstic */
    .prograf-darila-color {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 380px) {
    /* Zelo ozki ekrani: pozicije v 1 stolpcu (full-width tiles) */
    .prograf-darila-positions-grid {
        grid-template-columns: 1fr;
    }
    /* Title še manjši */
    .prograf-darila__title {
        font-size: 22px;
    }
}

/* ============================================================================
 * 1.48.134: »ALI IZBERI PREDNASTAVLJENO« divider linije
 * ============================================================================
 *
 * Pri darilih Flatsome theme verjetno zatre pseudo elemente (overrides na
 * *::before / *::after agresivni). Eksplicitno force-amo content + visual
 * z visoko specifičnostjo selektorja in `display: block` da Flatsome ne ubije.
 */
.prograf-darila .prograf-qty-divider {
    position: relative;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 14px 0 10px;
}
.prograf-darila .prograf-qty-divider::before,
.prograf-darila .prograf-qty-divider::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    top: 50%;
    width: calc(50% - 130px);
    height: 1px;
    background: #e8e8e8;
}
.prograf-darila .prograf-qty-divider::before { left: 0; }
.prograf-darila .prograf-qty-divider::after { right: 0; }

/* ============================================================================
 * 1.48.136: STRUKTURA SKLADNA S TISKOVINAMI
 * ============================================================================
 *
 *  - Qty + presets v ENEM card-u (znotraj #prograf-darila-section-qty)
 *  - CTA gumb v LASTNEM section-u brez card-a (transparent)
 *  - SKUPAJ z DDV total z velikim font-om (force override Flatsome)
 *  - Pricing summary block ločen z razmakom od line items-ov
 */

/* Qty section: stepper block + presets block sta vertikalna soseda v eni card-i */
.prograf-darila-qty-block {
    /* stepper row je tukaj */
}
.prograf-darila-presets-block {
    margin-top: 4px;   /* malo prostora od stepperja */
}

/* CTA section: brez card-a, brez padding-a — samostojni blok */
#prograf-darila-section-cta {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* SKUPAJ z DDV total: VELIKA cena (28px) — force override Flatsome z !important */
.prograf-darila .prograf-pricing__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e8e8e8;
}
.prograf-darila .prograf-pricing__total-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1f2937;
}
.prograf-darila .prograf-pricing__total-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--prograf-primary, #2a6049) !important;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Pricing summary blok (Skupaj brez DDV, DDV, Cena za kos): ločen od line items z razmakom */
.prograf-darila .prograf-pricing__breakdown {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed #e8e8e8;
}
.prograf-darila .prograf-pricing__summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}
.prograf-darila .prograf-pricing__summary .prograf-pricing__breakdown-row {
    color: #6b7280;
}
.prograf-darila .prograf-pricing__summary .prograf-pricing__breakdown-row strong {
    color: #1f2937;
    font-weight: 700;
}

/* ============================================================================
 * 1.48.137: Quantity selector — vizualna skladnost z tiskovinami
 * ============================================================================
 *
 *  - Selected row: svetlo zeleno ozadje (#f0f9f5)
 *  - Radio krogci: jasen border-color svetlo siv, dot zelen pri izbiri
 *  - Vse z !important, ker Flatsome theme agresivno povozi
 */

.prograf-darila .prograf-qty-row {
    cursor: pointer;
    transition: background 0.15s;
}
.prograf-darila .prograf-qty-row:hover:not(.is-selected) {
    background: #f8fafa !important;
}
.prograf-darila .prograf-qty-row.is-selected {
    background:color-mix(in srgb, var(--prograf-primary, #2a6049) 8%, #fff) !important;   /* baseline --c-primary-soft */
}

/* Radio button: jasno viden krog (override Flatsome reset) */
.prograf-darila .prograf-qty-radio {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d0d0d0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    transition: all 0.15s;
    box-sizing: border-box;
}
.prograf-darila .prograf-qty-row.is-selected .prograf-qty-radio {
    border-color: var(--prograf-primary, #2a6049) !important;
}
.prograf-darila .prograf-qty-radio__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.15s;
}
.prograf-darila .prograf-qty-row.is-selected .prograf-qty-radio__dot {
    background: var(--prograf-primary, #2a6049) !important;
}

/* ============================================================================
 * 1.48.138: Stepper border + table row dividers (force override Flatsome)
 * ============================================================================
 *
 * Flatsome theme agresivno povozi:
 *   - `input { border: 0 }` → stepper-input je brez border-left/right
 *   - `.prograf-qty-stepper` border ne deluje, ker theme uporabi `button { border: 0 }`
 *   - `td { border: 0 }` → tabela vrstice brez ločilne črte
 *
 * Eksplicitno z visoko specifičnostjo + !important.
 */

/* 1.48.153: Stepper — kopirana pravila iz tiskovinskega `.prograf-product` scope-a (product.css),
 * samo zamenjano na `.prograf-darila` scope. Tako sta tiskovine + darila pravzaprav identično styled. */
.prograf-darila .prograf-qty-stepper {
    display: inline-flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: none !important;
    border: 1.5px solid #d0d0d0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
body.single-product .prograf-darila .prograf-qty-stepper button.prograf-qty-stepper__btn,
body.single-product .prograf-darila button.prograf-qty-stepper__btn,
.prograf-darila button.prograf-qty-stepper__btn,
.prograf-darila .prograf-qty-stepper__btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    background-image: none !important;
    color: #374151 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.single-product .prograf-darila .prograf-qty-stepper button.prograf-qty-stepper__btn:hover,
.prograf-darila .prograf-qty-stepper__btn:hover {
    background: #d1d5db !important;
    background-color: #d1d5db !important;
    color: var(--prograf-primary, #2a6049) !important;
}
body.single-product .prograf-darila .prograf-qty-stepper button.prograf-qty-stepper__btn:active,
.prograf-darila .prograf-qty-stepper__btn:active {
    background: var(--prograf-primary, #2a6049) !important;
    background-color: var(--prograf-primary, #2a6049) !important;
    color: #fff !important;
}
.prograf-darila .prograf-qty-stepper input {
    height: 44px !important;
    line-height: 44px !important;
    border: 0 !important;
    border-left: 1.5px solid #d0d0d0 !important;
    border-right: 1.5px solid #d0d0d0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    /* Dodatno (Flatsome darila stran ima druge defaults kot tiskovine product stran) */
    width: 90px !important;
    flex: 0 0 90px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    font-variant-numeric: tabular-nums !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
}
.prograf-darila .prograf-qty-stepper input::-webkit-outer-spin-button,
.prograf-darila .prograf-qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.prograf-darila .prograf-qty-stepper input:focus {
    background:color-mix(in srgb, var(--prograf-primary, #2a6049) 8%, #fff) !important;
    outline: none !important;
}
/* Chrome autofill fix (rumena barva v input field-u) */
.prograf-darila .prograf-qty-stepper input:-webkit-autofill,
.prograf-darila .prograf-qty-stepper input:-webkit-autofill:hover,
.prograf-darila .prograf-qty-stepper input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #1f2937 !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    background: #fff !important;
}

/* Qty table: ločilne črte med vrsticami */
.prograf-darila .prograf-qty-table {
    width: 100%;
    border-collapse: collapse !important;
}
.prograf-darila .prograf-qty-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e8e8e8 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 14px;
    vertical-align: middle;
}
.prograf-darila .prograf-qty-table tr:last-child td {
    border-bottom: none !important;
}
.prograf-darila .prograf-qty-table th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    background: #f8fafa;
    border: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

/* 1.48.146: Mobile fallback za main image premaknjen v glavni @media (max-width: 700px) zgoraj. */

/* ============================================================
   1.51.0.62: Količinski popusti tabela (price breaks)
   ============================================================ */

.prograf-darila-price-breaks {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.prograf-darila-price-breaks__title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.prograf-darila-pb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.prograf-darila-pb-table th,
.prograf-darila-pb-table td {
    padding: 7px 4px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.prograf-darila-pb-table thead th {
    background: #fff;
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
}

.prograf-darila-pb-table__label {
    text-align: left !important;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    white-space: nowrap;
    padding-left: 8px !important;
}

.prograf-darila-pb-table th.is-current {
    background: var(--prograf-primary, #2a6049);
    color: #fff;
}

.prograf-darila-pb-table td.is-current {
    background: #e8f3ee;
    color: var(--prograf-primary, #2a6049);
    font-weight: 700;
}

.prograf-darila-pb-disc {
    font-weight: 600;
    color: var(--prograf-primary, #2a6049);
}

.prograf-darila-pb-base {
    color: #9ca3af;
    font-weight: 600;
}

/* 1.51.0.80: Dobavljivo prikaz v color hint */
.prograf-darila-stock-sep {
    color: #d1d5db;
    margin: 0 2px;
}
.prograf-darila-stock {
    color: var(--prograf-primary, #2a6049);
}
.prograf-darila-stock--empty {
    color: #c62828;
    font-weight: 600;
}
.prograf-darila-stock--inquiry {
    color: #9ca3af;
    font-style: italic;
}

/* 1.51.0.140: Hint poleg "POZICIJA" naslova (Slika je simbolična.) — manjši, manj poudarjen. */
.prograf-darila-position__hint {
    font-weight: 400;
    font-size: 0.75em;
    color: var(--c-text-muted, #64748b);
    margin-left: 4px;
    font-style: italic;
}

/* 1.55.4: Prenesi letak — enako kot pri tekstilu */
.prograf-darila__flyer-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:color-mix(in srgb, var(--prograf-primary, #2a6049) 8%, #fff);border:1.5px solid var(--prograf-primary, #2a6049);border-radius:6px;color:var(--prograf-primary, #2a6049);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,color .15s;float:right;margin:4px 0 0 16px}
.prograf-darila__flyer-btn:hover{background:var(--prograf-primary, #2a6049);color:#fff;text-decoration:none}
.prograf-darila__flyer-btn__icon{font-size:16px;line-height:1}
.prograf-darila__flyer-btn__text{line-height:1}
.prograf-darila__header-text::after{content:"";display:table;clear:both}
@media (max-width:600px){.prograf-darila__flyer-btn{float:none;display:flex;width:100%;justify-content:center;margin:12px 0 0}}

/* 1.83.0: simbolične pozicije (izdelki brez fotografij) */
.prograf-darila-technique__icon--svg{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:5px;padding:1px;line-height:0}
.prograf-darila-technique__icon--svg svg,.prograf-darila-technique__icon--svg img{width:22px;height:22px;display:block;object-fit:contain}
.prograf-darila-position-card.is-symbolic .prograf-darila-position-card__thumb{background:#f6f7f8}
.prograf-darila-position-card .prograf-darila-position-card__sub{display:block;background:none;padding:0;font-size:11.5px;color:#6b7280;text-transform:none;letter-spacing:0;font-weight:400}
.prograf-darila-sym-note{margin:12px 0 0;font-size:12.5px;color:#4b5563;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:9px 12px}
.prograf-darila-sym-note:before{content:"ℹ ";font-weight:700;color:#2ba39b}
.prograf-darila-sym-disc{margin:8px 0 0;font-size:12.5px;color:#7a4b06;background:#fff7e6;border:1px solid #f0d9a8;border-radius:8px;padding:9px 12px}
.prograf-darila-sym-disc:before{content:"⚠ ";font-weight:700}

/* ========================================================================
   1.88.55: Slika izbrane variacije nad količino (70 % širine)
   ======================================================================== */
.prograf-varhero, .prograf-tk-varhero { position: relative; padding: 12px 0 4px; text-align: center; }
.prograf-varhero__img, .prograf-tk-varhero__img {
    display: block; width: 70%; max-width: 420px; margin: 0 auto; aspect-ratio: 1 / 1; padding: 8px !important;
    background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; cursor: zoom-in;
    box-shadow: none !important; min-height: 0 !important; height: auto !important;
}
.prograf-varhero__img img, .prograf-tk-varhero__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.prograf-varhero__lab {
    position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 3px 10px 3px 5px; font-weight: 700; font-size: 13px; z-index: 1;
}
.prograf-varhero__lab i { width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 1px #e5e7eb; display: inline-block; }
.prograf-varhero { padding-top: 34px; margin-bottom: 10px; }
.prograf-varhero__meta { margin-top: 8px; font-size: 13px; color: #6b7280; }
.prograf-varhero__meta b { color: var(--prograf-primary, #4aa3a0); }
.prograf-tk-varhero { border-bottom: 1px solid #e5e7eb; padding: 12px 0; }
.prograf-varhero-lb { position: fixed; inset: 0; z-index: 999999; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 16px; }
.prograf-varhero-lb img { max-width: 100%; max-height: 90vh; background: #fff; border-radius: 8px; object-fit: contain; }
.prograf-varhero-lb__x { position: absolute; top: 12px; right: 12px; width: 34px !important; height: 34px !important; padding: 0 !important; min-height: 0 !important;
    border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.15); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }

/* 1.88.59: »Prenesi letak« nad izbiro barve */
.prograf-flyer-top{margin:0 0 14px;clear:both}
.prograf-flyer-top .prograf-flyer-top__btn{float:none!important;margin:0!important;display:inline-flex!important;align-items:center;gap:8px;justify-content:center}
.prograf-flyer-top .prograf-flyer-top__btn svg{flex:0 0 auto}
@media (max-width:600px){.prograf-flyer-top .prograf-flyer-top__btn{display:flex!important;width:100%}}

/* ========================================================================
   1.88.60: Več barv v enem naročilu — kartica na barvo (lastna količina, cena, hitri izbor)
   ======================================================================== */
.pgm-chip{display:inline-block;background:color-mix(in srgb, var(--prograf-primary, #2a6049) 8%, #fff);color:var(--prograf-primary, #2a6049);font-weight:700;border-radius:999px;padding:2px 10px;font-size:13px}
.pgm-hint{margin:6px 0 0;font-size:12.5px;color:#6b7280;font-style:italic}
.pgm-title{font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:14px;margin:0 0 10px}
.pgm-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;margin:0 0 14px;background:#fff}
.pgm-card .pgm-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f7f8f9;border-bottom:1px solid #e5e7eb}
.pgm-card .pgm-dot{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #e5e7eb}
.pgm-card .pgm-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pgm-card .pgm-t span{font-size:12.5px;color:#6b7280}
.pgm-card .pgm-sum{font-weight:800;color:var(--prograf-primary, #4aa3a0);white-space:nowrap}
.pgm-card .pgm-rm{flex:0 0 auto;width:30px!important;height:30px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:none!important;color:#6b7280!important;font-size:22px!important;line-height:1!important;cursor:pointer;box-shadow:none!important}
.pgm-card .pgm-rm:hover{color:#b32d2e!important}
.pgm-card .pgm-hero{padding-top:12px!important;margin-bottom:0}
.pgm-card .pgm-meta{text-align:center;margin:6px 12px 10px}
.pgm-card .prograf-qty-custom,.pgm-card .prograf-qty-divider,.pgm-card .prograf-qty-table{margin-left:12px;margin-right:12px;width:auto}
.pgm-card .prograf-qty-table{width:calc(100% - 24px);margin-bottom:12px}

/* 1.88.69: barve kot mini slikice izdelka z imenom (tekstil + darila) */
.pg-cthumbs{display:flex!important;flex-wrap:wrap;gap:10px;align-items:flex-start}
.pg-cthumbs .pg-cthumb{position:relative!important;display:flex!important;flex-direction:column;align-items:stretch;width:76px!important;height:auto!important;min-width:0;margin:0!important;padding:4px!important;border:2px solid var(--prograf-border,#e5e7eb)!important;border-radius:var(--prograf-radius,8px)!important;background:#fafafa!important;box-shadow:none!important;cursor:pointer;transition:border-color .15s,transform .15s;overflow:visible;line-height:1.2;text-transform:none;letter-spacing:0;font-weight:400}
.pg-cthumbs .pg-cthumb:hover{border-color:#9ca3af!important;transform:translateY(-1px)}
.pg-cthumbs .pg-cthumb.is-added,.pg-cthumbs .pg-cthumb.is-current.is-added{border-color:var(--prograf-primary,#2a6049)!important;box-shadow:0 0 0 1px var(--prograf-primary,#2a6049)!important;background:#fff!important}
.pg-cthumbs .pg-cthumb.is-current:not(.is-added){border-color:#9ca3af!important}
.pg-cthumb__pic{display:block;width:100%;aspect-ratio:1/1;border-radius:calc(var(--prograf-radius,8px) - 3px);overflow:hidden;background:#fff}
.pg-cthumb__pic img{display:block;width:100%!important;height:100%!important;object-fit:contain;margin:0!important;max-width:none}
.pg-cthumb__dot{display:block;width:70%;height:70%;margin:15%;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.pg-cthumb__name{display:block;font-size:11px;color:#6b7280;margin-top:3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-cthumbs .pg-cthumb.is-added .pg-cthumb__name{color:#1f2937;font-weight:600}
.pg-cthumbs .pg-cthumb__badge{position:absolute!important;right:-6px!important;top:-6px!important;bottom:auto!important;left:auto!important;width:20px!important;height:20px!important;border-radius:50%;background:var(--prograf-primary,#2a6049)!important;color:#fff!important;font-size:12px!important;font-weight:700;line-height:16px!important;text-align:center;border:2px solid #fff;display:block!important;z-index:2}
.pg-cthumb-more{align-self:center;height:auto;margin:0!important;padding:8px 12px!important;border:1.5px dashed var(--prograf-border,#d1d5db)!important;border-radius:var(--prograf-radius,8px)!important;background:#fff!important;color:var(--prograf-primary,#2a6049)!important;font-size:13px!important;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0;line-height:1.3}
@media (max-width:640px){
  .pg-cthumbs{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 2px 8px;scroll-snap-type:x proximity}
  .pg-cthumbs .pg-cthumb{flex:0 0 64px;width:64px!important;scroll-snap-align:start}
  .pg-cthumb-more{flex:0 0 auto}
}
.pg-cthumbs .pg-cthumb,.pg-cthumbs .pg-cthumb.is-current{aspect-ratio:auto!important;transform:none!important;flex-grow:0!important;flex-shrink:0!important;box-sizing:border-box}
.pg-cthumbs .pg-cthumb:hover{transform:translateY(-1px)!important}
.pg-cthumbs .pg-cthumb::before,.pg-cthumbs .pg-cthumb::after{display:none!important;content:none!important}
/* 1.88.70: mreža — 4 v vrsti (računalnik), 3 v vrsti (mobilno), nato nova vrsta */
.pg-cthumbs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;flex-wrap:wrap!important;overflow:visible!important;padding:6px 6px 0 0!important}
.pg-cthumbs .pg-cthumb{width:auto!important;max-width:none!important;flex:none!important}
.pg-cthumbs .pg-cthumb-more{grid-column:1/-1;justify-self:start}
@media (max-width:640px){
  .pg-cthumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible!important}
  .pg-cthumbs .pg-cthumb{width:auto!important;flex:none!important}
}