/* ============================================================
   1) PROMĚNNÉ – barvy, fonty, cookies lišta
   ============================================================ */
:root {
    /* HLAVNÍ BARVA (tlačítka, odkazy, ikony) – barva loga */
    --color-primary: #bb4a20;
    --color-primary-h: 16;
    --color-primary-s: 71%;
    --color-primary-l: 43%;

    --color-primary-hover: #9c3d1a;
    --color-primary-hover-h: 16;
    --color-primary-hover-s: 71%;
    --color-primary-hover-l: 36%;

    /* SEKUNDÁRNÍ (konverzní tlačítko "Do košíku", štítky) – tlumená oliva */
    --color-secondary: #5f7d4f;
    --color-secondary-h: 99;
    --color-secondary-s: 23%;
    --color-secondary-l: 40%;

    --color-secondary-hover: #4d6740;
    --color-secondary-hover-h: 100;
    --color-secondary-hover-s: 23%;
    --color-secondary-hover-l: 33%;

    /* TERCIÁRNÍ (okraje, oddělovače) – teplá písková */
    --color-tertiary: #f3ece4;
    --color-tertiary-h: 32;
    --color-tertiary-s: 38%;
    --color-tertiary-l: 92%;

    --color-tertiary-hover: #e6dccf;
    --color-tertiary-hover-h: 34;
    --color-tertiary-hover-s: 32%;
    --color-tertiary-hover-l: 86%;

    /* HLAVIČKA – teplá krémová místo studené */
    --color-header-background: #fdfaf7;
    --header-background-url: none;

    --template-font: "Roboto";
    --template-headings-font: "Exo 2";

    /* COOKIES LIŠTA */
    --cookies-notice-background: #fdfaf7;
    --cookies-notice-color: #2c1a12;
    --cookies-notice-button-hover: #9c3d1a;
    --cookies-notice-link-hover: #bb4a20;

    --templates-update-management-preview-mode-content: "Náhled aktualizací šablony je aktivní pro váš prohlížeč.";
}


/* ============================================================
   2) OBECNÉ ZAOBLENÍ – bannery, tlačítka, dlaždice
   ============================================================ */
.benefitBanner {
    padding-top: 50px;
}

.next-to-carousel-banners {
    margin-top: -40px;
}
.next-to-carousel-banners .banner-wrapper img {
    border-radius: 15px;
}

.btn.btn-default,
a.btn.btn-default {
    border-radius: 15px;
}

.products-block > div .p {
    border-radius: 15px;
}
.products-block > div .p > a img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.products-block > div .p .p-bottom > div .p-tools > .btn:last-child {
    border-radius: 15px;
}

.shp-tabs-holder ul.shp-tabs li a {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

.btn.loadMore__button,
.pagination .pagination__list .pagination__link,
a.btn.goToTop__button {
    border-radius: 15px;
}

.ui-slider-horizontal .ui-slider-handle {
    border-radius: 5px;
}


/* ============================================================
   3) ŘAZENÍ PRODUKTŮ (listSorting)
   ============================================================ */
/* První tlačítko (Nejprodávanější) – zaoblení levého horního rohu */
.listSorting__controls li:first-child .listSorting__control {
    border-radius: 15px 0 0 0;
}
/* Poslední tlačítko (Abecedně) – zaoblení pravého horního rohu */
.listSorting__controls li:last-child .listSorting__control {
    border-radius: 0 15px 0 0;
}


/* ============================================================
   4) KOŠÍK / MNOŽSTVÍ
   ============================================================ */
.quantity {
    border-radius: 15px;
}
.btn.btn-cart,
.btn.btn-conversion,
a.btn.btn-cart,
a.btn.btn-conversion {
    border-radius: 15px;
}
.btn.btn-lg.btn-default.btn-arrow-right.btn-text {
border-radius: 0 15px 15px 0 !important;
}

:where(.ums_forms_redesign--on) .discount-coupon .form-control {
border-radius: 15px 0 0 15px !important;
}


/* ============================================================
   5) HLAVIČKA A MENU – barvy textu a ikon
   ============================================================ */
/* Tmavý text pro celou hlavičku a menu */
#header,
#header .header-top *,
#header .site-name *,
#header .navigation-buttons *,
#header .cart-count,
.navigation-in *,
.menu-helper > span,
.menu-helper > ul > li a,
.menu-helper > ul > li a:hover,
.navigation-in .menu-level-1 > li > a,
.navigation-in .menu-level-1 > li > a > span {
    color: #333333 !important;
}

/* Tmavé ikony v hlavičce */
#header svg,
#header svg path,
.navigation-in svg,
.navigation-in svg path {
    fill: #333333 !important;
    color: #333333 !important;
}

/* Hover hlavního menu – barva loga */
.navigation-in .menu-level-1 > li > a:hover,
.navigation-in .menu-level-1 > li > a:hover > span {
    color: var(--color-primary) !important;
}


/* ============================================================
   6) KATEGORIÁLNÍ HERO BOXY „PRO PSY" / „PRO KOČKY"
   ============================================================ */
/* Jemné pozadí místo syté terakoty / olivy */
.hero-dogs { background: #f6e3d8 !important; }
.hero-cats { background: #e8eee2 !important; }

/* Nadpisy v tmavé barvě ze značky */
.hero-dogs h2 { color: #9c3d1a !important; }
.hero-cats h2 { color: #4a6138 !important; }

/* Podnadpisy tlumeně tmavé */
.hero-dogs p,
.hero-cats p { color: #5a534c !important; }

/* Akcent přesunut do tlačítka „Zobrazit vše" */
.hero-dogs .chlupacky-btn-all { background: var(--color-primary) !important; color: #ffffff !important; }
.hero-cats .chlupacky-btn-all { background: var(--color-secondary) !important; color: #ffffff !important; }
.hero-dogs .chlupacky-btn-all:hover { background: var(--color-primary-hover) !important; color: #ffffff !important; }
.hero-cats .chlupacky-btn-all:hover { background: var(--color-secondary-hover) !important; color: #ffffff !important; }

/* Jemné orámování bílých dlaždic na světlém pozadí */
.hero-dogs .chlupacky-category-box,
.hero-cats .chlupacky-category-box { border-color: rgba(0, 0, 0, 0.06) !important; }


/* ============================================================
   7) VYHLEDÁVACÍ POLE – pole + tlačítko jako jeden celek
   (platí všude na webu, včetně košíku)
   ============================================================ */
.search-form fieldset {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;              /* žádná mezera – pole a tlačítko navazují */
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.search-form .search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;                        /* zabrání zalomení tlačítka */
    height: 70px !important;
    border-radius: 15px 0 0 15px !important;        /* zaoblení jen vlevo */
}

.search-form .btn.btn-default.btn-arrow-right.btn-lg {
    flex: 0 0 auto !important;
    height: 70px !important;
    min-width: 70px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 15px 15px 0 !important;        /* zaoblení jen vpravo */
    padding: 0 22px !important;
}


/* ============================================================
   8) VÝBĚR VELIKOSTI (Select2 widget)
   ============================================================ */
.ums_forms_redesign--on .select2-container {
    width: 100% !important;        /* Select2 zapisuje šířku inline */
    max-width: 320px;
}

.ums_forms_redesign--on .select2-selection {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    border-radius: 15px !important;
    border: 1px solid var(--color-tertiary-hover) !important;
    background-color: #fff !important;
}

.ums_forms_redesign--on .select2-selection .select2-selection__rendered {
    line-height: normal !important;
    padding: 0 !important;
    color: inherit !important;
}

.ums_forms_redesign--on .select2-selection .select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
}

.ums_forms_redesign--on.select2-container--open .select2-selection,
.ums_forms_redesign--on .select2-container--open .select2-selection {
    border-color: var(--color-primary) !important;
}

:where(.ums_forms_redesign--on) .select2-selection, :where(.ums_forms_redesign--on) select, :where(.ums_forms_redesign--on) select.form-control hidden-split-parameter parameter-id-23 form-control{
margin-bottom: 20px;
border-top-right-radius: 15px !important;
border-top-left-radius: 15px !important;


}