/* ===========================================================================
   Komponente
   =========================================================================== */

/* --- Dugmad --------------------------------------------------------------- */
.btn {
    --btn-bg: transparent;
    --btn-fg: var(--dg-ink);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dg-2);
    min-height: 2.75rem;                 /* 44px — cilj za prst */
    padding: var(--dg-2) var(--dg-5);
    border: 1px solid var(--btn-border);
    border-radius: var(--dg-radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--dg-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background var(--dg-dur-fast) var(--dg-ease),
                border-color var(--dg-dur-fast) var(--dg-ease),
                transform var(--dg-dur-fast) var(--dg-ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Žuta je rezervisana za jednu radnju po ekranu: kupovinu. */
.btn--primary { --btn-bg: var(--dg-accent); --btn-fg: var(--dg-on-accent); --btn-border: var(--dg-accent); }
.btn--primary:hover { --btn-bg: var(--dg-accent-hover); --btn-border: var(--dg-accent-hover); }

.btn--brand { --btn-bg: var(--dg-primary); --btn-fg: var(--dg-on-primary); --btn-border: var(--dg-primary); }
.btn--brand:hover { --btn-bg: var(--dg-primary-hover); --btn-border: var(--dg-primary-hover); }

.btn--outline { --btn-border: var(--dg-border-strong); --btn-fg: var(--dg-ink); }
.btn--outline:hover { --btn-bg: var(--dg-surface); --btn-border: var(--dg-primary); }

.btn--ghost { --btn-fg: var(--dg-ink); padding-inline: var(--dg-3); }
.btn--ghost:hover { --btn-bg: var(--dg-surface); }

.btn--danger { --btn-bg: var(--dg-danger); --btn-fg: #fff; --btn-border: var(--dg-danger); }
[data-theme="dark"] .btn--danger { --btn-fg: var(--dg-bg); }

.btn--sm { min-height: 2.25rem; padding-inline: var(--dg-3); font-size: var(--dg-fs-xs); }
.btn--lg { min-height: 3.25rem; padding-inline: var(--dg-6); font-size: var(--dg-fs-base); }
.btn--block { width: 100%; }

.btn--icon {
    min-height: 2.75rem;
    width: 2.75rem;
    padding: 0;
    border-radius: 50%;
}

/* --- Značke --------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dg-1);
    padding: 0.25rem var(--dg-3);
    border-radius: var(--dg-radius-pill);
    font-family: var(--dg-font-body);
    font-size: var(--dg-fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}
.badge--sale     { background: var(--dg-berry); color: #fff; }
.badge--new      { background: var(--dg-primary); color: var(--dg-on-primary); }
.badge--stock    { background: var(--dg-success-tint); color: var(--dg-success); }
.badge--low      { background: var(--dg-warning-tint); color: #6b4c05; }
.badge--out      { background: var(--dg-surface-sunken); color: var(--dg-ink-muted); }
.badge--selffertile { background: var(--dg-primary-tint); color: var(--dg-primary); }
[data-theme="dark"] .badge--sale { color: var(--dg-bg); }
[data-theme="dark"] .badge--low  { color: var(--dg-warning); }

/* --- Kartica proizvoda ---------------------------------------------------- */
/* Fotografije stižu kao kvadrat 800x800 sa belom pozadinom, pa je i kadar
   kvadratni. Podloga slike je tonirana po vrsti biljke — bela pozadina
   fotografije se stapa sa njom, pa proizvod deluje kao izrezan. */
.product-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background: var(--dg-bg);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-lg);
    overflow: hidden;
    transition: border-color var(--dg-dur) var(--dg-ease),
                box-shadow var(--dg-dur) var(--dg-ease),
                transform var(--dg-dur) var(--dg-ease);
}
.product-card:hover,
.product-card:focus-within {
    border-color: var(--dg-primary);
    box-shadow: var(--dg-shadow-2);
    transform: translateY(-3px);
}

.product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--dg-tint, var(--dg-surface));
    overflow: hidden;
}

/* Ton podloge po grupi voća — postavlja se preko data atributa u šablonu */
[data-group="jezgricavo-voce"]  { --dg-tint: var(--dg-tint-jezgricavo); }
[data-group="kosticavo-voce"]   { --dg-tint: var(--dg-tint-kosticavo); }
[data-group="jagodicasto-voce"] { --dg-tint: var(--dg-tint-jagodicasto); }
[data-group="jezgrasto-voce"]   { --dg-tint: var(--dg-tint-jezgrasto); }
[data-group="vinova-loza"]      { --dg-tint: var(--dg-tint-loza); }
[data-group="ukrasno-bilje"]    { --dg-tint: var(--dg-tint-ukrasno); }
[data-group="citrusi-i-egzota"] { --dg-tint: var(--dg-tint-citrusi); }
.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dg-dur-slow) var(--dg-ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }

.product-card__badges {
    position: absolute;
    inset-block-start: var(--dg-2);
    inset-inline: var(--dg-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--dg-1);
    /* Značke ne smeju da izađu iz kadra slike ni na najužoj kartici */
    max-width: calc(100% - var(--dg-4));
}
.product-card__badges .badge {
    font-size: var(--dg-fs-2xs);
    padding: 0.15rem var(--dg-2);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--dg-1);
    padding: var(--dg-4);
    overflow: hidden;
    /* Podnožje sa cenom ide pri dno kartice bez obzira na dužinu naziva —
       inače kartice u redu ispadaju različite visine. */
    min-width: 0;
}

.product-card__variety {
    font-family: var(--dg-font-body);
    font-size: var(--dg-fs-base);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
    /* Dva reda su dovoljna za svaki naziv sorte; treći bi razvukao karticu. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.product-card__variety a { color: inherit; text-decoration: none; }
/* Ceo kadar kartice je klikabilan, ali fokus ostaje na samom linku. */
.product-card__variety a::before { content: ""; position: absolute; inset: 0; }

/* Kalem u kartici: iznad je sorta, ispod podloga — isti znak kao pod naslovima */
.product-card__graft {
    width: 2rem;
    height: 2px;
    flex: none;
    border-radius: 2px;
    background: linear-gradient(to bottom,
        var(--dg-primary) 0 50%, var(--dg-bark) 50% 100%);
    animation: none;
}

.product-card__body > .label {
    font-size: var(--dg-fs-xs);
    color: var(--dg-ink-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card__meta {
    font-size: var(--dg-fs-2xs);
    color: var(--dg-ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--dg-2);
    list-style: none;
    margin: var(--dg-1) 0 0;
    padding: 0;
    min-width: 0;
}
.product-card__meta li { white-space: nowrap; }
.product-card__meta li + li::before { content: "·"; margin-right: var(--dg-2); }

.product-card__foot {
    display: grid;
    gap: 2px;
    /* auto margina gura cenu na dno, pa se sve cene poravnaju u redu */
    margin-top: auto;
    padding-top: var(--dg-3);
}
.product-card__foot .price {
    font-size: var(--dg-fs-lg);
    white-space: nowrap;
    line-height: 1.1;
    /* Na uskoj kartici cena se smanjuje umesto da izađe iz okvira */
    font-size: clamp(1.05rem, 1rem + 0.6vw, var(--dg-fs-lg));
}
.product-card__foot .price--old { margin-left: var(--dg-2); }
.product-card__unit {
    font-size: var(--dg-fs-2xs);
    color: var(--dg-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Kartica sadržaja (blog, kalendar, poverenje) -------------------------- */
.card {
    background: var(--dg-bg);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-lg);
    padding: var(--dg-5);
    display: grid;
    gap: var(--dg-3);
    align-content: start;
}
.card--tinted { background: var(--dg-surface); border-color: transparent; }
.card__title { font-size: var(--dg-fs-lg); }
.card__text { color: var(--dg-ink-muted); }

/* --- Forme ---------------------------------------------------------------- */
.field { display: grid; gap: var(--dg-2); }

.field__label {
    font-size: var(--dg-fs-sm);
    font-weight: 600;
}
.field__label .req { color: var(--dg-danger); margin-left: 2px; }

.field__hint { font-size: var(--dg-fs-xs); color: var(--dg-ink-muted); }

.field__error {
    font-size: var(--dg-fs-xs);
    color: var(--dg-danger);
    font-weight: 500;
}

.input, .select, .textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--dg-2) var(--dg-3);
    border: 1px solid var(--dg-border-strong);
    border-radius: var(--dg-radius);
    background: var(--dg-bg);
    color: var(--dg-ink);
    font-size: var(--dg-fs-base);
    transition: border-color var(--dg-dur-fast) var(--dg-ease),
                box-shadow var(--dg-dur-fast) var(--dg-ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--dg-primary); }
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--dg-primary);
    box-shadow: 0 0 0 3px var(--dg-primary-tint);
}
.textarea { min-height: 8rem; padding-block: var(--dg-3); resize: vertical; }

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--dg-danger);
}
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--dg-danger-tint); }

.select {
    appearance: none;
    padding-right: var(--dg-7);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.checkbox, .radio {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--dg-3);
    align-items: start;
    font-size: var(--dg-fs-sm);
    cursor: pointer;
    padding-block: var(--dg-1);
}
.checkbox input, .radio input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.2rem 0 0;
    accent-color: var(--dg-primary);
}

.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--dg-3); }
.fieldset > legend {
    font-size: var(--dg-fs-sm);
    font-weight: 600;
    padding: 0;
    margin-bottom: var(--dg-1);
}

/* --- Poruke --------------------------------------------------------------- */
.alert {
    display: grid;
    gap: var(--dg-1);
    padding: var(--dg-3) var(--dg-4);
    border-radius: var(--dg-radius);
    border-left: 3px solid currentColor;
    font-size: var(--dg-fs-sm);
}
.alert--success { background: var(--dg-success-tint); color: var(--dg-success); }
.alert--error   { background: var(--dg-danger-tint);  color: var(--dg-danger); }
.alert--warning { background: var(--dg-warning-tint);  color: #6b4c05; }
.alert--info    { background: var(--dg-info-tint);     color: var(--dg-info); }
[data-theme="dark"] .alert--warning { color: var(--dg-warning); }
.alert strong { color: inherit; }

.flash-wrap { display: grid; gap: var(--dg-2); padding-top: var(--dg-4); }

/* --- Tabela specifikacije ------------------------------------------------- */
.spec {
    font-size: var(--dg-fs-sm);
    border-top: 1px solid var(--dg-border);
}
.spec th, .spec td {
    text-align: left;
    padding: var(--dg-3) 0;
    border-bottom: 1px solid var(--dg-border);
    vertical-align: top;
}
.spec th {
    font-weight: 500;
    color: var(--dg-ink-muted);
    width: 42%;
    padding-right: var(--dg-3);
}
.spec td { font-weight: 500; }

/* --- Količinski popusti --------------------------------------------------- */
.tiers { display: grid; gap: var(--dg-1); font-size: var(--dg-fs-sm); }
.tiers__row {
    display: flex;
    justify-content: space-between;
    gap: var(--dg-3);
    padding: var(--dg-2) var(--dg-3);
    background: var(--dg-surface);
    border-radius: var(--dg-radius-sm);
}
.tiers__row[data-active="true"] {
    background: var(--dg-primary-tint);
    color: var(--dg-primary);
    font-weight: 600;
}

/* --- Brojač količine ------------------------------------------------------ */
.qty {
    display: inline-grid;
    grid-template-columns: 2.75rem minmax(3rem, 4rem) 2.75rem;
    border: 1px solid var(--dg-border-strong);
    border-radius: var(--dg-radius);
    overflow: hidden;
}
.qty button {
    min-height: 2.75rem;
    font-size: var(--dg-fs-md);
    line-height: 1;
    color: var(--dg-ink);
    transition: background var(--dg-dur-fast) var(--dg-ease);
}
.qty button:hover { background: var(--dg-surface); }
.qty input {
    border: 0;
    border-inline: 1px solid var(--dg-border);
    text-align: center;
    font-family: var(--dg-font-mono);
    font-variant-numeric: tabular-nums;
    background: var(--dg-bg);
    min-height: 2.75rem;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* --- Ocena --------------------------------------------------------------- */
.rating { display: inline-flex; align-items: center; gap: var(--dg-1); }
.rating__stars { color: var(--dg-accent); letter-spacing: 0.1em; font-size: var(--dg-fs-sm); }
.rating__count { font-size: var(--dg-fs-xs); color: var(--dg-ink-muted); }

/* --- Mrvice --------------------------------------------------------------- */
.breadcrumbs {
    font-size: var(--dg-fs-xs);
    color: var(--dg-ink-muted);
    padding-block: var(--dg-4);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--dg-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--dg-2); opacity: 0.5; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--dg-primary); text-decoration: underline; }

/* --- Paginacija ----------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--dg-1); justify-content: center; padding-block: var(--dg-6); }
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: var(--dg-2);
    border-radius: var(--dg-radius);
    font-family: var(--dg-font-mono);
    font-size: var(--dg-fs-sm);
    text-decoration: none;
    color: var(--dg-ink);
}
.pagination a:hover { background: var(--dg-surface); }
.pagination [aria-current="page"] { background: var(--dg-primary); color: var(--dg-on-primary); font-weight: 600; }
.pagination .is-gap { color: var(--dg-ink-muted); min-width: 1.5rem; }

/* --- Filteri -------------------------------------------------------------- */
.filter-group { border-bottom: 1px solid var(--dg-border); padding-block: var(--dg-4); }
.filter-group summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--dg-fs-sm);
    list-style: none;
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after {
    content: "";
    width: 0.5rem; height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dg-dur) var(--dg-ease);
}
.filter-group[open] summary::after { transform: rotate(-135deg); }
.filter-group__body { display: grid; gap: var(--dg-2); padding-top: var(--dg-3); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--dg-2);
    padding: var(--dg-1) var(--dg-3);
    border: 1px solid var(--dg-border-strong);
    border-radius: var(--dg-radius-pill);
    font-size: var(--dg-fs-xs);
    background: var(--dg-bg);
    color: var(--dg-ink);
}
.chip:hover { border-color: var(--dg-primary); }
.chip__remove { font-size: 1rem; line-height: 1; }

/* --- Skeleton ------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg,
        var(--dg-surface) 0%, var(--dg-surface-sunken) 50%, var(--dg-surface) 100%);
    background-size: 200% 100%;
    animation: skeleton-slide 1.4s linear infinite;
    border-radius: var(--dg-radius);
    color: transparent;
    user-select: none;
}
.skeleton--text { height: 0.85em; margin-block: 0.25em; }
.skeleton--media { aspect-ratio: 1 / 1; }

@keyframes skeleton-slide {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* --- Prekidač teme -------------------------------------------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--dg-radius);
    color: var(--dg-ink);
    transition: background var(--dg-dur-fast) var(--dg-ease);
}
.theme-toggle:hover { background: var(--dg-surface); }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

/* --- Brojač u korpi ------------------------------------------------------- */
.cart-link { position: relative; }
.cart-link__count {
    position: absolute;
    top: 0.25rem; right: 0.25rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: 0.25rem;
    border-radius: var(--dg-radius-pill);
    background: var(--dg-berry);
    color: #fff;
    font-family: var(--dg-font-mono);
    font-size: 0.625rem;
    display: grid;
    place-items: center;
}
[data-theme="dark"] .cart-link__count { color: var(--dg-bg); }