/* your custom css */

/* Start of custom variables */

:root {
    --site-background-color: #e4e4e4;
    --checkout-button-color: #54bf3c;
}

/* end of custom variables */

/* Start of Cha-19813 */
.product-list-mobile-item,
.mobile-header-search-overlay-modal-content-result-item {
    color: #222 !important;
}
body.custom-header-inverse .page-header .mobile-header-bottom-row button svg path {
    stroke: #222 !important;
}
/* End of Cha-19813 */

/* Start of Cha-18635 */

#cbx-vue-app {
    background-color: var(--site-background-color);
}

.product-information,
.add-to-cart-button-is-in-cart .uk-button,
.add-to-cart-button-is-in-cart .uk-input,
.add-to-wishlist,
.details-add-to-wishlist,
.cart-item .uk-button-default,
.product-list-filter-button,
.filter-keyword-input,
.trust,
.cart-actions .primary-actions>a:first-child,
.checkout-cart-preview-footer,
.terms-container,
.product-images-main-area img,
.customer-area-dashboard .uk-card {
    background-color: hsla(var(--black-color-hue), var(--black-color-saturation), var(--black-lighten-100), 1);
}


.product-preview>div {
    border-radius: 0px !important;
}


.styled-checkout-btn,
.cart-actions .primary-actions>a:last-child,
.checkout-actions .uk-button[type="submit"] {
    background-color: var(--checkout-button-color);
}

.styled-checkout-btn:hover,
.cart-actions .primary-actions>a:last-child:hover,
.checkout-actions .uk-button[type="submit"]:hover {
    background-color: var(--checkout-button-color);
}

.umb-grid .uk-button,
.add-to-cart .uk-button-group .uk-width-expand>.uk-input,
.add-to-cart-button-is-in-cart .uk-input,
.details-add-to-wishlist,
.checkout-cart .uk-button {
    border-radius: 50px !important;
}

/*.contact-form .uk-grid-margin>div>label .uk-checkbox ~ span {
    font-size: 1.5rem;
    margin-bottom:5px;
}*/

.contact-form .uk-grid-margin>div>label {
    display: flex;
    flex-direction: column-reverse;
}

/* End of Cha-18635 */

.product-preview .product-image { 
    aspect-ratio: 1/1 !important;
    display: flex;
    max-height: 100%;
    align-items: center;
}
.product-preview .product-image img {
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.product-images .active-product-image {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}


h1,.uk-h1 {
    font-family: "bebas neue", Sans-serif !important;
}
.uk-breadcrumb h1 {
    font-family: inherit !important;
}

.cbx-mainnav-text  > span {
    font-family: "bebas neue", Sans-serif !important;
    text-transform: uppercase;
    font-family: "bebas neue", Sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
body {
    font-family: "Roboto Slab", Sans-Serif;
}

.sprit-co-header-background,.sprit-co-header-background .cbx-content-slider,.sprit-co-header-background .uk-slideshow-items {
    min-height: 350px !important;
    max-height:  350px !important;
}

.sprit-co-overlay-header {
    margin-top:-130px !important;
    /*margin-left: 0 !important;*/ /*Fjerner -15px venstre margin*/
    background-color: #fff;
    z-index: 1;
    position: relative;
    margin-bottom: 20px !important;
    max-width: 1370px;
    padding-top: 5px;
    padding-bottom: 20px;
}

.header-image .uk-container {
    max-width: none !important;
    padding:0px;
}

.sprit-co-brand-fixed-image {
    max-height: 480px;
    overflow: hidden !important;
}

.sprit-co-white {
       background-color: #FFFFFF !important;
}

.sprit-co-button {
    border: 2px solid #FFAC00; /* 2px solid orange border */
    border-radius: 50px; /* Rounded corners with 30px radius */
    background-color: #FFFFFF; /* White background */
    color: #FFAC00; /* Orange text */
    padding: 10px 10px; /* Padding inside the div */
    font-family: "bebas neue", Sans-serif;
    cursor: pointer; /* Change the cursor to pointer on hover */
    text-align: center; /* Center the text */
    text-decoration: none; /* Ensure text has no underline */
    display: inline-block; /* Make the div behave like an inline block */
    font-size: 20px !important; /* Font size of the text */
    transition: background-color 0.2s; /* Smooth transition for hover effects */
}

.sprit-co-button a {
    color: #FFAC00; /* Orange text color for the link */
    text-decoration: none; /* Remove underline from the link */
    display: inline-flex; /* Ensure the link behaves like a block element inside the div */
    align-items: center; /* Vertically center text and icon */
    font-weight: 400; /*Make the text bold */
    text-transform:uppercase;
}

.sprit-co-button:hover {
    background-color: #FFAC00; /* Orange background on hover */
    color: #FFFFFF; /* White text on hover */
}

.sprit-co-button:hover a {
    color: #FFFFFF; /* Change link text color to white on hover */
}

.sprit-co-button-world {
    border: 2px solid #FFAC00; /* 2px orange border */
    border-radius: 50px; /* Rounded corners with 30px radius */
    background-color: #FFFFFF; /* White background */
    color: #FFAC00; /* Orange text */
    padding: 10px 10px; /* Padding inside the button */
    font-family: "bebas neue", Sans-serif;
    font-size: 20px !important;/* Adjust the font size */
    cursor: pointer; /* Change the cursor to pointer when hovering */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove text underline */
    display: inline-block; /* Ensures the button behaves like a block element */
    transition: background-color 0.2s; /* Smooth transition for hover effects */
}

.sprit-co-button-world a {
    color: #FFAC00; /* Orange text color */
    text-decoration: none; /* Remove underline from link */
    display: inline-flex; /* Flexbox to align text and icon */
    align-items: center; /* Vertically center text and icon */
    font-weight:400; /*Make the text bold*/
    Text-transform:uppercase;
}

.sprit-co-button-world a span.uk-icon {
    margin-left: 8px; /* Space between text and icon */
    font-size: 20px !important; /* Adjust icon size */
    color: #FFAC00; /* Orange icon color */
}

.sprit-co-button-world:hover, .sprit-co-button-world:hover a {
    background-color: #FFAC00; /* Orange background on hover */
    color: #FFFFFF !important; /* White text on hover */
}

.sprit-co-button-world:hover a span.uk-icon {
    color: #FFFFFF !important; /* White icon color on hover */
}

.magic-tile-sprit-co {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc; /* Optional: adds a border to the tile */
    overflow: hidden; /* Ensures that content stays within the tile's boundaries */
}

.tile-text-sprit-co {
    height: 50px;
    background-color: #000000; /* Black background */
    color: #FFFFFF; /* White text */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px; /* Adjust font size as needed */
    padding: 0 10px; /* Optional: padding for the text */
}

.tile-image-sprit-co {
    width: 100%;
    height: 250px; /* 250px height for the image area */
    overflow: hidden; /* Ensures the image doesn't overflow its container */
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile-image-sprit-co img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
}


.the-box {
    font-family: "bebas neue", Sans-serif;   
}

.the-box .magic-tile-box-split > .tile-component-split-content-container > .tile-component-split-background > .tile-component-content > .tile-component-split-background {
left: calc(50% - var(--uk-position-margin-offset));
    --uk-position-translate-x: -50%;
    transform: translate(var(--uk-position-translate-x), 0);
    width: max-content;
}

@media (max-width: 650px) {
  .homepage-mobile-force-row .uk-width-1-2 {
    width: 100%;
  }
  
  .homepage-mobile-force-row .uk-width-1-4 {
      width: 50%;
  }
}

@media (max-width: 750px) {
  #product-list-container .product-list-grid {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 450px) {
  #product-list-container .product-list-grid {
      grid-template-columns: repeat(2, 1fr);
  }
}

.badge-alkoholfri {
    background-color:#62c1e5;
} 

.badge-økologisk {
    background-color:#4cd038;
} 

.badge--kologisk {
    background-color:#4cd038;
}

.badge-bæredygtighed {
    background-color:#1c96c5;
} 

.badge-b-redygtighed {
    background-color:#1c96c5;
}

.badge-gaveæske {
    background-color:#BF0A30;
}

.badge-gave-ske {
    background-color:#BF0A30;
}

.badge-b-corp {
    background-color:#000000;
}

/* Start of Custom footer */

.custom-grid-footer,
.custom-grid-footer a,
.custom-grid-footer .footer-company > div > .uk-padding-remove {
    color: #fff;
}

.custom-grid-footer .footer-company > div > .uk-margin-remove,
.custom-grid-footer .footer-company-address,
.custom-grid-footer .footer-company-vatno,
.custom-grid-footer .uk-nav-header,
.custom-grid-footer .uk-grid-divider > div::before,
.custom-grid-footer .footer-so-me-links {
    color: hsla(var(--black-color-hue), var(--black-color-saturation), var(--black-lighten-100), 0.7);
}

.custom-grid-footer .footer-so-me-links a {
    background-color: hsla(var(--black-color-hue), var(--black-color-saturation), var(--black-lighten-100), 0.1);
}

.custom-grid-footer .uk-grid-divider > div::before {
    border-left-color: hsla(var(--black-color-hue), var(--black-color-saturation), var(--black-lighten-100), 0.2);
}

@media (min-width: 760px) {
    .custom-grid-footer .divide > .uk-grid > div:not(:first-of-type) { padding-left: 30px; position: relative;}
    .custom-grid-footer .divide > .uk-grid > div:not(:first-of-type)::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 15px;
        border-left: solid 1px hsla(var(--black-color-hue), var(--black-color-saturation), var(--black-lighten-100), 0.2);
    }
}
@media (max-width: 759px) {
    .custom-grid-footer .divide > .uk-grid > div:not(:first-of-type) { padding-top: 30px; position: relative;}
    .custom-grid-footer .divide > .uk-grid > div:not(:first-of-type)::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 15px;
        border-top: solid 1px hsla(var(--black-color-hue), var(--black-color-saturation), var(--black-lighten-100), 0.2);
    }
}
.custom-grid-footer .footer-logos .uk-grid > div { width: 50%; }

.custom-grid-footer .footer-rights {
    color: #666666;
}

.checkoutcart .checkout-cart,
.checkoutonepage .checkout-section > .uk-container.uk-container-large,
.checkoutreceipt #cbx-vue-app > .uk-container.uk-container-large {
  background-color: white;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* End of Custom footer */

.word-break {
    word-break: break-all;
}

/* Start of Cha-18852 */

body.homepage .product-slider.tiny .uk-slider-items-item {
    width: 50% !important;
}

body.homepage .product-slider.tiny .uk-slider-items-item .standard-sales-price>span {
    font-size: 0.65rem;
}

body.homepage .product-slider.tiny .uk-slider-items-item .product-price>div>.price-small {
    font-size: 0.75rem !important;
}

body.homepage .product-slider.tiny .uk-slider-items-item .product-preview .unit {
  gap: 0;
}

body.homepage .product-slider.tiny .uk-slider-items-item .product-preview .add-to-cart {
  height: auto;
}

body.homepage .product-slider.tiny .uk-slider-items-item .product-preview .price {
  font-size: 1.3rem;
  line-height: 1.5rem;
}

@media (max-width: 960px) {
    .tile-component.square .tile-component-content-container {
        justify-content: center !important;
        align-items: center !important;
        top: auto !important;
        font-size: 0.75rem;
    }
    
    .agency-grid .the-box {
        background-position: 0 -61px !important;
        background-color: #fff !important;
        background-size: 100% !important;
    }
    
    .tile-component-content-title {
        font-size: 22px;
    }
}

/* End of Cha-18852 */

/* Start of Cha-19579 */

.preset-tile:has(div.the-box.uk-height-1-1) {
    height: 100%;
}

.uk-padding-large.test.uk-height-1-1 > .uk-grid-column {
    height: 100%;
}

/* End of Cha-19579 */


/*
.cbx-content-slider .cbx-content-slider-item {
  background-size: contain;
  background-repeat: round;
  position: relative;
  background-position: center center;
  min-height: inherit;
  max-height: inherit;
}
*/