:root { --gap-2: 0.104vw; --gap-4: 0.208vw; --gap-6: 0.313vw; --gap-8: 0.417vw; --gap-10: 0.521vw; --gap-12: 0.625vw; --gap-14: 0.729vw; --gap-16: 0.833vw; --gap-18: 0.938vw; --gap-20: 1.042vw; --gap-24: 1.25vw; --gap-28: 1.458vw; --gap-30: 1.563vw; --gap-32: 1.667vw; --gap-36: 1.875vw; --gap-40: 2.083vw; --gap-44: 2.292vw; --gap-48: 2.5vw; --gap-50: 2.604vw; --gap-52: 2.708vw; --gap-56: 2.917vw; --gap-60: 3.125vw; --gap-64: 3.333vw; --gap-72: 3.75vw; --gap-80: 4.17vw; --gap-88: 4.583vw; --gap-90: 4.688vw; --gap-93: 4.844vw; --gap-96: 5vw; --gap-100: 5.208vw; --gap-120: 6.25vw; --gap-140: 7.292vw; --gap-160: 8.333vw; --gap-180: 9.375vw; --gap-150: 7.813vw; --gap-200: 10.417vw; --gap-220: 11.458vw; --gap-240: 12.5vw; --gap-300: 15.625vw; --fs-12: 0.625vw; --fs-13: 0.677vw; --fs-14: 0.729vw; --fs-15: 0.781vw; --fs-16: 0.833vw; --fs-17: 0.885vw; --fs-18: 0.938vw; --fs-20: 1.042vw; --fs-24: 1.25vw; --fs-26: 1.354vw; --fs-28: 1.458vw; --fs-32: 1.667vw; --fs-56: 2.917vw; --fs-72: 3.75vw; --fs-80: 4.167vw; --fs-120: 6.25vw; --black: #2B2B2B; --dgray: #494952; --deli; --row-grid-bg: #EEEBDC; CONTAIN-INTRINSIC; -BLOCK-SIZE: AUTO 100PX; very-open-cart: #dadada; --error: #C41000; --text-field-line-color: #c7c7c7; --order-icon-tags: #DEE5FF; --delivery-open-cart: #EEEBDC; --footer-status-bar: #1C4936; --footer-hover: #215740; --primary-button: #7772E4; --primary-button-hover: #8A85F3; --secondery-button: #7772E4; --secondery-button-hover: #DEE5FF; --white: #fff; --first-font: 'notosans2026-regular'; --second-font: 'notosans2026-bold'; --third-font: 'notosans2026-medium'; } /*------------------------specialdeli----------------------------*/ /*-----------------------------------/* GENERAL /*-----------------------------------*/ #GridPage > h1 { opacity: 0; } body { font-family: var(--first-font) !important; zoom: 1 !important; } body { opacity: 0; transition-delay: 0.5s; transition: 0.3s ease all; } body.shown { opacity: 1; } .row { margin: 0; } .newCatalogItemQuantity .quantity-start button:hover { color: unset; } section.grid-Catalog-Items .content-section-Btn a { display: inline-block; margin: 0; border: none; background: var(--secondery-button); color: white; font-family: var(--second-font); font-size: clamp(16px, var(--fs-16), 300px); letter-spacing: 0.17px; min-width: 150px; text-align: center; padding-block: var(--gap-14); padding-inline: var(--gap-24); border-radius: 50px; margin-top: var(--gap-32); transition: 0.3s ease all; } section.grid-Catalog-Items .content-section-Btn a { background: var(--primary-button); } #GridPage .max-width, #GridPage .max-width-center { max-width: unset; } #home-gallery .slider-bg.stellar-bg { background-size: contain; background-position: center; /* min-height: unset; */ height: 21.875vw !important; min-height: 0; } .grid-boxes .box-image-animation:hover img { transform: unset; } #GridContent { float: none; } .checkoutFormWrapper .switch-delivery-btn button span { text-decoration: none; font-size: clamp(14px,var(--fs-16),300px); font-weight: 500; color: var(--gray-text); font-size: clamp(12px, var(--fs-17), 1000rem); } .navShopBtn.cartBtn { position: fixed; top: 30%; left: 1%; z-index: 2; } .navShopBtn.cartBtn button#openCartBtn { padding: var(--gap-32); background: white; border-radius: 50%; background-image: url("https://media.getmood.io/warehouse/temp/specialdeli/Cart.svg"); background-position: center; background-repeat: no-repeat; box-shadow: 2px 6px 28px 6px rgba(0,0,0,0.24); -webkit-box-shadow: 2px 6px 28px 6px rgba(0,0,0,0.24); -moz-box-shadow: 2px 6px 28px 6px rgba(0,0,0,0.24); } .navShopBtn.cartBtn button#openCartBtn svg { opacity: 0; } .navShopBtn.cartBtn button#openCartBtn .cartItemsCounter { background: var(--footer-status-bar); right: unset; top: 33%; right: 24%; } .navShopBtn.cartBtn button#openCartBtn .cartItemsCounter span.CartItems { color: white; left: 50%; font-family: var(--first-font); } .ingredientGroupSelection span.error.propertyError, .ingredientGroupSelection span.error.maxLimitError { width: fit-content; right: unset; bottom: unset; top: 0; } .stickyButton { display: none; } #home-gallery .opacity-layer { opacity: 0 !important; } .cart .switch-delivery-btn { background-color: var(--order-icon-tags); } .cart .switch-delivery-btn .edit-delivery-button-2 { left: 2%; } .cart .switch-delivery-btn button.openDeliverySelectionPop.DateSelectionFirst { font-size: clamp(10px,var(--fs-16),300px); } .item-image img { object-fit: contain; width: 100%; height: auto; height: auto; aspect-ratio: 1; } #home-gallery ol.flex-control-nav.flex-control-paging a { background: #c7c7c7; } #home-gallery ol.flex-control-nav.flex-control-paging a.flex-active { background: var(--black); } .faq-item.panel .faq-headline i { display: none; } .faq-item.panel .faq-headline:after { content: url("https://media.getmood.io/warehouse/dynamic/704243.svg"); vertical-align: middle; margin-inline-start: auto; } .faq-item.panel .faq-headline.open::after { content: url("https://media.getmood.io/warehouse/dynamic/704242.svg"); } .hasAutoComplete .search.desktop { background-color: white !important; } @media(max-width: 1025px) { :root { --gap-2: 2px; --gap-4: 4px; --gap-6: 6px; --gap-8: 8px; --gap-10: 10px; --gap-12: 12px; --gap-14: 14px; --gap-16: 16px; --gap-18: 18px; --gap-20: 20px; --gap-24: 24px; --gap-28: 28px; --gap-30: 30px; --gap-32: 32px; --gap-36: 36px; --gap-40: 40px; --gap-48: 48px; --gap-52: 52px; --gap-56: 56px; --gap-60: 60px; --gap-64: 64px; --gap-72: 72px; --gap-80: 80px; --gap-90: 90px; --gap-96: 96px; --gap-100: 100px; --gap-120: 120px; --gap-140: 140px; --gap-150: 150px; --gap-160: 160px; --gap-180: 180px; --gap-200: 200px; --gap-240: 240px; --fs-12: 12px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-26: 26px; --fs-32: 32px; --fs-44: 44px; --fs-56: 56px; } a.AccessabilityLink { margin: 0; } .navShopBtn.cartBtn { top: 30%; } .navShopBtn.cartBtn button#openCartBtn { padding: 14px; height: auto; aspect-ratio: 1; } .navShopBtn.cartBtn button svg.cart-btn-svg { display: none; } .navShopBtn.cartBtn button > .cartItemsCounter { background: none; } .cartBtn.navShopBtn.mobile span.CartItems { opacity: 0; } #home-gallery { max-height: 375px; overflow: visible; margin-top: var(--headerHeight); } #home-gallery .slider-bg.stellar-bg { height: auto !important; aspect-ratio: 1; width: 100%; } #home-gallery .slides .slider-item { display: flex !important; max-height: 450px; } #home-gallery .slides { max-height: 450px; } #home-gallery .scroll-down { display: none; } #home-gallery ol.flex-control-nav.flex-control-paging { bottom: -5%; } #allSectionsWrapper .section .section-title h1 { line-height: 1.5; letter-spacing: -0.4px; } } @media(min-width: 1026px) { a:hover, a:focus { color: unset; } label.error, span.error { bottom: 0; top: unset; font-size: clamp(14px,var(--fs-14),300px); } #home-gallery .scroll-down { display: none; } #home-gallery ol.flex-control-nav.flex-control-paging { bottom: -6%; } #home-gallery ol.flex-control-nav.flex-control-paging li { } #home-gallery ul.slides { } #home-gallery ul.slides li.slider-item { /* margin-bottom: var(--gap-240); */ } #home-gallery ul.slides li.slider-item .slider-bg.stellar-bg { background-size: contain; ba; background-position: inherit; height: 26.042vw !important; } #home-gallery { height: 100% !important; overflow: visible; margin-top: var(--headerHeight); } } /**/ /*-----------------------------------/* HEADER /*-----------------------------------*/ #header2 { padding: 0; background: white; color: var(--black); } #header2 #header-top-strip { } #header2 #header-top-strip .topStripContainer { background: var(--footer-status-bar); padding: 0; } #header2 #header-top-strip .topStripContainer .topStripText { font-size: unset; } #header2 #header-top-strip .topStripContainer .topStripText p { letter-spacing: 0.15px; font-size: clamp(15px,var(--fs-15),300px); padding-block: var(--gap-8); font-family: var(--first-font); } #header2 .header-top-desktop { } #header2 .header-top-desktop nav.header-top-menu { padding-block: var(--gap-10); padding-inline: var(--gap-20); display: flex; justify-content: space-between; border-bottom: 1px solid var(--delivery-open-cart); } #header2 .header-top-desktop nav.header-top-menu ul.top-menu-group { padding: 0; margin: 0; display: flex; gap: var(--gap-20); } #header2 .header-top-desktop nav.header-top-menu ul.top-menu-group li { margin: 0; font-size: clamp(13px,var(--fs-15),300px); } #header2 #header-container #header-left { padding-block: var(--gap-16); } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper { position: static; } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn { background: white; } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn button { align-items: center; padding: 0; gap: var(--gap-8); background: white; color: var(--black); } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn button span.firstStepHeadline { margin: 0; font-size: clamp(15px,var(--fs-15),300px); font-family: var(--second-font); } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn button .scooter-icon { align-items: center; display: flex; background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688126.svg"); background-position: center; background-repeat: no-repeat; width: var(--gap-44); height: auto; aspect-ratio: 1; background-color: var(--order-icon-tags); border-radius: 50%; transition: 0.3s ease all; } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn button .scooter-icon svg { opacity: 0; width: 100%; height: 100%; } #header2 #header-container .header-right-section .menu-nav .selectedPosData { margin: 0; padding: 0; } #header2 #header-container .header-right-section .menu-nav .selectedPosData .switch-delivery-btn { width: 100%; display: flex; font-size: clamp(15px,var(--fs-15),300px); color: var(--black); align-items: center; } #header2 #header-container .header-right-section .menu-nav .selectedPosData .switch-delivery-btn button.openDeliverySelectionPop { color: var(--black); font-family: var(--second-font); font-size: inherit; margin: 0; gap: 0; } #header2 #header-container .header-right-section .menu-nav .selectedPosData .switch-delivery-btn button.openDeliverySelectionPop :is(span.selectedDelivery, span.SelectedDeliveryHour) { display: none; } #header2 #header-container .header-right-section .menu-nav .selectedPosData .switch-delivery-btn p { font-family: var(--second-font); font-size: inherit; margin-inline-start: var(--gap-8); } #header2 #header-container .header-right-section .menu-nav .selectedPosData .switch-delivery-btn button.openDeliverySelectionPop span.SelectedDeliveryDate { text-decoration: none; } #header2 #header-container .header-right-section .menu-nav .selectedPosData .switch-delivery-btn p:after { content: "/"; padding-inline: 5px; } #header2 #header-container .header-right-section .menu-nav .selectedPosData .switch-delivery-btn button:before { content: ""; background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688126.svg"); width: var(--gap-44); height: auto; aspect-ratio: 1; background-position: center; background-repeat: no-repeat; background-color: var(--order-icon-tags); border-radius: 50%; margin-inline: 0; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .duplicate-order { order: 1; display: flex; height: fit-content; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .duplicate-order a { display: inline-flex; flex-direction: row-reverse; font-size: clamp(14px,var(--fs-14),300px); font-family: var(--first-font); filter: unset; color: var(--black); width: 100%; height: fit-content; aspect-ratio: unset; align-items: center; gap: var(--gap-6); cursor: pointer; } .duplicate-order a .rotate-icon { content: ""; background-image: url("https://media.getmood.io/warehouse/dynamic/704304.svg"); width: var(--gap-24); height: auto; aspect-ratio: 1; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; } @media(min-width: 1026px) { #header2 #header-container { display: block; position: relative; } #header2 #header-container #header-left { position: absolute; z-index: 1; left: 50%; bottom: 50%; transform: translate(-50%,50%); display: flex; justify-content: center; } #header2 #header-container #header-left a.logoHeader { display: flex; width: 50%; } #header2 #header-container .header-right-section { background: black; display: flex; justify-content: space-between; padding-inline: var(--gap-20); padding-block: var(--gap-16); background: white; } #header2 #header-container .header-right-section .menu-nav { margin: 0; display: flex; align-items: center; gap: var(--gap-14); } #header2 #header-container .header-right-section .menu-nav ul#menu { margin: 0; display: flex; } #header2 #header-container .header-right-section .menu-nav ul#menu li.last-item { margin: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; } #header2 #header-container .header-right-section .menu-nav ul#menu li.last-item a { font-size: clamp(15px,var(--fs-15),300px); background: var(--primary-button); font-family: var(--second-font); padding: var(--gap-12) var(--gap-20); border-radius: 50px; transition: 0.3s ease all; color: white; min-width: var(--gap-140); text-align: center; } #header2 #header-container .header-right-section .menu-nav ul#menu li.last-item::before { display: none; } #header2 #header-container .header-right-section .menu-nav ul#menu li:hover a { color: white; background: var(--primary-button-hover); } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn button:hover { background: none; color: var(--black); } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn button:hover .scooter-icon { transform: scale(1.1); } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn button:focus { background: none; color: var(--black); } #header2 #header-container .header-right-section .header-top.social-links { /* filter: invert(1); */ } #header2 #header-container .header-right-section .header-top.social-links { padding: 0; display: flex; align-items: center; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right { } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left { margin: 0; display: flex; align-items: center; gap: var(--gap-14); } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left a { margin: 0; width: 26px; height: auto; aspect-ratio: 1; /* background: url("https://media.getmood.io/warehouse/temp/specialdeli/facebook.svg"); */ filter: invert(1); } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left a svg { width: 25px; height: auto; aspect-ratio: 1; opacity: 0; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn { order: 1; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn button { padding: 0; display: flex; background: url(https://media.getmood.io/warehouse/temp/specialdeli/User.svg); background-position: center left; background-repeat: no-repeat; background-size: contain; gap: var(--gap-4); } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn button svg.profile-btn-svg { opacity: 0; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn button { align-items: center; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn button svg.profile-btn-svg { height: var(--gap-24); } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left a.social_icon_instagram { background-image: url("https://media.getmood.io/warehouse/temp/specialdeli/instagram.svg"); filter: invert(1); background-position: center; background-repeat: no-repeat; background-size: cover; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left a.facebook_icon_instagram { background: url(https://media.getmood.io/warehouse/temp/specialdeli/facebook.svg); background-position: center; background-repeat: no-repeat; background-size: contain; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .searchBtn { display: flex; gap: 12px; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .searchBtn a {url( "https: //media.getmood.io/warehouse/temp/specialdeli/facebook.svg"); url( "https: //media.getmood.io/warehouse/temp/specialdeli/facebook.svg"); url( "https: //media.getmood.io/warehouse/temp/specialdeli/facebook.svg"); background: url("https://media.getmood.io/warehouse/temp/specialdeli/Search.svg"); filter: unset; background-position: center; background-repeat: no-repeat; background-size: contain; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left #stickyButton-3822 a { width: fit-content; height: fit-content; aspect-ratio: unset; display: flex; flex-direction: row-reverse; align-items: center; gap: 4px; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left #stickyButton-3822 a span { display: block; clamp(14px,var(--fs-14),FONT-WEIGHT: 300); clamp(14px,var(--fs-14),FONT-WEIGHT: 300); clamp(14px,var(--fs-14),FONT-WEIGHT: 300); clamp(14px,var(--fs-14),FONT-WEIGHT: 300); clamp(14px,var(--fs-14),FONT-WEIGHT: 300); clamp(14px,var(--fs-14),FONT-WEIGHT: 300); clamp(14px,var(--fs-14),FONT-VARIANT: JIS83); clamp(14px,var(--fs-14),FONT-VARIANT: JIS83); clamp(CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX); clamp(CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX); font-size: clamp(14px,var(--fs-14),300px); color: var(--black); transition: 0.3s ease all; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left #stickyButton-3822 a span:hover { color: var(--primary-button-hover); } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left #stickyButton-3822 a:after { content: url("https://media.getmood.io/warehouse/temp/specialdeli/Duplicate order.svg"); width: fit-content; height: auto; aspect-ratio: 1; display: flex; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left > a { display: none; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .searchBtn::after { content: "|"; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn:not(:has(.loggedInUser)) > button:after { content: "התחברות"; font-size: clamp(14px,var(--fs-14),300px); color: var(--black); transition: 0.3s ease all; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn button:hover:after { color: var(--primary-button-hover); } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn .headerShopLoginUserLoggedIn.openBox { left: -98px; } #header2 #header-container .header-right-section .header-top.social-links .header-top-right span.address { display: none; } #header2 .header-top-desktop nav.header-top-menu ul.top-menu-group li a:hover { color: var(--gray-text) } #header .social-links a:focus:after, #header2 .header-top-left a:focus:after { position: static; border: none; } .search.desktop #searchFormHeaderContainer { position: relative; background: white; } .search.desktop #searchFormHeaderContainer .searchBtn { right: 12%; top: 54px; } .search.desktop #searchFormHeaderContainer .searchBtn a { } .search.desktop #searchFormHeaderContainer .searchBtn a svg { fill: var(--black); height: 13px; width: 20px; } .search.desktop #searchFormHeaderContainer form#searchFormHeader { border-bottom: 1px solid var(--black); color: var(--black); font-family: var(--first-font); } .search.desktop #searchFormHeaderContainer form#searchFormHeader input#searchFormInput { border: none; padding-inline: 1.833vw; padding-bottom: 0.433vw; font-size: clamp(17px,var(--fs-17),300px); } #stickyButton-3822 { position: static; display: inline-block; box-shadow: none; border-radius: 0; filter: invert(1); } #header2 .selectedPosData button { font-weight: unset; } #header2 .selectedPosData { order: -1; width: max-content; background-color: var(--black); font-size: clamp(1rem, var(--fs-13), 1000rem); transition: 0.3s all ease; border: unset; min-width: var(--gap-140); color: var(--white); padding: var(--gap-12); margin: 0; border-radius: var(--gap-2); font-family: var(--font-2); text-align: center; } #header2 .selectedPosData.active { display: inline-block; position: absolute; top: 100%; inset-inline-start: 0; padding: var(--gap-12) var(--gap-48); width: 100%; background: var(--white); text-align: start; color: var(--black); border-block: 1px solid var(--text-field-line-color); } #header2 .selectedPosData { margin: 0; } #header2 .selectedPosData.active .switch-delivery-btn { width: 100%; display: flex; align-items: center; } #header2 .selectedPosData.active .switch-delivery-btn > p { font-size: clamp(1rem, var(--fs-18), 1000rem); font-family: var(--font-3); letter-spacing: -0.18px; } #header2 .selectedPosData.active .switch-delivery-btn button.openDeliverySelectionPop { margin: 0; padding: 0; font-size: clamp(14px, var(--fs-16), 1000rem); display: inline-block; position: relative; } #header2 .selectedPosData.active .switch-delivery-btn button.openDeliverySelectionPop::before { content: ''; position: absolute; inset-inline-end: calc(100% - var(--gap-16)); top: 50%; transform: translateY(-50%); width: var(--gap-4); height: var(--gap-4); background: var(--red); border-radius: 50%; background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688126.svg"); width: var(--gap-40); height: auto; aspect-ratio: 1; background-position: center; background-repeat: no-repeat; background-color: var(--order-icon-tags); } #header2 .selectedPosData.active .switch-delivery-btn button.openDeliverySelectionPop span { text-decoration: unset; position: relative; } #header2 .selectedPosData.active .switch-delivery-btn button.openDeliverySelectionPop span:not(:first-child) { font-family: var(--font-1); padding: 0 var(--gap-8); } #header2 .selectedPosData.active .switch-delivery-btn button.openDeliverySelectionPop span.selectedDelivery { padding-inline-end: var(--gap-4); } #header2 .selectedPosData.active .switch-delivery-btn button.openDeliverySelectionPop span.SelectedDeliveryHour: :before { content: ''; position: absolute; inset-inline-end: 100%; top: 50%; transform: translateY(-50%); width: 1px; height: 80%; background: var(--line); } #header2 .selectedPosData.active .switch-delivery-btn button.openDeliverySelectionPop > svg { display: none; } #header2 .selectedPosData.active .switch-delivery-btn .edit-delivery-button-2 { display: inline-flex; margin-inline: auto 0; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(/warehouse/dynamic/685019.svg); } #header2 .selectedPosData.active .switch-delivery-btn .edit-delivery-button-2 svg { width: var(--gap-18); opacity: 0; } #header2 .selectedPosData.active .switch-delivery-btn button.openDeliverySelectionPop p { font-family: var(--second-font); margin-inline-start: var(--gap-32); } } @media(max-width: 1025px) { .duplicate-order a .rotate-icon { width: 24px; } .navShopBtn.wishlistHeader.mobile { display: none; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after, #nav-toggle-mobile span, #nav-toggle-mobile span:before, #nav-toggle-mobile span:after { background: var(--black); width: 19px; } #nav-toggle span:before, #nav-toggle-mobile span:before { top: -6px; } #nav-toggle span:after, #nav-toggle-mobile span:after { bottom: -6px; } #header2 .max-width { max-width: 100%; width: 100%; } #header2 #header-top-strip .topStripContainer .topStripText p { font-size: 12px; } #header2 #header-container { display: flex; align-items: center; } #header2 #header-container .header-right-section { background: none; /* position: fixed; */ /* z-index: 1; */ } #header2 #header-container .menu-nav { height: auto; aspect-ratio: 1; } #header2 #header-container .menu-nav ul#menu { width: 87vw; min-height: calc(100vh - var(--headerHeight)); background: white; display: flex !important; flex-direction: column; transform: translateX(100%); transition: 0.3s ease all; margin-top: calc(var(--headerHeight)); padding: 0; z-index: 1; } #header2 #header-container .menu-nav ul#menu { margin-top: 0 !important; min-height: calc(100vh) !important; } #header2 #header-container .menu-nav ul#menu a.logoHeader { position: static; transform: unset; padding-block: 16px; } #header2 #header-container .menu-nav ul#menu li.header-top-menu-mobile { } #header2 #header-container .menu-nav ul#menu li.header-top-menu-mobile nav.header-top-menu { } #header2 #header-container .menu-nav ul#menu li.header-top-menu-mobile nav.header-top-menu ul.top-menu-group { display: flex; flex-direction: column; text-align: right; } #header2 #header-container .menu-nav ul#menu li.header-top-menu-mobile nav.header-top-menu ul.top-menu-group li { margin: 0; padding: 20px; border-bottom: 1px solid rgba(218, 218, 218, 0.60); color: var(--black); font-family: var(--second-font); } #header2 #header-container .menu-nav ul#menu li.header-top-menu-mobile::before { display: none; } #header2 #header-container .menu-nav ul#menu li.last-item { padding: 0; padding: 20px; border: 1px solid rgba(218, 218, 218, 0.60); } #header2 #header-container .menu-nav ul#menu li.last-item::before { display: none; } #header2 #header-container .menu-nav ul#menu li.last-item a { font-family: var(--second-font); font-size: 15px; background: var(--primary-button); display: block; padding-block: 11px; border-radius: 50px; } #header2 #header-container .menu-nav .nav-menu-anim { height: 100%; width: 100%; z-index: 100; } #header2 #header-container .menu-nav .nav-menu-anim div#nav-toggle { display: flex; justify-content: center; /* border: 1px solid rgba(218, 218, 218, 0.60); */ border-radius: 50%; /* box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06); */ } #header2 #header-container .menu-nav .nav-menu-anim.open div#nav-toggle { border: 1px solid rgba(218, 218, 218, 0.60); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06); } #header2 #header-container .menu-nav:has(.open) ul#menu { transform: unset; margin-top: var(--headerHeight); z-index: 1; /* padding: 0; */ /* display: flex; */ } #header2 #header-container .menu-nav:has(.open) ul#menu { margin-top: var(--headerContainerHeight); } #header2 #header-container .menu-nav:has(.open) ul#menu li.social-mobile { margin-top: auto; padding: var(--gap-20); } #header2 #header-container .menu-nav:has(.open) ul#menu li.social-mobile .social-links { text-align: right; } #header2 #header-container .menu-nav:has(.open) ul#menu li.social-mobile .social-links a { filter: invert(1); } #header2 #header-container .menu-nav:has(.open):after { content: ""; position: absolute; width: 100vw; height: 100vh; top: 0; background: black; opacity: 0.4; transition: 0.3s ease all; } #header2 #header-container a.logoHeader { position: absolute; left: 50%; transform: translateX(-50%); } #header2 ul.menu li.social-mobile .phone-icon.mobileRef { position: static; text-align: right; margin-bottom: 10px; } #header2 ul.menu li.social-mobile .phone-icon.mobileRef a { color: var(--black); font-size: 14px; font-family: var(--first-font); letter-spacing: 0.14px; text-decoration-line: underline; } #header2.headerHasCart #header-left { width: 100%; margin: 0; display: inline-flex; padding-inline-end: var(--gap-16); justify-content: space-between; } #header2.headerHasCart #header-left a.logoHeader { width: 100%; position: absolute; z-index: 1; left: 0; bottom: 0; height: 100%; display: flex; justify-content: center; } #header2.headerHasCart #header-left a.logoHeader img { max-width: unset; max-width: 136px; } #header2.headerHasCart #header-left .searchMobile { /* position: absolute; */ right: -3%; z-index: 2; } #header2.headerHasCart #header-left .searchMobile #searchFormHeaderContainer { } #header2.headerHasCart #header-left .searchMobile #searchFormHeaderContainer .searchBtn { background-image: url("https://media.getmood.io/warehouse/temp/specialdeli/Search.svg"); } #header2.headerHasCart #header-left .searchMobile #searchFormHeaderContainer .searchBtn svg { opacity: 0; } #header2.headerHasCart #header-left .userBtn { z-index: 2; /* position: absolute; */ } #header2.headerHasCart #header-left .userBtn button { background-image: url("https://media.getmood.io/warehouse/temp/specialdeli/User.svg"); background-repeat: no-repeat; background-position: center; } #header2.headerHasCart #header-left .userBtn button svg { opacity: 0; } #header2.headerHasCart #header-left .user-sticky-wrapper { display: flex; gap: 12px; } #header2.headerHasCart #header-left .user-sticky-wrapper #stickyButton-3822 { position: static; border: none; box-shadow: none; } #header2.headerHasCart #header-left .user-sticky-wrapper #stickyButton-3822 a { } #header2.headerHasCart #header-left .user-sticky-wrapper #stickyButton-3822 a:after { content: url("https://media.getmood.io/warehouse/temp/specialdeli/Duplicate order.svg"); } #header2.headerHasCart #header-left .user-sticky-wrapper #stickyButton-3822 a span { display: none; } #header2 #header-container #header-left .wrapper { display: flex; flex-direction: row-reverse; gap: 12px; } #header2 #header-container #header-left .wrapper .duplicate-order a.button { position: relative; display: flex; } #header2 #header-container #header-left .wrapper .duplicate-order a.button .text { position: absolute; font-size: 11px; white-space: nowrap; left: 50%; transform: translateX(-50%); top: -80%; background: var(--primary-button); color: var(--white); letter-spacing: 0.33px; line-height: 1.29; padding-inline: 5px; padding-bottom: 2px; border-radius: 0 0 4px 4px; } #header2 #header-container #header-left .wrapper .duplicate-order a.button .text:after { content: ""; background-image: url("https://media.getmood.io/warehouse/dynamic/704467.svg"); position: absolute; width: 7px; height: 3px; top: 100%; left: 50%; transform: translateX(-50%); } #header2 #header-container .header-right-section .menu-nav .selectedPosData { position: absolute; max-width: 100vw; width: 100vw; right: 0; top: 100%; background: white; border-block: 1px solid var(--text-field-line-color); } #header2 #header-container .header-right-section .menu-nav .selectedPosData .switch-delivery-btn button:before { width: var(--gap-20); background-color: white; background-size: contain; border-radius: inherit; } #header2 #header-container .header-right-section .menu-nav .selectedPosData .switch-delivery-btn a.edit-delivery-button { opacity: 0; } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper { position: absolute; width: 100vw; right: 0; top: 100%; } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn { border-block: 1px solid var(--order-icon-tags); } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn button .scooter-icon { width: 35px; background-color: white; margin: 0; } #header2 #header-container .header-right-section .menu-nav .select-delivery-wrapper .select-delivery-btn button span.firstStepHeadline { display: block; } #header2.headerHasSearch.open .searchMobile { display: unset; } #header2.headerHasCart.open #header-left .wrapper > .navShopBtn { display: unset; } header #searchFormHeaderContainer form#searchFormHeader { background: white; color: var(--black); font-family: var(--first-font); z-index: 100; } header.search-open .searchSubmitWrapper svg { opacity: 0; } header #searchFormHeaderContainer form#searchFormHeader .searchSubmitWrapper { /* background-image: url(https://media.getmood.io/warehouse/temp/specialdeli/Search.svg); */ background-position: center; background-size: contain; background-repeat: no-repeat; } header #searchFormHeaderContainer form#searchFormHeader input#searchFormInput { border-bottom: 1px solid var(--black); } } /*-----------------------------------/* CART-WINDOW /*-----------------------------------*/ .side-cart .itemsTableWrapper:after { background: none; } .headerShop.side-cart { background: white !important; } .headerShop.side-cart .cart .totalSumItems.top { background: white; } .headerShop.side-cart .cart .totalSumItems.top span.totalSumTitle { font-family: var(--second-font); font-size: clamp(20px,var(--fs-20),300px); } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem { padding-inline: var(--gap-20); /* border-bottom: 1px solid rgba(218, 218, 218, 0.60); */ } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemsCell { padding: 0; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell { padding-inline-start: var(--gap-20); } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .itemName { margin: 0; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .itemName a { font-size: clamp(15px,var(--fs-15),300px); font-family: var(--first-font); } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .quantity-wrapper .item-quantity .item-quantity-options { background: white; border: 1px solid rgba(218, 218, 218, 0.50); border-radius: 40px; overflow: clip; padding-block: var(--gap-4); max-width: 100px; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .quantity-wrapper .item-quantity .item-quantity-options button { background: white; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .quantity-wrapper .item-quantity .item-quantity-options button.item-plus { } .headerShop.side-cart { background: white; } .headerShop.side-cart .cart { padding: 0; } .headerShop.side-cart .cart .totalSumItems.top { background: white; } .headerShop.side-cart .cart .totalSumItems.top span.totalSumTitle { font-family: var(--second-font); font-size: clamp(20px,var(--fs-20),300px); } .headerShop.side-cart .cart .totalSumItems.top .closeCart { } .headerShop.side-cart .cart .totalSumItems.top .closeCart button { } .headerShop.side-cart .cart .totalSumItems.top .closeCart button svg circle { fill: none; } .headerShop.side-cart .cart .itemsTableWrapper { } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart { } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem { padding-inline: var(--gap-20); border-bottom: 1px solid rgba(218, 218, 218, 0.60); } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemsCell { padding: 0; vertical-align: top; font-family: var(--first-font); } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell { padding-inline-start: var(--gap-20); min-height: 100%; display: flex; flex-direction: column; width: 100%; gap: var(--gap-8); } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .itemName { margin: 0; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .itemName a { font-size: clamp(13px,var(--fs-15),300px); font-family: var(--first-font); } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice { display: flex; justify-content: start; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .quantity-wrapper { } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .quantity-wrapper .item-quantity { } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .quantity-wrapper .item-quantity .item-quantity-options { background: white; border: 1px solid rgba(218, 218, 218, 0.50); border-radius: 40px; overflow: clip; padding-block: var(--gap-4); max-width: 100px; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .quantity-wrapper .item-quantity .item-quantity-options button { background: white; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .quantity-wrapper .item-quantity .item-quantity-options button.item-plus { } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemDelete.cartItemsCell { position: absolute; left: 2%; top: 17%; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemPrice.cartItemsCell { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-8); position: absolute; left: -2%; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemPrice.cartItemsCell span.finalPrice { font-weight: 100; font-size: clamp(12px,var(--fs-14),300px); gap: var(--gap-4); } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemPrice.cartItemsCell span.finalPrice:after { content: "₪"; font-family: var(--first-font); width: 10px; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemDelete.cartItemsCell button.deleteBtn { background-image: url("https://media.getmood.io/warehouse/dynamic/690124.svg"); background-position: center; background-repeat: no-repeat; background-size: auto; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemDelete.cartItemsCell button.deleteBtn svg { display: none; } .headerShop.side-cart .cart .itemsTableWrapper .FreeDeliveryStrip .FreeDeliverySpan span.FreeDeliveryStripAmount { } .headerShop.side-cart .cart .itemsTableWrapper .FreeDeliveryStrip .FreeDeliverySpan span.FreeDeliveryStripAmount b { font-weight: unset; } .headerShop.side-cart .cart .cartItemsNavSubTotal { margin-top: auto; border-top: 1px solid rgba(218, 218, 218, 0.60); padding: 0; } .headerShop.side-cart .cart .cartItemsNavSubTotal .cartSummary { padding-block: var(--gap-20); gap: var(--gap-4); font-family: var(--first-font); Colors Color format Hex Background colors #FFFFFF; border-bottom: 1px solid rgba(218, 218, 218, 0.60); } .headerShop.side-cart .cart .cartItemsNavSubTotal .cartSummary .totalSumItems { font-family: var(--first-font); } .headerShop.side-cart .cart .cartItemsNavSubTotal .cartSummary .totalSumItems:not(.totalPrice) span { font-size: clamp(13px,var(--fs-15),300px); color: var(--gray-text); font-family: var(--first-font); } .headerShop.side-cart .cart .cartItemsNavSubTotal .cartSummary .totalSumItems.totalPrice { /* font-weight: 800; */ } .headerShop.side-cart .cart .cartItemsNavSubTotal .cartSummary .totalSumItems.totalPrice span { font-family: var(--second-font); font-size: clamp(15px,var(--fs-17),300px); /* font-family: var(--first-font); */ } .headerShop.side-cart .cart .cartItemsNavSubTotal .totalSunAndBottomText { } .headerShop.side-cart .cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems.cartActions { float: none; display: flex; flex-direction: column; gap: var(--gap-20); } .headerShop.side-cart .cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems.cartActions a.goToCart.shopBtn { margin: 0; border: none; font-size: clamp(15px,var(--fs-17),300px); font-family: var(--second-font); border-radius: 50px; padding-block: var(--gap-14); background: var(--primary-button); color: white; } .headerShop.side-cart .cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems.cartActions a { width: 100%; margin: 0; } .headerShop.side-cart .cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems.cartActions a.goToCheckout { background: none; border: none; color: var(--black); font-size: clamp(15px,var(--fs-17),300px); font-family: var(--second-font); text-decoration: underline; } @media(min-width: 1026px) { .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart { height: 39vh; } .headerShop.side-cart .cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems.cartActions a.goToCart.shopBtn:hover { background: var(--primary-button-hover); } } @media(max-width: 1025px) { .headerShop.side-cart { overflow: auto; } .headerShop.side-cart .cart .cartItemsNavSubTotal { position: static; padding: 0; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell { display: inline-flex; width: 75%; gap: 12px; margin: 0; padding: 0; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemDelete.cartItemsCell { left: 0%; top: 13%; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemDelete.cartItemsCell button.deleteBtn { /* width: 3px; */ /* height: 5px; */ } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemDelete.cartItemsCell button.deleteBtn svg { width: 12px; height: 15px; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemPrice.cartItemsCell {left: -11%;} .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemPrice.cartItemsCell span.finalPrice { font-size: 15px; font-family: var(--first-font); font-weight: 100; color: var(--black); } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemPrice.cartItemsCell span.itemBeforeDiscountPrice { font-size: 14px; } .headerShop.side-cart .cart .totalSumItems.top span.totalSumTitle > span { font-weight: 600; } .selectDeliveryStep .selectPickUpPoint .delivery-pop-change-content h3 { text-align: center; } .selectDeliveryStep .selectPickUpPoint .delivery-pop-change-content { margin: 0; } } /**/ /*-----------------------------------/* COMPONENTS /*-----------------------------------*/ :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox { transition: 0.3s ease all; border: 1px solid rgba(218, 218, 218, 0.60); border-radius: 4px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox:hover { box-shadow: 0 2px 20px 0 rgba(54, 52, 49, 0.06), 0 2px 8px 0 rgba(54, 52, 49, 0.07), 0 1px 2px 0 rgba(54, 52, 49, 0.07); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner { } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container { } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container a.item-box-link-wrapper.image { margin: 0; padding: 0; position: relative; z-index: 1; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container a.item-box-link-wrapper.image .item-image { height: auto; aspect-ratio: 1; /* width: 100%; */ } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper { padding-block: var(--gap-16); padding-inline: var(--gap-20); margin: 0; /* min-height: var(--gap-150); */ } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-top { gap: var(--gap-8); min-height: var(--gap-52); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-top h4.item-subtitle.price-comment { } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-top h4.item-subtitle.measuring-description { display: none; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price { } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom { display: flex; flex-direction: column; gap: var(--gap-8); min-height: var(--gap-48); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price span.itemBeforeDiscountPrice.hasDiscount { font-family: var(--first-font); font-size: clamp(16px,var(--fs-16),300px); display: flex; flex-direction: row-reverse; align-items: center; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price span.itemBeforeDiscountPrice.hasDiscount::before { content: "₪"; font-family: var(--first-font); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price span.finalPrice { } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price span.finalPrice span.final-price-inner { font-size: clamp(16px,var(--fs-16),300px); -webkit-font-smoothing: none !important; /* font-weight: 700; */ font-family: var(--second-font); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom h4.item-subtitle.price-comment { /* font-family: var(--first-font); */ color: #989898; font-size: clamp(12px,var(--fs-14),300px); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price span.finalPrice span:not(.final-price-inner) { color: #989898; font-size: clamp(12px, var(--fs-14), 300px); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity { position: absolute; bottom: 0; z-index: 3; width: 100%; left: 4%; bottom: 4%; background: none; justify-content: flex-end; z-index: 100; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .quantity-start { position: relative; display: flex; w\: 100%; width: 100%; justify-content: flex-end; transition: 0.3s ease all; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .quantity-start button { border-radius: 50px; background: white; width: 50px; height: 50px; max-height: 50px; justify-content: flex-end; transition: 0.3s ease all; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .quantity-start button span { width: fit-content; overflow: hidden; /* transform: translateX(-99px); */ transition: 0.3s ease all; display: block; white-space: nowrap; font-size: clamp(14px,var(--fs-16),300px); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .quantity-start button:after { content: "+"; font-size: clamp(20px,var(--fs-28),300px); min-width: 50px; display: block; position: relative; /* background: white; */ overflow: hidden; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .quantity-start.inactive { display: none; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .item-quantity-options { width: max(34%,146px); border-radius: 50px; background: white; padding-inline: 11px; /* width: 50px; */ height: 50px; max-height: 50px; justify-content: flex-end; transition: 0.3s ease all; margin-inline-start: auto; font-family: var(--first-font); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .item-quantity-options button { transition: 0.3s ease all; background: none; border-radius: 50%; height: auto; aspect-ratio: 1; pointer-events: all; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .item-quantity-options button:hover { background: var(--secondery-button-hover); border-radius: 50%; height: auto; aspect-ratio: 1; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity:has(.unavailable-catalog-menu) { left: var(--gap-20); width: fit-content; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity:has(.unavailable-catalog-menu) .unavailable-catalog-menu { background: var(--white); color: var(--primary-button); /* border: 1px solid var(--primary-button); */ font-size: clamp(17px,var(--fs-17),300px); padding: var(--gap-6) var(--gap-12); height: var(--gap-50); align-content: center; border-radius: 50px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .box-labels-container { z-index: 2; left: unset; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .box-labels-container .collections-labels-wrapper { } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .box-labels-container .collections-labels-wrapper .productLabel { background: var(--order-icon-tags); border-radius: 4px; color: var(--black); font-size: clamp(14px,var(--fs-16),300px); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .productLabel.wishlist { right: unset; left: var(--gap-16); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-add-to-cart:has(.outOfStock) { position: absolute; z-index: 100; bottom: 63%; transform: translate(-50%,50%); width: fit-content; height: fit-content; left: 50%; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-add-to-cart:has(.outOfStock) button#addToCartBtn { background: white; font-family: var(--first-font); padding-inline: var( --gap-24); border-radius: 5px; color: var(--black); font-size: clamp(15px,var(--fs-17),300px); } #ContentFaqModule { padding-block: var(--gap-96); width: 50%; margin-inline: auto; } #ContentFaqModule #pageview #headline { font-size: clamp(30px,var(--fs-32),300px); font-family: var(--second-font); margin-bottom: var(--gap-32); } #ContentFaqModule #pageview #faqview { } #ContentFaqModule #faqview .faq-item.panel { margin-bottom: var(--gap-14) !important; } #ContentFaqModule #faqview .faq-item.panel .faq-headline { font-size: clamp(16px,var(--fs-16),300px); font-family: var(--second-font); padding: var(--gap-32); display: flex; justify-content: space-between; } #ContentFaqModule #faqview .faq-item.panel .faq-headline.open { background: #F2F2F2; } #ContentFaqModule #faqview .faq-item.panel .faq-body { } #ContentFaqModule #faqview .faq-item.panel .faq-body p { font-size: clamp(16px,var(--fs-16),300px); } #ContentFaqModule #faqview .faq-item.panel .faq-body > div { padding-top: 0; padding-inline: var(--gap-32); } @media(max-width: 1025px) { :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner { min-height: 328px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .box-labels-container { padding: 5px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .box-labels-container .collections-labels-wrapper .productLabel { font-size: 12px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity { height: 36px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .item-quantity-options { width: 70%; justify-content: space-between; height: 36px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity .quantity-start button { width: 36px; height: auto; aspect-ratio: 1; justify-content: center; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity:has(.unavailable-catalog-menu) { left: 6px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity:has(.unavailable-catalog-menu) .unavailable-catalog-menu { height: 36px; font-size: 13px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .productLabel.wishlist { left: 5%; right: unset; top: 5px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .productLabel.wishlist button.wishListBtn { width: 36px; height: 36px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper { padding: 14px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-top h2.itemTitle { font-family: var(--first-font); font-size: 14px; color: var(--black); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-top .custom-fields-container { } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-top .custom-fields-container h4.item-subtitle.item-subtitle-custom { } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-top .custom-fields-container h4.item-subtitle.item-subtitle-custom span:not(.custom-field-img) { display: none; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price { align-items: baseline; gap: 4px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price span.finalPrice span:not(.final-price-inner, .itemBeforeDiscountPrice) { display: none; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price span.finalPrice span.final-price-inner { font-size: 14px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-bottom .item-price span.itemBeforeDiscountPrice.hasDiscount { font-size: 14px; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-add-to-cart:has(.outOfStock) { bottom: 75%; white-space: nowrap; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-add-to-cart:has(.outOfStock) button#addToCartBtn { font-size: 12px; height: unset; padding-block: 10px; padding-inline: 10px; } #ContentFaqModule { width: 100%; } #ContentFaqModule #faqview .faq-item.panel .faq-headline { padding: 16px; } #ContentFaqModule #faqview .faq-item.panel .faq-body > div { padding-inline: 16px; } } @media(min-width: 1026px) { :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox { max-width: 21.875vw; } :is(#CatalogModule, div) .newCatalogItemBox h4.item-subtitle.item-subtitle-custom span { font-size: clamp(10px,var(--fs-14),300px); font-weight: 100; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-top .custom-fields-container { gap: var(--gap-8); flex-wrap: nowrap; } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner a.item-box-link-wrapper .item-text-top h2.itemTitle { font-size: clamp(17px,var(--fs-17),300px); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity:hover .quantity-start button { width: max(34%,146px); } :is(#CatalogModule, div) .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container .item-quantity:hover .quantity-start button span { /* width: 100%; */ /* transform: unset; */ } } /**/ /*-----------------------------------/* SECTIONS /*-----------------------------------*/ #allSectionsWrapper { } #allSectionsWrapper .section { text-align: unset; padding: 0; } #allSectionsWrapper .section .section-title { margin: 0; } #allSectionsWrapper .section .section-title h1 { font-family: var(--second-font); color: var(--black); font-size: clamp(32px,var(--fs-32),300px); } #allSectionsWrapper .section .section-nav-title-wrapper { display: flex; } #allSectionsWrapper .section .section-nav-title-wrapper .owl-nav { position: static; } #allSectionsWrapper .section.grid-Catalog-Categories { padding: var(--gap-72) var(--gap-88); } #allSectionsWrapper .section.grid-Catalog-Categories .section-title { margin-bottom: var(--gap-32); } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-32) var(--gap-20); } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes::before { display: none; } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes::after { display: none; } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes .grid-category-box { padding: 0; margin: 0; height: auto; width: 100%; aspect-ratio: 1; border: 1px solid rgba(218, 218, 218, 0.60); border-radius: 4px; transition: 0.3s ease all; } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes .grid-category-box .grid-box-image { padding: unset; margin: 0; } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes .grid-category-box .grid-box-image .grid-box-image-container { position: static; } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes .grid-category-box .grid-box-title { display: block; text-align: right; } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes .grid-category-box .grid-box-title h3 { font-size: unset; margin: 0; } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes .grid-category-box .grid-box-title h3 a { display: block; font-size: clamp(17px,var(--fs-18),300px); color: var(--black); font-family: var(--second-font); margin: 0; padding: var(--gap-16) var(--gap-20); } #allSectionsWrapper .section.grid-row-section { margin: 0; } #allSectionsWrapper .section.grid-row-section .grid-rows { } #allSectionsWrapper .section.grid-row-section .grid-rows::before { display: none; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row { display: flex; align-items: center; background: var(--row-grid-bg); } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell { display: inline-block !important; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text { float: none; height: 100%; text-align: center; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text { margin-inline: auto; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2 { font-size: clamp(30px,var(--fs-32),300px); font-family: var(--second-font); line-height: 1.5; margin-bottom: var(--gap-12); letter-spacing: -0.64px; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h3 { font-size: clamp(17px,var(--fs-18),300px); font-family: var(--second-font); line-height: 1.4; margin-bottom: var(--gap-16); letter-spacing: 0.17px; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text p { font-size: clamp(14px,var(--fs-16),300px); color: var(--black); font-family: var(--first-font); } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text a.grid-row-button { display: inline-block; margin: 0; border: none; background: var(--secondery-button); color: white; font-family: var(--second-font); font-size: clamp(16px,var(--fs-16),300px); letter-spacing: 0.17px; min-width: 150px; text-align: center; padding-block: var(--gap-14); padding-inline: var( --gap-24); border-radius: 50px; margin-top: var(--gap-32); transition: 0.3s ease all; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text a.grid-row-button { background: var(--primary-button); } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box { } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides { } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item { padding: 0; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.flexslider-box ul.slides li.slider-item .grid-row-image-container { position: static; } #allSectionsWrapper .section.grid-Catalog-Items { /* padding-inline-start: var(--gap-88); */ } #allSectionsWrapper .section.grid-Catalog-Items .section-title h2 { font-family: var(--second-font); } #allSectionsWrapper .section.grid-Catalog-Items .section-title .owl-controls .owl-nav { display: flex; gap: 12px; } #allSectionsWrapper .section.grid-Catalog-Items .section-title .owl-controls .owl-nav > div { width: 50px; height: auto; aspect-ratio: 1; /* background: black; */ border-radius: 50%; cursor: pointer; background-image: url("https://media.getmood.io/warehouse/temp/specialdeli/Cart.svg"); } #allSectionsWrapper .section.grid-Catalog-Items .section-title .owl-controls .owl-nav > div.owl-prev { background-image: url("https://media.getmood.io/warehouse/temp/specialdeli/Arrow right.svg"); } #allSectionsWrapper .section.grid-Catalog-Items .section-title .owl-controls .owl-nav > div.owl-next { background-image: url("https://media.getmood.io/warehouse/temp/specialdeli/Arrow left.svg"); } @media(min-width: 1026px) { #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text a.grid-row-button:hover { background: var(--primary-button-hover); } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes .grid-category-box:hover { box-shadow: 0 2px 20px 0 rgba(54, 52, 49, 0.06), 0 2px 8px 0 rgba(54, 52, 49, 0.07), 0 1px 2px 0 rgba(54, 52, 49, 0.07); Colors Hex Hex Background colors #FFFFFF Border colors Color/Base colors/stroke light Selection colors Color/Base colors/Black Assets Frame 1000006190 Image · 1, 200  x 799 Export Toolbelt Mode Draw Design Dev Mode; } #allSectionsWrapper .section.grid-Catalog-Items .section-title { margin-bottom: var(--gap-32); display: flex; justify-content: space-between; padding-inline-end: var(--gap-20); padding-inline-start: var(--gap-88); } #allSectionsWrapper .section.grid-Catalog-Items .section-title h2 { font-family: var(--second-font); font-size: clamp(32px,var(--fs-32),300px); } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes { } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes::before { display: none; } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper { padding-inline-end: var(--gap-88); } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper:not(:has(.owl-item)) { display: flex; gap: var(--gap-20); padding-inline: var(--gap-88); } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper .owl-stage-outer { } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper .owl-stage-outer .owl-stage { } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper .owl-stage-outer .owl-stage .item { padding: 0; padding-inline-start: var(--gap-20); } #allSectionsWrapper .section.grid-Catalog-Items .content-section-Btn a:hover { background: var(--primary-button-hover); } } @media(max-width: 1025px) { #allSectionsWrapper .section .section-title h1 { font-size: 20px; margin: 0; } #allSectionsWrapper .section.grid-Catalog-Categories { padding-block: 14px; margin: 0; } #allSectionsWrapper .section.grid-Catalog-Categories .section-title { margin-bottom: 12px; } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes { grid-template-columns: repeat(2,1fr); gap: var(--gap-8); } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes .grid-category-box { height: unset; aspect-ratio: unset; } #allSectionsWrapper .section.grid-Catalog-Categories .grid-boxes .grid-category-box .grid-box-title h3 a { font-size: 14px; } #allSectionsWrapper .section.grid-Catalog-Items { padding-block: 14px; padding-inline: 0; } #allSectionsWrapper .section.grid-Catalog-Items .section-title { padding-inline: 20px; } #allSectionsWrapper .section.grid-Catalog-Items .section-title h2 { margin: 0; font-size: 20px; margin-bottom: 12px; } #allSectionsWrapper .section.grid-Catalog-Items .section-title .owl-controls { display: none; } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes { display: flex; flex-direction: column; padding-inline: 20px; } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper { } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper { display: flex; flex-direction: row; gap: var(--gap-16); overflow-x: auto; direction: rtl !important; } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper .owl-stage-outer { } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper .owl-stage-outer .owl-stage { } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper .owl-stage-outer .owl-stage .owl-item { } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper .owl-stage-outer .owl-stage .owl-item .item { } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper .owl-stage-outer .owl-stage .owl-item .item .newCatalogItemBox.catalogItemBox.col-xs-12.col-sm-12.col-md-12.pull-right.align-right.catalogItem87858.catalogItemMainCategory6702 { } #allSectionsWrapper .section.grid-Catalog-Items .grid-boxes .grid-boxes-wrapper .item .newCatalogItemBox.catalogItemBox { width: 177px; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text { padding: 0; width: 90%; margin-block: 40px; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h2 { font-size: 20px; margin-bottom: 8px; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text h3 { margin-bottom: 12px; font-size: 14px; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text p { font-size: 14px; } #allSectionsWrapper .section.grid-row-section .grid-rows .grid-row .grid-row-cell.grid-row-cell-text .grid-row-text a.grid-row-button { margin-top: 24px; min-width: 50px; font-size: 14px; } } /*-----------------------------------/* PAGES /*-----------------------------------*/ .allCatalogContainers { width: 90%; margin-inline: auto; } .categoryContainer .categoryContainerItems { max-width: unset; } .categoryContainer { display: flex; flex-direction: column; margin-bottom: var(--gap-96); } .categoryContainer .categoryContainerBanner { } .categoryContainer .categoryContainerBanner .categoryContainerText { position: static; transform: unset; } .categoryContainer .categoryContainerBanner::after { display: none; } .categoryContainer .categoryContainerBanner .categoryContainerText .section-title { margin: 0; } .categoryContainer .categoryContainerBanner .categoryContainerText .section-title h2 { font-family: var(--second-font); font-size: clamp(30px,var(--fs-32),300px); margin-bottom: var(--gap-32); } .categoryContainer .categoryContainerItems { } .categoryContainer .categoryContainerItems .itemsList { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-20); width: 100%; margin-inline: auto; } .categoryContainer .categoryContainerItems .itemsList .newCatalogItemBox.catalogItemBox { width: 100%; } .categoryContainer .categoryContainerItems .itemsList::before { display: none; } body.catalog-page { } #CatalogView #headline { display: none; } /*body.catalog-page #headline { display: none; }*/ body.catalog-page #GridPage { padding: 0; position: relative; } body.catalog-page #GridPage .catalog-sticky-nav-wrapper { position: sticky; top: calc(var(--headerHeight) + var(--selectedPosData-height) - 1px) !important; /* background: white; */ z-index: 1000; } body.catalog-page #GridPage .catalog-sticky-nav-wrapper .catalog-sticky-nav { margin: 0; background: white; position: static !important; } body.catalog-page #GridPage .catalog-sticky-nav-wrapper .catalog-sticky-nav nav.menu-tags-list { } body.catalog-page #GridPage .catalog-sticky-nav-wrapper .catalog-sticky-nav nav.menu-tags-list ul { } body.catalog-page #GridPage .catalog-sticky-nav-wrapper .catalog-sticky-nav nav.menu-tags-list ul li button { transition: 0.3s ease all; } body.catalog-page #GridPage .catalog-sticky-nav-wrapper .catalog-sticky-nav nav.menu-tags-list ul li button { background: none; color: var(--black); font-family: var(--first-font); font-size: clamp(16px,var(--fs-16),300px); padding: var(--gap-16); } body.catalog-page #GridPage .catalog-sticky-nav-wrapper .catalog-sticky-nav nav.menu-tags-list ul :is(li.active,li:hover) button { border-bottom: 2px solid var(--primary-button); } body.about #SiteGrid .combined-wrap { display: flex; flex-direction: row-reverse; position: relative; margin-top: var(--gap-140); margin-bottom: var(--gap-120); } body.about #SiteGrid .combined-wrap > * { flex: 1; } body.about #SiteGrid .combined-wrap #GridTop { height: auto; position: sticky; top: 16%; } body.about #SiteGrid .combined-wrap > #GridContent { /* margin-bottom: var(--gap-120); */ font-family: var(--first-font); } body.about #SiteGrid .combined-wrap > #GridContent .MainContent { padding: var(--gap-120); padding-bottom: 0; text-align: right; width: 100%; } body.about #SiteGrid .combined-wrap > #GridContent .MainContent #headline { font-size: unset; margin-bottom: var(--gap-12); } body.about #SiteGrid .combined-wrap > #GridContent .MainContent #headline h1 { text-align: right; font-size: clamp(30px,var(--fs-32),300px); font-family: var(--second-font); } body.about #SiteGrid .combined-wrap > #GridContent .MainContent #subheadline { margin-bottom: var(--gap-18); } body.about #SiteGrid .combined-wrap > #GridContent .MainContent #subheadline h2 { font-size: clamp(20px,var(--fs-20),300px); font-family: var(--second-font); margin: 0; } body.about #SiteGrid .combined-wrap > #GridContent .MainContent #text1 { text-align: right; margin: 0; } body.about #SiteGrid .combined-wrap > #GridContent .MainContent #text1 p { font-size: clamp(16px,var(--fs-16),300px); } body.about #SiteGrid .combined-wrap > #GridContent .MainContent #text1 h3 { font-size: clamp(20px,var(--fs-20),300px); font-family: var(--second-font); } body.about #SiteGrid .combined-wrap > #GridContent .MainContent #text1 ul { padding-inline-start: var(--gap-24); } body.about #SiteGrid .combined-wrap > #GridContent .MainContent #text1 ul li { font-size: clamp(16px,var(--fs-16),300px); } body.about #SiteGrid .combined-wrap > #GridContent #text2 { text-align: right; margin-inline: var(--gap-120); } body.about #SiteGrid .combined-wrap > #GridContent #text2 h3 { font-family: var(--second-font); margin: unset; margin-bottom: var(--gap-12); font-size: clamp(20px,var(--fs-20),300px); } body.about #SiteGrid .combined-wrap > #GridContent #text2 p { font-size: clamp(16px,var(--fs-16),300px); } body.about #SiteGrid .combined-wrap > #GridContent #text2 ul { padding-inline-start: var(--gap-24); } body.about #SiteGrid .combined-wrap > #GridContent #text2 ul li { font-size: clamp(16px,var(--fs-16),300px); } body.about #GridPage { padding: 0; } body.about #GridPage #GridPromo.form-container-wide { max-width: unset; padding: 0; margin: 0; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject { padding: 0; border: none; display: flex; flex-direction: column; width: 24%; margin-inline: auto; padding-block: var(--gap-96); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject::after { display: none; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText { width: 100%; padding: 0; margin-bottom: var(--gap-24); color: var(--black); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText h3.dynamicFormObjectTitle { font-size: clamp(30px,var(--fs-32),300px); font-family: var(--second-font); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormEndText { display: block; width: 100%; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormEndText p { font-size: clamp(17px,var(--fs-16),300px); line-height: 1.4; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText::after { display: none; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields { width: 100%; padding: 0; display: block; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields::before { display: none; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { font-size: clamp(17px,var(--fs-16),300px); margin-bottom: var(--gap-32); color: var(--black); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form { } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset { display: flex; flex-direction: column; gap: 20px; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField { padding: 0; width: 100%; margin: 0; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper { } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper input { margin: 0; padding: var(--gap-14) var(--gap-16); font-size: clamp(16px,var(--fs-16),300px); border: 1px solid var(--text-field-line-color); border-radius: 4px; min-height: 50px; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper::before { right: 4px; color: var(--gray-text); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper input::placeholder { color: var(--gray-text); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .select-wrapper { width: auto; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .select-wrapper select { border: 1px solid var(--text-field-line-color); min-height: 50px; font-size: clamp(16px,var(--fs-16),300px); padding-inline: var(--gap-16); margin: 0; color: var(--gray-text); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper { } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper textarea { border: 1px solid var(--text-field-line-color); font-size: clamp(16px,var(--fs-16),300px); padding: var(--gap-14) var(--gap-16); margin: 0; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .select-wrapper select::placeholder { color: var(--gray-text); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper textarea::placeholder { color: var(--gray-text); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField label { font-size: clamp(16px,var(--fs-16),300px); color: var(--gray-text); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit { padding: 0; float: none; margin-inline: auto; width: 37%; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit input.form-submit { font-size: clamp(16px,var(--fs-16),300px); background: var(--primary-button); min-height: 50px; border-radius: 50px; font-family: var(--second-font); letter-spacing: 0.17px; line-height: 1.4; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form::after { display: none; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields:after { display: none; } body.about #GridBottom { } body.about #GridBottom .GridBottomGallery { padding: 0; } body.about #GridBottom .GridBottomGallery .gallery-cubes { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-20); padding-inline: var(--gap-20); } body.about #GridBottom .GridBottomGallery .gallery-cubes::before { display: none; } body.about #GridBottom .GridBottomGallery .gallery-cubes > div { width: unset; } body.about #GridBottom .GridBottomGallery .gallery-cubes > div .boxes-images-outer-image { padding: 0; height: 100%; aspect-ratio: 1; border-radius: 5px; display: flex; } body.about #GridBottom .GridBottomGallery .gallery-cubes > div .boxes-images-outer-image .image-link-container { position: static; } body.one-column #SiteGrid .combined-wrap { display: flex; flex-direction: row-reverse; position: relative; margin-top: var(--gap-140); margin-bottom: 0; } body.one-column #SiteGrid .combined-wrap > * { flex: 1; } body.one-column #SiteGrid .combined-wrap #GridTop { display: none; } body.one-column #SiteGrid .combined-wrap > #GridContent { /* margin-bottom: var(--gap-120); */ font-family: var(--first-font); } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent { padding: var(--gap-120); padding-bottom: 0; text-align: center; width: 47%; } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent #headline { font-size: unset; margin-bottom: var(--gap-12); } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent #headline h1 { text-align: center; font-size: clamp(30px,var(--fs-32),300px); font-family: var(--second-font); } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent #subheadline { margin-bottom: var(--gap-18); } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent #subheadline h2 { font-size: clamp(20px,var(--fs-20),300px); font-family: var(--second-font); margin: 0; } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent #text1 { text-align: right; margin: 0; text-align: center; max-width: unset; } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent #text1 p { font-size: clamp(16px,var(--fs-16),300px); } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent #text1 h3 { font-size: clamp(20px,var(--fs-20),300px); font-family: var(--second-font); } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent #text1 ul { padding-inline-start: var(--gap-24); } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent #text1 ul li { font-size: clamp(16px,var(--fs-16),300px); } body.one-column #SiteGrid .combined-wrap > #GridContent #text2 { text-align: right; margin-inline: var(--gap-120); } body.one-column #SiteGrid .combined-wrap > #GridContent #text2 h3 { font-family: var(--second-font); margin: unset; margin-bottom: var(--gap-12); font-size: clamp(20px,var(--fs-20),300px); } body.one-column #SiteGrid .combined-wrap > #GridContent #text2 p { font-size: clamp(16px,var(--fs-16),300px); } body.one-column #SiteGrid .combined-wrap > #GridContent #text2 ul { padding-inline-start: var(--gap-24); } body.one-column #SiteGrid .combined-wrap > #GridContent #text2 ul li { font-size: clamp(16px,var(--fs-16),300px); } body.one-column #GridPage { padding: 0; } body.one-column #GridPage #GridPromo.form-container-wide { max-width: unset; padding: 0; margin: 0; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject { padding: 0; border: none; display: flex; flex-direction: column; width: 24%; margin-inline: auto; padding-block: var(--gap-96); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject::after { display: none; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText { width: 100%; padding: 0; margin-bottom: var(--gap-24); color: var(--black); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText h3.dynamicFormObjectTitle { font-size: clamp(30px,var(--fs-32),300px); font-family: var(--second-font); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormEndText { display: block; width: 100%; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText .dynamicFormEndText p { font-size: clamp(17px,var(--fs-16),300px); line-height: 1.4; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText::after { display: none; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields { width: 100%; padding: 0; display: block; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields::before { display: none; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields .top-form { font-size: clamp(17px,var(--fs-16),300px); margin-bottom: var(--gap-32); color: var(--black); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form { } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset { display: flex; flex-direction: column; gap: 20px; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField { padding: 0; width: 100%; margin: 0; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper { } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper input { margin: 0; padding: var(--gap-14) var(--gap-16); font-size: clamp(16px,var(--fs-16),300px); border: 1px solid var(--text-field-line-color); border-radius: 4px; min-height: 50px; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper::before { right: 4px; color: var(--gray-text); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .input-wrapper input::placeholder { color: var(--gray-text); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .select-wrapper { width: auto; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .select-wrapper select { border: 1px solid var(--text-field-line-color); min-height: 50px; font-size: clamp(16px,var(--fs-16),300px); padding-inline: var(--gap-16); margin: 0; color: var(--gray-text); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper { } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper textarea { border: 1px solid var(--text-field-line-color); font-size: clamp(16px,var(--fs-16),300px); padding: var(--gap-14) var(--gap-16); margin: 0; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .select-wrapper select::placeholder { color: var(--gray-text); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField .textarea-wrapper textarea::placeholder { color: var(--gray-text); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectField label { font-size: clamp(16px,var(--fs-16),300px); color: var(--gray-text); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit { padding: 0; float: none; margin-inline: auto; width: 37%; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form fieldset .dynamicFormObjectSubmit input.form-submit { font-size: clamp(16px,var(--fs-16),300px); background: var(--primary-button); min-height: 50px; border-radius: 50px; font-family: var(--second-font); letter-spacing: 0.17px; line-height: 1.4; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields form::after { display: none; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectFields:after { display: none; } body.one-column #GridBottom { } body.one-column #GridBottom .GridBottomGallery { padding: 0; } body.one-column #GridBottom .GridBottomGallery .gallery-cubes { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-20); padding-inline: var(--gap-20); } body.one-column #GridBottom .GridBottomGallery .gallery-cubes::before { display: none; } body.one-column #GridBottom .GridBottomGallery .gallery-cubes > div { width: unset; } body.one-column #GridBottom .GridBottomGallery .gallery-cubes > div .boxes-images-outer-image { padding: 0; height: 100%; aspect-ratio: 1; border-radius: 5px; display: flex; } body.one-column #GridBottom .GridBottomGallery .gallery-cubes > div .boxes-images-outer-image .image-link-container { position: static; } @media(max-width: 1025px) { body.catalog-page #GridWrap { margin-top: var(--gap-28); } body.catalog-page #CatalogModule .allCatalogContainers { width: 100%; margin: 0; } body.catalog-page #CatalogModule .allCatalogContainers .categoryContainer .categoryContainerBanner .categoryContainerText .section-title h2 { font-size: 20px; margin-bottom: 12px; margin-inline: 0; } body.catalog-page .categoryContainer .categoryContainerItems .itemsList { grid-template-columns: repeat(2,1fr); gap: 8px; } body.about #SiteGrid .combined-wrap { flex-direction: column; margin: 0; } body.about #SiteGrid .combined-wrap #GridTop { width: 100% !important; position: static; min-width: 100% !important; display: list-item; height: auto; aspect-ratio: 1; margin-top: calc(var(--headerHeight) + var(--selectedPosData-height)); } body.about #SiteGrid .combined-wrap > #GridContent .MainContent { padding: 32px 16px; } body.about #SiteGrid .combined-wrap > #GridContent #text2 { margin-inline: 16px; } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject { width: 100%; padding-block: 0; margin: 0; max-width: 100% !important; } body.about #GridBottom .GridBottomGallery .gallery-cubes { grid-template-columns: repeat(2,1fr); gap: 8px; } body.about #GridPage { border-top: 1px solid var(--delivery-open-cart); } body.about #GridPage #GridWrap { padding: 32px 16px; width: 100%; border-top: 1px solid var(--text-field-line-color); } body.about #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText h3.dynamicFormObjectTitle { font-size: 20px; margin-bottom: 18px; } body.about #ContentRegularModule { padding-block: 0; } body.one-column #SiteGrid .combined-wrap { flex-direction: column; margin: 0; } body.one-column #SiteGrid .combined-wrap #GridTop { width: 100% !important; position: static; min-width: 100% !important; display: list-item; height: auto; aspect-ratio: 1; margin-top: calc(var(--headerHeight) + var(--selectedPosData-height)); display: none; } body.one-column #SiteGrid .combined-wrap > #GridContent { margin-top: calc(var(--headerHeight) + var(--selectedPosData-height)); } body.one-column #SiteGrid .combined-wrap > #GridContent .MainContent { padding: 32px 16px; width: 100%; } body.one-column #SiteGrid .combined-wrap > #GridContent #text2 { margin-inline: 16px; } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject { width: 100%; padding-block: 0; margin: 0; max-width: 100% !important; } body.one-column #GridBottom .GridBottomGallery .gallery-cubes { grid-template-columns: repeat(2,1fr); gap: 8px; } body.one-column #GridPage { border-top: 1px solid var(--delivery-open-cart); } body.one-column #GridPage #GridWrap { padding: 32px 16px; width: 100%; border-top: 1px solid var(--text-field-line-color); } body.one-column #GridPage #GridPromo.form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText h3.dynamicFormObjectTitle { font-size: 20px; margin-bottom: 18px; } body.one-column #ContentRegularModule { padding-block: 0; } } @media(min-width: 1025px) { body.about #SiteGrid .combined-wrap #GridTop { min-height: calc(100vh - var(--headerContainerHeight)); } body.one-column #SiteGrid .combined-wrap #GridTop { min-height: calc(100vh - var(--headerContainerHeight)); } } /*-----------------------------------/* SEARCH RESLUTS /*-----------------------------------*/ body.about.SearchResults #SiteGrid .combined-wrap { flex-direction: column; margin-top: 350px; } body.about.SearchResults #SiteGrid .combined-wrap #GridTop { position: static; } @media(max-width: 1025px) { } @media(min-width: 1026px) { } /*-----------------------------------/* SEARCH RESULTS PAGE /*-----------------------------------*/ #SearchResultPage ul.searchResultsList { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-48) var(--gap-20); margin-block: var(--gap-32) var(--gap-64); } #SearchResultPage ul.searchResultsList .newCatalogItemBox.catalogItemBox { width: 100%; } #SearchResultPage #headline h1 { font-family: var(--second-font); font-size: clamp(30px, var(--fs-32), 300px); /* margin-bottom: var(--gap-32); */ } #SearchResultPage #headline { text-align: right; max-width: 90%; margin-inline: auto; margin-bottom: 0; } #SearchResultPage { margin-top: var(--gap-72); } @media(max-width: 1025px) { #SearchResultPage { margin-top: 32px; } #SearchResultPage #headline { max-width: unset; } #SearchResultPage #text1 { max-width: unset; } #SearchResultPage ul.searchResultsList { grid-template-columns: repeat(2,1fr); column-gap: 9px; } .container-fluid:has(.searchResultsList) { padding: 0; } } @media(min-width: 1026px) { } /*------------------------------------------/* ACCESSABILITY PAGE /*------------------------------------------*/ .accessabilityMainPage #GridTop { display: none; } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) { max-width: 40.5vw; margin: 0 auto var(--gap-150); display: flex; flex-direction: column; text-align: start !important; margin-top: calc(var(--headerHeight) + var(--gap-60)) !important; } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) #headline { font-size: 100%; margin: 0; text-align: start; margin-bottom: var(--gap-12); } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) #headline h1 { margin: 0; font-size: clamp(30px,var(--fs-32),300px); font-family: var(--second-font); } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) #subheadline h2 { text-align: right; margin-bottom: var(--gap-36); } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) { max-width: 100%; display: grid; text-align: right; } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(h2, h3) { margin: var(--gap-24) 0 var(--gap-18); font-size: clamp(1.2rem, var(--fs-20), 1000rem); letter-spacing: 0.28px; line-height: 1.4; line-height: 1.5; font-family: var(--third-font); } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(h2, h3):first-child { margin-top: 0; } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(ul,ol) { padding-inline-start: var(--gap-20); margin: 0; display: flex; flex-direction: column; } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(ul,ol) :is(ul,ol) { padding-inline-start: 0; } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(ul,ol):has(+ p, + ul, + ol), .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(p, ul,ol):has(+ ul, + ol) { margin-bottom: var(--gap-24); } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(p,li) { font-size: clamp(17px,var(--fs-17),300px); } @media(min-width: 1025px) { } @media(max-width: 1025px) { .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) { max-width: 100%; margin: 0 auto var(--gap-64); margin-top: calc(50px + var(--headerAndBreadCrumpsHeight)); } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) #headline h1 { font-size: var(--fs-26); margin: 0 0 var(--gap-12); } .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(h2, h3) { font-size: 18px; margin-bottom: 10px; } } /**/ /*-----------------------------------/* PAGE 404 - FORM RESULT PAGE /*-----------------------------------*/ body:is(.page-404, .FormResultPage) #SiteGridContainer { display: flex; flex-direction: column; } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid { flex: 1; align-content: center; } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #headline { font-size: unset; margin-bottom: var(--gap-24); } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #headline h1 { font-family: var(--second-font); font-size: clamp(24px,var(--fs-32),300px); line-height: 1.5; letter-spacing: -0.64px; } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #subheadline { margin-bottom: var(--gap-32); } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #subheadline h2 { font-size: clamp(15px,var(--fs-17),300px); margin: 0; } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #text1 { } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #text1 p { margin: 0; } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #text1 p:not(:has(a)) { margin-bottom: var(--gap-32); font-size: clamp(15px,var(--fs-17),300px); } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #text1 a { font-size: clamp(15px, var(--fs-15), 300px); background: var(--primary-button); font-family: var(--second-font); padding: var(--gap-12) var(--gap-20); border-radius: 50px; transition: 0.3s ease all; color: white; min-width: var(--gap-140); text-align: center; display: inline-block; } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #text1 a.FormResultPageButton { margin: 0 !important; } @media(min-width: 1025px) { body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #text1 a:hover { background: var(--primary-button-hover); } } @media(max-width: 1025px) { body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #headline { margin-bottom: var(--gap-16); } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #headline h1 { letter-spacing: -0.52px; } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #subheadline { margin-bottom: 24px; } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #subheadline h2 { margin: 0; } body:is(.page-404, .FormResultPage) #SiteGridContainer #SiteGrid #text1 p:not(:has(a)) { margin-bottom: var(--gap-24); } } /**/ /*-----------------------------------/* FOOTER /*-----------------------------------*/ footer { padding: 0; } footer #SiteFooter { float: unset; background: var(--footer-status-bar); } footer #SiteFooter .footer-text-divided { padding: var(--gap-88); padding-bottom: 0; background: var(--footer-status-bar); color: white; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; } footer #SiteFooter .footer-text-divided .footer-text-right { padding: 0; } footer #SiteFooter .footer-text-divided .footer-text-middle { padding: 0; } footer #SiteFooter .footer-text-divided .footer-text-middle ul { display: flex; list-style: none; justify-content: center; gap: var(--gap-16); padding: 0; } footer #SiteFooter .footer-text-divided .footer-text-middle p { font-size: clamp(15px, var(--fs-17), 300px); } footer #SiteFooter .footer-text-divided .footer-text-middle p:not(:has(a,ul)) { padding-block: var(--gap-24); font-size: clamp(15px,var(--fs-17),300px); } footer #SiteFooter .footer-text-divided .footer-text-left { padding: 0; } footer #SiteFooter .footer-text-divided .footer-text-left p { } footer #SiteFooter .footer-text-divided .footer-text-left > * { text-align: center; } footer #SiteFooter .site-credit.alternative { padding: 0; } #SiteFooter { color: white; } #SiteFooter .footer-text-divided { display: flex; flex-wrap: wrap; padding-block: 0; } #SiteFooter .footer-text-divided .footer-text-left { padding-block: var(--gap-80) 0; padding-inline: var(--gap-20) var(--gap-120); } #SiteFooter .footer-text-divided .footer-text-right { display: flex; flex: 1; padding: var(--gap-80) var(--gap-120); gap: var(--gap-50); } #SiteFooter .footer-text-divided .footer-text-right ul { list-style: none; padding: 0; } #SiteFooter .footer-text-divided .footer-text-right ul li { margin-bottom: var(--gap-6); } #SiteFooter .footer-text-divided .footer-text-middle { order: 1; width: 100%; padding: var(--gap-24) var(--gap-120); display: flex; justify-content: space-between; flex-direction: column; } #SiteFooter .footer-text-divided .footer-text-middle ul { margin: 0; display: flex; list-style: none; padding: 0; gap: var(--gap-32); color: var(--text-on-dark); } footer .grid-faq { } footer #SiteFooter .grid-faq { padding: var(--gap-88); } footer #SiteFooter .grid-faq .grid-faq-inner { } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group { } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item { background: none; border-top: 1px solid rgba(255, 255, 255, 0.40); margin: 0 !important; box-shadow: none; } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline { background: none; color: white; text-align: center; font-size: clamp(18px,var(--fs-20),300px); padding-block: var(--gap-12); padding-inline: 0; font-family: var(--first-font); /* display: flex; */ /* justify-content: center; */ } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline::after { position: absolute; left: 0; filter: invert(1); } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline i.button-open { left: 0; } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body { background: none; color: white; } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body .faq-body-inner { max-width: unset; padding: var(--gap-20); padding-top: 0; } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body .faq-body-inner .faq-item-text { } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body .faq-body-inner .faq-item-text ul { list-style: none; padding: 0; text-align: center; margin: 0; } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body .faq-body-inner .faq-item-text ul li { margin-bottom: var(--gap-8); } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body .faq-body-inner .faq-item-text ul li a { font-size: clamp(15px,var(--fs-17),300px); } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-body .faq-body-inner .faq-item-text ul li a:hover { color: unset; } #SiteFooter .site-credit.alternative svg { filter: invert(1); } @media(min-width: 1026px) { } @media(max-width: 1025px) { footer #SiteFooter { padding: 0; } footer #SiteFooter .grid-faq .grid-faq-inner .panel-group .faq-item .faq-headline { font-size: 15px; font-family: var(--second-font); letter-spacing: 0.4px; } footer #SiteFooter .footer-text-divided { padding-block: var(--gap-40); } footer #SiteFooter .footer-text-divided .footer-text-middle p { display: block; } footer #SiteFooter .footer-text-divided .footer-text-middle p:not(:has(a,ul)) { font-size: 14px; line-height: 1.4; letter-spacing: 0.14px; } footer #SiteFooter .footer-text-divided .footer-text-middle p a { display: block; } footer #SiteFooter .footer-text-divided .footer-text-middle p a span { display: block; } footer #SiteFooter .footer-text-divided .footer-text-middle p a span img { display: block; margin-inline: auto; } footer #SiteFooter .footer-text-divided .footer-text-middle p:has(a:nth-child(2)) { display: flex; justify-content: center; } } /**/ /*-----------------------------------/* POP-UP /*-----------------------------------*/ .shopPop .modal-body { padding: 0; max-height: 90vh; max-width: 1000px !important; z-index: 1; } .shopPop .modal-body { border-radius: 5px; } .shopPop .modal-body > div:not(#CatalogModule, :has(.passwordRecovery, .selectDeliveryProcess)) { display: none !important; } .shopPop .modal-body #CatalogModule { } .shopPop .modal-body #CatalogModule #CatalogItemView { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper::before { display: none; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages { padding: var(--gap-20); position: sticky; top: 0; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages .gallery-slider { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages .gallery-slider { border-radius: 5px; overflow: hidden; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages .gallery-slider .flex-viewport { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages .gallery-slider .flex-viewport ul.slides { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages .gallery-slider .flex-viewport ul.slides li { padding: 0; height: auto; aspect-ratio: 1; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages .productLabel { right: 7%; top: 7%; background: var(--secondery-button-hover); color: var(--black); font-size: clamp(14px,var(--fs-14),300px); font-family: var(--first-font); /* font-weight: 600; */ border-radius: 4px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages .productLabel { background: var(--order-icon-tags); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent { padding: var(--gap-80); /* padding-top: 0; */ border-inline-end: 1px solid rgba(218, 218, 218, 0.60); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent #headline { font-size: unset; margin-bottom: var(--gap-16); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent #headline h2 { font-size: clamp(30px,var(--fs-32),300px); font-family: var(--second-font); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent #subheadline { font-size: clamp(15px,var(--fs-17),300px); font-family: var(--font-1); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent #subheadline h2 { font-size: inherit; color: var(--black); margin: 0; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalogTextContainer { /* margin-bottom: 8px; */ } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalogTextContainer #catalogText { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalogTextContainer #catalogText p { font-size: clamp(16px,var(--fs-16),300px); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-custom-details { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients { display: flex; flex-direction: column-reverse; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection { margin: 0; margin-top: var(--gap-24); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection h3 { margin: 0; font-size: clamp(17px,var(--fs-16),300px); font-family: var(--second-font); margin-bottom: var(--gap-12); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption { border: none; display: flex; max-width: unset; gap: var(--gap-10); position: relative; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption:before { content: ""; background-image: url("https://media.getmood.io/warehouse/dynamic/690259.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; width: auto; height: 100%; aspect-ratio: 1; display: block; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption:not(:last-child) { margin-bottom: var(--gap-10); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption:has(input:checked):before { background-image: url("https://media.getmood.io/warehouse/dynamic/690258.svg"); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption label { font-family: var(--first-font); font-weight: 100; font-size: clamp(14px,var(--fs-16),300px); margin: 0; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption input.ingredientGroup { margin: 0; opacity: 0; width: var(--gap-24); cursor: pointer; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-price { margin-top: var(--gap-24); display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--gap-8); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-price span.finalPrice.priceAfter { /* font-weight: 700; */ font-family: var(--second-font); gap: 0; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-price span.finalPrice.priceAfter::after { font-size: 71%; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .priceComment { font-size: clamp(13px,var(--fs-14),300px); color: var(--gray-text); font-family: var(--first-font); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .priceComment { color: var(--gray-text); font-size: clamp(13px,var( --fs-13),300px); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions { border: none; padding-block: var(--gap-16) var(--gap-24); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .item-quantity { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .item-quantity .quantity-start { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .item-quantity .quantity-start button { background: var(--primary-button); color: white; font-family: var(--second-font); border-radius: 50px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .item-quantity .item-quantity-options { background: white; color: var(--black); border: 1px solid var(--primary-button); border-radius: 50px; justify-content: space-around; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .item-quantity .item-quantity-options button { background: none; color: white; height: auto; aspect-ratio: 1; border-radius: 50%; /* background: var(--secondery-button-hover); */ width: 12%; transition: 0.3s ease all; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .item-quantity .item-quantity-options button:hover { background: var(--secondery-button-hover); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .shareBox { display: none; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .unavailable-catalog-menu { font-size: clamp(16px,var(--fs-16),300px); width: fit-content; display: block; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions button.unavailable-catalog-menu-open-delivery-selection-pop { width: fit-content; font-size: clamp(15px, var(--fs-15), 300px); background: var(--primary-button); font-family: var(--second-font); padding: var(--gap-12) var(--gap-20); border-radius: 50px; transition: 0.3s ease all; color: white; min-width: var(--gap-140); text-align: center; justify-content: center; margin-top: var(--gap-12); border: none; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent a.close { width: 40px; padding: 7px; margin: 0; height: auto; aspect-ratio: 1; display: flex; align-items: center; border: 1px solid rgba(218, 218, 218, 0.60); border-radius: 50%; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent a.close svg { fill: var(--black); width: 100%; height: 14px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalogTextContainer #catalogTextComments { color: var(--gray-text); font-size: clamp(15px,var( --fs-15),300px); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent #subheadline { margin-bottom: var(--gap-6); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption .checkbox-circle { position: absolute; width: var(--gap-24); height: auto; aspect-ratio: 1; background-image: url("https://media.getmood.io/warehouse/dynamic/690259.svg"); background-position: center; background-size: cover; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption .checkbox-circle:after { content: ""; width: 60%; height: auto; aspect-ratio: 1; position: absolute; left: 50%; bottom: 50%; transform: translate(-50%,50%); background: var(--primary-button); border-radius: 50%; opacity: 0; transition: 0.1s ease all; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption:before { display: none; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption:has(:checked) .checkbox-circle:after { opacity: 1; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .outOfStockLabel { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .outOfStockLabel span { font-size: clamp(12px,var(--fs-14),300px); padding: var(--gap-4) var(--gap-8); line-height: 1.5; letter-spacing: 0.28px; border-radius: 4px; background: var(--black); font-family: var(--first-font); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs { } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title { padding: var(--gap-16); background: rgba(218, 218, 218, 0.25); border-radius: 6px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title button { background: none; padding: 0; font-family: var(--second-font); font-size: clamp(17px,var(--fs-17),300px); display: flex; justify-content: space-between; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title .catalog-fields-tab-text { padding: 0; padding-top: var(--gap-20); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title .catalog-fields-tab-text ul { padding: 0; font-size: clamp(12px,var(--fs-17),300px); padding-inline-start: var(--gap-20); list-style: disc; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title .catalog-fields-tab-text > * { font-size: clamp(17px, var(--fs-17), 300px); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title .catalog-fields-tab-text p.DatesTitle { font-family: var(--second-font); padding-block: var(--gap-16); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title .catalog-fields-tab-text > .wrapped-dates { display: flex; gap: 12px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title .catalog-fields-tab-text ul { font-size: clamp(12px,var(--fs-14),300px); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title .catalog-fields-tab-text ul li.CatalogMenuAvailiableDate { margin-bottom: 7px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title .catalog-fields-tab-text button.toggle-dates { margin-block: 14px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title > button:after { content: ""; background-image: url("https://media.getmood.io/warehouse/dynamic/704243.svg"); display: inline-block; font-size: clamp(17px,var(--fs-17),300px); height: 100%; width: var(--gap-24); aspect-ratio: 1; background-position: center; background-repeat: no-repeat; background-size: auto; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title.active > button:after { background-image: url("https://media.getmood.io/warehouse/dynamic/704242.svg"); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title button.select-delivery-btn-in-dates { width: fit-content; font-size: clamp(15px, var(--fs-15), 300px); background: var(--primary-button); font-family: var(--second-font); padding: var(--gap-12) var(--gap-20); border-radius: 50px; transition: 0.3s ease all; color: white; min-width: var(--gap-140); text-align: center; justify-content: center; margin-top: var(--gap-12); } .shopPop .modal-body:has(.passwordRecovery) { max-width: fit-content !important; border-radius: 11px; } .shopPop .modal-body:has(.passwordRecovery) > div { padding: var(--gap-32) var(--gap-16); } .shopPop .modal-body:has(.passwordRecovery) > div .subheadline { } .shopPop .modal-body:has(.passwordRecovery) > div .subheadline h2.forgotPassTitle { font-family: var(--second-font); } .shopPop .modal-body:has(.passwordRecovery) > div form#passwordRecovery { } .shopPop .modal-body:has(.passwordRecovery) > div form#passwordRecovery .loginFormInput { } @media(min-width: 1026px) { .shopPop .modal-body:has(.passwordRecovery) > div form#passwordRecovery .loginFormInput input.shopBtn.submitRecovery:hover { background: var(--primary-button-hover); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .item-quantity .quantity-start button:hover { background: var(--primary-button-hover); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages .gallery-slider .flex-viewport ul.slides li img { position: static; transform: unset; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalog-fields.accordionLayout ul.catalog-fields-tabs li.catalog-fields-tab-title button.select-delivery-btn-in-dates:hover { background: var(--primary-button-hover); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > .col-xs-12:first-child { /* display: none; */ order: 1; text-align: start; padding-inline: var(--gap-32); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper > label:first-child { display: none; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div { padding-inline: var(--gap-32); } /* .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div > label { display: none; }*/ .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox { display: flex; flex-direction: row; gap: var(--gap-10); /* margin-bottom: var(--gap-32); */ align-items: center; margin-bottom: 10px; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox input.input-data.form-control { /* border: none; */ margin: 0; width: var(--gap-14); height: var(--gap-14); opacity: 0; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox label.HourOptionBoxLabel { margin: 0; font-size: clamp(10px, var(--fs-17),300px); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox:has(input:checked):before { content: ""; width: var(--gap-14); position: absolute; height: auto; aspect-ratio: 1; background: white; border-radius: 50%; background: var(--primary-button); outline: 2px solid var(--text-field-line-color); outline-offset: 3px; bottom: 50%; transform: translateY(50%); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox:before { content: ""; width: var(--gap-14); position: absolute; height: auto; aspect-ratio: 1; background: white; border-radius: 50%; background: white; outline: 2px solid var(--text-field-line-color); outline-offset: 3px; bottom: 50%; transform: translateY(50%); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div:not(:last-child) { margin-bottom: var(--gap-12); } .shopPop .modal-content { /* width: fit-content; */ } .modal .close { margin: 0; position: absolute; z-index: 2; text-align: right; padding: var(--gap-20); max-width: 1000px !important; left: 50%; transform: translateX(-50%); } .modal .close svg { fill: var(--black); background: none; width: var(--gap-32); height: auto; aspect-ratio: 1; padding: 7px; border: 1px solid rgba(218, 218, 218, 0.60); border-radius: 50%; } } @media(max-width: 1025px) { .modal .modal-content { position: absolute; bottom: -5%; } .modal .modal-content a.close { margin: 0; position: absolute; z-index: 100; width: fit-content; left: 4%; top: 2%; } .modal .modal-content a.close svg { width: 24px; height: 24px; fill: var(--black); background: white; border-radius: 50%; padding: 5px; } .modal .modal-content .modal-body { padding: 0; max-height: 92vh; border-radius: 25px 25px 0 0; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemImages { position: relative; top: unset; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent { padding: 24px 16px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent { padding-bottom: 75px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent #headline h2 { font-size: 20px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .catalogTextContainer #catalogText p { font-size: 14px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection { margin-top: 16px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-ingredients .ingredientGroupSelection .propertyOption:not(:last-child) { margin-bottom: 8px; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-price span.finalPrice.priceAfter:after { content: "₪"; font-size: 80%; font-family: var(--first-font); } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-price span.finalPrice.priceAfter { gap: 4px; font-family: var(--first-font); font-weight: 900; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .item-quantity .quantity-start button { max-width: unset; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent .item-actions .item-quantity .item-quantity-options { max-width: 100%; } .shopPop .modal-body #CatalogModule #CatalogItemView .itemContentWrapper .itemContent #subheadline { margin-bottom: 8px; } .selectDeliveryStep.selectDateOrder { height: calc(100vh - var(--headerHeight)); overflow: auto; padding-bottom: var(--gap-30); } .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent { display: flex; flex-direction: column; } .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:first-child { order: 1; padding-inline: var(--gap-24); padding-top: var(--gap-24); } .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:first-child p { padding: var(--gap-16); background: rgba(218, 218, 218, 0.25); border-radius: 6px; } .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1145 > div { padding-inline: var(--gap-24); } .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1145 > div > label { display: none; } } /**/ /*---------------------------------------------/* SHOP-RELATED /*---------------------------------------------*/ /*-----------------------------------/* GENERAL /*-----------------------------------*/ form.shop-form .spinner { top: 100%; bottom: 0; transform: translate); left: 50%; color: var(--black); } body.ShopRelatedPage #GridPage { margin-top: calc(calc(var(--headerAndBreadCrumpsHeight) + var(--selectedPosData-height))) } @media(min-width: 1026px) { .shopBtn:hover, .shopBtn:focus { color: white; } } /*-----------------------------------/* CHECKOUT-PAGE /*-----------------------------------*/ body.ShopCheckoutPage .cartWrapper { width: 100%; display: flex; margin-top: var(--gap-200); justify-content: center; gap: var(--gap-20); } body.ShopCheckoutPage .cartWrapper .cartSubTotal { margin: 0; float: unset; display: flex; height: fit-content; position: sticky !important; top: 22% !important; } body.ShopCheckoutPage .cartWrapper .cartSubTotal .subTotalInner { height: fit-content; } body.ShopCheckoutPage .checkout-fail-validation { font-size: 13px; width: 41%; float: right; } .shopLayout.checkoutPage { display: flex; margin-top: var(--gap-160); justify-content: center; flex-direction: row-reverse; } .shopLayout.checkoutPage .cartSubTotal, .shopLayout.checkoutPage .cartSubTotal:not(.affix-bottom):not(.affix-top) { position: sticky !important; top: 20% !important; height: fit-content; bottom: unset !important; margin: 0; padding: 0; } .registerFormWrapper.registerPage { background: none; padding: var(--gap-56); } .registerFormWrapper.registerPage #headline { font-size: unset; margin-bottom: var(--gap-12); } .registerFormWrapper.registerPage #headline h1 { } .registerFormWrapper.registerPage #headline h1 p { max-width: unset; margin: 0; font-size: clamp(30px,var(--fs-32),300px); font-family: var(--second-font); } .registerFormWrapper.registerPage > p { max-width: 68%; font-size: clamp(17px,var(--fs-17),300px); color: var(--black); line-height: 1.4; letter-spacing: 0.17px; } .registerFormWrapper.registerPage form#register-form { } .registerFormWrapper.registerPage form#register-form fieldset { display: flex; flex-direction: column; gap: var(--gap-20); } .registerFormWrapper.registerPage form#register-form fieldset > div { padding: 0; } .registerFormWrapper.registerPage form#register-form fieldset > div input { margin: 0; border: 1px solid var(--text-field-line-color); } .registerFormWrapper.registerPage form#register-form fieldset > div label { margin-bottom: var(--gap-8); font-family: var(--first-font); font-weight: unset; font-size: clamp(17px,var(--fs-17),300px); color: var(--gray-text); } .registerFormWrapper.registerPage form#register-form fieldset > div > div { padding: 0; } .registerFormWrapper.registerPage form#register-form .normal-form-comment { padding: revert-layer; margin-top: var(--gap-20); font-size: clamp(14px,var(--fs-14),300px); color: var(--gray-text); } .registerFormWrapper.registerPage form#register-form .normal-form-submit { margin-block: 0; width: 100%; margin-top: var(--gap-20); } .registerFormWrapper.registerPage form#register-form .normal-form-submit input { margin: 0; width: var(--gap-160); height: var(--gap-60); display: block; margin-inline: auto; background: var(--primary-button); border: none; border-radius: 44px; font-size: clamp(17px,var(--fs-17),300px); font-family: var(--second-font); line-height: 1.4; letter-spacing: 0.17px; } @media(min-width: 1026px) { .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .normal-form-submit input { position: absolute; } .registerFormWrapper.registerPage form#register-form .normal-form-submit input:hover { background: var(--primary-button-hover); color: white; } } @media(max-width: 1025px) { body.ShopCheckoutPage .cartWrapper { flex-direction: column; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) { width: 100%; } .registerFormWrapper.registerPage { padding-inline: 12px; margin-bottom: 0; } .registerFormWrapper.registerPage > p { max-width: 99%; font-size: 15px; margin-bottom: var(--gap-24); } .registerFormWrapper.registerPage #headline h1 p { font-size: 20px; } } /**/ /*-----------------------------------/* USER-ACCOUNT-PAGE /*-----------------------------------*/ .shopLayout { display: flex; flex-direction: row-reverse; justify-content: center; } .shopLayout .userProfile { margin: 0; } .shopLayout .loggedInUser.profileSideBar { } .shopLayout .loggedInUser.profileSideBar h4 { } .shopLayout .loggedInUser.profileSideBar h4 span { display: inline; font-family: var(--second-font), var(--first-font); font-weight: 700; font-size: clamp(17px,var(--fs-17),300px); } .shopLayout .loggedInUser.profileSideBar h4 button.loginBoxLogout { font-size: clamp(13px,var(--fs-14),300px); color: var(--gray-text); } .shopLayout .loggedInUser.profileSideBar a.userAction.userAccount.active { background: rgba(218, 218, 218, 0.60); color: var(--black); } .shopLayout .loggedInUser.profileSideBar a.userAction.userAccount.active svg.profile-btn-svg { fill: var(--black); } .shopLayout .loggedInUser.profileSideBar a span { font-size: clamp(15px,var(--fs-17),300px); } .shopLayout .loggedInUser.profileSideBar a.active { background: rgba(218, 218, 218, 0.60); color: var(--black); } .shopLayout .loggedInUser.profileSideBar a.userAction.active svg { fill: var(--black); } .shopLayout .userProfile #headline { font-family: var(--second-font); } .shopLayout .userProfile #headline h1 { } .shopLayout .userProfile #headline h1 svg { display: none; } .shopLayout .userProfile #headline h1 span { font-size: clamp(32px,var(--fs-32),300px); } .shopLayout .userProfile form { background: rgba(218, 218, 218, 0.25); padding: var(--gap-40) var(--gap-20); max-width: 550px; } .shopLayout .userProfile form .normal-form-comment { padding: 0; font-size: clamp(14px,var(--fs-14),300px); color: var(--gray-text); } .shopLayout .userProfile form fieldset { } .shopLayout .userProfile form fieldset > div { } .shopLayout .userProfile form fieldset > div > div { padding: 0; width: 100%; } .shopLayout .userProfile form fieldset > div > div input { font-size: clamp(15px, var(--fs-17), 300px); font-family: var(--first-font); } .shopLayout .userProfile form fieldset > div > div label { font-family: var(--first-font); font-weight: unset; color: var(--gray-text); font-size: clamp(15px,var(--fs-17),300px); } .shopLayout .userProfile form fieldset { } .shopLayout .userProfile form fieldset > div { width: 100%; padding: 0; } .shopLayout .userProfile form fieldset { padding: 0; width: 100%; } .shopLayout .userProfile form fieldset > div input { font-size: clamp(15px, var(--fs-17), 300px); font-family: var(--first-font) !important; } .shopLayout .userProfile form fieldset label { font-family: var(--first-font); font-weight: unset; color: var(--gray-text); font-size: clamp(15px,var(--fs-17),300px); } .shopLayout .userProfile form .normal-form-submit input { background: var(--primary-button); color: var(--white); font-family: var(--second-font); border: none; border-radius: 44px; font-size: clamp(15px,var(--fs-15),300px); height: 46px; } @media(min-width: 1026px) { .shopLayout .cartWrapper.ordersWrapper.userProfile { min-width: 44.271vw; } } @media(max-width: 1025px) { .shopLayout .userProfile #headline h1 span { font-size: 20px; display: block; } .shopLayout .userProfile form fieldset > div > div:has(.selectHolder) { padding: 0; } form.shop-form .form-control:not([type=checkbox]):not([type=submit]):not([type=button]):not([type=radio]) { background: white; border: 1px solid var(--text-field-line-color); } } /**/ /*--------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------/* SIDE CART /*------------------------------------------*/ #headerShopSideBG { z-index: 10000; top: 0; } .headerShop.side-cart, .headerShop.side-cart.active { min-height: unset; background: var(--white) !important; width: 24.6vw; z-index: 11000; top: 0; max-height: 100vh; height: 100vh; } .headerShop.side-cart .cart { padding: var(--gap-24) var(--gap-16); height: 100%; min-height: 100vh; display: flex; flex-direction: column; } .headerShop.side-cart .cart .itemsTableWrapper { /* flex-grow: 1; */ min-height: unset; height: auto; background: inherit; } .headerShop.side-cart .cart .itemsTableWrapper .FreeDeliveryStrip { margin: 0; padding: var(--gap-10) var(--gap-20); border: var(--order-icon-tags) 1px solid; background: rgba(222, 229, 255, 0.40); } .headerShop.side-cart .cart .itemsTableWrapper .FreeDeliveryStrip .FreeDeliverySpan { font-weight: unset; font-size: clamp(12px, var(--fs-15), 100rem); gap: 0 0.4vw; } .headerShop.side-cart .cart .totalSumItems { background: transparent; padding: 0; } .headerShop.side-cart .cart .totalSumItems.top { display: flex; justify-content: space-between; margin-bottom: var(--gap-20); } .headerShop.side-cart .cart .totalSumItems.top .totalSumTitle { width: auto; font-family: var(--second-font); color: var(--black); font-size: clamp(12px, var(--fs-48), 100rem); } .headerShop.side-cart .cart .totalSumItems.top .closeCart { width: max-content; height: max-content; display: flex; } .headerShop.side-cart .cart .totalSumItems.top .closeCart button { width: fit-content; height: fit-content; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(/warehouse/dynamic/489230.svg); } .headerShop.side-cart .cart .totalSumItems.top .closeCart button { background-image: none; } .headerShop.side-cart .cart .totalSumItems.top .closeCart button svg { /* display: none; */ width: 28px; height: 28px; } .headerShop.side-cart .cart .itemsTableWrapper::after { display: none; } .headerShop.side-cart .cart .itemsTableWrapper .cartItemsTable { min-height: unset; height: 100%; display: flex; flex-direction: column; gap: 0; margin: 0; max-height: 26vw; overflow: hidden auto; } .headerShop.side-cart .cart .itemsTableWrapper .cartItemsTable::-webkit-scrollbar-track { display: none; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem { padding: var(--gap-24) 0; display: flex; gap: var(--gap-16); border-bottom: 1px solid var(--gray); } .headerShop.side-cart .cart .itemsTableWrapper .cartItem:first-child { border-top: 1px solid var(--gray); } .headerShop.side-cart .cart .itemsTableWrapper .cartItem::after { display: none; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemName.cartItemsCell { padding: 0; width: auto; height: max-content; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell { padding: 0; width: 100%; display: flex; flex-direction: column; text-align: right; gap: var(--gap-20); margin: 0; color: var(--black); } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemDelete.cartItemsCell { padding: 0; width: max-content; display: flex; right: unset; height: fit-content; transform: unset; position: absolute; left: 0; top: var(--gap-24); z-index: 10; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemName.cartItemsCell a.cartItemPic { width: auto; height: auto; border: unset; background: transparent; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemName.cartItemsCell a.cartItemPic img { position: relative; left: unset; top: unset; transform: unset; max-width: unset; max-height: unset; width: var(--gap-96); height: var(--gap-96); object-fit: cover; border-radius: 0; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .itemName { margin: 0; font-size: clamp(12px, var(--fs-15), 100rem); max-width: 90%; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice { display: flex; flex-direction: column; flex-grow: 1; gap: var(--gap-20); justify-content: flex-end; align-items: flex-start; position: relative; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice div.itemQuantityContainer { width: var(--gap-90); font-size: clamp(12px, var(--fs-15), 1000rem); letter-spacing: unset; height: var(--gap-32); background: var(--white); color: var(--black); border-radius: 0; border: 1px solid var(--gray); } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .itemQuantityContainer > span { font-size: clamp(12px, var(--fs-15), 100rem); width: 33%; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .itemQuantityContainer input[type="number"] { max-width: unset; min-width: unset; width: 100%; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .itemQuantityContainer button { width: 35%; background: transparent; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .itemQuantityContainer button svg { width: var(--gap-8); } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .itemQuantityContainer button svg rect.st0 { fill: var(--black); } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .cartItemPrice.cartItemsCell { font-size: clamp(12px, var(--fs-17), 1000rem); position: absolute; inset-inline-end: 0; bottom: 0; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .cartItemPrice.cartItemsCell .itemBeforeDiscountPrice::after { font-size: 70%; margin-inline-start: 0; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .cartItemPrice.cartItemsCell span.itemBeforeDiscountPrice.hasDiscount { margin-inline-start: 0.3vw; color: var(--text); margin-inline-end: 0; font-size: 100%; display: none; } .headerShop.side-cart .cart .itemsTableWrapper #cartItemsTableCart .cartItem .cartItemQ.cartItemsCell .itemName .cartItemIngredients .ingredientGroupCart { font-size: clamp(11px,var(--fs-13),300px); color: var(--gray-text); } .cartItemsTable .cartItem span.itemBeforeDiscountPrice:before, .cartItemsTable .cartItem span.finalPrice:before, .price:before, .cartSubTotal .totalSumItems span.price:before, span.price:before { font-size: 60%; margin: 0; } .itemBeforeDiscountPrice.hasDiscount:after { transform: unset; } .headerShop.side-cart .cartItemsNavSubTotal { position: relative; bottom: unset; padding: var(--gap-10) 0 0; display: flex; flex-direction: column; gap: var(--gap-10); } .headerShop.side-cart .cartItemsNavSubTotal::after { display: none; } .headerShop.side-cart .cartItemsNavSubTotal .cartBottomText { /* padding: 0; */ border-bottom: 1px solid rgba(218, 218, 218, 0.60); } .headerShop.side-cart .cartItemsNavSubTotal .totalSunAndBottomText { display: flex; flex-direction: column-reverse; gap: var(--gap-20); } .headerShop.side-cart .cartItemsNavSubTotal .cartBottomText p { font-size: clamp(12px, var(--fs-15), 100rem); color: var(--gray-text); line-height: 1.1; } .headerShop.side-cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems { display: flex; flex-direction: column; gap: var(--gap-20); font-size: clamp(12px, var(--fs-17), 100rem) !important; letter-spacing: 0.15px; } .headerShop.side-cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems a.shopBtn { margin: 0; width: 100%; background: transparent; color: var(--black); border-radius: var(--gap-56); padding: 0; font-size: inherit; height: var(--gap-56); transition: 0.3s all ease; border: 1px solid var(--black); display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; } .headerShop.side-cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems a.goToCheckout.shopBtn { background: var(--black); color: var(--white); } .headerShop.side-cart .cartItemsNavSubTotal .totalSumItems { } .headerShop.side-cart .cartItemsNavSubTotal .totalSumItems.priceInfo { display: flex; gap: var(--gap-8); } .headerShop.side-cart .cartItemsNavSubTotal .cartSummary { gap: var(--gap-4); } .headerShop.side-cart .cartItemsNavSubTotal .cartSummary .totalSumItems { } .headerShop.side-cart .cartItemsNavSubTotal .cartSummary .totalSumItems:not(.totalPrice) { font-family: var(--reg); } .cartItemsNavSubTotal span.price:before { font-size: 70%; margin-inline-start: 0; } @media (min-width:1025px) { .headerShop.side-cart .cartItemsNavSubTotal .cartSummary .totalSumItems:not(.totalPrice) { font-size: clamp(12px, var(--fs-15), 1000rem) !important; } } @media (max-width:1024px) { .headerShop.side-cart, .headerShop.side-cart.active { width: calc(100% - 50px); } .headerShop.side-cart .cart .itemsTableWrapper .FreeDeliveryStrip { margin: 0 0 10px; } .headerShop.side-cart .cart .itemsTableWrapper .FreeDeliveryStrip .FreeDeliverySpan { font-size: var(--fs-12); gap: 0 6px; } .headerShop.side-cart .cart .itemsTableWrapper .cartItemsTable { max-height: 40vh; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem { padding: var(--gap-16) 0; gap: var(--gap-16); } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemName.cartItemsCell a.cartItemPic img { width: var(--gap-72); height: var(--gap-72); } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell { gap: 10px; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .itemName { font-size: var(--fs-15); } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice { flex-direction: row; justify-content: space-between; align-items: flex-end; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .cartItemPrice.cartItemsCell { font-size: var(--fs-20); position: relative; left: unset; bottom: unset; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .cartItemPrice.cartItemsCell span.itemBeforeDiscountPrice.hasDiscount { margin-inline-start: 4px; display: none; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .itemQuantityContainer > span { font-size: var(--fs-15); gap: 3px; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemQ.cartItemsCell .quantityAndcartItemPrice .itemQuantityContainer > span svg { width: 10px; } .headerShop.side-cart .cart .itemsTableWrapper .cartItem .cartItemDelete.cartItemsCell { top: var(--gap-20); } .headerShop.side-cart .cart .itemsTableWrapper { overflow: auto; max-height: unset; } .headerShop.side-cart .cart .totalSumItems.top { margin-bottom: var(--gap-24); align-items: center; } .headerShop.side-cart .cart .totalSumItems.top .totalSumTitle { font-size: var(--fs-32); } .headerShop.side-cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems { gap: var(--gap-12); font-size: var(--fs-15) !important; } .headerShop.side-cart .cartItemsNavSubTotal .totalSunAndBottomText .totalSumItems a.shopBtn { height: var(--gap-48); } .headerShop.side-cart .cartItemsNavSubTotal .cartSummary { } .headerShop.side-cart .cartItemsNavSubTotal .totalSumItems { font-size: var(--fs-15) !important; } .headerShop.side-cart .cartItemsNavSubTotal .totalSumItems span.cartItemsQ { margin: 0; } .headerShop.side-cart .cartItemsNavSubTotal .totalSumItems span.price { margin-inline-start: 5px; } .headerShop.side-cart .cartItemsNavSubTotal .cartBottomText p { font-size: 15px; font-family: var(--reg); } .headerShopLogin .userLogin .newUser a.shopBtn { background: none; border: 2px solid var(--primary-button); } } /*------------------------------------------/* NAV QUICK ALERT /*------------------------------------------*/ .navQuickAlert { border: 1px solid var(--gray); display: flex; align-items: center; padding: 0.6vw; z-index: 10000; background: var(--white); top: calc(var(--headerHeight) + 0.6vw) !important; } .navQuickAlert::after { border-bottom: 10px solid var(--gray); } .navQuickAlert::before { border-bottom: 10px solid var(--white); } .navQuickAlert * { font-size: clamp(12px, var(--fs-14), 100rem); } @media(max-width: 1024px) { .navQuickAlert { padding: 10px; top: calc(var(--headerHeight) + var(--gap-16)) !important; } .navQuickAlert * { font-size: var(--fs-15); } } /*------------------------------------------/* USER-LOGIN-POPUP /*------------------------------------------*/ #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn .userLogin { } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn .userLogin .loggedInUser { } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn .userLogin .loggedInUser a { width: 100%; aspect-ratio: unset; padding: var(--gap-10) var(--gap-12); filter: unset; font-size: clamp(15px,var(--fs-15),300px); } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn .userLogin .loggedInUser h4 { direction: rtl; font-family: var(--second-font), var(--first-font); font-weight: 700; background: #F5F5F5; color: var(--black); padding-inline: var(--gap-12); font-size: clamp(15px,var(--fs-15),300px); } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn .userLogin .loggedInUser h4 button.loginBoxLogout { background: none; font-size: clamp(13px,var(--fs-13),300px); font-family: var(--first-font); font-weight: 100; color: var(--gray-text); } #header2 #header-container .header-right-section .header-top.social-links .header-top-right .header-top-left .userBtn.navShopBtn .userLogin .loggedInUser a svg { display: none; } @media(max-width: 1024px) { .userLogin .loggedInUser { } .userLogin .loggedInUser h4 { background: #f6f6f6; color: var(--black); direction: rtl; font-family: var(--first-font); font-weight: 700; font-size: clamp(14px,var(--fs-14),300px); } .userLogin .loggedInUser h4 button.loginBoxLogout { background-image: none !important; font-size: 12px; color: var(--gray-text); font-weight: 100; } .userLogin .loggedInUser a { font-size: 15px; } .userLogin .loggedInUser a svg { display: none; } } @media(min-width: 1025px) { .headerShopLogin .userLogin .existingUser form#navLogin input.shopBtn:hover { background: var(--primary-button-hover); } .headerShopLogin .userLogin .newUser a.registerUser:hover { background: var(--primary-button-hover); } } /*------------------------------------------/* HEADER USER LOGGED IN POPUP /*------------------------------------------*/ #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn { left: unset; inset-inline-end: 0; width: 11.5vw; bottom: unset !important; color: var(--black); top: calc(100% + var(--gap-36)); border: 1px solid var(--black); background: var(--white); border-radius: 0; } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn::after { display: none; } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn a.userAction { font-size: clamp(12px, var(--fs-15), 1000rem); padding: var(--gap-8) var(--gap-16); display: inline-flex; align-items: center; margin: 0; width: 100%; flex-direction: row-reverse; } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn a.userAction::before, #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn a.userAction::after, #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn a.userAction svg { display: none; } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn a.userAction:first-of-type { padding-top: var(--gap-16); } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn a.userAction:last-of-type { padding-bottom: var(--gap-16); } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn h4 { font-size: clamp(12px, var(--fs-15), 1000rem); padding: var(--gap-16); direction: rtl; color: var(--black); background: transparent; text-align: start; border-bottom: 1px solid var(--black); } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn h4 button.loginBoxLogout { font-size: clamp(12px, var(--fs-14), 1000rem); } @media(max-width: 1024px) { #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn { transform: translateX(-50%); top: calc(var(--headerHeight) + var(--gap-16)); width: calc(100vw - var(--gap-32)); bottom: unset !important; inset-inline-end: 50%; right: unset; border: unset; } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn .userLogin .loggedInUser { border: 1px solid var(--black); } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn a.userAction { font-size: var(--fs-15); padding: var(--gap-10) var(--gap-16); direction: ltr; } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn a.userAction:first-of-type { padding-top: var(--gap-20); } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn a.userAction:last-of-type { padding-bottom: var(--gap-20); } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn h4 { font-size: var(--fs-15); } #main-header .header-container .header-left .header-shop-icons .userBtn .headerShopLoginUserLoggedIn h4 button.loginBoxLogout { font-size: var(--fs-14); } } /*------------------------------------------/* SHOPPING CART PAGE /*------------------------------------------*/ .ShopRelatedPage #GridWrapInner { width: 100%; margin: 0 auto; } .shopLayout.cartPage { display: flex; flex-direction: column; align-items: center; direction: rtl; width: 65vw; margin: 0 auto var(--gap-160); } .shopLayout.cartPage #headline { margin: 0 0 var(--gap-40) auto; margin-bottom: var(--gap-40); } .shopLayout.cartPage #headline h1 { font-size: clamp(10px, var(--fs-32), 1000rem); font-family: var(--second-font); } .shopLayout.cartPage .cartWrapper { width: 100%; display: flex; gap: var(--gap-20); margin: 0; } .shopLayout.cartPage .cartWrapper .cartSubTotal { margin: 0; width: calc(22% - var(--gap-10)); padding: 0 0 var(--gap-30); background: var(--white); height: max-content; border-radius: 0; /* border: 1px solid var(--black); */ } .cartItemsTable .items, .cartSubTotal, .cartSubTotal .subTotalTitle { background: transparent; } .shopLayout.cartPage .cartItemsTable { max-width: unset; width: calc(78% - var(--gap-10)); background: var(--white); margin: 0; border-radius: 0; overflow: hidden; } .shopLayout.cartPage .cartItemsTable .cartItemsTitles { background: rgba(218, 218, 218, 0.25); font-weight: unset; } .shopLayout.cartPage .cartItemsTable .cartItemsTitles .cartItemsCell { font-size: clamp(15px, var(--fs-17), 1000rem); padding: var(--gap-20); text-align: center; font-family: var(--second-font); } .shopLayout.cartPage .cartItemsTable .cartItemsTitles .cartItemsCell.cartItemName { width: 40%; text-align: start; } .shopLayout.cartPage .cartItemsTable .cartItemsTitles .cartItemsCell.cartItemQ { width: 15%; } .shopLayout.cartPage .cartItemsTable .cartItemsTitles .cartItemsCell.cartItemPrice { width: 25%; } .shopLayout.cartPage .cartItemsTable .cartItemsTitles .cartItemsCell.cartItemDelete { width: 4%; } .shopLayout.cartPage .cartItemsTable .items { padding: var(--gap-10) var(--gap-20); padding-inline-start: 0; display: flex; flex-direction: column; gap: 0; } .shopLayout.cartPage .cartItemsTable .items .cartItem { display: flex; justify-content: center; align-items: center; gap: var(--gap-10); padding: var(--gap-10) 0; } .shopLayout.cartPage .cartItemsTable .items .cartItem:first-child { } .shopLayout.cartPage .cartItemsTable .items .cartItem::after { display: none; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell { font-size: clamp(12px, var(--fs-17), 1000rem); padding: 0; font-family: var(--first-font); } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName { display: flex; gap: var(--gap-16); align-items: center; width: 40%; font-size: clamp(12px, var(--fs-15), 1000rem); line-height: 1.5; letter-spacing: 0.15px; font-weight: unset; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName a.cartItemPic { width: auto; height: auto; border: unset; background: transparent; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName a.cartItemPic img { position: relative; left: unset; top: unset; transform: unset; max-width: unset; max-height: unset; width: var(--gap-96); height: var(--gap-96); object-fit: cover; border-radius: 0; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName .itemName { margin: 0; max-width: unset; color: var(--black); } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName .itemName .cartItemPrice { display: none !important; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName .itemName a { display: flex; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName .itemName a span { font-size: clamp(15px,var(--fs-15),300px); } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemPrice span.itemBeforeDiscountPrice.price.hasDiscount { font-size: clamp(16px,var(--fs-16),300px); display: none; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ { width: 18%; display: inline-flex; justify-content: center; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity { border: 1px solid var(--gray); overflow: hidden; width: max-content; background-color: transparent; color: var(--black); border-radius: 0; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity .item-quantity-options { background: transparent; width: var(--gap-120); max-width: unset; height: var(--gap-36); border: 1px solid rgba(218, 218, 218, 0.50); border-radius: 44px; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity .item-quantity-options button { border: unset; padding: 0; background: transparent; width: 33.33%; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity .item-quantity-options span.itemQuantityContainer { font-size: clamp(12px, var(--fs-15), 1000rem); width: 33.333%; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity .item-quantity-options span.itemQuantityContainer input[type="number"] { width: 100%; padding: 0; min-width: unset; font-family: var(--first-font); font-size: clamp(14px,var(--fs-14),300px); } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemPrice { display: flex !important; justify-content: center; align-items: center; gap: var(--gap-12); } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemPrice span.finalPrice { display: inline-block; font-family: var(--first-font); font-size: clamp(17px,var(--fs-17),300px); color: var(--black); } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemDelete { width: auto; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemDelete button.deleteBtn { background: transparent; width: var(--gap-24); height: auto; aspect-ratio: 1; background-image: url("https://media.getmood.io/warehouse/dynamic/690124.svg"); background-position: center; background-repeat: no-repeat; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemDelete button.deleteBtn svg { display: none; } .shopLayout.cartPage .cartWrapper .cartSubTotal .subTotalTitle { font-size: clamp(15px, var(--fs-17), 1000rem); padding: var(--gap-20); /* border-bottom: 1px solid var(--black); */ background: rgba(218, 218, 218, 0.25); min-height: var(--gap-64); } .shopLayout.cartPage .cartWrapper .cartSubTotal .subTotalTitle h2 { font-size: 100%; font-weight: unset; line-height: 1; font-family: var(--second-font); color: var(--black); } .shopLayout.cartPage .cartWrapper .cartSubTotal .totalSumItems { padding: 0 var(--gap-16) var(--gap-8); font-size: clamp(14px, var(--fs-17), 1000rem); font-family: var(--first-font); font-weight: unset; } .shopLayout.cartPage .cartWrapper .cartSubTotal .totalSumItems.itemsInCart { padding: var(--gap-30) var(--gap-16) var(--gap-8); } .shopLayout.cartPage .cartWrapper .cartSubTotal .totalSumItems.totalPrice { padding-bottom: 0; } .shopLayout.cartPage .cartWrapper .cartSubTotal .totalSumItems span.price:before { font-size: 70%; } .shopLayout.cartPage .cartWrapper .cartSubTotal .totalSumItems:has(> a.goToCheckout.shopBtn) { padding: 0 var(--gap-16); text-align: center; margin-bottom: var(--gap-16); } .shopLayout.cartPage .cartWrapper .cartSubTotal a.goToCheckout.shopBtn { border: unset !important; margin: var(--gap-40) 0 0; padding: 0 var(--gap-30); background: var(--primary-button); color: var(--white) !important; font-size: clamp(12px, var(--fs-17), 1000rem); letter-spacing: 0.17px; height: var(--gap-48); transition: 0.3s all ease; border-radius: var(--gap-56); display: inline-flex; align-items: center; justify-content: center; width: 100%; font-family: var(--second-font); } .shopLayout.cartPage .cartWrapper .cartSubTotal .cartBottomText { padding: 0 var(--gap-16); } .shopLayout.cartPage .cartWrapper .cartSubTotal .cartBottomText p { font-size: clamp(12px, var(--fs-15), 1000rem); line-height: 1.5; } .shopLayout.cartPage .cartWrapper .cartSubTotal .FreeDeliveryStrip { margin: 0; padding: 0 var(--gap-16) var(--gap-16); } .shopLayout.cartPage .cartWrapper .cartSubTotal .FreeDeliveryStrip .FreeDeliverySpan { font-weight: unset; font-size: var(--fs-14); gap: 0 0.4vw; font-family: var(--first-font); display: block; line-height: 1.5; } @media (min-width:1025px) { .shopLayout.cartPage .cartWrapper .cartSubTotal a.goToCheckout.shopBtn:hover { background: var(--primary-button-hover); } } @media (max-width: 1024px) { body:has(.shopLayout) #GridTop { display: none !important; } .shopLayout:has(.mobile-subTotal) { width: 100% !important; } .shopLayout.cartPage { margin: 0 auto var(--gap-64); margin-top: var(--gap-80); } .shopLayout.cartPage #headline h1 { font-size: 20px; } .shopLayout.cartPage .cartItemsTable { width: 100%; } .shopLayout.cartPage .cartItemsTable .items { padding: var(--gap-10) 0; } .shopLayout.cartPage .cartItemsTable .items .cartItem { gap: var(--gap-4); display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; padding-block: 14px; } .shopLayout.cartPage .cartItemsTable .items .cartItem:not(:last-child) { border-bottom: 1px solid rgba(218, 218, 218, 0.60); } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell { font-size: var(--fs-15); } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName { width: 90%; gap: var(--gap-16); line-height: 1; font-size: var(--fs-15); letter-spacing: unset; align-items: flex-start; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName a.cartItemPic img { width: var(--gap-80); height: var(--gap-80); border-radius: 4px; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemName .itemName { flex-grow: 1; display: inline-flex; flex-direction: column; height: 100%; gap: 11px; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ { width: max-content; margin: 0; margin-top: auto; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity .item-quantity-options { width: var(--gap-90); height: var(--gap-32); } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity button { height: 33px; width: 33px; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity button svg { width: 7px; height: 7px; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity > span { height: 33px; width: 44px; font-size: 1.4rem; min-width: unset; font-weight: 700; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemQ .item-quantity > span input { width: 100%; font-size: inherit !important; padding: 0; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemPrice { width: max-content; padding-inline-start: var(--gap-96); position: absolute; left: 0; bottom: 13%; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemDelete { left: 0; top: 5%; transform: unset; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemPrice span.finalPrice { font-size: 14px; } .shopLayout.cartPage .cartItemsTable .items .cartItemsCell.cartItemPrice span.itemBeforeDiscountPrice.price.hasDiscount { font-size: 13px; } .shopLayout.cartPage .cartWrapper { flex-direction: column; align-items: center; padding: 0; } .shopLayout .cartSubTotal .mobile-subTotal { z-index: 20; top: var(--headerHeight) !important; background: var(--white); padding: var(--gap-10) var(--gap-16); min-height: unset; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gray); )(); } .shopLayout .cartSubTotal .mobile-subTotal .totalSumItems { font-size: var(--fs-15) !important; padding: 0 !important; position: relative; left: unset; top: unset; transform: unset; width: max-content; } .shopLayout .cartSubTotal .mobile-subTotal a.goToCheckout.shopBtn { max-width: unset; width: max-content; min-width: var(--gap-120); border-radius: unset; height: var(--gap-48); font-size: var(--fs-15); margin: 0; padding: 0 var(--gap-16); } .shopLayout.cartPage .cartWrapper .cartSubTotal { width: 100%; padding: 0; } .shopLayout.cartPage .cartWrapper .cartSubTotal .subTotalTitle { font-size: var(--fs-32); padding: var(--gap-20) var(--gap-16); margin-bottom: var(--gap-20); } .shopLayout.cartPage .cartWrapper .cartSubTotal .subTotalTitle h2 { font-size: 20px; } .shopLayout.cartPage .cartWrapper .cartSubTotal .totalSumItems { font-size: var(--fs-15) !important; padding: 0 var(--gap-16) !important; } .shopLayout.cartPage .cartWrapper .cartSubTotal .totalSumItems.itemsInCart { padding: 0; } .shopLayout.cartPage .cartWrapper .cartSubTotal .totalSumItems.subtotal { margin: 0; padding: 14px var(--gap-16) !important; } .shopLayout.cartPage .cartWrapper .cartSubTotal .totalSumItems:has(> a.goToCheckout.shopBtn) { margin: var(--gap-24) 0; } .shopLayout.cartPage .cartWrapper .cartSubTotal a.goToCheckout.shopBtn { height: var(--gap-48); font-size: var(--fs-15); margin: 0; padding: 0 var(--gap-20); } .shopLayout.cartPage .cartWrapper .cartSubTotal .offers { display: none; } .shopLayout.cartPage .cartWrapper .cartSubTotal .cartBottomText { padding: 0; } .shopLayout.cartPage .cartWrapper .cartSubTotal .cartBottomText p { font-size: var(--fs-15); } .shopLayout.cartPage .cartWrapper .cartSubTotal .mobile-subTotal .totalSumItems { padding: 0 !important; } .shopLayout.cartPage .cartWrapper .cartSubTotal .mobile-subTotal a.goToCheckout.shopBtn { width: max-content; height: var(--gap-40); } } /*------------------------------------------/* CHECKOUT PAGE /*------------------------------------------*/ body.ShopRelatedPage .registerFormWrapper.registerPage { margin-top: var(--headerHeight); } body.ShopRelatedPage .registerFormWrapper.registerPage #text1 a.shopBtn { font-size: clamp(15px, var(--fs-15), 300px); background: var(--primary-button); font-family: var(--second-font); padding: var(--gap-12) var(--gap-20); border-radius: 50px; transition: 0.3s ease all; color: white; border: none; display: flex !important; justify-content: center; margin-top: var(--gap-20) !important; margin-inline: auto; } .shopLayout.checkoutPage { display: flex; flex-direction: row; width: 65vw; margin: var(--gap-64) auto var(--gap-160); direction: rtl; flex-wrap: wrap; gap: 0 var(--gap-52); justify-content: flex-start; } .shopLayout.checkoutPage #headline { margin: 0 0 var(--gap-40) auto; width: 100%; text-align: start; } .shopLayout.checkoutPage #headline h1 { font-size: clamp(12px, var(--fs-32), 1000rem); font-family: var(--second-font); } .shopLayout.checkoutPage .cartWrapper { width: 100%; display: flex; gap: var(--gap-20); } .shopLayout.checkoutPage .cartSubTotal, .shopLayout.checkoutPage .cartSubTotal:not(.affix-bottom):not(.affix-top) { margin: 0; width: calc(22% - var(--gap-10)); padding: 0; background: rgba(218, 218, 218, 0.25); height: max-content; top: calc(var(--headerHeight) + var(--gap-20)) !important; position: sticky; float: unset; z-index: 10; border-radius: 0; overflow: hidden; /* border: 1px solid var(--black); */ } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .subTotalTitle { padding: var(--gap-20); /* border-bottom: 1px solid var(--black) !important; */ background: transparent; font-size: clamp(12px, var(--fs-24), 1000rem); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .subTotalTitle h2 { font-size: clamp(15px,var(--fs-17),300px); font-weight: unset; line-height: 1; font-family: var(--second-font); color: var(--black); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .subTotalTitle a.goToCart { display: none; } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .totalSumItems { padding: 0 var(--gap-16) var(--gap-16); font-size: clamp(12px, var(--fs-15), 1000rem); font-family: var(--first-font); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .totalSumItems.itemsInCart { padding: var(--gap-30) var(--gap-16) var(--gap-16); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .totalSumItems.totalPrice { font-family: var(--first-font); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .totalSumItems.totalPrice::before { margin: var(--gap-24) 0; /* border-color: var(--gray); */ } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .totalSumItems:has(a#checkoutLinkSunTotal) { display: none; } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .CheckoutItems { display: none; } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .FreeDeliveryStrip { margin: 0; padding: 0; margin-bottom: var(--gap-16); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .FreeDeliveryStrip .FreeDeliverySpan { font-weight: unset; font-size: var(--fs-12); gap: 0 0.4vw; font-family: var(--first-font); width: 100%; justify-content: space-between; padding: 0 var(--gap-16) var(--gap-16); display: block; } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .cartBottomText { font-size: var(--fs-12); line-height: 1.5; padding: 0 var(--gap-16) var(--gap-16); } .shopLayout.checkoutPage .DeliveryDetails { max-width: unset; width: calc(75% - var(--gap-20)); background: transparent; margin: 0; padding: 0; float: unset !important; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form { margin: 0; padding: 0; color: var(--black); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper { background: var(--white); margin: 0 0 var(--gap-30); display: grid; overflow: hidden; padding: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutTitle { padding: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutTitle h3 { background: transparent; font-weight: unset; line-height: 1; padding: var(--gap-20) 0; /* border-bottom: 1px solid var(--black); */ font-size: clamp(12px, var(--fs-20), 1000rem); font-family: var(--second-font); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutTitle h3 svg { display: none; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutTitle h4 { font-size: clamp(12px, var(--fs-15), 1000rem); padding: 0; margin: var(--gap-16) auto 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.personalDetailsWrapper .row:has(.checkoutInputsWrapper) { padding: var(--gap-20) 0; display: flex; flex-direction: column; gap: var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.personalDetailsWrapper .checkoutInputsWrapper { padding: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.personalDetailsWrapper .checkoutInputsWrapper:has(input[name="userPhone"]) { /* display: none; */ } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.personalDetailsWrapper .checkoutInputsWrapper > div { padding: 0; margin-bottom: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutInputsWrapper > div label { font-weight: unset; co; color: var(--gray-text); font-size: clamp(12px, var(--fs-17), 1000rem); margin-bottom: var(--gap-8); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutInputsWrapper > div input:not([type=submit], [type=checkbox]) { background: var(--white) !important; border: 1px solid var(--text-field-line-color) !important; border-radius: unset !important; color: var(--text) !important; /* padding: 0; */ box-shadow: none; font-size: clamp(12px, var(--fs-15), 1000rem) !important; margin: 0 !important; font-family: var(--first-font); max-width: 24.479vw; /* height: var(--gap-52) !important; */ } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutTitle.deliveryError { /* padding: 0 var(--gap-20); */ } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper { padding: var(--gap-20) 0; display: flex; flex-direction: column; gap: var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper.onlyOneOption { display: none; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer { padding: 0; font-size: clamp(12px, var(--fs-15), 1000rem); width: 50%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox { background: var(--white); padding: var(--gap-12); border-radius: 0; width: 100%; display: flex; align-items: center; color: var(--black); flex-direction: row-reverse; border: 1px solid var(--text-field-line-color); border-radius: 4px; margin-top: var(--gap-16); height: var(--gap-52); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox:first-child { margin-top: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox label.deliveryOptionLabel { padding: 0; padding-inline-start: var(--gap-30); font-weight: unset; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox .radioCircle { width: var(--gap-20); height: var(--gap-20); aspect-ratio: 1; background: transparent; box-shadow: unset; border: 1px solid var(--text-field-line-color); right: unset; inset-inline-start: var(--gap-12); pointer-events: none; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox.active { background: var(--black); color: white; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox.active img { right: unset; z-index: 1; inset-inline-start: var(--gap-12); width: var(--gap-20); height: var(--gap-20); border: 1px solid var(--black); border-radius: 50%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox.active .radioCircle { opacity: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) { /* display: none; */ width: 50%; padding: 0; float: none; /* background: var(--footer-status-bar); */ } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) .selectedPosData { background: rgb(218 218 218 / 25%); border-radius: 6px; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) .selectedPosData button.openDeliverySelectionPop { display: inline-flex; gap: 12px; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) .selectedPosData button.openDeliverySelectionPop :is(span,p) { font-size: clamp(10px,var(--fs-16),300px); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) a.edit-delivery-button { vertical-align: middle; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper { padding: 0; display: flex; flex-direction: column; gap: var(--gap-20); width: 50%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper .selectBoxWrapper { padding: 0; margin: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper :is(.delivery-input-container, .google-street-field) { padding: 0; margin-bottom: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper .delivery-input-container label { font-weight: unset; color: var(--black); font-size: clamp(12px, var(--fs-15), 1000rem); margin-bottom: var(--gap-8); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper :is(.delivery-input-container, .google-street-field) input:not([type=submit], [type=checkbox]) { background: var(--white) !important; border: 1px solid var(--text-field-line-color); border-radius: unset !important; color: var(--black) !important; padding: 0 var(--gap-16); box-shadow: none; font-size: clamp(12px, var(--fs-15), 1000rem) !important; margin: 0 !important; height: var(--gap-52) !important; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper .google-street-field svg { top: 50%; transform: translateY(-50%); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper { padding: 0; display: flex; align-items: center; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper label { max-width: unset; font-weight: unset; font-size: clamp(12px, var(--fs-15), 1000rem); margin: 0; color: var(--text); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper input[type="checkbox"] { width: var(--gap-20); height: var(--gap-20); background-size: var(--gap-12); background-repeat: no-repeat; background-position: center; margin-inline-end: var(--gap-8); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .deliveryDetailsTimeTable .HourOptionBox { display: flex; align-items: center; margin: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .deliveryDetailsTimeTable .HourOptionBox label.HourOptionBoxLabel { font-weight: unset; color: var(--black); font-size: clamp(12px, var(--fs-15), 1000rem); margin-bottom: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .deliveryDetailsTimeTable .HourOptionBox input { width: var(--gap-20); height: var(--gap-20); aspect-ratio: 1; background: transparent; box-shadow: unset; border: 1px solid var(--black); margin-inline-end: var(--gap-8); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper { padding: var(--gap-20) 0; width: 50%; display: flex; flex-direction: column; gap: var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .billingDetails > div { padding: 0; margin-top: var(--gap-30); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .billingDetails > div label { font-weight: unset; color: var(--black); font-size: clamp(12px, var(--fs-15), 1000rem); margin-bottom: var(--gap-8); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .billingDetails input:not([type=submit], [type=checkbox]) { background: var(--white) !important; border: 1px solid var(--text-field-line-color); border-radius: unset !important; color: var(--black) !important; padding: 0 var(--gap-16); box-shadow: none; font-size: clamp(12px, var(--fs-15), 1000rem) !important; margin: 0 !important; height: var(--gap-52) !important; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper { padding: 0; display: grid; gap: var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper .radio-container { margin: 0; padding: 0; gap: 9px; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper .radio-container label { max-width: unset; font-weight: unset; font-size: clamp(12px, var(--fs-15), 1000rem); margin: 0; color: var(--black); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper .radio-container input[type="radio"] { width: var(--gap-20); height: var(--gap-20); aspect-ratio: 1; background: transparent; box-shadow: unset; border: 1px solid var(--text-field-line-color); margin-inline-end: var(--gap-8); border-radius: 50% !important; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper { padding: var(--gap-20) 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper .couponDetails { width: max-content; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper > div { padding: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper label { font-weight: unset; font-size: clamp(12px, var(--fs-15), 1000rem); margin: 0 0 var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper input#coupon { height: var(--gap-52); /* padding: 0; */ border: 1px solid var(--text-field-line-color); border-radius: 4px; box-shadow: unset; color: var(--black); font-size: clamp(12px, var(--fs-15), 1000rem); max-width: unset; width: var(--gap-300); font-family: var(--first-font); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper button.couponButton { background: var(--primary-button); color: var(--white); font-size: clamp(12px, var(--fs-15), 1000rem); font-family: var(--second-font); height: var(--gap-48); letter-spacing: 0.18px; min-width: var(--gap-160); width: max-content; max-width: unset; padding: 0 var(--gap-30); display: inline-flex; align-items: center; border: none !important; justify-content: center; border-radius: var(--gap-48); transition: 0.3s all ease; margin-inline-start: var(--gap-18); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.commentDetailsWrapper .checkoutInputsWrapper { padding: var(--gap-20) 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.commentDetailsWrapper .checkoutInputsWrapper .textareaBoxWrapper { padding: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.commentDetailsWrapper .checkoutInputsWrapper .textareaBoxWrapper label { font-weight: unset; font-size: clamp(12px, var(--fs-15), 1000rem); margin-bottom: var(--gap-8); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.commentDetailsWrapper .checkoutInputsWrapper .textareaBoxWrapper textarea { height: var(--gap-120); border: 1px solid var(--text-field-line-color); border-radius: 4px; margin: 0; padding: var(--gap-10); font-size: clamp(12px, var(--fs-15), 1000rem); box-shadow: unset; width: auto; aspect-ratio: 4.5/1.2; color: var(--gray-text); font-family: var(--first-font); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.paymentOptionsWrapper .row { padding-bottom: var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.paymentOptionsWrapper .dateBoxWrapper { margin: 0; padding: var(--gap-20) 0 0; display: inline-flex; width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.paymentOptionsWrapper .dateBoxWrapper input[type="radio"] { width: clamp(12px, var(--fs-15), 1000rem); height: clamp(12px, var(--fs-15), 1000rem); aspect-ratio: 1; background: transparent; box-shadow: unset; border: 1px solid var(--black); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.paymentOptionsWrapper .dateBoxWrapper label { max-width: unset; font-weight: unset; font-size: clamp(12px, var(--fs-15), 1000rem); margin: 0; color: var(--black); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .selectHolder select { background: var(--white) !important; border-radius: 4px !important; color: var(--black) !important; padding: 0 var(--gap-16); box-shadow: none; font-size: clamp(12px, var(--fs-15), 1000rem) !important; margin: 0 !important; height: var(--gap-52); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .pickUpBranches { margin: 0; padding: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .pickUpBranches .selectBoxWrapper { margin: 0; padding: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper span.error { font-size: var(--fs-12); left: unset; inset-inline-end: var(--gap-8); top: 0; line-height: 1; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper label.error { font-size: var(--fs-12); font-weight: unset; line-height: 1.3; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutShopComment { padding: 0; display: flex; width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutShopComment p { font-size: clamp(12px, var(--fs-15), 1000rem); line-height: 1.5; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutShopComment > div { padding: 0; width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutShopComment p img { max-width: 28vw; margin: var(--gap-20) 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .normal-form-comment { padding: 0; font-size: clamp(12px, var(--fs-15), 1000rem); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form div:has( > .normal-form-submit) { padding: 0; text-align: center; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .normal-form-submit { margin: 0; width: max-content; float: unset; margin-inline: auto; position: relative; width: fit-content; background: var(--primary-button); color: var(--white); font-size: clamp(12px, var(--fs-17), 1000rem); letter-spacing: 0.15px; height: var(--gap-56); min-width: var(--gap-300); padding: 0 var(--gap-30); display: inline-flex; align-items: center; border: unset !important; justify-content: center; border-radius: var(--gap-56); transition: 0.3s all ease; font-family: var(--second-font); margin-top: var(--gap-12); float: none; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .normal-form-submit input { background: var(--primary-button); color: var(--white); font-size: clamp(12px, var(--fs-17), 1000rem); letter-spacing: 0.15px; height: var(--gap-56); min-width: var(--gap-300);: max-content; padding: 0 var(--gap-30); display: inline-flex; align-items: center; border: unset !important; justify-content: center; border-radius: var(--gap-56); transition: 0.3s all ease; font-family: var(--second-font); margin: 0; } @media (min-width:1025px) { form.shop-form .form-control:not([type=checkbox]):not([type=submit]):not([type=button]):not([type=radio]) { background: white; border: 1px solid var(--text-field-line-color); color: var(--black); font-size: clamp(17px,var(--fs-17),300px); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .selectedPosData { padding-inline: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper > div { padding-inline: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .selectedPosData .switch-delivery-btn button { gap: 8px; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .selectedPosData .switch-delivery-btn button span:first-child { display: none; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .normal-form-submit input:is(:hover,:focus) { background: var(--primary-button-hover); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper button.couponButton:hover { background: var(--primary-button-hover); } body.ShopRelatedPage .registerFormWrapper.registerPage #text1 a.shopBtn:hover { background: var(--primary-button-hover); } } @media (max-width:1024px) { .shopLayout.checkoutPage:has(.DeliveryDetails) { flex-direction: column; } .shopLayout.checkoutPage .DeliveryDetails { width: 100%; } .shopLayout.checkoutPage:has(.DeliveryDetails) #headline { text-align: start; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper { margin: 0 0 var(--gap-10); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutTitle h3 { font-size: var(--fs-18); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutTitle h4 { font-size: var(--fs-15); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.personalDetailsWrapper .row:has(.checkoutInputsWrapper) { padding: 0; gap: var(--gap-16); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.personalDetailsWrapper .checkoutInputsWrapper > div label { font-size: var(--fs-15); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.personalDetailsWrapper .checkoutInputsWrapper > div input:not([type=submit], [type=checkbox]) { height: var(--gap-48) !important; font-size: var(--fs-15) !important; font-family: var(--first-font); padding-inline: 10px; max-width: unset; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper { padding: var(--gap-20) 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer { font-size: var(--fs-15); width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox label.deliveryOptionLabel { font-size: var(--fs-15); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox label.deliveryOptionLabel::before { width: var(--gap-20); height: var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryOptionsWrapper .checkoutInputsWrapper .deliverymethodsContainer .deliveryOptionBox .radioCircle { width: var(--gap-20); height: var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper { padding: 0; gap: var(--gap-16); width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper .delivery-input-container label { font-size: var(--fs-15); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .checkoutInputsWrapper :is(.delivery-input-container, .google-street-field) input:not([type=submit], [type=checkbox]) { height: var(--gap-48) !important; font-size: var(--fs-15) !important; padding: 0 var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper .deliveryDetailsTimeTable .checkoutInputsWrapper { padding: 0 var(--gap-16) var(--gap-20); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) { width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) .switch-delivery-btn { padding: 0; display: flex; flex-direction: column; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) .selectedPosData { padding-inline: 20px; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.deliveryDetailsWrapper:not(:has(.deliveryDetails.open)) .selectedPosData button.openDeliverySelectionPop span.selectedDelivery { display: none; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper { gap: var(--gap-16); padding: var(--gap-20) 0 0; width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .billingDetails input:not([type=submit], [type=checkbox]) { height: var(--gap-48) !important; font-size: var(--fs-15) !important; padding: 0 var(--gap-16); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .billingDetails > div label { font-size: var(--fs-15); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper { gap: var(--gap-16); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper .radio-container { align-items: center; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper .radio-container input { margin-top: 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper .radio-container input[type="radio"] { width: var(--gap-20); height: var(--gap-20); /* margin: 0; */ } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.billingDetailsWrapper .checkoutInputsWrapper .checkBoxWrapper .radio-container label { font-size: var(--fs-15); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper .couponDetails { display: flex; flex-direction: column; width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper label { font-size: var(--fs-15); margin: 0 0 var(--gap-16); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper input#coupon { height: var(--gap-48); font-size: var(--fs-15) !important; padding: 0 var(--gap-16); width: 100%; max-width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.couponDetailsWrapper .checkoutInputsWrapper button.couponButton { min-width: unset; width: var(--gap-150); height: var(--gap-48); margin: var(--gap-16) 0 0; font-size: var(--fs-15); padding: 0 var(--gap-16); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.commentDetailsWrapper .checkoutInputsWrapper { padding: var(--gap-20) 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.commentDetailsWrapper .checkoutInputsWrapper .textareaBoxWrapper label { font-size: var(--fs-15); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.commentDetailsWrapper .checkoutInputsWrapper .textareaBoxWrapper textarea { height: var(--gap-80); padding: var(--gap-10); font-size: var(--fs-15) !important; aspect-ratio: unset; width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper.paymentOptionsWrapper .dateBoxWrapper { padding: var(--gap-20) var(--gap-16) 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutInputsWrapper > div label { font-size: 15px; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .checkoutInputsWrapper > div input:not([type=submit], [type=checkbox]) { max-width: 100%; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutFormWrapper .selectHolder select { height: var(--gap-48) !important; font-size: var(--fs-15) !important; padding: 0 var(--gap-16); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutShopComment p { font-size: var(--fs-15); } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .checkoutShopComment p img { max-width: 100%; margin: var(--gap-20) 0; } .shopLayout.checkoutPage .DeliveryDetails form#checkout-form .normal-form-comment { font-size: var(--fs-15); } .shopLayout.checkoutPage:has(.DeliveryDetails) .checkoutBtnMobile { margin: 0; } .shopLayout.checkoutPage:has(.DeliveryDetails) .checkoutBtnMobile .normal-form-submit { padding: 0; margin: 0; } .shopLayout.checkoutPage:has(.DeliveryDetails) .checkoutBtnMobile .normal-form-submit button.shopBtn { padding: 0 var(--gap-30); height: var(--gap-48); font-size: var(--fs-15); color: var(--white); border: unset; border-radius: var(--gap-48); margin: var(--gap-24) 0 0; background: var(--primary-button); font-family: var(--second-font); } .shopLayout.checkoutPage .cartSubTotal, .shopLayout.checkoutPage .cartSubTotal:not(.affix-bottom):not(.affix-top) { width: 100%; margin-top: var(--gap-30); position: relative; top: unset !important; } .shopLayout.checkoutPage .cartSubTotal .mobile-subTotal a.goToCart { font-size: var(--fs-15); height: var(--gap-40); padding: 0 var(--gap-16); max-width: unset; width: max-content; min-width: var(--gap-120); display: inline-flex; align-items: center; justify-content: center; text-decoration: unset; background: var(--primary-button); font-family: var(--second-font); color: var(--white); border-radius: var(--gap-56); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .subTotalTitle { background: var(--white); padding-inline-start: 0; } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .subTotalTitle h2 { font-size: var(--fs-32); color: var(--black); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .totalSumItems { font-size: var(--fs-15); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .totalSumItems.itemsInCart { padding: var(--gap-20) var(--gap-16) var(--gap-16); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .totalSumItems.totalPrice::before { margin: 0 0 var(--gap-16); } .shopLayout.checkoutPage .cartSubTotal .subTotalInner .cartBottomText { font-size: var(--fs-14); } } /*------------------------------------------/* AFTER PAYMENT PAGE /*------------------------------------------*/ body:has(#payment-method-cash) #PageBreadCrumps { position: absolute; } body:has(#payment-method-cash) #GridWrapInner { padding: 0; display: grid; place-content: center; width: calc(var(--app-width) - var(--gap-40)); height: calc(var(--app-height) - var(--headerHeight)); } body:has(#payment-method-cash) #headline { margin: 0; } body:has(#payment-method-cash) #headline h1 { font-size: clamp(2rem, var(--fs-64), 1000rem); margin: 0 0 var(--gap-24); letter-spacing: 0.64px; font-family: var(--second-font); } #payment-method-cash { display: flex; justify-content: center; } #payment-method-cash .row > div { padding: 0; font-size: clamp(12px, var(--fs-17), 1000rem); margin: 0; letter-spacing: 0.18px; line-height: 1.3; } #payment-method-cash .total-price { font-size: inherit; line-height: 1.5; } #payment-method-cash a#CashButton { width: max-content; max-width: unset; border-radius: var(--gap-56); margin: var(--gap-24) auto 0; background-color: var(--primary-button); height: var(--gap-52); display: inline-flex; font-size: clamp(12px, var(--fs-17), 1000rem); transition: 0.3s all ease; letter-spacing: 0.15px; padding: 0 var(--gap-32); align-items: center; justify-content: center; border: unset; color: var(--white); font-family: var(--second-font); } body:has(.shopThankYouMsg) #PageBreadCrumps { position: absolute; } body:has(.shopThankYouMsg) #GridWrapInner { padding: 0; min-height: calc(var(--app-height) - var(--headerHeight)); display: grid; place-content: center; width: calc(var(--app-width) - var(--gap-40)); } .shopThankYouMsg { font-size: clamp(12px, var(--fs-17), 1000rem); letter-spacing: 0.18px; line-height: 1.3; } .shopThankYouMsg #headline { margin: 0; font-size: 100%; } .shopThankYouMsg #headline h1 { font-size: clamp(2rem, var(--fs-64), 1000rem); margin: 0 0 var(--gap-24); } .shopThankYouMsg .subheadline { font-size: inherit; } .shopThankYouMsg a.shopBtn { width: max-content; max-width: unset; border-radius: var(--gap-56); background-color: var(--primary-button); font-family: var(--second-font); height: var(--gap-52); display: inline-flex !important; font-size: clamp(12px, var(--fs-17), 1000rem); transition: 0.3s all ease; letter-spacing: 0.15px; padding: 0 var(--gap-32); align-items: center; justify-content: center; border: unset; color: var(--white); margin: var(--gap-24) auto 0 !important; } @media (min-width:1025px) { #payment-method-cash a#CashButton:is(:hover,:focus) { background: var(--primary-button-hover); } #payment-method-cash a#CashButton:hover { background: var(--primary-button-hover); } .shopThankYouMsg a.shopBtn:is(:hover,:focus) { background: var(--black); } } @media (max-width:1024px) { body:has(#payment-method-cash) #GridWrapInner { width: 100%; padding: 0 var(--gap-20); margin: 0; } body:has(#payment-method-cash) #headline h1 { font-size: var(--fs-32); margin-bottom: var(--gap-16); } #payment-method-cash .row > div { font-size: var(--fs-15); } #payment-method-cash a#CashButton { min-width: unset; height: var(--gap-48); margin-top: var(--gap-24); font-size: var(--fs-15); padding: 0 var(--gap-24); } body:has(.shopThankYouMsg) #GridWrapInner { width: 100%; padding: 0 var(--gap-20); margin: 0; } .shopThankYouMsg { font-size: var(--fs-15); } .shopThankYouMsg #headline h1 { font-size: var(--fs-32); font-family: var(--second-font); } .shopThankYouMsg a.shopBtn { min-width: unset; height: var(--gap-48); margin-top: var(--gap-24) !important; font-size: var(--fs-15); padding: 0 var(--gap-24); } } /*------------------------------------------/* HEADER LOGIN POPUP /*------------------------------------------*/ /*body:not(.user-connected) #header2 #header-container .userBtn.navShopBtn { display: none; }*/ .headerShopLogin { top: calc(var(--headerHeight) + 0.7vw) !important; width: 52.1vw; background: var(--white); z-index: 1000; } body:has(.headerShopLogin.active) #SiteContainer::before { opacity: 0.3; } .headerShopLogin .userLogin { padding: var(--gap-64); display: flex; gap: 7.5vw; position: relative; border: 1px solid var(--gray); } .headerShopLogin .userLogin .closeUserPop { right: var(--gap-16); top: var(--gap-16); display: flex; } .headerShopLogin .userLogin .closeUserPop button { font-size: clamp(1rem, var(--fs-14), 1000rem); border-bottom: 1px solid; color: var(--black); } .headerShopLogin .userLogin .existingUser { padding: 0; } .headerShopLogin .userLogin .existingUser::before { display: none; } .headerShopLogin .userLogin .newUser { padding: 0; display: flex; flex-direction: column; align-items: center; } .headerShopLogin .userLogin .subheadline { margin: 0 0 var(--gap-30); text-align: center; } .headerShopLogin .userLogin .subheadline h2 { font-size: clamp(12px, var(--fs-28), 1000rem); font-family: var(--second-font); font-weight: 800; } .headerShopLogin .userLogin .existingUser form#navLogin input:not([type=checkbox], [type=submit], [type=button], [type=radio]) { height: var(--gap-56); border: 1px solid var(--text-field-line-color); box; box-shadow: unset; width: 100%; border-radius: 4px; color: var(--gray-text); padding: var(--gap-8); font-size: clamp(12px, var(--fs-15), 1000rem); margin-bottom: var(--gap-20); } .headerShopLogin .userLogin .existingUser form#navLogin input:not([type=checkbox], [type=submit], [type=button], [type=radio])::placeholder { color: var(--text) } .headerShopLogin .userLogin .existingUser form#navLogin .loginFormInput.RememberMeBtn { display: inline-flex; align-items: center; } .headerShopLogin .userLogin .existingUser form#navLogin .loginFormInput.RememberMeBtn input { box-shadow: unset; -webkit-appearance: auto; accent-color: var(--gray); } .headerShopLogin .userLogin .existingUser form#navLogin .loginFormInput.RememberMeBtn label { font-size: clamp(10px, var(--fs-12), 1000rem); color: var(--gray-text); } .headerShopLogin .userLogin .existingUser form#navLogin .loginFormInput.forgotPass { display: inline-flex; } .headerShopLogin .userLogin .existingUser form#navLogin .loginFormInput.forgotPass button { font-size: clamp(10px, var(--fs-12), 1000rem); text-decoration: underline; } .headerShopLogin .userLogin .loginOTPCodeInputs { flex-wrap: wrap; justify-content: center; } .headerShopLogin .userLogin .existingUser form#navLogin input.shopBtn { background: var(--primary-button); font-family: var(--second-font); color: var(--white); font-size: clamp(12px, var(--fs-17), 1000rem); letter-spacing: 0.15px; height: var(--gap-56); padding: 0 var(--gap-20); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gap-56); transition: 0.3s all ease; border: unset; } .headerShopLogin .userLogin .existingUser form#navLogin .formError.error { font-size: var(--fs-12); left: 0.4vw; top: 0.4vw; line-height: 0.8; } form#navLogin .formMsgs { position: relative; bottom: unset; left: unset; transform: unset; padding: 10px 0 0; text-align: center; } form#navLogin .formMsgs span.formAlert { font-size: var(--fs-12); left: unset; transform: unset; position: relative; right: unset; bottom: unset; top: unset; } form#navLogin .formMsgs span.formAlert.successLogIn { color: var(--black); } .headerShopLogin .userLogin .newUserText { margin: 0; font-size: clamp(12px, var(--fs-17), 1000rem); text-align: center; line-height: 1.5; color: var(--gray-text); } .headerShopLogin .userLogin .newUser a.registerUser { max-width: unset; background: var(--primary-button); color: var(--white); font-family: var(--second-font); font-size: clamp(12px, var(--fs-17), 1000rem); letter-spacing: 0.15px; height: var(--gap-56); width: 100%; min-width: 10.6vw; padding: 0 var(--gap-20); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gap-56); transition: 0.3s all ease; border: none; margin: var(--gap-24) auto 0; margin-top: auto; } @media (min-width:1025px) { .headerShopLogin .userLogin::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1px; height: calc(100% - 6.876vw); background: var(--gray); transform: translate(-50%,-50%); } } @media (max-width:1024px) { .headerShopLogin { width: calc(100% - 30px); top: calc(var(--headerHeight) + 15px) !important; } .headerShopLogin .userLogin { padding: var(--gap-30); display: flex; gap: 0; background: transparent; flex-direction: column; } .headerShopLogin .userLogin .closeUserPop { right: 10px; top: 10px; } .headerShopLogin .userLogin .closeUserPop button { font-size: 15px; font-family: var(--first-font); } .headerShopLogin .userLogin .subheadline { margin: 0 0 26px; } .headerShopLogin .userLogin .subheadline h2 { font-size: 20px; letter-spacing: 0.34px; } .headerShopLogin .userLogin .existingUser { padding: 0 0 var(--gap-30); margin: 0 0 var(--gap-30); border-bottom: 1px solid rgba(218, 218, 218, 0.60); } .headerShopLogin .userLogin .existingUser form#navLogin input:not([type=checkbox], [type=submit], [type=button], [type=radio]) { height: var(--gap-40); font-size: var(--fs-15) !important; } .headerShopLogin .userLogin .existingUser form#navLogin .loginFormInput.RememberMeBtn label { font-size: 14px; } .headerShopLogin .userLogin .existingUser form#navLogin .loginFormInput.forgotPass button { font-size: 12px; } .headerShopLogin .userLogin .existingUser form#navLogin input.shopBtn { height: var(--gap-48); font-size: var(--fs-15) !important; } .headerShopLogin .userLogin .newUser::before { display: none; } .headerShopLogin .userLogin .newUserText { font-size: 1.4rem; } .headerShopLogin .userLogin .newUser a.shopBtn { background: var(--order-icon-tags); border: none; color: var(--black); height: var(--gap-48); margin: 0; min-width: auto; width: 100%; font-size: var(--fs-15); } } /*------------------------------------------/* CHECKOUT LOGIN PAGE /*------------------------------------------*/ .shopLayout.checkoutPage:has(.checkout-login) { gap: 0; width: 52vw; } .shopLayout.checkoutPage:has(.checkout-login) #headline { text-align: center; } .shopLayout.checkoutPage .checkout-login { max-width: unset; margin: 0; padding: var(--gap-56) var(--gap-64); display: flex; gap: var(--gap-120); position: relative; background: var(--white); border: 1px solid var(--text-field-line-color); border-radius: 4px; } .shopLayout.checkoutPage .checkout-login .registeredUser { padding: 0; } .shopLayout.checkoutPage .checkout-login .registeredUser::before { display: none; } .shopLayout.checkoutPage .checkout-login .newUser { padding: 0; display: flex; flex-direction: column; align-items: center; } .shopLayout.checkoutPage .checkout-login .subheadline { margin: 0 0 var(--gap-30); text-align: center; } .shopLayout.checkoutPage .checkout-login .subheadline h2 { font-size: clamp(12px, var(--fs-28), 1000rem); font-family: var(--second-font); } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin input:not([type=checkbox], [type=submit], [type=button], [type=radio]) { height: var(--gap-56); padding: var(--gap-8); font-size: clamp(12px, var(--fs-15), 1000rem); margin-bottom: var(--gap-20); border: 1px solid var(--text-field-line-color); box-shadow: unset; width: 100%; border-radius: 4px; color: var(--gray-text); } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin .loginFormInput.RememberMeBtn { display: inline-flex; align-items: center; } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin .loginFormInput.RememberMeBtn label { font-size: clamp(10px, var(--fs-12), 1000rem); color: var(--gray-text); } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin .loginFormInput.forgotPass { display: inline-flex; } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin .loginFormInput.forgotPass button { font-size: clamp(10px, var(--fs-12), 1000rem); text-decoration: underline; } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin input.shopBtn { background: var(--primary-button); font-family: var(--second-font); color: var(--white); font-size: clamp(12px, var(--fs-17), 1000rem); letter-spacing: 0.15px; height: var(--gap-56); padding: 0 var(--gap-20); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gap-56); transition: 0.3s all ease; border: unset; } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin .formError.error { font-size: var(--fs-12); left: 0.4vw; top: 0.4vw; line-height: 0.8; } .shopLayout.checkoutPage .checkout-login .newUserText { margin: 0; font-size: clamp(12px, var(--fs-15), 1000rem); text-align: center; line-height: 1.5; letter-spacing: 0.15px; color: var(--gray-text); } .shopLayout.checkoutPage .checkout-login .newUser a.shopBtn { max-width: unset; background: var(--primary-button); color: var(--white); font-family: var(--second-font); font-size: clamp(12px, var(--fs-17), 1000rem); letter-spacing: 0.15px; height: var(--gap-56); width: 100%; min-width: 10.6vw; padding: 0 var(--gap-20); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gap-56); transition: 0.3s all ease; border: none; margin: var(--gap-24) auto 0; margin-top: auto; } .shopLayout.checkoutPage .checkout-login .newUser a.checkoutLogin { margin: 0; font-size: clamp(12px, var(--fs-15), 1000rem); letter-spacing: 0.15px; color: var(--black); } .shopLayout.checkoutPage .checkout-login .newUser > span { margin: var(--gap-20) 0; font-size: clamp(12px, var(--fs-15), 100rem); } @media (min-width: 1025px) { .shopLayout.checkoutPage .checkout-login::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--gray); height: calc(100% - (var(--gap-56) * 2)); width: 1px; } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin input.shopBtn:is(:hover,:focus) { background: var(--primary-button-hover); } .shopLayout.checkoutPage .checkout-login .newUser a.shopBtn:is(:hover,:focus) { background: var(--primary-button-hover); color: var(--white); } } @media (max-width: 1024px) { .shopLayout.checkoutPage:has(.checkout-login) { width: 100%; } .shopLayout.checkoutPage { width: 100%; gap: 0; margin: 0 auto var(--gap-64); margin-top: var(--gap-90); } .shopLayout.checkoutPage #headline { margin: 0 auto; text-align: center; } .shopLayout.checkoutPage #headline h1 { font-size: var(--fs-32); margin-bottom: var(--gap-20); color: var(--black); } .shopLayout.checkoutPage .checkout-login { padding: var(--gap-30); gap: 0; flex-direction: column-reverse; } .shopLayout.checkoutPage .checkout-login .subheadline { margin: 0 0 var(--gap-24); } .shopLayout.checkoutPage .checkout-login .subheadline h2 { font-size: 20px; } .shopLayout.checkoutPage .checkout-login .registeredUser { padding: 0 0 var(--gap-30); margin: 0 0 var(--gap-30); border-bottom: 1px solid var(--gray); } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin input:not([type=checkbox], [type=submit], [type=button], [type=radio]) { height: var(--gap-48); font-size: var(--fs-15) !important; } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin .loginFormInput.RememberMeBtn label { font-size: 14px; } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin .loginFormInput.forgotPass button { font-size: 12px; } .shopLayout.checkoutPage .checkout-login .registeredUser form#checkoutLogin input.shopBtn { height: var(--gap-48); padding: 0 var(--gap-30); font-size: var(--fs-15) !important; letter-spacing: 0.17px; } .shopLayout.checkoutPage .checkout-login .newUser::before { display: none; } .shopLayout.checkoutPage .checkout-login .newUserText { font-size: var(--fs-15); } .shopLayout.checkoutPage .checkout-login .newUser a.shopBtn { height: var(--gap-48); padding: 0 var(--gap-30); margin: var(--gap-20) 0 0; min-width: auto; width: 100%; font-size: var(--fs-15); letter-spacing: 0.17px; background: var(--order-icon-tags); color: var(--black); } .shopLayout.checkoutPage .checkout-login .newUser a.checkoutLogin { margin: 0; font-size: var(--fs-15); } .shopLayout.checkoutPage .checkout-login .newUser > span { font-size: var(--fs-15); } } /*------------------------------------------/* PERSONAL INFO PAGES /*------------------------------------------*/ @media (max-width:1024px) { .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) { padding: 25px var(--gap-16); width: 100%; gap: var(--gap-10); margin: 0 auto var(--gap-72); } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile { width: 100%; border: unset; border-radius: unset; } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile #headline { padding: var(--gap-24) var(--gap-16); margin-bottom: 4px; text-align: center; min-height: unset; /* border: 1px solid var(--black); */ height: unset; } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile #headline h1 { font-size: 20px; display: block; text-align: right; } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper { padding: var(--gap-24) var(--gap-16); /* border: 1px solid var(--black); */ /* display: flex; */ /* flex-direction: column; */ /* align-items: center; */ /* justify-content: center; */ } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper:has(.noItemsYet) { display: flex; flex-direction: column; align-items: center; justify-content: center; } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper fieldset label { font-size: var(--fs-15); padding: 0; color: #222; } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper fieldset input:not([type=submit], [type=checkbox]) { font-size: var(--fs-15) !important; height: var(--gap-48) !important; } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper .normal-form-comment { font-size: var(--fs-15); } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper .normal-form-submit { width: 100%; } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper .normal-form-submit input { padding: 0 var(--gap-24); width: 100%; height: var(--gap-48); min-width: unset; font-size: var(--fs-15) !important; margin-top: var(--gap-20); font-family: var(--first-font); } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper .formMsgs h3 { font-size: var(--fs-15); } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper .noItemsYet h2 { font-size: var(--fs-20); line-height: 1.1; } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper .noItemsYet a.shopBtn { height: var(--gap-48); font-size: var(--fs-15); min-width: unset; padding: 0 var(--gap-30); max-width: unset; display: flex; align-items: center; justify-content: center; background: var(--primary-button); border: none; border-radius: 50px; } .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper .itemsList { margin: 0 auto; display: grid; grid-template-columns: repeat(2,1fr); align-items: center; border: unset; width: 100%; } :is(div, #CatalogModule) .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage) .userProfile .registerFormWrapper .itemsList .newCatalogItemBox.catalogItemBox .catalogItemBoxInner .item-box-image-container:has(.item-quantity.active) .productLabel.wishlist { bottom: calc(100% - (var(--gap-36) + var(--gap-8))); } } /*------------------------------------------/* PERSONAL ORDERS /*------------------------------------------*/ .shopLayout:has(> .loggedInUser) .userProfile .orders { max-width: unset; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem { margin: 0; background: #F6F6F6; padding: var(--gap-40); position: relative; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem:first-child:has(+ .orderItem)::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: var(--gray); height: 1px; width: calc(100% - 4vw); } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem { display: flex; gap: var(--gap-40); justify-content: space-between; padding-bottom: var(--gap-40); } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem::after { display: none; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem .cartItemsCell { padding: 0; width: max-content; display: flex; flex-direction: column; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem .cartItemsCell span { font-size: clamp(12px, var(--fs-15), 1000rem); } .shopLayout .userProfile #headline span.display-order-count { margin-top: 0; font-family: var(--first-font); font-size: clamp(13px,var(--fs-13),300px); } .shopLayout .userProfile:has(.orderFirstDetails) { width: 100%; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem .orderDate.cartItemsCell { } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem .cartItemsCell span:last-child { font-size: clamp(17px,var(--fs-17),300px); } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem .cartItemsCell span:first-child { font-size: clamp(12px, var(--fs-15), 1000rem); font-weight: unset; margin-bottom: 10px; font-family: var(--second-font); } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem { padding: 0; display: flex; gap: var(--gap-32); justify-content: space-between; align-items: center; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-images { width: max-content; display: flex; gap: var(--gap-10); flex-wrap: wrap; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-images .orderItemImg { margin: 0; width: var(--gap-96); height: var(--gap-96); border: unset; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 0; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-images .orderItemImg img { max-width: unset; max-height: unset; position: relative; left: unset; top: unset; transform: unset; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-images .orderItemImg:last-child:after { content: ""; width: 100%; height: 100%; display: block; position: absolute; background: var(--black); opacity: 0.2; border-radius: 4px; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-actions { text-align: center; gap: var(--gap-16); width: max-content; display: flex; flex-direction: column; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-actions :is(a.openOrder, button.addOrderToCart) { background: var(--primary-button); color: var(--white); font-size: clamp(12px, var(--fs-15), 1000rem); letter-spacing: 0.15px; height: var(--gap-40); min-width: var(--gap-200); padding: 0 var(--gap-24); display: inline-flex; align-items: center; justify-content: center; font-family: var(--second-font); border-radius: var(--gap-56); transition: 0.3s all ease; border: unset; margin: 0; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-actions a.openOrder { background: none; color: var(--black); border: 1px solid var(--primary-button); } .shopLayout:has(> .loggedInUser) .userProfile.noItemsYet .cartItemsTable.orders .items h3 { margin: var(--gap-20) auto 0; font-size: clamp(12px, var(--fs-17), 1000rem); color: var(--black); } .shopLayout:has(> .loggedInUser).singleOrderPage #headline > span { font-size: clamp(12px, var(--fs-15), 100rem); color: var(--black); margin-top: var(--gap-16); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderFirstDetails { background: var(--white); padding: var(--gap-40) var(--gap-40) var(--gap-30); margin: 0; flex-direction: row; align-items: center; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderFirstDetails .order-details-container { gap: var(--gap-16); font-size: clamp(12px, var(--fs-15), 100rem); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderFirstDetails .order-details-container .orderDetail { font-size: inherit; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderFirstDetails .order-details-container .orderDetail strong { font-weight: unset; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderFirstDetails .order-actions-container button.addOrderToCart { padding: 0 var(--gap-30); display: inline-flex; align-items: center; justify-content: center; border: unset; font-size: clamp(15px, var(--fs-15), 300px); background: var(--primary-button); font-family: var(--second-font); padding: var(--gap-12) var(--gap-20); border-radius: 50px; transition: 0.3s ease all; color: white; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper { margin: 0; max-width: unset; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items { background: var(--white); margin: 0; padding: 0 var(--gap-40); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .subheadline { margin-bottom: var(--gap-30); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .subheadline h2 { font-size: clamp(12px, var(--fs-15), 100rem); font-weight: unset; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable { max-width: unset; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .itemsTitles { font-weight: unset; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .itemsTitles .cartItemsCell { font-family: var(--second-font); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItemsCell { font-size: clamp(12px, var(--fs-15), 1000rem); padding: var(--gap-24) 0; font-family: var(--reg); font-weight: unset; margin: 0; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItemsCell.cartItemPrice { width: 18%; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItemsCell.cartItemPrice span.finalPrice { gap: 5px; flex-direction: row-reverse; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem::before, .shopLayout:is(.userAccountPage, .orderHistory, .userUpdatePasswordPage, .wishListPage).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem::after { display: none; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem .cartItemsCell.cartItemName { line-height: 1.5; padding: var(--gap-10) 0; display: flex; width: 100%; gap: var(--gap-16); align-items: center; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem .cartItemsCell.cartItemName .cartItemPic { width: auto; height: auto; border: unset; background: transparent; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem .cartItemsCell.cartItemName .cartItemPic img { position: relative; left: unset; top: unset; transform: unset; max-width: unset; max-height: unset; width: var(--gap-96); height: var(--gap-96); border-radius: unset; object-fit: cover; border-radius: 0; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem .cartItemsCell.cartItemName .itemName { margin: 0; max-width: unset; fon; font-family: var(--reg); font-weight: initial; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .orderMoreDetails { margin: 0; padding: var(--gap-30) var(--gap-40) var(--gap-40); background: var(--white); text-align: start; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .orderMoreDetails > div { padding: 0; font-size: clamp(12px, var(--fs-15), 1000rem); line-height: 1.5; letter-spacing: 0.15px; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .orderMoreDetails > div .subheadline { margin: 0 0 var(--gap-10); border: unset; padding: 0; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .orderMoreDetails > div .subheadline h2 { font-size: inherit; font-family: var(--second-font); letter-spacing: 0.15px; text-align: inherit; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .orderMoreDetails > div strong { font-weight: unset; } @media(min-width: 1025px) { .shopLayout:has(> .loggedInUser).singleOrderPage .orderFirstDetails .order-actions-container button.addOrderToCart:is(:hover, :focus) { background: var(--primary-button-hover); color: var(--white); } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-actions :is(a.openOrder, button.addOrderToCart):hover { background: var(--primary-button-hover); color: white; } .shopLayout .userProfile .row:has(.normal-form-submit) > div { width: 100%; display: flex; justify-content: center; } .shopLayout .userProfile form .normal-form-submit input:hover { background: var(--primary-button-hover); } } @media(max-width: 1024px) { .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem { padding: var(--gap-24) var(--gap-16); border: 1px solid var(--gray); border-radius: 0; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem:not(:first-child) { margin-top: var(--gap-10); } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem { gap: var(--gap-40) 0; padding-bottom: var(--gap-40); flex-wrap: wrap; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem .cartItemsCell { align-items: flex-start; gap: 6px; width: 50%; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem .cartItemsCell span { font-size: var(--fs-15); } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .topOrderItem .cartItemsCell span:first-child { font-size: var(--fs-15); margin: 0; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem { gap: var(--gap-20); padding: 0; flex-direction: column; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-images { width: 100%; flex-wrap: nowrap; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-images .orderItemImg { } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-actions { margin-top: 0; width: 100%; } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-actions :is(a.openOrder, button.addOrderToCart) { height: 45px; font-size: var(--fs-15); width: 100%; min-width: unset; /* border: none; */ /* font-family: var(--first-font); */ } .shopLayout:has(> .loggedInUser) .userProfile.noItemsYet .cartItemsTable.orders .items h3 { font-size: var(--fs-15); } .shopLayout:has(> .loggedInUser) .userProfile .orders .orderItem .bottomOrderItem .order-actions a.openOrder { border: none; background: var(--secondery-button-hover); } .shopLayout .userProfile #headline span.display-order-count { display: none; } .shopLayout:has(> .loggedInUser).singleOrderPage #headline > span { font-size: var(--fs-15); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderFirstDetails { padding: var(--gap-24) var(--gap-16); flex-direction: column-reverse; gap: var(--gap-16); border: 1px solid var(--gray); border-radius: 0; margin-bottom: var(--gap-10); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderFirstDetails .order-details-container { font-size: var(--fs-15); gap: var(--gap-6); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderFirstDetails .order-actions-container button.addOrderToCart { height: var(--gap-48); font-size: var(--fs-15); width: 100%; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper { border: 1px solid var(--gray); border-radius: 0; overflow: hidden; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items { padding: 0 var(--gap-16); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .subheadline { margin: var(--gap-24) 0; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .subheadline h2 { font-size: var(--fs-15); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItemsCell.cartItemPrice { width: 100%; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .itemsTitles { display: none; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem { padding: 0; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem .cartItemName.cartItemsCell { font-size: var(--fs-15); align-items: flex-start; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem .cartItemName.cartItemsCell .cartItemPic img { width: 90px; height: 90px; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem .cartItemsCell.cartItemName .itemName .item-quantity { font-size: var(--fs-15); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItem .cartItemsCell.cartItemName .itemName .item-quantity svg { width: 10px; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItemsCell.cartItemPrice > .price { display: block; margin: 0; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .order-items .cartItemsTable .cartItemsCell { padding: var(--gap-4) 0; font-size: var(--fs-15); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .orderMoreDetails { padding: var(--gap-24) var(--gap-16); display: flex; flex-direction: column; gap: var(--gap-16); } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .orderMoreDetails > div { font-size: var(--fs-15); width: 100%; } .shopLayout:has(> .loggedInUser).singleOrderPage .orderDetailsWrapper.cartWrapper.ordersWrapper .orderMoreDetails > div .subheadline { margin: 0 0 var(--gap-6); line-height: 1; } } /*--------------------------------------/* WISHLIST PAGE /*--------------------------------------*/ #wishlist-container .itemsList { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-10); } #wishlist-container .itemsList::before { display: none; } #wishlist-container .itemsList .catalogItemBox { background: white; width: 100%; } @media (min-width:1025px) { } @media (max-width: 1024px) { #wishlist-container .itemsList { display: grid; grid-template-columns: repeat(1,1fr); gap: var(--gap-10); } #wishlist-container .itemsList .catalogItemBox .catalogItemBoxInner .item-box-image-container .productLabel.wishlist button.wishListBtn { width: 25px; height: 25px; padding: 6px; } } /*--------------------------------------/* CONTENT PAGE /*--------------------------------------*/ #ContentRegularModule :is(.MainContent, #text2) { width: 43%; margin-inline: auto; text-align: right; } #ContentRegularModule .MainContent > * { text-align: right; } #ContentRegularModule .MainContent > #headline { font-size: unset; } #ContentRegularModule .MainContent > #headline h1 { font-size: clamp(32px,var(--fs-32),300px); font-weight: bold; } #ContentRegularModule .MainContent > #text1 { margin: 0; font-size: 18px; } @media (min-width:1025px) { } @media (max-width: 1024px) { #ContentRegularModule .MainContent { width: 95%; } } /*--------------------------------------/* CONTENT PAGE - TEXT ONLY /*--------------------------------------*/ body.text-only #SiteGrid #GridPage { padding-block: var(--gap-40) var(--gap-80); } @media (min-width:1025px) { } @media (max-width: 1024px) { body.text-only #SiteGrid #GridPage { padding-top: 0; } #ContentRegularModule :is(.MainContent, #text2) { width: 100%; } } /*---------------------------------------/* SELECT DELIVERY POP /*---------------------------------------*/ .selectDeliveryPop .close-modal-wrapper { top: calc(0px - var(--gap-48)); } .selectDeliveryPop .close-modal-wrapper a.close { width: var(--gap-34); height: auto; aspect-ratio: 1; padding: 0; background: white; border-radius: 50%; padding: var(--gap-8); border: 1px solid rgba(218, 218, 218, 0.60); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06); } .selectDeliveryPop .close-modal-wrapper a.close svg { padding: 0; width: 18px; height: auto; aspect-ratio: 1; border: none; } .shopPop.selectDeliveryPop .modal-body { max-width: max(25.625vw,453px) !important; border-radius: 8px; max-height: 80vh; overflow: auto; } .shopPop.selectDeliveryPop .modal-body > div { display: block !important; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDeliveryBtns { padding-inline: var(--gap-32); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryBtnsInner { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryBtnsInner h2.firstStepHeadline.delivery-pop-title { margin: 0; font-size: clamp(18px,var(--fs-20),300px); font-family: var(--first-font); padding-block: var(--gap-40) 0; color: var(--black); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryBtnsInner .selectDeliveryBtns-wrapper { padding-block: var(--gap-32); gap: var(--gap-20); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryBtnsInner .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper { flex: 1; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryBtnsInner .selectDeliveryBtns-wrapper button { width: 100%; border-radius: 4px; padding: var(--gap-32); background: white; color: var(--black); border: 1px solid rgba(218, 218, 218, 0.60); font-size: clamp(17px,var(--fs-17),300px); font-family: var(--first-font); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryBtnsInner .selectDeliveryBtns-wrapper button svg { display: none; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions .delivery-back-wrapper { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions .delivery-back-wrapper h2.delivery-pop-title { margin: 0; font-size: clamp(18px, var(--fs-20), 300px); font-family: var(--first-font); padding-block: var(--gap-40) 0; color: var(--black); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions #GoogleStreet { padding: var(--gap-32); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions #googleAPISearchAddress button.selectDeliveryBtn { font-size: clamp(15px, var(--fs-17), 300px); background: var(--primary-button); font-family: var(--second-font); padding: var(--gap-14) var(--gap-24); border-radius: 50px; transition: 0.3s ease all; color: white; width: unset; min-width: var(--gap-160); border: none; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions #GoogleStreet .DeliveryFields { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions #GoogleStreet .DeliveryFields .google-street-field.google-street-address { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions #GoogleStreet .DeliveryFields .google-street-field.google-street-address input#location-input { height: var(--gap-50); padding: var(--gap-14); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions #GoogleStreet .DeliveryFields .google-street-field.google-street-address svg { top: 50%; transform: translateY(-50%); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions .btns-wrapper { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: var(--gap-20) var(--gap-32); background: #f8f8f8; border-top: 1px solid rgba(218, 218, 218, 0.60); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions .btns-wrapper a.delivery-back-btn { position: static; transform: unset; display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-8); font-family: var(--second-font); color: var(--gray-text); font-size: clamp(15px,var(--fs-17),300px); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions .btns-wrapper div#googleAPISearchAddress { margin: 0; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails h2.delivery-pop-title { margin: 0; font-size: clamp(18px, var(--fs-20), 300px); font-family: var(--first-font); padding-block: var(--gap-40) 0; color: var(--black); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectPickUpPoint ul.pickUpPoints { margin: 0; padding: 0; padding-block: var(--gap-32); padding-inline: var(--gap-32); flex-wrap: nowrap; gap: var(--gap-10); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectPickUpPoint ul.pickUpPoints li.pickUpPoint { width: 100%; padding: 0; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectPickUpPoint ul.pickUpPoints li.pickUpPoint a { width: 100%; border-radius: 4px; padding: var(--gap-32); background: white; color: var(--black); border: 1px solid rgba(218, 218, 218, 0.60); font-size: clamp(17px, var(--fs-17), 300px); font-family: var(--first-font); box-shadow: none; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectPickUpPoint .btns-wrapper { display: flex; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectPickUpPoint .btns-wrapper a.delivery-back-btn { position: static; display: flex; align-items: center; flex-direction: row-reverse; justify-content: center; padding: var(--gap-20) var(--gap-32); width: 100%; transform: unset; background: #F8F8F8; gap: var(--gap-8); font-family: var(--second-font); border-top: 1px solid rgba(218, 218, 218, 0.60); color: var(--gray-text); font-size: clamp(15px,var(--fs-17),300px); min-height: var(--gap-93); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions .selectBoxWrapper { padding: var(--gap-32); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions .selectBoxWrapper .selectHolder select { padding-block: var(--gap-14); padding-inline: var(--gap-16); height: unset; font-size: clamp(14px,var(--fs-17),300px); appearance: none; -webkit-appearance: none; background-image: url("https://media.getmood.io/warehouse/dynamic/708420.svg"); background-repeat: no-repeat; background-position: left 1rem center; /* move left by increasing value */ background-size: 10px; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder .delivery-back-wrapper { padding: var(--gap-20) var(--gap-32); border-bottom: 1px solid rgba(218, 218, 218, 0.60); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder .delivery-back-wrapper h2.delivery-pop-title { margin: 0; color: var(--black); font-size: clamp(18px,var(--fs-20),300px); font-family: var(--second-font); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent { padding-bottom: var(--gap-32); display: flex; flex-direction: column; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper { padding-inline: var(--gap-32); /* border: none; */ margin-bottom: 0; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen { max-width: unset; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .bootstrap-datetimepicker-widget { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker { border: none; padding-top: var(--gap-32); padding-inline: 0; padding-bottom: 0; margin-bottom: var(--gap-32); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed thead { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed thead tr:first-child { border: none; margin-bottom: var(--gap-40); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed thead tr:last-child { /* border-bottom: 1px solid var(--Color-Base-colors-stroke-light, rgba(218, 218, 218, 0.60)); */ color: #808080; gap: var(--gap-20); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr:first-child > * { /* padding-top: var(--gap-32); */ } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed thead tr:last-child > * { padding-bottom: var(--gap-12); padding-top: 0; height: auto; /* aspect-ratio: 1; */ align-content: center; font-size: clamp(14px,var(--fs-14),300px); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr:not(:last-child) > * { padding-bottom: var(--gap-12); padding: 0; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr > td.active { z-index: 1000; color: var(--white); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr > td.active::before { background: #22A0FA; width: var(--gap-44); height: auto; aspect-ratio: 1; top: 50%; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr:not(:last-child) > td.disabled.day { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr:not(:last-child) > td.disabled.day::before { top: 40%; width: var(--gap-32); height: auto; aspect-ratio: 1; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr:not(:last-child) > td:hover::before { top: 50%; width: var(--gap-44); height: auto; aspect-ratio: 1; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed thead tr:first-child th { /* padding-bottom: var(--gap-40); */ display: block; padding: 0; font-size: clamp(18px,var(--fs-20),300px); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr > * { height: auto; border: none; aspect-ratio: 1; width: var(--gap-44) !important; font-size: clamp(15px, var(--fs-17), 300px); font-family: var(--first-font); color: var(--black); flex: 1; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr > *::before { width: var(--gap-44); height: auto; aspect-ratio: 1; /* opacity: 0; */ } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr > td.day.new { opacity: 0; pointer-events: none; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed tbody tr:not(:last-child) > td { display: flex; align-items: center; justify-content: center; width: var(--gap-44); /* font-size: clamp(15px,var(--fs-17),300px); */ /* font-family: var(--first-font); */ } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed thead tr:first-child th.picker-switch { pointer-events: none; color: var(--black); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div { padding-inline: var(--gap-32); padding-bottom: var(--gap-10); max-height: var(--gap-80); overflow: auto; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox { display: flex; flex-direction: row; /* margin: 0; */ gap: var(--gap-10); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox input[type="radio"].form-control { border: 0px !important; width: var(--gap-24); height: auto; aspect-ratio: 1; opacity: 0; margin: 0; display: flex; max-height: var(--gap-24); z-index: 30000; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox label { font-size: clamp(15px,var(--fs-17),300px); color: var(--black); margin: 0; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox:before { content: ""; width: var(--gap-24); height: auto; aspect-ratio: 1; position: absolute; z-index: 1; background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688120.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; bottom: 50%; transform: translateY(50%); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox:has(input:checked) { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox:has(input:checked):before { background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688119.svg"); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox:not(:last-child) { margin-bottom: var(--gap-10); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed thead tr:first-child th span.glyphicon::before { background-position: center; background-repeat: no-repeat; background-size: auto; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed thead tr:first-child th span.glyphicon.glyphicon-chevron-right::before { background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688128.svg"); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper .DateTimePickerOpen .datepicker table.table-condensed thead tr:first-child th span.glyphicon.glyphicon-chevron-left::before { background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688127.svg"); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder .btns-wrapper { position: sticky; bottom: 0; width: 100%; height: fit-content; display: flex; flex-direction: row-reverse; justify-content: space-between; padding: var(--gap-20) var(--gap-32); align-items: center; background: #f8f8f8; border: 1px solid var( rgba(218, 218, 218, 0.60)); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder .btns-wrapper a.delivery-back-btn { position: static; transform: unset; display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-8); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder .btns-wrapper a.delivery-back-btn p { font-family: var(--second-font); font-size: clamp(15px,var(--fs-17),300px); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder .btns-wrapper button.selectDeliveryBtn.selectDeliveryBtn-Delivery { font-size: clamp(15px, var(--fs-17), 300px); background: var(--primary-button); font-family: var(--second-font); padding: var(--gap-14) var(--gap-24); border-radius: 50px; transition: 0.3s ease all; color: white; border: none; width: var(--gap-160); } .selectDeliveryStep .selectPickUpPoint:has(.delivery-pop-change-titles) { padding: var(--gap-32); } .selectDeliveryStep .selectPickUpPoint .delivery-pop-change-titles { margin: 0; padding: 0; border: none; } .selectDeliveryStep .selectPickUpPoint .delivery-pop-change-titles h2.delivery-pop-title { font-size: clamp(18px, var(--fs-20), 300px); font-family: var(--first-font); padding-block: 0 var(--gap-20); color: var(--black); } .selectDeliveryStep .selectPickUpPoint .delivery-pop-change-content { margin-bottom: var(--gap-32); } .selectDeliveryStep .selectPickUpPoint .delivery-pop-change-content ul.missingCartItemsList { margin: 0; padding: 0; list-style: none; text-align: center; } .selectDeliveryStep .selectPickUpPoint .delivery-pop-change-content h3 { font-size: clamp(12px,var(--fs-16),300px); margin-block: var(--gap-12); } .selectDeliveryStep .selectPickUpPoint .selectDeliveryBtns-wrapper { flex-wrap: nowrap; gap: var(--gap-20); } .selectDeliveryStep .selectPickUpPoint .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper { margin: unset; } .selectDeliveryStep .selectPickUpPoint .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper button { width: 100%; border-radius: 4px; padding: var(--gap-32) var(--gap-10); background: white; color: var(--black); border: 1px solid rgba(218, 218, 218, 0.60); font-size: clamp(17px, var(--fs-17), 300px); font-family: var(--first-font); } .datepicker-days .table-condensed { border-collapse: separate; /* make sure table layout isn’t collapsed */ border-spacing: 0; /* we’ll handle spacing manually */ width: 100%; } .datepicker-days .table-condensed thead tr { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 0px; /* space between day names */ } .datepicker-days .table-condensed tbody tr { display: flex; justify-content: center; gap: var(--gap-20); /* space between days */ margin-bottom: var(--gap-12); /* vertical spacing between weeks */ } .datepicker-days .table-condensed tbody tr:first-child { /* margin-top: var(--gap-32); */ } .datepicker-days .table-condensed tbody tr:last-child { margin-bottom: var(--gap-32); display: none; } .datepicker-days .table-condensed th.dow { /* flex: 1; */ text-align: center; padding: 10px 0; /* background-color: #f2f2f2; */ border-radius: 8px; width: 44px; } .datepicker-days .table-condensed td.day { /* flex: 1; */ text-align: center; padding: 12px 0; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .datepicker-days .table-condensed td.day.disabled { opacity: 0.4; cursor: not-allowed; } .datepicker-days .table-condensed td.weekend { color: #d9534f; } @media (min-width:1025px) { .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder .btns-wrapper button.selectDeliveryBtn.selectDeliveryBtn-Delivery:hover { background: var(--primary-button-hover); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions #googleAPISearchAddress button.selectDeliveryBtn:hover { background: var(--primary-button-hover); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > .col-xs-12:first-child { /* display: none; */ order: 1; text-align: start; padding-inline: var(--gap-32); border-radius: 10px; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > .col-xs-12:first-child p { background: rgba(218, 218, 218, 0.25); padding: var(--gap-16); font-size: clamp(12px,var(--fs-14),300px); line-height: 1.3; letter-spacing: 0.28px; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .selectBoxWrapper > label:first-child { display: none; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child { } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div { padding-inline: var(--gap-32); } /* .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div > label { display: none; }*/ .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox { display: flex; flex-direction: row; gap: var(--gap-10); /* margin-bottom: var(--gap-32); */ align-items: center; margin-bottom: 10px; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox input.input-data.form-control { /* border: none; */ margin: 0; width: var(--gap-14); height: var(--gap-14); opacity: 0; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox label.HourOptionBoxLabel { margin: 0; font-size: clamp(10px, var(--fs-17),300px); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox:has(input:checked):before { content: ""; width: var(--gap-14); position: absolute; height: auto; aspect-ratio: 1; background: white; border-radius: 50%; background: var(--primary-button); outline: 2px solid var(--text-field-line-color); outline-offset: 3px; bottom: 50%; transform: translateY(50%); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox:before { content: ""; width: var(--gap-14); position: absolute; height: auto; aspect-ratio: 1; background: white; border-radius: 50%; background: white; outline: 2px solid var(--text-field-line-color); outline-offset: 3px; bottom: 50%; transform: translateY(50%); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div:not(:last-child) { margin-bottom: var(--gap-12); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div:not(:last-child) label { margin-bottom: var(--gap-12); } } @media (max-width: 1024px) { #header2 .selectDeliveryProcess { box-shadow: none; position: absolute; top: calc(101%); width: 100%; padding: 0; z-index: 1; } .selectDeliveryProcess { background: var(--white); } .selectDeliveryProcess .selectDeliveryBtns-wrapper { gap: var(--gap-12); flex-wrap: nowrap; flex-direction: column; padding: 32px 24px; } .selectDeliveryProcess .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper { } .selectDeliveryProcess .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper button { margin-inline: auto; background: none; border: none; border: 1px solid var(--text-field-line-color); border-radius: 4px; font-family: var(--first-font); width: 100%; padding-block: 32px; color: var(--black); } .selectDeliveryProcess .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper button svg { display: none; } #header2 .selectDeliveryProcess .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper { padding: 0; width: 100%; } #header2 .selectDeliveryProcess .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper:first-child { } #header2 .selectDeliveryProcess .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper:first-child button { background: none; color: black; /* border: 1px solid var(--text-field-line-color); */ } #header2 .selectDeliveryProcess .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper:first-child button:focus { background: var(--primary-button); color: white; } #header2 .selectDeliveryProcess .selectDeliveryBtns-wrapper .selectDeliveryBtn-wrapper button:focus { background-color: var(--primary-button); color: white; } #header2.DeliveryProcessOn .edit-delivery-button-close { top: 30px; right: 12px; width: 34px; height: 34px; z-index: 1; background-image: url("https://media.getmood.io/warehouse/dynamic/708609.svg"); background-position: center; background-repeat: no-repeat; border: 1px solid rgba(218, 218, 218, 0.60); border-radius: 50%; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06); } #header2.DeliveryProcessOn .edit-delivery-button-close svg { opacity: 0; } header:not(.search-open) #header2 .selectDeliveryProcess { z-index: 100; border-radius: 0 0 10px 10px; } .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .delivery-back-wrapper { padding: 32px 40px; /* padding-bottom: 0; */ } .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .delivery-back-wrapper h2.delivery-pop-title { text-align: center; text-decoration: none; font-family: var(--second-font); color: var(--black); font-size: 19px; margin: 0; } .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails ul.pickUpPoints li.pickUpPoint.samePos a { box-shadow: none; justify-content: center; border: 1px solid var(--black); padding: 16px; } .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .btns-wrapper { width: fit-content; margin-inline: auto; border-radius: 50px; overflow: hidden; margin-top: 16px; } .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .btns-wrapper #googleAPISearchAddress { width: fit-content; ma; margin-inline: unset; font-family: var(--second-font); background: var(--primary-button); margin-top: 0; border-radius: 50px; } .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .btns-wrapper #googleAPISearchAddress button.selectDeliveryBtn { background: var(--primary-button); border: none; padding-inline: var(--gap-28); /* border-radius: 20px !important; */ display: block; overflow: hidden; width: 100%; height: 100%; margin-inline: auto; background: var(--primary-button); border: none; border-radius: 50px; font-family: var(--second-font); width: 100%; padding-block: var(--gap-12); } #header2 .selectDeliveryProcess .selectPickUpPoint { } #header2 .selectDeliveryProcess .selectPickUpPoint ul.pickUpPoints { flex-direction: column; gap: 12px; margin: 0; padding: 32px 24px; } #header2 .selectDeliveryProcess .selectPickUpPoint ul.pickUpPoints li.pickUpPoint.samePos { width: 100%; text-align: center; padding: 0; } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails ul.pickUpPoints li.pickUpPoint.samePos a span.posLocation { display: none; } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails ul.pickUpPoints li.pickUpPoint.samePos a span.posInfo { gap: 4px; font-size: 17px; color: var(--black); } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryBtns .selectDeliveryBtnsInner h2.firstStepHeadline.delivery-pop-title { display: block; margin: 0; margin-top: var(--gap-32); } #header2 .selectDeliveryStep.selectDeliveryDetails .btns-wrapper { /* display: none; */ align-items: center; width: 100%; margin: 0; border-top: 1px solid rgba(187, 173, 143, 0.48); border-radius: 0; padding: 20px 24px; } #header2 .selectDeliveryProcess { } #header2 .selectDeliveryProcess .selectPickUpPoint .btns-wrapper { display: none; } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails { } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectDeliveryOptions { } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectDeliveryOptions #GoogleStreet { padding: 32px 24px; } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectDeliveryOptions #GoogleStreet .DeliveryFields { } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectDeliveryOptions #GoogleStreet .DeliveryFields .google-street-field.google-street-address { } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectDeliveryOptions #GoogleStreet .DeliveryFields .google-street-field.google-street-address #location-input { height: 50px; } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectDeliveryOptions #GoogleStreet .DeliveryFields .google-street-field.google-street-address svg { top: 50%; transform: translateY(-50%); } #delivery-date-and-time .selectBoxWrapper { padding-inline: 0; } .DateTimePickerOpen { max-width: unset; } .DateTimePickerOpen .datepicker { /* padding-inline: 0; */ border-top: none; padding: 0; border: none; } .DateTimePickerOpen .bootstrap-datetimepicker-widget > ul.list-unstyled .datepicker .datepicker-days .table-condensed thead tr:first-child { border: none; padding: 0; margin-block: 0 var(--gap-16); padding-inline: var(--gap-36); } .DateTimePickerOpen .bootstrap-datetimepicker-widget > ul.list-unstyled .datepicker .datepicker-days .table-condensed thead tr:first-child th.picker-switch { font-size: unset; font-family: var(--first-font); font-weight: 100; width: fit-content; } .datepicker-days .table-condensed thead tr th.dow { padding: 0; color: #807a70; /* width: 10px; */ } .datepicker-days .table-condensed thead tr { margin-bottom: var(--gap-12); padding-bottom: 8px; padding-inline: var(--gap-24); /* justify-content: center; */ } .datepicker-days .table-condensed thead tr th.picker-switch { font-size: unset; padding: 0; } .datepicker-days .table-condensed tbody tr { gap: 0; } .datepicker-days .table-condensed tbody tr td.day { width: 44px; height: auto; aspect-ratio: 1; padding: 0; border-radius: 50%; font-size: unset; line-height: 1; display: flex; align-items: center; justify-content: center; border: none; } .datepicker-days .table-condensed tbody tr:first-child { margin-top: var(--gap-2); } .datepicker-days .table-condensed tbody tr:last-child { margin-bottom: var(--gap-16); } .datepicker-days .table-condensed thead tr:last-child { justify-content: center; border-bottom: 1px solid rgba(218, 218, 218, 0.60); } .datepicker-days .table-condensed tbody tr td.day { font-family: var(--first-font); font-size: 16px; } .datepicker-days .table-condensed tbody tr td.day.today::before { width: 40px; height: auto; aspect-ratio: 1; } .datepicker-days .table-condensed tbody tr td.day.active::before, .DateTimePickerOpen .bootstrap-datetimepicker-widget table td.day.active:hover:before { width: 100%; height: 100%; border: none; background: #22A0FA; } .selectDeliveryStep #delivery-date-and-time { /* height: 100%; */ display: flex; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent { float: none !important; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 { } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div { padding: 0; padding-block: 12px; padding-inline: 24px; border-block: 1px solid rgba(187, 173, 143, 0.48); } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox { font-family: var(--first-font); margin-bottom: 0; padding-block: 4px; display: flex; gap: 10px; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox:before { content: ""; width: var(--gap-20); height: auto; aspect-ratio: 1; display: block; position: absolute; bottom: 50%; transform: translateY(50%); background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688120.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox label { margin: 0; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox input { margin: 0; opacity: 0; margin-inline-end: 5px; width: fit-content; height: fit-content; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .HoursOptions-1063 > div .HourOptionBox:has(input:checked):before { background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688119.svg"); } .selectDeliveryStep.selectDateOrder { } .selectDeliveryStep .btns-wrapper { height: fit-content; /* width: unset; */ display: flex; /* height: 100%; */ flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: 16px 32px; } .selectDeliveryStep .btns-wrapper a.delivery-back-btn { /* display: none; */ position: static; display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; transform: unset; } .selectDeliveryStep .btns-wrapper button.selectDeliveryBtn.selectDeliveryBtn-Delivery { background: var(--primary-button); border: none; border-radius: 50px; font-family: var(--second-font); margin-inline: auto; margin-inline: 0; background: var(--primary-button); border: none; border-radius: 50px; font-family: var(--second-font); width: 49%; padding-block: var(--gap-12); } .selectDeliveryStep .delivery-back-wrapper { text-align: center; padding: 32px 24px; } .selectDeliveryStep .delivery-back-wrapper h2.delivery-pop-title { text-decoration: none; font-family: var(--second-font); color: var(--black); font-size: 18px; margin: 0; } .DateTimePickerOpen .bootstrap-datetimepicker-widget > ul.list-unstyled .datepicker .datepicker-days .table-condensed thead tr:first-child th:first-child span.glyphicon.glyphicon-chevron-right::before { background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688128.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .DateTimePickerOpen .bootstrap-datetimepicker-widget > ul.list-unstyled .datepicker .datepicker-days .table-condensed thead tr:first-child th.next { padding: 0; display: flex; align-items: center; justify-content: center; width: fit-content; } .DateTimePickerOpen .bootstrap-datetimepicker-widget > ul.list-unstyled .datepicker .datepicker-days .table-condensed thead tr:first-child th.next span.glyphicon.glyphicon-chevron-left { } .DateTimePickerOpen .bootstrap-datetimepicker-widget > ul.list-unstyled .datepicker .datepicker-days .table-condensed thead tr:first-child th.next span.glyphicon.glyphicon-chevron-left::before { background-image: url("https://testblobgetmood.z1.web.core.windows.net/warehouse/dynamic/688127.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .DateTimePickerOpen .bootstrap-datetimepicker-widget > ul.list-unstyled .datepicker .datepicker-days .table-condensed thead tr:first-child th.prev.disabled { padding: 0; display: flex; justify-content: center; align-items: center; width: fit-content; } .hoursSelectHolder { height: 100%; /* display: flex; */ flex-direction: column; max-height: 60px; overflow: auto; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep .selectDeliveryOptions .selectBoxWrapper .selectHolder select { padding-block: var(--gap-14); padding-inline: var(--gap-16); height: unset; font-size: clamp(14px,var(--fs-17),300px); appearance: none; -webkit-appearance: none; background-image: url("https://media.getmood.io/warehouse/dynamic/708420.svg"); background-repeat: no-repeat; background-position: left 1rem center; /* move left by increasing value */ background-size: 10px; } #header2 .selectDeliveryProcess .selectDeliveryStep.selectDeliveryDetails .selectDeliveryOptions .selectBoxWrapper select.input-data.form-control { height: 50px; padding-block: var(--gap-14); padding-inline: var(--gap-16); height: unset; font-size: clamp(14px,var(--fs-17),300px); appearance: none; -webkit-appearance: none; background-image: url("https://media.getmood.io/warehouse/dynamic/708420.svg"); background-repeat: no-repeat; background-position: left 1rem center; /* move left by increasing value */ background-size: 10px; } .bootstrap-datetimepicker-widget table th { width: 10px; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div > label { display: none; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox { display: flex; flex-direction: row; gap: var(--gap-10); /* margin-bottom: var(--gap-32); */ align-items: center; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox input.input-data.form-control { /* border: none; */ margin: 0; width: var(--gap-14); height: var(--gap-14); opacity: 0; } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox label.HourOptionBoxLabel { margin: 0; font-size: clamp(10px, var(--fs-17),300px); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox:has(input:checked):before { content: ""; width: var(--gap-14); position: absolute; height: auto; aspect-ratio: 1; background: white; border-radius: 50%; background: var(--primary-button); outline: 2px solid var(--text-field-line-color); outline-offset: 3px; bottom: 50%; transform: translateY(50%); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div .hoursSelectHolder .HourOptionBox:before { content: ""; width: var(--gap-14); position: absolute; height: auto; aspect-ratio: 1; background: white; border-radius: 50%; background: white; outline: 2px solid var(--text-field-line-color); outline-offset: 3px; bottom: 50%; transform: translateY(50%); } .shopPop.selectDeliveryPop .modal-body > div .selectDeliveryProcess .selectDeliveryStep.selectDateOrder #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent > div:last-child > div:not(:last-child) { margin-bottom: var(--gap-12); } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .hoursSelectHolder { } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .hoursSelectHolder .HourOptionBox { display: flex; margin: 0; align-items: center; gap: var(--gap-16); height: 30px; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .hoursSelectHolder .HourOptionBox input { margin: 0; width: var(--gap-14); height: fit-content; opacity: 0; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .hoursSelectHolder .HourOptionBox label.HourOptionBoxLabel { margin: 0; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .hoursSelectHolder .HourOptionBox:before { content: ""; position: absolute; width: var(--gap-14); height: var(--gap-14); background: white; border-radius: 50%; outline: 2px solid var(--text-field-line-color); outline-offset: 3px; right: 5px; } .selectDeliveryStep #delivery-date-and-time .checkoutInputsWrapper.deliveryDetailsTimeTableContent .hoursSelectHolder .HourOptionBox:has(input:checked):before { background: var(--primary-button); } } /*---------------------------------------/* SELECT DELIVERY POP /*---------------------------------------*/