/* start of AS code */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

@font-face {
    font-family: "area-normal", sans-serif !important;
}

:root {
/*    to use the tammis colora just invert those rules*/
/*    --primary-color: #4a2d23e6;*/
    --primary-color: #8c816f;
/*    --secondary-color: grey;*/
    --secondary-color: #8c816f;
/*    --hover-color: #4a2d23e6;*/
    --hover-color: #7291a1;
    --white: #ffffff;
    --hover-white: #dbdbdb;
    --text-black: #232323;
    --text-grey: #7a7a7a;
    --navbar-background-color: black;
    --footer-background-color: black;

/*    to use the tammis font jsut remove change those two*/
/*    --title-font: 'Playfair Display', serif;*/
    --title-font: 'Josefin Sans', sans-serif;
}


h3,
h4,
h5,
h6,
.product-title,
.ps-block__title,
p,
li,
a,
button,
input,
label,
div,
.dropdown-item,
.dropdown-item a,
.dropdown-item span {
    font-family: var(--title-font);
    font-weight: 500 !important;
}

/* Apply Ultra to h1 and h2 only */
h1,
h2,
.h3.hidden-sm-down,
.text-uppercase {
/*    font-family: "Monument Extended Regular", sans-serif !important;*/
    font-family: var(--title-font);
    font-weight: 500 !important;
}

.page-home h2,
h2:not(.product-title) {
    font-size: 2rem !important;
}
#main .page-home h2,
.page-home h2:not(.product-title) {
    font-size: 4rem !important;
}
@media (max-width: 768px) {
    .page-home h2,
    .page-home h2:not(.product-title),
    #main .page-home h2,
    .page-home h2:not(.product-title) {
        font-size: clamp(1.8rem, 2.5vw, 2.6rem) !important;
    }
}

.category a.dropdown-item {
    font-family: var(--title-font);
    font-weight: 300 !important;
}

.page-home h2:not(.product-title) {
    margin-bottom: 5vh !important;
    margin-top: 2vh !important;
}

/* Primary buttons (e.g., "Add to Cart") and their hover state */
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:visited {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important; /* Adjust text color if needed */
}

.btn-primary:hover {
    background-color: var(--hover-color) !important;
    border-color: var(--hover-color) !important;
    color: var(--white) !important;
}

/* Secondary buttons and other interactive elements (e.g., form submits) */
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--hover-color) !important;
    border-color: var(--hover-color) !important;
    color: var(--white) !important;
}

/* Link hovers (e.g., menu links, product titles) */
a:hover,
a:focus,
.sf-menu > li > a:hover,
.sf-menu > li.sfHover > a,
.category-sub-menu .category-sub-link-outer:hover .category-sub-link {
    color: var(--hover-color) !important;
    text-decoration: underline;
}

/**/
/**/
/**/
/**/

.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.group-span-filestyle .btn-default {
    background: var(--primary-color) !important;
}

/* Cart button/icon hover */

.block a,
span a,
#main li a,
.page-footer a,
.cart-grid-body,
.processing-order-text,
.page-content a,
#checkout a:not(.nav-link):not(.nav-item):not(.btn.btn-primary.full-right),
.tabs .nav-tabs .nav-link.active,
.cart-summary-products a,
.pack-product-name a,
.h6.product-name {
    color: var(--primary-color) !important;
}

.remove-from-cart i {
    color: var(--text-black) !important;
}

#exportDataToCsv,
#exportDataToPdf {
    color: var(--white) !important;
}

/*This is for the small icons */
i.material-icons:hover,
a.subcategory-name:hover,
.link-item:hover .material-icons {
    color: var(--primary-color) !important;
}

header i.material-icons:hover,
#header i.material-icons:hover {
    color: var(--hover-white) !important;
}

/* Language Selector */
.language-selector-wrapper:hover #language-selector-label,
.language-selector-wrapper:hover .btn-unstyle .expand-more,
.language-selector-wrapper:has(.language-selector.open)
    #language-selector-label,
.language-selector-wrapper:has(.language-selector.open) .btn-unstyle,
.language-selector-wrapper:has(.language-selector.open)
    .btn-unstyle
    .expand-more {
    color: var(--hover-white) !important;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
    border-bottom: var(--primary-color) 3px solid !important;
}

.address-item.selected,
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover {
    border: none !important;
}

.product-price,
.product-line-grid-body > a {
    color: var(--text-black) !important;
}

.js-parent-focus:focus-within .input-group-btn,
.subcategories-list > li:hover .subcategory-image a,
li:has(.subcategories-list *:hover) .subcategory-image a,
li:has(.subcategory-image:hover) .subcategory-image a,
li:has(h5:hover) .subcategory-image a,
.subcategory-image > a:hover,
.form-control:focus,
.product-message:focus {
    border-color: var(--primary-color) !important; /* change blue border */
    box-shadow: 0 0 0 0.2rem var(--primary-color) !important; /* softer red glow */
    outline: none !important;
}

/* so that every hover in the footer is light grey */
#footer a:hover,
#footer svg:hover {
    color: #dbdbdb !important;
}

#footer .material-icons:hover {
    color: #dbdbdb !important;
}

.dropdown-menu a.select-list:hover {
    background-color: #dbdbdb;
}

.product-flags li.product-flag.discount {
    background: var(--secondary-color) !important;
}

.product-flags li.product-flag {
    background: var(--primary-color) !important;
}

.has-discount .discount {
    background: var(--secondary-color) !important;
}

article:hover a {
    color: var(--text-grey) !important;
}

/**/
/* end of color settings */
/**/

.current-price-value {
    font-size: x-large !important;
}

#wrapper .breadcrumb {
    margin-bottom: 4vh !important;
    margin-top: 1vh !important;
}

/* --- Override Bootstrap container widths --- */
.container {
    width: 100% !important;
    max-width: 100% !important; /* fully fluid */
}

@media (min-width: 576px) {
    .container {
        max-width: 540px !important;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px !important;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px !important;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1500px !important; /* increase from 1140px */
    }
}

/* Extra small / default (xs) */
.col-3 {
    width: 20% !important;
}

/* Medium (≥768px) */
@media (min-width: 768px) {
    .col-md-3 {
        width: 20% !important;
    }
}

/* Large (≥992px) */
@media (min-width: 992px) {
    .col-lg-3 {
        width: 20% !important;
    }
}

/* Extra large (≥1200px) */
@media (min-width: 1200px) {
    .col-xl-3 {
        width: 20% !important;
    }
}

/* Extra extra large (≥1400px) */
@media (min-width: 1400px) {
    .col-xxl-3 {
        width: 20% !important;
    }
}

/* Changes the radiobutton with our color */
.custom-radio input[type="radio"] {
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.custom-radio input[type="radio"]:checked + span {
    background-color: var(--primary-color) !important;
}
.custom-radio input[type="radio"]:checked + span {
    border-color: var(--primary-color) !important;
}

/* for the elements in the cart */
.bootstrap-touchspin {
    display: flex !important;
}

/* removal of features that are added dynamically */
/* Remove quick-view feature */
.quick-view,
#checkout #footer,
#checkout #header,
.step-number {
    display: none !important;
}
/* Hide "on sale" flags */
li.product-flag.on-sale {
    display: none !important;
}
/* Hide highlighted info boxes (quick view, discount, etc.) */
.highlighted-informations {
    display: none !important;
}
/* Remove ::after pseudo-content in product description */
.product-description::after {
    content: none !important;
}

/* Here we set the stuff to display none and then in the js we set them visible after we change them */
/*#product #wrapper {
    display: none;
}
#product #footer {
    display: none;
}*/

/**/
/* custom-block */
/**/
#custom-text {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
    display: block !important;
    padding-right: unset !important;
    padding-left: unset !important;
}

.caption-description p {
    font-size: 3vh !important;
    line-height: 1.25em !important;
    margin: 3vh 0 !important;
    padding: 0 !important;
}

.custom-block-flex h2 {
    margin-bottom: 0 !important;
}

.custom-block-flex {
    display: flex;
    gap: 0;
    align-items: center;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    position: relative;
    /*background: linear-gradient(
        to right,
        rgba(200, 200, 200, 0.4) 0%,
        rgba(218, 41, 28, 0.4) 30%,
        rgba(218, 41, 28, 0.4) 70%,
        rgba(200, 200, 200, 0.4) 100%
    );*/
}

.custom-block-flex .image-left {
    flex: 0 0 60%;
    max-width: 60%;
    padding-right: 0;
}

.custom-block-flex .image-right {
    flex: 0 0 60%;
    max-width: 60%;
    padding-right: 0;
}

.custom-block-flex .text-right {
    flex: 0 0 40%;
    max-width: 40%;
    padding-left: 4rem;
    padding-right: 4rem;
}

.custom-block-flex .text-left {
    flex: 0 0 40%;
    max-width: 40%;
    padding-left: 4rem;
    padding-right: 4rem;
}

.text-right {
    text-align: left;
}

.text-left {
    text-align: right;
}

/* TODO: just for testing */
.text-left img,
.text-right img {
    height: 10vh !important;
    margin-bottom: 3vh;
}

.custom-block-flex .image-left img,
.custom-block-flex .image-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    #custom-text {
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .custom-block-flex {
        flex-direction: column; /* stack */
        gap: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* ---- 1. Force correct source order ---- */
    /*   .image-left  → stays first   */
    /*   .text-right  → stays second  */

    /*   .text-left   → move to the end   */
    /*   .image-right → move to the front */
    .custom-block-flex > .text-left {
        order: 2;
    }
    .custom-block-flex > .image-right {
        order: 1;
    }

    /* ---- 2. Universal child styling ---- */
    .custom-block-flex > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ---- 3. Images (both left & right) ---- */
    .custom-block-flex .image-left,
    .custom-block-flex .image-right {
        width: 100vw !important;
        max-width: none !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }

    .custom-block-flex .image-left img,
    .custom-block-flex .image-right img {
        width: 100vw !important;
        height: 60vh !important;
        object-fit: cover;
        display: block;
        margin: 0 !important;
    }

    /* ---- 4. Text blocks ---- */
    .custom-block-flex .text-right,
    .custom-block-flex .text-left {
        padding: 2rem !important;
        background: #fff;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/**/
/* carousell */
/**/
#wrapper {
    padding-top: 0 !important;
}

#carousel {
    padding-bottom: 6vh !important;
    margin-top: -18px !important;
}

#carousel p,
#carousel h2 {
    color: white;
}

/* Full-screen carousel container */
#carousel {
    position: relative;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
    position: relative;
    @media (min-width: 768px) {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* Ensure carousel-inner takes full space */
#carousel .carousel-inner {
    height: 92vh;
}

/* Full-screen background image */
#carousel .carousel-item img {
    min-width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    filter: brightness(0.7) contrast(1) grayscale(0%);
}

#carousel .caption {
    max-width: 50%;
    bottom: 7%;
}

/* Caption styling - center vertically and horizontally */
@media (max-width: 768px) {
    #carousel .caption {
        position: absolute;
        text-align: left;
        transform: translate(-20%, 10%);
        max-width: 100%;
        z-index: 10;
        width: 90%;
        padding: 10px;
    }
    #carousel .carousel-control {
        display: none;
    }
}
/* -------------------------------------------------
   FORCE-VERTICAL-CENTER CAROUSEL ARROWS
   ------------------------------------------------- */
#carousel .carousel-control.left,
#carousel .carousel-control.right {
    height: 80% !important; /* full carousel height */
}
#carousel .carousel-control .icon-prev i,
#carousel .carousel-control .icon-next i {
    font-size: 3rem !important;
}

/**/
/* This are the products on the main page */
/**/
.thumbnail-container {
    overflow: hidden; /* Prevents the zoomed image from spilling out */
}

.thumbnail-container img {
    transition: transform 0.4s ease;
}

.thumbnail-container .product-description {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/* Title + price turn white */
.thumbnail-container:hover .product-description a,
.thumbnail-container:hover .product-description span {
    color: var(--primary-color) !important;
    transition: color 0.3s ease;
}

/* Image scales up a bit */
.thumbnail-container:hover img {
    transform: scale(1.1);
}

/* Force two products per row on mobile */
@media (max-width: 767px) {
    .product.col-xs-12 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/**/
/* Navbar */
/**/

/*we remove it here so that on in the navbar script it can do the rest*/
.header-top-right {
    @media (max-width: 767px) {
        display: none;
    }
}

body {
    background-color: var(--primary-color);
}
#header {
    background: var(--navbar-background-color);
    position: sticky;
    top: 0;
    z-index: 100; /* ensures it stays above other elements */
    box-shadow: none;
    color: var(--hover-white) !important;
    /*thsi are the search results and those are improtant so that they stay with the header*/
    .ui-autocomplete {
        z-index: 101 !important; /* higher than your sticky header */
    }
}
#header .header-nav {
    border-bottom-width: 0;
}

.dropdown-menu, .popover {
    background-color: var(--navbar-background-color) !important;
}

#header .top-menu .collapse {
    background-color: var(--navbar-background-color) !important;
}

#header .header-nav .cart-preview .shopping-cart,
.blockcart,
.header > a,
.header > a > i,
#cart {
    background-color: var(--navbar-background-color) !important;
    color: var(--white) !important;
}

#header .header-top a,
#language-selector-label {
    color: var(--white) !important;
}

#header .header-top a:hover {
    color: var(--primary-color) !important;
}

#header .header-top {
    background-color: var(--navbar-background-color) !important;
}

#header #currency-selector-label {
    color: var(--white);
}

#_desktop_user_info .user-info a *:hover {
    color: var(--hover-white) !important;
}

#_desktop_cart .header {
    cursor: pointer;
}

#header #mobile_top_menu_wrapper, #header .dropdown select {
    color: var(--white) !important;
    background-color: var(--navbar-background-color) !important;
}

.menu.js-top-menu > ul.top-menu > li.category {
    position: relative;
}

.menu.js-top-menu .popover.sub-menu.js-sub-menu {
    top: 100% !important;
    right: auto !important;
    min-width: 300px;
    max-width: 400px;
}
/* Indentation for nested dropdowns */
.menu.js-top-menu .top-menu[data-depth="2"] > li > a.dropdown-item {
    padding-left: 1rem; /* more indent for second-level dropdowns */
}
.menu.js-top-menu .top-menu[data-depth="3"] > li > a.dropdown-item {
    padding-left: 1.5rem; /* even more for deeper levels */
}

.menu.js-top-menu .popover.sub-menu.js-sub-menu .top-menu > li.category {
    width: 100% !important;
    position: relative;
}
#contact-link {
    display: none;
}

/*hmm this is too slow we see the flickering*/
.ui-autocomplete-input::placeholder,
.header-top .search-widgets form input[type="text"] {
    color: var(--white) !important;
}
.ui-autocomplete-input {
    background-color: var(--navbar-background-color) !important;
    color: var(--white) !important;
}

/*#_mobile_logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}*/
a.ui-corner-all:hover {
    background: none !important;
}
div.header-top {
    padding-top: 0;
    padding-bottom: 0;
}

#header .dropdown-item,
#_desktop_user_info *,
#_mobile_user_info *,
.expand-more {
    color: var(--white) !important;
}

#header .dropdown-item:hover,
#_desktop_cart:hover *,
#menu-icon:hover,
#menu-icon:active,
#menu-icon:focus {
    color: var(--hover-white) !important;
}

/* Make the desktop logo larger */
@media (max-width: 767px) {
    /* Make the mobile logo larger */
    #_mobile_logo img.logo {
        max-height: 60px !important; /* increase height on mobile */
        margin-top: 12.5px;
        height: auto !important;
    }

    #menu-icon,
    #_mobile_user_info,
    #_mobile_cart {
        margin-top: 20px !important;
    }

    #header .header-top {
        padding: 1rem 0;
    }
    #header .header-top > .container {
        position: static;
    }
    #search_widget {
        margin-bottom: 0 !important;
        margin-top: 0.625rem !important;
    }
}

/*
* NEW CHECKOUT
*/

#checkout p.form-informations {
    display: none;
}

#checkout .form-group.row:has(#field-birthday) {
  display: none !important;
}

.customer-form .form-group.row:has(#field-id_gender-1) {
  display: none;
}

#checkout .field-password-policy {
  display: none !important;
}

#checkout nav.nav-inline.my-2 {
    display: none !important;
}

#checkout .form-group:has(label[for="field-alias"]) {
    display: none !important;
}
#checkout .form-group:has(label[for="field-company"]) {
    display: none !important;
}
#checkout .form-group:has(label[for="field-vat_number"]) {
    display: none !important;
}

/*
* CART
*/

#cart .promo-code-button.display-promo a {
    color: var(--secondary-color);
}



/*DISABEL LOGIN AND REG*/
.user-info,
#_desktop_user_info,
#_mobile_user_info,
.header-nav .user-info {
  display: none !important;
}
/* Hide the "Anmelden" (login) tab and its separator in checkout */
#checkout .nav.nav-inline .nav-item:has(.nav-separator),
#checkout .nav.nav-inline .nav-item:has([data-link-action="show-login-form"]) {
    display: none !important;
}
/*hide the login in the order conf block*/
#order-confirmation .card:has(input[name="submitTransformGuestToCustomer"]) {
    display: none !important;
}
/*hide in footer*/
#footer #footer_account_list li:has(a[href*="/account"]),
#footer #footer_account_list li:has(a[href*="/registrazione"]) {
    display: none !important;
}

/**/
/* end of AS code */
/**/