/****************************************
 * HOSH – CORE COLORS (BLACK & WHITE)
 ****************************************/
:root {
    --hosh-bg: #ffffff;
    --hosh-bg-alt: #fafafa;
    --hosh-text: #111111;
    --hosh-text-muted: #6b6b6b;
    --hosh-border: #e5e5e5;
    --hosh-accent: #000000;
    --hosh-accent-soft: #222222;
    --hosh-transition-fast: 0.15s ease-out;
    --hosh-transition-normal: 0.25s ease;
    --hosh-transition-slow: 0.35s ease;
}

/****************************************
 * GLOBAL
 ****************************************/
body {
    background-color: var(--hosh-bg);
    color: var(--hosh-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--hosh-text);
}

a {
    color: var(--hosh-accent);
    transition: color var(--hosh-transition-normal),
        background-color var(--hosh-transition-normal),
        border-color var(--hosh-transition-normal),
        box-shadow var(--hosh-transition-normal);
}

a:hover,
a:focus {
    color: var(--hosh-accent-soft);
}

hr,
.table>tbody>tr>td,
.table>thead>tr>th {
    border-color: var(--hosh-border);
}

/****************************************
 * HEADER
 ****************************************/
#header,
#header .navigation-wrapper,
#navigation,
.navigation-in.menu {
    background-color: var(--hosh-bg) !important;
}

/* hlavní menu */
#navigation .menu-level-1>li>a {
    color: var(--hosh-text);
    transition: color var(--hosh-transition-normal),
        background-color var(--hosh-transition-normal),
        border-color var(--hosh-transition-normal);
}

#navigation .menu-level-1>li>a:hover,
#navigation .menu-level-1>li>a:focus {
    color: var(--hosh-accent);
    background-color: transparent;
    border-bottom: 1px solid var(--hosh-accent);
}

/* dropdowny */
#navigation .menu-level-2,
#navigation .menu-level-3 {
    background-color: var(--hosh-bg);
    border: 1px solid var(--hosh-border);
}

#navigation .menu-level-2 a,
#navigation .menu-level-3 a {
    color: var(--hosh-text);
    transition: color var(--hosh-transition-fast),
        background-color var(--hosh-transition-fast);
}

#navigation .menu-level-2 a:hover,
#navigation .menu-level-3 a:hover {
    background-color: var(--hosh-bg-alt);
    color: var(--hosh-accent);
}

/* ikony v headeru */
#header .navigation-buttons a,
#header .top-nav-button-login,
#header .search-toggle {
    color: var(--hosh-accent);
    transition: color var(--hosh-transition-normal),
        background-color var(--hosh-transition-normal),
        border-color var(--hosh-transition-normal),
        transform var(--hosh-transition-fast);
}

#header .navigation-buttons a:hover,
#header .top-nav-button-login:hover,
#header .search-toggle:hover {
    transform: translateY(-1px);
}

/****************************************
 * BORDER RADIUS RESET
 ****************************************/
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/****************************************
 * BUTTONS
 ****************************************/
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    border-radius: 0 !important;
    transition: background-color var(--hosh-transition-normal),
        color var(--hosh-transition-normal),
        border-color var(--hosh-transition-normal),
        box-shadow var(--hosh-transition-normal),
        transform var(--hosh-transition-fast);
}

/* primární */
.btn-primary,
.btn.btn-primary,
input[type="submit"].btn-primary {
    background-color: var(--hosh-accent);
    border-color: var(--hosh-accent);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--hosh-accent-soft);
    border-color: var(--hosh-accent-soft);
    color: #ffffff;
}

/* sekundární */
.btn-default,
.btn-secondary,
.btn.btn-default {
    background-color: #ffffff;
    border: 1px solid var(--hosh-border);
    color: var(--hosh-text);
}

.btn-default:hover,
.btn-secondary:hover {
    border-color: var(--hosh-accent);
    color: var(--hosh-accent);
    background-color: var(--hosh-bg-alt);
}

/* přihlášení – šipkový button */
.btn.btn-default.btn-arrow-right {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
    padding: 10px 18px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn.btn-default.btn-arrow-right span,
.btn.btn-default.btn-arrow-right i,
.btn.btn-default.btn-arrow-right svg {
    color: inherit;
    fill: currentColor;
}

.btn.btn-default.btn-arrow-right:hover,
.btn.btn-default.btn-arrow-right:focus {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

/****************************************
 * PRICES, LABELS, ALERTS
 ****************************************/
/* ceny */
.price-final,
.price-final strong,
.product .price,
.product .price strong {
    color: var(--hosh-accent);
}

.price-standard,
.price-standard span,
.price-crossed {
    color: var(--hosh-text-muted);
}

/* štítky */
.label,
.badge,
.product .flags span {
    background-color: var(--hosh-accent);
    color: #ffffff;
}

/* alerty */
.alert,
.alert-info,
.alert-success {
    background-color: var(--hosh-bg-alt);
    border-color: var(--hosh-border);
    color: var(--hosh-text);
}

.alert-danger {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

/****************************************
 * FOOTER
 ****************************************/
#footer,
.site-footer,
.footer-bottom {
    background-color: #000000;
    color: #ffffff;
}

#footer a,
.site-footer a {
    color: #ffffff;
}

#footer a:hover,
.site-footer a:hover {
    color: #f0f0f0;
}

.footer-bottom {
    border-top: 1px solid #333333;
}

/****************************************
 * PRODUCT GRID – 4 / 3 / 2 produkty
 ****************************************/
/* kontejner – flex grid */
.category-products,
.products-block {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px;
}

/* základně 4 v řádku (desktop ≥1024) */
.category-products .product,
.products-block .product {
    box-sizing: border-box;
    padding: 0 10px 20px;
    width: 25%;
}

/* tablet 768–1023 => 3 v řádku */
@media (max-width: 1023.98px) {

    .category-products .product,
    .products-block .product {
        width: 33.3333%;
    }
}

/* mobil ≤767 => 2 v řádku */
@media (max-width: 767.98px) {

    .category-products .product,
    .products-block .product {
        width: 50%;
    }
}

/****************************************
 * PRODUCT CARD – základ (breathing shadow)
 ****************************************/
.products-block .p,
.products .p,
.category-products .product .p,
.category-products .product {
    background-color: #f5f0e7 !important;
    /* béžový podklad celé karty */
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    padding: 0 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start;
    transition: box-shadow var(--hosh-transition-normal),
        border-color var(--hosh-transition-normal);
}

.products-block .p:hover,
.products .p:hover,
.category-products .product:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10);
    border-color: #e0e0e0;
}

/****************************************
 * PRODUCT IMAGE – full width, stejné poměry
 ****************************************/
.products-block .p .image,
.products .p .image,
.category-products .product .image {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative;
    overflow: hidden;
    background-color: #ffffff !important;
    /* čisté bílé pozadí pod fotkou */
}

.products-block .p .image img,
.products .p .image img,
.category-products .product .image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--hosh-transition-slow),
        opacity var(--hosh-transition-slow);
}

.products-block .p:hover .image img,
.products .p:hover .image img,
.category-products .product:hover .image img {
    transform: scale(1.03);
    opacity: 0.98;
}

/* štítky na obrázku */
.products-block .p .flags,
.products .p .flags,
.category-products .product .flags {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.products-block .p .flags span,
.products .p .flags span,
.category-products .product .flags span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    margin-bottom: 4px;
}

/****************************************
 * PRODUCT TEXT (název, rating, dostupnost, cena)
 ****************************************/
/* textová info část – béžový blok pod fotkou */
.products-block .p .p-in,
.products .p .p-in,
.category-products .product .p-in {
    background-color: #f2eee8 !important;
    /* trochu tmavší beige */
    padding: 18px 10px 22px !important;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* pokud šablona používá vnitřní wrapper */
.products-block .p-in-in,
.products .p-in-in,
.category-products .product .p-in-in {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* název */
.products-block .p .name,
.products .p .name,
.category-products .product .name,
.products-block .p-in-in .name,
.products .p-in-in .name,
.category-products .product .p-in-in .name {
    margin: 4px 0;
    padding: 0 14px;
    text-align: center !important;
}

.products-block .p .name a,
.products .p .name a,
.category-products .product .name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #111111;
    text-decoration: none;
    transition: color var(--hosh-transition-normal);
}

.products-block .p .name a:hover,
.products .p .name a:hover,
.category-products .product .name a:hover {
    color: #000000;
}

/* dostupnost */
.products-block .p .availability,
.products .p .availability,
.category-products .product .availability {
    margin: 0;
    padding: 0 !important;
    text-align: center !important;
}

/* ceny */
.products-block .p .price,
.products .p .price,
.category-products .product .price {
    margin-top: 6px;
    padding: 0 14px !important;
    text-align: center !important;
}

.products-block .p .price-final strong,
.products .p .price-final strong,
.category-products .product .price-final strong {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
}

/****************************************
 * CTA BUTTONS – detail / košík
 ****************************************/
/* detail / CTA button v kartě */
.products-block .p .p-tools .btn,
.product .p-tools .btn,
.products .p .p-tools .btn {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    border-radius: 0 !important;
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color var(--hosh-transition-normal),
        color var(--hosh-transition-normal),
        border-color var(--hosh-transition-normal),
        box-shadow var(--hosh-transition-normal),
        transform var(--hosh-transition-fast);
}

.products-block .p .p-tools .btn:hover,
.product .p-tools .btn:hover,
.products .p .p-tools .btn:hover {
    background-color: #222222 !important;
    border-color: #222222 !important;
    color: #ffffff !important;
    box-shadow: none;
    transform: translateY(-1px);
}

/* add to cart na detailu */
.btn-cart.add-to-cart-button,
#product-detail .btn-cart.add-to-cart-button,
.product .btn-cart {
    background-color: #000000 !important;
    border: 1px solid #000000 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    padding: 12px 20px !important;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/****************************************
 * VARIANTY + CTA – ABOUT YOU HOVER BEHAVIOUR
 ****************************************/
/* základ: padding pro varianty */
.products-block .p .widget-parameter-wrapper,
.products .p .widget-parameter-wrapper,
.category-products .product .widget-parameter-wrapper {
    padding: 6px 14px 0 !important;
}

/* --- Desktop / tablet ≥768px: varianty + CTA jen na hover --- */
@media (min-width: 768px) {

    .products-block .p .p-tools,
    .products .p .p-tools,
    .category-products .product .p-tools,
    .products-block .p .widget-parameter-wrapper,
    .products .p .widget-parameter-wrapper,
    .category-products .product .widget-parameter-wrapper {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(8px);
        transition: max-height var(--hosh-transition-normal),
            opacity var(--hosh-transition-normal),
            transform var(--hosh-transition-normal);
    }

    .products-block .p:hover .p-tools,
    .products .p:hover .p-tools,
    .category-products .product:hover .p-tools,
    .products-block .p:hover .widget-parameter-wrapper,
    .products .p:hover .widget-parameter-wrapper,
    .category-products .product:hover .widget-parameter-wrapper {
        max-height: 260px;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

/* --- Mobil ≤767px: varianty + CTA vždy viditelné (bez hover UX) --- */
@media (max-width: 767.98px) {

    .products-block .p .p-tools,
    .products .p .p-tools,
    .category-products .product .p-tools,
    .products-block .p .widget-parameter-wrapper,
    .products .p .widget-parameter-wrapper,
    .category-products .product .widget-parameter-wrapper {
        max-height: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: none;
    }

    /* karty trošku menší stín na mobilu */
    .products-block .p,
    .products .p,
    .category-products .product {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
        padding-bottom: 14px !important;
    }
}

/****************************************
 * FILTRY NAD PRODUKTY – ABOUT YOU STYL
 ****************************************/
#filtering {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 10px 0 22px;
    padding: 6px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

/* pill filtry */
#filtering .parameter-section,
#filtering .filter,
#filtering .parameter-heading,
#filtering .parameter-toggle {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 6px !important;
    padding: 6px 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    font-size: 13px;
    font-weight: 500;
    color: #111111;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color var(--hosh-transition-normal),
        color var(--hosh-transition-normal),
        border-color var(--hosh-transition-normal),
        box-shadow var(--hosh-transition-normal);
}

#filtering .parameter-heading span,
#filtering .filter span {
    white-space: nowrap;
}

/* šipka */
#filtering .parameter-heading::after,
#filtering .filter::after {
    content: "▾";
    font-size: 11px;
    margin-left: 2px;
    opacity: 0.6;
}

/* hover + active */
#filtering .parameter-section:hover,
#filtering .filter:hover,
#filtering .parameter-heading:hover,
#filtering .parameter-toggle:hover,
#filtering .parameter-section.active,
#filtering .filter.active,
#filtering .parameter-heading.active,
#filtering .parameter-toggle.active {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}

/* "Více filtrů" */
#filtering .show-more,
#filtering .more-filters {
    border-left: 1px solid #d0d0d0;
    margin-left: 10px;
    padding-left: 10px;
    font-size: 13px;
    color: #555555;
}

/* mobilní chování filtrů */
@media (max-width: 991.98px) {
    #filtering {
        gap: 6px;
    }

    #filtering .parameter-section,
    #filtering .filter,
    #filtering .parameter-heading,
    #filtering .parameter-toggle {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
    }
}

@media (max-width: 575.98px) {

    #filtering .parameter-section,
    #filtering .filter,
    #filtering .parameter-heading,
    #filtering .parameter-toggle {
        flex: 1 1 100%;
    }
}

/****************************************
 * HOSH – RATING (unified gold stars)
 ****************************************/
/* wrapper hodnocení – vždy stejná výška, centrováno */
.products-block .p .ratings-wrapper,
.products .p .ratings-wrapper,
.category-products .product .ratings-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 14px !important;
    margin: 4px 0 0 !important;
    min-height: 26px;
    text-align: center !important;
}

/* řádek s hvězdičkami */
.ratings-wrapper .stars-wrapper {
    display: inline-flex !important;
    gap: 2px;
}

/* fallback, kdyby šablona použila .star-list */
.star-list {
    display: inline-flex !important;
    gap: 2px;
}

/* produkt bez hodnocení – schovej hvězdičky, wrapper necháme kvůli stejné výšce */
.ratings-wrapper .stars-wrapper[data-micro-rating-count="0"] {
    display: none !important;
}

/* skrytí původního textového renderu hvězd */
.ratings-wrapper .stars {
    font-size: 0;
}

/* základ každé hvězdy */
.ratings-wrapper .stars .star {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

/* default – prázdná šedá hvězda */
.ratings-wrapper .stars .star::before {
    content: "★";
    color: #dcdcdc;
    font-size: 20px;
    line-height: 1;
}

/* zapnuté hvězdičky – zlaté */
.ratings-wrapper .stars .star-on::before {
    color: #d4af37 !important;
}

/* půl hvězdy – kdyby se někdy použila */
.ratings-wrapper .stars .star-half::before {
    content: "★";
    background: linear-gradient(90deg, #d4af37 50%, #dcdcdc 50%);
    -webkit-background-clip: text;
    color: transparent;
}

/* dostupnost (Skladem / Vyprodáno) pod hvězdičkami */
.ratings-wrapper .availability {
    margin-top: 2px;
    width: 100%;
    text-align: center !important;
}

/****************************************
 * HOSH – CENA + TLAČÍTKO POD SEBOU
 ****************************************/
/* spodní část karty – cena + tlačítko jako sloupec */
.products-block .p .p-bottom.single-button,
.products .p .p-bottom.single-button,
.category-products .product .p-bottom.single-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    gap: 10px;
}

/* pokud šablona obaluje obsah p-bottom do extra <div>, zarovnáme i ten */
.products-block .p .p-bottom.single-button>div,
.products .p .p-bottom.single-button>div,
.category-products .product .p-bottom.single-button>div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ceny vždy přes celou šířku a na střed */
.products-block .p .p-bottom.single-button .prices,
.products .p .p-bottom.single-button .prices,
.category-products .product .p-bottom.single-button .prices {
    width: 100%;
    text-align: center !important;
}

/* kontejner tlačítka – na střed */
.products-block .p .p-bottom.single-button .p-tools,
.products .p .p-bottom.single-button .p-tools,
.category-products .product .p-bottom.single-button .p-tools {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* tlačítko – max šířka, zarovnané doprostřed */
.products-block .p .p-bottom.single-button .p-tools .btn,
.products .p .p-bottom.single-button .p-tools .btn,
.category-products .product .p-bottom.single-button .p-tools .btn {
    margin: 0 auto;
    max-width: 220px;
    width: 100%;
}

/****************************************
 * HOSH – VARIANTS (barvy) – centrování
 ****************************************/
.products-block .p .variants,
.products .p .variants,
.category-products .product .variants {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px 8px;
    text-align: center !important;
}

.widget-parameter-wrapper .widget-parameter-list {
    justify-content: center !important;
}

/****************************************
 * HOSH – PERFEKTNÍ CENTRACE NÁZEV + RATING + DOSTUPNOST
 ****************************************/

/* celý info blok pod fotkou */
.products-block .p .p-in,
.products .p .p-in,
.category-products .product .p-in {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* název */
.products-block .p .name,
.products .p .name,
.category-products .product .name,
.products-block .p .name a,
.products .p .name a,
.category-products .product .name a {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* wrapper ratingu */
.products-block .p .ratings-wrapper,
.products .p .ratings-wrapper,
.category-products .product .ratings-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* hvězdičky */
.ratings-wrapper .stars-wrapper,
.ratings-wrapper .stars,
.ratings-wrapper .star-list {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* dostupnost */
.products-block .p .ratings-wrapper .availability,
.products .p .ratings-wrapper .availability,
.category-products .product .ratings-wrapper .availability,
.products-block .p .availability,
.products .p .availability,
.category-products .product .availability {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}