/*
 * Anpassungen für Werbemittelshop
 */

 /* Variables */
 :root
 {
    /* --> Colors */
    --primary-color: #2B9CAB;
    --secondary-color: #EA6700;
    --light-grey: #FAFAFA;
    --medium-grey: #D9D8D7;
    --medium-brown: #965D32;
    --dark-brown: #41342B;
    --dark-blue: #36656B;
    --base-font-color: #777;
    --header-font-color: #555;
    --box-shadow-color: #ccc;
}

/* Global font settings */
@font-face 
{
    font-family: 'Sofia Sans';
    font-style: normal;
    src: url("../../fonts/SofiaSans-VariableFont_wght.ttf");
}
  
@font-face 
{
    font-family: 'Sofia Sans';
    font-style: italic;
    src: url("../../fonts/SofiaSans-Italic-VariableFont_wght.ttf");
}
body { font-family: "Sofia Sans", Arial, Helvetica, sans-serif; font-size: 1rem; line-height: normal; color: var(--base-font-color); }
p { font-family: "Sofia Sans", Arial, Helvetica, sans-serif !important; font-weight: 400; text-align: justify; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Sofia Sans", Arial, Helvetica, sans-serif !important; font-weight: 600; color: var(--header-font-color); }

/* Overrides */
.btn, .form-counter, .form-control { border-radius: 5px !important; }
.slick-slide a { text-decoration: none; }

/* --> Base layout */
.container-fluid-xl { max-width: 1250px; }
.row.display-flex { display: flex; flex-wrap: wrap; }
.row.display-flex > [class*='col-'] { display: flex; flex-direction: column; }

/* --> Search input */
input#search-header { border-radius: 5px 0px 0px 5px !important;}
button#search-button { border: 1px solid #707070; border-radius: 0px 5px 5px 0px !important;}

/* --> Main navigation */
.nav-item.nav-scrollbar-item > a.nav-link, #shop-nav a.nav-link { padding: 0.75rem !important;}
.nav-item.nav-scrollbar-item > a.nav-link > span { font-size: 1.1rem !important; }
.nav-item-lg-m { margin-top: 0.25rem !important; margin-bottom: 0.5rem !important; }
header .dropdown-menu { background-color: var(--light-grey); }
header .submenu-headline-toplevel { font-family: "Sofia Sans", Arial, Helvetica, sans-serif; font-weight: 400; text-decoration: none; border: none; margin-bottom: 0.25rem; }
.subcategory-wrapper .categories-recursive-link > span { font-weight: 600; }
.subcategory-wrapper .categories-recursive-dropdown .nav-link > span { font-size: 0.95rem; margin-bottom: 0.25rem; }
@media screen and (max-width: 992px)
{
    .nav-item.nav-scrollbar-item > a.nav-link > span, .nav-item-lg-m a, .nav-item-lg-m span { font-size: 1rem !important; }
    header .navbar-nav .nav-item, header .navbar-nav .nav-link, .nav-mobile-heading { padding: 0rem !important; margin: 0 !important; }
    .nav-item.nav-scrollbar-item > a.nav-link, 
    #shop-nav a.nav-link, .subcategory-wrapper .nav-mobile-heading,
    .subcategory-wrapper .nav-item-lg-m a.categories-recursive-link span,
    .subcategory-wrapper .subcategory-has-childs a.nav-link
    { padding: 0.75rem 1rem !important; }
    .subcategory-wrapper .nav-item.dropdown .nav-link.dropdown-toggle::after { margin-right: 1rem !important;}
}

/* --> Breadcrumbs */
.breadcrumb-wrapper
{
    border-style: solid;
    border-color: var(--medium-grey);
    border-width: 1px 0;
    background-color: var(--light-grey);
}
.breadcrumb-title { color: var(--medium-brown); }
.breadcrumb-item { display: flex; padding: 0.25rem 0;}
.breadcrumb-item span { font-size: 0.9rem; color: var(--dark-blue); font-weight: 400; }
.breadcrumb-item:hover span { color: var(--primary-color); text-decoration: underline; }
.breadcrumb-item + .breadcrumb-item::before { content: '\203A'}

/* --> Category List */
.sub-categories { box-shadow: 1px 1px 5px 0px var(--header-font-color); }
.sub-categories .subcategories-image { overflow: hidden; }
.sub-categories .subcategories-image img, .productlist-header-subcategories-info { transition: all 0.3s ease-in-out; }
.sub-categories .subcategories-image img { filter: grayscale(100%); }
.sub-categories:hover .subcategories-image img { filter: grayscale(0); scale: 1.1; }
.sub-categories .productlist-header-subcategories-info { width: 100%; padding: 0.25rem; background-color: var(--medium-grey); padding: 0.5rem; }
.sub-categories:hover .productlist-header-subcategories-info { background-color: var(--primary-color); color: var(--light-grey); }
.subcategories-info-link { text-decoration: none !important; }

/* --> Product list */
.row.product-list.layout-gallery { margin: auto; }
.product-wrapper
{
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, .01);
    box-shadow: 1px 0 0 0 var(--medium-grey),
    0 1px 0 0 var(--medium-grey),
    1px 0 0 0 var(--medium-grey) inset,
    0 1px 0 0 var(--medium-grey) inset;
    margin-bottom: 0 !important;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
}
@media screen and (max-width: 576px)
{
    #product-list .product-wrapper { margin-bottom: 0.5rem !important;}    
}
.product-wrapper:hover { border-color: var(--primary-color); }
.productbox.productbox-hover:hover .productbox-inner::before, 
.productbox.productbox-hover:focus .productbox-inner::before
{ box-shadow: none; top: auto; left: auto; right: auto; bottom: auto;}
.product-wrapper img { transition: all 0.5s ease-in-out; }
.product-wrapper:hover img { scale: 1.1; transform: translate(-45%, -45%); }
.productbox-ribbon.ribbon::before { border: none; }
.productbox-ribbon.ribbon { top: 0; left: auto; right: 0; }
.productbox.productbox-hover:hover .productbox-ribbon.ribbon { top: 0; left: auto; right: 0; }
.product-wrapper .product-box-info { padding: 0 1rem; }
.product-wrapper .productbox-title a
{ color: var(--primary-color); text-decoration: none; font-size: 1.1rem; font-weight: 600;}
.product-wrapper:hover .productbox-title a,
.product-wrapper:hover .price_wrapper
{ color: var(--primary-color) !important; }

/* --> Product detail */
.product-title, .product-configurator-title, .slick-slider-other > div.hr-sect.h2 { color: var(--primary-color);}
.swatches-image, .swatches-text, .alert.purchase-info { border-radius: 5px; }
.swatches-text {padding: 0.75rem; font-weight: 600;}
#image_wrapper { position: sticky; top: 1rem; margin-bottom: 1rem; }
.col.product-gallery, .variations > div.col > dl, .product-offer .price-box,  .product-offer div#add-to-cart, .product-info-base-information { background-color: var(--light-grey); padding: 1rem; }
.js-btn-slider-wrapper { font-size: 1.1rem; font-weight: 600 !important; color: var(--primary-color); }
.input-group.form-counter.choose_quantity, .swatches-text { background-color: white; }
.price.special-price::before { content: 'nur '; font-size: 1.1rem; }
.alert.purchase-info { background-color: var(--dark-blue); color: var(--light-grey); }
#tabAccordion > .card .card-header { font-size: 1rem; background-color: var(--dark-blue); color: var(--light-grey); }
.swatches-text.active, .swatches-image.active { border: 2px solid var(--secondary-color);}

/* Own widgets */
ul.triangle-list li { list-style-type: none; margin-left: -1.5rem !important; }
ul.triangle-list > li::before
{
    content: "";
    border-color: transparent var(--medium-brown);
    border-style: solid;
    border-width: 0.25em 0 0.25em 0.50em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.85em;
    position: relative;
}
ul.triangle-list.primary > li::before { border-color: transparent var(--primary-color); }

/* Helper classes */
.has-box-shadow
{
    -webkit-box-shadow: 1px 1px 3px 1px var(--box-shadow-color); 
    box-shadow: 1px 1px 3px 1px var(--box-shadow-color);
    border-radius: 5px;
}