/* ==========================================================================
   Sezonni dostupnost - sablona Apollo (prodejrostlin.cz)

   Nazev dostupnosti je zamerne kratky, protoze muze jit do feedu
   na Heureku, Zbozi.cz a do Google Nakupu. Presny termin se dopisuje
   az v detailu produktu ze skriptu, ne z nazvu.

   Barvu ridi nastaveni dostupnosti v adminu, kod ji dedi pres currentColor,
   takze zmena barvy je vec administrace, ne vyvojare.

   Apollo ma 1rem = 10px, proto jsou vsechny rozmery zamerne v px.
   ========================================================================== */

/* V carouselu sedi dostupnost v .p-tools vedle ceny a je jen 35 % siroka,
   takze se text lame na tri radky. Shazujeme ji pod cenu na celou sirku.
   !important je nutne, Apollo drzi flex: 1 1 35%.
   Ve vypisu kategorie je dostupnost v .ratings-wrapper a tohle se neuplatni. */
.product [data-micro="offer"] { flex-wrap: wrap; }
.product .p-tools { flex: 1 0 100% !important; margin-top: 8px; }

.product .availability > span,
.detail-availability-block .availability-value > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 2px solid currentColor;
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 8%, #fff);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    /* Karta ma text na stred, po zalomeni by druhy radek utikal doprava */
    text-align: left;
}


/* Detail produktu - stav i termin v jednom bloku.
   Zamerne bez ramecku dokola: silna linka + tucny text v barve stavu delaly
   z vedlejsi informace nejhlasitejsi prvek stranky. Misto toho jemny podklad
   a barevny prouzek vlevo, ktery drzi vazbu na barvu dostupnosti. */
.detail-availability-block .availability-value > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 16px;
    border: 0;
    border-left: 4px solid currentColor;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
    font-weight: 400;
}

/* Nazev stavu je jediny prvek v barve - dela kotvu pro oko */
.prAvail__label {
    font-size: 16px;
    font-weight: 700;
}

/* Termin je bezny text, ne zvyraznovac. Barvu i vahu nastavujeme natvrdo,
   dedena zelen a Apollo font-weight 500 srovnaly hierarchii do roviny. */
.prTerm {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55;
    color: #4a4a4a !important;
}

.prTerm__link {
    display: inline-block;
    margin-top: 8px;
    color: #1a5c38 !important;
    font-size: 14px;
    font-weight: 600 !important;
    text-decoration: underline;
}

/* Termin nad vypisem kategorie, vklada ho dostupnosti.js */
.prCatTerm {
    margin: 0 0 20px !important;
    padding: 12px 16px;
    border-left: 4px solid #1a5c38;
    border-radius: 0 8px 8px 0;
    background: #eef5f0;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55;
    color: #4a4a4a !important;
}

/* Hlaska v prvnim kroku kosiku, ve volnem sloupci vedle souctu.
   Tepla zem misto zelene - zelena by cetla jako "vse v poradku",
   a tohle je upozorneni, ne potvrzeni. Cervena by zase strasila. */
.prCartNote {
    flex: 1 1 300px;
    align-self: flex-start;
    margin: 40px 15px 0;
    padding: 16px 20px;
    border-left: 4px solid #7b5233;
    border-radius: 0 8px 8px 0;
    background: #faf6ec;
}

.prCartNote p {
    margin: 0 0 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55;
    color: #0f0f0f !important;
}

.prCartNote p:last-child { margin-bottom: 0 !important; }

/* Vyssi specificita nez .prCartNote p, jinak by ho obecne pravidlo prebilo */
.prCartNote p.prCartNote__title { font-weight: 700 !important; }

/* Starsi prohlizece neznaji color-mix - zustane bily podklad s barevnym rameckem */
@supports not (background: color-mix(in srgb, red 8%, #fff)) {
    .product .availability > span,
    .detail-availability-block .availability-value > span { background: #fff; }
}