/**
 * PROgraf Plus — Tekstil Frontend CSS (1.40.7)
 */

.prograf-tekstil {
    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, Arial, sans-serif;
}

.prograf-tekstil__header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--prograf-border, #e5e7eb);
}
/* 1.42.5: Header z brand logo na levi (flex layout) */
.prograf-tekstil__header.has-brand-logo {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.prograf-tekstil__header.has-brand-logo .prograf-tekstil__header-text {
    flex: 1;
    min-width: 0;
}
.prograf-tekstil__header:not(.has-brand-logo) .prograf-tekstil__header-text {
    display: contents;
}
/* ====== BRAND LOGO (1.42.5) ====== */
.prograf-brand-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--logo-size, 48px);
    height: var(--logo-size, 48px);
    border-radius: var(--prograf-radius, 8px);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--prograf-border, #e5e7eb);
    margin-top: 4px;
}
.prograf-brand-logo--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 4px;
    box-sizing: border-box;
}
.prograf-brand-logo--text {
    background: var(--logo-bg, #1f2937);
    color: var(--logo-fg, #ffffff);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    border: none;
    padding: 4px;
    text-align: center;
    line-height: 1.1;
}
.prograf-tekstil__title {
    /* 1.48.157: poenoteno s tiskovinami + darilami (prej 28px / 700) */
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: #1f2937;
    margin: 0 0 8px;
}
.prograf-tekstil__meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: #666;
}
.prograf-tekstil__sku {
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 3px;
    font-family: monospace;
}
.prograf-tekstil__type-tag {
    background: #fef3c7;
    color: #92400e;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.prograf-tekstil__tag {
    background: #dbeafe;
    color: #1e40af;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}
.prograf-tekstil__short-desc {
    margin-top: 12px;
    color: #555;
    font-size: 14px;
}

.prograf-tekstil__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;   /* 1.48.131: poenoteno s tiskovinami (prej 32px) */
    align-items: start;
}
@media (max-width: 1100px) {   /* 1.48.131: poenoteno s tiskovinami (prej 980px) */
    .prograf-tekstil__body {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Galerija (border + radius kot config panel) */
.prograf-tekstil__gallery-main {
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--prograf-border, #e5e7eb);
    border-radius: var(--prograf-radius, 8px);
    overflow: hidden;
    margin-bottom: 12px;
    padding: 16px;
    box-sizing: border-box;
}
.prograf-tekstil__gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.prograf-tekstil__gallery-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.prograf-tekstil__description {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--prograf-border, #e5e7eb);
}
.prograf-tekstil__description h3 {
    font-size: 15px;
    margin-bottom: 12px;
    color: #1f2937;
}
.prograf-tekstil__description-body {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
}

/* Config panel — 1.48.157: brez wrapper card-a, sections so individual cards (kot tiskovine + darila) */
.prograf-tekstil__config {
    position: sticky;
    top: 20px;
}
.prograf-tekstil__sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.prograf-tekstil__loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}
.prograf-tekstil__loading .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--prograf-border, #e5e7eb);
    border-top-color: var(--prograf-primary, #2a6049);
    border-radius: 50%;
    animation: prograf-tk-spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes prograf-tk-spin {
    to { transform: rotate(360deg); }
}

/* 1.48.157: Sections — card style (background + border + padding) + sivi numbered badge.
 * Poenoteno s tiskovinami in darilami. */
.prograf-tk-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 0;   /* gap od container-ja */
}
.prograf-tk-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.prograf-tk-section__num {
    width: 22px;
    height: 22px;
    background: #f3f4f6;   /* 1.48.157: sivo (prej zelena) */
    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-tk-section__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1f2937;
}
.prograf-tk-section__body {
    /* 1.48.157: brez padding-left (card sam ima padding) */
    padding-left: 0;
}

/* Color swatches */
.prograf-tk-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.prograf-tk-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;
}
.prograf-tk-color:hover {
    border-color: #9ca3af;
    transform: scale(1.05);
}
.prograf-tk-color.is-selected {
    border-color: var(--prograf-primary, #2a6049);
    border-width: 3px;
    transform: scale(1.1);
}
.prograf-tk-color__inner {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.prograf-tk-color-name {
    margin-top: 8px;
    font-size: 13px;
    color: #4b5563;
}

/* Size tabs */
.prograf-tk-size-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.prograf-tk-size {
    min-width: 50px;
    padding: 8px 16px;
    border: 1px solid var(--prograf-border, #e5e7eb);
    background: #fff;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.prograf-tk-size:hover {
    border-color: #9ca3af;
}
.prograf-tk-size.is-selected {
    background: var(--prograf-primary, #2a6049);
    color: #fff;
    border-color: var(--prograf-primary, #2a6049);
}

/* Tehnika toggles */
.prograf-tk-tehnika-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.prograf-tk-tehnika {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid var(--prograf-border, #e5e7eb);
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    transition: all 0.15s ease;
}
.prograf-tk-tehnika:hover {
    border-color: #9ca3af;
}
.prograf-tk-tehnika.is-on {
    background: #ecfdf5;
    border-color: var(--prograf-primary, #2a6049);
    color: #065f46;
}
.prograf-tk-tehnika input {
    cursor: pointer;
}
.prograf-tk-tehnika--none {
    margin-left: auto;
    background: #f9fafb;
}
.prograf-tk-tehnika--none.is-on {
    background: #fef3c7;
    border-color: #d97706;
    color: #92400e;
}

/* Pozicije */
.prograf-tk-pozicije {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prograf-tk-pozicija {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--prograf-border, #e5e7eb);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}
.prograf-tk-pozicija:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}
.prograf-tk-pozicija.is-on {
    background: #ecfdf5;
    border-color: var(--prograf-primary, #2a6049);
}
.prograf-tk-pozicija input {
    cursor: pointer;
}
.prograf-tk-pozicija__name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}
.prograf-tk-pozicija__meta {
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Empty + info */
.prograf-tk-empty,
.prograf-tk-info {
    color: #6b7280;
    font-style: italic;
    background: #f9fafb;
    padding: 10px 14px;
    border-radius: 4px;
    border-left: 3px solid #d1d5db;
    margin: 0;
    font-size: 13px;
}
.prograf-tk-empty {
    color: #d97706;
    background: #fffbeb;
    border-left-color: #d97706;
}

/* Qty + price */
.prograf-tk-qty-price {
    display: flex;
    gap: 16px;
    align-items: stretch;
    padding: 14px;
    background: #f9fafb;
    border-radius: 6px;
}
.prograf-tk-qty {
    flex: 1;
}
.prograf-tk-qty label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 4px;
}
.prograf-tk-qty-controls {
    display: flex;
    align-items: stretch;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
    background: #fff;
}
.prograf-tk-qty-btn {
    width: 32px;
    height: 36px;
    border: none;
    background: #f9fafb;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}
.prograf-tk-qty-btn:hover {
    background: var(--prograf-border, #e5e7eb);
}
#prograf-tk-qty-input {
    width: 60px;
    text-align: center;
    border: none;
    border-left: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    font-size: 14px;
    height: 36px;
    -moz-appearance: textfield;
}
#prograf-tk-qty-input::-webkit-outer-spin-button,
#prograf-tk-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.prograf-tk-price {
    text-align: right;
    flex: 1;
}
.prograf-tk-price-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 4px;
}
.prograf-tk-price-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--prograf-primary, #2a6049);
    margin-bottom: 4px;
}
.prograf-tk-price-total {
    font-size: 13px;
    color: #4b5563;
}
.prograf-tk-price-total strong {
    color: #111;
    font-size: 16px;
    margin-left: 4px;
}

/* Cart action */
.prograf-tk-cart-actions {
    margin-top: 20px;
}
.prograf-tk-cart-btn {
    width: 100%;
    padding: 14px 24px;
    background: var(--prograf-primary, #2a6049);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.prograf-tk-cart-btn:hover {
    background: var(--prograf-primary-dark, #1d4a36);
}
.prograf-tk-cart-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* === Position thumb (mockup SVG) === */
.prograf-tk-pozicija {
    /* Override prejšnji rule da damo prostora za thumb */
    align-items: center;
}
.prograf-tk-pozicija__thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: #f9fafb;
    border: 1px solid var(--prograf-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prograf-tk-pozicija__thumb svg {
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.prograf-tk-pozicija__thumb-placeholder {
    width: 56px;
    height: 56px;
    background: #f3f4f6;
    border: 1px solid var(--prograf-border, #e5e7eb);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 24px;
    flex-shrink: 0;
}
.prograf-tk-pozicija__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.prograf-tk-pozicija__name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}
.prograf-tk-pozicija__meta {
    font-size: 11px;
    color: #6b7280;
    background: transparent !important;
    padding: 0 !important;
}

/* === Gallery thumbs === */
.prograf-tekstil__thumb {
    width: 56px;
    height: 56px;
    border: 2px solid var(--prograf-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: #fff;
    transition: all 0.15s ease;
}
.prograf-tekstil__thumb:hover {
    border-color: #9ca3af;
}
.prograf-tekstil__thumb.is-active {
    border-color: var(--prograf-primary, #2a6049);
}
.prograf-tekstil__thumb img {
    width: 100%;
    height: 100%;
    /* 1.43.5: contain namesto cover */
    object-fit: contain;
    padding: 4px;
    display: block;
}

/* === Override Flatsome theme cart button styling ===
   Theme dodaja cart icon kot background-image na .button-primary class.
   Forsiramo clean styling. */
.prograf-tk-cart-btn,
.prograf-tk-cart-btn.button,
.prograf-tk-cart-btn.button-primary {
    width: 100% !important;
    padding: 14px 24px !important;
    background: var(--prograf-primary, #2a6049) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    text-align: center !important;
}
.prograf-tk-cart-btn:hover,
.prograf-tk-cart-btn.button:hover {
    background: var(--prograf-primary-dark, #1d4a36) !important;
    background-image: none !important;
    color: #fff !important;
}
.prograf-tk-cart-btn::before,
.prograf-tk-cart-btn::after {
    display: none !important;
    content: none !important;
}

/* === FIX: Jajčaste barve === */
.prograf-tk-color {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}
.prograf-tk-color__inner {
    aspect-ratio: 1 / 1;
}

/* === Velikost: tabela z per-size +/- === */
.prograf-tk-size-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prograf-tk-size-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: #f9fafb;
    border: 1px solid var(--prograf-border, #e5e7eb);
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.prograf-tk-size-row.is-active {
    background: #ecfdf5;
    border-color: var(--prograf-primary, #2a6049);
}
.prograf-tk-size-row__label {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    min-width: 60px;
}
.prograf-tk-size-row__qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    height: 36px;
    line-height: 1;
    flex-shrink: 0;
}
.prograf-tk-size-qty-input,
input.prograf-tk-size-qty-input {
    width: 60px !important;
    height: 36px !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid #d1d5db !important;
    border-right: 1px solid #d1d5db !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    background: #fff !important;
    -moz-appearance: textfield;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    color: #111 !important;
    flex-shrink: 0;
}
.prograf-tk-size-qty-input::-webkit-outer-spin-button,
.prograf-tk-size-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.prograf-tk-size-qty-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(42,96,73,0.15) inset !important;
}

/* === Pozicije: filter po pogledu (1.52.4.17) === */
.prograf-tk-poz-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.prograf-tk-poz-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid var(--prograf-border, #e5e7eb);
    background: #fff;
    color: #4b5563;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.prograf-tk-poz-filter__btn:hover { border-color: #b8c0c0; }
.prograf-tk-poz-filter__btn.is-active {
    background: var(--prograf-primary, #28a6a6);
    border-color: var(--prograf-primary, #28a6a6);
    color: #fff;
}
.prograf-tk-poz-filter__count {
    font-size: 11px;
    font-weight: 800;
    min-width: 19px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef2f2;
    color: #6b7280;
}
.prograf-tk-poz-filter__btn.is-active .prograf-tk-poz-filter__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* === Pozicije: 2-col card grid (večji, pokončni) === */
.prograf-tk-pozicije-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 782px) {
    .prograf-tk-pozicije-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.prograf-tk-pozicija-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--prograf-border, #e5e7eb);
    border-radius: var(--prograf-radius, 8px);
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}
.prograf-tk-pozicija-card:hover {
    border-color: #9ca3af;
}
.prograf-tk-pozicija-card.is-on {
    border-color: var(--prograf-primary, #2a6049);
    box-shadow: 0 0 0 1px var(--prograf-primary, #2a6049) inset;
}
.prograf-tk-pozicija-card .prograf-tk-pozicija-cb {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}
.prograf-tk-pozicija-card__thumb {
    aspect-ratio: 1 / 1;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}
.prograf-tk-pozicija-card__thumb svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.prograf-tk-pozicija-card__thumb-empty {
    color: #9ca3af;
    font-size: 28px;
}
.prograf-tk-pozicija-card__body {
    padding: 10px 12px;
    border-top: 1px solid var(--prograf-border, #e5e7eb);
    background: #fff;
}
.prograf-tk-pozicija-card.is-on .prograf-tk-pozicija-card__body {
    background: #ecfdf5;
}
.prograf-tk-pozicija-card__row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.prograf-tk-pozicija-card__name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.3;
}
.prograf-tk-pozicija-card__row .prograf-tk-pozicija-card__name { margin-bottom: 0; }
.prograf-tk-pozicija-card__row .prograf-tk-pozicija-card__view { margin-bottom: 0; }
.prograf-tk-pozicija-card__view {
    display: inline-block;
    font-size: 10px;
    background: #fef3c7;
    color: #92400e;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    margin-bottom: 4px;
}
.prograf-tk-pozicija-card__meta {
    font-size: 11px;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

/* === Sekcija 5 summary === */
.prograf-tk-summary {
    display: flex;
    gap: 16px;
    padding: 14px;
    background: #f9fafb;
    border-radius: 6px;
    align-items: stretch;
}
.prograf-tk-summary__qty,
.prograf-tk-summary__price {
    flex: 1;
}
.prograf-tk-summary__price {
    text-align: right;
}
.prograf-tk-summary__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 4px;
}
.prograf-tk-summary__value {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
}
.prograf-tk-summary__price-unit {
    font-size: 22px;
    font-weight: 700;
    color: var(--prograf-primary, #2a6049);
    margin-bottom: 4px;
}
.prograf-tk-summary__price-total {
    font-size: 13px;
    color: #4b5563;
}
.prograf-tk-summary__price-total strong {
    color: #111;
    font-size: 16px;
    margin-left: 4px;
}

/* === Cart button: AGRESIVEN OVERRIDE Flatsome theme === */
.prograf-tk-cart-actions {
    margin-top: 20px;
}
button.prograf-tk-cart-btn,
button#prograf-tk-add-to-cart {
    /* Reset vse iz theme-a */
    all: revert;
    /* Naš stil */
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    background-color: var(--prograf-primary, #2a6049) !important;
    background-image: none !important;
    background: var(--prograf-primary, #2a6049) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    letter-spacing: normal !important;
    transition: background-color 0.15s ease !important;
}
button.prograf-tk-cart-btn:hover,
button#prograf-tk-add-to-cart:hover {
    background: var(--prograf-primary-dark, #1d4a36) !important;
    background-color: var(--prograf-primary-dark, #1d4a36) !important;
    color: #fff !important;
}
button.prograf-tk-cart-btn:disabled {
    background: #9ca3af !important;
    background-color: #9ca3af !important;
    cursor: not-allowed !important;
}
button.prograf-tk-cart-btn::before,
button.prograf-tk-cart-btn::after,
button#prograf-tk-add-to-cart::before,
button#prograf-tk-add-to-cart::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* === Color swatch states (1.40.7 multi-form) === */
.prograf-tk-color {
    position: relative;
}
.prograf-tk-color.is-current {
    border-color: var(--prograf-primary, #2a6049);
    border-width: 3px;
    transform: scale(1.1);
}
.prograf-tk-color.is-added .prograf-tk-color__inner {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px var(--prograf-primary, #2a6049) inset;
}
.prograf-tk-color__badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: var(--prograf-primary, #2a6049);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* === Color hint paragraph === */
.prograf-tk-color-hint {
    margin-top: 10px;
    font-size: 13px;
    color: #4b5563;
}
.prograf-tk-color-count {
    background: #ecfdf5;
    color: #065f46;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
}
.prograf-tk-color-tip {
    color: #6b7280;
    font-style: italic;
    font-size: 12px;
}

/* === Color forms list (per-barvo obrazec) === */
.prograf-tk-color-forms {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.prograf-tk-color-form {
    border: 1px solid var(--prograf-border, #e5e7eb);
    border-radius: var(--prograf-radius, 8px);
    overflow: hidden;
    background: #fff;
}
.prograf-tk-color-form__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid var(--prograf-border, #e5e7eb);
}
.prograf-tk-color-form__color {
    display: flex;
    align-items: center;
    gap: 10px;
}
.prograf-tk-color-form__swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
.prograf-tk-color-form__name {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}
.prograf-tk-color-form__remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}
.prograf-tk-color-form__remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

.prograf-tk-color-form__sizes {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prograf-tk-color-form__sizes .prograf-tk-size-row {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
}

.prograf-tk-color-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--prograf-border, #e5e7eb);
    background: #fafafa;
}
.prograf-tk-color-form__total {
    font-size: 13px;
    color: #4b5563;
}
.prograf-tk-color-form__total strong {
    color: #111;
    font-size: 14px;
}
.prograf-tk-color-form__add-btn {
    padding: 8px 18px;
    background: var(--prograf-primary, #2a6049);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.prograf-tk-color-form__add-btn:hover:not(:disabled) {
    background: var(--prograf-primary-dark, #1d4a36);
}
.prograf-tk-color-form__add-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Summary sub */
.prograf-tk-summary__sub {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

/* ==============================================================================
   AGRESIVNI THEME OVERRIDES (1.40.7-fix)
   Flatsome theme uniči vse z svojimi globalnimi pravili. Vsako .prograf-tk-* element
   reset-amo na "naš" stil z !important + all: revert kjer je možno.
   ============================================================================== */

/* Vsi prograf-tk button-i: clean stil, brez theme overrid-a */
button[class^="prograf-tk-"],
button[class*=" prograf-tk-"] {
    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;
}
button[class^="prograf-tk-"]::before,
button[class*=" prograf-tk-"]::before,
button[class^="prograf-tk-"]::after,
button[class*=" prograf-tk-"]::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Add button v color form-u: clean zelen rectangle */
button.prograf-tk-color-form__add-btn {
    padding: 8px 18px !important;
    background: var(--prograf-primary, #2a6049) !important;
    background-color: var(--prograf-primary, #2a6049) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
}
button.prograf-tk-color-form__add-btn:hover:not(:disabled) {
    background: var(--prograf-primary-dark, #1d4a36) !important;
    background-color: var(--prograf-primary-dark, #1d4a36) !important;
    color: #fff !important;
}
button.prograf-tk-color-form__add-btn:disabled {
    background: #9ca3af !important;
    background-color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Qty +/- gumbi: small, clean — Flatsome-proof override (paralelno darila stepper) */
button.prograf-tk-qty-btn,
.prograf-tk-size-row__qty button.prograf-tk-qty-btn,
.prograf-tk-qty-controls button.prograf-tk-qty-btn {
    width: 32px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    background-image: none !important;
    color: #374151 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    min-height: 0 !important;
    min-width: 0 !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-shrink: 0;
    box-sizing: border-box !important;
    cursor: pointer;
}
button.prograf-tk-qty-btn:hover {
    background: var(--prograf-border, #e5e7eb) !important;
    background-color: var(--prograf-border, #e5e7eb) !important;
}
/* Nuke theme pseudo-element decorations (Flatsome dodaja ::before na buttone) */
button.prograf-tk-qty-btn::before,
button.prograf-tk-qty-btn::after {
    display: none !important;
    content: none !important;
}

/* Remove × gumb */
button.prograf-tk-color-form__remove {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #9ca3af !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    min-height: 0 !important;
}
button.prograf-tk-color-form__remove:hover {
    background: #fee2e2 !important;
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}

/* Tehnika & pozicija check-i — Flatsome theme uniči checkbox-e */
.prograf-tk-tehnika input[type="checkbox"],
.prograf-tk-pozicija-card input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: var(--prograf-primary, #2a6049);
}

/* Color swatches — preprečimo theme stretch */
button.prograf-tk-color {
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 2px !important;
    background-image: none !important;
    background: #fff !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Theme lahko nastavi font-size na em/rem za vse — popravi v config panel */
.prograf-tekstil__config,
.prograf-tekstil__config * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.prograf-tk-info,
.prograf-tk-empty {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Sub hint pod color count */
.prograf-tk-color-hint__sub {
    font-size: 11px !important;
    color: #9ca3af !important;
    margin: 4px 0 0 !important;
    font-style: italic !important;
}


/* === Cena per kos (med krogcem in sizes) === */
.prograf-tk-color-form__price {
    padding: 8px 14px;
    background: #fafafa;
    border-bottom: 1px solid var(--prograf-border, #e5e7eb);
    font-size: 13px;
    color: #4b5563;
}
.prograf-tk-color-form__price strong {
    color: var(--prograf-primary, #2a6049);
    font-size: 14px;
    font-weight: 700;
}
.prograf-tk-color-form__price-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-right: 4px;
}
.prograf-tk-color-form__price-missing {
    color: #d97706 !important;
    font-style: italic;
    font-size: 12px;
    font-weight: 500 !important;
}

/* === Cena per size row (med label in qty buttons) === */
.prograf-tk-color-form__sizes .prograf-tk-size-row {
    display: grid !important;
    /* 1.51.0.86: velikost + stepper levo skupaj; prazen prostor (1fr)
       potisne ceno + dobavljivo desno — ni več luknje med velikostjo
       in stepper-jem na širokih zaslonih. */
    grid-template-columns: 56px auto 1fr auto 90px;
    align-items: center;
    gap: 8px;
}
.prograf-tk-size-row__price {
    font-size: 12px;
    color: var(--prograf-primary, #2a6049);
    font-weight: 500;
    text-align: right;
    padding-right: 4px;
}
.prograf-tk-size-row__price--missing {
    color: #d1d5db;
    font-style: italic;
}

/* === 1.51.0.75: Cotton Classics zaloga stolpec === */
.prograf-tk-size-row__stock {
    font-size: 12px;
    font-weight: 600;
    color: var(--prograf-primary, #2a6049);
    text-align: right;
    padding-right: 4px;
}
.prograf-tk-size-row__stock--empty {
    color: #d1d5db;
    font-weight: 400;
}
/* 1.51.0.80: "po povpraševanju" — ko API zaloge ni */
.prograf-tk-size-row__stock--inquiry {
    color: #9ca3af;
    font-weight: 400;
    font-size: 10px;
    font-style: italic;
    line-height: 1.2;
}
.prograf-tk-size-row__stock-head {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: right;
    padding-right: 4px;
}
.prograf-tk-size-row--head {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    border: none !important;
    background: none !important;
}
/* 1.51.0.86: glava — "Dobavljivo" vedno v zadnjem (5.) stolpcu,
   poravnano s stock stolpcem ne glede na to, ali je cena prikazana. */
.prograf-tk-color-form__sizes .prograf-tk-size-row--head .prograf-tk-size-row__stock-head {
    grid-column: 5;
}

/* === Form footer: totals + add btn === */
.prograf-tk-color-form__totals {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.prograf-tk-color-form__total {
    font-size: 12px;
    color: #6b7280;
}
.prograf-tk-color-form__total strong {
    color: #111;
    font-size: 14px;
    margin-right: 2px;
}
.prograf-tk-color-form__total-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--prograf-primary, #2a6049);
}

/* ==============================================================================
   Color form HEADER redesign — cena poleg imena, večja (1.40.7-fix2)
   ============================================================================== */
.prograf-tk-color-form__head {
    padding: 12px 14px !important;
    background: #fafafa !important;
}
.prograf-tk-color-form__color {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1;
    min-width: 0;
}
.prograf-tk-color-form__swatch {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.prograf-tk-color-form__name-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.prograf-tk-color-form__name {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #1f2937 !important;
    line-height: 1.2 !important;
}
.prograf-tk-color-form__price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--prograf-primary, #2a6049) !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.prograf-tk-color-form__price-missing {
    color: #d97706 !important;
    font-style: italic !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Old separate price row — odstranim (zdaj v header-u) */
.prograf-tk-color-form > .prograf-tk-color-form__price:not(.prograf-tk-color-form__name-price *) {
    display: none !important;
}

/* ==============================================================================
   QUANTITY SELECTOR — Agresivni override Flatsome theme za vse number inputs
   in qty controls na tekstil strani (1.40.7-fix3)
   ============================================================================== */

/* Skri native number spinner-e v VSEH input[type=number] na tekstil panel-u */
.prograf-tekstil input[type="number"]::-webkit-outer-spin-button,
.prograf-tekstil input[type="number"]::-webkit-inner-spin-button,
.prograf-tk-size-qty-input::-webkit-outer-spin-button,
.prograf-tk-size-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
}
.prograf-tekstil input[type="number"],
.prograf-tk-size-qty-input {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Quantity input box — clean, brez Flatsome stylinga */
input.prograf-tk-size-qty-input,
.prograf-tekstil .prograf-tk-size-qty-input {
    width: 50px !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid #d1d5db !important;
    border-right: 1px solid #d1d5db !important;
    font-size: 14px !important;
    height: 32px !important;
    background: #fff !important;
    background-image: none !important;
    color: #111 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 32px !important;
    font-family: inherit !important;
    display: block !important;
    flex-shrink: 0 !important;
}
input.prograf-tk-size-qty-input:focus,
.prograf-tekstil .prograf-tk-size-qty-input:focus {
    outline: 2px solid var(--prograf-primary, #2a6049) !important;
    outline-offset: -2px !important;
    border-color: transparent !important;
}

/* Qty group container (− input +) */
.prograf-tk-size-row__qty {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #fff !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    width: fit-content !important;
}

/* Qty +/- gumbi v group-u */
button.prograf-tk-qty-btn,
.prograf-tekstil button.prograf-tk-qty-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    background-image: none !important;
    color: #374151 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 32px !important;
    text-align: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
button.prograf-tk-qty-btn:hover,
.prograf-tekstil button.prograf-tk-qty-btn:hover {
    background: var(--prograf-border, #e5e7eb) !important;
    background-color: var(--prograf-border, #e5e7eb) !important;
    color: #111 !important;
}

/* Layout vrstice: label | qty group | cena | dobavljivo
   1.51.0.87: flex z zmernimi razmaki — stepper ostane ob velikosti,
   cena + dobavljivo sledita (brez potiska na skrajni desni rob). */
.prograf-tk-color-form__sizes .prograf-tk-size-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 8px 0 !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    grid-template-columns: none !important;
}
/* 1.51.0.91: tanka divider črta med vrsticami velikosti */
.prograf-tk-color-form__sizes .prograf-tk-size-row:not(.prograf-tk-size-row--head) {
    border-bottom: 1px solid #eef0f2 !important;
}
.prograf-tk-color-form__sizes .prograf-tk-size-row:last-child {
    border-bottom: none !important;
}
.prograf-tk-size-row__label {
    min-width: 44px !important;
    flex-shrink: 0 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: #374151 !important;
}
.prograf-tk-size-row__qty {
    flex-shrink: 0 !important;
}
.prograf-tk-size-row__price {
    font-size: 13px !important;
    color: var(--prograf-primary, #2a6049) !important;
    font-weight: 500 !important;
    text-align: right !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}
.prograf-tk-size-row__price--missing {
    color: #d1d5db !important;
    font-style: italic !important;
}
/* 1.51.0.87: stock element v flex vrstici — fiksna širina, ob ceni */
.prograf-tk-color-form__sizes .prograf-tk-size-row__stock,
.prograf-tk-color-form__sizes .prograf-tk-size-row__stock--inquiry {
    flex: 0 0 auto !important;
    min-width: 110px !important;
    text-align: right !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}
/* Glava "Dobavljivo" — poravnana s stock (zadnji element, fiksna širina) */
.prograf-tk-color-form__sizes .prograf-tk-size-row--head {
    justify-content: flex-end !important;
}
.prograf-tk-color-form__sizes .prograf-tk-size-row--head .prograf-tk-size-row__stock-head {
    flex: 0 0 auto !important;
    min-width: 110px !important;
    text-align: right !important;
}
/* 1.51.0.90: skrij prazne label/qty/price v glavi — prazen qty div
   ima border in se je izrisal kot tanka navpična črta. */
.prograf-tk-color-form__sizes .prograf-tk-size-row--head .prograf-tk-size-row__label,
.prograf-tk-color-form__sizes .prograf-tk-size-row--head .prograf-tk-size-row__qty,
.prograf-tk-color-form__sizes .prograf-tk-size-row--head .prograf-tk-size-row__price {
    display: none !important;
}


/* === 1.51.0.88: Label fiksne širine — NE polni več prostora ===
   Stari "fix" (flex:1 na label) je potiskal stepper na desni rob.
   Zdaj label fiksen ob levem robu, stepper takoj za njim. */
.prograf-tk-color-form__sizes .prograf-tk-size-row .prograf-tk-size-row__label {
    flex: 0 0 44px !important;
    min-width: 44px !important;
}
/* Stock element polni preostali prostor → cena+dobavljivo na desni */
.prograf-tk-color-form__sizes .prograf-tk-size-row .prograf-tk-size-row__price {
    margin-left: auto !important;
}

/* ==============================================================================
   COLOR PREVIEW SLIDER — touch-friendly slider pod glavno sliko (1.40.7-fix5)
   ============================================================================== */

.prograf-tk-image-slider {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    /* 1.42.5: na telefonu pokaži kateri robovi imajo še barve (fade-out indikator) */
    position: relative;
}

/* Fade-out maska na desnem robu — sugerira da se da scrollati naprej */
@media (max-width: 480px) {
    .prograf-tk-image-slider::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 100%);
        pointer-events: none;
        z-index: 1;
    }
    .prograf-tk-image-slider::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 100%);
        pointer-events: none;
        z-index: 1;
    }
}

/* Track: hor. scrollable s snap, brez vidnega scrollbar-ja */
.prograf-tk-image-slider__track {
    flex: 1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* 1.42.5: scroll-padding da se aktivna barva (z scroll-snap-align:center) ne lepi roba na telefonu */
    scroll-padding: 0 24px;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px;
    /* Mobile touch: smooth scroll */
    -webkit-overflow-scrolling: touch;
}
.prograf-tk-image-slider__track::-webkit-scrollbar {
    display: none;
}

/* 1.48.158: Slider buttoni — kvadrati s sliko izdelka (poenoteno z darilami).
 * Fallback: če color nima slike, .prograf-tk-image-slider__inner-color pokaže hex krog. */
button.prograf-tk-image-slider__color,
.prograf-tk-image-slider button.prograf-tk-image-slider__color {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    border: 2px solid var(--prograf-border, #e5e7eb) !important;
    background: #fff !important;
    background-image: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    padding: 4px !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    scroll-snap-align: center;
    transition: border-color 0.15s ease;
    box-sizing: border-box !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}
button.prograf-tk-image-slider__color:hover:not(.is-active) {
    border-color: #9ca3af !important;
}
button.prograf-tk-image-slider__color.is-active,
.prograf-tk-image-slider button.prograf-tk-image-slider__color.is-active {
    border-color: var(--prograf-primary, #2a6049) !important;
    border-width: 3px !important;
}
/* Inner: image takes 100% (set via inline style za maksimalno specifičnost),
 * .prograf-tk-image-slider__inner-color je hex barva fallback (ko color nima slike) */
.prograf-tk-image-slider__inner-color {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* Nav prev/next gumbi */
button.prograf-tk-image-slider__nav,
.prograf-tk-image-slider button.prograf-tk-image-slider__nav {
    width: 32px !important;
    height: 44px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--prograf-border, #e5e7eb) !important;
    background: #fff !important;
    background-image: none !important;
    color: #374151 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
button.prograf-tk-image-slider__nav:hover {
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* Mobile: hide nav buttons (rely on swipe) */
@media (max-width: 480px) {
    .prograf-tk-image-slider__nav {
        display: none !important;
    }
}


/* ==============================================================================
   IMAGE OVERFLOW FIX (1.40.7-fix6)
   - CSS Grid items imajo default min-width: auto → content (slika) lahko preraste
     viewport. min-width: 0 reši.
   - Image potrebuje max-width: 100% za guard pred Flatsome theme overflow.
   - box-sizing: border-box po vsej tekstil strukturi.
   ============================================================================== */

.prograf-tekstil,
.prograf-tekstil *,
.prograf-tekstil *::before,
.prograf-tekstil *::after {
    box-sizing: border-box !important;
}

.prograf-tekstil {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100% !important;
}

/* Grid items potrebujejo min-width: 0 da ne overflow-ajo z velikimi slikami */
.prograf-tekstil__body {
    min-width: 0;
}
.prograf-tekstil__left,
.prograf-tekstil__right {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
}

/* Glavna slika — agresiven max-width fix */
.prograf-tekstil__gallery {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden;
}
.prograf-tekstil__gallery-main {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1;
}
.prograf-tekstil__gallery-main img,
.prograf-tekstil img#prograf-tekstil-main-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Slider track tudi ne sme overflow-ati */
.prograf-tk-image-slider {
    max-width: 100% !important;
    overflow: hidden;
}
.prograf-tk-image-slider__track {
    max-width: 100%;
    min-width: 0;
}

/* Config panel tudi max-width guard (bolj za safety) */
.prograf-tekstil__config {
    max-width: 100% !important;
}

/* Nadaljnji guard — če Flatsome doda padding/margin, ne razteguj */
.prograf-tekstil .prograf-tk-color-form,
.prograf-tekstil .prograf-tk-pozicije-grid,
.prograf-tekstil .prograf-tk-section {
    max-width: 100% !important;
}

/* === FIX: image overflow zaradi slider track-a (1.40.7-fix6) ===
   Slider z 35 barvami × 52px = 1820px je raztezal grid stolpec, in glavna slika
   z width:100% je rastla z njim. Rešitev: min-width:0 na grid item-ih + overflow:hidden
   na slider container-u, da se track scroll-a horizontalno ZNOTRAJ stolpca. */
.prograf-tekstil__body {
    overflow: hidden;
}
.prograf-tekstil__left,
.prograf-tekstil__right {
    min-width: 0 !important;
    overflow: hidden;
}
.prograf-tekstil__gallery {
    min-width: 0;
    max-width: 100%;
}
.prograf-tekstil__gallery-main {
    max-width: 100%;
}
.prograf-tekstil__gallery-main img {
    max-width: 100% !important;
}
.prograf-tk-image-slider {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.prograf-tk-image-slider__track {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* === Tehnik badges na poziciji card (1.40.7-fix8) ===
   Postavljeni v levem zgornjem kotu thumb-a, drug nad drugim. Active (currently
   selected technique) ima zelen fill, ostale so subtle gray. */
.prograf-tk-pozicija-card__thumb {
    position: relative; /* za absolute pozicioniranje badge-jev */
}
.prograf-tk-pozicija-card__techs {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
    pointer-events: none; /* klik gre na karto */
}
.prograf-tk-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--prograf-border, #e5e7eb);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    line-height: 1;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
.prograf-tk-tech-badge.is-active {
    background: var(--prograf-primary, #2a6049);
    border-color: var(--prograf-primary, #2a6049);
    color: #fff;
}
.prograf-tk-tech-badge__icon {
    font-size: 12px;
    line-height: 1;
}
.prograf-tk-tech-badge__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Mobile: skrij label, samo ikona */
@media (max-width: 480px) {
    .prograf-tk-tech-badge__label {
        display: none;
    }
    .prograf-tk-tech-badge {
        padding: 4px 6px;
    }
}

/* === Dodelave sekcija (1.40.7-FAZA2) === */
.prograf-tk-finishings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.prograf-tk-finish-line {
    padding: 10px 12px;
    background: #f0fdf4;
    border-left: 3px solid var(--prograf-primary, #2a6049);
    border-radius: 4px;
    font-size: 13px;
}
.prograf-tk-finish-line__head {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
    color: #1f2937;
}
.prograf-tk-finish-line__head strong {
    color: #065f46;
    font-size: 13px;
}
.prograf-tk-finish-line__total {
    margin-left: auto;
    font-weight: 700;
    color: var(--prograf-primary, #2a6049);
    font-size: 14px;
}
.prograf-tk-finish-line__detail {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}
.prograf-tk-finish-line__formula {
    font-style: italic;
    color: #9ca3af;
    font-size: 10px;
    margin-left: 4px;
}
.prograf-tk-finishings-total {
    padding: 10px 12px;
    background: #ecfdf5;
    border: 1px solid var(--prograf-primary, #2a6049);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.prograf-tk-finishings-total strong {
    color: #065f46;
}
.prograf-tk-finishings-total__value {
    font-weight: 700;
    color: var(--prograf-primary, #2a6049);
    font-size: 16px;
}

/* Skupaj sekcija: breakdown */
.prograf-tk-summary__breakdown {
    font-size: 11px;
    color: #6b7280;
    margin: 4px 0 6px;
    font-style: italic;
}

/* Section num "💸" support — če ni število */
.prograf-tk-section__num {
    min-width: 22px;
    width: auto !important;
    padding: 0 6px;
}

/* ==============================================================================
   SPECIFIKACIJA NAROČILA — line-by-line breakdown po vzoru papirnih izdelkov
   (1.40.7-FAZA2-spec)
   ============================================================================== */

.prograf-tk-spec {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Line items list */
.prograf-tk-spec__lines {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 0;
}
.prograf-tk-spec__line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.prograf-tk-spec__line-label {
    flex: 1;
    min-width: 0;
}
.prograf-tk-spec__line-name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.4;
    margin-bottom: 2px;
}
.prograf-tk-spec__line-detail {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
.prograf-tk-spec__line-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}
.prograf-tk-spec__formula {
    font-style: italic;
    color: #9ca3af;
    font-size: 11px;
    display: inline-block;
    margin-top: 2px;
}

/* Totals section: Skupaj brez DDV / DDV / Cena za kos / SKUPAJ Z DDV */
.prograf-tk-spec__totals {
    border-top: 1px solid var(--prograf-border, #e5e7eb);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prograf-tk-spec__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: #1f2937;
}
.prograf-tk-spec__row span {
    color: #4b5563;
}
.prograf-tk-spec__row strong {
    color: #1f2937;
    font-weight: 700;
}

/* Cena/kos vrstica: prikazana z dashed border zgoraj/spodaj, ležeče */
.prograf-tk-spec__row--per-kos {
    border-top: 1px dashed #d1d5db;
    border-bottom: 1px dashed #d1d5db;
    padding: 8px 0;
    margin: 4px 0;
}
.prograf-tk-spec__row--per-kos em,
.prograf-tk-spec__row--per-kos strong em {
    font-style: italic;
    color: var(--prograf-primary, #2a6049);
}
.prograf-tk-spec__row--per-kos strong em {
    font-weight: 700;
}

/* SKUPAJ Z DDV — velika vrstica, debelejši border zgoraj */
.prograf-tk-spec__row--grand {
    border-top: 2px solid var(--prograf-border, #e5e7eb);
    padding-top: 12px;
    margin-top: 4px;
    align-items: baseline;
}
.prograf-tk-spec__row--grand span {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.prograf-tk-spec__row--grand strong {
    font-size: 22px;
    color: var(--prograf-primary, #2a6049);
    font-weight: 700;
}

/* === Glavni "V povpraševanje" gumb (1.48.165: standalone wrap, izven Specifikacija card-a) === */
.prograf-tk-cta-wrap {
    margin-top: 16px;
    padding: 0;
    background: transparent;
    border: none;
}
/* Backward compat: starejši DOM lahko še uporablja __cart-action */
.prograf-tk-spec__cart-action {
    margin-top: 18px;
}

button.prograf-tk-cart-btn-main,
.prograf-tekstil button.prograf-tk-cart-btn-main {
    width: 100% !important;
    background: var(--prograf-primary, #2a6049) !important;
    background-color: var(--prograf-primary, #2a6049) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--prograf-radius, 8px) !important;
    padding: 16px 24px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 8px rgba(42, 96, 73, 0.2) !important;
    transition: background 0.15s ease !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
}
button.prograf-tk-cart-btn-main:hover,
.prograf-tekstil button.prograf-tk-cart-btn-main:hover {
    background: #1f4938 !important;
    background-color: #1f4938 !important;
    color: #fff !important;
}
/* Flatsome cart icon override (kot pri color-form add btn) */
button.prograf-tk-cart-btn-main::before,
button.prograf-tk-cart-btn-main::after,
.prograf-tekstil button.prograf-tk-cart-btn-main::before,
.prograf-tekstil button.prograf-tk-cart-btn-main::after {
    display: none !important;
    content: none !important;
}

/* === 1.48.164: Mobile CTA — poenoteno z tiskovinami + darili ===
 * Prej (do 1.48.163): .prograf-tk-spec__cart-action je bil `position: fixed; bottom: 0`,
 *   kar je povzročilo, da ga je Flatsome theme footer pokril.
 * Zdaj: gumb je v običajnem flow-u (kot pri darilih), padding-bottom 80px da gumb
 *   ne pokriva Flatsome mobile sticky add-to-cart (ki je skrit prek product.css). */
@media (max-width: 700px) {
    .prograf-tekstil {
        padding-bottom: 80px;
    }
    button.prograf-tk-cart-btn-main,
    .prograf-tekstil button.prograf-tk-cart-btn-main {
        padding: 14px 20px !important;
        font-size: 16px !important;
    }
}

/* === Warning v Specifikacija sekciji === */
.prograf-tk-spec__warning {
    margin: 0 0 14px 0;
    padding: 10px 14px;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    color: #92400e;
    font-size: 13px;
    border-radius: 4px;
    line-height: 1.4;
}

/* === Warning fix: brez emoji + cleaner styling (1.40.7-fix10) === */
.prograf-tk-spec__warning {
    margin: 0 0 12px 0 !important;
    padding: 8px 12px !important;
    background: #fef3c7 !important;
    border-left: 3px solid #f59e0b !important;
    color: #92400e !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
}
.prograf-tk-spec__warning strong {
    color: #78350f !important;
    font-weight: 600 !important;
}
/* Block-level emoji prevention v warning */
.prograf-tk-spec__warning img {
    display: none !important;
}

/* =============================================================
 * 1.42.13: Min/max qty indikator v Specifikaciji
 * ============================================================= */
/* 1.42.13 / 1.48.160: Min/max qty indikator v Specifikaciji
 * Fix: prejšnja verzija je imela emoji ⚠ ki se v Chrome renderira preko Color Emoji font-a
 * brez upoštevanja font-size constraint-a (ogromna ikona). Zdaj brez emoji-ja, čistejši stil. */
.prograf-tk-spec__qty-limit {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 14px;
    margin: 12px 0 8px;
    background: #ecfdf5;
    border: 1px solid var(--prograf-primary, #2a6049);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--prograf-primary, #2a6049);
}
.prograf-tk-spec__qty-limit > span {
    flex: 1 1 auto;
    min-width: 0;
}
.prograf-tk-spec__qty-limit--warn {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}
.prograf-tk-spec__qty-limit-msg {
    /* Pomembno: display inline (ne block) — Flatsome ima <strong> { display: block } v nekaterih primerih */
    display: inline !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    /* Prepreči emoji/font flash */
    font-family: inherit !important;
}
.prograf-tk-cart-btn-main:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #9ca3af !important;
    border-color: #9ca3af !important;
}
.prograf-tk-cart-btn-main:disabled:hover {
    background: #9ca3af !important;
    border-color: #9ca3af !important;
}

/* ========================================================================
   1.51.0.20: Tabela velikosti gumb + lightbox modal
   ======================================================================== */

.prograf-tk-size-chart-trigger-wrap {
    margin: 0 0 16px;
}

.prograf-tk-size-chart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid var(--prograf-primary, #2a6049);
    border-radius: 6px;
    color: var(--prograf-primary, #2a6049);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

.prograf-tk-size-chart-btn:hover {
    background: var(--prograf-primary, #2a6049);
    color: #fff;
}

.prograf-tk-size-chart-btn:active {
    transform: scale(0.97);
}

.prograf-tk-size-chart-btn__icon {
    font-size: 18px;
    line-height: 1;
}

.prograf-tk-size-chart-btn__text {
    line-height: 1;
}

/* ---------- Lightbox modal ---------- */
.prograf-tk-size-chart-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.prograf-tk-size-chart-lightbox.is-open {
    opacity: 1;
}

.prograf-tk-size-chart-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.prograf-tk-size-chart-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
}

.prograf-tk-size-chart-lightbox__inner {
    max-width: 95vw;
    max-height: 90vh;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.prograf-tk-size-chart-lightbox.is-open .prograf-tk-size-chart-lightbox__inner {
    transform: scale(1);
}

.prograf-tk-size-chart-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Mobile: full-screen modal */
@media (max-width: 600px) {
    .prograf-tk-size-chart-lightbox {
        padding: 0;
    }
    .prograf-tk-size-chart-lightbox__inner {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .prograf-tk-size-chart-lightbox__close {
        top: 12px;
        right: 12px;
    }
}

/* ========================================================================
   1.51.0.21: Prenesi letak gumb (PDF flyer)
   ======================================================================== */

.prograf-tekstil__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 0.15s, color 0.15s;
    /* 1.51.0.37: Inline z naslovom "Imperial" — float right, prvi element v wrapperju */
    float: right;
    margin: 4px 0 0 16px;
    clear: none;
}

/* Clearfix za parent */
.prograf-tekstil__header::after,
.prograf-tekstil__header-text::after {
    content: "";
    display: table;
    clear: both;
}

/* Na mobile (≤ 600px) full-width pod naslovom */
@media (max-width: 600px) {
    .prograf-tekstil__flyer-btn {
        float: none;
        display: flex;
        width: 100%;
        justify-content: center;
        margin: 12px 0 0;
    }
}

.prograf-tekstil__flyer-btn:hover {
    background: var(--prograf-primary, #2a6049);
    color: #fff;
    text-decoration: none;
}

.prograf-tekstil__flyer-btn__icon {
    font-size: 16px;
    line-height: 1;
}

.prograf-tekstil__flyer-btn__text {
    line-height: 1;
}

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

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

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

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

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

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

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

.prograf-tk-pb-table th.is-current {
    background: #16a37a;
    color: #fff;
}

.prograf-tk-pb-table td.is-current {
    background: #ecfdf5;
    color: #16a37a;
    font-weight: 700;
}

.prograf-tk-pb-disc {
    font-weight: 600;
    color: #16a37a;
}

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

.prograf-tk-price-breaks__note {
    font-size: 11px;
    color: #9ca3af;
    margin: 6px 0 0;
}

/* ============================================================
   1.51.0.85: Ozek zaslon — "po povpraševanju" v svoji vrstici
   POD stepper-jem. Flex-wrap pristop (robusten — ni odvisen
   od grid-template-areas). Glava "Dobavljivo" ostane zgoraj.
   ============================================================ */
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    padding: 8px 0 !important;
}
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row__label {
    flex: 0 0 44px !important;
}
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row__qty {
    flex: 0 0 auto !important;
}
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row__price {
    flex: 1 1 auto !important;
    text-align: right !important;
}
/* Stock — vedno cela širina → pade v svojo vrstico pod stepper */
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row__stock,
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row__stock--inquiry {
    flex: 0 0 100% !important;
    text-align: left !important;
    padding-left: 52px !important;
    padding-right: 0 !important;
    font-size: 12px !important;
    font-style: normal !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    display: block !important;
}
/* Glava — samo "Dobavljivo" tekst, levo zgoraj */
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row--head {
    display: block !important;
    padding: 0 0 2px !important;
}
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row--head .prograf-tk-size-row__stock-head {
    display: block !important;
    text-align: left !important;
    padding-left: 0 !important;
}
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row--head .prograf-tk-size-row__label,
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row--head .prograf-tk-size-row__qty,
.prograf-tk--narrow .prograf-tk-color-form__sizes .prograf-tk-size-row--head .prograf-tk-size-row__price {
    display: none !important;
}

/* 1.52.5.5: Tabela velikosti — sekcija pod opisom */
.prograf-tekstil__sizechart { margin-top: 24px; }
.prograf-tekstil__sizechart h3 { font-size: 17px; font-weight: 700; color: #1f2937; margin: 0 0 12px; }
.prograf-tekstil__sizechart img { max-width: 100%; height: auto; display: block; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }

/* 1.52.5.6: zaznana HTML tabela velikosti */
.prograf-tekstil__sizechart-table { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 6px; }
.prograf-tekstil__sizechart-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.prograf-tekstil__sizechart-table th { background: #f3f4f6; font-weight: 700; }
.prograf-tekstil__sizechart-table th, .prograf-tekstil__sizechart-table td { border: 1px solid #e5e7eb; padding: 7px 10px; text-align: center; white-space: nowrap; }

/* ========================================================================
   1.88.53: Tabela velikosti — popup s povečavo (pomik s prstom na telefonu)
   ======================================================================== */
.prograf-tk-size-chart-lightbox { flex-direction: column; }
.prograf-tk-size-chart-lightbox__bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: rgba(0, 0, 0, .55); color: #fff;
}
.prograf-tk-size-chart-lightbox__title { flex: 1; font-weight: 700; font-size: 15px; }
.prograf-tk-size-chart-lightbox__zoom {
    background: #fff; color: #1f2937; border: 0; border-radius: 999px; padding: 8px 14px;
    font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.prograf-tk-size-chart-lightbox .prograf-tk-size-chart-lightbox__close { position: static; flex: 0 0 auto; }
.prograf-tk-size-chart-lightbox__inner { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin-top: 56px; }
.prograf-tk-size-chart-lightbox__img { cursor: zoom-in; }
.prograf-tk-size-chart-lightbox.is-zoomed .prograf-tk-size-chart-lightbox__img { cursor: zoom-out; height: auto; }
.prograf-tk-size-chart-lightbox.is-zoomed .prograf-tk-size-chart-lightbox__inner { max-width: 100vw; max-height: calc(100vh - 100px); border-radius: 0; }
.prograf-tk-size-chart-lightbox__hint {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
}
.prograf-tk-size-chart-lightbox:not(.is-zoomed) .prograf-tk-size-chart-lightbox__hint { display: none; }
@media (max-width: 600px) {
    .prograf-tk-size-chart-lightbox__inner { margin-top: 64px; max-height: calc(100vh - 110px); }
}
/* slika pod opisom: namig »Povečaj« */
.prograf-tekstil__sizechart-zoom { position: relative; display: block; cursor: zoom-in; }
.prograf-tekstil__sizechart-hint {
    position: absolute; right: 10px; bottom: 10px; background: rgba(31, 41, 55, .85); color: #fff;
    font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; pointer-events: none;
}

/* 1.88.54: kompaktnejši popup tabele velikosti; ikone SVG (emoji je tema povečala) */
.prograf-tk-ico { display: inline-block; width: 1.1em !important; height: 1.1em !important; vertical-align: -0.15em; flex: 0 0 auto; }
.prograf-tk-size-chart-lightbox img.emoji, .prograf-tekstil__sizechart img.emoji, .prograf-tk-size-chart-btn img.emoji { width: 1em !important; height: 1em !important; display: inline !important; }
.prograf-tk-size-chart-lightbox .prograf-tk-size-chart-lightbox__bar { padding: 8px 10px; gap: 8px; min-height: 0; }
.prograf-tk-size-chart-lightbox .prograf-tk-size-chart-lightbox__title { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.2; }
.prograf-tk-size-chart-lightbox .prograf-tk-size-chart-lightbox__zoom { padding: 6px 12px !important; font-size: 13px !important; line-height: 1.2 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; }
.prograf-tk-size-chart-lightbox .prograf-tk-size-chart-lightbox__close { width: 34px !important; height: 34px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 22px !important; line-height: 1 !important; border-width: 1.5px; }
.prograf-tk-size-chart-lightbox .prograf-tk-size-chart-lightbox__inner { margin-top: 50px; }
.prograf-tk-size-chart-lightbox .prograf-tk-size-chart-lightbox__hint { font-size: 12px; padding: 5px 10px; bottom: 12px; }
@media (max-width: 600px) { .prograf-tk-size-chart-lightbox .prograf-tk-size-chart-lightbox__inner { margin-top: 50px; max-height: calc(100vh - 100px); } }
.prograf-tekstil__sizechart .prograf-tekstil__sizechart-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 9px; right: 8px; bottom: 8px; line-height: 1.2; }
.prograf-tekstil__sizechart .prograf-tekstil__sizechart-hint svg { width: 14px !important; height: 14px !important; }
.prograf-tk-size-chart-btn__icon { display: inline-flex; font-size: 16px; }

/* ========================================================================
   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.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}
}