/* MyToui Theme — mobile menu ownership layer. The drawer is moved to on phones. */ @media (max-width: 768px) { body.mytoui-theme.mytoui-menu-active { overflow: hidden !important; overscroll-behavior: none !important; } .mytoui-menu-backdrop { position: fixed; z-index: 2147483000; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; opacity: 0; visibility: hidden; pointer-events: none; background: var(--mt-menu-overlay, rgba(15, 23, 42, .16)); -webkit-backdrop-filter: blur(var(--mt-menu-overlay-blur, 0px)); backdrop-filter: blur(var(--mt-menu-overlay-blur, 0px)); transition: opacity .22s ease, visibility .22s ease; -webkit-tap-highlight-color: transparent; } body:not(.mytoui-menu-overlay-enabled) .mytoui-menu-backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .mytoui-menu-backdrop.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .main-navigation.mytoui-menu-drawer { position: fixed !important; z-index: 2147483100 !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; opacity: 1 !important; visibility: hidden !important; pointer-events: none !important; contain: none !important; isolation: isolate !important; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease, visibility .22s ease !important; } .main-navigation.mytoui-menu-drawer.menu-open { visibility: visible !important; pointer-events: auto !important; } .main-navigation.mytoui-menu-drawer[data-mytoui-menu-motion="right"] { top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(86vw, 430px) !important; max-width: min(86vw, 430px) !important; height: 100dvh !important; transform: translate3d(104%,0,0) !important; border-radius: 24px 0 0 24px !important; box-shadow: -14px 0 42px rgba(16,24,40,.18) !important; } .main-navigation.mytoui-menu-drawer[data-mytoui-menu-motion="right"].menu-open { transform: translate3d(0,0,0) !important; } .main-navigation.mytoui-menu-drawer[data-mytoui-menu-motion="left"] { top: 0 !important; right: auto !important; bottom: 0 !important; left: 0 !important; width: min(86vw, 430px) !important; max-width: min(86vw, 430px) !important; height: 100dvh !important; transform: translate3d(-104%,0,0) !important; border-radius: 0 24px 24px 0 !important; box-shadow: 14px 0 42px rgba(16,24,40,.18) !important; } .main-navigation.mytoui-menu-drawer[data-mytoui-menu-motion="left"].menu-open { transform: translate3d(0,0,0) !important; } .main-navigation.mytoui-menu-drawer[data-mytoui-menu-motion="top"] { top: 0 !important; right: 0 !important; bottom: auto !important; left: 0 !important; width: 100% !important; max-width: 100% !important; height: min(86dvh, 780px) !important; transform: translate3d(0,-104%,0) !important; border-radius: 0 0 24px 24px !important; box-shadow: 0 16px 44px rgba(16,24,40,.18) !important; } .main-navigation.mytoui-menu-drawer[data-mytoui-menu-motion="top"].menu-open { transform: translate3d(0,0,0) !important; } .main-navigation.mytoui-menu-drawer[data-mytoui-menu-motion="center"] { top: 50% !important; right: auto !important; bottom: auto !important; left: 50% !important; width: min(90vw, 440px) !important; max-width: 440px !important; height: min(84dvh, 780px) !important; transform: translate3d(-50%,-47%,0) scale(.96) !important; opacity: 0 !important; border-radius: 24px !important; box-shadow: 0 24px 70px rgba(16,24,40,.24) !important; } .main-navigation.mytoui-menu-drawer[data-mytoui-menu-motion="center"].menu-open { transform: translate3d(-50%,-50%,0) scale(1) !important; opacity: 1 !important; } .main-navigation.mytoui-menu-drawer .mobile-menu-body { position: relative !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; touch-action: pan-y !important; -webkit-overflow-scrolling: touch; padding-inline: 20px !important; padding-bottom: max(18vh, 120px) !important; scrollbar-width: none; } .main-navigation.mytoui-menu-drawer .mobile-menu-body::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; } } /* Canonical mobile-menu presentation. Kept here so QuickTheme cannot split ownership across header CSS. */ @media (max-width: 768px) { .main-navigation.mytoui-menu-drawer .mobile-menu-header { display: flex !important; align-items: center !important; gap: 12px !important; min-height: 96px !important; padding: 16px 20px !important; border-bottom: 1px solid #eaecf0 !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-brand { display: flex !important; flex: 1 1 auto !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; padding: 4px 10px !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-brand a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-brand img { display: block !important; width: auto !important; max-width: min(var(--mt-mobile-menu-logo-size, 132px), 100%) !important; height: auto !important; max-height: 58px !important; margin: 0 auto !important; object-fit: contain !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-title { flex: 1 1 auto !important; margin: 0 !important; color: #101828 !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.25 !important; } .main-navigation.mytoui-menu-drawer .mobile-menu-close { position: relative !important; inset: auto !important; z-index: 3 !important; display: grid !important; flex: 0 0 var(--mt-menu-close-size, 48px) !important; place-items: center !important; width: var(--mt-menu-close-size, 48px) !important; height: var(--mt-menu-close-size, 48px) !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--mt-menu-close-border, #b91c1c) !important; border-radius: 50% !important; color: var(--mt-menu-close-color, #fff) !important; background: var(--mt-menu-close-bg, #dc2626) !important; box-shadow: 0 8px 22px rgba(220, 38, 38, .2) !important; } .main-navigation.mytoui-menu-drawer .mobile-menu-close svg { width: 44% !important; height: 44% !important; color: currentColor !important; stroke: currentColor !important; } .main-navigation.mytoui-menu-drawer .mobile-menu-header[data-mytoui-close-position="right"] .mobile-menu-close { order: 3 !important; } .main-navigation.mytoui-menu-drawer .mobile-menu-header[data-mytoui-close-position="right"] .mytoui-mobile-menu-brand, .main-navigation.mytoui-menu-drawer .mobile-menu-header[data-mytoui-close-position="right"] .mytoui-mobile-menu-title { order: 1 !important; } .main-navigation.mytoui-menu-drawer .mobile-menu-header[data-mytoui-close-position="left"] .mobile-menu-close { order: 1 !important; } .main-navigation.mytoui-menu-drawer .mobile-menu-header[data-mytoui-close-position="left"] .mytoui-mobile-menu-brand, .main-navigation.mytoui-menu-drawer .mobile-menu-header[data-mytoui-close-position="left"] .mytoui-mobile-menu-title { order: 2 !important; } .main-navigation.mytoui-menu-drawer .mobile-menu-body > ul, .main-navigation.mytoui-menu-drawer .mobile-menu-body .mobile-menu, .main-navigation.mytoui-menu-drawer .mobile-menu-body .menu { margin-bottom: var(--mt-menu-links-bottom, 24px) !important; } .main-navigation.mytoui-menu-drawer .mobile-menu-body li > a { display: block !important; width: 100% !important; padding-block: var(--mt-menu-link-py, 15px) !important; color: var(--mt-menu-link-color, #344054) !important; font-size: var(--mt-menu-link-size, 16px) !important; font-weight: var(--mt-menu-link-weight, 700) !important; line-height: 1.35 !important; text-decoration: none !important; text-align: var(--mt-menu-link-align, right) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search { box-sizing: border-box !important; display: block !important; width: 100% !important; min-height: var(--mt-menu-search-height, 46px) !important; margin: 12px 0 16px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search__box { box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0,1fr) var(--mt-menu-search-height,46px) !important; width: 100% !important; height: var(--mt-menu-search-height,46px) !important; overflow: hidden !important; border: 1px solid var(--mt-menu-search-border,#d0d5dd) !important; border-radius: var(--mt-menu-search-radius,14px) !important; background: var(--mt-menu-search-bg,#fff) !important; cursor: text !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search__input { width: 100% !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; outline: 0 !important; color: var(--mt-menu-search-text, #101828) !important; background: transparent !important; box-shadow: none !important; font-size: 16px !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search__button { display: grid !important; place-items: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--mt-menu-search-icon, #667085) !important; background: transparent !important; box-shadow: none !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search__button svg { width: 22px !important; height: 22px !important; } .main-navigation.mytoui-menu-drawer .mytoui-social-strip.is-mobile-menu { display: grid !important; grid-template-columns: repeat(var(--mt-social-mobile-columns, 5), minmax(0, var(--mt-social-size, 40px))) !important; justify-content: center !important; align-items: start !important; gap: var(--mt-social-gap, 8px) !important; width: 100% !important; max-width: 100% !important; margin-block: 14px 18px !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-scrollcue { position: absolute !important; z-index: 5 !important; top: 112px !important; right: 6px !important; bottom: 26px !important; width: var(--mt-menu-scroll-width, 4px) !important; overflow: hidden !important; border-radius: 999px !important; background: var(--mt-menu-scroll-track, #eaecf0) !important; pointer-events: none !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-scrollcue[hidden] { display: none !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-scrollcue__thumb { display: block !important; width: 100% !important; min-height: 34px !important; border-radius: inherit !important; background: var(--mt-menu-scroll-color, #667085) !important; will-change: transform, height; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best { position: relative !important; width: 100% !important; margin: 0 0 24px !important; padding: 0 4px !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__title { margin: var(--mt-menu-best-title-mt, 18px) 0 var(--mt-menu-best-title-mb, 12px) !important; color: var(--mt-menu-best-title, #101828) !important; font-size: var(--mt-menu-best-title-size, 18px) !important; font-weight: var(--mt-menu-best-title-weight, 850) !important; text-align: center !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-title-align="right"] .mytoui-mobile-menu-best__title { text-align: right !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-title-align="left"] .mytoui-mobile-menu-best__title { text-align: left !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__viewport { position: relative !important; width: 100% !important; overflow: hidden !important; border-radius: var(--mt-menu-best-card-radius, 16px) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__track { display: flex !important; width: 100% !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; direction: ltr !important; will-change: transform; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card { display: grid !important; grid-template-columns: var(--mt-menu-best-image, 78px) minmax(0, 1fr) !important; flex: 0 0 100% !important; min-width: 100% !important; overflow: hidden !important; border: var(--mt-menu-best-card-border, 1px solid #eaecf0) !important; border-radius: var(--mt-menu-best-card-radius, 16px) !important; color: #101828 !important; background: var(--mt-menu-best-card-bg, #fff) !important; box-shadow: var(--mt-menu-best-card-shadow, 0 4px 12px rgba(16,24,40,.06)) !important; direction: ltr !important; text-decoration: none !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__image { display: block !important; width: 100% !important; height: 100% !important; min-height: var(--mt-menu-best-image, 78px) !important; object-fit: cover !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__copy { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 6px !important; min-width: 0 !important; padding: 10px 12px !important; direction: rtl !important; text-align: right !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__name { color: #101828 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.35 !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__price { color: #15803d !important; font-size: 14px !important; font-weight: 850 !important; direction: rtl !important; unicode-bidi: plaintext !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__arrow { position: absolute !important; z-index: 4 !important; top: 50% !important; display: grid !important; place-items: center !important; width: var(--mt-menu-best-arrow-size, 38px) !important; height: var(--mt-menu-best-arrow-size, 38px) !important; margin: 0 !important; padding: 0 !important; border: var(--mt-menu-best-arrow-border, 1px solid #d0d5dd) !important; border-radius: 50% !important; color: var(--mt-menu-best-arrow-color, #344054) !important; background: var(--mt-menu-best-arrow-bg, #fff) !important; box-shadow: var(--mt-menu-best-arrow-shadow, 0 4px 12px rgba(16,24,40,.1)) !important; transform: translateY(-50%) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__arrow.is-prev { left: 5px !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__arrow.is-next { right: 5px !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-layout="list"] .mytoui-mobile-menu-best__viewport { overflow: visible !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-layout="list"] .mytoui-mobile-menu-best__track { display: grid !important; gap: 10px !important; transform: none !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-layout="list"] .mytoui-mobile-menu-best__card { min-width: 0 !important; width: 100% !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-layout="list"] .mytoui-mobile-menu-best__arrow { display: none !important; } } /* MyToui Theme 3.3 — menu search and best-seller ownership. */ @media (max-width: 768px) { .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search__button svg, .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search__button svg * { fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__stage { position: relative !important; width: 100% !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card { grid-template-columns: var(--mt-menu-best-image,78px) minmax(0,1fr) !important; border: var(--mt-menu-best-card-border,1px solid #e4e7ec) !important; background: var(--mt-menu-best-card-bg,#fff) !important; box-shadow: var(--mt-menu-best-card-shadow,0 4px 12px rgba(16,24,40,.10)) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card.is-image-hidden { grid-template-columns: minmax(0,1fr) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__copy { gap: 4px !important; padding: 12px 14px !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__name { display: block !important; width: 100% !important; margin: 0 !important; color: var(--mt-menu-best-name,#101828) !important; font-size: var(--mt-menu-best-name-size,15px) !important; font-weight: var(--mt-menu-best-name-weight,800) !important; text-align: var(--mt-menu-best-name-align,right) !important; line-height: 1.35 !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__category { color: var(--mt-menu-best-category,#667085) !important; font-size: var(--mt-menu-best-category-size,11px) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__brand { color: var(--mt-menu-best-brand,#667085) !important; font-size: var(--mt-menu-best-brand-size,11px) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__stock { display: block !important; width: 100% !important; margin: var(--mt-menu-best-stock-mt,2px) var(--mt-menu-best-stock-me,0) var(--mt-menu-best-stock-mb,2px) var(--mt-menu-best-stock-ms,0) !important; color: var(--mt-menu-best-stock,#15803d) !important; font-size: var(--mt-menu-best-stock-size,12px) !important; font-weight: var(--mt-menu-best-stock-weight,800) !important; text-align: var(--mt-menu-best-stock-align,right) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__stock::before { content:""; display:inline-block; width:.55em; height:.55em; margin-inline-end:.45em; border-radius:50%; background:currentColor; vertical-align:.08em; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__stock.is-outofstock { color:#b42318 !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__price { display: block !important; width: 100% !important; margin: var(--mt-menu-best-price-mt,4px) 0 var(--mt-menu-best-price-mb,2px) !important; color: var(--mt-menu-best-price,#15803d) !important; font-size: var(--mt-menu-best-price-size,20px) !important; font-weight: var(--mt-menu-best-price-weight,900) !important; text-align: var(--mt-menu-best-price-align,center) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__controls { display: grid !important; grid-template-columns: auto minmax(0,1fr) auto !important; align-items: center !important; gap: 12px !important; width: 100% !important; margin-top: 12px !important; pointer-events: auto !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__arrow { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; flex: none !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__arrow svg { width: 48% !important; height: 48% !important; fill:none !important; stroke:currentColor !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__dots { display:flex !important; align-items:center !important; justify-content:center !important; gap:var(--mt-menu-best-dot-gap,7px) !important; min-width:0 !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__dots[hidden] { display:none !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__dots button { width:var(--mt-menu-best-dot-size,7px) !important; height:var(--mt-menu-best-dot-size,7px) !important; min-width:0 !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:999px !important; background:var(--mt-menu-best-dot,#d0d5dd) !important; box-shadow:none !important; transition:width .18s ease,background .18s ease !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__dots button.is-active { width:calc(var(--mt-menu-best-dot-size,7px) * 2.5) !important; background:var(--mt-menu-best-dot-active,#15803d) !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-controls-position="sides"] .mytoui-mobile-menu-best__controls { position:absolute !important; z-index:5 !important; inset:0 !important; grid-template-columns:auto minmax(0,1fr) auto !important; align-items:center !important; margin:0 !important; padding:0 6px !important; pointer-events:none !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-controls-position="sides"] .mytoui-mobile-menu-best__controls > * { pointer-events:auto !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-controls-position="sides"] .mytoui-mobile-menu-best__dots { align-self:end !important; margin-bottom:8px !important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best[data-layout="list"] .mytoui-mobile-menu-best__controls { display:none !important; } } /* ========================================================================== * MyToui Theme 3.5.0 — mobile menu ownership * ======================================================================= */ @media(max-width:768px){ /* Search icon remains a vector; QuickTheme cannot collapse it into a dot. */ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search__button{display:grid!important;place-items:center!important;min-width:44px!important;width:44px!important;height:100%!important;padding:0!important;color:var(--mt-menu-search-icon,#101828)!important;background:transparent!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search__button svg{display:block!important;width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;overflow:visible!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-search__button svg *{fill:none!important;stroke:currentColor!important} /* Current page settings have higher specificity than QuickTheme's generic links. */ .site-header[data-mytoui-active="yes"] .main-navigation.mytoui-menu-drawer :is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_ancestor)>a, .site-header[data-mytoui-active="yes"] .main-navigation.mytoui-menu-drawer a[aria-current="page"]{ width:100%!important; padding:var(--mt-header-active-py,0) var(--mt-header-active-px,0)!important; border-radius:var(--mt-header-active-radius,0)!important; font-size:var(--mt-header-active-size,15px)!important; font-weight:var(--mt-header-active-weight,850)!important; text-align:var(--mt-header-active-align,right)!important; justify-content:var(--mt-header-active-justify,flex-start)!important; box-shadow:var(--mt-header-active-shadow,none)!important; } .site-header[data-mytoui-active="yes"][data-mytoui-active-text="yes"] .main-navigation.mytoui-menu-drawer :is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_ancestor)>a, .site-header[data-mytoui-active="yes"][data-mytoui-active-text="yes"] .main-navigation.mytoui-menu-drawer a[aria-current="page"]{color:var(--mt-header-active-text,#0b57d0)!important} .site-header[data-mytoui-active="yes"][data-mytoui-active-background="yes"] .main-navigation.mytoui-menu-drawer :is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_ancestor)>a, .site-header[data-mytoui-active="yes"][data-mytoui-active-background="yes"] .main-navigation.mytoui-menu-drawer a[aria-current="page"]{background:var(--mt-header-active-bg,#f2f4f7)!important} /* Best-seller card image is flush with the exact outer card curvature. */ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card{grid-template-columns:var(--mt-menu-best-image,78px) minmax(0,1fr)!important;align-items:stretch!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-side="right"]{grid-template-columns:minmax(0,1fr) var(--mt-menu-best-image,78px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__image{grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:var(--mt-menu-best-image,78px)!important;object-fit:cover!important;border-radius:0!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-side="right"] .mytoui-mobile-menu-best__image{grid-column:2!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__copy{grid-column:2!important;grid-row:1!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-side="right"] .mytoui-mobile-menu-best__copy{grid-column:1!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-radius-mode="follow_card"][data-image-side="left"] .mytoui-mobile-menu-best__image{border-radius:var(--mt-menu-best-card-radius,16px) 0 0 var(--mt-menu-best-card-radius,16px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-radius-mode="follow_card"][data-image-side="right"] .mytoui-mobile-menu-best__image{border-radius:0 var(--mt-menu-best-card-radius,16px) var(--mt-menu-best-card-radius,16px) 0!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-radius-mode="custom"] .mytoui-mobile-menu-best__image{border-radius:var(--mt-menu-best-image-custom-radius,0)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__identity{display:inline-flex!important;align-items:center!important;gap:4px!important;width:max-content!important;max-width:100%!important;padding:4px 7px!important;line-height:1.25!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__identity.is-category{color:var(--mt-menu-best-category,#667085)!important;background:var(--mt-menu-best-category-bg,#f8fafc)!important;border:var(--mt-menu-best-category-border,0)!important;border-radius:var(--mt-menu-best-category-radius,7px)!important;font-size:var(--mt-menu-best-category-size,11px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__identity.is-brand{color:var(--mt-menu-best-brand,#667085)!important;background:var(--mt-menu-best-brand-bg,#f8fafc)!important;border:var(--mt-menu-best-brand-border,0)!important;border-radius:var(--mt-menu-best-brand-radius,7px)!important;font-size:var(--mt-menu-best-brand-size,11px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__identity-label{opacity:.72!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__stock{margin-block-start:var(--mt-menu-best-stock-mt,0)!important;margin-block-end:var(--mt-menu-best-stock-mb,0)!important;margin-inline-start:var(--mt-menu-best-stock-ms,0)!important;margin-inline-end:var(--mt-menu-best-stock-me,4px)!important} /* Categories inside the drawer: same carousel interaction model as best sellers. */ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories{display:block!important;width:100%!important;margin:24px 0 10px!important;padding:0!important;direction:rtl!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__title{margin:0 0 14px!important;color:#0b3d91!important;font-size:22px!important;font-weight:900!important;text-align:center!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__stage{position:relative!important;width:100%!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__viewport{width:100%!important;overflow:hidden!important;border-radius:var(--mt-menu-cat-card-radius,16px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__track{display:flex!important;width:100%!important;gap:0!important;margin:0!important;padding:0!important;direction:ltr!important;will-change:transform!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card{display:grid!important;grid-template-columns:var(--mt-menu-cat-image,92px) minmax(0,1fr)!important;flex:0 0 100%!important;min-width:100%!important;min-height:112px!important;overflow:hidden!important;border:var(--mt-menu-cat-card-border,1px solid #e4e7ec)!important;border-radius:var(--mt-menu-cat-card-radius,16px)!important;color:#101828!important;background:var(--mt-menu-cat-card-bg,#fff)!important;box-shadow:var(--mt-menu-cat-card-shadow,0 8px 22px rgba(16,24,40,.10))!important;text-decoration:none!important;direction:ltr!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__image{display:block!important;width:100%!important;height:100%!important;min-height:112px!important;object-fit:cover!important;border-radius:0!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-radius-mode="follow_card"] .mytoui-mobile-menu-categories__image{border-radius:var(--mt-menu-cat-card-radius,16px) 0 0 var(--mt-menu-cat-card-radius,16px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-radius-mode="custom"] .mytoui-mobile-menu-categories__image{border-radius:var(--mt-menu-cat-image-custom-radius,0)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card.is-image-hidden{grid-template-columns:1fr!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__copy{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:5px!important;min-width:0!important;padding:12px 14px!important;direction:rtl!important;text-align:right!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__name{color:var(--mt-menu-cat-name,#101828)!important;font-size:var(--mt-menu-cat-name-size,15px)!important;font-weight:850!important;line-height:1.4!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__count{color:var(--mt-menu-cat-count,#667085)!important;font-size:11px!important;font-weight:700!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__open{margin-top:4px!important;color:var(--mt-menu-cat-open,#0b57d0)!important;font-size:12px!important;font-weight:850!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__controls{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;width:100%!important;margin-top:12px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__arrow{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;padding:0!important;border:1px solid #d0d5dd!important;border-radius:50%!important;color:var(--mt-menu-cat-arrow,#0b57d0)!important;background:#fff!important;box-shadow:0 4px 12px rgba(16,24,40,.10)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__arrow svg{display:block!important;width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__dots{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-width:0!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__dots[hidden]{display:none!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__dots button{width:var(--mt-menu-cat-dot-size,7px)!important;height:var(--mt-menu-cat-dot-size,7px)!important;padding:0!important;border:0!important;border-radius:999px!important;background:var(--mt-menu-cat-dot,#d0d5dd)!important;transition:width .18s ease,background .18s ease!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__dots button.is-active{width:calc(var(--mt-menu-cat-dot-size,7px) * 2.5)!important;background:var(--mt-menu-cat-dot-active,#15803d)!important} } @media (max-width:768px){ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__title{ margin:var(--mt-menu-cat-section-title-mt,0) 0 var(--mt-menu-cat-section-title-mb,14px)!important; color:var(--mt-menu-cat-section-title,#0b3d91)!important; font-size:var(--mt-menu-cat-section-title-size,22px)!important; font-weight:var(--mt-menu-cat-section-title-weight,900)!important; text-align:var(--mt-menu-cat-section-title-align,center)!important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-side="right"]{grid-template-columns:minmax(0,1fr) var(--mt-menu-cat-image,92px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-side="right"] .mytoui-mobile-menu-categories__image{grid-column:2!important;grid-row:1!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-side="right"] .mytoui-mobile-menu-categories__copy{grid-column:1!important;grid-row:1!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-side="right"][data-image-radius-mode="follow_card"] .mytoui-mobile-menu-categories__image{border-radius:0 var(--mt-menu-cat-card-radius,16px) var(--mt-menu-cat-card-radius,16px) 0!important} } /* -------------------------------------------------------------------------- * MyToui Theme 3.6.0 — canonical mobile-menu ownership * This block is intentionally last: QuickTheme's drawer is moved to body, so * active/link/card states must be owned by the drawer itself, not .site-header. * ----------------------------------------------------------------------- */ @media(max-width:768px){ .main-navigation.mytoui-menu-drawer[data-mytoui-active="yes"] :is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_ancestor)>a, .main-navigation.mytoui-menu-drawer[data-mytoui-active="yes"] a[aria-current="page"]{ font-size:var(--mt-header-active-size,16px)!important;font-weight:var(--mt-header-active-weight,850)!important; text-align:var(--mt-header-active-align,center)!important;justify-content:var(--mt-header-active-justify,center)!important; padding:var(--mt-header-active-py,10px) var(--mt-header-active-px,14px)!important; border-radius:var(--mt-header-active-radius,12px)!important;box-shadow:var(--mt-header-active-shadow,none)!important } .main-navigation.mytoui-menu-drawer[data-mytoui-active="yes"][data-mytoui-active-text="yes"] :is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_ancestor)>a, .main-navigation.mytoui-menu-drawer[data-mytoui-active="yes"][data-mytoui-active-text="yes"] a[aria-current="page"]{color:var(--mt-header-active-text,#0b57d0)!important} .main-navigation.mytoui-menu-drawer[data-mytoui-active="yes"][data-mytoui-active-background="yes"] :is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_ancestor)>a, .main-navigation.mytoui-menu-drawer[data-mytoui-active="yes"][data-mytoui-active-background="yes"] a[aria-current="page"]{background:var(--mt-header-active-bg,#f2f4f7)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card{ grid-template-columns:var(--mt-menu-best-image-width,42%) minmax(0,1fr)!important; min-height:var(--mt-menu-best-image-min-height,178px)!important;align-items:stretch!important } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-side="right"]{grid-template-columns:minmax(0,1fr) var(--mt-menu-best-image-width,42%)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__image{width:100%!important;height:100%!important;min-height:var(--mt-menu-best-image-min-height,178px)!important;object-fit:var(--mt-menu-best-image-fit,cover)!important;margin:0!important;padding:0!important;align-self:stretch!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-shape="square"] .mytoui-mobile-menu-best__image{aspect-ratio:1/1!important;height:auto!important;min-height:0!important;align-self:center!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-shape="landscape"] .mytoui-mobile-menu-best__image{aspect-ratio:4/3!important;height:auto!important;min-height:0!important;align-self:center!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-shape="portrait"] .mytoui-mobile-menu-best__image{aspect-ratio:3/4!important;height:auto!important;min-height:0!important;align-self:center!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-shape="natural"] .mytoui-mobile-menu-best__image{height:auto!important;min-height:0!important;align-self:center!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card{ grid-template-columns:var(--mt-menu-cat-image-width,38%) minmax(0,1fr)!important; min-height:var(--mt-menu-cat-image-min-height,150px)!important;align-items:stretch!important } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-side="right"]{grid-template-columns:minmax(0,1fr) var(--mt-menu-cat-image-width,38%)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__image{width:100%!important;height:100%!important;min-height:var(--mt-menu-cat-image-min-height,150px)!important;object-fit:var(--mt-menu-cat-image-fit,cover)!important;margin:0!important;padding:0!important;align-self:stretch!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-shape="square"] .mytoui-mobile-menu-categories__image{aspect-ratio:1/1!important;height:auto!important;min-height:0!important;align-self:center!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-shape="landscape"] .mytoui-mobile-menu-categories__image{aspect-ratio:4/3!important;height:auto!important;min-height:0!important;align-self:center!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-shape="portrait"] .mytoui-mobile-menu-categories__image{aspect-ratio:3/4!important;height:auto!important;min-height:0!important;align-self:center!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-shape="natural"] .mytoui-mobile-menu-categories__image{height:auto!important;min-height:0!important;align-self:center!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__controls{direction:ltr!important;gap:10px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__dots{gap:var(--mt-menu-cat-dot-gap,7px)!important;direction:ltr!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__arrow{width:var(--mt-menu-cat-arrow-size,38px)!important;height:var(--mt-menu-cat-arrow-size,38px)!important;color:var(--mt-menu-cat-arrow,#0b57d0)!important;background:var(--mt-menu-cat-arrow-bg,#fff)!important;border:1px solid var(--mt-menu-cat-arrow-border,#d0d5dd)!important;box-shadow:var(--mt-menu-cat-arrow-shadow,0 4px 12px rgba(16,24,40,.10))!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature{width:100%!important;margin:20px 0 8px!important;padding:12px!important;border-radius:calc(var(--mt-menu-feature-radius,16px) + 4px)!important;background:var(--mt-menu-feature-bg,#f8fafc)!important;direction:rtl!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__title{margin:0 0 10px!important;color:#101828!important;font-size:17px!important;font-weight:900!important;text-align:right!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__card{display:grid!important;grid-template-columns:38px minmax(0,1fr) 18px!important;align-items:center!important;gap:8px!important;min-width:0!important;padding:10px!important;border:1px solid var(--mt-menu-feature-border,#e4e7ec)!important;border-radius:var(--mt-menu-feature-radius,16px)!important;color:#101828!important;background:var(--mt-menu-feature-card,#fff)!important;box-shadow:var(--mt-menu-feature-shadow,0 4px 12px rgba(16,24,40,.08))!important;text-decoration:none!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__icon{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;border-radius:12px!important;color:#fff!important;background:var(--mt-menu-feature-accent,#0b57d0)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__icon svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__copy{display:flex!important;flex-direction:column!important;min-width:0!important;line-height:1.3!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__copy strong{font-size:12px!important;font-weight:850!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__copy small{margin-top:2px!important;color:#667085!important;font-size:9px!important;font-weight:650!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__go{color:var(--mt-menu-feature-accent,#0b57d0)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__go svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important} } /* -------------------------------------------------------------------------- * MyToui Theme 3.7.0 — final phone drawer geometry and hierarchy * ----------------------------------------------------------------------- */ @media(max-width:768px){ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-brand{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;margin:0 auto!important;padding:var(--mt-menu-brand-padding,0)!important;border:0!important;border-radius:var(--mt-menu-brand-radius,0)!important;background:transparent!important;box-shadow:none!important;overflow:hidden!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-brand[data-background="yes"]{background:var(--mt-menu-brand-bg,#fff)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-brand__link{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-decoration:none!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-brand img{display:block!important;width:auto!important;max-width:var(--mt-mobile-menu-logo-size,132px)!important;height:auto!important;max-height:72px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;object-fit:contain!important} .main-navigation.mytoui-menu-drawer .mobile-menu-body>ul[aria-hidden="true"]{display:none!important} /* True horizontal cards: media touches card edges, text owns padding. */ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__viewport, .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__viewport{overflow:hidden!important;border-radius:var(--mt-menu-best-card-radius,16px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card, .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card{position:relative!important;display:grid!important;width:100%!important;min-width:100%!important;padding:0!important;align-items:stretch!important;overflow:hidden!important;box-sizing:border-box!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card{grid-template-columns:var(--mt-menu-best-image-width,42%) minmax(0,1fr)!important;min-height:var(--mt-menu-best-image-min-height,148px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card{grid-template-columns:var(--mt-menu-cat-image-width,38%) minmax(0,1fr)!important;min-height:var(--mt-menu-cat-image-min-height,136px)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-side="right"]{grid-template-columns:minmax(0,1fr) var(--mt-menu-best-image-width,42%)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-side="right"]{grid-template-columns:minmax(0,1fr) var(--mt-menu-cat-image-width,38%)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__image, .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__image{display:block!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;align-self:stretch!important;justify-self:stretch!important;background:transparent!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__image{min-height:var(--mt-menu-best-image-min-height,148px)!important;object-fit:var(--mt-menu-best-image-fit,cover)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__image{min-height:var(--mt-menu-cat-image-min-height,136px)!important;object-fit:var(--mt-menu-cat-image-fit,cover)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__copy, .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__copy{align-self:stretch!important;justify-content:center!important;min-width:0!important;margin:0!important;padding:12px 14px!important;box-sizing:border-box!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-radius-mode="follow_card"] .mytoui-mobile-menu-best__image, .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-radius-mode="follow_card"] .mytoui-mobile-menu-categories__image{border-radius:0!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-image-radius-mode="custom"] .mytoui-mobile-menu-best__image{border-radius:var(--mt-menu-best-image-custom-radius,0)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__card[data-image-radius-mode="custom"] .mytoui-mobile-menu-categories__image{border-radius:var(--mt-menu-cat-image-custom-radius,0)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__controls{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;direction:ltr!important;align-items:center!important;gap:10px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__arrow.is-prev{grid-column:1!important;order:1!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__dots{grid-column:2!important;order:2!important;direction:ltr!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-categories__arrow.is-next{grid-column:3!important;order:3!important} /* Feature navigation uses one consistent blue visual language. */ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature{background:transparent!important;padding:0!important;margin:18px 0 6px!important;border-radius:0!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__title{color:#0b3d91!important;font-size:16px!important;text-align:right!important;margin:0 2px 9px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__grid{grid-template-columns:1fr!important;gap:8px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__card{grid-template-columns:42px minmax(0,1fr) 20px!important;min-height:62px!important;padding:9px 11px!important;border:1px solid #dbe5f4!important;border-radius:15px!important;background:#fff!important;box-shadow:0 3px 12px rgba(16,24,40,.055)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__icon{width:42px!important;height:42px!important;border-radius:13px!important;background:#0b57d0!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__copy strong{font-size:13px!important;color:#101828!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__copy small{font-size:10px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-feature__go{color:#0b57d0!important} /* “Why MyToui” is intentionally not a button/card group and remains the * quiet closing section of the drawer. */ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust{position:relative!important;margin:26px 0 10px!important;padding:18px 16px 16px 18px!important;border:0!important;border-radius:20px!important;background:linear-gradient(145deg,#f5f9ff,#fff)!important;box-shadow:inset 0 0 0 1px #e3ebf7!important;overflow:hidden!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust::after{content:"";position:absolute;left:-38px;bottom:-48px;width:118px;height:118px;border-radius:50%;background:rgba(11,87,208,.06)!important;pointer-events:none!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__title{margin:0!important;color:#0b3d91!important;font-size:19px!important;font-weight:950!important;text-align:right!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__lead{margin:5px 0 14px!important;color:#667085!important;font-size:11px!important;font-weight:650!important;line-height:1.6!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__rail{position:relative!important;display:grid!important;gap:0!important;padding-right:19px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__rail::before{content:"";position:absolute;right:7px;top:9px;bottom:9px;width:2px;border-radius:999px;background:#d7e4f8!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__item{position:relative!important;display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;padding:8px 0!important;border:0!important;background:transparent!important;box-shadow:none!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__icon{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;border-radius:50%!important;color:#0b57d0!important;background:#eaf2ff!important;z-index:1!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__icon svg{width:15px!important;height:15px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__copy{display:flex!important;flex-direction:column!important;min-width:0!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__copy strong{color:#101828!important;font-size:12px!important;font-weight:850!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__copy small{margin-top:1px!important;color:#98a2b3!important;font-size:9px!important;font-weight:650!important} } /* MyToui Theme 3.8.0 — quieter and clearer closing trust panel. */ @media (max-width:768px){ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust{margin:26px 0 12px!important;padding:14px!important;border:1px solid #dbe6f5!important;border-radius:18px!important;background:linear-gradient(145deg,#f7faff,#fff)!important;box-shadow:0 5px 18px rgba(16,24,40,.055)!important;overflow:hidden!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust::after{display:none!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__head{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;margin-bottom:11px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__mark{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border-radius:13px!important;color:#fff!important;background:#0b57d0!important;box-shadow:0 6px 16px rgba(11,87,208,.18)!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__mark svg{width:20px!important;height:20px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__title{margin:0!important;color:#0b3d91!important;font-size:16px!important;font-weight:950!important;text-align:right!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__lead{margin:2px 0 0!important;color:#667085!important;font-size:10px!important;font-weight:650!important;line-height:1.45!important;text-align:right!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__item{display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;align-items:center!important;gap:7px!important;min-height:58px!important;padding:8px!important;border:1px solid #e7edf6!important;border-radius:13px!important;background:rgba(255,255,255,.82)!important;box-shadow:none!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__icon{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;border-radius:10px!important;color:#0b57d0!important;background:#eef4ff!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__icon svg{width:16px!important;height:16px!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__copy{display:flex!important;flex-direction:column!important;min-width:0!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__copy strong{color:#101828!important;font-size:10px!important;font-weight:850!important;line-height:1.35!important}.main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__copy small{margin-top:2px!important;color:#98a2b3!important;font-size:8px!important;line-height:1.35!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__foot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-top:10px!important;padding-top:9px!important;border-top:1px solid #e7edf6!important}.main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__foot span{color:#0b57d0!important;font-size:12px!important;font-weight:950!important}.main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-trust__foot small{color:#667085!important;font-size:8px!important;font-weight:650!important} } /* -------------------------------------------------------------------------- * MyToui Theme 3.11 — canonical mobile-menu best seller card geometry * ----------------------------------------------------------------------- */ @media(max-width:768px){ .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card{ position:relative!important;box-sizing:border-box!important; width:min(var(--mt-menu-best-card-width,100%),var(--mt-menu-best-card-max-width,360px))!important; max-width:var(--mt-menu-best-card-max-width,360px)!important;max-height:var(--mt-menu-best-card-max-height,none)!important; margin-inline:auto!important;overflow:hidden!important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-card-layout="vertical"]{ display:flex!important;flex-direction:column!important;align-items:stretch!important;grid-template-columns:none!important;min-height:0!important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-card-layout="vertical"] .mytoui-mobile-menu-best__image{ display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1/1!important;object-fit:var(--mt-menu-best-image-fit,cover)!important;align-self:stretch!important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-card-layout="vertical"] .mytoui-mobile-menu-best__copy{ display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;padding:12px!important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-card-layout="horizontal"]{ display:grid!important;grid-template-columns:var(--mt-menu-best-horizontal-image-width,42%) minmax(0,1fr)!important;align-items:stretch!important;min-height:0!important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-card-layout="horizontal"] .mytoui-mobile-menu-best__image{ width:100%!important;max-width:none!important;height:100%!important;min-height:var(--mt-menu-best-image-min-height,148px)!important;aspect-ratio:auto!important;object-fit:var(--mt-menu-best-image-fit,cover)!important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__card[data-card-layout="horizontal"] .mytoui-mobile-menu-best__copy{ min-width:0!important;padding:12px!important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__price{ display:flex!important;align-items:baseline!important;justify-content:center!important;gap:7px!important;flex-wrap:wrap!important;width:100%!important; color:var(--mt-menu-best-price,#15803d)!important;font-size:var(--mt-menu-best-price-size,20px)!important;font-weight:var(--mt-menu-best-price-weight,900)!important; } .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__price del{color:#667085!important;font-size:.70em!important;font-weight:700!important;text-decoration:line-through!important;text-decoration-thickness:1.4px!important;opacity:.82!important} .main-navigation.mytoui-menu-drawer .mytoui-mobile-menu-best__price ins{color:inherit!important;font-size:1em!important;font-weight:inherit!important;text-decoration:none!important} }