/* ===========================================================================
   Katalog, stranica proizvoda i pretraga
   =========================================================================== */

/* --- Traka, filteri i raspored kataloga su u 13-catalog.css ---------------- */
/* Ovde ostaje samo ono što 13-catalog.css ne pokriva. */

.checkbox.is-empty, .checkbox input:disabled + span { opacity: 0.45; }

.filter-link {
    display: flex;
    justify-content: space-between;
    gap: var(--dg-3);
    padding: var(--dg-2) 0;
    font-size: var(--dg-fs-sm);
    color: var(--dg-ink);
    text-decoration: none;
}
.filter-link:hover { color: var(--dg-primary); }

/* --- Prazno stanje --------------------------------------------------------- */
.empty-state {
    display: grid;
    gap: var(--dg-3);
    justify-items: start;
    padding: var(--dg-8) 0;
    max-width: var(--dg-measure);
}

/* --- Pločice vrsta voća ---------------------------------------------------- */
.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--dg-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.species-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dg-2);
    padding: var(--dg-3) var(--dg-4);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    text-decoration: none;
    color: var(--dg-ink);
    font-weight: 500;
    transition: border-color var(--dg-dur-fast) var(--dg-ease),
                background var(--dg-dur-fast) var(--dg-ease);
}
.species-tile:hover { border-color: var(--dg-primary); background: var(--dg-primary-tint); }
.species-tile__count { font-size: var(--dg-fs-xs); color: var(--dg-ink-muted); }

/* --- Pretraga -------------------------------------------------------------- */
.search { position: relative; display: flex; gap: var(--dg-2); max-width: 34rem; }
.search__input { flex: 1; }
.search__results {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 40;
    margin: 0;
    padding: var(--dg-1);
    list-style: none;
    background: var(--dg-bg);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    box-shadow: var(--dg-shadow-2);
    max-height: 22rem;
    overflow-y: auto;
}
.search__results a {
    display: flex;
    justify-content: space-between;
    gap: var(--dg-3);
    padding: var(--dg-2) var(--dg-3);
    border-radius: var(--dg-radius-sm);
    text-decoration: none;
    color: var(--dg-ink);
    font-size: var(--dg-fs-sm);
}
.search__results a:hover,
.search__results [aria-selected="true"] a { background: var(--dg-surface); }
.search__results .numeric { color: var(--dg-ink-muted); font-size: var(--dg-fs-xs); }

/* --- Galerija -------------------------------------------------------------- */
.gallery { display: grid; gap: var(--dg-3); }
.gallery__main {
    background: var(--dg-tint, var(--dg-surface));
    border-radius: var(--dg-radius-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }

/* Zumiranje pomeranjem miša — pozicija se postavlja iz JS-a */
.gallery__main img[data-zoom] { cursor: zoom-in; transition: transform var(--dg-dur) var(--dg-ease); }
.gallery__main img[data-zoomed="true"] { transform: scale(2); cursor: zoom-out; }

.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--dg-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery__thumb {
    display: block;
    width: 100%;
    border: 2px solid transparent;
    border-radius: var(--dg-radius);
    overflow: hidden;
    background: var(--dg-surface);
}
.gallery__thumb[aria-current="true"] { border-color: var(--dg-primary); }
.gallery__thumb img { aspect-ratio: 1 / 1; object-fit: cover; }

/* --- Blok za kupovinu ------------------------------------------------------ */
.product-buy { display: grid; gap: var(--dg-3); align-content: start; }
.product-buy__graft { display: flex; align-items: center; gap: var(--dg-2); margin: 0; }
.product-buy__price { display: flex; align-items: baseline; gap: var(--dg-2); flex-wrap: wrap; }
.product-buy__price .price { font-size: var(--dg-fs-2xl); }
.product-buy__stock { display: flex; align-items: center; gap: var(--dg-3); flex-wrap: wrap; margin: 0; }
.product-buy__form { display: flex; flex-wrap: wrap; gap: var(--dg-3); align-items: center; margin-top: var(--dg-2); }
.product-buy__form .btn { flex: 1 1 12rem; }
.product-buy__total { color: var(--dg-primary); font-weight: 600; }

.h5 { font-family: var(--dg-font-body); font-size: var(--dg-fs-base); font-weight: 600; margin: 0; }

.sibling-list { display: grid; gap: var(--dg-1); list-style: none; margin: 0; padding: 0; font-size: var(--dg-fs-sm); }
.sibling-list a, .sibling-list__current {
    display: flex;
    justify-content: space-between;
    gap: var(--dg-3);
    padding: var(--dg-2) var(--dg-3);
    border-radius: var(--dg-radius-sm);
    text-decoration: none;
    color: var(--dg-ink);
}
.sibling-list a:hover { background: var(--dg-surface); }
.sibling-list__current { background: var(--dg-primary-tint); color: var(--dg-primary); font-weight: 600; }

/* --- Recenzije ------------------------------------------------------------- */
.review { display: grid; gap: var(--dg-2); padding-bottom: var(--dg-5); border-bottom: 1px solid var(--dg-border); list-style: none; }
.review__title { font-size: var(--dg-fs-md); }

/* --- Poruka posle dodavanja u korpu ---------------------------------------- */
.toast {
    position: fixed;
    inset-block-end: var(--dg-5);
    inset-inline: var(--dg-4);
    z-index: 80;
    margin-inline: auto;
    max-width: 26rem;
    padding: var(--dg-3) var(--dg-4);
    border-radius: var(--dg-radius);
    background: var(--dg-primary);
    color: var(--dg-on-primary);
    box-shadow: var(--dg-shadow-3);
    font-size: var(--dg-fs-sm);
    animation: toast-in var(--dg-dur) var(--dg-ease-out);
}
.toast--error { background: var(--dg-danger); color: #fff; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* --- Korpa ----------------------------------------------------------------- */
.cart-list { display: grid; gap: var(--dg-4); list-style: none; margin: 0; padding: 0; }

.cart-item {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--dg-4);
    padding-bottom: var(--dg-4);
    border-bottom: 1px solid var(--dg-border);
}
@media (min-width: 40rem) {
    .cart-item { grid-template-columns: 6rem minmax(0, 1fr) auto; align-items: start; }
}

.cart-item__media { border-radius: var(--dg-radius); overflow: hidden; background: var(--dg-surface); }
.cart-item__media img { aspect-ratio: 1 / 1; object-fit: cover; }

.cart-item__body { display: grid; gap: var(--dg-2); align-content: start; }
.cart-item__title {
    font-family: var(--dg-font-body);
    font-size: var(--dg-fs-md);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    /* Dug naziv je ranije ulazio pod cenu */
    overflow-wrap: anywhere;
}
.cart-item__title a { color: inherit; text-decoration: none; }
.cart-item__title a:hover { text-decoration: underline; }
.cart-item__qty { display: flex; flex-wrap: wrap; gap: var(--dg-2); align-items: center; }

/* Polje za količinu se skupljalo na nekoliko piksela jer je bilo u fleksu
   bez svoje širine — brojevi se nisu ni videli. */
.cart-item__qty .input,
.cart-item__qty input[type="number"] {
    width: 4.5rem;
    min-width: 4.5rem;
    flex: none;
    text-align: center;
}
.cart-item__qty .btn { flex: none; }

.cart-item__price {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--dg-2) var(--dg-3);
}
.cart-item__price .price { white-space: nowrap; }
@media (min-width: 40rem) {
    .cart-item__price { grid-column: auto; display: grid; justify-items: end; gap: var(--dg-1); text-align: right; }
}

/* --- Obaveštenje kad sadnica ponovo stigne --------------------------------- */
.stock-notify {
    margin-top: var(--dg-5);
    padding: var(--dg-5);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-lg);
    background: var(--dg-surface);
}
.stock-notify__title {
    font-size: var(--dg-fs-md);
    margin: 0 0 var(--dg-2);
}
.stock-notify__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dg-2);
    margin-top: var(--dg-4);
}
.stock-notify__form .input { flex: 1 1 12rem; min-width: 0; }