/* AVITA – GLOBÁLNY VÝPIS PODKATEGÓRIÍ */

ul.subcategories{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    margin:14px 0 22px !important;
    padding:0 !important;
    list-style:none !important;
}

/* Prebitie Shoptet / Bootstrap col-* pravidiel */
ul.subcategories > li,
ul.subcategories > li[class*="col-"]{
    float:none !important;
    display:block !important;
    flex:0 0 auto !important;
    flex-basis:auto !important;
    flex-grow:0 !important;
    flex-shrink:0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 10px 10px 0 !important;
    padding:0 !important;
    list-style:none !important;
}

ul.subcategories > li > a{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:auto !important;
    max-width:none !important;
    min-height:40px;
    padding:7px 16px !important;
    border:1px solid #eadfdd !important;
    border-radius:10px !important;
    background:#faf8f7 !important;
    box-sizing:border-box !important;
    color:#663234 !important;
    text-align:center !important;
    text-decoration:none !important;
    font-size:14px !important;
    line-height:1.25 !important;
    font-weight:600 !important;
    white-space:normal !important;
    transition:.2s ease;
}

ul.subcategories > li > a:hover{
    background:#fff1ee !important;
    border-color:#d5796c !important;
    transform:translateY(-1px);
}

ul.subcategories img,
ul.subcategories .image,
ul.subcategories .category-image,
ul.subcategories > li::before,
ul.subcategories > li::after{
    display:none !important;
    content:none !important;
}


/* TABLET */

@media(max-width:991px){

    ul.subcategories{
        margin:12px 0 18px !important;
    }

    ul.subcategories > li,
    ul.subcategories > li[class*="col-"]{
        flex:0 0 auto !important;
        flex-basis:auto !important;
        width:auto !important;
        max-width:none !important;
        margin:0 7px 7px 0 !important;
    }

    ul.subcategories > li > a{
        display:inline-flex !important;
        width:auto !important;
        min-height:38px;
        padding:6px 12px !important;
        font-size:13px !important;
    }
}


/* MOBIL */

@media(max-width:767px){

    ul.subcategories{
        margin:10px 0 16px !important;
    }

    ul.subcategories > li,
    ul.subcategories > li[class*="col-"]{
        flex:0 0 auto !important;
        flex-basis:auto !important;
        width:auto !important;
        max-width:none !important;
        margin:0 6px 6px 0 !important;
    }

    ul.subcategories > li > a{
        display:inline-flex !important;
        width:auto !important;
        min-height:36px;
        padding:5px 10px !important;
        border-radius:9px !important;
        font-size:12px !important;
    }
}


/* MALÉ MOBILY */

@media(max-width:380px){

    ul.subcategories > li,
    ul.subcategories > li[class*="col-"]{
        margin:0 5px 5px 0 !important;
    }

    ul.subcategories > li > a{
        min-height:34px;
        padding:5px 8px !important;
        font-size:11px !important;
    }
}

/*Zobrazit viac uprava*/
.fvstudio-showmore-wrapper {
text-transform: uppercase;
font-weight: 700;
}

div.search-whisperer ul li a[href="/c-d3-zinok-liposomal-plus-vip/"] {
		display: none !important;
}

a[href="/vip/"] {
		display: none !important;
}

span.flag.flag-discount {
    background-color: #663234 !important;
  }
span.flag.flag-new {
    background-color: #663234 !important;
}

.navigation-in > ul > li > a {
    text-transform: uppercase;
}

.categories .topic {
    text-transform: uppercase;
}

.navigation-in ul.menu-level-2 {
    z-index: 1001;
    position: absolute;
    left: 0;
    top: calc(100% - 32px / 2);
    width: 300px;
    margin-left: 0;
    border-style: solid;
    border-width: 1px;
}

@media only screen and (max-width: 420px) {
.navigation-in ul.menu-level-2 li a {
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #fff;
}

.navigation-in ul.menu-level-2 {
    z-index: 1001;
    left: 0;
    top: calc(100% - 0px / 2);
    width: 100%;
    margin-left: 0;
    border-style: solid;
    border-width: 0px;
    background: #663234;
    color: #fff;
}
}

.carousel-control {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
  width:5%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

  ol.top-products li::before {
    counter-increment: top;
    content: counter(top);
    flex: 0 0 30px;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    font-weight: 800;
}

  ol.top-products li a.top-products-image {
    flex: 0 0 80px;
    display: block;
}

  .columns-3 .columns-4 .products-block>div {
    width: 33.333333%;
}
.columns-3 .columns-4 .products-block>div :hover {
    width: 33.333333%;
-moz-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    -o-transform: scale(1.05) slow;
    -ms-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    transform: scale(1.05) slow;
}
.btn.btn-primary, a.btn.btn-primary {
    color: #663234;
    border-color: #663234;
    background-color: #fff;
    color: #fff;
    border-color: #45A509;
    background-color: #45A509;
    border-radius: 50px;
}

.external-fonts-loaded h1, .external-fonts-loaded h2, .external-fonts-loaded h3, .external-fonts-loaded h4, .external-fonts-loaded h5, .external-fonts-loaded h6, .external-fonts-loaded .h1, .external-fonts-loaded .h2, .external-fonts-loaded .h3, .external-fonts-loaded .h4, .external-fonts-loaded .h5, .external-fonts-loaded .h6, .external-fonts-loaded .cart-table .main-link, .external-fonts-loaded .cart-related-name, .blank-mode h1, .blank-mode h2, .blank-mode h3, .blank-mode h4, .blank-mode h5, .blank-mode h6, .blank-mode .h1, .blank-mode .h2, .blank-mode .h3, .blank-mode .h4, .blank-mode .h5, .blank-mode .h6, .blank-mode .cart-table .main-link, .blank-mode .cart-related-name {
    font-family: 'Titillium Web', sans-serif!important;
font-weight:700;
}
.news-item .text .title {
    line-height: 32px;
    font-size: 28px;
    text-decoration: none;
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
}
.recommended-products .browse {
    position: absolute;
    top: 50%;
    display: block;
    width: 50px;
    height: 50px;
    margin-top: -23px;
    border-style: solid;
    border-width: 3px;
    border-radius: 50%;
    text-decoration: none;
}
.wide-carousel{

background-repeat:no-repeat;
background-size:contain;
background-position: center;
}
.dklab_instagram_widget_box>a>span>img {
    display: block;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%; 
    padding: 10px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
}
  #dklab_instagram_widget {
    margin-top: 50px;
}
  #dklab_instagram_widget_in {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: white;
    margin-bottom: 50px;
}

footer .footer-newsletter, #footer .footer-rows, #footer .footer-bottom {
  
    border-top: solid 2px #ccc;
}
#dklab_instagram_widget {
    margin-top: 40px;
    width: 72%;
    margin: auto;
}


/*Lang menu*/
.lang-menu{
	    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: rgba(255, 255, 255, 0.3);
}
.lang-menu>a {
    display: flex;
    text-align: center;
    color: #fff;
    font-size: 13px;
    line-height: unset;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.lang-menu>a:before{
content: "";
    background-image: url(https://www.avita.cz/user/documents/upload/flagy/sk_flag.png);
    width: 100%;
    height: 28.5px;
    margin-bottom: 10px;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;	
}
@media(max-width:767px){
.lang-menu>a:before {
    margin-bottom: 0;
}
.lang-menu>a {
    font-size: 8px;
}
}
/*Top kategorie uprava ramcekov a schovanie na mobile*/
.top-category-addon.no-more-link .menu-content {
		padding: 0px 25px 0px 20px;
}
@media only screen and (max-width: 420px) {
.top-category-addon {
		display: none;
}

@media (min-width: 768px)
.top-category-addon {
  margin-bottom: 0;
  margin-top: 70px;
}

}
.top-category-addon.is-slider.is-slider-arrows-bottom .menu-level-2 {
  padding-bottom: 0px;
}


/* ============================================================
   AVITA – NOVÝ BLOK: Košík (Krok 1) – zmeny scopované len na #cart-wrapper,
   nezasahujú do tlačidiel na homepage/kategóriách/produktoch
   ============================================================ */

#cart-wrapper .btn.btn-primary,
#cart-wrapper a.btn.btn-primary,
#cart-wrapper .btn.btn-cart,
#cart-wrapper a.btn.btn-cart,
#cart-wrapper .btn.btn-conversion,
#cart-wrapper a.btn.btn-conversion {
  border-color: #d5796c !important;
  background-color: #d5796c !important;
  color: #fff !important;
  border-radius: 50px !important;
}

#cart-wrapper .btn.btn-primary:hover,
#cart-wrapper a.btn.btn-primary:hover,
#cart-wrapper .btn.btn-cart:hover,
#cart-wrapper a.btn.btn-cart:hover,
#cart-wrapper .btn.btn-conversion:hover,
#cart-wrapper a.btn.btn-conversion:hover {
  border-color: #AE6358 !important;
  background-color: #AE6358 !important;
  color: #fff !important;
}

/* Progress bar "doprava zdarma" */
#cart-wrapper .price-range {
  background: #f0e5e4 !important;
}

#cart-wrapper .price-range > div {
  background: #d5796c !important;
}

/* Trust riadok v košíku v3 – jemné farebné pozadie so zaoblenými
   rohmi, jednotná fajka (✓) namiesto piktogramov, väčší text. */
#cart-wrapper .avita-cart-trust {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  background: #f7f0f1 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 8px !important;
  margin: 0 0 16px !important;
}

#cart-wrapper .avita-cart-trust > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  border-right: none !important;
}

#cart-wrapper .avita-cart-trust > span:last-child {
  border-right: none !important;
}

#cart-wrapper .avita-cart-trust .act-icon {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #663234 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#cart-wrapper .avita-cart-trust .act-text {
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #663234 !important;
}

@media (max-width: 767px) {
  #cart-wrapper .avita-cart-trust {
    padding: 10px 4px !important;
  }

  #cart-wrapper .avita-cart-trust > span {
    gap: 6px !important;
    padding: 0 4px !important;
  }

  #cart-wrapper .avita-cart-trust .act-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
  }

  #cart-wrapper .avita-cart-trust .act-text {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}




/* ============================================================
   AVITA – Krok 2: Doprava & platba
   v5 – OPRAVA rozbitého gridu:
   - v4 omylom zrušila aj padding (nielen border) na .co-box sekciách,
     čo odstránilo natívne odsadenie medzi stĺpcami a rozbilo layout.
   - Teraz sa mení LEN border-width na 0 (rámik "vypnutý", nie odstránený
     štrukturálne), padding zostáva netknutý → grid/rozostupy sa vrátia.
   - Riadky ešte kompaktnejšie na výšku, ako bolo požadované.
   ============================================================ */

/* Vypnutie viditeľného rámika okolo sekcie – BEZ zásahu do paddingu/layoutu */
.co-delivery-method.co-box,
.co-payment-method.co-box {
  border-width: 0 !important;
}

/* Kompaktnejšie zaoblené karty pre jednotlivé možnosti */
.co-delivery-method .radio-wrapper,
.co-payment-method .radio-wrapper {
  border: 1px solid #e5dcda !important;
  border-radius: 10px !important;
  padding: 4px 8px !important;
  margin-bottom: 3px !important;
}

/* Vybraná možnosť – coral orámovanie + jemné podfarbenie */
.co-delivery-method .radio-wrapper.active,
.co-payment-method .radio-wrapper.active {
  border-color: #d5796c !important;
  background-color: #fff5f3 !important;
}

/* Hover pre nevybrané možnosti */
.co-delivery-method .radio-wrapper:not(.active):hover,
.co-payment-method .radio-wrapper:not(.active):hover {
  border-color: #AE6358 !important;
}

/* Text a cena vybranej možnosti – Umbra Brown */
.co-delivery-method .radio-wrapper.active label,
.co-payment-method .radio-wrapper.active label,
.co-delivery-method .radio-wrapper.active .payment-shipping-price,
.co-payment-method .radio-wrapper.active .payment-shipping-price {
  color: #663234 !important;
}

/* Farba radio kruhu pri výbere */
.co-delivery-method .radio-wrapper.active input[type="radio"],
.co-payment-method .radio-wrapper.active input[type="radio"] {
  accent-color: #d5796c !important;
}

/* Nadpisy sekcií */
.order-icon.order-delivery,
.co-payment-method h2 {
  color: #663234 !important;
  font-family: 'Titillium Web', sans-serif !important;
}

/* Tlačidlo POKRAČOVAT na kroku 2 – over po nasadení */
.next-step.next-step--1 a,
.next-step.next-step--1 button {
  background-color: #d5796c !important;
  border-color: #d5796c !important;
  color: #fff !important;
  border-radius: 50px !important;
}

.next-step.next-step--1 a:hover,
.next-step.next-step--1 button:hover {
  background-color: #AE6358 !important;
  border-color: #AE6358 !important;
}



/* ============================================================
   AVITA – Krok 0: Breadcrumb (cart-header) v4
   OPRAVA MOBILU: flex položky (.step) nemali min-width:0, takže sa
   pri úzkom okne (napr. mini-popup ~300-320px) odmietali zmenšiť pod
   šírku textu -> texty sa prekrývali/zlepovali namiesto zalomenia.
   Teraz sú rovnomerne 1/3 široké (flex:1 1 0) a smú sa zmenšiť
   (min-width:0), text sa zalomí na 2 riadky ako pri Brain Markete.
   ============================================================ */

.cart-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: relative !important;
  gap: 4px !important;
  padding: 20px 10px 12px !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  border: none !important;
}

.cart-header::before {
  content: '' !important;
  position: absolute !important;
  top: 32px !important;
  left: 15% !important;
  right: 15% !important;
  height: 2px !important;
  background: #e5dcda !important;
  z-index: 0 !important;
}

.cart-header .step {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 33.333% !important;
  text-align: center !important;
  padding: 0 4px !important;
  margin: 0 !important;
}

.cart-header .step,
.cart-header .step *,
.cart-header .step a,
.cart-header .step a *,
.cart-header .step strong,
.cart-header .step strong *,
.cart-header .step:hover,
.cart-header .step:hover *,
.cart-header .step a:hover,
.cart-header .step a:hover *,
.cart-header .step a:focus,
.cart-header .step strong:hover,
.cart-header .step strong:hover * {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.cart-header .step a,
.cart-header .step strong {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: default !important;
  min-width: 0 !important;
  width: 100% !important;
}

.cart-header .step a {
  cursor: pointer !important;
}

.cart-header .step a::before,
.cart-header .step strong::before {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid #e5dcda !important;
  background: #fff !important;
  color: #9a9a9a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.cart-header .step-1 a::before,
.cart-header .step-1 strong::before { content: "1" !important; }
.cart-header .step-2 a::before,
.cart-header .step-2 strong::before { content: "2" !important; }
.cart-header .step-3 a::before,
.cart-header .step-3 strong::before { content: "3" !important; }

.cart-header .step.active a::before,
.cart-header .step.active strong::before {
  background: #d5796c !important;
  border-color: #d5796c !important;
  color: #fff !important;
}

.cart-header .step.completed a::before,
.cart-header .step.completed strong::before {
  content: "✓" !important;
  background: #d5796c !important;
  border-color: #d5796c !important;
  color: #fff !important;
}

.cart-header .step span {
  display: inline-block !important;
  max-width: 100% !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #9a9a9a !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.cart-header .step.active span,
.cart-header .step.completed span {
  color: #663234 !important;
}

/* TABLET / MENŠÍ MOBIL */
@media (max-width: 767px) {
  .cart-header {
    gap: 2px !important;
    padding: 14px 4px 8px !important;
  }

  .cart-header::before {
    top: 24px !important;
    left: 14% !important;
    right: 14% !important;
  }

  .cart-header .step {
    padding: 0 2px !important;
  }

  .cart-header .step a::before,
  .cart-header .step strong::before {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }

  .cart-header .step span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
}

/* VEĽMI ÚZKE OKNO (napr. mini-popup košíka ~300-340px) */
@media (max-width: 360px) {
  .cart-header {
    padding: 12px 2px 6px !important;
  }

  .cart-header::before {
    top: 20px !important;
  }

  .cart-header .step a::before,
  .cart-header .step strong::before {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  .cart-header .step span {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
}


/* ============================================================
   AVITA – Košík: Produktový riadok v4
   Desktop AJ mobil vrátené na natívne rozloženie Shoptetu.
   Predošlé pokusy o custom mobilný layout (grid aj flex) spôsobovali
   viac problémov než riešili – vraciame sa na overený základ a
   meníme len to, čo je bezpečne overené (podfarbenie fotky).
   Steper množstva (−/1/+) má v skutočnosti štruktúru
   span.quantity > button.increase / button.decrease (potvrdené
   z DevTools), NIE input+button ako som predpokladala – preto
   predošlé zaoblenie netrafilo správne elementy. Riešime to
   v ďalšom kroku, až budeme mať kompletne rozbalený DOM.
   ============================================================ */

/* Jemné podfarbenie produktovej fotky – jediná zmena, ktorá je
   bezpečne overená a funguje na desktope aj mobile */
#cart-wrapper .cart-table .cart-p-image img {
  background: #f5f1f0 !important;
  mix-blend-mode: multiply !important;
  border-radius: 8px !important;
}
/* ============================================================
   AVITA – Košík: Zľavový kupón – kompaktný jednoriadkový vzhľad
   Štruktúra potvrdená z DevTools:
   div.discount-coupon > form.input-group.compact-form
     > input#discountCouponCode.form-control
     > button.btn.btn-lg...
   Cieľ: input + tlačidlo vedľa seba v jednom riadku (ako Brain
   Market), nie dva veľké bloky nad sebou.
   ============================================================ */

@media (max-width: 767px) {
  #cart-wrapper .discount-coupon {
    width: 100% !important;
    max-width: 100% !important;
  }

  #cart-wrapper .discount-coupon .input-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

#cart-wrapper .discount-coupon .input-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

#cart-wrapper .discount-coupon input.form-control {
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  border: 1px solid #e5dcda !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  background: #fff !important;
}

#cart-wrapper .discount-coupon input.form-control:focus {
  border-color: #d5796c !important;
  outline: none !important;
}

/* Tlačidlo malo pôvodne dlhý text "Přidat slevový kupón" + šípku
   (cez triedu btn-arrow-right). Skrývame pôvodný text/ikonu cez
   font-size:0 a nahrádzame krátkym "PŘIDAT" cez ::after – bez JS. */
#cart-wrapper .discount-coupon button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: auto !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #d5796c !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-size: 0 !important;
  white-space: nowrap !important;
}

/* Pôvodná šípka je samostatný ::before pseudo-element (nie súčasť
   textu), preto ju font-size:0 na tlačidle neschoval – mažeme zvlášť */
#cart-wrapper .discount-coupon button::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

#cart-wrapper .discount-coupon button::after {
  content: "PŘIDAT" !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-family: 'Titillium Web', sans-serif !important;
}

#cart-wrapper .discount-coupon button:hover {
  background: #AE6358 !important;
}

/* Na veľmi úzkom mobile zmenšiť tlačidlo aj vstupné pole */
@media (max-width: 400px) {
  #cart-wrapper .discount-coupon button {
    padding: 10px 14px !important;
  }

  #cart-wrapper .discount-coupon button::after {
    font-size: 11px !important;
  }

  #cart-wrapper .discount-coupon input.form-control {
    padding: 10px 10px !important;
    font-size: 13px !important;
  }
}


/* ============================================================
   AVITA – Krok 2: "Základní údaje objednávky" box – kompaktnejší
   Selektory potvrdené z DevTools (box.co-basic-information,
   h2.order-icon.order-information, .row, .col-sm-12).
   Cieľ: priblížiť sa výškou Brain Marketu (107px vs naše 183px na
   mobile pri rovnakej šírke).
   ============================================================ */

#checkoutContent .co-basic-information {
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  border-radius: 10px !important;
}

#checkoutContent .co-basic-information .order-icon.order-information {
  font-size: 16px !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#checkoutContent .co-basic-information .row {
  margin: 0 !important;
}

#checkoutContent .co-basic-information .col-sm-12,
#checkoutContent .co-basic-information [class*="col-"] {
  padding: 0 !important;
}

#checkoutContent .co-basic-information .form-group {
  margin-bottom: 0 !important;
}

#checkoutContent .co-basic-information label {
  font-size: 13px !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

#checkoutContent .co-basic-information select.form-control {
  height: auto !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}


/* ============================================================
   AVITA – Univerzálna oprava: VŠETKY nadpisy s triedou "order-icon"
   (order-information, order-delivery, order-payment) majú rovnaké
   natívne padding-bottom:19px, ktoré vytvára zbytočnú medzeru.
   Namiesto opravy každého zvlášť riešime celú triedu naraz.
   ============================================================ */

#checkoutContent .order-icon {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}


/* ============================================================
   AVITA – Krok 2: Rekapitulace objednávky – zaoblenie boxu
   a zvýraznenie názvu produktu (väčší, tučný text)
   Selektory potvrdené z DevTools (.order-summary.box.co-box,
   [data-testid="recapItemName"]).
   ============================================================ */

#checkoutContent .order-summary.co-box {
  border-radius: 10px !important;
}

#checkoutContent [data-testid="recapItemName"] {
  font-size: 15px !important;
  font-weight: 700 !important;
}


/* ============================================================
   AVITA – Krok 2: Select "Země doručení" – zaoblenie + brand farby
   Selektor potvrdený priamo z HTML, čo si poslal:
   select#deliveryCountryId.form-control
   ============================================================ */

#checkoutContent select#deliveryCountryId {
  border: 1px solid #e5dcda !important;
  border-radius: 8px !important;
  color: #663234 !important;
  background-color: #fff !important;
  padding: 10px 30px 10px 12px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23663234' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
}

/* Na mobile nech select zaberie celú šírku svojho stĺpca – na desktope
   necháme natívnu/pôvodnú šírku, aby sa to neroztiahlo cez celý riadok. */
@media (max-width: 767px) {
  #checkoutContent select#deliveryCountryId {
    width: 100% !important;
    max-width: 100% !important;
  }
}

#checkoutContent select#deliveryCountryId:focus {
  border-color: #d5796c !important;
  outline: none !important;
}


/* ============================================================
   AVITA – Krok 3: "Osobní údaje" a "Fakturační adresa" – zaoblenie,
   kompaktnejšia výška, hover efekt. Len vizuál, funkčnosť netknutá.
   Selektory potvrdené z DevTools:
   fieldset.co-contact-information  (Osobní údaje – rám je priamo na fieldsete)
   div.co-billing-address           (Fakturační adresa – rám je na obalovom divu)
   Obe scopované pod #checkoutContent, nezasahujú do kontaktu/registrácie.
   ============================================================ */

#checkoutContent .co-contact-information,
#checkoutContent .co-billing-address {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

/* kompaktnejšia výška – menšie odsadenie nadpisu a polí */
#checkoutContent .co-contact-information h2,
#checkoutContent .co-billing-address h2 {
  margin-bottom: 10px !important;
}

#checkoutContent .co-contact-information .form-group,
#checkoutContent .co-billing-address .form-group {
  margin-bottom: 10px !important;
}

/* hover efekt na celej sekcii */
#checkoutContent .co-contact-information:hover,
#checkoutContent .co-billing-address:hover {
  border-color: #d5796c !important;
  box-shadow: 0 2px 12px rgba(213, 121, 108, 0.15) !important;
}

/* Vstupné polia v týchto dvoch sekciách – jemné zaoblenie a brand
   focus štýl namiesto natívneho hranatého modrého outline prehliadača */
#checkoutContent .co-contact-information input.form-control,
#checkoutContent .co-contact-information select.form-control,
#checkoutContent .co-billing-address input.form-control,
#checkoutContent .co-billing-address select.form-control {
  border: 1px solid #e5dcda !important;
  border-radius: 8px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

#checkoutContent .co-contact-information input.form-control:focus,
#checkoutContent .co-contact-information select.form-control:focus,
#checkoutContent .co-billing-address input.form-control:focus,
#checkoutContent .co-billing-address select.form-control:focus {
  border-color: #d5796c !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(213, 121, 108, 0.18) !important;
}

/* Tlačidlo "Přihlásit se do mého účtu" – tmavohnedé, zaoblené, biely bold text */
#checkoutContent .login-button {
  background-color: #663234 !important;
  border-color: #663234 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

#checkoutContent .login-button:hover {
  background-color: #4d2628 !important;
  border-color: #4d2628 !important;
  color: #fff !important;
}