@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

/* změna fontu */
h1.product-title, .product-name, .footer-section h3, .footer-logo-text, h2.empty-cart-title, h2.text-center {
 font-family: 'Alfa Slab One', sans-serif;
 font-weight: 400;
  text-transform: uppercase;

}
/* Hero */
.content-managed-hero__body h1:after {
    content: "B2B objednávkový systém";
    flex-direction: column;
    font-family: var(--eshop-font-family);
    font-size: 0.6em;
    margin-top: 1rem;
    font-weight: 600;
}
.content-managed-hero__body h1 {
    font-family: 'Alfa Slab One', sans-serif;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    text-shadow: 0px -3px 20px black;
    text-align: center;
    margin-top: 10px;
    flex-direction: column;
}
.content-managed-hero {
    display: flex;
    height: 100%;
    margin: 0 auto !important;
    min-height: 28rem !important;
    max-width: 1450px;
    background-color: #fff!important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    justify-content: center;
}
.content-managed-hero__body {
    display: flex;
}
.content-managed-hero__inner {
    margin-top: 100px;
}

/* Critical */
.fw-bold {
    font-weight: 400 !important;
}
@media (max-width: 420px) {
    .menu-btn span {
        margin: 5px auto;
        width: 20px;
    }
}
/* další úpravy */
.product-title:after {
  content: "";
  display: block;
  margin-top: 5px;
  width: 60px;
  height: 60px;
  background-image: url("https://www.twinberg.cz/wp-content/uploads/2022/06/separator-x.svg");
  background-size: cover;
}
/* CHECKOUT */
#content #checkout .nav {
    border-bottom: 2px solid var(--black);
}
#checkout .nav-link.active {
    background: var(--black);
    color: white;
    border-radius: 0;
}
#content #checkout .nav a {
    padding: 1rem 0 .6rem 0;
}

/* Archiv */
.product-card {
    background: var(--gray-50);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    transition: all .5s;
}
.product-card:hover {
    box-shadow: none;
    border:none;
}
.card-body {
    padding: 0;
}
.nav-link {
    color: var(--black);
    font-weight: 500;
}
.product-image-wrapper {
    mix-blend-mode: multiply;
    padding: 40px; /* zmenseni thmb */
    background: none;
}
.product-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
}
.card, #content .card.sidebar-menu {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 !important;
}
.card-contact {
    color: var(--black);
    padding: 0 !important;
}
.card-body {
    padding: 1rem 0;
}
.product-content div:has(.fw-bold.text-success) {
    display: none;
}
.card-contact div {
    font-size: .8em;
}
.product-footer {
    flex-wrap: wrap;
    gap:.5rem;
}
.breadcrumbs {
    padding: 1rem 0 3rem 0;
}
@media (min-width: 641px) {
.breadcrumbs {
  font-size: 1.3em;
}}
.breadcrumbs-current {
    color: var(--black);
    font-weight: 800;
}
.filter-bar {
    background: var(--gray-50);
    border-radius: 0;
    margin-bottom: 1rem;
}
.btn-primary {
    background: none;
    box-shadow: none;
    color: var(--black);
    flex: 1;
    border: solid 2px var(--black);
    border-radius: 0;
    text-transform: uppercase;
}
.btn-primary:hover {
    background: var(--black);
    color: var(--white);
    border: solid 2px var(--black);
    box-shadow: none;
}

/* Badge */
.product-badge {
    border-radius: 0;
    padding: .3rem .75rem;
    gap: 2px;
    align-items: flex-start;
}
.badge-topselling, .badge-recommended {
    background: none;
    color: var(--black);
    border: solid 2px var(--black);
}
.badge-new {
    background: none;
    color: var(--green);
    border: solid 2px var(--green);
}
/* Text */
.text-success {
    color: var(--green)!important;
    font-size: 13px;
}
.price-current {
    font-size: 1.5rem;
    font-family: var(--eshop-font-family);
    font-size: 17px;
    font-weight: 700;
}
.product-name {
    font-size: 17px;
    font-weight: normal;
    color: var(--black);
}
    
/* Product */
.product-specs {
    background: none;
    padding: 1rem 0;
}
.spec-item {
    text-align: center;
    padding: 1rem 0;
    border: solid 2px var(--black);
}
button.btn-add-cart {
    background: none;
    border: solid 2px var(--black);
    border-radius: 0;
}
button.btn-add-cart:hover {
    background: var(--black);
    border: solid 2px var(--black);
    color: white;
}
.tab-btn.active:after {
    background: var(--black);
}
/* Global */
.container, .main, .header-container, .footer-main, .footer-bottom-content {
    max-width: 1600px;
}
.box {
    background: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
 .product-grid {
   gap: 1rem;
 }
 p a {
    color: inherit;
    font-weight: 800;
}
.breadcrumbs-content a:last-of-type {
    font-weight: 800;
}
 
 /* Empty cart */
 .empty-cart-inner {
    backdrop-filter: none;
    background: none;
    border-radius: 16px;
    box-shadow: none;
    max-width: 380px;
    padding: 30px 20px;
}
.empty-cart-image {
    display: none;
}
.card.shadow {
    box-shadow: none!important;
}
h2.empty-cart-title:before, h2.text-center:before {
    margin: 0 auto;
    content: "";
    display: block;
    margin-bottom: 15px;
    width: 100px;
    height: 100px;
    background-image: url(https://www.twinberg.cz/wp-content/uploads/2022/06/separator-x.svg);
    background-size: cover;
}

@media (min-width: 1281px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 992px) {
div:has(> div.sidebar-menu) {
  width: 16%;
}}

.quantity-control {
    border: none;
    border-radius: 0;
}
.qty-value {
    width: 40px;
    margin: 0 2px;
}
.qty-btn {
    background: none;
    border: solid 2px transparent;
    border-radius: 100px;
    transition: border-color 0.5s;
}
@media (min-width: 768px) {
.qty-btn:hover {
    border: solid 2px var(--black);
}}
@media (max-width: 767px) {
.qty-btn:active {
    border: solid 2px var(--black);
}}

.product-description{
    color: var(--black);
}
.thumbnail {
    background: none;
    border-radius: 0;
}
.thumbnail img {
    height: 100%;
    width: auto;
    align-content: center;
    margin: 0 auto;
}

:root {
    --white: #fff;
    --black: #1d2025;
    --charcoal: #1a1a1a;
    --slate: #666;
    --green: #169179;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1d2025;
    --bs-btn-active-border-color: #1d2025;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: none;
    --bs-btn-disabled-border-color: #555555;
}

/* Menu */
.header {
    box-shadow: 0 2px 20px 10px rgb(0 0 0 / 0%);
    transition: all 1s ease;
}
.header.scrolled {
    box-shadow: 0 2px 20px 10px rgb(0 0 0 / 15%);
}
.navigation-shell {
    box-shadow: none;
}
.logo {
    max-width: 190px;
}
.main-nav, .top-menu {
    align-items: center;
    display: flex;
    justify-content: center;
}
.top-menu>.menu-item>.nav-link-top.active {
    text-decoration: none;
    border: solid 2px #fff;
}
.top-menu>.menu-item>.nav-link-top {
    text-decoration: none;
    border: solid 2px #1d2025;
}
.top-menu>.menu-item>.nav-link-top:hover {
    opacity:.6;
    text-decoration: none;
}
.header-actions {
    gap: 0;
}
.header-actions .text-white {
    margin-right:1rem;
}
.cart-badge {
    background: white;
}

/* Mobile menu */
.mobile-menu-inner {
    background-color: #1d2025;
}
.mobile-menu-item > .mobile-nav-link, .mobile-menu-item > .submenu-toggle {
    color: white;
}
.mobile-menu-inner a img {
  display: none!important;
}  
li.mobile-menu-item:last-of-type {
    position: absolute;
    bottom: 70px;
}
li.mobile-menu-item:last-of-type a {
    font-size: 1.5rem;
}
.mobile-menu-item > .mobile-nav-link.is-active {
    background: none;
    color: white;
    font-weight: 800;
}
.mobile-nav-link:hover, .mobile-sub-link:hover, .submenu-toggle:hover {
    background: none;
}
li.mobile-menu-item:last-of-type a:after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 11px;
    position: absolute;
    bottom: 23px;
  background-color: currentColor;  
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
}
@media (max-width: 767.98px) {
    .button-group-nav {
        display: block;
    }
    .header-actions .text-white {
        display: none;
  }
div#search-form {
    width: 100% !important;
    margin-top: 0rem !important;
    height: 100vh;
}
}
div#search-form {
    padding: 2rem 1rem;
    background-color: #ffffffd1;
    backdrop-filter: blur(7px);
}
form.search-form .form-control {
    border: 2px solid var(--black);
    border-right: none;
    border-radius: 0;
    font-size: .9rem;
    line-height: 1.5;
    padding: .375rem .75rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Customer */
.customer-menu-link.is-active .customer-menu-icon {
    background: none!important;
    color: var(--black)!important;
}
.customer-menu-link.is-active {
    background: none!important;
    box-shadow: inset 2px 0 0 var(--black)!important;
    color: var(--black)!important;
}
.customer-menu-icon {
    background: none!important;
}
.customer-order-card {
    background: none;
    border: none;
    border-bottom: 1px dotted black;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

/* footer */
@media (min-width: 768px) {
    .footer-main {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .footer-main--twinberg {
        column-gap: 2rem;
        grid-template-columns: minmax(400px, 2fr) minmax(200px, 1fr) minmax(200px, 1fr);
    }
}
ul.footer-links {
    padding-left: 0;
}
.footer-section h3:after {
  display: none;
}
.footer {
    background: var(--black);
}
.footer-desc {
    color: var(--white);
}
.footer-links a {
    align-items: center;
    color: var(--white);
    font-size: 1.2rem;
}
.footer-bottom-content {
    justify-content: center;
}