/** Shopify CDN: Minification failed Line 3990:0 Unexpected "}" **/ html { overflow-x: clip !important; overflow-y: auto !important; height: auto !important; min-height: 100% !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } body { overflow-x: clip !important; overflow-y: visible !important; height: auto !important; min-height: 100% !important; position: static !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } .wrap { overflow: visible !important; overflow-x: clip !important; overflow-y: visible !important; height: auto !important; min-height: 100% !important; position: relative !important; -webkit-overflow-scrolling: touch !important; } /* ========================================================== Liquid Glass / macOS-inspired layer ========================================================== */ :root { --glass-bg: rgba(255,255,255,.58); --glass-bg-strong: rgba(255,255,255,.78); --glass-border: rgba(255,255,255,.65); --glass-shadow: 0 8px 32px rgba(15,23,42,.14), 0 1px 0 rgba(255,255,255,.7) inset; --glass-blur: blur(22px) saturate(180%); --glass-top: 14px; --radius-lg: 22px; --radius-md: 14px; --ease-spring: cubic-bezier(.22,1,.36,1); --sf-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; } html { scroll-behavior: smooth; } body { background: #f5f5f7; font-family: var(--sf-font); } h1, h2, h3, .section-title h2, .page-title h2, .detail-info .product-title, .brand-story__text h2, footer.footer-v1 h1, footer.footer-v1 h2, footer.footer-v1 h3, footer.footer-v1 h4, footer.footer-v1 h5, .engo-modal__box h3 { font-family: var(--sf-font); font-weight: 600; letter-spacing: -.02em; } .section-product-v1 .section-title h2:after { background: linear-gradient(90deg, #0f172a, #b08d57); border-radius: 4px; } /* ---------- Announcement ---------- */ .brand-announce { background: linear-gradient(90deg, #020617, #0f172a, #020617); font-family: var(--sf-font); letter-spacing: .12em; } /* ---------- Floating glass header ---------- */ #header, .header-v1, .header-v2, .header-v3, .header-v4, #header.menu-scroll-v1, .header-v2.menu-scroll-v1 { position: fixed !important; top: var(--glass-top, 42px) !important; left: 12px !important; right: 12px !important; width: auto !important; margin: 0 !important; background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 16px !important; box-shadow: var(--glass-shadow) !important; z-index: 1000; animation: none !important; padding: 4px 0 !important; transition: top .35s var(--ease-spring), left .35s var(--ease-spring), right .35s var(--ease-spring), background .35s ease, box-shadow .35s ease, border-radius .35s ease, transform .35s var(--ease-spring); } #header:before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%); } #header > * { position: relative; } #header.is-scrolled { top: 10px !important; left: 12px !important; right: 12px !important; width: auto !important; padding: 2px 0 !important; background: var(--glass-bg-strong) !important; box-shadow: 0 12px 36px rgba(15,23,42,.18), 0 1px 0 rgba(255,255,255,.8) inset !important; border-radius: 14px !important; } #header.is-hidden { transform: translateY(-140%); } #header .logo a, #header .logo { padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; } #header .menu-level-1 { padding-top: 10px !important; padding-bottom: 10px !important; } #header.is-scrolled .menu-level-1 { padding-top: 8px !important; padding-bottom: 8px !important; } /* logo: original dark artwork on light glass */ #header .logo img, #header img.img-fluid { filter: none !important; max-height: 28px !important; width: auto !important; display: block !important; transition: transform .35s var(--ease-spring); } #header .logo a:hover img { transform: scale(1.04); } /* menu items: dark text, glass pill that glides in on hover */ #header .navbar-nav > .nav-item > a, #header .menu-level-1 { color: #0f172a !important; letter-spacing: .08em; font-size: 12.5px; position: relative; } #header .navbar-nav > .nav-item { position: relative; } #header .navbar-nav > .nav-item > a:before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 34px; margin-top: -17px; border-radius: 999px; background: rgba(15,23,42,.07); opacity: 0; transform: scale(.85); transition: opacity .25s ease, transform .35s var(--ease-spring); z-index: -1; } #header .navbar-nav > .nav-item:hover > a:before, #header .navbar-nav > .nav-item.show > a:before { opacity: 1; transform: scale(1); } #header .navbar-nav > .nav-item > a:hover, #header .navbar-nav > .nav-item:hover > a { color: #0f172a !important; } #header .navbar-nav > .nav-item > a:after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 4px; height: 4px; border-radius: 50%; background: #b08d57; opacity: 0; transform: translateX(-50%) scale(0); transition: all .3s var(--ease-spring); } #header .navbar-nav > .nav-item:hover > a:after { opacity: 1; transform: translateX(-50%) scale(1); } /* dropdown / mega menu: frosted panel with spring-in animation */ #header .dropdown-menu { background: rgba(255,255,255,.82) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(15,23,42,.22); margin-top: 10px; padding: 18px; animation: glassIn .35s var(--ease-spring) both; } @keyframes glassIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } } #header .dropdown-menu a { color: #0f172a !important; border-radius: 10px; transition: background .2s ease, padding-left .25s var(--ease-spring); } #header .dropdown-menu li > a:hover { background: rgba(15,23,42,.06); padding-left: 10px; } /* search capsule that expands on focus */ #header .header-right .form-control { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(15,23,42,.12) !important; color: #0f172a !important; border-radius: 999px !important; height: 40px; width: 150px; padding: 0 44px 0 18px; transition: width .45s var(--ease-spring), background .25s ease, box-shadow .25s ease; } #header .header-right .form-control:focus { width: 250px; background: #fff !important; box-shadow: 0 0 0 4px rgba(15,23,42,.1); outline: 0; } #header .header-right .form-control::placeholder { color: rgba(15,23,42,.5) !important; } #header .header-right .search-submit, #header .header-right i, #header .btn-cart, #header .btn-cart i, #header .btn-login-icon, #header .btn-login-icon i { color: #0f172a !important; } #header .header-right a { transition: transform .3s var(--ease-spring); display: inline-flex; align-items: center; justify-content: center; } #header .header-right a:hover { transform: translateY(-2px) scale(1.08); } #header .minicart-bag-number { background: #0f172a !important; color: #fff !important; border-radius: 999px; min-width: 18px; height: 18px; line-height: 18px; font-size: 10px; } #header .minicart-bag-number.bump { animation: bump .5s var(--ease-spring); } @keyframes bump { 30% { transform: scale(1.5); } 100% { transform: scale(1); } } /* ---------- Buttons: macOS capsules ---------- */ .brand-btn, .shop-button, .btn-primary, .engo-sticky-atc__btn { border-radius: 999px !important; padding: 14px 32px; letter-spacing: .08em; background: linear-gradient(180deg, #1e293b, #0f172a) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 6px 18px rgba(15,23,42,.28), 0 1px 0 rgba(255,255,255,.25) inset; transition: transform .3s var(--ease-spring), box-shadow .3s ease, filter .2s ease; } .brand-btn:hover, .shop-button:hover, .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,.32), 0 1px 0 rgba(255,255,255,.25) inset; background: linear-gradient(180deg, #1e293b, #0f172a) !important; color: #fff !important; filter: brightness(1.05); } .brand-btn:active, .shop-button:active { transform: scale(.98); } /* ---------- Product cards ---------- */ .product-item-v1 .product-image { border-radius: var(--radius-lg) !important; box-shadow: 0 4px 18px rgba(15,23,42,.07); transition: transform .5s var(--ease-spring), box-shadow .4s ease; background: #eceef2; } .product-item-v1 .engo-card-media { border-radius: var(--radius-lg) !important; } .product-item-v1:hover .product-image { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(15,23,42,.16); } .product-item-v1 .product-icon .add-to-cart-button, .product-item-v1 .product-icon .quick-view, .product-item-v1 .product-icon .wish-list { background: rgba(255,255,255,.7) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); } .product-item-v1 .product-bubble { border-radius: 999px !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0,0,0,.15); } .product-item-v1 .engo-soldout-bubble { position: absolute !important; top: 12px !important; left: 12px !important; background: rgba(15, 23, 42, 0.88) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 5px 12px !important; border-radius: 999px !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; z-index: 5 !important; } /* ---------- Glass cards: benefits, story, modal, sticky bar ---------- */ .brand-benefits { background: transparent; border: 0; } .brand-benefits__list { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 26px 22px; } .brand-benefits__item i { background: rgba(15,23,42,.08); border-radius: 50%; width: 46px; height: 46px; line-height: 46px; font-size: 20px; flex: 0 0 46px; } .brand-story { background: transparent; } .brand-story__media img, .brand-story__placeholder { border-radius: 28px; box-shadow: 0 24px 60px rgba(15,23,42,.18); } .engo-modal__backdrop { background: rgba(10,18,36,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .engo-modal__box { background: rgba(255,255,255,.82); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 26px; animation: glassIn .4s var(--ease-spring) both; } .engo-modal__table th { background: rgba(15,23,42,.06); } .engo-sticky-atc { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-border); border-radius: 22px 22px 0 0; } /* ---------- Product page controls ---------- */ .engo-size-select { border-radius: 14px; background: rgba(255,255,255,.8); border: 1px solid rgba(15,23,42,.15); font-family: var(--sf-font); box-shadow: 0 2px 8px rgba(15,23,42,.05); transition: box-shadow .25s ease, border-color .25s ease; } .engo-size-select:focus { box-shadow: 0 0 0 4px rgba(15,23,42,.1); } .engo-trust { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 16px; } .detail-gallery .mid img { border-radius: 24px; } .detail-gallery .product-thumbnail-item img { border-radius: 14px; } /* ---------- Footer ---------- */ footer.footer-v1 { margin-top: 70px; } footer.footer-v1 .footer-top { border-radius: 32px 32px 0 0; background: linear-gradient(160deg, #1e293b 0%, #0f172a 55%, #020617 100%) !important; } footer.footer-v1 .footer-bottom { background: #020617 !important; } /* ---------- Misc ---------- */ #back-to-top { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .pagination .prev, .pagination .next, .pagination #paginate { border-radius: 999px; } img { image-rendering: auto; } /* reveal-on-scroll */ .glass-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-spring), transform .8s var(--ease-spring); } .glass-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .glass-reveal { opacity: 1; transform: none; transition: none; } #header, .product-item-v1 .product-image { transition: none; } } @media (max-width: 1199px) { .menu-mobile { background: var(--glass-bg-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); } } /* ========================================================== Audit pass: one typeface, solid mega menu, consistent spacing ========================================================== */ :root { --sf-font: "Barlow", sans-serif; --brand-font-head: "Barlow", sans-serif; --brand-font-body: "Barlow", sans-serif; --space-section: clamp(28px, 3.5vw, 44px); --space-block: clamp(14px, 1.8vw, 22px); } /* ---- Single font (icon fonts are left alone) ---- */ html, body, body *:not(i):not([class^="fa-"]):not([class*=" fa-"]):not(.fa):not([class*="lnr"]):not([class*="ti-"]):not([class*="ion-"]):not([class*="flaticon"]):not([class*="linea"]):not([class*="icon-"]):not(.slick-arrow):not(.glyphicon) { font-family: "Barlow", sans-serif !important; } h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; } /* ---- Mega menu / dropdowns: almost solid, easy to read ---- */ #header .dropdown-menu, #header .dropdown-menu.ver1, #header .dropdown-menu.ver2, #header .dropdown-menu.ver3, #header .dropdown-menu.ver4 { background: rgba(255, 255, 255, 0.94) !important; -webkit-backdrop-filter: blur(36px) saturate(190%) !important; backdrop-filter: blur(36px) saturate(190%) !important; border: 1.5px solid rgba(255, 255, 255, 0.8) !important; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; border-radius: 24px !important; padding: 24px 28px; } #header .dropdown-menu .title, #header .dropdown-menu h4, #header .dropdown-menu h5, #header .dropdown-menu .menu-level-2 > a { color: #0f172a !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; } #header .dropdown-menu .menu-level-3 a, #header .dropdown-menu li a { font-size: 14px; line-height: 1.9; font-weight: 500; color: #475569 !important; } #header .dropdown-menu li > a:hover { background: rgba(15, 23, 42, 0.06) !important; color: #0f172a !important; } #header .dropdown-menu ul { margin: 0; padding: 0; list-style: none; } #header .dropdown-menu img { border-radius: 14px; } /* ---- Spacing rhythm & Compact Homepage Layout ---- */ .section-product-v1, .index-section .section-product-v1 { margin-top: clamp(14px, 2vw, 22px) !important; padding-top: 2px !important; padding-bottom: 4px !important; } .section-product-v1 .section-title { margin-bottom: 12px !important; } .section-product-v1 .section-title h2 { font-size: clamp(20px, 2.2vw, 26px) !important; margin-bottom: 2px !important; line-height: 1.2 !important; } .section-product-v1 .section-title h2:after { background: linear-gradient(90deg, #0f172a, #b08d57) !important; border-radius: 2px !important; width: 38px !important; height: 2px !important; margin: 6px auto 0 !important; } .section-product-v1 .section-title .engo-product-sub-title { font-size: 11px !important; letter-spacing: 0.16em !important; font-weight: 700 !important; color: #b08d57 !important; margin-bottom: 2px !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .engo-col-slider-section + .engo-product-v1-wrap .section-product-v1, .shopify-section:has(.engo-col-slider-section) + .shopify-section .section-product-v1, .shopify-section:has(.engo-col-slider-section) + .shopify-section .engo-product-v1-wrap .section-product-v1, .shopify-section:has(.section-product-v1) + .shopify-section .section-product-v1, .shopify-section:has(.engo-product-v1-wrap) + .shopify-section .section-product-v1, .shopify-section:has(.section-banner-v1) + .shopify-section .section-product-v1, .shopify-section:has(.section-product-v1) + .shopify-section .section-banner-v1, .engo-product-v1-wrap + .engo-product-v1-wrap .section-product-v1 { margin-top: 12px !important; } .brand-benefits { margin-top: var(--space-section) !important; } .brand-story { margin-top: var(--space-section) !important; } .brand-benefits + .brand-story, .brand-story + .brand-benefits { margin-top: var(--space-block) !important; } footer.footer-v1 { margin-top: var(--space-section) !important; } .product-item-v1 { margin-bottom: 26px !important; } .product-grid-view .product-item-v1 { margin-bottom: 30px !important; } .product-item-v1 .product-info { padding-top: 12px !important; } .content-page-detail .container-fluid { padding-bottom: var(--space-block); } .detail-info > * { margin-top: 0; } .detail-info .product-type { margin-bottom: 6px; } .detail-info .product-title { margin: 0 0 8px; } .detail-info .product-price { margin: 0 0 14px !important; } .detail-info .product-des { margin: 0 0 18px !important; } .detail-info .quantity { margin: 18px 0 0; } .engo-swatch { margin: 18px 0 0 !important; } .engo-swatch + .engo-swatch { margin-top: 20px !important; } .detail-info .engoj-btn-addtocart { margin-top: 20px !important; } .engo-trust { margin-top: 24px !important; } .detail-tabs { margin-top: var(--space-section) !important; } .title-page, .wrap-bread-crumb { margin-bottom: 20px; } @media (max-width: 767px) { :root { --space-section: 16px; --space-block: 10px; } .brand-benefits__list { padding: 18px 14px; } .engo-col-slider-section { padding-top: 16px !important; padding-bottom: 6px !important; } .section-product-v1, .index-section .section-product-v1 { margin-top: 10px !important; padding-top: 0 !important; padding-bottom: 2px !important; } .section-product-v1 .section-title { margin-bottom: 8px !important; } .shopify-section:has(.engo-col-slider-section) + .shopify-section .section-product-v1, .shopify-section:has(.section-product-v1) + .shopify-section .section-product-v1, .shopify-section:has(.engo-product-v1-wrap) + .shopify-section .section-product-v1, .shopify-section:has(.section-banner-v1) + .shopify-section .section-product-v1, .shopify-section:has(.section-product-v1) + .shopify-section .section-banner-v1 { margin-top: 8px !important; } } /* ========================================================== Product page controls, You may also like, compact footer ========================================================== */ /* ---- Quantity capsule + Add to cart ---- */ .detail-info .quantity { display: flex; align-items: center; gap: 14px; margin: 18px 0 0 !important; } .detail-info .quantity .js-qty { display: flex; align-items: center; gap: 14px; } .detail-info .quantity .js-qty p { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .engo-qty { display: inline-flex; align-items: center; height: 50px; border: 1px solid rgba(15,23,42,.18); border-radius: 999px; background: rgba(255,255,255,.85); box-shadow: 0 2px 10px rgba(15,23,42,.06); overflow: hidden; } .engo-qty input[type="number"] { width: 48px; height: 100%; border: 0 !important; background: transparent !important; text-align: center; font-size: 16px; font-weight: 600; color: #0f172a; padding: 0 !important; margin: 0 !important; box-shadow: none !important; -moz-appearance: textfield; appearance: textfield; } .engo-qty input[type="number"]::-webkit-outer-spin-button, .engo-qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .engo-qty button { width: 46px; height: 100%; border: 0; background: transparent; font-size: 20px; line-height: 1; color: #0f172a; cursor: pointer; transition: background .2s ease; } .engo-qty button:hover { background: rgba(15,23,42,.08); } .detail-info .engoj-btn-addtocart, .detail-info button.shop-button, #AddToCartForm button[type="submit"] { border-radius: 14px !important; min-height: 48px; height: 48px; padding: 0 28px; width: 100%; margin: 0 !important; background: linear-gradient(180deg, #1e293b, #0f172a) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 8px 22px rgba(15,23,42,.3), 0 1px 0 rgba(255,255,255,.25) inset; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: 14px; transition: transform .3s var(--ease-spring), box-shadow .3s ease; } .detail-info .engoj-btn-addtocart:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15,23,42,.34), 0 1px 0 rgba(255,255,255,.25) inset; } .detail-info .engoj-btn-addtocart:active { transform: scale(.985); } /* ---- You may also like / Related ---- */ .featured-product, .related-product { display: block; clear: both; margin-top: var(--space-section); } .featured-product h2, .related-product h2 { font-size: clamp(24px, 3vw, 36px) !important; line-height: 1.15 !important; margin-bottom: var(--space-block) !important; text-align: center; font-weight: 600; } .featured-product .product-item-v1, .related-product .product-item-v1 { opacity: 1; visibility: visible; } .featured-product .glass-reveal, .related-product .glass-reveal { opacity: 1; transform: none; } /* ---- Compact footer ---- */ footer.footer-v1 { margin-top: var(--space-section) !important; } footer.footer-v1 .footer-top { padding: 34px 0 18px !important; border-radius: 28px 28px 0 0; } footer.footer-v1 .footer-top .row { row-gap: 18px; } footer.footer-v1 .footer-top [class*="footer-column"] { margin-bottom: 0 !important; padding-bottom: 0 !important; } footer.footer-v1 .footer-logo { display: inline-block; margin-bottom: 14px; } footer.footer-v1 .footer-logo img { width: 140px; height: auto; display: block; } footer.footer-v1 h3, footer.footer-v1 h4 { font-size: 15px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px !important; line-height: 1.2; } footer.footer-v1 p, footer.footer-v1 li, footer.footer-v1 a, footer.footer-v1 .desc { font-size: 14px !important; line-height: 1.5 !important; } footer.footer-v1 .footer-address, footer.footer-v1 .footer-tel, footer.footer-v1 .footer-email, footer.footer-v1 .footer-clock { margin: 0 0 8px !important; display: flex; align-items: flex-start; gap: 10px; } footer.footer-v1 .footer-address span, footer.footer-v1 .footer-tel span, footer.footer-v1 .footer-email span, footer.footer-v1 .footer-clock span { margin: 3px 0 0 !important; flex: 0 0 auto; color: #38bdf8; } footer.footer-v1 ul.list-unstyled li { margin: 0 0 6px !important; padding: 0 !important; } footer.footer-v1 .payment-method { margin-top: 12px !important; } footer.footer-v1 .payment-method img { max-height: 24px; width: auto; opacity: .9; } footer.footer-v1 .footer-bottom { padding: 12px 0 !important; border-top: 1px solid rgba(255,255,255,.08); } footer.footer-v1 .footer-bottom p { margin: 0 !important; font-size: 13px !important; opacity: .85; text-transform: none !important; } footer.footer-v1 a { transition: color .2s ease, padding-left .25s var(--ease-spring); } footer.footer-v1 ul.list-unstyled a:hover { padding-left: 4px; } @media (max-width: 767px) { footer.footer-v1 .footer-top { padding: 26px 0 12px !important; border-radius: 22px 22px 0 0; } } /* ========================================================== Header non-overlap, Size guide button, Quantity + ATC row, Hover zoom /* Collection Page & Non-Index Compact Top Padding */ @media (min-width: 1200px) { body:not(.template-index) { padding-top: 76px !important; } } @media (max-width: 1199px) { body:not(.template-index) { padding-top: 66px !important; } } @media (max-width: 767px) { body:not(.template-index) { padding-top: 58px !important; } } /* ========================================================================== COLLECTION HERO HEADER & BANNER (Ultra-Compact & Mobile-Optimized) ========================================================================== */ .banner-collection-page { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .pd-banner, .pd-banner--simple { position: relative !important; width: 100% !important; min-height: auto !important; padding: 8px 16px 6px !important; background: transparent !important; border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; box-shadow: none !important; } .pd-banner--simple .page-title, .pd-banner:not(.pd-banner--has-bg) .page-title, .engo-col-page-title { position: static !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; max-width: 820px !important; margin: 0 auto !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; } .engo-col-header-inline { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 2px 0 !important; } .pd-banner--simple .page-title h2, .pd-banner:not(.pd-banner--has-bg) .page-title h2, .engo-col-title-themed { font-family: inherit !important; font-size: clamp(20px, 2.2vw, 25px) !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; line-height: 1.15 !important; margin: 0 !important; display: inline-block !important; } .pd-banner--simple .bread-crumb, .pd-banner:not(.pd-banner--has-bg) .bread-crumb { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 4px !important; margin: 0 0 1px 0 !important; padding: 0 !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #94a3b8 !important; background: transparent !important; } .pd-banner--simple .bread-crumb a, .pd-banner:not(.pd-banner--has-bg) .bread-crumb a { color: #94a3b8 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .pd-banner--simple .bread-crumb a:hover, .pd-banner:not(.pd-banner--has-bg) .bread-crumb a:hover { color: #c5a880 !important; } .pd-banner--simple .bread-crumb strong, .pd-banner:not(.pd-banner--has-bg) .bread-crumb strong { color: #0f172a !important; font-weight: 700 !important; } .pd-banner--simple .bread-crumb i, .pd-banner:not(.pd-banner--has-bg) .bread-crumb i { color: #cbd5e1 !important; margin: 0 2px !important; font-style: normal !important; } .engo-col-pill { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 2px 9px !important; border-radius: 999px !important; background: rgba(15, 23, 42, 0.06) !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; color: #0f172a !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; margin: 0 !important; line-height: 1.3 !important; } .engo-col-desc { font-size: 12.5px !important; color: #64748b !important; line-height: 1.4 !important; max-width: 600px !important; margin: 3px auto 0 !important; } .engo-col-desc p { margin: 0 !important; font-size: 12.5px !important; line-height: 1.4 !important; } .content-collection-page { margin-top: 14px !important; } @media (max-width: 767px) { .pd-banner, .pd-banner--simple { padding: 6px 12px 4px !important; } .engo-col-title-themed { font-size: 18px !important; } .engo-col-desc { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 11px !important; } .content-collection-page { margin-top: 8px !important; } .shop-boxed-banner { margin-bottom: 10px !important; } } } .pd-banner--has-bg { position: relative !important; width: 100% !important; min-height: clamp(180px, 20vw, 280px) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; padding: 28px 20px !important; } .pd-banner__media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .pd-banner__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } .pd-banner__overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(14,24,48,0.45) 0%, rgba(14,24,48,0.82) 100%) !important; } .pd-banner--has-bg .page-title { position: relative !important; z-index: 2 !important; color: #ffffff !important; max-width: 900px !important; margin: 0 auto !important; text-align: center !important; } .pd-banner--has-bg .page-title h2 { color: #ffffff !important; font-size: clamp(26px, 3.6vw, 42px) !important; font-weight: 800 !important; text-transform: uppercase !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important; margin: 4px 0 8px !important; } .pd-banner--has-bg .bread-crumb a, .pd-banner--has-bg .bread-crumb strong, .pd-banner--has-bg .bread-crumb i { color: rgba(255, 255, 255, 0.88) !important; } .pd-banner--has-bg .bread-crumb a:hover { color: #f3d59b !important; } .pd-banner--has-bg .engo-col-desc { color: rgba(255, 255, 255, 0.9) !important; } .pd-banner--has-bg .engo-col-pill { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.35) !important; color: #ffffff !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; } .content-collection-page { margin-top: 18px !important; padding-top: 0 !important; } @media (max-width: 767px) { .pd-banner--simple { padding: 14px 15px 12px !important; } .content-collection-page { margin-top: 12px !important; } } /* ---- Breadcrumb Clean Styling (Product & Inner Pages) ---- */ .wrap-bread-crumb { margin: 14px 0 20px !important; padding: 0 !important; } .wrap-bread-crumb .bread-crumb { background: transparent !important; padding: 0 !important; font-size: 13px !important; line-height: 1.6 !important; color: #64748b !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 2px !important; } .wrap-bread-crumb .bread-crumb a { color: #0f172a !important; text-decoration: none !important; font-weight: 500 !important; transition: color 0.2s ease !important; } .wrap-bread-crumb .bread-crumb a:hover { color: #c5a880 !important; } .wrap-bread-crumb .bread-crumb a::after { display: none !important; } .wrap-bread-crumb .bread-crumb i { font-style: normal !important; margin: 0 6px !important; color: #b0b4be !important; font-size: 12px !important; } .wrap-bread-crumb .bread-crumb strong.active { font-weight: 500 !important; color: #64748b !important; } .wrap-bread-crumb .bread-crumb strong.active i { font-style: normal !important; margin: 0 6px !important; color: #b0b4be !important; } @media (max-width: 767px) { .wrap-bread-crumb { margin: 8px 0 14px !important; } .wrap-bread-crumb .bread-crumb { font-size: 12px !important; } } /* ---- Size selector + Size guide pill button ---- */ .engo-swatch { max-width: 440px; } .engo-swatch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; width: 100%; } .engo-size-select-wrap { max-width: 100% !important; width: 100%; } .engo-sizeguide-btn, a.engo-sizeguide-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(15,23,42,.07); border: 1px solid rgba(15,23,42,.16); color: #0f172a !important; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; text-decoration: none !important; cursor: pointer; transition: all .25s var(--ease-spring); } .engo-sizeguide-btn i { font-size: 12px; color: #0f172a; } .engo-sizeguide-btn:hover, a.engo-sizeguide-btn:hover { background: #0f172a; border-color: #0f172a; color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15,23,42,.18); } .engo-sizeguide-btn:hover i, a.engo-sizeguide-btn:hover i { color: #fff; } /* ---- Interactive Luxury Size Pills ---- */ .engo-size-pills-wrap { width: 100%; margin-top: 6px; margin-bottom: 12px; } .engo-size-pills { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important; gap: 8px !important; width: 100% !important; } @media (max-width: 480px) { .engo-size-pills { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } } @media (max-width: 340px) { .engo-size-pills { grid-template-columns: repeat(2, 1fr) !important; } } .engo-size-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 42px !important; padding: 0 8px !important; border-radius: 12px !important; border: 1.5px solid rgba(15, 23, 42, 0.16) !important; background: rgba(255, 255, 255, 0.9) !important; color: #0f172a !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; cursor: pointer !important; outline: none !important; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .engo-size-pill:hover:not(:disabled) { border-color: #0f172a; background: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1); } .engo-size-pill.is-active { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28) !important; } .engo-size-pill.is-soldout { opacity: 0.45; background: #f8fafc !important; color: #94a3b8 !important; border-color: #e2e8f0 !important; cursor: not-allowed !important; position: relative; overflow: hidden; } .engo-size-pill.is-soldout::after { content: ''; position: absolute; top: 50%; left: 10%; right: 10%; height: 1.5px; background: #94a3b8; transform: rotate(-25deg); } /* ---- Direct Order via WhatsApp Button ---- */ .engo-wa-order-wrap { margin-top: 12px; width: 100%; } .engo-wa-order-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; height: 48px; border-radius: 14px; background: linear-gradient(180deg, #25D366, #128C7E) !important; color: #ffffff !important; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none !important; box-shadow: 0 6px 18px rgba(18, 140, 126, 0.28), 0 1px 0 rgba(255, 255, 255, 0.25) inset; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(255, 255, 255, 0.2); } .engo-wa-order-btn i { font-size: 20px; } .engo-wa-order-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 140, 126, 0.36); filter: brightness(1.04); } .engo-wa-order-btn:active { transform: scale(0.985); } /* ---- Interactive Smart City Delivery Estimator ---- */ .engo-delivery-estimator { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(15, 23, 42, 0.1); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); display: flex; flex-direction: column; gap: 12px; } .engo-deliv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .engo-deliv-loc { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #0f172a; font-weight: 600; } .engo-deliv-pin { color: #b08d57; display: inline-flex; align-items: center; } .engo-city-select-box { position: relative; display: inline-flex; align-items: center; z-index: 40; } .engo-city-select-native { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none !important; overflow: hidden !important; } .engo-city-trigger { display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 32px !important; padding: 0 12px 0 14px !important; border-radius: 999px !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.16) !important; color: #0f172a !important; font-size: 12.5px !important; font-weight: 700 !important; cursor: pointer !important; outline: none !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .engo-city-trigger:hover, .engo-city-trigger.is-open { border-color: #b08d57 !important; box-shadow: 0 4px 14px rgba(176, 141, 87, 0.18) !important; } .engo-city-trigger .engo-city-caret { position: static !important; display: inline-flex !important; align-items: center !important; color: #0f172a !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .engo-city-trigger.is-open .engo-city-caret { transform: rotate(180deg) !important; color: #b08d57 !important; } .engo-city-menu { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; width: 255px !important; max-width: 90vw !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; border-radius: 16px !important; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(0, 0, 0, 0.04) !important; padding: 8px !important; z-index: 9999 !important; display: none !important; opacity: 0 !important; transform: translateY(-6px) scale(0.98) !important; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .engo-city-menu.is-open { display: block !important; opacity: 1 !important; transform: translateY(0) scale(1) !important; } .engo-city-menu__header { padding: 6px 10px 8px 10px !important; font-size: 10.5px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #94a3b8 !important; border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; margin-bottom: 4px !important; } .engo-city-menu__list { max-height: 230px !important; overflow-y: auto !important; overscroll-behavior: contain !important; padding-right: 2px !important; } .engo-city-menu__list::-webkit-scrollbar { width: 5px !important; } .engo-city-menu__list::-webkit-scrollbar-track { background: transparent !important; } .engo-city-menu__list::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15) !important; border-radius: 10px !important; } .engo-city-menu__list::-webkit-scrollbar-thumb:hover { background: rgba(176, 141, 87, 0.5) !important; } .engo-city-option { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 8px 10px !important; border: none !important; background: transparent !important; border-radius: 10px !important; cursor: pointer !important; text-align: left !important; color: #0f172a !important; font-size: 12.5px !important; font-weight: 600 !important; transition: all 0.15s ease !important; margin: 1px 0 !important; box-shadow: none !important; line-height: 1.4 !important; } .engo-city-option:hover { background: #f1f5f9 !important; color: #0f172a !important; } .engo-city-option.is-active { background: rgba(176, 141, 87, 0.12) !important; color: #8a682f !important; font-weight: 700 !important; } .engo-city-option__badge { font-size: 10.5px !important; font-weight: 700 !important; color: #64748b !important; background: #f8fafc !important; padding: 2px 7px !important; border-radius: 999px !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; white-space: nowrap !important; } .engo-city-option.is-active .engo-city-option__badge { background: #ffffff !important; color: #8a682f !important; border-color: rgba(176, 141, 87, 0.3) !important; } .engo-city-select { height: 32px; padding: 0 24px 0 10px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.16); color: #0f172a; font-size: 12.5px; font-weight: 700; cursor: pointer; appearance: none; -webkit-appearance: none; outline: none; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); } .engo-city-caret { position: absolute; right: 8px; pointer-events: none; color: #0f172a; display: inline-flex; } .engo-deliv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); font-size: 11px; font-weight: 700; color: #15803d; letter-spacing: 0.02em; } .engo-deliv-pulse { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); animation: engoPulse 2s infinite; } @keyframes engoPulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .engo-deliv-body { display: flex; flex-direction: column; gap: 8px; } .engo-deliv-row { display: flex; align-items: center; gap: 10px; } .engo-deliv-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(15, 23, 42, 0.05); color: #0f172a; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .engo-deliv-icon--bolt { background: rgba(234, 179, 8, 0.12); color: #ca8a04; } .engo-deliv-main-msg { font-size: 13.5px; color: #0f172a; } .engo-deliv-cutoff-msg { font-size: 12.5px; color: #475569; } .engo-cutoff-timer { color: #b08d57; font-weight: 700; } .engo-deliv-perks { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(15, 23, 42, 0.06); flex-wrap: wrap; } .engo-perk-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #64748b; font-weight: 500; } .engo-perk-item i { color: #b08d57; font-size: 12px; } /* ---- Drawer Cart Free Shipping Progress Bar ---- */ .engo-free-shipping-bar { padding: 12px 18px 14px; background: rgba(15, 23, 42, 0.035); border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .engo-free-shipping-msg { font-size: 13px; line-height: 1.4; color: #0f172a; font-weight: 500; text-align: center; margin-bottom: 8px; } .engo-free-shipping-msg i { color: #b08d57; margin-right: 4px; } .engo-fs-unlocked { color: #128C7E !important; font-weight: 600 !important; } .engo-fs-unlocked i { color: #128C7E !important; } .engo-fs-needed-amount { color: #b08d57; font-weight: 700; } .engo-fs-progress-track { width: 100%; height: 7px; background: rgba(15, 23, 42, 0.1); border-radius: 999px; overflow: hidden; } .engo-fs-progress-fill { height: 100%; background: linear-gradient(90deg, #0f172a, #b08d57); border-radius: 999px; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .engo-fs-progress-fill.is-unlocked { background: linear-gradient(90deg, #128C7E, #25D366) !important; box-shadow: 0 0 10px rgba(37, 211, 102, 0.5); } /* ---- Predictive Instant Search Results Dropdown ---- */ .engo-predictive-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 16px; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16); overflow: hidden; z-index: 9999; display: none; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; max-height: 420px; overflow-y: auto; } .engo-predictive-dropdown.is-open { display: block; opacity: 1; transform: translateY(0); } .engo-pred-list { display: flex; flex-direction: column; } .engo-pred-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(15, 23, 42, 0.05); text-decoration: none !important; transition: background 0.2s ease; } .engo-pred-item:hover { background: rgba(15, 23, 42, 0.04); } .engo-pred-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: 0 0 48px; background: #f1f5f9; } .engo-pred-thumb--placeholder { display: flex; align-items: center; justify-content: center; } .engo-pred-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .engo-pred-title { font-size: 13px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .engo-pred-price { font-size: 13px; font-weight: 700; color: #b08d57; } .engo-pred-arrow { color: #94a3b8; font-size: 14px; } .engo-pred-all { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; font-size: 13px; font-weight: 600; color: #0f172a !important; background: rgba(15, 23, 42, 0.03); text-decoration: none !important; transition: background 0.2s ease; } .engo-pred-all:hover { background: #0f172a; color: #ffffff !important; } .engo-pred-empty { padding: 18px 16px; font-size: 13px; color: #64748b; text-align: center; } /* ---- Collection Page: Filter & Drawer Cleanup ---- */ .button-filter { display: none !important; /* Hide old floating awkward round button */ } .change-button-filter { display: none !important; } /* Mobile Filter Drawer Head */ .engo-sidebar-mobile-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 20px 14px !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; margin-bottom: 16px !important; } .engo-sidebar-mobile-head h4 { font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .engo-sidebar-close-btn { background: transparent !important; border: 0 !important; color: #0f172a !important; font-size: 18px !important; cursor: pointer !important; padding: 4px 8px !important; } /* ---- Quantity capsule (theme native .js-qty) + Add to Cart side by side ---- */ #AddToCartForm { max-width: 440px; } .detail-info .quantity { display: inline-flex !important; align-items: center; vertical-align: middle; margin: 22px 12px 0 0 !important; width: auto !important; } .detail-info .quantity > p, .detail-info .quantity .js-qty > p { display: none !important; } .detail-info .js-qty { display: inline-flex !important; align-items: center; justify-content: space-between; width: 138px !important; height: 52px !important; padding: 0 4px !important; margin: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.9) !important; border: 1px solid rgba(15,23,42,.18) !important; box-shadow: 0 4px 14px rgba(15,23,42,.06); overflow: hidden; position: relative; } .detail-info .js-qty input.js-qty__num, .detail-info .js-qty input[type="text"], .detail-info .js-qty input[type="number"] { width: 46px !important; height: 100% !important; border: 0 !important; background: transparent !important; text-align: center !important; padding: 0 !important; margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; color: #0f172a !important; order: 2; } .detail-info .js-qty__adjust { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 0 !important; background: transparent !important; color: #0f172a !important; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, transform .2s ease; } .detail-info .js-qty__adjust:hover { background: rgba(15,23,42,.08) !important; } .detail-info .js-qty__adjust:active { transform: scale(.92); } .detail-info .js-qty__adjust--minus { order: 1; } .detail-info .js-qty__adjust--plus { order: 3; } .detail-info .js-qty__adjust i { display: none !important; } .detail-info .js-qty__adjust--minus:before { content: "\2212"; font-size: 20px; font-weight: 600; line-height: 1; color: #0f172a; } .detail-info .js-qty__adjust--plus:before { content: "+"; font-size: 20px; font-weight: 600; line-height: 1; color: #0f172a; } .detail-info .engoj-btn-addtocart, #AddToCartForm button[type="submit"] { display: inline-flex !important; align-items: center; justify-content: center; vertical-align: middle; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 28px !important; border-radius: 14px !important; } @media (max-width: 480px) { .detail-info .quantity { margin-right: 0 !important; } .detail-info .js-qty { width: 122px !important; } .detail-info .engoj-btn-addtocart, #AddToCartForm button[type="submit"] { flex: 1 1 auto !important; width: auto !important; min-width: 0; padding: 0 18px !important; } } /* ---- Product main image hover zoom ---- */ .detail-gallery .mid .slick-slide, .detail-gallery .mid > div { overflow: hidden; border-radius: 24px; cursor: zoom-in; } .detail-gallery .mid img { transition: transform .35s ease-out; will-change: transform; } .detail-gallery .mid .is-zooming img, .detail-gallery .mid .slick-slide:hover img { transform: scale(1.75); } /* ========================================================== Pages (About, Contact, Store Locations, Payment Methods) & Shopify Policies ========================================================== */ .engo-page-wrap { padding: 24px 0 40px; } .engo-page-hero { max-width: 760px; margin: 0 auto 36px; } .engo-page-hero .bread-crumb { margin-bottom: 10px; font-size: 13px; color: #6f6b63; } .engo-page-hero .bread-crumb a { color: #6f6b63; text-decoration: none; } .engo-page-hero .bread-crumb strong { color: #0f172a; font-weight: 600; } .engo-page-title { font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: #0f172a; margin: 0 0 10px; letter-spacing: -.02em; } .engo-page-subtitle { font-size: 16px; color: #5a6072; margin: 0; line-height: 1.6; } .engo-glass-card { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: clamp(22px, 3vw, 38px); } .engo-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: #b08d57; margin-bottom: 10px; } /* About page */ .engo-about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; max-width: 1140px; margin: 0 auto; } .engo-about-story h2 { font-size: clamp(24px, 3vw, 34px); color: #0f172a; margin: 0 0 16px; line-height: 1.2; } .engo-about-story p { font-size: 16px; line-height: 1.75; color: #444b5e; margin: 0 0 14px; } .engo-about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .engo-stat-box { background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 20px 18px; text-align: center; } .engo-stat-box strong { display: block; font-size: 28px; font-weight: 700; color: #0f172a; margin-bottom: 4px; } .engo-stat-box span { font-size: 13px; color: #5a6072; line-height: 1.4; display: block; } @media (max-width: 991px) { .engo-about-grid { grid-template-columns: 1fr; } } /* Contact page */ .engo-contact-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; max-width: 1180px; margin: 0 auto; align-items: start; } .engo-contact-cards { display: grid; gap: 16px; } .engo-info-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; } .engo-info-card i { width: 44px; height: 44px; border-radius: 50%; background: rgba(15,23,42,.08); color: #0f172a; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 44px; } .engo-info-card h3 { font-size: 15px; font-weight: 600; color: #0f172a; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; } .engo-info-card p { margin: 0; font-size: 14px; color: #4a5164; line-height: 1.55; } .engo-info-card a { color: #0f172a; text-decoration: none; font-weight: 500; } .engo-info-card a:hover { color: #b08d57; } .engo-contact-form-wrap h2 { font-size: 24px; color: #0f172a; margin: 0 0 8px; } .engo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .engo-field { margin-bottom: 16px; } .engo-field label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #0f172a; margin-bottom: 6px; } .engo-field input, .engo-field textarea { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(15,23,42,.16); background: rgba(255,255,255,.88); font-size: 14px; color: #0f172a; transition: border-color .2s ease, box-shadow .2s ease; } .engo-field input:focus, .engo-field textarea:focus { outline: 0; border-color: #0f172a; box-shadow: 0 0 0 4px rgba(15,23,42,.08); background: #fff; } .engo-alert-success { padding: 14px 18px; border-radius: 12px; background: #e8f5e9; color: #1b5e20; font-weight: 500; margin-bottom: 16px; } @media (max-width: 991px) { .engo-contact-layout { grid-template-columns: 1fr; } .engo-form-row { grid-template-columns: 1fr; } } /* Store locations & Payment methods cards */ .engo-locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; } .engo-location-card { transition: transform .35s var(--ease-spring), box-shadow .35s ease; } .engo-location-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,.16); } .engo-city-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(15,23,42,.08); color: #0f172a; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; } .engo-location-card h3 { font-size: 20px; font-weight: 600; color: #0f172a; margin: 0 0 12px; } .engo-location-card p { margin: 0 0 8px; font-size: 14px; color: #4a5164; line-height: 1.55; display: flex; align-items: flex-start; gap: 8px; } .engo-location-card p i { color: #b08d57; margin-top: 3px; flex: 0 0 16px; } .engo-location-card a { color: #0f172a; font-weight: 600; text-decoration: none; } .engo-pay-icon { font-size: 28px; color: #0f172a; width: 54px; height: 54px; border-radius: 16px; background: rgba(15,23,42,.07); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .engo-page-prose { max-width: 920px; margin: 0 auto; line-height: 1.75; color: #3a4256; } /* Shopify Policy pages (/policies/privacy-policy, shipping-policy, terms-of-service, refund-policy) */ .shopify-policy__container { max-width: 920px !important; margin: 28px auto 60px !important; background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: clamp(24px, 4vw, 48px) !important; } .shopify-policy__title { text-align: center; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid rgba(15,23,42,.1); } .shopify-policy__title h1 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; color: #0f172a; margin: 0; text-transform: capitalize; } .shopify-policy__body .rte { font-size: 15px; line-height: 1.75; color: #3a4256; } .shopify-policy__body .rte h2, .shopify-policy__body .rte h3, .shopify-policy__body .rte h4 { color: #0f172a; font-weight: 600; margin: 24px 0 10px; } /* ========================================================== Header Sticky/Floating Fix, Collection Filters & All Theme Sections ========================================================== */ :root { --glass-top: 48px; } /* Announcement bar stays in normal document flow at the very top */ .brand-announce { position: relative; z-index: 900; } /* Header: floating rounded glass pill at the top of the page (below announcement bar), then docking smoothly to top:0 when scrolling */ #header, .header-v1, .header-v2, .header-v3, .header-v4, #header.menu-scroll-v1, .header-v2.menu-scroll-v1 { position: fixed !important; top: var(--glass-top, 36px) !important; left: 0 !important; right: 0 !important; width: 100% !important; border-radius: 0 !important; z-index: 1050 !important; transform: none !important; transition: top .35s var(--ease-spring), background .3s ease, box-shadow .3s ease !important; } #header.is-scrolled, .header-v2.is-scrolled { top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; border-radius: 0 !important; background: rgba(255,255,255,.88) !important; box-shadow: 0 14px 42px rgba(15,23,42,.18), 0 1px 0 rgba(255,255,255,.85) inset !important; } #header.is-hidden { transform: none !important; } /* ---- Collection Filter & Sorting Toolbar (Liquid Glass Bar) ---- */ .content-collection-page .title-page { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 12px 24px !important; margin: 12px 0 28px !important; overflow: visible !important; position: relative; z-index: 40; } .content-collection-page .title-page .row { align-items: center; } .content-collection-page .title-page .showing { margin: 0 !important; padding: 0 !important; } .content-collection-page .title-page .showing span { margin-left: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; color: #4a5164 !important; letter-spacing: 0.01em; } .content-collection-page .part-product-wrap { align-items: center; justify-content: flex-end; gap: 12px; float: none !important; } .content-collection-page .show-product { align-items: center; gap: 8px; margin: 0 !important; } .engo-show-label { margin: 0 !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #64748b !important; } /* Accessible screen-reader hidden helper */ .engo-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ---- Luxury Custom Dropdowns (Sort By & Show) ---- */ .engo-custom-dropdown-wrap { position: relative; display: inline-flex; } .engo-dropdown-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.15); color: #0f172a; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; user-select: none; outline: none; } .engo-dropdown-btn:hover { border-color: #0f172a; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .engo-dropdown-btn.is-active, .engo-custom-dropdown-wrap.is-open .engo-dropdown-btn { border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12), 0 4px 14px rgba(15, 23, 42, 0.08); } .engo-dropdown-label { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .engo-dropdown-arrow { display: inline-flex; align-items: center; justify-content: center; color: #0f172a; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .engo-custom-dropdown-wrap.is-open .engo-dropdown-arrow { transform: rotate(180deg); } /* Floating Dropdown Menu (Frosted Glass Card) */ .engo-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 9999; min-width: 220px; padding: 8px; background: rgba(255, 255, 255, 0.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 18px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.04); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97); transform-origin: top right; transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s; pointer-events: none; } .engo-custom-dropdown-wrap.is-open .engo-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .engo-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #0f172a; cursor: pointer; transition: all 0.16s ease; user-select: none; } .engo-dropdown-item:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; transform: translateX(2px); } .engo-dropdown-item.is-active { background: #0f172a !important; color: #ffffff !important; font-weight: 600 !important; } .engo-dropdown-item .engo-dropdown-check { display: none; align-items: center; justify-content: center; } .engo-dropdown-item.is-active .engo-dropdown-check { display: inline-flex; color: #ffffff; } /* Compact variant for SHOW dropdown */ .engo-dropdown-btn--compact { padding: 0 12px 0 14px; gap: 8px; min-width: 58px; } .engo-dropdown-menu--compact { min-width: 140px; left: 0; right: auto; transform-origin: top left; } .content-collection-page .part-product-size { gap: 8px; margin: 0 !important; } .content-collection-page .part-product-size a { width: 40px !important; height: 40px !important; line-height: 40px !important; border-radius: 50% !important; text-align: center; background: rgba(15, 23, 42, 0.05) !important; color: #0f172a !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none !important; transition: all .25s var(--ease-spring); } .content-collection-page .part-product-size a.active, .content-collection-page .part-product-size a:hover { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22) !important; transform: translateY(-1px); } /* Collection sidebar widgets (if enabled) */ .collection-sidebar .widget { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 20px 22px; margin-bottom: 22px; } /* ---- All Homepage, Banner, Slideshow, Countdown & Newsletter Sections ---- */ /* Hero slideshow buttons & dots */ .section-slideshow-v1 .button-name, .section-banner-v1 .button-name, .section-banner-v2 .button-name, .section-banner-v3 .button-name, .section-banner-v5 .button-name, .section-countdown-v1 .button-name { border-radius: 999px !important; padding: 13px 32px !important; background: rgba(15,23,42,.88) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.3) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(15,23,42,.25); font-size: 13px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; text-decoration: none !important; display: inline-block; transition: transform .3s var(--ease-spring), background .25s ease, box-shadow .25s ease !important; } .section-slideshow-v1 .button-name:hover, .section-banner-v1 .button-name:hover, .section-banner-v2 .button-name:hover, .section-banner-v3 .button-name:hover, .section-banner-v5 .button-name:hover, .section-countdown-v1 .button-name:hover { background: #fff !important; color: #0f172a !important; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,23,42,.3); } /* Banner sections: rounded cards with spacing and smooth zoom */ .section-banner-v3 { max-width: 1600px; margin: var(--space-section) auto 0; padding: 0 18px; } .section-banner-v3 > .row { margin-left: -12px !important; margin-right: -12px !important; row-gap: 24px; } .section-banner-v3 .banner-item { padding: 0 12px !important; } .section-banner-v3 .banner-item .img-url, .section-banner-v1 .banner-item .img-url, .section-banner-v2 .banner-item .img-url, .section-banner-v5 .banner-item .img-url { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 14px 36px rgba(15,23,42,.12); } .section-banner-v3 .banner-item img, .section-banner-v1 .banner-item img { transition: transform .6s var(--ease-spring); } .section-banner-v3 .banner-item:hover img, .section-banner-v1 .banner-item:hover img { transform: scale(1.04); } .section-banner-v3 .banner-info { background: rgba(255,255,255,.76); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 20px; padding: 22px 26px !important; box-shadow: 0 12px 32px rgba(15,23,42,.14); } .section-banner-v3 .banner-info h5 { color: #b08d57 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase; margin-bottom: 6px !important; } .section-banner-v3 .banner-info h2 { color: #0f172a !important; font-size: clamp(22px, 2.4vw, 32px) !important; line-height: 1.15 !important; margin-bottom: 14px !important; } /* Newsletter v1: Liquid Glass card */ .section-newsletter-v1 { max-width: 1564px; margin: var(--space-section) auto 0 !important; border-radius: 28px; overflow: hidden; box-shadow: 0 18px 46px rgba(15,23,42,.14); padding: 56px 24px !important; background-size: cover; background-position: center; position: relative; } .section-newsletter-v1 .newsletter { max-width: 640px; margin: 0 auto; background: rgba(255,255,255,.82); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 24px; padding: 34px 30px; box-shadow: var(--glass-shadow); } .section-newsletter-v1 .newsletter-info h2 { color: #0f172a !important; font-size: clamp(24px, 3vw, 34px) !important; margin-bottom: 8px !important; } .section-newsletter-v1 .newsletter-info p { color: #4a5164 !important; font-size: 15px !important; margin-bottom: 20px !important; } .section-newsletter-v1 form { width: 100%; max-width: 460px; background: #fff; border: 1px solid rgba(15,23,42,.16); border-radius: 999px; padding: 4px; box-shadow: 0 4px 14px rgba(15,23,42,.06); } .section-newsletter-v1 form .form-control { border: 0 !important; background: transparent !important; height: 44px !important; padding: 0 18px !important; color: #0f172a !important; font-size: 14px !important; flex: 1; } .section-newsletter-v1 form .btn-newsletter { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 0 !important; background: #0f172a !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .25s var(--ease-spring), background .2s ease; } .section-newsletter-v1 form .btn-newsletter:hover { background: #24365c !important; transform: scale(1.06); } /* Product Page Tabs (Description, Additional info, Reviews) */ .detail-tabs { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 28px 32px !important; } .detail-tabs .detail-tab-title { border-bottom: 1px solid rgba(15,23,42,.1) !important; margin-bottom: 22px !important; text-align: center; } .detail-tabs .list-tag-detail { gap: 10px; padding-bottom: 12px; flex-wrap: wrap; justify-content: center; } .detail-tabs .list-tag-detail li a { display: inline-block; padding: 9px 22px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em; color: #4a5164 !important; background: transparent; text-decoration: none !important; transition: all .25s var(--ease-spring); } .detail-tabs:not(.engo-tabs-elevated) .list-tag-detail li.active a, .detail-tabs:not(.engo-tabs-elevated) .list-tag-detail li a:hover { background: #0f172a !important; color: #fff !important; box-shadow: 0 6px 16px rgba(15,23,42,.2); } .detail-tabs .list-tag-detail li a:after, .detail-tabs .list-tag-detail li a:before { display: none !important; } /* Cart page, Quickview modal, Mini-cart & Login popup */ .content-cart-page { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 28px; margin-top: 20px; } .minicart-content, .search-box, .login-content-wrap, .quickview-wrapper { background: rgba(255,255,255,.94) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: 22px; } /* ---- Detailed About Us Page (about-template) ---- */ .engo-about-template { max-width: 1360px; margin: 0 auto; } .engo-about-banner { border-radius: 26px; overflow: hidden; box-shadow: 0 20px 50px rgba(15,23,42,.16); margin-bottom: 36px; max-height: 460px; } .engo-about-banner img { width: 100%; height: 420px; object-fit: cover; display: block; transition: transform .7s var(--ease-spring); } .engo-about-banner:hover img { transform: scale(1.03); } @media (max-width: 767px) { .engo-about-banner img { height: 240px; } } .engo-about-info-card { margin-bottom: 36px; } .engo-about-heading { font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: #0f172a; line-height: 1.2; margin: 0 0 14px; } .engo-about-lead { font-size: 16px; font-weight: 500; color: #2b3348; line-height: 1.7; margin: 0; } .engo-about-body { font-size: 15px; color: #4a5164; line-height: 1.8; margin: 0 0 14px; } .engo-about-author { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(15,23,42,.1); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #0f172a; } .engo-about-author span { color: #b08d57; font-weight: 600; margin-left: 6px; } .engo-about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 36px; } .engo-pillar-card { display: flex; flex-direction: column; justify-content: space-between; transition: transform .35s var(--ease-spring), box-shadow .35s ease; } .engo-pillar-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(15,23,42,.16); } .engo-pillar-card h3 { font-size: 22px; font-weight: 700; color: #0f172a; margin: 4px 0 10px; } .engo-pillar-card p { font-size: 14.5px; color: #4a5164; line-height: 1.7; margin: 0 0 18px; flex: 1; } .engo-pillar-link { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #0f172a !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; } .engo-pillar-link:hover { color: #b08d57 !important; } @media (max-width: 991px) { .engo-about-pillars { grid-template-columns: 1fr; } } .engo-about-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 44px; } .engo-service-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px 20px !important; } .engo-service-card i { width: 48px; height: 48px; border-radius: 16px; background: rgba(15,23,42,.08); color: #0f172a; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; } .engo-service-card h4 { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0 0 4px; } .engo-service-card p { font-size: 13.5px; color: #5a6072; line-height: 1.5; margin: 0; } @media (max-width: 1199px) { .engo-about-services { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .engo-about-services { grid-template-columns: 1fr; } } .engo-section-heading { font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: #0f172a; margin: 0 0 24px; } .engo-about-team { margin-bottom: 16px; } /* ========================================================== Homepage Transparent Header on Slideshow + Animated Glass on Scroll ========================================================== */ :root { --glass-top: 10px; } body.template-index { --glass-top: 44px; } body:not(.template-index) .brand-announce { display: none !important; } @media (min-width: 1200px) { body:not(.template-index) { padding-top: 66px !important; } } /* Dual logo toggle: default shows dark logo, hides light logo */ #header .engo-logo-light { display: none !important; } #header .engo-logo-dark { display: inline-block !important; } /* Base header transition for smooth animated glass reveal */ #header, .header-v1, .header-v2, .header-v3, .header-v4 { transition: top .45s var(--ease-spring), background-color .45s var(--ease-spring), -webkit-backdrop-filter .45s var(--ease-spring), backdrop-filter .45s var(--ease-spring), border-color .45s ease, box-shadow .45s var(--ease-spring), transform .45s var(--ease-spring) !important; } /* Homepage at top over slideshow: fully transparent header (glass appears on scroll) */ body.template-index #header:not(.is-scrolled), body.template-index .header-v2:not(.is-scrolled) { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: transparent !important; box-shadow: none !important; } body.template-index #header:not(.is-scrolled):before { opacity: 0 !important; } /* Switch to light logo and crisp white menu/icons when transparent over the hero slideshow */ body.template-index #header:not(.is-scrolled) .engo-logo-dark { display: none !important; } body.template-index #header:not(.is-scrolled) .engo-logo-light { display: inline-block !important; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)) !important; } body.template-index #header:not(.is-scrolled) .navbar-nav > .nav-item > a, body.template-index #header:not(.is-scrolled) .menu-level-1 { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,0,0,.45); } body.template-index #header:not(.is-scrolled) .navbar-nav > .nav-item:hover > a:before, body.template-index #header:not(.is-scrolled) .navbar-nav > .nav-item.show > a:before { background: rgba(255,255,255,.18) !important; } body.template-index #header:not(.is-scrolled) .header-right .form-control { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.45) !important; color: #ffffff !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body.template-index #header:not(.is-scrolled) .header-right .form-control::placeholder { color: rgba(255,255,255,.85) !important; } body.template-index #header:not(.is-scrolled) .header-right .search-submit, body.template-index #header:not(.is-scrolled) .header-right i, body.template-index #header:not(.is-scrolled) .btn-cart, body.template-index #header:not(.is-scrolled) .btn-cart i, body.template-index #header:not(.is-scrolled) .btn-login-icon, body.template-index #header:not(.is-scrolled) .btn-login-icon i { color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,.35); } body.template-index #header:not(.is-scrolled) .minicart-bag-number { background: #b08d57 !important; color: #fff !important; } /* On scroll: animate into the floating frosted Liquid Glass header */ #header.is-scrolled, .header-v2.is-scrolled { top: 8px !important; background: rgba(255,255,255,.86) !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--glass-border) !important; box-shadow: 0 14px 42px rgba(15,23,42,.18), 0 1px 0 rgba(255,255,255,.85) inset !important; animation: headerGlassReveal .45s var(--ease-spring); } @keyframes headerGlassReveal { 0% { transform: translateY(-10px) scale(.99); opacity: .75; } 100% { transform: translateY(0) scale(1); opacity: 1; } } /* ========================================================== Product Page Layout Refinement: Color Pill Swatches, Size Dropdown, Single-Border Quantity + ATC Row, Size Guide Under Add to Cart & Integrated Social Share Bar ========================================================== */ .detail-info .product-price-wrap { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 14px; } .detail-info .product-price-wrap .product-price { margin: 0 !important; } .detail-info .product-price-compare { font-size: 18px; color: #8b90a0; font-weight: 500; } .detail-info .product-price-compare:empty { display: none; } .detail-info .product-des { max-width: 460px; font-size: 14.5px; line-height: 1.65; color: #4a5164; padding-bottom: 14px; margin: 0 0 14px !important; border-bottom: 1px solid rgba(15,23,42,.09); } #AddToCartForm { max-width: 460px; } /* ---- Color & Size Swatch Blocks ---- */ .engo-swatch { max-width: 460px; margin: 12px 0 0 !important; } .engo-swatch + .engo-swatch { margin-top: 14px !important; } .engo-swatch-head { margin-bottom: 8px !important; } .engo-swatch-head .engo-swatch-label { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .08em; color: #0f172a; } .engo-swatch-head .engo-swatch-selected { font-weight: 600 !important; color: #5a6072; margin-left: 4px; text-transform: capitalize; } /* Color Pill Swatch (Dot + Name, no false X overlay) */ .engo-swatch .crossed-out { display: none !important; } .engo-swatch .swatch-element.soldout .crossed-out { position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: center; background: rgba(255,255,255,.55); border-radius: inherit; } .engo-swatch.style1 .swatch label.engo-color-pill { display: inline-flex !important; align-items: center; gap: 10px; width: auto !important; height: 42px !important; min-width: 0 !important; padding: 0 16px 0 8px !important; margin: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.92) !important; border: 1.5px solid rgba(15,23,42,.16) !important; box-shadow: 0 2px 8px rgba(15,23,42,.05) !important; cursor: pointer; position: relative; overflow: hidden; transition: all .22s var(--ease-spring); } .engo-swatch.style1 .swatch label.engo-color-pill:hover { border-color: rgba(15,23,42,.45) !important; transform: translateY(-1px); } .engo-swatch.style1 .swatch input:checked + label.engo-color-pill { border-color: #0f172a !important; background: #ffffff !important; box-shadow: 0 0 0 2px rgba(15,23,42,.14), 0 6px 16px rgba(15,23,42,.1) !important; } .engo-color-dot { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; box-shadow: 0 0 0 1px rgba(15,23,42,.2) inset; background-size: cover; background-position: center; } .engo-color-name { font-size: 13.5px; font-weight: 600; color: #0f172a; line-height: 1; text-transform: capitalize; } /* Size Dropdown */ .engo-size-select-wrap { max-width: 460px !important; width: 100%; } .engo-size-select { height: 48px !important; border-radius: 14px !important; background: rgba(255,255,255,.94) !important; border: 1.5px solid rgba(15,23,42,.16) !important; padding: 0 42px 0 16px !important; font-size: 14px !important; font-weight: 600 !important; color: #0f172a !important; box-shadow: 0 2px 10px rgba(15,23,42,.05); } .engo-size-select:hover { border-color: rgba(15,23,42,.38) !important; } .engo-size-select:focus { border-color: #0f172a !important; box-shadow: 0 0 0 3px rgba(15,23,42,.1) !important; } /* ---- Quantity + Add to Cart Unified Row ---- */ .engo-atc-row { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; margin-top: 16px; } .detail-info .quantity { display: flex !important; align-items: center; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; flex: 0 0 136px; width: 136px !important; height: 52px !important; } .detail-info .engo-qty-inner { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; } .detail-info .js-qty { display: flex !important; align-items: center; justify-content: space-between; width: 136px !important; height: 52px !important; padding: 0 5px !important; margin: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.96) !important; border: 1.5px solid rgba(15,23,42,.18) !important; box-shadow: 0 4px 14px rgba(15,23,42,.06) !important; } .detail-info .js-qty__adjust:before, .detail-info .js-qty__adjust:after, .detail-info .js-qty__adjust i, .detail-info .js-qty__adjust .icon { display: none !important; content: none !important; } .detail-info .js-qty__adjust { width: 38px !important; height: 38px !important; border-radius: 50% !important; border: 0 !important; background: rgba(15,23,42,.05) !important; color: #0f172a !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; cursor: pointer; transition: background .2s ease, color .2s ease, transform .18s ease; } .detail-info .js-qty__adjust:hover { background: #0f172a !important; color: #fff !important; } .detail-info .js-qty__adjust:hover .engo-qty-sym { color: #fff !important; } .detail-info .js-qty__adjust .engo-qty-sym { font-size: 20px; font-weight: 600; line-height: 1; color: #0f172a; display: block; } .detail-info .engo-atc-row .engoj-btn-addtocart, .detail-info .engo-atc-row button[type="submit"] { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 0 24px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .1em !important; } /* ---- Size Guide Placed Under Add to Cart ---- */ .engo-sizeguide-under { margin-top: 12px; width: 100%; max-width: 460px; } .engo-sizeguide-bar, a.engo-sizeguide-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 16px; border-radius: 14px; background: rgba(255,255,255,.84); border: 1px solid rgba(15,23,42,.14); box-shadow: 0 4px 12px rgba(15,23,42,.05); color: #0f172a !important; text-decoration: none !important; cursor: pointer; transition: all .25s var(--ease-spring); } .engo-sizeguide-bar__left { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: #4a5164; text-align: left; } .engo-sizeguide-bar__left svg { color: #b08d57; flex: 0 0 18px; } .engo-sizeguide-bar__left strong { color: #0f172a; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .engo-sizeguide-bar__cta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(15,23,42,.08); color: #0f172a; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; transition: all .22s ease; } .engo-sizeguide-bar:hover, a.engo-sizeguide-bar:hover { background: #ffffff; border-color: #0f172a; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,.1); } .engo-sizeguide-bar:hover .engo-sizeguide-bar__cta, a.engo-sizeguide-bar:hover .engo-sizeguide-bar__cta { background: #0f172a; color: #ffffff; } /* ---- Low Stock Pill & Compact Trust Badges ---- */ .engo-stock-note { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0 !important; padding: 6px 14px; border-radius: 999px; background: rgba(197,2,21,.08); border: 1px solid rgba(197,2,21,.18); color: #b80d1e !important; font-size: 13px; font-weight: 600; } .engo-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #c50215; box-shadow: 0 0 0 3px rgba(197,2,21,.2); } .engo-trust { max-width: 460px; margin: 14px 0 0 !important; padding: 14px 10px !important; border-radius: 16px; background: rgba(255,255,255,.82); border: 1px solid rgba(15,23,42,.1); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .engo-trust li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 12px; font-weight: 600; color: #2b3348; line-height: 1.25; } .engo-trust i { width: 34px !important; height: 34px; border-radius: 50%; background: rgba(15,23,42,.07); color: #0f172a !important; display: inline-flex; align-items: center; justify-content: center; font-size: 14px !important; } /* ---- Integrated Social Share Bar ---- */ .engo-social-share { max-width: 460px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(15,23,42,.1); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .engo-social-share__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #0f172a; } .engo-social-share__list { display: inline-flex; align-items: center; gap: 8px; } .engo-share-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid rgba(15,23,42,.15); color: #0f172a !important; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; text-decoration: none !important; cursor: pointer; box-shadow: 0 2px 8px rgba(15,23,42,.06); transition: all .25s var(--ease-spring); } .engo-share-btn:hover { transform: translateY(-2px); color: #fff !important; } .engo-share-btn--wa:hover { background: #25D366; border-color: #25D366; box-shadow: 0 6px 14px rgba(37,211,102,.3); } .engo-share-btn--fb:hover { background: #1877F2; border-color: #1877F2; box-shadow: 0 6px 14px rgba(24,119,242,.3); } .engo-share-btn--tw:hover { background: #0f172a; border-color: #0f172a; box-shadow: 0 6px 14px rgba(15,23,42,.25); } .engo-share-btn--pin:hover { background: #E60023; border-color: #E60023; box-shadow: 0 6px 14px rgba(230,0,35,.3); } .engo-share-btn--copy:hover { background: #0f172a; border-color: #0f172a; box-shadow: 0 6px 14px rgba(15,23,42,.25); } .engo-copy-badge { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: #0f172a; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all .2s ease; } .engo-share-btn--copy.is-copied .engo-copy-badge { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 480px) { .detail-info .quantity, .detail-info .js-qty { width: 122px !important; flex: 0 0 122px; } .engo-trust { grid-template-columns: repeat(2, 1fr); } } /* ========================================================== 1. Unified Theme Text Hover Color (#b08d57 Gold — No Red Hover) ========================================================== */ a:hover, footer.footer-v1 a:hover, footer.footer-v1 ul.list-unstyled li a:hover, footer.footer-v1 .footer-tel a:hover, footer.footer-v1 .footer-email a:hover, footer.footer-v1 .footer-address a:hover, .product-item-v1 .product-name a:hover, .product-item-v2 .product-name a:hover, .product-item-v3 .product-name a:hover, .bread-crumb a:hover, .item-product-meta-info a:hover, .collection-sidebar a:hover, .collection-sidebar ul li a:hover, .quickview-product .product-name a:hover, .header-cart-content .product-name a:hover, .engo-qv-full-link:hover { color: #b08d57 !important; } footer.footer-v1 .socials a:hover, footer.footer-v1 .socials a:hover i { background: #38bdf8 !important; border-color: #38bdf8 !important; color: #070c18 !important; box-shadow: 0 0 24px rgba(56, 189, 248, 0.65) !important; color: #ffffff !important; } /* ========================================================== 2. Refined Desktop Header Menu Hover (Smooth Gold Bar, No Boxy Pill) ========================================================== */ #header .navbar-nav > .nav-item > a:before { display: none !important; content: none !important; } #header .navbar-nav > .nav-item > a, #header .menu-level-1 { padding-left: 16px !important; padding-right: 16px !important; transition: color .25s ease, transform .25s var(--ease-spring) !important; } #header .navbar-nav > .nav-item:hover > a, #header .navbar-nav > .nav-item > a:hover, #header .navbar-nav > .nav-item.show > a { color: #b08d57 !important; } body.template-index #header:not(.is-scrolled) .navbar-nav > .nav-item:hover > a, body.template-index #header:not(.is-scrolled) .navbar-nav > .nav-item > a:hover { color: #f3d59b !important; } #header .navbar-nav > .nav-item > a:after { content: "" !important; position: absolute !important; left: 50% !important; right: auto !important; bottom: 14px !important; width: 24px !important; height: 2px !important; border-radius: 999px !important; background: #b08d57 !important; opacity: 0 !important; transform: translateX(-50%) scaleX(0) !important; transition: transform .3s var(--ease-spring), opacity .25s ease !important; } #header.is-scrolled .navbar-nav > .nav-item > a:after { bottom: 10px !important; } #header .navbar-nav > .nav-item:hover > a:after, #header .navbar-nav > .nav-item.show > a:after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } /* Dropdown & Mega-Menu link hover: clean gender-specific slide */ #header .dropdown-menu li > a:hover, #header .dropdown-menu .megamenu-shop li a:hover, #header .dropdown-menu1 .dropdown-item:hover { background: var(--gender-accent-pill-bg, rgba(37, 99, 235, 0.08)) !important; color: var(--gender-accent, #2563eb) !important; padding-left: 10px !important; } /* ========================================================== 3. Product Card Hover Action Dock (Liquid Glass Circles, Navy/Gold Hover) ========================================================== */ .product-item-v1 .product-icon { gap: 10px; bottom: 16px !important; z-index: 6; } .product-item-v1 .product-icon .add-to-cart-button, .product-item-v1 .product-icon .quick-view, .product-item-v1 .product-icon .wish-list { width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(255,255,255,.88) !important; -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255,255,255,.85) !important; box-shadow: 0 8px 22px rgba(15,23,42,.16) !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; overflow: hidden; transition: transform .3s var(--ease-spring), background .22s ease, border-color .22s ease, box-shadow .22s ease !important; } .product-item-v1 .product-icon .add-to-cart-button a, .product-item-v1 .product-icon .add-to-cart-button button, .product-item-v1 .product-icon .quick-view a, .product-item-v1 .product-icon .wish-list a, .product-item-v1 .product-icon .wish-list button { width: 100% !important; height: 100% !important; line-height: 1.15 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #0f172a !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 15px !important; text-decoration: none !important; cursor: pointer; transition: color .22s ease !important; } .product-item-v1 .product-icon .add-to-cart-button i, .product-item-v1 .product-icon .quick-view i, .product-item-v1 .product-icon .wish-list i { color: #0f172a !important; font-size: 15px !important; line-height: 1 !important; transition: color .22s ease, transform .22s ease !important; } .product-item-v1 .product-icon .add-to-cart-button:hover, .product-item-v1 .product-icon .quick-view:hover, .product-item-v1 .product-icon .wish-list:hover { background: #0f172a !important; border-color: #0f172a !important; transform: translateY(-3px) scale(1.06) !important; box-shadow: 0 12px 26px rgba(15,23,42,.28) !important; } .product-item-v1 .product-icon .add-to-cart-button:hover a, .product-item-v1 .product-icon .add-to-cart-button:hover button, .product-item-v1 .product-icon .add-to-cart-button:hover i, .product-item-v1 .product-icon .quick-view:hover a, .product-item-v1 .product-icon .quick-view:hover i, .product-item-v1 .product-icon .wish-list:hover a, .product-item-v1 .product-icon .wish-list:hover button, .product-item-v1 .product-icon .wish-list:hover i { color: #ffffff !important; background: transparent !important; } .product-item-v1 .product-icon .engo-wishlist-btn.is-wishlisted { background: #0f172a !important; } .product-item-v1 .product-icon .engo-wishlist-btn.is-wishlisted i { color: #b08d57 !important; } /* ========================================================== 4. All Popup Modals (Quick View, Added-to-Cart, Login, Mini-Cart, Wishlist Toast) ========================================================== */ /* ---- Quick View Modal ---- */ .quickview-product.tshopify-popup .overlay, .engo-popup .overlay, .bg-login-popup.active, .js-bg-minicart.active { background: rgba(12,20,38,.45) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .quickview-product .content.product-quickview { max-width: 880px !important; width: calc(100% - 32px) !important; margin: 0 auto !important; padding: 30px !important; border-radius: 28px !important; background: rgba(255,255,255,.95) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.85) !important; box-shadow: 0 28px 70px rgba(15,23,42,.28) !important; } .quickview-product .product-media img { border-radius: 20px !important; width: 100%; height: auto; object-fit: cover; } .quickview-product .slick-arrow { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(255,255,255,.9) !important; color: #0f172a !important; border: 1px solid rgba(15,23,42,.12) !important; box-shadow: 0 4px 12px rgba(15,23,42,.12) !important; z-index: 5; } .quickview-product .slick-arrow:hover { background: #0f172a !important; color: #fff !important; } .quickview-product .product-name { margin: 0 0 8px !important; } .quickview-product .product-name a { font-size: 24px !important; font-weight: 700 !important; color: #0f172a !important; text-decoration: none !important; line-height: 1.25; } .quickview-product .prices .price { font-size: 22px !important; font-weight: 700 !important; color: #c50215 !important; } .quickview-product .prices .compare-price { font-size: 16px !important; color: #8b90a0 !important; margin-left: 8px; } .quickview-product .product-desc { font-size: 14px !important; line-height: 1.65 !important; color: #4a5164 !important; margin: 10px 0 16px !important; padding-bottom: 14px; border-bottom: 1px solid rgba(15,23,42,.09); } .quickview-product .swatch { margin: 12px 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .quickview-product .swatch .header { flex: 0 0 100%; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .08em; color: #0f172a !important; margin-bottom: 4px !important; } .quickview-product .swatch .swatch-element label { min-width: 38px; height: 36px; line-height: 34px; padding: 0 12px; border-radius: 999px !important; border: 1.5px solid rgba(15,23,42,.18) !important; background: #fff; color: #0f172a; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; } .quickview-product .swatch .swatch-element.color label { width: 30px !important; height: 30px !important; min-width: 30px !important; padding: 0 !important; border-radius: 50% !important; } .quickview-product .swatch input:checked + label { border-color: #0f172a !important; background: #0f172a; color: #fff; box-shadow: 0 0 0 2px rgba(15,23,42,.16); } .quickview-product .engo-qv-actions { display: flex !important; align-items: center; gap: 12px; margin-top: 18px !important; } .quickview-product .product-quantity { margin: 0 !important; flex: 0 0 132px; } .quickview-product .quantity-all.js-qty { display: flex !important; align-items: center; justify-content: space-between; width: 132px !important; height: 50px !important; padding: 0 5px !important; border-radius: 999px !important; background: #fff !important; border: 1.5px solid rgba(15,23,42,.18) !important; } .quickview-product .quantity-all input.qty { width: 42px !important; height: 100% !important; border: 0 !important; background: transparent !important; text-align: center !important; font-size: 16px !important; font-weight: 600 !important; color: #0f172a !important; } .quickview-product .engo-qv-actions .actions { flex: 1 1 auto; } .quickview-product .btn-addToCart { width: 100% !important; height: 50px !important; border-radius: 999px !important; padding: 0 24px !important; margin: 0 !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase; } .quickview-product .engo-qv-footer { margin-top: 14px; text-align: center; } .quickview-product .engo-qv-full-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0f172a; text-decoration: none; } .quickview-product .close-window, .engo-popup .close-window, .poup-login-destop .close-login { position: absolute !important; top: 18px !important; right: 18px !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(15,23,42,.07) !important; color: #0f172a !important; display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none !important; transition: all .22s ease !important; z-index: 10; } .quickview-product .close-window:hover, .engo-popup .close-window:hover, .poup-login-destop .close-login:hover { background: #0f172a !important; color: #fff !important; transform: rotate(90deg); } /* ---- Added-to-Cart & Error Popups (.engo-popup) ---- */ .engo-popup .content { max-width: 460px !important; width: calc(100% - 32px) !important; padding: 28px 26px !important; border-radius: 26px !important; background: rgba(255,255,255,.96) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.85) !important; box-shadow: 0 24px 60px rgba(15,23,42,.26) !important; position: relative; } .product-popup .mini-product-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .product-popup .product-image img { width: 96px !important; height: 96px !important; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 20px rgba(15,23,42,.12); } .engo-popup-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(45,122,71,.1); color: #1e6b3b; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .product-popup .product-name { font-size: 18px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; } .product-popup .actions { display: flex; gap: 10px; width: 100%; justify-content: center; margin-top: 6px !important; } .product-popup .actions button { flex: 1; height: 46px !important; padding: 0 18px !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; } .engo-btn-ghost { background: rgba(15,23,42,.07) !important; color: #0f172a !important; border: 1px solid rgba(15,23,42,.15) !important; box-shadow: none !important; transition: all .2s ease; } .engo-btn-ghost:hover { background: rgba(15,23,42,.14) !important; } /* ---- Login / Register Modal (.poup-login-destop) ---- */ .poup-login-destop { border-radius: 28px !important; background: rgba(255,255,255,.96) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.85) !important; box-shadow: 0 28px 70px rgba(15,23,42,.28) !important; overflow: hidden; } .poup-login-destop .form-control { height: 48px !important; border-radius: 14px !important; border: 1.5px solid rgba(15,23,42,.16) !important; background: #fff !important; padding: 0 16px !important; font-size: 14px !important; color: #0f172a !important; } .poup-login-destop .form-control:focus { border-color: #0f172a !important; box-shadow: 0 0 0 3px rgba(15,23,42,.1) !important; } .poup-login-destop .btn-dark, .poup-login-destop .register-button { height: 50px !important; border-radius: 999px !important; background: linear-gradient(180deg, #1e293b, #0f172a) !important; color: #fff !important; border: 0 !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase; } /* ---- Mini-Cart Slide-Over Drawer ---- */ .header-cart-content.js-minicart-content { background: rgba(255,255,255,.96) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-left: 1px solid rgba(255,255,255,.8); border-radius: 26px 0 0 26px; box-shadow: -18px 0 50px rgba(15,23,42,.22) !important; } .header-cart-content .product-cart .product-image img { border-radius: 12px; } .header-cart-content .actions .button-viewcart, .header-cart-content .actions .button-checkout { border-radius: 999px !important; height: 48px !important; line-height: 1.15 !important; padding: 0 20px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase; } .header-cart-content .actions .button-checkout { background: linear-gradient(180deg, #1e293b, #0f172a) !important; color: #fff !important; } /* ---- Wishlist Floating Glass Toast ---- */ .engo-wl-toast { position: fixed; top: 86px; right: 20px; z-index: 10050; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 18px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(15,23,42,.14); box-shadow: 0 16px 40px rgba(15,23,42,.22); transform: translateY(-16px) scale(.96); opacity: 0; pointer-events: none; transition: all .32s var(--ease-spring); } .engo-wl-toast.is-visible { transform: translateY(0) scale(1); opacity: 1; } .engo-wl-toast__img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; } .engo-wl-toast__body { display: flex; flex-direction: column; gap: 2px; } .engo-wl-toast__status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b08d57; } .engo-wl-toast__title { font-size: 13.5px; font-weight: 700; color: #0f172a; } /* ========================================================== 5. Full Mobile Optimization & Native iOS App-Like Experience ========================================================== */ .engo-app-tabbar { display: none; } @media (max-width: 1199px) { /* Floating Liquid Glass Mobile Header */ header.menu-mobile { position: fixed !important; top: var(--glass-top, 10px) !important; left: 10px !important; right: 10px !important; width: auto !important; height: 56px !important; padding: 0 16px !important; border-radius: 999px !important; background: rgba(255,255,255,.88) !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid rgba(255,255,255,.78) !important; box-shadow: 0 10px 30px rgba(15,23,42,.15) !important; z-index: 1040 !important; display: flex !important; align-items: center; transition: top .3s var(--ease-spring), background .3s ease, box-shadow .3s ease !important; } header.menu-mobile .menu { width: 100%; height: 100%; display: flex !important; align-items: center; justify-content: space-between; padding: 0 !important; } header.menu-mobile .header-logo img { max-height: 28px !important; width: auto !important; } /* Transparent mobile header at top of homepage over slideshow */ body.template-index header.menu-mobile:not(.is-scrolled) { background: rgba(15,23,42,.22) !important; border-color: rgba(255,255,255,.28) !important; box-shadow: none !important; } body.template-index header.menu-mobile:not(.is-scrolled) .engo-logo-dark { display: none !important; } body.template-index header.menu-mobile:not(.is-scrolled) .engo-logo-light { display: inline-block !important; } body.template-index header.menu-mobile:not(.is-scrolled) .search-mobile, body.template-index header.menu-mobile:not(.is-scrolled) .cart-mobile { color: #ffffff !important; } body.template-index header.menu-mobile:not(.is-scrolled) .menu-mobile-close, body.template-index header.menu-mobile:not(.is-scrolled) .menu-mobile-close:before, body.template-index header.menu-mobile:not(.is-scrolled) .menu-mobile-close:after { background-color: #ffffff !important; } /* Mobile Search Sheet Enhancement */ .mobile-search.js-mobile-search { background: rgba(255,255,255,.96) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: 0 0 28px 28px; box-shadow: 0 20px 50px rgba(15,23,42,.22); padding: 24px 18px 28px !important; } .engo-mobile-search-box { max-width: 480px; margin: 10px auto 0; text-align: center; } .engo-mobile-search-form { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid rgba(15,23,42,.18); border-radius: 999px; padding: 4px 6px 4px 18px; box-shadow: 0 6px 20px rgba(15,23,42,.08); } .engo-mobile-search-form input[type="text"] { flex: 1; border: 0 !important; background: transparent !important; height: 42px !important; font-size: 15px !important; color: #0f172a !important; padding: 0 !important; } .engo-mobile-search-form input[type="text"]:focus { outline: 0; } .engo-mobile-search-form button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #0f172a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .engo-mobile-search-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12px; color: #5a6072; } .engo-mobile-search-tags a { padding: 5px 13px; border-radius: 999px; background: rgba(15,23,42,.07); color: #0f172a !important; font-weight: 600; text-decoration: none !important; } /* Mobile Slide-Out Menu Drawer (.menu-mobile-tab) */ .menu-mobile-tab .box { background: rgba(255,255,255,.97) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .menu-mobile-tab .box-tab-nav button.active { background: #0f172a !important; color: #fff !important; } .menu-mobile-tab .vertical-box .menu-category a.menu-link { font-size: 15px !important; font-weight: 600 !important; color: #0f172a !important; padding: 13px 18px !important; border-bottom: 1px solid rgba(15,23,42,.07) !important; } /* Native iOS App Bottom Navigation Bar */ .engo-app-tabbar { position: fixed; bottom: 10px; left: 12px; right: 12px; height: 60px; border-radius: 999px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 12px 36px rgba(15,23,42,.22), 0 1px 0 rgba(255,255,255,.8) inset; z-index: 1035; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; } .engo-app-tab { flex: 1; height: 48px; border: 0; background: transparent; border-radius: 999px; color: #5a6072 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-decoration: none !important; cursor: pointer; padding: 0; transition: all .22s var(--ease-spring); } .engo-app-tab i { font-size: 17px; line-height: 1; color: inherit; } .engo-app-tab.is-active, .engo-app-tab:active { color: #0f172a !important; background: rgba(15,23,42,.07); } .engo-app-tab.is-active i { color: #b08d57; } .engo-app-tab__icon-wrap { position: relative; display: inline-flex; } .engo-app-tab__icon-wrap em { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 999px; background: #b08d57; color: #fff; font-style: normal; font-size: 9.5px; font-weight: 700; text-align: center; } /* Reserve bottom padding for the floating app tabbar */ body { padding-bottom: 78px !important; } #back-to-top { display: none !important; } } @media (max-width: 767px) { /* App-like 2-column product cards on mobile */ .product-item-v1 { padding: 0 5px !important; margin-bottom: 18px !important; } .product-item-v1 .product-image, .product-item-v1 .engo-card-media { border-radius: 16px !important; } .product-item-v1 .product-bubble { top: 8px !important; left: 8px !important; padding: 2px 8px !important; font-size: 10.5px !important; } .product-item-v1 .product-bubble + .product-bubble { top: 32px !important; } /* Mobile Product Card 3-Button Action Dock (Centered White Circles matching Desktop) */ .product-item-v1 .product-icon, .product-item-v3 .product-icon { display: flex !important; opacity: 1 !important; visibility: visible !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 12px !important; top: auto !important; width: 100% !important; justify-content: center !important; align-items: center !important; gap: 10px !important; transform: none !important; pointer-events: auto !important; z-index: 6 !important; } .product-item-v1 .product-icon .add-to-cart-button, .product-item-v1 .product-icon .quick-view, .product-item-v1 .product-icon .wish-list, .product-item-v3 .product-icon .add-to-cart-button, .product-item-v3 .product-icon .quick-view, .product-item-v3 .product-icon .wish-list { display: flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; visibility: visible !important; transform: scale(1) !important; pointer-events: auto !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important; margin: 0 !important; padding: 0 !important; transition: transform 0.15s ease, background 0.15s ease !important; } .product-item-v1 .product-icon .add-to-cart-button:active, .product-item-v1 .product-icon .quick-view:active, .product-item-v1 .product-icon .wish-list:active, .product-item-v3 .product-icon .add-to-cart-button:active, .product-item-v3 .product-icon .quick-view:active, .product-item-v3 .product-icon .wish-list:active { transform: scale(0.92) !important; background: #f1f5f9 !important; } .product-item-v1 .product-icon .add-to-cart-button a, .product-item-v1 .product-icon .add-to-cart-button button, .product-item-v1 .product-icon .quick-view a, .product-item-v1 .product-icon .wish-list a, .product-item-v1 .product-icon .wish-list button, .product-item-v3 .product-icon .add-to-cart-button a, .product-item-v3 .product-icon .add-to-cart-button button, .product-item-v3 .product-icon .quick-view a, .product-item-v3 .product-icon .wish-list a, .product-item-v3 .product-icon .wish-list button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; line-height: 38px !important; color: #0f172a !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; } .product-item-v1 .product-icon .add-to-cart-button i, .product-item-v1 .product-icon .quick-view i, .product-item-v1 .product-icon .wish-list i, .product-item-v3 .product-icon .add-to-cart-button i, .product-item-v3 .product-icon .quick-view i, .product-item-v3 .product-icon .wish-list i { color: #0f172a !important; font-size: 15px !important; line-height: 1 !important; } .product-item-v1 .product-icon .engo-wishlist-btn.is-wishlisted i, .product-item-v3 .product-icon .engo-wishlist-btn.is-wishlisted i { color: #e11d48 !important; } /* mobile padding replaced by framed product-info box */ .product-item-v1 .product-info .info-content > p { font-size: 9.5px !important; } .product-item-v1 .product-name a { font-size: 13.5px !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden; } .product-item-v1 .product-price ins { font-size: 14.5px !important; } .product-item-v1 .product-price del { font-size: 12px !important; } /* Mobile Sticky Add to Cart floats cleanly above the iOS App Tab Bar */ .engo-sticky-atc { position: fixed !important; bottom: 76px !important; left: 12px !important; right: 12px !important; border-radius: 999px !important; padding: 6px 8px 6px 12px !important; background: rgba(255, 255, 255, 0.96) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22) !important; transform: translateY(160%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 9990 !important; } .engo-sticky-atc.is-visible { transform: translateY(0) !important; } .engo-sticky-atc__inner { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 10px !important; } .engo-sticky-atc__thumb { flex-shrink: 0 !important; width: 38px !important; height: 38px !important; border-radius: 8px !important; overflow: hidden !important; background: #f1f5f9 !important; } .engo-sticky-atc__thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .engo-sticky-atc__info { display: flex !important; flex-direction: column !important; min-width: 0 !important; flex: 1 1 auto !important; } .engo-sticky-atc__title { font-size: 12px !important; font-weight: 600 !important; color: #0f172a !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .engo-sticky-atc__price { font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important; } .engo-sticky-atc__btn { flex-shrink: 0 !important; padding: 8px 18px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; background: #0f172a !important; color: #ffffff !important; border: 0 !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important; } /* Mobile Product Page Polish */ .detail-info { padding-top: 18px !important; } .detail-info .product-title { font-size: 22px !important; } .detail-info .product-price { font-size: 20px !important; } .detail-tabs { padding: 20px 16px !important; border-radius: 20px !important; } .content-collection-page .title-page { padding: 12px 14px !important; border-radius: 16px !important; margin: 8px 0 20px !important; overflow: visible !important; } .content-collection-page .title-page .showing { text-align: center !important; margin-bottom: 8px !important; } .content-collection-page .title-page .showing span { font-size: 12px !important; color: #64748b !important; } .content-collection-page .part-product-wrap { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 8px !important; margin: 0 !important; } .content-collection-page .show-product { display: inline-flex !important; gap: 6px !important; flex-shrink: 0 !important; } .content-collection-page .show-product .engo-dropdown-btn { height: 38px !important; font-size: 12.5px !important; padding: 0 10px 0 12px !important; } .content-collection-page .filter-ordering { flex: 1 1 auto !important; min-width: 0 !important; } .content-collection-page .filter-ordering .engo-dropdown-btn { width: 100% !important; height: 38px !important; font-size: 12px !important; padding: 0 12px 0 14px !important; } .content-collection-page .filter-ordering .engo-dropdown-label { max-width: 130px; } .content-collection-page .filter-ordering .engo-dropdown-menu { right: 0 !important; left: auto !important; min-width: 200px !important; } .content-collection-page .part-product-size { flex: 0 0 auto !important; gap: 6px !important; } .content-collection-page .part-product-size a { width: 38px !important; height: 38px !important; line-height: 38px !important; font-size: 14px !important; } } /* ========================================================== 6. Dynamic Product Color Pill, Header Cart Notification Popover & Full Cart/Checkout Page ========================================================== */ /* ---- Dynamic Color Pill: changes background & dot color per product color ---- */ .engo-swatch.style1 .swatch label.engo-color-pill, .engo-swatch.style1 .swatch input:checked + label.engo-color-pill { background: var(--swatch-bg, #0f172a) !important; color: var(--swatch-fg, #ffffff) !important; border: 2px solid rgba(255,255,255,.85) !important; box-shadow: 0 0 0 2px #0f172a, 0 8px 20px rgba(15,23,42,.16) !important; padding: 0 18px 0 9px !important; height: 42px !important; } .engo-swatch.style1 .swatch input:not(:checked) + label.engo-color-pill { box-shadow: 0 0 0 1px rgba(15,23,42,.22), 0 4px 12px rgba(15,23,42,.08) !important; opacity: .88; } .engo-swatch.style1 .swatch label.engo-color-pill:hover { opacity: 1; transform: translateY(-2px) scale(1.02); } .engo-swatch.style1 .swatch label.engo-color-pill .engo-color-name { color: var(--swatch-fg, #ffffff) !important; font-weight: 700 !important; letter-spacing: .03em; } /* ---- Header Cart Popover: Floating Rounded Notification Card (Not Full-Height Sidebar) ---- */ .header-cart-content.js-minicart-content { position: fixed !important; top: 84px !important; right: 22px !important; left: auto !important; bottom: auto !important; width: 390px !important; max-width: calc(100vw - 24px) !important; height: auto !important; max-height: calc(100vh - 104px) !important; padding: 20px 22px !important; border-radius: 26px !important; background: rgba(255,255,255,.96) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; backdrop-filter: blur(28px) saturate(180%) !important; border: 1px solid rgba(255,255,255,.9) !important; box-shadow: 0 24px 60px rgba(15,23,42,.26), 0 1px 0 rgba(255,255,255,.9) inset !important; z-index: 1100 !important; overflow: hidden !important; transform: translateY(-14px) scale(.96) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: transform .32s var(--ease-spring), opacity .25s ease, visibility .25s ease !important; } .header-cart-content.js-minicart-content.active { transform: translateY(0) scale(1) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Notification Card Header */ .engo-minicart-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(15,23,42,.09); } .engo-minicart-head__title { display: inline-flex; align-items: center; gap: 8px; } .engo-minicart-head__title > i { font-size: 17px; color: #0f172a; } .header-cart-content .minicart-title { position: static !important; margin: 0 !important; padding: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; text-transform: uppercase; letter-spacing: .06em; } .header-cart-content .minicart-number { position: static !important; display: inline-flex !important; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #0f172a !important; color: #fff !important; font-size: 11.5px !important; font-weight: 700 !important; } .header-cart-content .minicart-close { position: static !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 0 !important; background: rgba(15,23,42,.07) !important; color: #0f172a !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 13px !important; cursor: pointer; transition: all .2s ease; } .header-cart-content .minicart-close:hover { background: #0f172a !important; color: #fff !important; transform: rotate(90deg); } /* Scrollable Items Area inside Notification Card */ .header-cart-content .minicart-scroll, .header-cart-content .ajaxcart { position: static !important; height: auto !important; } .header-cart-content .minicart-scroll-content { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; height: auto !important; max-height: 270px !important; overflow-y: auto !important; padding: 0 4px 0 0 !important; margin: 0 !important; } .header-cart-content .minicart-item { margin: 0 !important; padding: 0 !important; } .header-cart-content .product-cart { display: flex !important; align-items: center; gap: 14px; padding: 12px 0 !important; margin: 0 !important; border-bottom: 1px solid rgba(15,23,42,.08) !important; } .header-cart-content .product-cart .product-image { float: none !important; width: 64px !important; height: 64px !important; flex: 0 0 64px; margin: 0 !important; } .header-cart-content .product-cart .product-image img { width: 64px !important; height: 64px !important; object-fit: cover; border-radius: 14px !important; border: 1px solid rgba(15,23,42,.08); } .header-cart-content .product-cart .product-detail { float: none !important; width: auto !important; flex: 1 1 auto; min-width: 0; padding: 0 !important; } .header-cart-content .product-cart .product-name { margin: 0 0 4px !important; line-height: 1.3 !important; } .header-cart-content .product-cart .product-name a { font-size: 14px !important; font-weight: 700 !important; color: #0f172a !important; text-decoration: none !important; display: block; } .header-cart-content .ajaxcart__product-meta { display: inline-block !important; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(15,23,42,.07) !important; color: #3a4256 !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .02em; } .header-cart-content .product-detail-info { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .header-cart-content .product-quantity { font-size: 11.5px !important; font-weight: 700 !important; color: #5a6072 !important; letter-spacing: .04em !important; } .header-cart-content .product-price { font-size: 14px !important; font-weight: 700 !important; color: #c50215 !important; } .header-cart-content .product-remove { float: none !important; } .header-cart-content .product-remove a { width: 28px; height: 28px; border-radius: 50%; background: rgba(15,23,42,.06); color: #5a6072 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 12px !important; transition: all .2s ease; } .header-cart-content .product-remove a:hover { background: #c50215; color: #fff !important; } /* Notification Card Subtotal & Capsule Buttons */ .header-cart-content .subtotal-actions { position: static !important; width: 100% !important; } .header-cart-content .subtotal { position: static !important; display: flex !important; align-items: center; justify-content: space-between; padding: 14px 0 12px !important; margin: 0 !important; border: 0 !important; background: transparent !important; } .header-cart-content .subtotal .total-title { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; color: #5a6072 !important; float: none !important; } .header-cart-content .subtotal .total-price { float: none !important; font-size: 18px !important; font-weight: 700 !important; color: #0f172a !important; } .header-cart-content .actions { position: static !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 !important; margin: 0 !important; background: transparent !important; } .header-cart-content .actions .button-viewcart, .header-cart-content .actions .button-checkout { width: 100% !important; height: 44px !important; line-height: 1.15 !important; padding: 0 14px !important; margin: 0 !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase; text-align: center; display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none !important; transition: all .25s var(--ease-spring); } .header-cart-content .actions .button-viewcart { background: rgba(15,23,42,.07) !important; color: #0f172a !important; border: 1.5px solid rgba(15,23,42,.18) !important; } .header-cart-content .actions .button-viewcart:hover { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; } .header-cart-content .actions .button-checkout { background: linear-gradient(180deg, #1e293b, #0f172a) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.2) !important; box-shadow: 0 8px 20px rgba(15,23,42,.25); } .header-cart-content .actions .button-checkout:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,.32); color: #ffffff !important; } /* Empty Bag inside Notification Card */ .header-cart-content .minicart-content { position: static !important; padding: 20px 10px 8px !important; text-align: center; background: transparent !important; } .engo-empty-bag-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(15,23,42,.06); color: #0f172a; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; } .header-cart-content .minicart-content h4 { font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 14px !important; } .header-cart-content .minicart-content .to-cart { display: inline-flex !important; align-items: center; justify-content: center; height: 42px !important; padding: 0 24px !important; border-radius: 999px !important; font-size: 12px !important; margin-bottom: 10px !important; } .header-cart-content .minicart-content .des-cart { display: block; font-size: 12px !important; color: #5a6072 !important; } @media (max-width: 767px) { .header-cart-content.js-minicart-content { top: 72px !important; right: 12px !important; left: 12px !important; width: auto !important; max-width: none !important; padding: 18px !important; } } /* ---- Full Cart & Checkout Section (sections/page-cart.liquid) ---- */ .engo-cart-section { padding: 32px 0 80px; min-height: 70vh; } .engo-cart-container { max-width: 1140px; margin: 0 auto; padding: 0 16px; } /* Hero Header */ .engo-cart-hero { margin-bottom: 28px; } .engo-cart-breadcrumbs { font-size: 13px; color: #64748b; margin-bottom: 10px; font-weight: 500; } .engo-cart-breadcrumbs a { color: #64748b; text-decoration: none !important; transition: color 0.2s ease; } .engo-cart-breadcrumbs a:hover { color: #0f172a; } .engo-cart-bc-sep { margin: 0 7px; color: #cbd5e1; } .engo-cart-bc-current { color: #0f172a; font-weight: 600; } .engo-cart-title-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 6px; } .engo-cart-title { font-size: clamp(28px, 3.5vw, 36px); font-weight: 800; color: #0f172a; letter-spacing: -0.03em; margin: 0; line-height: 1.2; } .engo-cart-count-pill { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); color: #0f172a; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .engo-cart-subtitle { font-size: 14px; color: #64748b; margin: 0; font-weight: 500; } /* Free Shipping Dynamic Progress Banner */ .engo-cart-shipping-banner { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px; padding: 16px 24px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03); margin-bottom: 28px; transition: all 0.3s ease; } .engo-csb-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .engo-csb-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(16, 185, 129, 0.12); color: #10b981; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .engo-csb-text { font-size: 13.5px; color: #1e293b; line-height: 1.4; } .engo-csb-unlocked { color: #059669; } .engo-csb-needed strong { color: #0f172a; font-weight: 700; } .engo-csb-bar-wrap { width: 100%; height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; } .engo-csb-progress { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* Main Cart Grid */ .engo-cart-main-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; } /* Left: Cart Items Card */ .engo-cart-items-card { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 20px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); padding: 24px 28px; } .engo-cart-items-head { display: grid; grid-template-columns: 2.6fr 1fr 1.2fr 1fr 40px; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; } .engo-col-h--qty { text-align: center; } .engo-col-h--subtotal { text-align: right; } .engo-cart-item-row { display: grid; grid-template-columns: 2.6fr 1fr 1.2fr 1fr 40px; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid #f1f5f9; } .engo-cart-cell--product { display: flex; align-items: center; gap: 16px; } .engo-cart-thumb { width: 80px; height: 80px; flex: 0 0 80px; border-radius: 14px; overflow: hidden; background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.06); display: block; } .engo-cart-thumb img { width: 100%; height: 100%; object-fit: cover; } .engo-cart-item-meta { display: flex; flex-direction: column; gap: 4px; } .engo-cart-item-title { font-size: 15px; font-weight: 700; color: #0f172a; text-decoration: none !important; line-height: 1.35; transition: color 0.2s ease; } .engo-cart-item-title:hover { color: #2563eb; } .engo-cart-variant-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11.5px; font-weight: 600; width: fit-content; } .engo-price-val { font-size: 14.5px; font-weight: 600; color: #475569; } /* Quantity Control Pill */ .engo-cart-cell--qty { display: flex; justify-content: center; } .engo-qty-control { display: inline-flex; align-items: center; justify-content: space-between; width: 104px; height: 38px; padding: 0 4px; border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0; } .engo-qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #ffffff; color: #0f172a; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: all 0.2s ease; } .engo-qty-btn:hover { background: #0f172a; color: #ffffff; } .engo-qty-input { width: 34px; border: 0 !important; background: transparent !important; text-align: center; font-size: 14px; font-weight: 700; color: #0f172a; padding: 0; -moz-appearance: textfield; } .engo-qty-input::-webkit-outer-spin-button, .engo-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .engo-cart-cell--subtotal { text-align: right; } .engo-subtotal-val { font-size: 15.5px; font-weight: 700; color: #0f172a; } .engo-cart-cell--remove { display: flex; justify-content: flex-end; } .engo-remove-btn { width: 32px; height: 32px; border-radius: 50%; background: #f8fafc; color: #94a3b8 !important; display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; transition: all 0.2s ease; } .engo-remove-btn:hover { background: #fef2f2; color: #ef4444 !important; transform: scale(1.08); } /* Footer Actions inside Items Card */ .engo-cart-footer-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; flex-wrap: wrap; gap: 12px; } .engo-cart-btn-continue, .engo-cart-btn-update { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none !important; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155 !important; cursor: pointer; transition: all 0.2s ease; } .engo-cart-btn-continue:hover, .engo-cart-btn-update:hover { background: #0f172a; border-color: #0f172a; color: #ffffff !important; transform: translateY(-1px); } /* Right: Order Summary Card */ .engo-cart-summary-card { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 20px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); padding: 26px 26px; position: sticky; top: 105px; } .engo-summary-header { margin-bottom: 16px; } .engo-summary-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #b08d57; margin-bottom: 4px; } .engo-summary-title { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.02em; } /* Collapsible Order Note */ .engo-cart-note-wrap { margin-bottom: 18px; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 10px 14px; background: #f8fafc; } .engo-cart-note-toggle { width: 100%; border: 0; background: transparent; padding: 0; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer; gap: 8px; } .engo-cart-note-toggle span { flex: 1; text-align: left; } .engo-cart-note-toggle:hover { color: #0f172a; } .engo-note-chevron { transition: transform 0.25s ease; } .engo-cart-note-toggle.is-open .engo-note-chevron { transform: rotate(180deg); } .engo-cart-note-content { padding-top: 10px; } .engo-cart-note-content textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 10px; font-size: 13px; color: #0f172a; background: #ffffff; resize: vertical; } .engo-cart-note-content textarea:focus { outline: 0; border-color: #0f172a; } /* Financial Breakdown */ .engo-summary-lines { border-top: 1px solid #f1f5f9; padding: 14px 0; margin-bottom: 18px; } .engo-summary-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; color: #64748b; } .engo-row-val { font-weight: 600; color: #1e293b; } .engo-badge-free { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(16, 185, 129, 0.12); color: #059669; font-size: 11px; font-weight: 700; } .engo-shipping-calc { font-size: 12.5px; color: #64748b; } .engo-summary-row--grand { border-top: 1px solid #f1f5f9; padding-top: 14px; margin-top: 14px; margin-bottom: 0; font-size: 15px; font-weight: 700; color: #0f172a; } .engo-grand-val { font-size: 24px; font-weight: 800; color: #0f172a !important; letter-spacing: -0.02em; } /* Checkout CTA */ .engo-checkout-cta-btn { width: 100%; height: 52px; border-radius: 999px; border: 0; background: #0f172a; color: #ffffff !important; font-size: 13.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25); transition: all 0.25s ease; } .engo-checkout-cta-btn:hover { background: #1e293b; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.35); } /* Trust Badges List */ .engo-summary-trust-list { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 9px; } .engo-trust-badge-line { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 500; color: #475569; } .engo-trust-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px #10b981; flex-shrink: 0; } /* Empty Bag State */ .engo-cart-empty-view { max-width: 520px; margin: 40px auto; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 24px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); padding: 48px 32px; } .engo-empty-bag-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(15, 23, 42, 0.05); color: #0f172a; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; } .engo-empty-title { font-size: 24px; font-weight: 800; color: #0f172a; margin-bottom: 10px; } .engo-empty-subtitle { font-size: 14.5px; color: #64748b; line-height: 1.5; margin-bottom: 24px; } .engo-empty-cta-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 28px; border-radius: 999px; background: #0f172a; color: #ffffff !important; font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2); transition: all 0.25s ease; } .engo-empty-cta-btn:hover { background: #1e293b; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.3); } /* Responsive adjustments */ @media (max-width: 991px) { .engo-cart-main-grid { grid-template-columns: 1fr; gap: 24px; } .engo-cart-summary-card { position: static; } } @media (max-width: 767px) { .engo-cart-items-head { display: none; } .engo-cart-item-row { grid-template-columns: 70px 1fr; row-gap: 12px; column-gap: 14px; position: relative; padding: 16px 0; } .engo-cart-cell--product { grid-column: 1 / -1; display: flex; gap: 12px; padding-right: 32px; } .engo-cart-thumb { width: 68px; height: 68px; flex: 0 0 68px; } .engo-cart-mobile-price { font-size: 14px; font-weight: 700; color: #0f172a; margin-top: 4px; } .engo-cart-cell--qty { grid-column: 1 / 2; justify-content: flex-start; } .engo-cart-cell--subtotal { grid-column: 2 / 3; display: flex; justify-content: flex-end; align-items: center; } .engo-cart-cell--remove { position: absolute; top: 14px; right: 0; } .engo-cart-items-card, .engo-cart-summary-card { padding: 20px 16px; border-radius: 16px; } } /* ========================================================== 7. Quick View Popup Fix, Cart Page Quantity Fix, Square 1:1 Product Gallery & Side-by-Side Color/Size ========================================================== */ /* ---- 7.1 Quick View Modal Image, Swatch Pills & Stepper Buttons ---- */ .quickview-product.tshopify-popup.active { z-index: 100000 !important; visibility: visible !important; opacity: 1 !important; width: 100vw !important; height: 100vh !important; padding: 16px !important; } .quickview-product .content.product-quickview { max-width: 900px !important; width: calc(100% - 24px) !important; max-height: 90vh !important; overflow-y: auto !important; overflow-x: hidden !important; margin: 0 auto !important; padding: 28px !important; border-radius: 28px !important; } .quickview-product .content.product-quickview > .row { align-items: flex-start !important; } .quickview-product .product-media, .quickview-product .more-views, .quickview-product .owl-carousel { display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .quickview-product .product-media .item a, .quickview-product .product-media .featured-image a { display: block !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 20px !important; background: #f8f6f2 !important; } .quickview-product .product-media img { aspect-ratio: 1 / 1 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; border-radius: 20px !important; display: block !important; } .quickview-product .slick-brand-prev, .quickview-product .slick-brand-next { position: absolute !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(255,255,255,.92) !important; color: #0f172a !important; border: 1px solid rgba(15,23,42,.12) !important; box-shadow: 0 4px 14px rgba(15,23,42,.15) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; padding: 0 !important; z-index: 6 !important; cursor: pointer !important; transition: all .2s ease !important; } .quickview-product .slick-brand-prev { left: 12px !important; right: auto !important; } .quickview-product .slick-brand-next { right: 12px !important; left: auto !important; } .quickview-product .slick-brand-prev:hover, .quickview-product .slick-brand-next:hover { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; } .quickview-product .slick-dots { bottom: 12px !important; } .quickview-product .detail-info { position: static !important; top: auto !important; } .quickview-product .product-name { margin: 4px 0 8px !important; padding: 0 !important; } .quickview-product .product-desc { margin: 8px 0 14px !important; padding-bottom: 12px !important; font-size: 13.5px !important; line-height: 1.55 !important; } /* Override all legacy engo-customize & timber .swatch rules inside Quick View */ .quickview-product .swatch, .product-quickview .swatch { width: 100% !important; margin: 0 0 14px 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; float: none !important; position: static !important; } .quickview-product .swatch .header, .product-quickview .swatch .header { flex: 0 0 100% !important; width: 100% !important; margin: 0 0 6px 0 !important; float: none !important; font-family: "Barlow", sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: #6f7687 !important; line-height: 1.3 !important; } .quickview-product .swatch .header .engo-qv-opt-val { color: #0f172a !important; font-weight: 700 !important; margin-left: 4px; } .quickview-product .swatch .swatch-element, .product-quickview .swatch .swatch-element { float: none !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; width: auto !important; height: auto !important; overflow: visible !important; } .quickview-product .swatch .tooltip { display: none !important; } /* Kill the legacy red #c50215 :before overlay on Color swatches in Quick View */ .quickview-product .swatch label:before, .quickview-product .swatch .swatch-element.color label:before, .quickview-product .swatch .swatch-element.color input:checked + label:before, .quickview-product .swatch .swatch-element.color:hover > label:before { display: none !important; content: none !important; background: transparent !important; opacity: 0 !important; visibility: hidden !important; } /* Size / Standard Pills in Quick View */ .quickview-product .swatch .swatch-element label, .quickview-product .swatch .swatch-element label.size, .quickview-product .swatch .swatch-element label.engo-qv-size-pill { float: none !important; min-width: 44px !important; width: auto !important; height: 38px !important; line-height: 36px !important; padding: 0 14px !important; margin: 0 !important; border-radius: 10px !important; border: 1.5px solid rgba(15,23,42,.16) !important; background: #ffffff !important; color: #0f172a !important; font-family: "Barlow", sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .04em !important; text-indent: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; cursor: pointer !important; transition: all .2s ease !important; box-shadow: none !important; } .quickview-product .swatch .swatch-element:not(.color) label:hover { border-color: #0f172a !important; background: rgba(15,23,42,.04) !important; color: #0f172a !important; } .quickview-product .swatch .swatch-element:not(.color) input:checked + label { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; box-shadow: 0 4px 12px rgba(15,23,42,.18) !important; } /* Color Pill with True-to-Color Swatch Dot in Quick View */ .quickview-product .swatch .swatch-element.color label, .quickview-product .swatch .swatch-element.color label.engo-qv-color-pill { min-width: 0 !important; width: auto !important; height: 40px !important; line-height: 1 !important; padding: 0 14px 0 10px !important; border-radius: 12px !important; border: 1.5px solid rgba(15,23,42,.16) !important; background: #ffffff !important; color: #0f172a !important; display: inline-flex !important; align-items: center !important; gap: 9px !important; } .quickview-product .swatch .swatch-element.color input:checked + label, .quickview-product .swatch .swatch-element.color input:checked + label.engo-qv-color-pill { border: 2px solid #0f172a !important; background: #ffffff !important; color: #0f172a !important; box-shadow: 0 4px 14px rgba(15,23,42,.10) !important; } .quickview-product .swatch .swatch-element.color .engo-color-dot { width: 20px !important; height: 20px !important; border-radius: 50% !important; flex-shrink: 0 !important; display: inline-block !important; } .quickview-product .swatch .swatch-element.color .engo-color-name { font-family: "Barlow", sans-serif !important; font-size: 12.5px !important; font-weight: 700 !important; color: #0f172a !important; text-transform: uppercase !important; letter-spacing: .04em !important; } .quickview-product .swatch .swatch-element.color .engo-color-check { width: 17px !important; height: 17px !important; border-radius: 50% !important; background: #0f172a !important; color: #ffffff !important; font-size: 8.5px !important; display: none !important; align-items: center !important; justify-content: center !important; } .quickview-product .swatch .swatch-element.color input:checked + label .engo-color-check { display: inline-flex !important; } .quickview-product .swatch .swatch-element.soldout label { opacity: .45 !important; text-decoration: line-through !important; } .quickview-product .engo-qv-actions { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 16px !important; } .quickview-product .quantity-all .js-qty__adjust { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 0 !important; background: rgba(15,23,42,.06) !important; color: #0f172a !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; cursor: pointer; transition: all .2s ease; } .quickview-product .quantity-all .js-qty__adjust:hover { background: #0f172a !important; color: #ffffff !important; } .quickview-product .quantity-all .engo-qty-sym { font-size: 18px; font-weight: 600; line-height: 1; } /* ---- 7.2 Cart Page Quantity Pill Input (No Duplicate .js-qty Injection) ---- */ .engo-cart-qty-pill { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; width: 122px !important; height: 44px !important; padding: 0 4px !important; border-radius: 999px !important; background: #ffffff !important; border: 1.5px solid rgba(15,23,42,.18) !important; box-shadow: 0 4px 12px rgba(15,23,42,.05) !important; } .engo-cart-qty-pill .engo-cart-qty-input, .page-cart .engo-cart-qty-pill input[type="text"], .page-cart .engo-cart-qty-pill input[type="number"] { width: 44px !important; min-width: 44px !important; height: 36px !important; line-height: 36px !important; border: 0 !important; background: transparent !important; text-align: center !important; font-size: 15px !important; font-weight: 700 !important; color: #0f172a !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; outline: none !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* ---- 7.3 Product Page Main Image & Thumbnails: Square 1:1 Ratio ---- */ .detail-gallery .mid .engo-main-slide, .detail-gallery .mid .slick-slide, .detail-gallery .mid > div:not(.slick-list):not(.slick-track) { aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 24px !important; background: #f4f4f6; } .detail-gallery .mid img, .detail-gallery .mid img.engoj_img_main { aspect-ratio: 1 / 1 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; border-radius: 24px !important; display: block !important; } .detail-gallery .product-thumbnail-item { border-radius: 14px !important; overflow: hidden; } .detail-gallery .product-thumbnail-item img { aspect-ratio: 1 / 1 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; border-radius: 14px !important; display: block !important; } /* ---- 7.4 Product Page Color & Size Side-by-Side Balanced Grid (.engo-options-row) ---- */ .engo-options-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; align-items: start !important; width: 100% !important; max-width: 440px !important; margin: 14px 0 0 !important; } .engo-options-row .engo-swatch, .engo-options-row .engo-swatch + .engo-swatch { margin: 0 !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important; } .engo-options-row .engo-swatch.style2 .swatch-element, .engo-swatch.style2 .swatch-element { display: none !important; } .engo-options-row .engo-swatch-head { margin-bottom: 8px !important; } .engo-options-row .engo-swatch-head .engo-swatch-label { font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #64748b !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .engo-options-row .engo-swatch-head .engo-swatch-selected { color: #0f172a !important; font-weight: 700 !important; } .engo-options-row .engo-swatch.style1 .swatch { display: flex !important; width: 100% !important; } .engo-options-row .engo-swatch.style1 .swatch-element { flex: 1 1 100% !important; width: 100% !important; } .engo-options-row .engo-swatch.style1 .swatch label.engo-color-pill, .engo-options-row .engo-swatch.style1 .swatch input:checked + label.engo-color-pill { height: 48px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 14px 0 10px !important; border-radius: 14px !important; border: 1.5px solid rgba(15, 23, 42, 0.16) !important; background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important; cursor: pointer !important; } /* Size Dropdown Box matching Color Pill */ .engo-size-select-wrap { width: 100% !important; } .engo-select-pill-box { position: relative !important; width: 100% !important; } .engo-select-pill-box .engo-size-select { height: 48px !important; width: 100% !important; border-radius: 14px !important; border: 1.5px solid rgba(15, 23, 42, 0.16) !important; background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important; padding: 0 34px 0 14px !important; font-size: 14px !important; font-weight: 600 !important; color: #0f172a !important; appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important; outline: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .engo-select-pill-box .engo-size-select:focus { border-color: #0f172a !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important; } .engo-select-pill-box .engo-select-caret { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; color: #0f172a !important; font-size: 16px !important; } /* ========================================================== 8. Homepage 3 Square Category Section Under Slideshow (Men's / Boy's / Girl's) ========================================================== */ .engo-cat-squares-section { margin-top: 0 !important; padding: 0 !important; } .engo-cat-squares { width: 100%; margin: 0; padding: 0; overflow: hidden; } .engo-cat-squares__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cat-gap, 0px); width: 100%; margin: 0; padding: 0; } .engo-cat-square { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; text-decoration: none !important; background: #0f172a; } .engo-cat-square__media { position: absolute; inset: 0; width: 100%; height: 100%; } .engo-cat-square__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; display: block; transition: transform .75s var(--ease-spring), filter .45s ease; } .engo-cat-square:hover .engo-cat-square__media img { transform: scale(1.07); } .engo-cat-square__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,20,38,0) 35%, rgba(12,20,38,.72) 100%); transition: opacity .35s ease; } .engo-cat-square:hover .engo-cat-square__overlay { background: linear-gradient(180deg, rgba(12,20,38,.08) 25%, rgba(12,20,38,.82) 100%); } .engo-cat-square__content { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(14px, 2.5vw, 32px); z-index: 2; display: flex; align-items: flex-end; justify-content: center; text-align: center; } .engo-cat-square__glass { width: 100%; max-width: 340px; padding: clamp(12px, 1.8vw, 22px) clamp(14px, 2vw, 26px); border-radius: 22px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255,255,255,.32); box-shadow: 0 14px 36px rgba(10,18,36,.28); transition: transform .35s var(--ease-spring), background .3s ease, border-color .3s ease; } .engo-cat-square:hover .engo-cat-square__glass { transform: translateY(-4px); background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.55); } .engo-cat-square__sub { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: #f3d59b; margin-bottom: 4px; } .engo-cat-square__title { font-size: clamp(20px, 2.6vw, 34px) !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 10px !important; line-height: 1.15 !important; letter-spacing: -.01em; } .engo-cat-square__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0f172a !important; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: all .25s var(--ease-spring); } .engo-cat-square:hover .engo-cat-square__btn { background: #b08d57; color: #ffffff !important; transform: translateY(-1px); } @media (max-width: 767px) { .engo-cat-squares { padding: 0 !important; margin: 18px 0 !important; } .engo-cat-squares__grid { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; padding: 0 14px !important; box-sizing: border-box !important; } .engo-cat-square { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 5.2 !important; aspect-ratio: auto !important; border-radius: 22px !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(10, 18, 36, 0.16) !important; } .engo-cat-square__media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .engo-cat-square__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 15% !important; } .engo-cat-square__overlay { background: linear-gradient(180deg, rgba(12,20,38,0) 30%, rgba(12,20,38,.75) 100%) !important; } .engo-cat-square__content { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 22px 16px !important; display: flex !important; justify-content: center !important; } .engo-cat-square__glass { width: 100% !important; max-width: 290px !important; padding: 16px 20px !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.18) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; backdrop-filter: blur(16px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: 0 12px 32px rgba(10, 18, 36, 0.28) !important; } .engo-cat-square__sub { display: block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .18em !important; color: #f3d59b !important; margin-bottom: 4px !important; } .engo-cat-square__title { display: block !important; font-size: 26px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 10px !important; line-height: 1.1 !important; } .engo-cat-square__btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 22px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; background: #ffffff !important; color: #0f172a !important; } } /* ========================================================== 9. Product Page Purchase Controls Block — Unified Spacing, Design & Placement ========================================================== */ #AddToCartForm { max-width: 480px !important; width: 100% !important; } /* Reset legacy theme float/margin/red-overlay rules inside .engo-options-row */ .engo-options-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; align-items: start !important; width: 100% !important; max-width: 480px !important; margin: 14px 0 0 !important; padding: 0 !important; } .engo-options-row > style, .engo-options-row > script { display: none !important; } .engo-options-row .engo-swatch, .engo-options-row .engo-swatch.style1, .engo-options-row .engo-swatch.style2, .engo-options-row .engo-swatch + .engo-swatch { float: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; display: block !important; } .engo-options-row .engo-swatch .swatch:before, .engo-options-row .engo-swatch .swatch:after { display: none !important; content: none !important; } .engo-options-row .engo-swatch .swatch { margin: 0 !important; padding: 0 !important; width: 100% !important; display: flex !important; flex-wrap: wrap !important; row-gap: 0 !important; column-gap: 8px !important; align-items: center !important; } .engo-options-row .engo-swatch-head { flex: 0 0 100% !important; width: 100% !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; margin: 0 0 8px 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } .engo-options-row .engo-swatch-head .engo-swatch-label { margin: 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 20px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #0f172a !important; display: inline-flex !important; align-items: center !important; } /* Kill the theme's #c50215 red :before veil on color swatches */ .engo-swatch .swatch-element.color label:before, .engo-swatch .swatch-element.color input:checked + label:before, .engo-swatch .swatch-element.color:hover > label:before { display: none !important; content: none !important; background: transparent !important; opacity: 0 !important; visibility: hidden !important; } /* Matched Color Selector Box & Size Dropdown Box (Exact Same 48px Height & 14px Radius) */ .engo-options-row .engo-swatch.style1 .swatch-element { flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; } .engo-options-row .engo-swatch.style1 .swatch label.engo-color-pill, .engo-options-row .engo-swatch.style1 .swatch input:checked + label.engo-color-pill { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; padding: 0 14px 0 12px !important; margin: 0 !important; border-radius: 14px !important; background: #ffffff !important; border: 1.5px solid rgba(15,23,42,.18) !important; box-shadow: 0 4px 14px rgba(15,23,42,.05) !important; color: #0f172a !important; opacity: 1 !important; box-sizing: border-box !important; transition: all .22s var(--ease-spring) !important; } .engo-options-row .engo-swatch.style1 .swatch input:checked + label.engo-color-pill { border-color: rgba(15,23,42,.28) !important; box-shadow: 0 4px 14px rgba(15,23,42,.06) !important; } .engo-options-row .engo-swatch.style1 .swatch label.engo-color-pill:hover { border-color: #0f172a !important; transform: translateY(-1px) !important; } .engo-options-row .engo-swatch.style1 .swatch label.engo-color-pill .engo-color-dot { display: inline-block !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important; border-radius: 50% !important; } .engo-options-row .engo-swatch.style1 .swatch label.engo-color-pill .engo-color-name { color: #0f172a !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .04em !important; line-height: 1 !important; flex: 1 1 auto; text-align: left; } .engo-options-row .engo-swatch.style1 .swatch label.engo-color-pill .engo-color-check { width: 20px; height: 20px; border-radius: 50%; background: rgba(15,23,42,.08); color: #0f172a !important; font-size: 10px !important; display: none; align-items: center; justify-content: center; margin-left: auto; flex: 0 0 20px; } .engo-options-row .engo-swatch.style1 .swatch input:checked + label.engo-color-pill .engo-color-check { display: inline-flex !important; } .engo-options-row .engo-size-select-wrap { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; position: relative !important; display: block !important; } .engo-size-dropdown-wrap { position: relative !important; width: 100% !important; display: block !important; } .engo-size-dropdown-btn { width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; border-radius: 14px !important; background: #ffffff !important; border: 1.5px solid rgba(15,23,42,.18) !important; box-shadow: 0 4px 14px rgba(15,23,42,.05) !important; font-size: 14px !important; font-weight: 600 !important; color: #0f172a !important; letter-spacing: .04em !important; text-transform: uppercase !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 16px !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; outline: none !important; } .engo-size-dropdown-btn:hover { border-color: #0f172a !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1) !important; transform: translateY(-1px) !important; } .engo-size-dropdown-wrap.is-open .engo-size-dropdown-btn { border-color: #0f172a !important; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12), 0 4px 14px rgba(15, 23, 42, 0.08) !important; } .engo-size-dropdown-wrap .engo-dropdown-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #0f172a !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .engo-size-dropdown-wrap.is-open .engo-dropdown-arrow { transform: rotate(180deg) !important; } .engo-size-dropdown-menu { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; right: 0 !important; width: 100% !important; min-width: 200px !important; max-height: 280px !important; overflow-y: auto !important; background: rgba(255, 255, 255, 0.98) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; border-radius: 18px !important; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06) !important; padding: 8px !important; z-index: 9999 !important; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s; pointer-events: none; } .engo-size-dropdown-wrap.is-open .engo-size-dropdown-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; } .engo-size-dropdown-item { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 10px 14px !important; border-radius: 10px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #0f172a !important; cursor: pointer !important; transition: all 0.16s ease !important; user-select: none !important; } .engo-size-dropdown-item:hover { background: rgba(15, 23, 42, 0.05) !important; color: #0f172a !important; transform: translateX(2px) !important; } .engo-size-dropdown-item.is-active { background: #0f172a !important; color: #ffffff !important; font-weight: 700 !important; } .engo-size-dropdown-item .engo-dropdown-check { display: none !important; align-items: center !important; justify-content: center !important; } .engo-size-dropdown-item.is-active .engo-dropdown-check { display: inline-flex !important; color: #ffffff !important; } .engo-size-dropdown-item.is-disabled { opacity: 0.45 !important; cursor: not-allowed !important; text-decoration: line-through !important; pointer-events: none !important; } .engo-size-soldout-badge { font-size: 10.5px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 999px !important; background: rgba(15, 23, 42, 0.08) !important; color: #64748b !important; text-transform: uppercase !important; text-decoration: none !important; } /* Quantity Stepper + Add to Cart Row: Exact Same 48px Height, Zero Vertical Offset, 14px Radius */ #AddToCartForm .engo-atc-row, .detail-info .engo-atc-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; width: 100% !important; max-width: 480px !important; margin: 14px 0 0 !important; padding: 0 !important; } #AddToCartForm .engo-atc-row .quantity, .detail-info .engo-atc-row .quantity { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; flex: 0 0 140px !important; width: 140px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; } #AddToCartForm .engo-atc-row .engo-qty-inner, .detail-info .engo-atc-row .engo-qty-inner { display: flex !important; align-items: center !important; width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 !important; } #AddToCartForm .engo-atc-row .js-qty, .detail-info .engo-atc-row .js-qty { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 140px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 5px !important; border-radius: 14px !important; background: #ffffff !important; border: 1.5px solid rgba(15,23,42,.18) !important; box-shadow: 0 4px 14px rgba(15,23,42,.05) !important; box-sizing: border-box !important; } #AddToCartForm .engo-atc-row .js-qty__adjust, .detail-info .engo-atc-row .js-qty__adjust { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: rgba(15,23,42,.06) !important; color: #0f172a !important; margin: 0 !important; padding: 0 !important; } #AddToCartForm .engo-atc-row .js-qty__adjust:hover, .detail-info .engo-atc-row .js-qty__adjust:hover { background: #0f172a !important; color: #ffffff !important; } #AddToCartForm .engo-atc-row button[type="submit"], #AddToCartForm .engo-atc-row .engoj-btn-addtocart, #AddToCartForm .engo-atc-row .shop-button, .detail-info .engo-atc-row .engoj-btn-addtocart, .detail-info .engo-atc-row button[type="submit"], .detail-info .cart .engo-atc-row .shop-button { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 52px !important; min-height: 52px !important; max-height: none !important; line-height: 1.25 !important; margin: 0 !important; padding: 0 20px !important; border-radius: 999px !important; background: linear-gradient(135deg, #0b1118 0%, #172333 100%) !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; box-shadow: 0 8px 24px rgba(11, 17, 24, 0.25) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; white-space: nowrap !important; overflow: hidden !important; box-sizing: border-box !important; vertical-align: middle !important; } /* Also match Quick View Quantity + Add to Cart to the same 48px height & 14px shape */ .quickview-product .quantity-all.js-qty { height: 48px !important; border-radius: 14px !important; padding: 0 5px !important; margin: 0 !important; } .quickview-product .quantity-all .js-qty__adjust { width: 36px !important; height: 36px !important; border-radius: 10px !important; } .quickview-product .btn-addToCart { height: 48px !important; border-radius: 14px !important; margin: 0 !important; } /* Size Guide Bar + Low Stock Badge Under Add to Cart */ .engo-sizeguide-under { margin: 12px 0 0 !important; width: 100% !important; max-width: 480px !important; } .engo-sizeguide-bar, a.engo-sizeguide-bar { height: 48px !important; padding: 0 16px !important; border-radius: 14px !important; background: #ffffff !important; border: 1.5px solid rgba(15,23,42,.14) !important; box-shadow: 0 4px 14px rgba(15,23,42,.04) !important; } .engo-sizeguide-bar__cta { padding: 6px 14px !important; border-radius: 10px !important; background: rgba(15,23,42,.07) !important; color: #0f172a !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; } .engo-stock-note { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: fit-content !important; max-width: 480px !important; margin: 12px 0 0 !important; padding: 7px 14px !important; border-radius: 10px !important; background: rgba(197,2,21,.06) !important; border: 1px solid rgba(197,2,21,.16) !important; color: #b80d1e !important; font-size: 12.5px !important; font-weight: 600 !important; } .engo-trust { max-width: 480px !important; margin: 14px 0 0 !important; border-radius: 14px !important; background: #ffffff !important; border: 1.5px solid rgba(15,23,42,.12) !important; } .engo-social-share { max-width: 480px !important; margin-top: 14px !important; } /* ========================================================== 10. Footer Menu Hover Fix (Kill Legacy Red Duplicate :before Text) & Premium Homepage Hero Slideshow + Engaging Campaign Banners ========================================================== */ /* ---- 10.1 Footer Menu Hover Fix ---- engo-customize.scss.liquid line 6921 adds a :before pseudo-element with content: attr(title) and color: $color-hover (#c50215 red). When our link shifts right on hover, the red :before text stayed at left:0 and overlapped the gold text. Completely disable :before/:after on all footer links. */ footer .footer-top ul li a:before, footer .footer-top ul li a:after, .footer-v1 .footer-top ul li a:before, .footer-v1 .footer-top ul li a:after, footer.footer-v1 ul.list-unstyled li a:before, footer.footer-v1 ul.list-unstyled li a:after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; opacity: 0 !important; visibility: hidden !important; } footer.footer-v1 .footer-top ul.list-unstyled li a, .footer-v1 .footer-top ul li a { position: relative !important; display: inline-block !important; color: #c9c3b4 !important; padding-left: 0 !important; text-decoration: none !important; transform: translateX(0) !important; transition: color .22s ease, transform .25s var(--ease-spring) !important; } footer.footer-v1 .footer-top ul.list-unstyled li a:hover, footer.footer-v1 .footer-top ul.list-unstyled li a:focus, .footer-v1 .footer-top ul li a:hover, .footer-v1 .footer-top ul li a:focus { color: #b08d57 !important; padding-left: 0 !important; transform: translateX(6px) !important; } /* ---- 10.2 Hero Slideshow v1 — Max Width with Slightly Rounded Corners ---- */ .engo-slideshow-wrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 32px !important; padding: 0 !important; } @media (max-width: 767px) { .engo-slideshow-wrap { padding: 0 !important; margin-top: 0 !important; margin-bottom: 20px !important; } } .section-slideshow-v1.engo-hero-v1 { position: relative !important; width: 100% !important; max-width: 100% !important; background: #0b1120 !important; border-radius: 0 0 20px 20px !important; overflow: hidden !important; border: none !important; border-bottom: 1.5px solid rgba(56, 189, 248, 0.22) !important; box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.28) !important; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); } @media (max-width: 991px) { .section-slideshow-v1.engo-hero-v1 { border-radius: 0 0 16px 16px !important; } } @media (max-width: 767px) { .section-slideshow-v1.engo-hero-v1 { border-radius: 0 0 14px 14px !important; box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.22) !important; } } .section-slideshow-v1.engo-hero-v1 .slider-v1, .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1, .section-slideshow-v1.engo-hero-v1 .slick-list, .section-slideshow-v1.engo-hero-v1 .slick-track, .section-slideshow-v1.engo-hero-v1 .slideshow-item, .section-slideshow-v1.engo-hero-v1 .bg-slider, .section-slideshow-v1.engo-hero-v1 .bg-slider img, .section-slideshow-v1.engo-hero-v1 .engo-hero-bg-img { border-radius: inherit !important; overflow: hidden !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-item { position: relative !important; overflow: hidden !important; height: clamp(480px, 44vw, 680px) !important; min-height: 440px !important; } /* Desktop Height Presets */ .engo-slideshow-wrap.engo-h-auto .section-slideshow-v1.engo-hero-v1 .slideshow-item { height: auto !important; min-height: 0 !important; } .engo-slideshow-wrap.engo-h-auto .section-slideshow-v1.engo-hero-v1 .bg-slider { position: relative !important; height: auto !important; inset: auto !important; } .engo-slideshow-wrap.engo-h-auto .section-slideshow-v1.engo-hero-v1 .bg-slider img, .engo-slideshow-wrap.engo-h-auto .section-slideshow-v1.engo-hero-v1 .engo-hero-bg-img { height: auto !important; max-height: 82vh !important; object-fit: contain !important; } .engo-slideshow-wrap.engo-h-compact .section-slideshow-v1.engo-hero-v1 .slideshow-item { height: clamp(440px, 38vw, 520px) !important; min-height: 440px !important; } .engo-slideshow-wrap.engo-h-medium .section-slideshow-v1.engo-hero-v1 .slideshow-item { height: clamp(480px, 44vw, 640px) !important; min-height: 460px !important; } .engo-slideshow-wrap.engo-h-large .section-slideshow-v1.engo-hero-v1 .slideshow-item { height: clamp(560px, 50vw, 750px) !important; min-height: 520px !important; } .engo-slideshow-wrap.engo-h-fullscreen .section-slideshow-v1.engo-hero-v1 .slideshow-item { height: 86vh !important; min-height: 600px !important; } .section-slideshow-v1.engo-hero-v1 .bg-slider { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .section-slideshow-v1.engo-hero-v1 .bg-slider img, .section-slideshow-v1.engo-hero-v1 .engo-hero-bg-img { width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; transform: none !important; transition: opacity 0.4s ease !important; } .section-slideshow-v1.engo-hero-v1 .slick-active .bg-slider img, .section-slideshow-v1.engo-hero-v1 .slick-active .engo-hero-bg-img { transform: none !important; } /* Directional subtle left vignette so editorial text is legible, while models stay 100% bright and clean */ .engo-hero-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 26, 0.28) 0%, rgba(8, 14, 26, 0) 22%, rgba(8, 14, 26, 0) 76%, rgba(8, 14, 26, 0.45) 100%), linear-gradient(90deg, rgba(9, 15, 28, 0.72) 0%, rgba(9, 15, 28, 0.45) 35%, rgba(9, 15, 28, 0.08) 58%, rgba(9, 15, 28, 0) 75%); pointer-events: none; z-index: 1; } /* Hide legacy shoe-theme cutout overlay */ .section-slideshow-v1.engo-hero-v1 .slider-img { display: none !important; } /* Full-height container aligning the left editorial column */ .section-slideshow-v1.engo-hero-v1 .engo-hero-inner { position: relative !important; z-index: 3 !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-top: 84px !important; padding-bottom: 64px !important; padding-left: clamp(24px, 6vw, 110px) !important; padding-right: clamp(24px, 6vw, 110px) !important; } /* Left-Aligned Architectural Editorial Content (no clunky dark box covering models) */ .section-slideshow-v1.engo-hero-v1 .slideshow-content.engo-hero-content.engo-hero-editorial { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; transform: none !important; z-index: 3 !important; max-width: 620px !important; width: 100% !important; text-align: left !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; } /* Kicker Row: Number + Gold Line + Pill Badge */ .engo-hero-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; } .engo-hero-kicker__num { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: #38bdf8 !important; } .engo-hero-kicker__line { width: 34px; height: 1.5px; background: linear-gradient(90deg, #38bdf8, rgba(56,189,248,.25)) !important; } .engo-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: 999px; background: rgba(56, 189, 248, 0.15) !important; border: 1px solid rgba(56, 189, 248, 0.4) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #38bdf8 !important; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 0; } .engo-hero-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8 !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-content .content1 { font-size: 13px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: #38bdf8 !important; margin: 0 0 10px 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-content .content2 { font-size: clamp(38px, 4.8vw, 72px) !important; line-height: 1.03 !important; font-weight: 700 !important; letter-spacing: -.025em !important; color: #ffffff !important; margin: 0 0 18px 0 !important; display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; text-shadow: 0 10px 32px rgba(0,0,0,.38); } .engo-hero-desc { font-size: clamp(14.5px, 1.1vw, 17px) !important; line-height: 1.65 !important; color: rgba(255,255,255,.86) !important; margin: 0 0 28px 0 !important; max-width: 510px; padding-left: 16px; border-left: 2px solid #38bdf8 !important; } .engo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .section-slideshow-v1.engo-hero-v1 .engo-hero-actions .button-name.engo-hero-btn-primary { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; height: 52px !important; padding: 0 32px !important; border-radius: 999px !important; background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.35) !important; box-shadow: 0 12px 28px rgba(56, 189, 248, 0.35) !important; color: #0e182c !important; border: 1px solid rgba(255,255,255,.42) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; transition: all .28s var(--ease-spring) !important; } .section-slideshow-v1.engo-hero-v1 .engo-hero-actions .button-name.engo-hero-btn-primary:hover { background: #ffffff !important; color: #0f172a !important; transform: translateY(-2px) !important; box-shadow: 0 18px 38px rgba(0,0,0,.32) !important; } .engo-hero-btn-ghost { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 52px !important; padding: 0 28px !important; border-radius: 999px !important; background: rgba(255,255,255,.12) !important; border: 1.5px solid rgba(255,255,255,.38) !important; color: #ffffff !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; text-decoration: none !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: all .28s var(--ease-spring) !important; } .engo-hero-btn-ghost:hover { background: rgba(255,255,255,.26) !important; border-color: #ffffff !important; color: #ffffff !important; transform: translateY(-2px) !important; } /* Micro-trust bar under buttons */ .engo-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.76); } .engo-hero-meta span { display: inline-flex; align-items: center; gap: 7px; } .engo-hero-meta i { color: #f3d59b; font-size: 14px; } /* Bottom Social Bar & Slide Dots */ .section-slideshow-v1.engo-hero-v1 .slider-v1 .social { bottom: 26px !important; left: clamp(24px, 6vw, 110px) !important; z-index: 6 !important; gap: 10px; } .section-slideshow-v1.engo-hero-v1 .slider-v1 .social a { margin-right: 0 !important; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(255,255,255,.88) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; opacity: 1 !important; transition: all .22s ease !important; } .section-slideshow-v1.engo-hero-v1 .slider-v1 .social a:hover { background: #38bdf8 !important; border-color: #38bdf8 !important; color: #070c18 !important; box-shadow: 0 0 24px rgba(56, 189, 248, 0.65) !important; color: #ffffff !important; transform: translateY(-2px); } /* Slideshow Arrows & Dots */ .section-slideshow-v1.engo-hero-v1 .slideshow-arrow { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: rgba(14, 24, 48, 0.45) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.3) !important; color: #ffffff !important; z-index: 6 !important; display: inline-flex !important; align-items: center; justify-content: center; transition: all .25s var(--ease-spring) !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-arrow:hover { background: #38bdf8 !important; border-color: #38bdf8 !important; color: #070c18 !important; box-shadow: 0 0 24px rgba(56, 189, 248, 0.65) !important; color: #ffffff !important; transform: translateY(-50%) scale(1.08) !important; } .section-slideshow-v1.engo-hero-v1 .slick-dots { bottom: 30px !important; right: clamp(24px, 6vw, 110px) !important; z-index: 6 !important; } .section-slideshow-v1.engo-hero-v1 .slick-dots li a { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .12em; color: rgba(255,255,255,.55) !important; } .section-slideshow-v1.engo-hero-v1 .slick-dots li.slick-active a { color: #38bdf8 !important; } .section-slideshow-v1.engo-hero-v1 .slick-dots li.slick-active a:before { background: #38bdf8 !important; } @media (max-width: 991px) { .section-slideshow-v1.engo-hero-v1 .slideshow-item { height: 540px !important; min-height: 540px !important; } .section-slideshow-v1.engo-hero-v1 .engo-hero-inner { padding-top: 76px !important; padding-bottom: 48px !important; padding-left: 24px !important; padding-right: 24px !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-content.engo-hero-content.engo-hero-editorial { max-width: 480px !important; } .engo-hero-desc { font-size: 14px !important; margin-bottom: 20px !important; } } @media (max-width: 767px) { .section-slideshow-v1.engo-hero-v1 .slideshow-item { height: clamp(540px, 78vh, 680px) !important; min-height: clamp(540px, 78vh, 680px) !important; max-height: 84vh !important; position: relative !important; overflow: hidden !important; } .section-slideshow-v1.engo-hero-v1 .bg-slider { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } .section-slideshow-v1.engo-hero-v1 .bg-slider img, .section-slideshow-v1.engo-hero-v1 .engo-hero-bg-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: 68% 18% !important; transform: none !important; display: block !important; } /* Mobile Natural / Auto Sizing: Zero zoom, Zero cropping */ .engo-slideshow-wrap.engo-mb-auto .section-slideshow-v1.engo-hero-v1 .slideshow-item { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; } .engo-slideshow-wrap.engo-mb-auto .section-slideshow-v1.engo-hero-v1 .bg-slider { position: relative !important; height: auto !important; inset: auto !important; } .engo-slideshow-wrap.engo-mb-auto .section-slideshow-v1.engo-hero-v1 .bg-slider img, .engo-slideshow-wrap.engo-mb-auto .section-slideshow-v1.engo-hero-v1 .engo-hero-bg-img { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; transform: none !important; display: block !important; } /* Preset Ratios */ .engo-slideshow-wrap.engo-mb-4_5 .section-slideshow-v1.engo-hero-v1 .slideshow-item { aspect-ratio: 4 / 5 !important; height: auto !important; } .engo-slideshow-wrap.engo-mb-1_1 .section-slideshow-v1.engo-hero-v1 .slideshow-item { aspect-ratio: 1 / 1 !important; height: auto !important; } .engo-slideshow-wrap.engo-mb-9_16 .section-slideshow-v1.engo-hero-v1 .slideshow-item { aspect-ratio: 9 / 16 !important; height: auto !important; } .engo-slideshow-wrap.engo-mb-16_9 .section-slideshow-v1.engo-hero-v1 .slideshow-item { aspect-ratio: 16 / 9 !important; height: auto !important; } .engo-slideshow-wrap:not(.engo-mb-auto) .section-slideshow-v1.engo-hero-v1 .bg-slider { position: absolute !important; inset: 0 !important; height: 100% !important; } .engo-slideshow-wrap:not(.engo-mb-auto) .section-slideshow-v1.engo-hero-v1 .bg-slider img, .engo-slideshow-wrap:not(.engo-mb-auto) .section-slideshow-v1.engo-hero-v1 .engo-hero-bg-img { height: 100% !important; object-fit: cover !important; object-position: center 15% !important; } .engo-hero-mobile-link { position: absolute !important; inset: 0 !important; z-index: 10 !important; display: block !important; width: 100% !important; height: 100% !important; cursor: pointer; } .engo-hero-vignette { background: linear-gradient(180deg, rgba(9, 15, 28, 0.25) 0%, rgba(9, 15, 28, 0.1) 45%, rgba(9, 15, 28, 0.65) 100%) !important; } .section-slideshow-v1.engo-hero-v1 .engo-hero-inner { align-items: flex-end !important; padding: 16px 14px 20px !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-content.engo-hero-content.engo-hero-editorial { max-width: 100% !important; text-align: left !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-content .content1 { font-size: 10px !important; letter-spacing: .14em !important; margin-bottom: 3px !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-content .content2 { font-size: 18px !important; margin-bottom: 6px !important; } .engo-hero-desc { display: none !important; } .engo-hero-meta { display: none !important; } .engo-hero-kicker { display: none !important; } .engo-hero-actions { justify-content: flex-start !important; gap: 6px !important; } .section-slideshow-v1.engo-hero-v1 .engo-hero-actions .button-name.engo-hero-btn-primary, .engo-hero-btn-ghost { height: 32px !important; padding: 0 14px !important; font-size: 10.5px !important; } } /* ---- 10.3 Asymmetric Editorial Campaign Banner (.section-banner-v1.engo-editorial-b1) ---- */ .section-banner-v1.engo-editorial-b1 { max-width: 1600px; margin: var(--space-section) auto 0 !important; padding: 0 18px; } .section-banner-v1.engo-editorial-b1 .banner-v1 { display: grid !important; grid-template-columns: 1fr 1.85fr; gap: 24px; align-items: stretch; } .section-banner-v1.engo-editorial-b1 .banner-item { width: 100% !important; position: relative !important; border-radius: 26px !important; overflow: hidden !important; box-shadow: 0 18px 44px rgba(15,23,42,.14); background: #0f172a; min-height: 440px; } .section-banner-v1.engo-editorial-b1 .banner-item.order-1 { order: 1; } .section-banner-v1.engo-editorial-b1 .banner-item.order-2 { order: 2; } /* When right location is selected, swap column proportions cleanly */ .section-banner-v1.engo-editorial-b1 .banner-v1:has(.banner-2.order-1) { grid-template-columns: 1.85fr 1fr; } .section-banner-v1.engo-editorial-b1 .engo-b1-card { position: relative; width: 100%; height: 100%; min-height: 440px; border-radius: 26px !important; overflow: hidden; } .section-banner-v1.engo-editorial-b1 .engo-b1-card img { width: 100% !important; height: 100% !important; min-height: 440px; max-height: 520px; object-fit: cover !important; object-position: center top !important; display: block; transition: transform .75s var(--ease-spring) !important; } .section-banner-v1.engo-editorial-b1 .banner-item:hover .engo-b1-card img { transform: scale(1.06) !important; } .engo-b1-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,20,38,0) 30%, rgba(12,20,38,.82) 100%); pointer-events: none; } .engo-b1-overlay--wide { background: linear-gradient(90deg, rgba(12,20,38,.78) 0%, rgba(12,20,38,.45) 55%, rgba(12,20,38,.12) 100%); } .section-banner-v1.engo-editorial-b1 .engo-b1-left-glass { position: absolute !important; left: 22px !important; right: 22px !important; bottom: 22px !important; top: auto !important; padding: 20px 22px !important; border-radius: 20px !important; background: rgba(255,255,255,.16) !important; -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255,255,255,.32); text-align: left !important; z-index: 2; } .section-banner-v1.engo-editorial-b1 .engo-b1-left-glass h5 { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #f3d59b !important; margin: 0 0 4px 0 !important; } .section-banner-v1.engo-editorial-b1 .engo-b1-left-glass h2 { font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.15 !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 10px 0 !important; } .engo-b1-mini-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .1em; color: #ffffff !important; text-decoration: none !important; } .engo-b1-mini-link:hover { color: #f3d59b !important; } .section-banner-v1.engo-editorial-b1 .engo-b1-right-glass { position: absolute !important; top: 50% !important; left: clamp(24px, 4vw, 52px) !important; right: auto !important; transform: translateY(-50%) !important; width: calc(100% - 48px) !important; max-width: 460px !important; padding: clamp(24px, 3vw, 36px) !important; border-radius: 24px !important; background: rgba(14, 24, 48, 0.56) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,.26); box-shadow: 0 20px 50px rgba(8,14,28,.35); text-align: left !important; z-index: 2; } .engo-b1-eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(176,141,87,.26); border: 1px solid rgba(243,213,155,.45); color: #f3d59b !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .15em !important; text-transform: uppercase !important; margin-bottom: 12px; } .section-banner-v1.engo-editorial-b1 .engo-b1-right-glass h2 { font-size: clamp(26px, 3vw, 42px) !important; line-height: 1.1 !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 12px 0 !important; } .section-banner-v1.engo-editorial-b1 .engo-b1-desc { font-size: 14.5px !important; line-height: 1.6 !important; color: rgba(255,255,255,.84) !important; margin: 0 0 20px 0 !important; } .section-banner-v1.engo-editorial-b1 .engo-b1-cta { margin-top: 0 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 46px !important; padding: 0 24px !important; border-radius: 14px !important; background: #ffffff !important; color: #0f172a !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .09em !important; text-transform: uppercase !important; box-shadow: 0 10px 24px rgba(0,0,0,.22) !important; } .section-banner-v1.engo-editorial-b1 .engo-b1-cta:hover { background: #b08d57 !important; color: #ffffff !important; transform: translateY(-2px) !important; } @media (max-width: 991px) { .section-banner-v1.engo-editorial-b1 .banner-v1, .section-banner-v1.engo-editorial-b1 .banner-v1:has(.banner-2.order-1) { grid-template-columns: 1fr !important; } .section-banner-v1.engo-editorial-b1 .banner-item, .section-banner-v1.engo-editorial-b1 .engo-b1-card, .section-banner-v1.engo-editorial-b1 .engo-b1-card img { min-height: 360px !important; } } /* ---- 10.4 Dual Collection Showcase Banners (.section-banner-v3.engo-dual-banner) ---- */ .section-banner-v3.engo-dual-banner .engo-b3-card { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 18px 44px rgba(15,23,42,.14); background: #0f172a; } .section-banner-v3.engo-dual-banner .engo-b3-card .img-url { position: relative; border-radius: 26px !important; overflow: hidden; } .section-banner-v3.engo-dual-banner .engo-b3-card img { width: 100% !important; height: 480px !important; object-fit: cover !important; object-position: center top !important; display: block; transition: transform .75s var(--ease-spring) !important; } .section-banner-v3.engo-dual-banner .engo-b3-card:hover img { transform: scale(1.06) !important; } .engo-b3-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,20,38,.05) 20%, rgba(12,20,38,.82) 100%); pointer-events: none; } .section-banner-v3.engo-dual-banner .banner-info.engo-b3-glass { position: absolute !important; left: 24px !important; right: 24px !important; bottom: 24px !important; top: auto !important; transform: none !important; max-width: 440px; padding: 24px 26px !important; border-radius: 22px !important; background: rgba(14, 24, 48, 0.58) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(255,255,255,.26) !important; box-shadow: 0 18px 40px rgba(8,14,28,.34) !important; text-align: left !important; } .engo-b3-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(176,141,87,.28); border: 1px solid rgba(243,213,155,.45); color: #f3d59b !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; margin-bottom: 10px; } .section-banner-v3.engo-dual-banner .banner-info.engo-b3-glass h2 { color: #ffffff !important; font-size: clamp(24px, 2.5vw, 34px) !important; line-height: 1.12 !important; font-weight: 700 !important; margin: 0 0 8px 0 !important; } .section-banner-v3.engo-dual-banner .banner-info.engo-b3-glass h2 strong, .section-banner-v3.engo-dual-banner .banner-info.engo-b3-glass h2 span { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,.16); color: #f3d59b !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; } .engo-b3-desc { font-size: 13.5px !important; line-height: 1.55 !important; color: rgba(255,255,255,.82) !important; margin: 0 0 16px 0 !important; } .section-banner-v3.engo-dual-banner .engo-b3-btn { margin-top: 0 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 44px !important; padding: 0 22px !important; border-radius: 12px !important; background: #ffffff !important; color: #0f172a !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .09em !important; text-transform: uppercase !important; } .section-banner-v3.engo-dual-banner .engo-b3-btn:hover { background: #b08d57 !important; color: #ffffff !important; transform: translateY(-2px) !important; } @media (max-width: 767px) { .section-banner-v3.engo-dual-banner .engo-b3-card img { height: 360px !important; } .section-banner-v3.engo-dual-banner .banner-info.engo-b3-glass { left: 14px !important; right: 14px !important; bottom: 14px !important; padding: 18px !important; } } /* ---- 10.5 VIP Insider Club Newsletter Banner (.section-newsletter-v1.engo-vip-banner) ---- */ .section-newsletter-v1.engo-vip-banner { position: relative; background: linear-gradient(135deg, #1b2d52 0%, #0f172a 55%, #0b1326 100%) !important; padding: 64px 24px !important; border-radius: 30px !important; overflow: hidden; } .engo-vip-banner__overlay { position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(176,141,87,.24) 0%, transparent 55%), radial-gradient(circle at 20% 80%, rgba(255,255,255,.08) 0%, transparent 50%); pointer-events: none; } .section-newsletter-v1.engo-vip-banner .newsletter.engo-vip-card { position: relative; z-index: 2; max-width: 720px !important; margin: 0 auto !important; padding: clamp(28px, 4vw, 44px) !important; border-radius: 26px !important; background: rgba(255,255,255,.94) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.85) !important; box-shadow: 0 24px 60px rgba(8,14,28,.32) !important; } .engo-vip-eyebrow { display: inline-block; padding: 5px 14px; border-radius: 999px; background: rgba(176,141,87,.15); color: #b08d57; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; } .section-newsletter-v1.engo-vip-banner .engo-vip-form { width: 100% !important; max-width: 520px !important; background: #ffffff !important; border: 1.5px solid rgba(15,23,42,.18) !important; border-radius: 14px !important; padding: 5px !important; gap: 8px; } .section-newsletter-v1.engo-vip-banner .engo-vip-form .btn-newsletter.engo-vip-submit { width: auto !important; height: 44px !important; padding: 0 22px !important; border-radius: 10px !important; background: linear-gradient(180deg, #1e293b, #0f172a) !important; color: #ffffff !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } .section-newsletter-v1.engo-vip-banner .engo-vip-form .btn-newsletter.engo-vip-submit:hover { background: #b08d57 !important; transform: translateY(-1px) !important; } .engo-vip-perks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; font-size: 12.5px; font-weight: 600; color: #4a5164; } .engo-vip-perks i { color: #b08d57; margin-right: 5px; } /* ---- 10.6 Product Page "Additional Information" Dynamic Specs Tab (.engo-addinfo-wrap) ---- */ .engo-addinfo-wrap { padding: 6px 0; } .engo-addinfo-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; } .engo-addinfo-side { display: flex; flex-direction: column; gap: 20px; } .engo-addinfo-card { background: rgba(255, 255, 255, 0.92); border: 1.5px solid rgba(15, 23, 42, 0.1); border-radius: 18px; padding: 22px 24px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04); } .engo-addinfo-heading { display: flex; align-items: center; gap: 10px; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; color: #0f172a !important; margin: 0 0 16px 0 !important; padding-bottom: 12px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .engo-addinfo-heading i { width: 30px; height: 30px; border-radius: 8px; background: rgba(176, 141, 87, 0.14); color: #b08d57; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .engo-addinfo-table { width: 100%; border-collapse: collapse; } .engo-addinfo-table tr { border-bottom: 1px solid rgba(15, 23, 42, 0.07); } .engo-addinfo-table tr:last-child { border-bottom: 0; } .engo-addinfo-table th, .engo-addinfo-table td { padding: 11px 8px; font-size: 14px; line-height: 1.5; text-align: left; vertical-align: top; } .engo-addinfo-table th { width: 38%; font-weight: 700; color: #0f172a; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; } .engo-addinfo-table td { color: #4a5164; font-weight: 500; } .engo-addinfo-table td a { color: #0f172a; font-weight: 600; text-decoration: none; } .engo-addinfo-table td a:hover { color: #b08d57 !important; } .engo-addinfo-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; } .engo-addinfo-badge--instock { background: rgba(30, 107, 59, 0.1); color: #1e6b3b; } .engo-addinfo-badge--out { background: rgba(197, 2, 21, 0.1); color: #b80d1e; } .engo-addinfo-list { margin: 0; padding: 0 0 0 18px; color: #4a5164; font-size: 14px; line-height: 1.65; } .engo-addinfo-list li { margin-bottom: 10px; } .engo-addinfo-list li:last-child { margin-bottom: 0; } .engo-addinfo-list strong { color: #0f172a; font-weight: 700; } @media (max-width: 991px) { .engo-addinfo-grid { grid-template-columns: 1fr; gap: 16px; } .engo-addinfo-card { padding: 18px; } } /* ========================================================== 11. Semi-Transparent Image-Tinted Banner Cards, Compact Newsletter & Contact/Social Announcement Bar ========================================================== */ /* ---- 11.1 Banner glass cards: lighter, see-through, tinted per background image ---- */ .section-banner-v3.engo-dual-banner .banner-info.engo-b3-glass, .section-banner-v1.engo-editorial-b1 .engo-b1-right-glass, .section-banner-v1.engo-editorial-b1 .engo-b1-left-glass { -webkit-backdrop-filter: blur(10px) saturate(160%) !important; backdrop-filter: blur(10px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255,255,255,.22) inset !important; } /* Softer image gradients so the photography shows through */ .engo-b3-gradient { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.32) 100%) !important; } .engo-b1-overlay { background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.3) 100%) !important; } .engo-b1-overlay--wide { background: linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.08) 55%, rgba(0,0,0,0) 100%) !important; } /* Dual showcase — Men's card (warm walnut / camel tones) */ .section-banner-v3.engo-dual-banner .banner-1 .banner-info.engo-b3-glass { background: linear-gradient(135deg, rgba(74, 52, 36, 0.42) 0%, rgba(120, 88, 58, 0.26) 100%) !important; } /* Dual showcase — Girls' card (dusty rose / plum tones) */ .section-banner-v3.engo-dual-banner .banner-2 .banner-info.engo-b3-glass { background: linear-gradient(135deg, rgba(122, 64, 86, 0.40) 0%, rgba(196, 128, 140, 0.24) 100%) !important; } .section-banner-v3.engo-dual-banner .banner-2 .engo-b3-badge { background: rgba(255, 214, 224, 0.22) !important; border-color: rgba(255, 214, 224, 0.5) !important; color: #ffe1e8 !important; } .section-banner-v3.engo-dual-banner .banner-2 .banner-info.engo-b3-glass h2 strong, .section-banner-v3.engo-dual-banner .banner-2 .banner-info.engo-b3-glass h2 span { color: #ffe1e8 !important; } /* Men's editorial split banner — charcoal-navy & camel tones */ #shopify-section-1565859546933 .engo-b1-right-glass { background: linear-gradient(135deg, rgba(15, 23, 42, 0.42) 0%, rgba(40, 56, 88, 0.22) 100%) !important; } #shopify-section-1565859546933 .engo-b1-left-glass { background: linear-gradient(135deg, rgba(86, 64, 44, 0.38) 0%, rgba(150, 118, 84, 0.20) 100%) !important; } /* Kids' editorial split banner — fresh olive / sage tones */ #shopify-section-section_banner_v1_UH4xCm .engo-b1-right-glass { background: linear-gradient(135deg, rgba(52, 72, 52, 0.40) 0%, rgba(110, 140, 104, 0.22) 100%) !important; } #shopify-section-section_banner_v1_UH4xCm .engo-b1-left-glass { background: linear-gradient(135deg, rgba(40, 70, 92, 0.38) 0%, rgba(96, 140, 168, 0.20) 100%) !important; } /* Keep text legible on lighter glass */ .section-banner-v3.engo-dual-banner .banner-info.engo-b3-glass h2, .section-banner-v1.engo-editorial-b1 .engo-b1-right-glass h2, .section-banner-v1.engo-editorial-b1 .engo-b1-left-glass h2 { text-shadow: 0 2px 14px rgba(0,0,0,.35); } .engo-b3-desc, .section-banner-v1.engo-editorial-b1 .engo-b1-desc { color: rgba(255,255,255,.92) !important; text-shadow: 0 1px 8px rgba(0,0,0,.3); } /* ---- 11.2 Compact newsletter placed directly above footer ---- */ .section-newsletter-v1.engo-vip-banner { padding: 30px 20px !important; border-radius: 24px !important; margin-top: var(--space-section) !important; } .section-newsletter-v1.engo-vip-banner .newsletter.engo-vip-card { max-width: 920px !important; padding: 22px 28px !important; border-radius: 20px !important; display: grid !important; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 24px; text-align: left !important; } .section-newsletter-v1.engo-vip-banner .newsletter.engo-vip-card .newsletter-info h2, .section-newsletter-v1.engo-vip-banner .newsletter.engo-vip-card .newsletter-info h3 { font-size: clamp(20px, 2vw, 26px) !important; margin: 0 0 4px !important; line-height: 1.2 !important; } .section-newsletter-v1.engo-vip-banner .newsletter.engo-vip-card .newsletter-info p { font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 !important; } .section-newsletter-v1.engo-vip-banner .engo-vip-eyebrow { margin-bottom: 6px; padding: 3px 12px; font-size: 10.5px; } .section-newsletter-v1.engo-vip-banner .engo-vip-form { max-width: 100% !important; margin: 0 !important; } .section-newsletter-v1.engo-vip-banner .engo-vip-perks { grid-column: 1 / -1; margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(15,23,42,.08); justify-content: flex-start; font-size: 12px; } footer.footer-v1 { margin-top: 28px !important; } @media (max-width: 767px) { .section-newsletter-v1.engo-vip-banner .newsletter.engo-vip-card { grid-template-columns: 1fr; gap: 14px; padding: 18px !important; text-align: center !important; } .section-newsletter-v1.engo-vip-banner .engo-vip-perks { justify-content: center; } } /* ---- 11.3 Announcement bar with contact info & social icons ---- */ .brand-announce.engo-announce { padding: 0 !important; height: 36px; display: flex; align-items: center; font-size: 11.5px; letter-spacing: .08em; } .engo-announce__inner { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .engo-announce__contact, .engo-announce__social { display: flex; align-items: center; gap: 18px; flex: 1 1 0; } .engo-announce__social { justify-content: flex-end; gap: 8px; } .engo-announce__msg { flex: 0 1 auto; text-align: center; text-transform: uppercase; font-weight: 600; color: #fff; white-space: nowrap; } .engo-announce__msg a { color: #fff !important; text-decoration: none !important; } .engo-announce__contact a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.88) !important; text-decoration: none !important; font-weight: 500; text-transform: none; letter-spacing: .03em; transition: color .2s ease; } .engo-announce__contact a i { color: #f3d59b; font-size: 12px; } .engo-announce__contact a:hover { color: #f3d59b !important; } .engo-announce__social a { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff !important; font-size: 11.5px; text-decoration: none !important; transition: all .22s ease; } .engo-announce__social a:hover { background: #b08d57; border-color: #b08d57; transform: translateY(-1px); } @media (max-width: 767px) { .brand-announce.engo-announce { height: 34px; } .engo-announce__contact { gap: 10px; } .engo-announce__social a { width: 22px; height: 22px; font-size: 10.5px; } } /* ========================================================== 12. Sleek Compact Header Bar: Reduced Height, Minimal Side Gutters & Flawless Logo/Menu Alignment ========================================================== */ /* Outer floating rounded header bar */ #header, .header-v1, .header-v2, .header-v3, .header-v4, #header.menu-scroll-v1, .header-v2.menu-scroll-v1 { top: var(--glass-top, 42px) !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 4px 0 !important; border: 1px solid var(--glass-border) !important; border-radius: 16px !important; box-shadow: var(--glass-shadow) !important; z-index: 1000 !important; transition: top .35s var(--ease-spring), left .35s var(--ease-spring), right .35s var(--ease-spring), background .35s ease, box-shadow .35s ease, border-radius .35s ease !important; } #header.is-scrolled, .header-v2.is-scrolled { top: 10px !important; left: 12px !important; right: 12px !important; width: auto !important; padding: 2px 0 !important; border-radius: 14px !important; background: var(--glass-bg-strong) !important; box-shadow: 0 12px 36px rgba(15,23,42,.18), 0 1px 0 rgba(255,255,255,.8) inset !important; } /* Eliminate empty container gutters on both sides */ #header .container-fluid.my-container, #header .my-container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } /* Main header row: unified horizontal flex container with vertical centering */ #header .header-v2 .row, #header .row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; min-height: 44px !important; } /* 1. Logo column & brand mark: vertically centered and snug to the left */ #header .col-xl-2.logo, #header .col-xl-2, #header .logo { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; } #header .logo a { display: inline-flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; } /* Logo sizing */ #header .logo img { max-height: 28px !important; width: auto !important; object-fit: contain !important; transition: transform .3s var(--ease-spring); } /* Default, Scrolled & Non-Homepage: Show Dark Logo ONLY */ #header .engo-logo-dark, #header.is-scrolled .engo-logo-dark, body:not(.template-index) #header .engo-logo-dark { display: block !important; } #header .engo-logo-light, #header.is-scrolled .engo-logo-light, body:not(.template-index) #header .engo-logo-light { display: none !important; } /* Homepage Top Hero (Transparent): Show Light Logo ONLY */ body.template-index #header:not(.is-scrolled) .engo-logo-dark { display: none !important; } body.template-index #header:not(.is-scrolled) .engo-logo-light { display: block !important; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)) !important; } /* 2. Menu column & horizontal nav: perfectly centered and aligned with luxury breathing space */ #header .col-xl-6, #header .menu.header-center { flex: 1 1 auto !important; width: auto !important; max-width: none !important; padding: 0 20px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #header .header-center .navbar { padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #header .header-center .navbar-collapse { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } #header .navbar-nav { display: flex !important; align-items: center !important; flex-direction: row !important; margin: 0 !important; padding: 0 !important; gap: 14px !important; } #header .navbar-nav > .nav-item { display: inline-flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; position: relative !important; height: 100% !important; } #header .navbar-nav > .nav-item > a, #header .menu-level-1 { display: inline-flex !important; align-items: center !important; padding: 10px 14px !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: .08em !important; text-transform: uppercase !important; line-height: 1.2 !important; } #header.is-scrolled .menu-level-1 { padding-top: 8px !important; padding-bottom: 8px !important; } #header .navbar-nav > .nav-item > a:after { bottom: 0px !important; width: 24px !important; height: 2px !important; } #header.is-scrolled .navbar-nav > .nav-item > a:after { bottom: 0px !important; } /* 3. Right actions (Search, Account, Cart, Pushmenu): vertically centered, snug to the right */ #header .col-xl-4.header-right, #header .col-xl-4, #header .header-right { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; } #header .header-right .form-inline { margin: 0 !important; display: inline-flex !important; align-items: center !important; position: relative !important; } #header .header-right .form-control { height: 32px !important; line-height: 32px !important; font-size: 12px !important; width: 125px !important; padding: 0 32px 0 14px !important; border-radius: 999px !important; transition: width .35s var(--ease-spring), background .25s ease, box-shadow .25s ease !important; } #header .header-right .form-control:focus { width: 180px !important; } #header .header-right .search-submit { height: 32px !important; line-height: 32px !important; width: 32px !important; position: absolute !important; right: 0 !important; top: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13.5px !important; padding: 0 !important; background: transparent !important; border: none !important; } #header .header-right .btn-login-icon, #header .header-right .btn-cart, #header .header-right .icon-pushmenu { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 32px !important; line-height: 1 !important; padding: 0 3px !important; font-size: 16px !important; margin: 0 !important; } #header .minicart-bag-number { position: absolute !important; top: -2px !important; right: -6px !important; min-width: 15px !important; height: 15px !important; line-height: 15px !important; font-size: 9px !important; } /* ========================================================== Mega-Menu: Wide Contained Box (Not Full Page) ========================================================== */ #header .dropdown-menu, #header .dropdown-menu.ver1, #header .dropdown-menu.ver2, #header .dropdown-menu.ver3, #header .dropdown-menu.ver4 { position: fixed !important; left: 20px !important; right: 20px !important; margin-left: auto !important; margin-right: auto !important; width: auto !important; max-width: 960px !important; border-radius: 24px !important; background: rgba(255, 255, 255, 0.94) !important; -webkit-backdrop-filter: blur(36px) saturate(190%) !important; backdrop-filter: blur(36px) saturate(190%) !important; border: 1.5px solid rgba(255, 255, 255, 0.8) !important; border-top: none !important; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 1px 0 rgba(255, 255, 255, 0.9) inset !important; padding: 24px 28px !important; z-index: 1040 !important; } #header .dropdown-menu .container-fluid.my-container, #header .dropdown-menu .my-container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } body.template-index #header:not(.is-scrolled) .dropdown-menu.ver1, body.template-index #header:not(.is-scrolled) .dropdown-menu.ver2, body.template-index #header:not(.is-scrolled) .dropdown-menu.ver3, body.template-index #header:not(.is-scrolled) .dropdown-menu.ver4 { top: 86px !important; } #header.is-scrolled .dropdown-menu.ver1, #header.is-scrolled .dropdown-menu.ver2, #header.is-scrolled .dropdown-menu.ver3, #header.is-scrolled .dropdown-menu.ver4 { top: 50px !important; } body:not(.template-index) #header .dropdown-menu.ver1, body:not(.template-index) #header .dropdown-menu.ver2, body:not(.template-index) #header .dropdown-menu.ver3, body:not(.template-index) #header .dropdown-menu.ver4 { top: 50px !important; } /* ========================================================== 13. Whole Theme Full Width: Header, Slideshow, Banners, Products, Newsletter & Footer ========================================================== */ /* Universal full width container across all theme sections */ .my-container, .container-fluid.my-container, .container-fluid { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: clamp(20px, 3.5vw, 48px) !important; padding-right: clamp(20px, 3.5vw, 48px) !important; box-sizing: border-box !important; } /* Header inner container: fits snugly inside the rounded floating bar */ #header .my-container, #header .container-fluid.my-container { max-width: 100% !important; width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; margin: 0 !important; } /* 1. Main Slideshow: 100% full width */ .section-slideshow-v1, .section-slideshow-v1.engo-hero-v1 { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .section-slideshow-v1.engo-hero-v1 .slider-v1, .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1, .section-slideshow-v1.engo-hero-v1 .slideshow-item { width: 100% !important; border-radius: 0 !important; overflow: hidden !important; } .section-slideshow-v1.engo-hero-v1 .engo-hero-inner { width: 100% !important; max-width: 100% !important; padding-left: clamp(20px, 3.5vw, 48px) !important; padding-right: clamp(20px, 3.5vw, 48px) !important; } /* 2. Category Squares: 100% full width */ .engo-cat-squares { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .engo-cat-squares .engo-cat-squares__grid { width: 100% !important; border-radius: 0 !important; } /* 3. Split Banners: 100% full width */ .section-banner-v1, .section-banner-v1.engo-editorial-b1, .section-banner-v1 .banner-v1 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } .section-banner-v1.engo-editorial-b1 { margin-top: 12px !important; } .section-banner-v1.engo-editorial-b1 .banner-v1 { border-radius: 0 !important; } /* 4. Dual Showcase Banners: 100% full width */ .section-banner-v3, .section-banner-v3.engo-dual-banner { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; margin-top: var(--space-section) !important; } .section-banner-v3.engo-dual-banner .row.no-gutters { border-radius: 0 !important; } /* 5. Newsletter: 100% full width */ .section-newsletter-v1, .section-newsletter-v1.engo-vip-banner { width: 100% !important; max-width: 100% !important; margin: var(--space-section) 0 0 0 !important; padding: 40px clamp(20px, 3.5vw, 48px) !important; border-radius: 0 !important; box-sizing: border-box !important; } .section-newsletter-v1.engo-vip-banner .container-fluid.my-container { max-width: 100% !important; width: 100% !important; padding: 0 !important; } .section-newsletter-v1.engo-vip-banner .newsletter.engo-vip-card { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } /* 6. Footer: 100% full width */ footer.footer-v1 { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; } footer.footer-v1 .footer-top { width: 100% !important; border-radius: 0 !important; padding: 48px 0 24px !important; } footer.footer-v1 .footer-bottom { width: 100% !important; border-radius: 0 !important; } footer.footer-v1 .my-container, footer.footer-v1 .container-fluid.my-container { max-width: 100% !important; width: 100% !important; padding-left: clamp(20px, 3.5vw, 48px) !important; padding-right: clamp(20px, 3.5vw, 48px) !important; } /* 7. Announcement Bar: 100% full width */ .brand-announce.engo-announce { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .engo-announce__inner { width: 100% !important; max-width: 100% !important; padding-left: clamp(20px, 3.5vw, 48px) !important; padding-right: clamp(20px, 3.5vw, 48px) !important; } /* ========================================================== 14. Mobile Experience: Vertical Category Flow, Hidden Desktop Banners & Expandable Accordion Footer ========================================================== */ @media (max-width: 767px) { /* 1. Hide redundant desktop banner sections on mobile for clean, fast mobile UX */ .section-banner-v1, .section-banner-v2, .section-banner-v3, .section-banner-v4, .section-banner-v5, .section-banner-v6, .section-banner-v7, .section-banner-v8, .section-banner-v9, .section-brand-v1, .brand-benefits, .brand-story { display: none !important; } /* 2. Mobile Hero Slideshow: sleek portrait viewport proportion */ .section-slideshow-v1.engo-hero-v1 .slideshow-item { height: clamp(440px, 70vh, 520px) !important; min-height: 420px !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-content { padding-bottom: 24px !important; } .section-slideshow-v1.engo-hero-v1 .engo-hero-title { font-size: clamp(28px, 7.5vw, 38px) !important; line-height: 1.15 !important; } .section-slideshow-v1.engo-hero-v1 .engo-hero-desc { font-size: 13.5px !important; line-height: 1.45 !important; } /* 3. Mobile Category Squares: Rich vertical flow (one full-width portrait card per category) */ .engo-cat-squares { padding: 0 !important; margin: 16px 0 !important; } .engo-cat-squares__grid { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; padding: 0 14px !important; box-sizing: border-box !important; } .engo-cat-square { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 5.2 !important; border-radius: 22px !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(10, 18, 36, 0.16) !important; } .engo-cat-square__media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .engo-cat-square__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 15% !important; } .engo-cat-square__overlay { background: linear-gradient(180deg, rgba(12,20,38,0) 30%, rgba(12,20,38,.75) 100%) !important; } .engo-cat-square__content { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 22px 16px !important; display: flex !important; justify-content: center !important; } .engo-cat-square__glass { width: 100% !important; max-width: 290px !important; padding: 16px 20px !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.18) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; backdrop-filter: blur(16px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: 0 12px 32px rgba(10, 18, 36, 0.28) !important; } .engo-cat-square__sub { display: block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .18em !important; color: #f3d59b !important; margin-bottom: 4px !important; } .engo-cat-square__title { display: block !important; font-size: 26px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 10px !important; line-height: 1.1 !important; } .engo-cat-square__btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 22px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; background: #ffffff !important; color: #0f172a !important; } /* 4. Mobile Expandable Accordion Footer */ footer.footer-v1 .footer-top { padding: 24px 16px 12px !important; } .engo-footer-col { margin-bottom: 0 !important; padding: 0 !important; width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } .engo-footer-heading { cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 4px !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #ffffff !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; user-select: none; -webkit-tap-highlight-color: transparent; } .engo-footer-chevron { font-size: 14px !important; color: #f3d59b !important; transition: transform .3s var(--ease-spring) !important; display: inline-block !important; } .engo-footer-col.is-open .engo-footer-chevron { transform: rotate(180deg) !important; } .engo-footer-content { display: none !important; padding: 12px 6px 16px !important; animation: engoFooterSlide .25s ease-out; } .engo-footer-col.is-open .engo-footer-content { display: block !important; } .engo-footer-content li { margin-bottom: 8px !important; } .engo-footer-content li a { font-size: 13.5px !important; color: rgba(255, 255, 255, 0.78) !important; } @keyframes engoFooterSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .footer-column-1.engo-footer-col--info { margin-bottom: 16px !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; text-align: center !important; width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } .footer-column-1.engo-footer-col--info .footer-logo { display: inline-block !important; margin-bottom: 12px !important; } .footer-column-1.engo-footer-col--info .footer-address, .footer-column-1.engo-footer-col--info .footer-tel, .footer-column-1.engo-footer-col--info .footer-email, .footer-column-1.engo-footer-col--info .footer-clock { justify-content: center !important; font-size: 13px !important; } .footer-column-1.engo-footer-col--info .payment-method { margin-top: 14px !important; display: flex !important; justify-content: center !important; } /* Disable floating chat on mobile view */ shopify-chat, #shopify-chat, .shopify-chat, #dummy-chat-button, iframe[name*="shopify-chat"], iframe#shopify-chat-iframe, [data-testid="chat-button"], .chat-button, .chat-button-container, #chat-button-container, div[id*="shopify-chat"], div[class*="shopify-chat"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: scale(0) !important; } /* 5. Mobile Homepage Product Sliders: 1 product per view + Autoplay */ .section-product-v1 .js-mobile-product-slider { position: relative !important; margin-left: 0 !important; margin-right: 0 !important; padding-bottom: 20px !important; } /* Pre-slick fallback (smooth horizontal snap, 1 product per view) */ .section-product-v1 .js-mobile-product-slider:not(.slick-initialized) { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; } .section-product-v1 .js-mobile-product-slider:not(.slick-initialized) .product-col { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; scroll-snap-align: center !important; } /* Active Slick layout (do NOT override Slick track transform or slide widths) */ .section-product-v1 .js-mobile-product-slider.slick-initialized { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; } .section-product-v1 .js-mobile-product-slider.slick-initialized .slick-list { display: block !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; } .section-product-v1 .js-mobile-product-slider.slick-initialized .slick-slide { outline: none !important; box-sizing: border-box !important; padding: 0 6px !important; float: left !important; } .section-product-v1 .js-mobile-product-slider.slick-initialized .product-col { padding: 0 6px !important; box-sizing: border-box !important; } .section-product-v1 .js-mobile-product-slider .product-col .col-12 { padding: 0 !important; width: 100% !important; max-width: 100% !important; } .section-product-v1 .js-mobile-product-slider .product-item-v1 { width: 100% !important; max-width: min(calc(100vw - 24px), 480px) !important; margin: 0 auto !important; border-radius: 0 !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; border: none !important; padding-bottom: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; } .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-image { border-radius: 16px !important; overflow: hidden !important; position: relative !important; background: #f8fafc !important; } .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-image img, .section-product-v1 .js-mobile-product-slider .product-item-v1 .engo-card-img { border-radius: 16px !important; aspect-ratio: 1 / 1.15 !important; object-fit: cover !important; width: 100% !important; height: auto !important; display: block !important; } .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-info, .section-product-v1 .js-mobile-product-slider .product-item-v1 .info-product { padding: 12px 14px 4px !important; text-align: center !important; display: block !important; } .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-name a { font-size: 15px !important; font-weight: 600 !important; color: #0f172a !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; line-height: 1.3 !important; } .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-price, .section-product-v1 .js-mobile-product-slider .product-item-v1 .price-product { margin-top: 4px !important; font-size: 15px !important; font-weight: 700 !important; display: block !important; } /* Slick dots */ .section-product-v1 .js-mobile-product-slider .slick-dots { position: absolute !important; bottom: -2px !important; left: 0 !important; right: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .section-product-v1 .js-mobile-product-slider .slick-dots li { margin: 0 !important; padding: 0 !important; display: inline-block !important; } .section-product-v1 .js-mobile-product-slider .slick-dots li button { width: 6px !important; height: 6px !important; border-radius: 999px !important; border: 0 !important; background: rgba(15, 23, 42, 0.22) !important; font-size: 0 !important; line-height: 0 !important; padding: 0 !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; outline: none !important; } .section-product-v1 .js-mobile-product-slider .slick-dots li.slick-active button { width: 20px !important; background: #0f172a !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important; } /* Slick navigation arrows */ .section-product-v1 .engo-slider-arrow { position: absolute; top: 42%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); color: #0f172a; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: all 0.2s ease; padding: 0; outline: none; } .section-product-v1 .engo-slider-arrow:active { transform: translateY(-50%) scale(0.92); } .section-product-v1 .engo-slider-arrow--prev { left: 8px; } .section-product-v1 .engo-slider-arrow--next { right: 8px; } } @media (min-width: 768px) { .engo-footer-chevron { display: none !important; } .engo-footer-content { display: block !important; } } /* ========================================================== 15. Total Scroll-to-Top Disabling & Mobile App-Like Enhancements ========================================================== */ /* 1. Scroll-to-top button completely disabled site-wide */ #back-to-top, .back-to-top, .scroll-to-top, [id*="back-to-top"], [class*="back-to-top"] { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* 2. iOS Safe-Area & Touch Polish for Mobile App-Like Experience */ html, body { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } @media (max-width: 767px) { /* Dynamic iPhone safe area padding for the floating tabbar */ .engo-app-tabbar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; } body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } .engo-sticky-atc { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; } /* Fast, native mobile scrolling */ .wrap, .menu-mobile-tab .box, .mobile-search.js-mobile-search, .js-minicart-content { -webkit-overflow-scrolling: touch; } /* Enhanced mobile buttons & inputs touch target */ button, input, select, textarea { font-size: 16px; /* Prevents auto-zoom on iOS inputs */ } } /* ---- Interactive Size Guide Modal (Frosted Glass Architecture) ---- */ .engo-modal { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; } .engo-modal[hidden] { display: none !important; } .engo-modal__backdrop { position: absolute !important; inset: 0 !important; background: rgba(10, 18, 36, 0.45) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } .engo-modal__box { position: relative !important; width: 100% !important; max-width: 640px !important; max-height: 90vh !important; overflow-y: auto !important; background: rgba(255, 255, 255, 0.98) !important; -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; border-radius: 24px !important; box-shadow: 0 24px 60px rgba(10, 18, 36, 0.22) !important; padding: 26px 24px !important; animation: engoModalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important; } .engo-modal__box::-webkit-scrollbar { width: 6px !important; } .engo-modal__box::-webkit-scrollbar-track { background: transparent !important; } .engo-modal__box::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15) !important; border-radius: 999px !important; } .engo-modal__box::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.3) !important; } @keyframes engoModalIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .engo-modal__close { position: absolute !important; top: 20px !important; right: 20px !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(15, 23, 42, 0.06) !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; color: #0f172a !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; outline: none !important; } .engo-modal__close:hover { background: #0f172a !important; color: #ffffff !important; transform: scale(1.08) !important; } .engo-modal__header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 18px !important; padding-right: 44px !important; } .engo-modal__badge { display: inline-block !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #b08d57 !important; margin-bottom: 4px !important; } .engo-modal__title { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: -0.01em !important; } .engo-unit-toggle { display: inline-flex !important; background: rgba(15, 23, 42, 0.07) !important; padding: 3px !important; border-radius: 999px !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; } .engo-unit-btn { border: 0 !important; background: transparent !important; padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; color: #64748b !important; cursor: pointer !important; transition: all 0.2s ease !important; } .engo-unit-btn.is-active { background: #0f172a !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2) !important; } /* Modal Tabs (Girls vs Boys vs Men) */ .engo-modal-tabs { display: flex !important; gap: 8px !important; margin-bottom: 14px !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; padding-bottom: 12px !important; overflow-x: auto !important; } .engo-modal-tab-btn { border: 1px solid rgba(15, 23, 42, 0.12) !important; background: #ffffff !important; padding: 7px 18px !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #64748b !important; cursor: pointer !important; transition: all 0.2s ease !important; white-space: nowrap !important; } .engo-modal-tab-btn:hover { border-color: #0f172a !important; color: #0f172a !important; } .engo-modal-tab-btn.is-active { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16) !important; } /* Garment Sub-Toggles (Tops vs Bottoms) */ .engo-garment-toggle-wrap { display: flex !important; margin-bottom: 14px !important; } .engo-garment-toggle { display: inline-flex !important; background: rgba(15, 23, 42, 0.05) !important; padding: 3px !important; border-radius: 999px !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; gap: 4px !important; max-width: 100% !important; overflow-x: auto !important; } .engo-garment-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 0 !important; background: transparent !important; padding: 6px 14px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; color: #64748b !important; cursor: pointer !important; transition: all 0.2s ease !important; outline: none !important; white-space: nowrap !important; } .engo-garment-btn:hover { color: #0f172a !important; } .engo-garment-btn.is-active { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important; font-weight: 700 !important; } .engo-tab-panel { display: none !important; } .engo-tab-panel.is-active { display: block !important; animation: engoFadeIn 0.25s ease both !important; } .engo-sub-panel { display: none !important; } .engo-sub-panel.is-active { display: block !important; animation: engoFadeIn 0.22s ease both !important; } @keyframes engoFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .engo-modal__note { font-size: 13px !important; color: #64748b !important; margin-bottom: 14px !important; line-height: 1.5 !important; } .engo-modal__table-wrap { overflow-x: auto !important; border-radius: 14px !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; margin-bottom: 16px !important; } .engo-modal__table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; } .engo-modal__table th.th-size, .engo-modal__table td.td-size, .engo-modal__table th:first-child, .engo-modal__table td:first-child { text-align: left !important; padding-left: 20px !important; font-weight: 700 !important; color: #0f172a !important; width: 25% !important; } .engo-modal__table th { background: #f8f9fb !important; color: #0f172a !important; font-weight: 700 !important; padding: 10px 12px !important; border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important; white-space: nowrap !important; text-align: center !important; } .engo-modal__table td { padding: 10px 12px !important; border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; color: #334155 !important; white-space: nowrap !important; text-align: center !important; } .engo-modal__table tr:nth-child(even) td { background: rgba(15, 23, 42, 0.02) !important; } .engo-modal__tips { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 14px 16px !important; border-radius: 14px !important; background: rgba(15, 23, 42, 0.03) !important; border: 1px solid rgba(15, 23, 42, 0.06) !important; } .engo-modal__tip-item { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 12.5px !important; color: #475569 !important; } .engo-modal__tip-item i { color: #b08d57 !important; font-size: 13px !important; flex-shrink: 0 !important; } .engo-modal__footer-guide { margin-top: 14px; text-align: center; } .engo-size-page-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #b08d57 !important; text-decoration: underline; transition: color .2s ease; } .engo-size-page-link:hover { color: #0f172a !important; } body.engo-modal-open, html.engo-modal-open { overflow: hidden !important; } /* ========================================================================== MOBILE APP-LIKE ENHANCEMENTS & MICRO-INTERACTIONS (UI/UX) ========================================================================== */ /* 1. Micro-Haptic Tap Feedback on Touch & Click */ .engo-app-tab:active, .enj-add-to-cart-btn:active, .engo-btn-whatsapp:active, .engo-dd-toggle:active, .engo-city-pill:active, .engo-guide-tab:active, .engo-unit-btn:active, .engo-sticky-atc__btn:active, .product-icon a:active { transform: scale(0.95) !important; transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } /* 2. Enhanced Native Momentum Scrolling & Overscroll Containment */ @media (max-width: 991px) { html, body { /* overscroll-behavior removed */ -webkit-overflow-scrolling: touch; } } /* 3. Bottom Navigation Bar Status Indicators & WhatsApp Styling */ .engo-app-tab { position: relative; -webkit-tap-highlight-color: transparent; user-select: none; } .engo-app-tab.is-active::after { content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #b08d57; } .engo-app-tab--wa i { color: #25D366 !important; font-size: 19px !important; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .engo-app-tab--wa:hover i, .engo-app-tab--wa:active i { color: #128C7E !important; transform: scale(1.1); } /* 4. Bottom Sheet Touch Drawer Polish */ @media (max-width: 767px) { .menu-mobile-tab, .cart-mobile-content { border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.25) !important; } } /* ========================================================================== DESKTOP LUXURY SEARCH DRAWER & HEADER SINGLE SEARCH ICON ========================================================================== */ #header .header-right .btn-search { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; color: #0f172a !important; font-size: 16px !important; text-decoration: none !important; background: transparent !important; transition: all 0.22s var(--ease-spring) !important; cursor: pointer !important; } #header .header-right .btn-search:hover, #header .header-right .btn-search:active { background: rgba(15, 23, 42, 0.08) !important; color: #b08d57 !important; transform: scale(1.08) !important; } body.template-index #header:not(.is-scrolled) .header-right .btn-search { color: #f6f1e7 !important; } body.template-index #header:not(.is-scrolled) .header-right .btn-search:hover { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; } /* Luxury Frosted Glass Search Modal Near Top of Viewport */ .search-box, .search-box.js-search-box { position: fixed !important; top: 15px !important; bottom: auto !important; left: 50% !important; right: auto !important; margin: 0 !important; transform: translateX(-50%) translateY(-10px) !important; width: 92% !important; max-width: 660px !important; height: auto !important; max-height: calc(100vh - 30px) !important; background: rgba(255, 255, 255, 0.98) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; backdrop-filter: blur(28px) saturate(180%) !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28) !important; border-radius: 22px !important; padding: 18px 22px !important; z-index: 100005 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; overflow: hidden !important; transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important; } @media (max-width: 767px) { .search-box, .search-box.js-search-box { top: 10px !important; padding: 14px 16px !important; max-height: calc(100vh - 20px) !important; border-radius: 18px !important; } } .search-box.active, .search-box.js-search-box.active, .search-box.is-open, .search-box.js-search-box.is-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } /* Modal Title Header */ .search-box .modal-title, .search-box.js-search-box .modal-title { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 0 0 12px 0 !important; padding: 0 !important; border: none !important; flex: 0 0 auto !important; } .search-box h4, .search-box.js-search-box .modal-title h4 { font-size: 13px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: static !important; } .search-box h4:before, .search-box.js-search-box .modal-title h4:before { display: none !important; content: none !important; } .search-box .close-search, .search-box.js-search-box .close-search { position: static !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; color: #0f172a !important; background: rgba(15, 23, 42, 0.06) !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; flex: 0 0 32px !important; } .search-box .close-search:hover, .search-box.js-search-box .close-search:hover { background: rgba(15, 23, 42, 0.12) !important; transform: rotate(90deg) !important; } /* Search Form Structure (Vertical Stack) */ .search-box .engo-desktop-search-form, .search-box form, .search-box.js-search-box .engo-desktop-search-form, .search-box.js-search-box form { display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } /* Input Row */ .search-box .engo-search-field-wrap, .search-box.js-search-box .engo-search-field-wrap { position: relative !important; width: 100% !important; display: block !important; flex: 0 0 auto !important; } .search-box .engo-search-input, .search-box .form-control, .search-box.js-search-box .engo-search-input, .search-box.js-search-box .form-control { width: 100% !important; height: 48px !important; line-height: 1.15 !important; border-radius: 999px !important; border: 1.5px solid rgba(15, 23, 42, 0.16) !important; background: #f8fafc !important; padding: 0 50px 0 20px !important; font-size: 14.5px !important; font-weight: 500 !important; color: #0f172a !important; box-shadow: none !important; outline: none !important; box-sizing: border-box !important; transition: all 0.2s ease !important; } .search-box .engo-search-input:focus, .search-box .form-control:focus, .search-box.js-search-box .engo-search-input:focus, .search-box.js-search-box .form-control:focus { border-color: #0f172a !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08) !important; } .search-box .engo-search-btn, .search-box button[type="submit"], .search-box.js-search-box .engo-search-btn, .search-box.js-search-box button[type="submit"] { position: absolute !important; right: 5px !important; top: 50% !important; transform: translateY(-50%) !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #0f172a !important; color: #ffffff !important; border: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.2s ease !important; } .search-box .engo-search-btn:hover, .search-box button[type="submit"]:hover, .search-box.js-search-box .engo-search-btn:hover, .search-box.js-search-box button[type="submit"]:hover { background: #b08d57 !important; } /* Predictive Dropdown & Results Slot with Smooth Scrolling */ .search-box .engo-predictive-results-slot, .search-box .js-predictive-slot, .search-box.js-search-box .engo-predictive-results-slot, .search-box.js-search-box .js-predictive-slot { display: block !important; width: 100% !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; margin-top: 10px !important; } .search-box .engo-predictive-dropdown, .search-box.js-search-box .engo-predictive-dropdown { position: static !important; width: 100% !important; margin: 0 !important; max-height: calc(100vh - 160px) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; display: none; } .search-box .engo-predictive-dropdown.is-open, .search-box.js-search-box .engo-predictive-dropdown.is-open { display: block !important; opacity: 1 !important; transform: none !important; } @media (max-width: 767px) { .search-box .engo-predictive-dropdown, .search-box.js-search-box .engo-predictive-dropdown { max-height: calc(100vh - 125px) !important; } } /* Custom Scrollbar */ .search-box .engo-predictive-dropdown::-webkit-scrollbar, .search-box .js-predictive-slot::-webkit-scrollbar, .search-box.js-search-box .engo-predictive-dropdown::-webkit-scrollbar, .search-box.js-search-box .js-predictive-slot::-webkit-scrollbar { width: 6px !important; } .search-box .engo-predictive-dropdown::-webkit-scrollbar-track, .search-box .js-predictive-slot::-webkit-scrollbar-track, .search-box.js-search-box .engo-predictive-dropdown::-webkit-scrollbar-track, .search-box.js-search-box .js-predictive-slot::-webkit-scrollbar-track { background: #f1f5f9 !important; border-radius: 999px !important; } .search-box .engo-predictive-dropdown::-webkit-scrollbar-thumb, .search-box .js-predictive-slot::-webkit-scrollbar-thumb, .search-box.js-search-box .engo-predictive-dropdown::-webkit-scrollbar-thumb, .search-box.js-search-box .js-predictive-slot::-webkit-scrollbar-thumb { background: #0f172a !important; border-radius: 999px !important; } .search-box .engo-pred-item, .search-box.js-search-box .engo-pred-item { display: flex !important; align-items: center !important; gap: 14px !important; padding: 12px 16px !important; border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important; text-decoration: none !important; transition: background 0.15s ease !important; } .search-box .engo-pred-item:hover, .search-box.js-search-box .engo-pred-item:hover { background: rgba(15, 23, 42, 0.04) !important; } .search-box .engo-pred-thumb, .search-box.js-search-box .engo-pred-thumb { width: 52px !important; height: 52px !important; border-radius: 10px !important; object-fit: cover !important; flex: 0 0 52px !important; background: #f1f5f9 !important; } .search-box .engo-pred-info, .search-box.js-search-box .engo-pred-info { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; } .search-box .engo-pred-title, .search-box.js-search-box .engo-pred-title { font-size: 14px !important; font-weight: 600 !important; color: #0f172a !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .search-box .engo-pred-price, .search-box.js-search-box .engo-pred-price { font-size: 13.5px !important; font-weight: 700 !important; color: #b08d57 !important; } .search-box .engo-pred-arrow, .search-box.js-search-box .engo-pred-arrow { color: #94a3b8 !important; font-size: 14px !important; margin-left: auto !important; } .search-box .engo-pred-all, .search-box.js-search-box .engo-pred-all { display: block !important; text-align: center !important; padding: 14px !important; font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important; background: rgba(15, 23, 42, 0.03) !important; text-decoration: none !important; transition: all 0.2s ease !important; } .search-box .engo-pred-all:hover, .search-box.js-search-box .engo-pred-all:hover { background: #0f172a !important; color: #ffffff !important; } .background-overlay-search.js-bg-overlay-search { position: fixed !important; inset: 0 !important; background: rgba(10, 18, 36, 0.45) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; z-index: 100004 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.24s ease, visibility 0.24s !important; } .background-overlay-search.js-bg-overlay-search.active, .background-overlay-search.js-bg-overlay-search.is-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ========================================================================== HIDE FILTER FROM SIDE IN COLLECTION & EXPAND PRODUCT GRID TO FULL WIDTH ========================================================================== */ /* Hide side filter column on collection pages */ .content-collection-page .col-xxl-3, .content-collection-page .col-lg-3:has(.sidebar-left), .content-collection-page .col-lg-3:has(.engoj-collection-sidebar), .content-collection-page .sidebar.sidebar-left, .content-collection-page .engoj-collection-sidebar { display: none !important; width: 0 !important; max-width: 0 !important; flex: 0 0 0% !important; padding: 0 !important; margin: 0 !important; visibility: hidden !important; } /* Expand product grid to full 100% width */ .content-collection-page .col-xxl-9.col-lg-9, .content-collection-page .col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } /* Hide redundant mobile sidebar head on desktop */ @media (min-width: 992px) { .engo-sidebar-mobile-head { display: none !important; } } /* ========================================================================== COLLECTION INFINITE SCROLLING ========================================================================== */ /* Hide standard pagination on collection pages */ .engo-standard-pagination, .product-grid-view .pagination { display: none !important; } .engo-infinite-scroll-wrap { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px 0 30px !important; margin: 0 auto !important; position: relative !important; } .engo-infinite-sentinel { height: 20px !important; width: 100% !important; pointer-events: none !important; visibility: hidden !important; } .engo-infinite-loader { display: none; align-items: center; gap: 14px; padding: 13px 28px; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(15, 23, 42, 0.12); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); border-radius: 999px; transition: all 0.3s ease; } .engo-infinite-loader.is-visible { display: inline-flex !important; } .engo-infinite-spinner { width: 18px; height: 18px; border: 2.5px solid rgba(15, 23, 42, 0.15); border-top-color: #0f172a; border-radius: 50%; animation: engoInfiniteSpin 0.75s linear infinite; } @keyframes engoInfiniteSpin { to { transform: rotate(360deg); } } .engo-infinite-text { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: #0f172a; text-transform: uppercase; } .engo-infinite-end { display: none; align-items: center; justify-content: center; padding: 24px 0; width: 100%; } .engo-infinite-end.is-visible { display: inline-flex !important; } .engo-infinite-end-badge { display: inline-block; padding: 10px 24px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 999px; } .engo-infinite-btn { display: none; align-items: center; gap: 10px; padding: 13px 32px; background: #0f172a; color: #ffffff; border: 1px solid #0f172a; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .engo-infinite-btn.is-visible { display: inline-flex !important; } .engo-infinite-btn:hover { background: #b08d57; border-color: #b08d57; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(176, 141, 87, 0.28); } /* ========================================================================== OFFICIAL SIZE GUIDE PAGES LUXURY ENHANCEMENT (/pages/size-guide-*) ========================================================================== */ .engo-sizeguide-page-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-bottom: 60px; } /* 1. Department Switcher Navigation */ .engo-sg-nav-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .engo-sg-nav-title { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #b08d57; } .engo-sg-nav-pills { display: flex; flex-wrap: wrap; gap: 10px; } .engo-sg-nav-pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 999px; background: #ffffff; border: 1.5px solid rgba(15, 23, 42, 0.12); color: #0f172a !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04); transition: all .25s cubic-bezier(0.16, 1, 0.3, 1); } .engo-sg-nav-pill:hover { background: #0f172a; color: #ffffff !important; border-color: #0f172a; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16); } .engo-sg-nav-pill.is-active { background: #0f172a; color: #f3d59b !important; border-color: #0f172a; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22); } /* 2. Top Toolbar (Notice + IN/CM Switcher + WhatsApp) */ .engo-sg-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 22px; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); margin-bottom: 24px; } .engo-sg-notice { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: #0f172a; } .engo-sg-pulse { width: 9px; height: 9px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); flex-shrink: 0; } .engo-sg-actions { display: inline-flex; align-items: center; gap: 12px; } .engo-sg-unit-toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); } .engo-sg-unit-toggle button { padding: 5px 14px; border-radius: 999px; border: none; font-size: 12px; font-weight: 700; cursor: pointer; background: transparent; color: #64748b; transition: all .2s ease; } .engo-sg-unit-toggle button.is-active { background: #0f172a; color: #f3d59b; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2); } .engo-sg-wa-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: #25D366; color: #ffffff !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25); transition: all .2s ease; } .engo-sg-wa-btn:hover { background: #1eb954; transform: translateY(-2px); color: #ffffff !important; } /* 3. Category Jump Navigation */ .engo-sg-jump-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; padding: 12px 18px; background: #f8fafc; border-radius: 14px; border: 1px solid rgba(15, 23, 42, 0.06); } .engo-sg-jump-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; color: #64748b; letter-spacing: .08em; } .engo-sg-jump-list { display: flex; flex-wrap: wrap; gap: 8px; } .engo-sg-jump-pill { padding: 5px 14px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.12); color: #0f172a !important; font-size: 12px; font-weight: 700; text-decoration: none !important; transition: all .2s ease; } .engo-sg-jump-pill:hover { background: #b08d57; color: #ffffff !important; border-color: #b08d57; transform: translateY(-1px); } /* 4. Content Card & Overrides for Raw Word Tables */ .engo-sg-content-card { padding: 36px 40px !important; border-radius: 24px !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05) !important; margin-bottom: 30px !important; } @media (max-width: 767px) { .engo-sg-content-card { padding: 16px 12px !important; } } /* Category Headings */ .engo-sg-content-body h3, .engo-sg-content-body h2, .engo-sg-content-body .MsoNormal h3 { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 21px !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: .04em !important; margin-top: 42px !important; margin-bottom: 18px !important; padding-bottom: 12px !important; border-bottom: 2px solid rgba(176, 141, 87, 0.35) !important; text-transform: uppercase !important; scroll-margin-top: 100px; } .engo-sg-content-body h3:first-of-type, .engo-sg-content-body h2:first-of-type { margin-top: 0 !important; } .engo-sg-content-body h3::before, .engo-sg-content-body h2::before { content: "" !important; display: inline-block !important; width: 7px !important; height: 22px !important; border-radius: 4px !important; background: #b08d57 !important; } .engo-sg-content-body h4 { font-size: 14px !important; color: #b08d57 !important; margin-bottom: 12px !important; font-weight: 700 !important; } /* Responsive Table Wrapper with Horizontal Scroll */ .engo-size-table-card { position: relative !important; width: 100% !important; margin-bottom: 36px !important; border-radius: 18px !important; overflow: hidden !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important; background: #ffffff !important; } .engo-size-scroll-wrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .engo-size-scroll-wrap::-webkit-scrollbar { height: 7px !important; } .engo-size-scroll-wrap::-webkit-scrollbar-thumb { background: #b08d57 !important; border-radius: 4px !important; } .engo-scroll-hint { display: none; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #b08d57; padding: 8px 16px; background: rgba(176, 141, 87, 0.1); border-bottom: 1px solid rgba(176, 141, 87, 0.2); } @media (max-width: 991px) { .engo-scroll-hint { display: flex !important; } } /* Tables in Size Guide */ .engo-sg-content-body table, .engo-sg-content-body .MsoNormalTable { width: 100% !important; min-width: 620px !important; max-width: 100% !important; border-collapse: collapse !important; border: none !important; margin: 0 !important; } .engo-sg-content-body table tr:first-child td, .engo-sg-content-body table tr:first-child th { background: #0f172a !important; color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .06em !important; text-transform: uppercase !important; padding: 13px 14px !important; border: none !important; border-bottom: 2px solid #b08d57 !important; text-align: center !important; white-space: nowrap !important; } .engo-sg-content-body table tr:first-child td span, .engo-sg-content-body table tr:first-child td p, .engo-sg-content-body table tr:first-child td b { color: #ffffff !important; font-weight: 700 !important; } .engo-sg-content-body table tr td, .engo-sg-content-body table tr th { padding: 12px 14px !important; font-size: 13px !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; text-align: center !important; white-space: nowrap !important; vertical-align: middle !important; } /* Pinned first column (Size / Dimension label) */ .engo-sg-content-body table tr td:first-child, .engo-sg-content-body table tr th:first-child { position: sticky !important; left: 0 !important; z-index: 2 !important; background: #f8fafc !important; color: #0f172a !important; font-weight: 700 !important; text-align: left !important; padding-left: 18px !important; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05) !important; } .engo-sg-content-body table tr:first-child td:first-child, .engo-sg-content-body table tr:first-child th:first-child { background: #0f172a !important; color: #f3d59b !important; z-index: 3 !important; } .engo-sg-content-body table tr:nth-child(even) td { background: #ffffff !important; } .engo-sg-content-body table tr:nth-child(odd):not(:first-child) td { background: #f8f9fc !important; } .engo-sg-content-body table tr:hover td { background: rgba(176, 141, 87, 0.08) !important; } /* 5. Measuring Guide Card */ .engo-sg-guide-card { padding: 34px !important; border-radius: 24px !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important; margin-top: 30px !important; } .engo-sg-guide-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .engo-sg-guide-header i { font-size: 26px; color: #b08d57; } .engo-sg-guide-header h3 { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0; } .engo-sg-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 26px; } .engo-sg-guide-item { padding: 18px; background: rgba(15, 23, 42, 0.03); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 14px; } .engo-sg-guide-item h4 { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 6px; } .engo-sg-guide-item p { font-size: 13px; color: #475569; line-height: 1.5; margin: 0; } .engo-sg-guide-footer { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 20px; border-top: 1px solid rgba(15, 23, 42, 0.08); } .engo-sg-badge-item { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #0f172a; } .engo-sg-badge-item i { color: #b08d57; font-size: 16px; } /* ======================================================== ENGO FREE SHIPPING PROGRESS BAR (DRAWER & CART PAGE) ======================================================== */ .engo-cart-free-shipping { padding: 14px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 16px; } .engo-cfs__message { font-size: 13px; line-height: 1.4; margin-bottom: 8px; color: #334155; font-weight: 500; } .engo-cfs__unlocked { color: #059669; font-weight: 700; } .engo-cfs__unlocked i { margin-right: 4px; } .engo-cfs__needed strong { color: #1e3a8a; font-weight: 700; } .engo-cfs__bar { width: 100%; height: 7px; background: #e2e8f0; border-radius: 999px; overflow: hidden; } .engo-cfs__progress { height: 100%; background: linear-gradient(90deg, #3b82f6, #10b981); border-radius: 999px; transition: width 0.4s ease; } /* ========================================================== LASTLOOK Modern Luxury Atelier - Full Storewide Color Shifting System Seamless, High-End Color Transformation for Header, Banners, CTAs & Atmosphere ========================================================== */ /* Global Smooth Color Shift Transition */ body, .wrap, #header, header.menu-mobile, .brand-announce, .banner-collection-page, .pd-banner, .engo-dept-badge, .engo-col-pill, .engo-wa-btn, button.engoj-btn-addtocart, .engo-sticky-atc, .product-single__swatch, .engo-sizeguide-btn, .minicart-bag-number { transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease !important; } :root { --theme-accent: #0f172a; --theme-secondary: #c5a880; --theme-badge-bg: #0f172a; --theme-badge-text: #ffffff; --theme-accent-glow: rgba(15, 23, 42, 0.16); --theme-line-gradient: linear-gradient(90deg, #0f172a, #c5a880); } /* ========================================================== 1. MEN'S DEPARTMENT - OBSIDIAN SLATE & BRUSHED CHAMPAGNE BRONZE ========================================================== */ body[data-gender-theme="men"] { --theme-accent: #0f172a; --theme-secondary: #c5a880; --theme-badge-bg: #0f172a; --theme-badge-text: #ffffff; --theme-accent-glow: rgba(197, 168, 128, 0.28); --theme-line-gradient: linear-gradient(90deg, #0f172a, #c5a880); background-color: #f7f8fa !important; background-image: radial-gradient(ellipse 90% 550px at 50% -90px, rgba(197, 168, 128, 0.14) 0%, rgba(15, 23, 42, 0.04) 55%, transparent 85%) !important; background-attachment: scroll !important; } body[data-gender-theme="men"] ::selection { background: #c5a880 !important; color: #0f172a !important; } /* Announcement Bar */ body[data-gender-theme="men"] .brand-announce { background: linear-gradient(90deg, #090e18 0%, #172236 50%, #090e18 100%) !important; border-bottom: 1px solid rgba(197, 168, 128, 0.28) !important; } body[data-gender-theme="men"] .brand-announce a, body[data-gender-theme="men"] .brand-announce span { color: #e2e8f0 !important; } body[data-gender-theme="men"] .brand-announce a:hover i, body[data-gender-theme="men"] .brand-announce a:hover span, body[data-gender-theme="men"] .brand-announce .engo-announce__social a:hover { color: #c5a880 !important; } /* Floating Glass Header */ body[data-gender-theme="men"] #header, body[data-gender-theme="men"] .header-v1, body[data-gender-theme="men"] header.menu-mobile { background: rgba(255, 255, 255, 0.72) !important; border: 1px solid rgba(197, 168, 128, 0.38) !important; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(197, 168, 128, 0.35) inset !important; } body[data-gender-theme="men"] #header:before { background: linear-gradient(180deg, rgba(197, 168, 128, 0.32), rgba(255, 255, 255, 0) 55%) !important; } body[data-gender-theme="men"] #header .navbar-nav > .nav-item > a:hover, body[data-gender-theme="men"] #header .navbar-nav > .nav-item.active > a, body[data-gender-theme="men"] #header .menu-level-1:hover { color: #0f172a !important; } body[data-gender-theme="men"] #header .navbar-nav > .nav-item > a:after { background: #c5a880 !important; box-shadow: 0 0 8px rgba(197, 168, 128, 0.6) !important; } body[data-gender-theme="men"] #header .dropdown-menu li > a:hover { background: rgba(37, 99, 235, 0.1) !important; color: #2563eb !important; } body[data-gender-theme="men"] #header .minicart-bag-number { background: #0f172a !important; color: #ffffff !important; border: 1.5px solid #c5a880 !important; box-shadow: 0 2px 8px rgba(197, 168, 128, 0.35) !important; } body[data-gender-theme="men"] #header .header-right a:hover, body[data-gender-theme="men"] #header .header-right a:hover i { color: #c5a880 !important; } /* Collection Banner & Titles */ body[data-gender-theme="men"] .banner-collection-page .pd-banner { background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(197, 168, 128, 0.06) 100%) !important; } /* col title underline removed for compact inline pill design */ body[data-gender-theme="men"] .wrap-bread-crumb a:hover { color: #c5a880 !important; } body[data-gender-theme="men"] .engo-col-pill--men { background: #0f172a !important; color: #ffffff !important; border: 1px solid rgba(197, 168, 128, 0.55) !important; } /* Product Detail & Actions */ body[data-gender-theme="men"] .detail-info .product-price { color: #0f172a !important; font-weight: 700 !important; } body[data-gender-theme="men"] button.engoj-btn-addtocart { background: #0f172a !important; border-color: #0f172a !important; color: #ffffff !important; } body[data-gender-theme="men"] button.engoj-btn-addtocart:hover { background: #1e293b !important; border-color: #1e293b !important; box-shadow: 0 12px 28px rgba(197, 168, 128, 0.32) !important; transform: translateY(-1px); } body[data-gender-theme="men"] .engo-sizeguide-btn { border-color: rgba(197, 168, 128, 0.55) !important; color: #0f172a !important; background: rgba(197, 168, 128, 0.08) !important; } body[data-gender-theme="men"] .engo-sticky-atc__btn { background: #0f172a !important; color: #ffffff !important; border: 1px solid rgba(197, 168, 128, 0.5) !important; } /* ========================================================== 2. BOYS' DEPARTMENT - ELECTRIC COBALT & ROYAL CYAN ========================================================== */ body[data-gender-theme="boys"] { --theme-accent: #1d4ed8; --theme-secondary: #0284c7; --theme-badge-bg: linear-gradient(135deg, #1e40af 0%, #0284c7 100%); --theme-badge-text: #ffffff; --theme-accent-glow: rgba(2, 132, 199, 0.28); --theme-line-gradient: linear-gradient(90deg, #1d4ed8, #0284c7); background-color: #f4f8fc !important; background-image: radial-gradient(ellipse 90% 550px at 50% -90px, rgba(2, 132, 199, 0.13) 0%, rgba(29, 78, 216, 0.04) 55%, transparent 85%) !important; background-attachment: scroll !important; } body[data-gender-theme="boys"] ::selection { background: #0284c7 !important; color: #ffffff !important; } /* Announcement Bar */ body[data-gender-theme="boys"] .brand-announce { background: linear-gradient(90deg, #071530 0%, #1e40af 50%, #071530 100%) !important; border-bottom: 1px solid rgba(56, 189, 248, 0.35) !important; } body[data-gender-theme="boys"] .brand-announce a, body[data-gender-theme="boys"] .brand-announce span { color: #e0f2fe !important; } body[data-gender-theme="boys"] .brand-announce a:hover i, body[data-gender-theme="boys"] .brand-announce a:hover span, body[data-gender-theme="boys"] .brand-announce .engo-announce__social a:hover { color: #38bdf8 !important; } /* Floating Glass Header */ body[data-gender-theme="boys"] #header, body[data-gender-theme="boys"] .header-v1, body[data-gender-theme="boys"] header.menu-mobile { background: rgba(255, 255, 255, 0.74) !important; border: 1px solid rgba(56, 189, 248, 0.42) !important; box-shadow: 0 14px 40px rgba(2, 132, 199, 0.14), 0 1px 0 rgba(56, 189, 248, 0.38) inset !important; } body[data-gender-theme="boys"] #header:before { background: linear-gradient(180deg, rgba(56, 189, 248, 0.32), rgba(255, 255, 255, 0) 55%) !important; } body[data-gender-theme="boys"] #header .navbar-nav > .nav-item > a:hover, body[data-gender-theme="boys"] #header .navbar-nav > .nav-item.active > a, body[data-gender-theme="boys"] #header .menu-level-1:hover { color: #1d4ed8 !important; } body[data-gender-theme="boys"] #header .navbar-nav > .nav-item > a:after { background: linear-gradient(90deg, #1d4ed8, #0284c7) !important; box-shadow: 0 0 8px rgba(2, 132, 199, 0.6) !important; } body[data-gender-theme="boys"] #header .dropdown-menu li > a:hover { background: rgba(2, 132, 199, 0.1) !important; color: #1d4ed8 !important; } body[data-gender-theme="boys"] #header .minicart-bag-number { background: linear-gradient(135deg, #1e40af, #0284c7) !important; color: #ffffff !important; border: 1.5px solid rgba(56, 189, 248, 0.6) !important; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important; } body[data-gender-theme="boys"] #header .header-right a:hover, body[data-gender-theme="boys"] #header .header-right a:hover i { color: #0284c7 !important; } /* Collection Banner & Titles */ body[data-gender-theme="boys"] .banner-collection-page .pd-banner { background: linear-gradient(180deg, rgba(29, 78, 216, 0.06) 0%, rgba(2, 132, 199, 0.08) 100%) !important; } /* col title underline removed for compact inline pill design */ body[data-gender-theme="boys"] .wrap-bread-crumb a:hover { color: #1d4ed8 !important; } body[data-gender-theme="boys"] .engo-col-pill--boys { background: linear-gradient(135deg, #1e40af, #0284c7) !important; color: #ffffff !important; border: 1px solid rgba(56, 189, 248, 0.45) !important; } /* Product Detail & Actions */ body[data-gender-theme="boys"] .detail-info .product-price { color: #1d4ed8 !important; font-weight: 700 !important; } body[data-gender-theme="boys"] button.engoj-btn-addtocart { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #ffffff !important; } body[data-gender-theme="boys"] button.engoj-btn-addtocart:hover { background: #1e40af !important; border-color: #1e40af !important; box-shadow: 0 12px 28px rgba(2, 132, 199, 0.38) !important; transform: translateY(-1px); } body[data-gender-theme="boys"] .engo-sizeguide-btn { border-color: rgba(56, 189, 248, 0.55) !important; color: #1d4ed8 !important; background: rgba(2, 132, 199, 0.08) !important; } body[data-gender-theme="boys"] .engo-sticky-atc__btn { background: #1d4ed8 !important; color: #ffffff !important; border: 1px solid rgba(56, 189, 248, 0.5) !important; } /* ========================================================== 3. GIRLS' DEPARTMENT - VELVET BLUSH ROSE & WARM PEONY ========================================================== */ body[data-gender-theme="girls"] { --theme-accent: #e11d48; --theme-secondary: #f43f5e; --theme-badge-bg: linear-gradient(135deg, #be123c 0%, #fb7185 100%); --theme-badge-text: #ffffff; --theme-accent-glow: rgba(244, 63, 94, 0.28); --theme-line-gradient: linear-gradient(90deg, #e11d48, #fda4af); background-color: #fdf7f8 !important; background-image: radial-gradient(ellipse 90% 550px at 50% -90px, rgba(244, 63, 94, 0.12) 0%, rgba(225, 29, 72, 0.035) 55%, transparent 85%) !important; background-attachment: scroll !important; } body[data-gender-theme="girls"] ::selection { background: #e11d48 !important; color: #ffffff !important; } /* Announcement Bar */ body[data-gender-theme="girls"] .brand-announce { background: linear-gradient(90deg, #240813 0%, #881337 50%, #240813 100%) !important; border-bottom: 1px solid rgba(253, 164, 175, 0.35) !important; } body[data-gender-theme="girls"] .brand-announce a, body[data-gender-theme="girls"] .brand-announce span { color: #ffe4e6 !important; } body[data-gender-theme="girls"] .brand-announce a:hover i, body[data-gender-theme="girls"] .brand-announce a:hover span, body[data-gender-theme="girls"] .brand-announce .engo-announce__social a:hover { color: #fda4af !important; } /* Floating Glass Header */ body[data-gender-theme="girls"] #header, body[data-gender-theme="girls"] .header-v1, body[data-gender-theme="girls"] header.menu-mobile { background: rgba(255, 255, 255, 0.74) !important; border: 1px solid rgba(253, 164, 175, 0.48) !important; box-shadow: 0 14px 40px rgba(225, 29, 72, 0.12), 0 1px 0 rgba(253, 164, 175, 0.38) inset !important; } body[data-gender-theme="girls"] #header:before { background: linear-gradient(180deg, rgba(253, 164, 175, 0.32), rgba(255, 255, 255, 0) 55%) !important; } body[data-gender-theme="girls"] #header .navbar-nav > .nav-item > a:hover, body[data-gender-theme="girls"] #header .navbar-nav > .nav-item.active > a, body[data-gender-theme="girls"] #header .menu-level-1:hover { color: #e11d48 !important; } body[data-gender-theme="girls"] #header .navbar-nav > .nav-item > a:after { background: linear-gradient(90deg, #e11d48, #fda4af) !important; box-shadow: 0 0 8px rgba(244, 63, 94, 0.6) !important; } body[data-gender-theme="girls"] #header .dropdown-menu li > a:hover { background: rgba(244, 63, 94, 0.1) !important; color: #e11d48 !important; } body[data-gender-theme="girls"] #header .minicart-bag-number { background: linear-gradient(135deg, #be123c, #fb7185) !important; color: #ffffff !important; border: 1.5px solid rgba(253, 164, 175, 0.6) !important; box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35) !important; } body[data-gender-theme="girls"] #header .header-right a:hover, body[data-gender-theme="girls"] #header .header-right a:hover i { color: #e11d48 !important; } /* Collection Banner & Titles */ body[data-gender-theme="girls"] .banner-collection-page .pd-banner { background: linear-gradient(180deg, rgba(225, 29, 72, 0.05) 0%, rgba(253, 164, 175, 0.07) 100%) !important; } /* col title underline removed for compact inline pill design */ body[data-gender-theme="girls"] .wrap-bread-crumb a:hover { color: #e11d48 !important; } body[data-gender-theme="girls"] .engo-col-pill--girls { background: linear-gradient(135deg, #be123c, #fb7185) !important; color: #ffffff !important; border: 1px solid rgba(253, 164, 175, 0.45) !important; } /* Product Detail & Actions */ body[data-gender-theme="girls"] .detail-info .product-price { color: #e11d48 !important; font-weight: 700 !important; } body[data-gender-theme="girls"] button.engoj-btn-addtocart { background: #e11d48 !important; border-color: #e11d48 !important; color: #ffffff !important; } body[data-gender-theme="girls"] button.engoj-btn-addtocart:hover { background: #be123c !important; border-color: #be123c !important; box-shadow: 0 12px 28px rgba(244, 63, 94, 0.38) !important; transform: translateY(-1px); } body[data-gender-theme="girls"] .engo-sizeguide-btn { border-color: rgba(253, 164, 175, 0.55) !important; color: #e11d48 !important; background: rgba(244, 63, 94, 0.08) !important; } body[data-gender-theme="girls"] .engo-sticky-atc__btn { background: #e11d48 !important; color: #ffffff !important; border: 1px solid rgba(253, 164, 175, 0.5) !important; } /* ========================================================== SHARED LUXURY BADGES, TAGS & CARDS ========================================================== */ /* Department Badges (Product Page & Collection Banners) */ .engo-dept-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.25s ease; } .engo-dept-badge--men { background: #0f172a; color: #f8fafc; border: 1px solid rgba(197, 168, 128, 0.5); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12); } .engo-dept-badge--boys { background: linear-gradient(135deg, #1e40af 0%, #0284c7 100%); color: #ffffff; border: 1px solid rgba(56, 189, 248, 0.4); box-shadow: 0 2px 10px rgba(2, 132, 199, 0.22); } .engo-dept-badge--girls { background: linear-gradient(135deg, #be123c 0%, #fb7185 100%); color: #ffffff; border: 1px solid rgba(253, 164, 175, 0.45); box-shadow: 0 2px 10px rgba(244, 63, 94, 0.22); } .engo-dept-dot { width: 6.5px; height: 6.5px; border-radius: 50%; display: inline-block; } .engo-dept-badge--men .engo-dept-dot { background: #c5a880; box-shadow: 0 0 6px #c5a880; } .engo-dept-badge--boys .engo-dept-dot { background: #38bdf8; box-shadow: 0 0 6px #38bdf8; } .engo-dept-badge--girls .engo-dept-dot { background: #ffe4e6; box-shadow: 0 0 6px #ffe4e6; } /* Micro Department Tags on Product Cards */ .engo-card-dept-wrap { margin: 3px 0 4px; } .engo-card-dept-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; line-height: 1.3; } .engo-card-dept-tag--men { background: rgba(15, 23, 42, 0.06); color: #0f172a; border: 1px solid rgba(197, 168, 128, 0.4); } .engo-card-dept-tag--men .engo-card-dept-dot { width: 5px; height: 5px; border-radius: 50%; background: #c5a880; display: inline-block; } .engo-card-dept-tag--boys { background: rgba(29, 78, 216, 0.08); color: #1d4ed8; border: 1px solid rgba(56, 189, 248, 0.35); } .engo-card-dept-tag--boys .engo-card-dept-dot { width: 5px; height: 5px; border-radius: 50%; background: #0284c7; display: inline-block; } .engo-card-dept-tag--girls { background: rgba(225, 29, 72, 0.08); color: #e11d48; border: 1px solid rgba(253, 164, 175, 0.45); } .engo-card-dept-tag--girls .engo-card-dept-dot { width: 5px; height: 5px; border-radius: 50%; background: #f43f5e; display: inline-block; } /* Card Gender Border & Shadow Glows on Hover */ .engo-gender-card--men:hover .engo-card-media { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); } .engo-gender-card--boys:hover .engo-card-media { box-shadow: 0 12px 28px rgba(2, 132, 199, 0.18); } .engo-gender-card--girls:hover .engo-card-media { box-shadow: 0 12px 28px rgba(244, 63, 94, 0.18); } /* Collection Slider Gender Tags & Card Accents */ .engo-col-card__dept { display: none !important; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; width: fit-content; } .engo-col-card__dept--men { background: #0f172a; color: #f8fafc; border: 1px solid rgba(197, 168, 128, 0.5); } .engo-col-card__dept--men .engo-col-card__dept-dot { width: 5px; height: 5px; border-radius: 50%; background: #c5a880; display: inline-block; box-shadow: 0 0 5px #c5a880; } .engo-col-card__dept--boys { background: linear-gradient(135deg, #1e40af, #0284c7); color: #ffffff; border: 1px solid rgba(56, 189, 248, 0.45); } .engo-col-card__dept--boys .engo-col-card__dept-dot { width: 5px; height: 5px; border-radius: 50%; background: #38bdf8; display: inline-block; box-shadow: 0 0 5px #38bdf8; } .engo-col-card__dept--girls { background: linear-gradient(135deg, #be123c, #fb7185); color: #ffffff; border: 1px solid rgba(253, 164, 175, 0.5); } .engo-col-card__dept--girls .engo-col-card__dept-dot { width: 5px; height: 5px; border-radius: 50%; background: #ffe4e6; display: inline-block; box-shadow: 0 0 5px #ffe4e6; } .engo-col-card--men:hover { border-color: rgba(197, 168, 128, 0.6) !important; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2) !important; } .engo-col-card--boys:hover { border-color: rgba(56, 189, 248, 0.7) !important; box-shadow: 0 16px 36px rgba(2, 132, 199, 0.24) !important; } .engo-col-card--girls:hover { border-color: rgba(253, 164, 175, 0.7) !important; box-shadow: 0 16px 36px rgba(244, 63, 94, 0.24) !important; } .engo-col-title-themed:after { display: none !important; } /* ========================================================== Enhanced Seamless Product Text Area (Border-Free Luxury) ========================================================== */ .product-item-v1 .product-info, .engo-card-info { margin-top: 0 !important; padding: 6px 2px 2px !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center !important; position: relative !important; z-index: 2 !important; } /* Hide Category per User Request */ .product-item-v1 .engo-card-type, .engo-card-type { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; } /* Hide Star Rating Gap */ .product-item-v1 .star-rating { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; } /* Micro Gender Capsule Tag */ .product-item-v1 .product-info .engo-card-dept-wrap { margin: 2px 0 4px !important; line-height: 1 !important; } /* Product Name - Spacing Tightened & No Fake Gap */ .product-item-v1 .product-info .product-name { margin: 0 0 3px !important; line-height: 1.3 !important; } .product-item-v1 .product-info .product-name a { font-family: inherit !important; font-size: 14.5px !important; font-weight: 600 !important; color: #0f172a !important; line-height: 1.3 !important; min-height: unset !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; transition: color 0.22s ease !important; text-decoration: none !important; } .engo-gender-card--men .product-name a:hover, .engo-card-info--men .product-name a:hover { color: #c5a880 !important; } .engo-gender-card--boys .product-name a:hover, .engo-card-info--boys .product-name a:hover { color: #0284c7 !important; } .engo-gender-card--girls .product-name a:hover, .engo-card-info--girls .product-name a:hover { color: #e11d48 !important; } /* Product Price - Highlighted Actual Price & Zero Spacing Gap */ .product-item-v1 .product-info .product-price { margin-top: 2px !important; margin-bottom: 0 !important; display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 7px !important; line-height: 1.2 !important; } .product-item-v1 .product-info .product-price ins, .product-item-v1 .product-price ins { font-size: 15.5px !important; font-weight: 800 !important; text-decoration: none !important; color: #dc2626 !important; letter-spacing: 0 !important; } .product-item-v1 .product-info .product-price del, .product-item-v1 .product-price del { font-size: 15.5px !important; color: #475569; font-weight: 600 !important; opacity: 0.95 !important; text-decoration-color: #64748b !important; font-weight: 500 !important; text-decoration: line-through !important; } /* Luxury Product Card Hover Elevation */ .product-item-v1:hover .product-image { transform: translateY(-4px) !important; } .engo-gender-card--men:hover .product-image { box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(197, 168, 128, 0.3) !important; } .engo-gender-card--boys:hover .product-image { box-shadow: 0 16px 36px rgba(2, 132, 199, 0.18), 0 0 0 1px rgba(56, 189, 248, 0.35) !important; } .engo-gender-card--girls:hover .product-image { box-shadow: 0 16px 36px rgba(244, 63, 94, 0.18), 0 0 0 1px rgba(253, 164, 175, 0.45) !important; } /* Mobile Product Text Area */ @media (max-width: 767px) { .product-item-v1 .product-info, .engo-card-info { padding: 5px 2px 2px !important; } .product-item-v1 .product-info .product-name a { font-size: 13.5px !important; line-height: 1.25 !important; min-height: unset !important; } .product-item-v1 .product-info .product-price ins, .product-item-v1 .product-price ins { font-size: 14px !important; font-weight: 800 !important; color: #dc2626 !important; } .product-item-v1 .product-info .product-price del, .product-item-v1 .product-price del { font-size: 14px !important; color: #475569; font-weight: 600 !important; opacity: 0.95 !important; text-decoration-color: #64748b !important; font-weight: 500 !important; text-decoration: line-through !important; } } /* ========================================================== Gender-Specific Dynamic Footer System for Collection Pages ========================================================== */ /* 1. MEN'S COLLECTION FOOTER (Titanium Slate & Electric Cyan) */ body[data-gender-theme="men"] footer.footer-v1, body.theme-gender-men footer.footer-v1 { background: #070c18 !important; } body[data-gender-theme="men"] footer.footer-v1 .engo-trust-ribbon, body.theme-gender-men footer.footer-v1 .engo-trust-ribbon { background: #080e1c !important; border-bottom: 1px solid rgba(56, 189, 248, 0.18) !important; } body[data-gender-theme="men"] footer.footer-v1 .engo-trust-card, body.theme-gender-men footer.footer-v1 .engo-trust-card { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid rgba(56, 189, 248, 0.18) !important; } body[data-gender-theme="men"] footer.footer-v1 .engo-trust-card:hover, body.theme-gender-men footer.footer-v1 .engo-trust-card:hover { border-color: #38bdf8 !important; box-shadow: 0 6px 18px rgba(2, 132, 199, 0.22) !important; } body[data-gender-theme="men"] footer.footer-v1 .engo-trust-icon-box, body.theme-gender-men footer.footer-v1 .engo-trust-icon-box { background: rgba(56, 189, 248, 0.14) !important; color: #38bdf8 !important; } body[data-gender-theme="men"] footer.footer-v1 .footer-top, body.theme-gender-men footer.footer-v1 .footer-top { background: linear-gradient(180deg, #0b1120 0%, #070c18 100%) !important; } body[data-gender-theme="men"] footer.footer-v1 .engo-footer-chevron, body.theme-gender-men footer.footer-v1 .engo-footer-chevron { color: #38bdf8 !important; } body[data-gender-theme="men"] footer.footer-v1 .footer-top ul.list-unstyled li a:hover, body.theme-gender-men footer.footer-v1 .footer-top ul.list-unstyled li a:hover { color: #38bdf8 !important; } body[data-gender-theme="men"] footer.footer-v1 .engo-contact-icon, body.theme-gender-men footer.footer-v1 .engo-contact-icon { color: #38bdf8 !important; background: rgba(56, 189, 248, 0.1) !important; } body[data-gender-theme="men"] footer.footer-v1 .engo-newsletter-field:focus, body.theme-gender-men footer.footer-v1 .engo-newsletter-field:focus { border-color: #38bdf8 !important; box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important; } body[data-gender-theme="men"] footer.footer-v1 .engo-newsletter-btn, body.theme-gender-men footer.footer-v1 .engo-newsletter-btn { background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important; color: #ffffff !important; } body[data-gender-theme="men"] footer.footer-v1 .socials a:hover, body.theme-gender-men footer.footer-v1 .socials a:hover, body[data-gender-theme="men"] footer.footer-v1 .engo-footer-social-link:hover, body.theme-gender-men footer.footer-v1 .engo-footer-social-link:hover { background: #38bdf8 !important; color: #070c18 !important; border-color: #38bdf8 !important; } body[data-gender-theme="men"] footer.footer-v1 .footer-bottom, body.theme-gender-men footer.footer-v1 .footer-bottom { background: #040711 !important; border-top: 1px solid rgba(56, 189, 248, 0.16) !important; } /* 2. BOYS' COLLECTION FOOTER (Deep Obsidian Cobalt & Electric Azure) */ body[data-gender-theme="boys"] footer.footer-v1, body.theme-gender-boys footer.footer-v1 { background: #050e1c !important; } body[data-gender-theme="boys"] footer.footer-v1 .engo-trust-ribbon, body.theme-gender-boys footer.footer-v1 .engo-trust-ribbon { background: #030a14 !important; border-bottom: 1px solid rgba(56, 189, 248, 0.25) !important; } body[data-gender-theme="boys"] footer.footer-v1 .engo-trust-card, body.theme-gender-boys footer.footer-v1 .engo-trust-card { background: rgba(10, 25, 47, 0.65) !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; } body[data-gender-theme="boys"] footer.footer-v1 .engo-trust-card:hover, body.theme-gender-boys footer.footer-v1 .engo-trust-card:hover { border-color: #38bdf8 !important; box-shadow: 0 6px 18px rgba(2, 132, 199, 0.22) !important; } body[data-gender-theme="boys"] footer.footer-v1 .engo-trust-icon-box, body.theme-gender-boys footer.footer-v1 .engo-trust-icon-box { background: rgba(2, 132, 199, 0.18) !important; color: #38bdf8 !important; } body[data-gender-theme="boys"] footer.footer-v1 .footer-top, body.theme-gender-boys footer.footer-v1 .footer-top { background: linear-gradient(180deg, #040c18 0%, #0a192f 60%, #061120 100%) !important; } body[data-gender-theme="boys"] footer.footer-v1 .engo-footer-chevron, body.theme-gender-boys footer.footer-v1 .engo-footer-chevron { color: #38bdf8 !important; } body[data-gender-theme="boys"] footer.footer-v1 .footer-top ul.list-unstyled li a, body.theme-gender-boys footer.footer-v1 .footer-top ul.list-unstyled li a { color: #cbd5e1 !important; } body[data-gender-theme="boys"] footer.footer-v1 .footer-top ul.list-unstyled li a:hover, body.theme-gender-boys footer.footer-v1 .footer-top ul.list-unstyled li a:hover { color: #38bdf8 !important; } body[data-gender-theme="boys"] footer.footer-v1 .engo-contact-icon, body.theme-gender-boys footer.footer-v1 .engo-contact-icon { color: #38bdf8 !important; background: rgba(2, 132, 199, 0.12) !important; } body[data-gender-theme="boys"] footer.footer-v1 .engo-newsletter-field, body.theme-gender-boys footer.footer-v1 .engo-newsletter-field { border-color: rgba(56, 189, 248, 0.25) !important; } body[data-gender-theme="boys"] footer.footer-v1 .engo-newsletter-field:focus, body.theme-gender-boys footer.footer-v1 .engo-newsletter-field:focus { border-color: #38bdf8 !important; box-shadow: 0 0 12px rgba(2, 132, 199, 0.3) !important; } body[data-gender-theme="boys"] footer.footer-v1 .engo-newsletter-btn, body.theme-gender-boys footer.footer-v1 .engo-newsletter-btn { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; color: #ffffff !important; } body[data-gender-theme="boys"] footer.footer-v1 .socials a:hover, body.theme-gender-boys footer.footer-v1 .socials a:hover, body[data-gender-theme="boys"] footer.footer-v1 .engo-footer-social-link:hover, body.theme-gender-boys footer.footer-v1 .engo-footer-social-link:hover { background: #0284c7 !important; color: #ffffff !important; border-color: #0284c7 !important; } body[data-gender-theme="boys"] footer.footer-v1 .footer-bottom, body.theme-gender-boys footer.footer-v1 .footer-bottom { background: #02060d !important; border-top: 1px solid rgba(56, 189, 248, 0.18) !important; } /* 3. GIRLS' COLLECTION FOOTER (Deep Plum Noir & Romantic Rose Gold) */ body[data-gender-theme="girls"] footer.footer-v1, body.theme-gender-girls footer.footer-v1 { background: #13040e !important; } body[data-gender-theme="girls"] footer.footer-v1 .engo-trust-ribbon, body.theme-gender-girls footer.footer-v1 .engo-trust-ribbon { background: #10030c !important; border-bottom: 1px solid rgba(244, 63, 94, 0.25) !important; } body[data-gender-theme="girls"] footer.footer-v1 .engo-trust-card, body.theme-gender-girls footer.footer-v1 .engo-trust-card { background: rgba(36, 10, 27, 0.65) !important; border: 1px solid rgba(244, 63, 94, 0.2) !important; } body[data-gender-theme="girls"] footer.footer-v1 .engo-trust-card:hover, body.theme-gender-girls footer.footer-v1 .engo-trust-card:hover { border-color: #f43f5e !important; box-shadow: 0 6px 18px rgba(244, 63, 94, 0.22) !important; } body[data-gender-theme="girls"] footer.footer-v1 .engo-trust-icon-box, body.theme-gender-girls footer.footer-v1 .engo-trust-icon-box { background: rgba(225, 29, 72, 0.18) !important; color: #fda4af !important; } body[data-gender-theme="girls"] footer.footer-v1 .footer-top, body.theme-gender-girls footer.footer-v1 .footer-top { background: linear-gradient(180deg, #13040e 0%, #200918 60%, #11030c 100%) !important; } body[data-gender-theme="girls"] footer.footer-v1 .engo-footer-chevron, body.theme-gender-girls footer.footer-v1 .engo-footer-chevron { color: #fda4af !important; } body[data-gender-theme="girls"] footer.footer-v1 .footer-top ul.list-unstyled li a, body.theme-gender-girls footer.footer-v1 .footer-top ul.list-unstyled li a { color: #fbcfe8 !important; } body[data-gender-theme="girls"] footer.footer-v1 .footer-top ul.list-unstyled li a:hover, body.theme-gender-girls footer.footer-v1 .footer-top ul.list-unstyled li a:hover { color: #fda4af !important; } body[data-gender-theme="girls"] footer.footer-v1 .engo-contact-icon, body.theme-gender-girls footer.footer-v1 .engo-contact-icon { color: #fda4af !important; background: rgba(225, 29, 72, 0.12) !important; } body[data-gender-theme="girls"] footer.footer-v1 .engo-newsletter-field, body.theme-gender-girls footer.footer-v1 .engo-newsletter-field { border-color: rgba(253, 164, 175, 0.25) !important; } body[data-gender-theme="girls"] footer.footer-v1 .engo-newsletter-field:focus, body.theme-gender-girls footer.footer-v1 .engo-newsletter-field:focus { border-color: #fda4af !important; box-shadow: 0 0 12px rgba(244, 63, 94, 0.3) !important; } body[data-gender-theme="girls"] footer.footer-v1 .engo-newsletter-btn, body.theme-gender-girls footer.footer-v1 .engo-newsletter-btn { background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important; color: #ffffff !important; } body[data-gender-theme="girls"] footer.footer-v1 .socials a:hover, body.theme-gender-girls footer.footer-v1 .socials a:hover, body[data-gender-theme="girls"] footer.footer-v1 .engo-footer-social-link:hover, body.theme-gender-girls footer.footer-v1 .engo-footer-social-link:hover { background: #e11d48 !important; color: #ffffff !important; border-color: #e11d48 !important; } body[data-gender-theme="girls"] footer.footer-v1 .footer-bottom, body.theme-gender-girls footer.footer-v1 .footer-bottom { background: #0a0208 !important; border-top: 1px solid rgba(244, 63, 94, 0.18) !important; } /* ========================================================== LASTLOOK Haute Couture - Gender Editorial Banners Above Footer ========================================================== */ .engo-col-gender-banner-section { margin: 16px 0 28px; position: relative; z-index: 5; } .engo-col-gender-card { border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; position: relative; } .engo-col-gender-card:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3); } .engo-col-gender-card__row { display: flex; align-items: stretch; flex-direction: row; } /* MEN'S THEME */ .engo-col-gender-card--men { background: linear-gradient(135deg, #070a10 0%, #0d131f 50%, #161e2e 100%); border: 1.5px solid rgba(197, 168, 128, 0.35); } .engo-gb-badge--men { background: rgba(197, 168, 128, 0.14); border: 1px solid rgba(197, 168, 128, 0.45); color: #c5a880; } .engo-col-gender-card--men .engo-gb-dot { background: #c5a880; box-shadow: 0 0 10px #c5a880; } .engo-col-gender-card--men .engo-gb-check { color: #c5a880; } .engo-col-gender-card--men .engo-gb-btn--primary { background: linear-gradient(135deg, #c5a880 0%, #9e7f54 100%); color: #080c14 !important; box-shadow: 0 8px 24px rgba(197, 168, 128, 0.35); } .engo-col-gender-card--men .engo-gb-btn--primary:hover { background: linear-gradient(135deg, #dfc299 0%, #b89565 100%); color: #000000 !important; box-shadow: 0 12px 28px rgba(197, 168, 128, 0.5); transform: translateY(-2px); } /* BOYS' THEME */ .engo-col-gender-card--boys { background: linear-gradient(135deg, #05101d 0%, #0a192f 50%, #132847 100%); border: 1.5px solid rgba(56, 189, 248, 0.35); } .engo-gb-badge--boys { background: rgba(2, 132, 199, 0.18); border: 1px solid rgba(56, 189, 248, 0.45); color: #38bdf8; } .engo-col-gender-card--boys .engo-gb-dot { background: #38bdf8; box-shadow: 0 0 10px #38bdf8; } .engo-col-gender-card--boys .engo-gb-check { color: #38bdf8; } .engo-col-gender-card--boys .engo-gb-btn--primary { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); color: #ffffff !important; box-shadow: 0 8px 24px rgba(2, 132, 199, 0.38); } .engo-col-gender-card--boys .engo-gb-btn--primary:hover { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #ffffff !important; box-shadow: 0 12px 28px rgba(2, 132, 199, 0.55); transform: translateY(-2px); } /* GIRLS' THEME */ .engo-col-gender-card--girls { background: linear-gradient(135deg, #150610 0%, #240a1b 50%, #38112b 100%); border: 1.5px solid rgba(244, 63, 94, 0.35); } .engo-gb-badge--girls { background: rgba(225, 29, 72, 0.18); border: 1px solid rgba(253, 164, 175, 0.45); color: #fda4af; } .engo-col-gender-card--girls .engo-gb-dot { background: #f43f5e; box-shadow: 0 0 10px #f43f5e; } .engo-col-gender-card--girls .engo-gb-check { color: #fda4af; } .engo-col-gender-card--girls .engo-gb-btn--primary { background: linear-gradient(135deg, #e11d48 0%, #be123c 100%); color: #ffffff !important; box-shadow: 0 8px 24px rgba(225, 29, 72, 0.38); } .engo-col-gender-card--girls .engo-gb-btn--primary:hover { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); color: #ffffff !important; box-shadow: 0 12px 28px rgba(225, 29, 72, 0.55); transform: translateY(-2px); } /* Card Content Area */ .engo-col-gender-card__content { flex: 1 1 56%; padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; } .engo-gb-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; width: fit-content; } .engo-gb-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; animation: engoGbPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes engoGbPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } .engo-gb-title { font-family: inherit !important; font-size: clamp(23px, 2.4vw, 34px) !important; font-weight: 800 !important; line-height: 1.18 !important; color: #ffffff !important; letter-spacing: -0.01em !important; margin: 0 0 14px !important; text-transform: none !important; } .engo-gb-desc { font-size: 14.5px !important; line-height: 1.65 !important; color: rgba(255, 255, 255, 0.82) !important; margin: 0 0 22px !important; max-width: 560px; } .engo-gb-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin-bottom: 28px; } .engo-gb-chip { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.92); line-height: 1.3; } .engo-gb-check { font-weight: 800; font-size: 13px; } .engo-gb-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .engo-gb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important; cursor: pointer; border-radius: 999px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .engo-gb-btn--primary { padding: 13px 26px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .engo-gb-btn--secondary { padding: 12px 22px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff !important; backdrop-filter: blur(8px); } .engo-gb-btn--secondary:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); color: #ffffff !important; transform: translateY(-2px); } /* Card Visual Area */ .engo-col-gender-card__visual { flex: 1 1 44%; position: relative; overflow: hidden; min-height: 420px; } .engo-gb-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .engo-col-gender-card:hover .engo-gb-img { transform: scale(1.05); } .engo-gb-visual-tag { position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(8, 12, 20, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 9px 18px; color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); pointer-events: none; } /* Mobile & Tablet Responsive */ @media (max-width: 991px) { .engo-col-gender-banner-section { margin: 36px 0 16px; } .engo-col-gender-card { border-radius: 18px; } .engo-col-gender-card__row { flex-direction: column-reverse; } .engo-col-gender-card__visual { flex: none; width: 100%; min-height: 250px; max-height: 300px; } .engo-col-gender-card__content { padding: 32px 22px 30px; } .engo-gb-title { font-size: 22px !important; } .engo-gb-desc { font-size: 13.5px !important; } .engo-gb-chips { grid-template-columns: 1fr; gap: 8px; margin-bottom: 22px; } .engo-gb-actions { flex-direction: column; align-items: stretch; } .engo-gb-btn { width: 100%; text-align: center; } .engo-gb-visual-tag { bottom: 12px; left: 12px; right: 12px; padding: 7px 12px; font-size: 10px; } } /* ========================================================== NATIVE APP-LIKE ULTRA-FAST MOBILE EXPERIENCE & RESPONSIVENESS ========================================================== */ /* 1. Global Instant Tap Response (Eliminates 300ms Delay & Tap Flash) */ *, *:before, *:after { -webkit-tap-highlight-color: transparent !important; } a, button, input, select, textarea, label, [role="button"], .engo-app-tab, .product-item-v1, .engo-swatch-item, .engo-modal-tab-btn { touch-action: manipulation !important; } /* 2. Inertial Touch Scrolling & Native App Physics */ html, body { -webkit-overflow-scrolling: touch !important; scroll-behavior: smooth !important; } /* Hardware Accelerate Fixed App Chrome */ #mobileHeader, .engo-app-tabbar, .engo-sticky-atc, .menu-mobile, .mobile-search { transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; will-change: transform !important; } /* 3. Mobile Device Tuning (< 992px) */ @media (max-width: 991px) { /* Hide Redundant Floating WhatsApp Widget on Mobile (Already inside bottom bar) */ .engo-wa-widget { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Safe Area & Bottom Tab Bar Buffer */ body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; } /* Lightweight Smooth-Scrolling Mobile Header */ header.menu-mobile { background: rgba(255, 255, 255, 0.96) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; border-radius: 14px !important; } /* Snappy Bottom App Tab Bar */ .engo-app-tabbar { background: rgba(255, 255, 255, 0.98) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.06) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; height: calc(56px + env(safe-area-inset-bottom, 0px)) !important; display: flex !important; align-items: center !important; justify-content: space-around !important; } .engo-app-tab { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 6px 10px !important; font-size: 10px !important; font-weight: 700 !important; color: #64748b !important; text-decoration: none !important; background: none !important; border: none !important; transition: color 0.15s ease, transform 0.1s ease !important; } .engo-app-tab i { font-size: 18px !important; margin-bottom: 2px !important; } .engo-app-tab.is-active, .engo-app-tab:hover { color: #0f172a !important; } .engo-app-tab--wa { color: #25d366 !important; } .engo-app-tab--wa i { font-size: 20px !important; } /* Instant Product & Grid Rendering on Mobile (No Blank Pop-in or Lag) */ .glass-reveal, .product-item-v1 { opacity: 1 !important; transform: none !important; transition: none !important; } /* Tactile Physical Tap Animation like Native App Buttons */ .engo-app-tab:active, button:active, .shop-button:active, .engo-gb-btn:active, .enj-add-to-cart-btn:active { transform: scale(0.96) !important; transition: transform 0.08s ease !important; } /* Smooth Touch Momentum in Slide-in Drawers */ .menu-mobile-tab, .menu-mobile-tab .box, .mobile-search, .cart-mobile-content, .js-minicart-content, .engo-modal__box { -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } } /* 4. Mobile Screen Polish (< 768px) */ @media (max-width: 767px) { /* Fast 2-Column Product Grid */ .product-grid-view .col-6, .collection-content .col-6, .content-collection-page .col-6, .section-product-v1 .col-6 { padding-left: 5px !important; padding-right: 5px !important; } .product-item-v1 { margin-bottom: 12px !important; } .product-item-v1 .product-image { border-radius: 12px !important; overflow: hidden !important; } .product-item-v1 .product-image img { border-radius: 12px !important; aspect-ratio: 1 / 1.15 !important; object-fit: cover !important; } /* Sticky ATC positioning above bottom bar */ .engo-sticky-atc { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; left: 10px !important; right: 10px !important; padding: 8px 12px !important; border-radius: 999px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important; } } /* ========================================================================== 6. PWA Installable App & iOS Latest Floating Dynamic Glass Bottom Bar ========================================================================== */ /* Full Screen Native Viewport & Standalone App Support */ .is-pwa-standalone header.menu-mobile { top: calc(env(safe-area-inset-top, 0px) + 8px) !important; } .is-pwa-standalone .ll-pwa-floating-trigger, .is-pwa-standalone .ll-pwa-sheet { display: none !important; } @media (max-width: 991px) { /* Safe Area Bottom Buffer for Content */ body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; } /* Sticky ATC Positioning Above Floating Dock */ .engo-sticky-atc { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; left: 12px !important; right: 12px !important; border-radius: 999px !important; z-index: 9990 !important; } /* iOS Latest Floating Dynamic Glass Island Bar */ .engo-app-tabbar { position: fixed !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; left: 14px !important; right: 14px !important; width: calc(100% - 28px) !important; max-width: 440px !important; margin-left: auto !important; margin-right: auto !important; height: 64px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.88) !important; -webkit-backdrop-filter: blur(28px) saturate(200%) !important; backdrop-filter: blur(28px) saturate(200%) !important; border: 1px solid rgba(255, 255, 255, 0.88) !important; box-shadow: 0 16px 40px -6px rgba(15, 23, 42, 0.20), 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important; display: flex !important; align-items: center !important; justify-content: space-around !important; padding: 0 8px !important; z-index: 9999 !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; } /* Dark / Gender Themes for Bottom Bar */ body.ll-gender-men .engo-app-tabbar, body.ll-gender-boys .engo-app-tabbar { background: rgba(14, 20, 32, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important; } /* iOS Tab Item */ .engo-app-tab { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 6px 12px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: -0.2px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Barlow", sans-serif !important; color: #64748b !important; text-decoration: none !important; background: transparent !important; border: none !important; border-radius: 999px !important; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important; position: relative !important; cursor: pointer !important; } .engo-app-tab:active { transform: scale(0.92) !important; } .engo-app-tab__icon { display: flex !important; align-items: center !important; justify-content: center !important; height: 24px !important; margin-bottom: 2px !important; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .engo-app-tab__icon svg { width: 22px !important; height: 22px !important; display: block !important; } .engo-app-tab__label { font-size: 10px !important; line-height: 1.1 !important; font-weight: 600 !important; white-space: nowrap !important; } /* Active Tab State: iOS Frosted Pill Capsule */ .engo-app-tab.is-active { color: #0f172a !important; background: rgba(15, 23, 42, 0.07) !important; } .engo-app-tab.is-active .engo-app-tab__icon { transform: scale(1.08) !important; } body.ll-gender-men .engo-app-tab.is-active, body.ll-gender-boys .engo-app-tab.is-active { color: #D4AF37 !important; background: rgba(212, 175, 55, 0.15) !important; } /* Apple-Style Notification Badge on Cart */ .engo-app-tab__icon-wrap { position: relative !important; display: inline-flex !important; } .engo-app-tab__badge { position: absolute !important; top: -5px !important; right: -9px !important; background: #FF3B30 !important; color: #ffffff !important; font-size: 10px !important; font-weight: 700 !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important; min-width: 17px !important; height: 17px !important; line-height: 17px !important; border-radius: 9px !important; text-align: center !important; padding: 0 4px !important; box-shadow: 0 2px 6px rgba(255, 59, 48, 0.45) !important; border: 1.5px solid #ffffff !important; font-style: normal !important; } /* WhatsApp Tab in VIP Emerald Tint */ .engo-app-tab--wa { color: #25D366 !important; } .engo-app-tab--wa:hover, .engo-app-tab--wa:active { color: #128C7E !important; } } /* PWA Sheet Legacy Rules Cleaned */ .ll-pwa-ios-guide { background: rgba(0, 0, 0, 0.03) !important; border-radius: 16px !important; padding: 14px 16px !important; margin-bottom: 14px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; } .ll-pwa-ios-guide__intro { font-size: 13px !important; font-weight: 700 !important; color: #0B1118 !important; margin-bottom: 10px !important; } .ll-pwa-ios-step { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 10px !important; font-size: 12px !important; color: #334155 !important; line-height: 1.4 !important; } .ll-pwa-ios-step:last-child { margin-bottom: 0 !important; } .ll-pwa-ios-step__num { width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #007AFF !important; color: #ffffff !important; font-size: 11px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .ll-pwa-ios-icon-badge { display: inline-flex !important; vertical-align: middle !important; margin: 0 4px !important; } /* Persistent Subtle Install Pill Trigger */ .ll-pwa-floating-trigger { position: fixed !important; top: calc(72px + env(safe-area-inset-top, 0px)) !important; right: 12px !important; z-index: 1020 !important; background: rgba(11, 17, 24, 0.88) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; color: #ffffff !important; border: 1px solid rgba(212, 175, 55, 0.4) !important; border-radius: 999px !important; padding: 5px 12px 5px 6px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important; cursor: pointer !important; font-size: 11px !important; font-weight: 700 !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important; transition: transform 0.15s ease !important; } .ll-pwa-floating-trigger:active { transform: scale(0.94) !important; } .ll-pwa-trigger-icon img { border-radius: 6px !important; display: block !important; } .ll-pwa-trigger-text { color: #D4AF37 !important; letter-spacing: 0.2px !important; } /* ========================================================================== Desktop PWA Installation Experience & Omnibar Modal ========================================================================== */ .engo-header-install-btn { background: rgba(15, 23, 42, 0.06) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 999px !important; padding: 4px 12px !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; font-weight: 700 !important; color: #0f172a !important; cursor: pointer !important; margin-right: 14px !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Barlow", sans-serif !important; line-height: 1 !important; height: 30px !important; align-self: center !important; } .engo-header-install-btn:hover { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important; } body.ll-gender-men .engo-header-install-btn, body.ll-gender-boys .engo-header-install-btn { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; } body.ll-gender-men .engo-header-install-btn:hover, body.ll-gender-boys .engo-header-install-btn:hover { background: #D4AF37 !important; color: #000000 !important; border-color: #D4AF37 !important; } .ll-pwa-desktop-guide { background: rgba(0, 0, 0, 0.03) !important; border-radius: 16px !important; padding: 16px !important; margin-bottom: 16px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; } .ll-pwa-desktop-guide__title { font-size: 13px !important; font-weight: 700 !important; color: #0B1118 !important; margin-bottom: 12px !important; } .ll-pwa-guide-box { display: flex !important; flex-direction: column !important; gap: 10px !important; } .ll-pwa-guide-row { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-size: 12px !important; color: #334155 !important; line-height: 1.4 !important; } .ll-pwa-guide-badge { background: #007AFF !important; color: #ffffff !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 6px !important; flex-shrink: 0 !important; margin-top: 1px !important; } .ll-pwa-inline-icon { display: inline-flex !important; vertical-align: middle !important; margin: 0 2px !important; } @media (min-width: 992px) { .ll-pwa-sheet { align-items: center !important; justify-content: center !important; padding: 24px !important; } .ll-pwa-sheet__card { margin: auto !important; max-width: 480px !important; transform: scale(0.92) !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.1) !important; } .ll-pwa-sheet.is-visible .ll-pwa-sheet__card { transform: scale(1) !important; } .ll-pwa-floating-trigger { top: auto !important; bottom: 24px !important; right: 24px !important; padding: 8px 16px 8px 10px !important; font-size: 12px !important; } } /* ========================================================================== 7. Unified iOS Liquid Glass Top & Bottom Bars (Matching Squircle Shapes) ========================================================================== */ @media (max-width: 1199px) { /* Floating iOS Liquid Glass Mobile Top Bar */ header.menu-mobile { position: fixed !important; top: calc(10px + env(safe-area-inset-top, 0px)) !important; left: 10px !important; right: 10px !important; width: auto !important; height: 56px !important; border-radius: 16px !important; padding: 0 16px !important; background: rgba(255, 255, 255, 0.88) !important; -webkit-backdrop-filter: blur(24px) saturate(190%) contrast(102%) !important; backdrop-filter: blur(24px) saturate(190%) contrast(102%) !important; border: 1px solid rgba(255, 255, 255, 0.82) !important; box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important; z-index: 1040 !important; display: flex !important; align-items: center !important; transition: top 0.3s var(--ease-spring), background 0.3s ease, box-shadow 0.3s ease !important; } body.ll-gender-men header.menu-mobile, body.ll-gender-boys header.menu-mobile { background: rgba(14, 20, 32, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important; } } @media (max-width: 991px) { /* Safe Area Bottom Buffer */ body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; } /* Floating iOS Liquid Glass Bottom Bar (Exact Matching Squircle Shape as Top Bar) */ .engo-app-tabbar { position: fixed !important; bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) * 0.35 + 4px)) !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: 480px !important; margin-left: auto !important; margin-right: auto !important; height: 56px !important; border-radius: 18px !important; padding: 0 4px !important; background: rgba(255, 255, 255, 0.98) !important; -webkit-backdrop-filter: blur(24px) saturate(190%) contrast(102%) !important; backdrop-filter: blur(24px) saturate(190%) contrast(102%) !important; border: 1px solid rgba(255, 255, 255, 0.82) !important; box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important; display: flex !important; align-items: center !important; justify-content: space-around !important; z-index: 9999 !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; } body.ll-gender-men .engo-app-tabbar, body.ll-gender-boys .engo-app-tabbar { background: rgba(14, 20, 32, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important; } /* Refined Tab Item Inside Bottom Bar (No Text Collision, Clean iOS Capsule) */ .engo-app-tab { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 48px !important; padding: 4px 10px !important; border-radius: 12px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: -0.2px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Barlow", sans-serif !important; color: #64748b !important; text-decoration: none !important; background: transparent !important; border: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; flex: 1 1 0 !important; max-width: 80px !important; cursor: pointer !important; } .engo-app-tab:active { transform: scale(0.92) !important; } .engo-app-tab__icon { height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 2px !important; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .engo-app-tab__icon svg { width: 20px !important; height: 20px !important; display: block !important; } .engo-app-tab__label { font-size: 10px !important; line-height: 1 !important; font-weight: 600 !important; margin: 0 !important; white-space: nowrap !important; } /* Active State: Clean iOS Translucent Capsule without Squeezing Text */ .engo-app-tab.is-active { color: #0B1118 !important; background: rgba(15, 23, 42, 0.08) !important; } .engo-app-tab.is-active .engo-app-tab__icon { transform: scale(1.06) !important; } body.ll-gender-men .engo-app-tab.is-active, body.ll-gender-boys .engo-app-tab.is-active { color: #D4AF37 !important; background: rgba(212, 175, 55, 0.16) !important; } /* Sticky ATC Positioning Above Bottom Bar */ .engo-sticky-atc { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; left: 10px !important; right: 10px !important; border-radius: 16px !important; z-index: 9990 !important; } } /* Enhanced Squircle PWA App Icon Styling in Sheets & Triggers */ .ll-pwa-sheet__icon-wrap { position: relative !important; flex-shrink: 0 !important; border-radius: 16px !important; } .ll-pwa-sheet__icon { width: 60px !important; height: 60px !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important; border: 1.5px solid rgba(212, 175, 55, 0.45) !important; display: block !important; object-fit: cover !important; } .ll-pwa-trigger-icon { display: inline-flex !important; align-items: center !important; } .ll-pwa-trigger-icon img { border-radius: 8px !important; border: 1px solid rgba(212, 175, 55, 0.4) !important; display: block !important; } /* ========================================================================== PWA Modal - Razor Sharp Crisp Display & Mobile Touch Guarantee ========================================================================== */ .ll-pwa-sheet { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: none !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; visibility: hidden !important; opacity: 0 !important; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .ll-pwa-sheet.is-visible { display: flex !important; pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; } .ll-pwa-sheet__backdrop { position: fixed !important; inset: 0 !important; background: rgba(10, 15, 25, 0.6) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; z-index: 1000000 !important; pointer-events: auto !important; cursor: pointer !important; } .ll-pwa-sheet__card { position: relative !important; z-index: 1000001 !important; pointer-events: auto !important; width: calc(100% - 28px) !important; max-width: 460px !important; margin: auto !important; background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 28px !important; border: 1px solid rgba(212, 175, 55, 0.3) !important; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05) !important; padding: 24px 22px 22px !important; transform: scale(0.95) !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; filter: none !important; -webkit-font-smoothing: antialiased !important; } .ll-pwa-sheet.is-visible .ll-pwa-sheet__card { transform: scale(1) !important; } .ll-pwa-sheet__name, .ll-pwa-sheet__sub, .ll-pwa-sheet__rating, .ll-pwa-sheet__perks, .ll-pwa-sheet__actions, .ll-pwa-sheet__btn { filter: none !important; -webkit-filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ========================================================================== LASTLOOK DESKTOP HEADER & LIQUID MEGAMENU: GENDER COLORS & SMOOTH ANIMATION ========================================================================== */ /* 1. Disable / Hide Vertical Pushmenu Button on Desktop Header */ .icon-pushmenu, .js-btn-pushmenu, .vertical-tab, .js-bg-overlay-vertical, .header-v2 .icon-pushmenu, .header-v1 .icon-pushmenu, .header-v3 .icon-pushmenu, .header-v4 .icon-pushmenu { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* 2. Gender Themes via High-Priority CSS Custom Properties */ .header-v2 .menu ul .nav-item[data-gender="boys"], .header-v2 .menu ul .nav-item.dropdown-gender-boys, .header-v2 .menu ul .dropdown-gender-boys, .nav-item-gender-boys { --gender-accent: #0284c7 !important; --gender-accent-hover: #0369a1 !important; --gender-accent-light: #e0f2fe !important; --gender-accent-pill-bg: rgba(2, 132, 199, 0.09) !important; --gender-accent-gradient: linear-gradient(90deg, #0284c7 0%, #38bdf8 45%, #0ea5e9 75%, #0284c7 100%) !important; --gender-bg-tint: rgba(255, 255, 255, 0.97) !important; --gender-header-color: #0369a1 !important; --gender-glow: rgba(2, 132, 199, 0.3) !important; --gender-border: rgba(2, 132, 199, 0.35) !important; } .header-v2 .menu ul .nav-item[data-gender="men"], .header-v2 .menu ul .nav-item.dropdown-gender-men, .header-v2 .menu ul .dropdown-gender-men, .nav-item-gender-men { --gender-accent: #2563eb !important; --gender-accent-hover: #1d4ed8 !important; --gender-accent-light: #eff6ff !important; --gender-accent-pill-bg: rgba(37, 99, 235, 0.09) !important; --gender-accent-gradient: linear-gradient(90deg, #0f172a 0%, #1e40af 35%, #3b82f6 70%, #60a5fa 100%) !important; --gender-bg-tint: rgba(255, 255, 255, 0.97) !important; --gender-header-color: #0f172a !important; --gender-glow: rgba(37, 99, 235, 0.3) !important; --gender-border: rgba(37, 99, 235, 0.35) !important; } .header-v2 .menu ul .nav-item[data-gender="girls"], .header-v2 .menu ul .nav-item.dropdown-gender-girls, .header-v2 .menu ul .dropdown-gender-girls, .nav-item-gender-girls { --gender-accent: #db2777 !important; --gender-accent-hover: #be185d !important; --gender-accent-light: #fdf2f8 !important; --gender-accent-pill-bg: rgba(219, 39, 119, 0.09) !important; --gender-accent-gradient: linear-gradient(90deg, #831843 0%, #db2777 40%, #f472b6 75%, #fbcfe8 100%) !important; --gender-bg-tint: rgba(255, 255, 255, 0.97) !important; --gender-header-color: #831843 !important; --gender-glow: rgba(219, 39, 119, 0.3) !important; --gender-border: rgba(219, 39, 119, 0.35) !important; } .header-v2 .menu ul .nav-item[data-gender="women"], .header-v2 .menu ul .nav-item.dropdown-gender-women, .header-v2 .menu ul .dropdown-gender-women, .nav-item-gender-women { --gender-accent: #e11d48 !important; --gender-accent-hover: #be123c !important; --gender-accent-light: #fff1f2 !important; --gender-accent-pill-bg: rgba(225, 29, 72, 0.09) !important; --gender-accent-gradient: linear-gradient(90deg, #881337 0%, #e11d48 40%, #fda4af 75%, #ffe4e6 100%) !important; --gender-bg-tint: rgba(255, 255, 255, 0.97) !important; --gender-header-color: #881337 !important; --gender-glow: rgba(225, 29, 72, 0.3) !important; --gender-border: rgba(225, 29, 72, 0.35) !important; } .header-v2 .menu ul .nav-item[data-gender="sale"], .header-v2 .menu ul .nav-item.dropdown-gender-sale, .header-v2 .menu ul .dropdown-gender-sale, .nav-item-gender-sale { --gender-accent: #dc2626 !important; --gender-accent-hover: #b91c1c !important; --gender-accent-light: #fef2f2 !important; --gender-accent-pill-bg: rgba(220, 38, 38, 0.09) !important; --gender-accent-gradient: linear-gradient(90deg, #7f1d1d 0%, #dc2626 50%, #f87171 100%) !important; --gender-bg-tint: rgba(255, 255, 255, 0.97) !important; --gender-header-color: #991b1b !important; --gender-glow: rgba(220, 38, 38, 0.3) !important; --gender-border: rgba(220, 38, 38, 0.35) !important; } .header-v2 .menu ul .nav-item[data-gender*="winter"], .header-v2 .menu ul .nav-item.dropdown-gender-winter26, .header-v2 .menu ul .dropdown-gender-winter26 { --gender-accent: #0284c7 !important; --gender-accent-hover: #0369a1 !important; --gender-accent-light: #f0f9ff !important; --gender-accent-pill-bg: rgba(2, 132, 199, 0.09) !important; --gender-accent-gradient: linear-gradient(90deg, #0f172a 0%, #0284c7 50%, #38bdf8 100%) !important; --gender-bg-tint: rgba(255, 255, 255, 0.97) !important; --gender-header-color: #0369a1 !important; --gender-glow: rgba(2, 132, 199, 0.3) !important; --gender-border: rgba(2, 132, 199, 0.35) !important; } /* 3. Top Navbar Item Active/Hover Tint & Animated Underline */ .header-v2 .menu ul .nav-item > a.menu-level-1 { position: relative !important; text-decoration: none !important; transition: color 0.2s ease !important; } .header-v2 .menu ul .nav-item > a.menu-level-1::after { content: "" !important; position: absolute !important; bottom: -4px !important; left: 50% !important; transform: translateX(-50%) scaleX(0) !important; width: 26px !important; height: 2.5px !important; border-radius: 3px !important; background: var(--gender-accent, #2563eb) !important; box-shadow: 0 0 10px var(--gender-glow, transparent) !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease !important; } .header-v2 .menu ul .nav-item:hover > a.menu-level-1::after, .header-v2 .menu ul .nav-item.active > a.menu-level-1::after { transform: translateX(-50%) scaleX(1) !important; } .header-v2 .menu ul .nav-item:hover > a.menu-level-1, .header-v2 .menu ul .nav-item.active > a.menu-level-1 { color: var(--gender-accent, #2563eb) !important; } /* 4. Megamenu Base Liquid Glass with Full Continuous Border Line Color */ .header-v2 .menu ul .nav-item.dropdown { position: static !important; padding-bottom: 25px !important; margin-bottom: -25px !important; } /* Invisible Hit-Test Bridge from Header into Dropdown */ .header-v2 .menu ul .nav-item.dropdown::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -30px !important; height: 40px !important; background: transparent !important; pointer-events: auto !important; z-index: 9998 !important; } /* The Liquid Dropdown: Starts as Small Centered Liquid Pill, Expands Left & Right Symmetrically with Full Border Line Color */ .header-v2 .menu ul .nav-item.dropdown .dropdown-menu { display: block !important; top: 84px !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: scale(0.24, 0.08) translateY(-14px) translateZ(0) !important; transform-origin: 50% 0% !important; border-radius: 999px !important; clip-path: inset(0 38% 85% 38% round 999px) !important; transition: opacity 0.22s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important; transition-delay: 0.16s !important; will-change: opacity, transform, clip-path !important; /* Boys Collection Inspired Dark Frosted Glass (media_1793199793472_4ddce747.png) */ /* Premium Apple/Header-Inspired Solid Frosted Glass: 94% Dense White Frosted (Blocks background bleed-through) with Soft Ambient Glass Shadow */ background: rgba(255, 255, 255, 0.94) !important; -webkit-backdrop-filter: blur(40px) saturate(190%) !important; backdrop-filter: blur(40px) saturate(190%) !important; border: 1.5px solid var(--gender-border, rgba(255, 255, 255, 0.85)) !important; box-shadow: 0 24px 60px -10px var(--gender-glow, rgba(15, 23, 42, 0.16)), 0 8px 24px -4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; border-radius: 24px !important; padding: 34px 0 38px !important; overflow: hidden !important; } /* Top Hover Bridge on Dropdown Menu */ .header-v2 .menu ul .nav-item.dropdown .dropdown-menu::after { content: "" !important; position: absolute !important; top: -45px !important; left: 0 !important; right: 0 !important; height: 50px !important; background: transparent !important; pointer-events: auto !important; z-index: 9999 !important; } /* Hover State: Symmetrically Expands Left & Right into Full Card with Gender Border */ .header-v2 .menu ul .nav-item.dropdown:hover > .dropdown-menu, .header-v2 .menu ul .nav-item.dropdown .dropdown-menu:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: scale(1, 1) translateY(0) translateZ(0) !important; transform-origin: 50% 0% !important; border-radius: 28px !important; clip-path: inset(0 0% 0% 0% round 28px) !important; transition-delay: 0s !important; } /* Smooth Internal Content Reveal */ .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .my-container { opacity: 0 !important; transform: scale(0.97) translateY(8px) !important; transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; transition-delay: 0s !important; } .header-v2 .menu ul .nav-item.dropdown:hover > .dropdown-menu .my-container, .header-v2 .menu ul .nav-item.dropdown .dropdown-menu:hover .my-container { opacity: 1 !important; transform: scale(1) translateY(0) !important; transition-delay: 0.08s !important; } /* 5. Top Accent Ribbon Removed (As requested: colors removed from top, full border integrated!) */ .header-v2 .menu ul .nav-item.dropdown .dropdown-menu::before { display: none !important; content: none !important; } /* 6. Harmonious Balanced Spacing: Summer Collection, Winter Collection & Image Card with Equal Refined Gaps */ .header-v2 .menu ul .nav-item.dropdown .dropdown-menu, #header .dropdown-menu.ver1, #header .dropdown-menu.ver2, #header .dropdown-menu.ver3, #header .dropdown-menu.ver4 { max-width: 960px !important; border-top: none !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .container-fluid, .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .my-container { max-width: 920px !important; margin: 0 auto !important; padding: 0 24px !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .container-fluid > .row, .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .my-container > .row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: center !important; gap: 52px !important; /* Balanced, graceful gap between text columns and banner image */ margin: 0 auto !important; width: 100% !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .col-lg-9 { display: flex !important; flex: 0 0 auto !important; max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .col-lg-9 > .row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 52px !important; /* Balanced identical 52px gap between Summer Collection & Winter Collection */ margin: 0 !important; padding: 0 !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .col-lg-9 > .row > .col-lg-4, .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .col-lg-9 > .row > [class*="col-"] { flex: 0 0 225px !important; width: 225px !important; max-width: 240px !important; padding: 0 !important; margin: 0 !important; opacity: 0.95; transform: translateY(4px); transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .col-lg-3 { flex: 0 0 245px !important; width: 245px !important; max-width: 255px !important; margin: 0 !important; padding: 0 !important; opacity: 0.95; transform: translateY(4px); transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; } .header-v2 .menu ul .nav-item.dropdown:hover .dropdown-menu .col-lg-9 > .row > .col-lg-4, .header-v2 .menu ul .nav-item.dropdown:hover .dropdown-menu .col-lg-9 > .row > [class*="col-"], .header-v2 .menu ul .nav-item.dropdown:hover .dropdown-menu .col-lg-3 { opacity: 1 !important; transform: translateY(0) !important; } /* 7. Category Headings ("SUMMER COLLECTION", "WINTER COLLECTION") with Harmonious Hover */ .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .title { margin-bottom: 18px !important; position: relative !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .title h5 { margin-bottom: 0 !important; display: flex !important; align-items: center !important; gap: 9px !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .title h5::before { content: "" !important; display: inline-block !important; width: 4px !important; height: 18px !important; border-radius: 4px !important; background: var(--gender-accent, #0f172a) !important; box-shadow: 0 0 10px var(--gender-glow, transparent) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .title:hover h5::before { box-shadow: 0 0 14px var(--gender-glow, transparent) !important; transform: scaleY(1.15) !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .title h5 a { font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #0f172a !important; text-decoration: none !important; position: relative !important; padding-bottom: 4px !important; transition: color 0.2s ease !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .title:hover h5 a { color: var(--gender-accent, #2563eb) !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .title h5 a::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 32px !important; height: 2.5px !important; border-radius: 3px !important; background: var(--gender-accent, #0f172a) !important; box-shadow: 0 0 6px var(--gender-glow, transparent) !important; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .title:hover h5 a::after { width: 100% !important; box-shadow: 0 0 10px var(--gender-glow, transparent) !important; } /* 8. Child List Links with Gender Pill Hover */ .header-v2 .menu ul .nav-item.dropdown .dropdown-menu ul { padding-left: 0 !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu ul li { margin-bottom: 2px !important; list-style: none !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu ul li a { display: block !important; font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14.5px !important; font-weight: 500 !important; line-height: 25px !important; color: #475569 !important; padding: 5px 12px !important; border-radius: 8px !important; text-decoration: none !important; transition: color 0.18s ease, background 0.18s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: transform !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu ul li a:hover { color: var(--gender-accent, #000) !important; background: var(--gender-accent-pill-bg, rgba(0,0,0,0.06)) !important; transform: translateX(6px) !important; font-weight: 600 !important; } /* 9. Megamenu Banner Image Card */ .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .picture, .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .banner-img { position: relative !important; border-radius: 18px !important; overflow: hidden !important; border: 1.5px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 10px 28px -6px var(--gender-glow, rgba(0,0,0,0.1)) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .picture:hover, .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .banner-img:hover { transform: translateY(-3px) scale(1.01) !important; border-color: var(--gender-accent, #000) !important; box-shadow: 0 18px 40px -8px var(--gender-glow, rgba(0,0,0,0.22)) !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .picture img, .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .banner-img img { border-radius: 16px !important; width: 100% !important; height: auto !important; display: block !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .picture:hover img, .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .banner-img:hover img { transform: scale(1.03) !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .picture .banner-badge-gender { position: absolute !important; bottom: 14px !important; left: 50% !important; transform: translateX(-50%) !important; background: rgba(15, 23, 42, 0.82) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; border: 1.5px solid rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; padding: 7px 20px !important; border-radius: 999px !important; font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important; transition: all 0.25s ease !important; white-space: nowrap !important; z-index: 5 !important; pointer-events: none !important; } .header-v2 .menu ul .nav-item.dropdown .dropdown-menu .picture:hover .banner-badge-gender { background: var(--gender-accent, #000) !important; box-shadow: 0 4px 20px var(--gender-glow, rgba(0, 0, 0, 0.4)) !important; transform: translateX(-50%) scale(1.05) !important; } /* ========================================================================== HIGH-SPECIFICITY GENDER-SPECIFIC MEGAMENU HOVER RULES ========================================================================== */ /* --- 1. MEN MEGAMENU HOVER (Royal Blue #2563eb) --- */ #header .dropdown-gender-men .dropdown-menu, #header [data-gender="men"] .dropdown-menu, #header .megamenu-gender-men { --gender-accent: #3b82f6 !important; --gender-accent-hover: #1d4ed8 !important; --gender-accent-pill-bg: rgba(59, 130, 246, 0.2) !important; --gender-glow: rgba(59, 130, 246, 0.4) !important; } #header .dropdown-gender-men .dropdown-menu .title:hover h5 a, #header .dropdown-gender-men .dropdown-menu .title h5 a:hover, #header [data-gender="men"] .dropdown-menu .title:hover h5 a, #header [data-gender="men"] .dropdown-menu .title h5 a:hover, #header .megamenu-gender-men .title:hover h5 a, #header .megamenu-gender-men .title h5 a:hover, #header .megamenu-gender-men .menu-level-2:hover { color: #2563eb !important; } #header .dropdown-gender-men .dropdown-menu .title:hover h5::before, #header [data-gender="men"] .dropdown-menu .title:hover h5::before, #header .megamenu-gender-men .title:hover h5::before { background: #2563eb !important; box-shadow: 0 0 12px rgba(37, 99, 235, 0.6) !important; } #header .dropdown-gender-men .dropdown-menu .title:hover h5 a::after, #header [data-gender="men"] .dropdown-menu .title:hover h5 a::after, #header .megamenu-gender-men .title:hover h5 a::after { background: #2563eb !important; box-shadow: 0 0 10px rgba(37, 99, 235, 0.5) !important; width: 100% !important; } #header .dropdown-gender-men .dropdown-menu ul li a:hover, #header .dropdown-gender-men .dropdown-menu li > a:hover, #header [data-gender="men"] .dropdown-menu ul li a:hover, #header [data-gender="men"] .dropdown-menu li > a:hover, #header .megamenu-gender-men ul li a:hover, #header .megamenu-gender-men li > a:hover, #header .megamenu-gender-men .menu-level-3:hover { color: #2563eb !important; background: rgba(37, 99, 235, 0.1) !important; transform: translateX(6px) !important; font-weight: 600 !important; } #header .dropdown-gender-men .dropdown-menu .picture:hover, #header [data-gender="men"] .dropdown-menu .picture:hover, #header .megamenu-gender-men .picture:hover { border-color: #2563eb !important; box-shadow: 0 18px 40px -8px rgba(37, 99, 235, 0.35) !important; } #header .dropdown-gender-men .dropdown-menu .picture:hover .banner-badge-gender, #header [data-gender="men"] .dropdown-menu .picture:hover .banner-badge-gender, #header .megamenu-gender-men .picture:hover .banner-badge-gender { background: #2563eb !important; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5) !important; } /* --- 2. BOYS MEGAMENU HOVER (Sky / Cyan Blue #0284c7) --- */ #header .dropdown-gender-boys .dropdown-menu, #header [data-gender="boys"] .dropdown-menu, #header .megamenu-gender-boys { --gender-accent: #38bdf8 !important; --gender-accent-hover: #0369a1 !important; --gender-accent-pill-bg: rgba(56, 189, 248, 0.2) !important; --gender-glow: rgba(56, 189, 248, 0.4) !important; } #header .dropdown-gender-boys .dropdown-menu .title:hover h5 a, #header .dropdown-gender-boys .dropdown-menu .title h5 a:hover, #header [data-gender="boys"] .dropdown-menu .title:hover h5 a, #header [data-gender="boys"] .dropdown-menu .title h5 a:hover, #header .megamenu-gender-boys .title:hover h5 a, #header .megamenu-gender-boys .title h5 a:hover, #header .megamenu-gender-boys .menu-level-2:hover { color: #0284c7 !important; } #header .dropdown-gender-boys .dropdown-menu .title:hover h5::before, #header [data-gender="boys"] .dropdown-menu .title:hover h5::before, #header .megamenu-gender-boys .title:hover h5::before { background: #0284c7 !important; box-shadow: 0 0 12px rgba(2, 132, 199, 0.6) !important; } #header .dropdown-gender-boys .dropdown-menu .title:hover h5 a::after, #header [data-gender="boys"] .dropdown-menu .title:hover h5 a::after, #header .megamenu-gender-boys .title:hover h5 a::after { background: #0284c7 !important; box-shadow: 0 0 10px rgba(2, 132, 199, 0.5) !important; width: 100% !important; } #header .dropdown-gender-boys .dropdown-menu ul li a:hover, #header .dropdown-gender-boys .dropdown-menu li > a:hover, #header [data-gender="boys"] .dropdown-menu ul li a:hover, #header [data-gender="boys"] .dropdown-menu li > a:hover, #header .megamenu-gender-boys ul li a:hover, #header .megamenu-gender-boys li > a:hover, #header .megamenu-gender-boys .menu-level-3:hover { color: #0284c7 !important; background: rgba(2, 132, 199, 0.1) !important; transform: translateX(6px) !important; font-weight: 600 !important; } #header .dropdown-gender-boys .dropdown-menu .picture:hover, #header [data-gender="boys"] .dropdown-menu .picture:hover, #header .megamenu-gender-boys .picture:hover { border-color: #0284c7 !important; box-shadow: 0 18px 40px -8px rgba(2, 132, 199, 0.35) !important; } #header .dropdown-gender-boys .dropdown-menu .picture:hover .banner-badge-gender, #header [data-gender="boys"] .dropdown-menu .picture:hover .banner-badge-gender, #header .megamenu-gender-boys .picture:hover .banner-badge-gender { background: #0284c7 !important; box-shadow: 0 4px 20px rgba(2, 132, 199, 0.5) !important; } /* --- 3. GIRLS MEGAMENU HOVER (Hot Rose / Fuchsia #db2777) --- */ #header .dropdown-gender-girls .dropdown-menu, #header [data-gender="girls"] .dropdown-menu, #header .megamenu-gender-girls { --gender-accent: #38bdf8 !important; --gender-accent-hover: #be185d !important; --gender-accent-pill-bg: rgba(56, 189, 248, 0.2) !important; --gender-glow: rgba(56, 189, 248, 0.4) !important; } #header .dropdown-gender-girls .dropdown-menu .title:hover h5 a, #header .dropdown-gender-girls .dropdown-menu .title h5 a:hover, #header [data-gender="girls"] .dropdown-menu .title:hover h5 a, #header [data-gender="girls"] .dropdown-menu .title h5 a:hover, #header .megamenu-gender-girls .title:hover h5 a, #header .megamenu-gender-girls .title h5 a:hover, #header .megamenu-gender-girls .menu-level-2:hover { color: #db2777 !important; } #header .dropdown-gender-girls .dropdown-menu .title:hover h5::before, #header [data-gender="girls"] .dropdown-menu .title:hover h5::before, #header .megamenu-gender-girls .title:hover h5::before { background: #db2777 !important; box-shadow: 0 0 12px rgba(219, 39, 119, 0.6) !important; } #header .dropdown-gender-girls .dropdown-menu .title:hover h5 a::after, #header [data-gender="girls"] .dropdown-menu .title:hover h5 a::after, #header .megamenu-gender-girls .title:hover h5 a::after { background: #db2777 !important; box-shadow: 0 0 10px rgba(219, 39, 119, 0.5) !important; width: 100% !important; } #header .dropdown-gender-girls .dropdown-menu ul li a:hover, #header .dropdown-gender-girls .dropdown-menu li > a:hover, #header [data-gender="girls"] .dropdown-menu ul li a:hover, #header [data-gender="girls"] .dropdown-menu li > a:hover, #header .megamenu-gender-girls ul li a:hover, #header .megamenu-gender-girls li > a:hover, #header .megamenu-gender-girls .menu-level-3:hover { color: #db2777 !important; background: rgba(219, 39, 119, 0.1) !important; transform: translateX(6px) !important; font-weight: 600 !important; } #header .dropdown-gender-girls .dropdown-menu .picture:hover, #header [data-gender="girls"] .dropdown-menu .picture:hover, #header .megamenu-gender-girls .picture:hover { border-color: #db2777 !important; box-shadow: 0 18px 40px -8px rgba(219, 39, 119, 0.35) !important; } #header .dropdown-gender-girls .dropdown-menu .picture:hover .banner-badge-gender, #header [data-gender="girls"] .dropdown-menu .picture:hover .banner-badge-gender, #header .megamenu-gender-girls .picture:hover .banner-badge-gender { background: #db2777 !important; box-shadow: 0 4px 20px rgba(219, 39, 119, 0.5) !important; } /* --- 4. WOMEN MEGAMENU HOVER (Luxury Crimson / Rose #e11d48) --- */ #header .dropdown-gender-women .dropdown-menu, #header [data-gender="women"] .dropdown-menu, #header .megamenu-gender-women { --gender-accent: #e11d48 !important; --gender-accent-hover: #be123c !important; --gender-accent-pill-bg: rgba(225, 29, 72, 0.1) !important; --gender-glow: rgba(225, 29, 72, 0.35) !important; } #header .dropdown-gender-women .dropdown-menu .title:hover h5 a, #header .dropdown-gender-women .dropdown-menu .title h5 a:hover, #header [data-gender="women"] .dropdown-menu .title:hover h5 a, #header [data-gender="women"] .dropdown-menu .title h5 a:hover, #header .megamenu-gender-women .title:hover h5 a, #header .megamenu-gender-women .title h5 a:hover, #header .megamenu-gender-women .menu-level-2:hover { color: #e11d48 !important; } #header .dropdown-gender-women .dropdown-menu .title:hover h5::before, #header [data-gender="women"] .dropdown-menu .title:hover h5::before, #header .megamenu-gender-women .title:hover h5::before { background: #e11d48 !important; box-shadow: 0 0 12px rgba(225, 29, 72, 0.6) !important; } #header .dropdown-gender-women .dropdown-menu .title:hover h5 a::after, #header [data-gender="women"] .dropdown-menu .title:hover h5 a::after, #header .megamenu-gender-women .title:hover h5 a::after { background: #e11d48 !important; box-shadow: 0 0 10px rgba(225, 29, 72, 0.5) !important; width: 100% !important; } #header .dropdown-gender-women .dropdown-menu ul li a:hover, #header .dropdown-gender-women .dropdown-menu li > a:hover, #header [data-gender="women"] .dropdown-menu ul li a:hover, #header [data-gender="women"] .dropdown-menu li > a:hover, #header .megamenu-gender-women ul li a:hover, #header .megamenu-gender-women li > a:hover, #header .megamenu-gender-women .menu-level-3:hover { color: #e11d48 !important; background: rgba(225, 29, 72, 0.1) !important; transform: translateX(6px) !important; font-weight: 600 !important; } #header .dropdown-gender-women .dropdown-menu .picture:hover, #header [data-gender="women"] .dropdown-menu .picture:hover, #header .megamenu-gender-women .picture:hover { border-color: #e11d48 !important; box-shadow: 0 18px 40px -8px rgba(225, 29, 72, 0.35) !important; } #header .dropdown-gender-women .dropdown-menu .picture:hover .banner-badge-gender, #header [data-gender="women"] .dropdown-menu .picture:hover .banner-badge-gender, #header .megamenu-gender-women .picture:hover .banner-badge-gender { background: #e11d48 !important; box-shadow: 0 4px 20px rgba(225, 29, 72, 0.5) !important; } /* 10. Mobile Drawer Menu Gender Accents */ .nav-item-gender-boys:hover > .nav-link, .nav-item-gender-boys > .nav-link:hover { color: #0284c7 !important; } .nav-item-gender-men:hover > .nav-link, .nav-item-gender-men > .nav-link:hover { color: #2563eb !important; } .nav-item-gender-girls:hover > .nav-link, .nav-item-gender-girls > .nav-link:hover { color: #db2777 !important; } .nav-item-gender-women:hover > .nav-link, .nav-item-gender-women > .nav-link:hover { color: #e11d48 !important; } .nav-item-gender-sale:hover > .nav-link, .nav-item-gender-sale > .nav-link:hover { color: #dc2626 !important; } /* ========================================================================== Full-Page Ambient Background Blur When Megamenu Dropdown is Opened ========================================================================== */ .megamenu-blur-backdrop { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(11, 17, 24, 0.35) !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; backdrop-filter: blur(12px) saturate(140%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease !important; z-index: 998 !important; /* Right behind #header (1000) and dropdown-menu (1040) */ will-change: opacity, backdrop-filter !important; } body:has(#header .nav-item.dropdown:hover) .megamenu-blur-backdrop, body:has(#header .dropdown-menu:hover) .megamenu-blur-backdrop, body:has(.header-v2 .nav-item.dropdown:hover) .megamenu-blur-backdrop, body:has(.header-v2 .dropdown-menu:hover) .megamenu-blur-backdrop, body.megamenu-open .megamenu-blur-backdrop { opacity: 1 !important; visibility: visible !important; } /* ========================================================================== Continuous Gender Border Lines on Each Megamenu Dropdown ========================================================================== */ /* MEN MEGAMENU: Full Royal Blue Border Line */ #header .dropdown-gender-men .dropdown-menu, #header [data-gender="men"] .dropdown-menu, #header .megamenu-gender-men, .header-v2 .menu ul .dropdown-gender-men .dropdown-menu, .header-v2 .menu ul [data-gender="men"] .dropdown-menu, .megamenu-gender-men { border: 2px solid #2563eb !important; box-shadow: 0 24px 60px -10px rgba(37, 99, 235, 0.35), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } #header .dropdown-gender-men .dropdown-menu .title h5::before, #header [data-gender="men"] .dropdown-menu .title h5::before, .megamenu-gender-men .title h5::before { background: #2563eb !important; box-shadow: 0 0 12px rgba(37, 99, 235, 0.6) !important; } #header .dropdown-gender-men .dropdown-menu .title h5 a::after, #header [data-gender="men"] .dropdown-menu .title h5 a::after, .megamenu-gender-men .title h5 a::after { background: #2563eb !important; box-shadow: 0 0 10px rgba(37, 99, 235, 0.5) !important; } /* BOYS MEGAMENU: Full Electric Cyan / Sky Blue Border Line */ #header .dropdown-gender-boys .dropdown-menu, #header [data-gender="boys"] .dropdown-menu, #header .megamenu-gender-boys, .header-v2 .menu ul .dropdown-gender-boys .dropdown-menu, .header-v2 .menu ul [data-gender="boys"] .dropdown-menu, .megamenu-gender-boys { border: 2px solid #0284c7 !important; box-shadow: 0 24px 60px -10px rgba(2, 132, 199, 0.35), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } #header .dropdown-gender-boys .dropdown-menu .title h5::before, #header [data-gender="boys"] .dropdown-menu .title h5::before, .megamenu-gender-boys .title h5::before { background: #0284c7 !important; box-shadow: 0 0 12px rgba(2, 132, 199, 0.6) !important; } #header .dropdown-gender-boys .dropdown-menu .title h5 a::after, #header [data-gender="boys"] .dropdown-menu .title h5 a::after, .megamenu-gender-boys .title h5 a::after { background: #0284c7 !important; box-shadow: 0 0 10px rgba(2, 132, 199, 0.5) !important; } /* GIRLS MEGAMENU: Full Hot Rose / Pink Border Line */ #header .dropdown-gender-girls .dropdown-menu, #header [data-gender="girls"] .dropdown-menu, #header .megamenu-gender-girls, .header-v2 .menu ul .dropdown-gender-girls .dropdown-menu, .header-v2 .menu ul [data-gender="girls"] .dropdown-menu, .megamenu-gender-girls { border: 2px solid #db2777 !important; box-shadow: 0 24px 60px -10px rgba(219, 39, 119, 0.35), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } #header .dropdown-gender-girls .dropdown-menu .title h5::before, #header [data-gender="girls"] .dropdown-menu .title h5::before, .megamenu-gender-girls .title h5::before { background: #db2777 !important; box-shadow: 0 0 12px rgba(219, 39, 119, 0.6) !important; } #header .dropdown-gender-girls .dropdown-menu .title h5 a::after, #header [data-gender="girls"] .dropdown-menu .title h5 a::after, .megamenu-gender-girls .title h5 a::after { background: #db2777 !important; box-shadow: 0 0 10px rgba(219, 39, 119, 0.5) !important; } /* WOMEN MEGAMENU: Full Crimson / Ruby Border Line */ #header .dropdown-gender-women .dropdown-menu, #header [data-gender="women"] .dropdown-menu, #header .megamenu-gender-women, .header-v2 .menu ul .dropdown-gender-women .dropdown-menu, .header-v2 .menu ul [data-gender="women"] .dropdown-menu, .megamenu-gender-women { border: 2px solid #e11d48 !important; box-shadow: 0 24px 60px -10px rgba(225, 29, 72, 0.35), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } #header .dropdown-gender-women .dropdown-menu .title h5::before, #header [data-gender="women"] .dropdown-menu .title h5::before, .megamenu-gender-women .title h5::before { background: #e11d48 !important; box-shadow: 0 0 12px rgba(225, 29, 72, 0.6) !important; } #header .dropdown-gender-women .dropdown-menu .title h5 a::after, #header [data-gender="women"] .dropdown-menu .title h5 a::after, .megamenu-gender-women .title h5 a::after { background: #e11d48 !important; box-shadow: 0 0 10px rgba(225, 29, 72, 0.5) !important; } /* ---- Global Footer — Max Width with Slightly Rounded Top Corners ---- */ footer.footer-v1, .engo-luxury-footer, body.template-index footer.footer-v1, body.template-index .engo-luxury-footer { width: 100% !important; max-width: 100% !important; margin: 56px 0 0 0 !important; padding: 0 !important; border-radius: 28px 28px 0 0 !important; overflow: hidden !important; border: none !important; position: relative !important; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); } /* Top shiny border handled dynamically by footer_palette in snippets/footer-v1.liquid */ @media (max-width: 991px) { footer.footer-v1, .engo-luxury-footer, body.template-index footer.footer-v1, body.template-index .engo-luxury-footer { border-radius: 22px 22px 0 0 !important; margin: 40px 0 0 0 !important; } } @media (max-width: 767px) { footer.footer-v1, .engo-luxury-footer, body.template-index footer.footer-v1, body.template-index .engo-luxury-footer { border-radius: 18px 18px 0 0 !important; margin: 32px 0 0 0 !important; } } /* ========================================================================== Added-to-Cart Modal & Cart Free Delivery Guarantee (Enhanced v2) ========================================================================== */ /* Guarantee only ONE Free Delivery bar in Cart drawer / modal */ .engo-cart-free-shipping { display: none !important; } /* Luxury Added-to-Cart Popup Modal (.product-popup.engo-popup) */ .product-popup.engo-popup { position: fixed !important; inset: 0 !important; z-index: 9999999 !important; display: none; align-items: center !important; justify-content: center !important; } .product-popup.engo-popup.active, .product-popup.engo-popup[style*="display: block"] { display: flex !important; } .product-popup .overlay { position: fixed !important; inset: 0 !important; background: rgba(11, 17, 24, 0.65) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; z-index: 1 !important; cursor: pointer !important; } /* Enlarged card width (510px) to comfortably fit single-line button text */ .product-popup .content { position: relative !important; z-index: 2 !important; max-width: 510px !important; width: calc(100% - 28px) !important; padding: 32px 28px 28px !important; border-radius: 28px !important; background: #ffffff !important; border: 1px solid rgba(212, 175, 55, 0.4) !important; box-shadow: 0 32px 84px -12px rgba(11, 17, 24, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04) !important; text-align: center !important; animation: engoPopupPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } @keyframes engoPopupPop { 0% { transform: scale(0.92) translateY(12px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .product-popup .close-window { position: absolute !important; top: 16px !important; right: 16px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: #f1f5f9 !important; color: #475569 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; border: none !important; font-size: 14px !important; transition: all 0.2s ease !important; z-index: 10 !important; } .product-popup .close-window:hover { background: #0f172a !important; color: #ffffff !important; transform: rotate(90deg) !important; } .product-popup .mini-product-item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 14px !important; } .product-popup .product-image { position: relative !important; width: 104px !important; height: 104px !important; border-radius: 22px !important; overflow: hidden !important; background: #f8fafc !important; border: 1.5px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .product-popup .product-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .product-popup .engo-popup-eyebrow { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 15px !important; border-radius: 30px !important; background: linear-gradient(135deg, rgba(220, 252, 231, 0.95) 0%, rgba(187, 247, 208, 0.8) 100%) !important; color: #15803d !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; margin-bottom: 10px !important; } .product-popup .product-name { font-size: 17.5px !important; font-weight: 800 !important; color: #0f172a !important; line-height: 1.35 !important; margin: 0 0 12px 0 !important; max-width: 440px !important; letter-spacing: -0.3px !important; } /* Variant Details: Color & Size Pills */ .product-popup .product-variant-details { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 0 16px 0 !important; } .product-popup .engo-variant-pill { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 13px !important; border-radius: 20px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; font-size: 12px !important; color: #334155 !important; font-weight: 500 !important; } .product-popup .engo-variant-pill .engo-variant-name { color: #64748b !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 10px !important; letter-spacing: 0.06em !important; } .product-popup .engo-variant-pill .engo-variant-val { color: #0f172a !important; font-weight: 700 !important; } .product-popup .engo-variant-pill.engo-variant-color { background: rgba(254, 243, 199, 0.5) !important; border-color: rgba(212, 175, 55, 0.45) !important; } .product-popup .engo-variant-pill.engo-variant-size { background: rgba(241, 245, 249, 0.95) !important; border-color: #cbd5e1 !important; } .product-popup .engo-variant-pill.engo-variant-price { background: #0f172a !important; border-color: #0f172a !important; color: #ffd700 !important; } .product-popup .engo-variant-pill.engo-variant-price .engo-variant-val { color: #ffd700 !important; } /* Actions Buttons: Single-Line with zero text wrapping */ .product-popup .actions { display: flex !important; gap: 12px !important; width: 100% !important; margin-top: 4px !important; } .product-popup .actions button { flex: 1 1 50% !important; height: 48px !important; padding: 0 20px !important; border-radius: 30px !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; white-space: nowrap !important; /* CRITICAL: PREVENTS BUTTON TEXT WRAPPING TO 2 LINES */ cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.25s ease !important; } .product-popup .continue-shopping { background: #f1f5f9 !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } .product-popup .continue-shopping:hover { background: #e2e8f0 !important; transform: translateY(-2px) !important; } .product-popup .shop-button { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; color: #ffffff !important; border: 1px solid rgba(212, 175, 55, 0.45) !important; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25) !important; } .product-popup .shop-button:hover { background: linear-gradient(135deg, #d4af37 0%, #b48a1a 100%) !important; color: #0b1118 !important; border-color: #d4af37 !important; box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4) !important; transform: translateY(-2px) !important; } @media (max-width: 480px) { .product-popup .content { padding: 24px 16px 20px !important; width: calc(100% - 20px) !important; } .product-popup .actions { gap: 8px !important; } .product-popup .actions button { height: 44px !important; padding: 0 10px !important; font-size: 10.5px !important; letter-spacing: 0.02em !important; } } /* ========================================================================== PERFECT MOBILE TOUCH SCROLLING & ZERO-BLOCKING GUARANTEE ========================================================================== */ html, body { overflow-x: clip !important; overflow-y: auto !important; height: auto !important; min-height: 100% !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } body:not(.engo-modal-open) { overflow-y: auto !important; overflow: visible !important; position: static !important; pointer-events: auto !important; } .wrap { overflow: visible !important; overflow-x: clip !important; overflow-y: visible !important; height: auto !important; min-height: 100% !important; position: relative !important; -webkit-overflow-scrolling: touch !important; } /* Ensure PWA sheet and backdrop NEVER block clicks or scrolls unless .is-visible */ .ll-pwa-sheet:not(.is-visible), .ll-pwa-sheet:not(.is-visible) *, #llPwaInstallSheet:not(.is-visible), #llPwaInstallSheet:not(.is-visible) * { display: none !important; pointer-events: none !important; visibility: hidden !important; opacity: 0 !important; } .ll-pwa-sheet.is-visible { display: flex !important; pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; } .ll-pwa-sheet.is-visible .ll-pwa-sheet__backdrop { display: block !important; pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; } /* Ensure splash screen never blocks on mobile browser */ #EngoAppSplash:not(.is-active) { display: none !important; pointer-events: none !important; } /* Suppress slideshow hero social bar on mobile/tablet to eliminate button overlap */ @media (max-width: 991px) { .section-slideshow-v1.engo-hero-v1 .slider-v1 .social, .engo-hero-social-bar { display: none !important; } } /* ========================================================================== AUTO-ENABLED MOBILE & APP BUY BUTTONS + LOW-END DEVICE LAG ELIMINATOR ========================================================================== */ /* Universal Card Buy Dock */ /* ========================================================================== ENHANCED 3-BUTTON ACTION DOCK ON MOBILE & APP (MATCHING DESKTOP SCREENSHOT) 1. Shopping Bag (Add to Cart / Select Options) 2. Eye (Quick View Modal) 3. Heart (Wishlist) ========================================================================== */ @media (max-width: 991px) { .product-item-v1 .product-icon, .product-item-v3 .product-icon { display: flex !important; opacity: 1 !important; visibility: visible !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 12px !important; top: auto !important; width: 100% !important; justify-content: center !important; align-items: center !important; gap: 10px !important; transform: none !important; pointer-events: auto !important; z-index: 6 !important; } .product-item-v1 .product-icon .add-to-cart-button, .product-item-v1 .product-icon .quick-view, .product-item-v1 .product-icon .wish-list, .product-item-v3 .product-icon .add-to-cart-button, .product-item-v3 .product-icon .quick-view, .product-item-v3 .product-icon .wish-list { display: flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; visibility: visible !important; transform: scale(1) !important; pointer-events: auto !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important; margin: 0 !important; padding: 0 !important; transition: transform 0.15s ease, background 0.15s ease !important; } .product-item-v1 .product-icon .add-to-cart-button:active, .product-item-v1 .product-icon .quick-view:active, .product-item-v1 .product-icon .wish-list:active, .product-item-v3 .product-icon .add-to-cart-button:active, .product-item-v3 .product-icon .quick-view:active, .product-item-v3 .product-icon .wish-list:active { transform: scale(0.92) !important; background: #f1f5f9 !important; } .product-item-v1 .product-icon .add-to-cart-button a, .product-item-v1 .product-icon .add-to-cart-button button, .product-item-v1 .product-icon .quick-view a, .product-item-v1 .product-icon .wish-list a, .product-item-v1 .product-icon .wish-list button, .product-item-v3 .product-icon .add-to-cart-button a, .product-item-v3 .product-icon .add-to-cart-button button, .product-item-v3 .product-icon .quick-view a, .product-item-v3 .product-icon .wish-list a, .product-item-v3 .product-icon .wish-list button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; line-height: 38px !important; color: #0f172a !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } .product-item-v1 .product-icon .add-to-cart-button i, .product-item-v1 .product-icon .quick-view i, .product-item-v1 .product-icon .wish-list i, .product-item-v3 .product-icon .add-to-cart-button i, .product-item-v3 .product-icon .quick-view i, .product-item-v3 .product-icon .wish-list i { color: #0f172a !important; font-size: 15px !important; line-height: 1 !important; } .product-item-v1 .product-icon .engo-wishlist-btn.is-wishlisted i, .product-item-v3 .product-icon .engo-wishlist-btn.is-wishlisted i { color: #e11d48 !important; } } /* ========================================================================== MOBILE & APP QUICK VIEW / QUICK SHOP POPUP FIX (FULL VIEWPORT & SCROLLABLE) ========================================================================== */ @media (max-width: 991px) { /* 1. Eliminate desktop 490px min-width constraint across all popups on mobile */ .tshopify-popup .content, .quickview-product .content, .product-quickview { min-width: 0 !important; } /* 2. Popup overlay & backdrop - full viewport with native scrolling */ .quickview-product.tshopify-popup.active { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 14px 10px !important; box-sizing: border-box !important; z-index: 999999 !important; } /* 3. Modal Card - Perfectly fitted, scrollable, and never cut off */ .quickview-product .content.product-quickview, .quickview-product .content { min-width: 0 !important; width: 100% !important; max-width: 440px !important; max-height: calc(100vh - 28px) !important; max-height: calc(100dvh - 28px) !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; border-radius: 24px !important; padding: 20px 16px 22px !important; margin: auto !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.28) !important; position: relative !important; box-sizing: border-box !important; } /* 4. Reset grid row & columns to prevent horizontal overflow */ .quickview-product .content.product-quickview .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } .quickview-product .content.product-quickview [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* 5. Compact Product Image Gallery on Mobile (Prevents pushing buttons offscreen) */ .quickview-product .product-media { margin-bottom: 12px !important; width: 100% !important; background: #f8fafc !important; border-radius: 18px !important; overflow: hidden !important; padding: 8px !important; box-sizing: border-box !important; } .quickview-product .product-media img, .quickview-product .owl-carousel img, .quickview-product .slick-slide img { max-height: 195px !important; width: 100% !important; height: auto !important; object-fit: contain !important; border-radius: 14px !important; margin: 0 auto !important; display: block !important; } .quickview-product .owl-carousel, .quickview-product .slick-list, .quickview-product .slick-track, .quickview-product .slick-slide { max-height: 195px !important; } .quickview-product .slick-arrow { width: 30px !important; height: 30px !important; font-size: 14px !important; background: rgba(255, 255, 255, 0.95) !important; } /* 6. Typography & Pricing */ .quickview-product .detail-info { padding: 0 !important; } .quickview-product .engo-eyebrow { display: inline-block !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #64748b !important; margin-bottom: 3px !important; } .quickview-product .product-name { margin: 0 0 6px !important; } .quickview-product .product-name a { font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #0f172a !important; display: block !important; } .quickview-product .prices .price { font-size: 17px !important; font-weight: 700 !important; color: #c50215 !important; } .quickview-product .prices .compare-price { font-size: 13px !important; color: #94a3b8 !important; margin-left: 6px !important; } .quickview-product .product-desc { font-size: 12px !important; line-height: 1.45 !important; color: #475569 !important; margin: 6px 0 10px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; max-height: 48px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } /* 7. Swatches (Color & Size) */ .quickview-product .swatch { margin: 8px 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; } .quickview-product .swatch .header { flex: 0 0 100% !important; font-size: 11px !important; font-weight: 700 !important; margin-bottom: 4px !important; color: #0f172a !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } .quickview-product .swatch .swatch-element { margin: 0 !important; display: inline-block !important; } .quickview-product .swatch .swatch-element label { min-width: 36px !important; height: 34px !important; line-height: 32px !important; padding: 0 10px !important; font-size: 12px !important; border-radius: 8px !important; border: 1.5px solid rgba(15, 23, 42, 0.16) !important; background: #ffffff !important; color: #0f172a !important; cursor: pointer !important; touch-action: manipulation !important; } .quickview-product .swatch .swatch-element.color label, .quickview-product .swatch .swatch-element.color label.engo-qv-color-pill { min-width: 0 !important; width: auto !important; height: 34px !important; padding: 0 10px 0 8px !important; font-size: 11.5px !important; border-radius: 10px !important; gap: 6px !important; } .quickview-product .swatch input:checked + label { border-color: #0f172a !important; background: #0f172a !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22) !important; } /* 8. Action Buttons Dock (Quantity Selector + Full-Width Add to Bag) */ .quickview-product .engo-qv-actions { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 14px !important; margin-bottom: 6px !important; width: 100% !important; } .quickview-product .product-quantity { flex: 0 0 100px !important; width: 100px !important; margin: 0 !important; } .quickview-product .quantity-all.js-qty { width: 100px !important; height: 44px !important; padding: 0 4px !important; border-radius: 999px !important; background: #f8fafc !important; border: 1.5px solid rgba(15, 23, 42, 0.16) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; } .quickview-product .quantity-all input.qty { width: 32px !important; height: 100% !important; border: 0 !important; background: transparent !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; color: #0f172a !important; padding: 0 !important; } .quickview-product .quantity-all button { width: 30px !important; height: 30px !important; border: 0 !important; background: transparent !important; color: #0f172a !important; font-size: 16px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; touch-action: manipulation !important; } .quickview-product .engo-qv-actions .actions { flex: 1 1 auto !important; width: auto !important; margin: 0 !important; } .quickview-product .btn-addToCart { width: 100% !important; height: 44px !important; line-height: 44px !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; background: #0f172a !important; color: #ffffff !important; border: 0 !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px !important; margin: 0 !important; touch-action: manipulation !important; transition: transform 0.12s ease, background 0.15s ease !important; } .quickview-product .btn-addToCart:active { transform: scale(0.96) !important; background: #b08d57 !important; } .quickview-product .engo-qv-footer { margin-top: 8px !important; text-align: center !important; } .quickview-product .engo-qv-full-link { font-size: 11.5px !important; font-weight: 600 !important; color: #64748b !important; } /* 9. Pinned Easy-Tap Close Button */ .quickview-product .close-window { position: absolute !important; top: 12px !important; right: 12px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: rgba(15, 23, 42, 0.08) !important; color: #0f172a !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 30 !important; border: 0 !important; cursor: pointer !important; touch-action: manipulation !important; } .quickview-product .close-window svg { width: 14px !important; height: 14px !important; stroke: #0f172a !important; display: block !important; } .quickview-product .close-window:active { background: #0f172a !important; } .quickview-product .close-window:active svg { stroke: #ffffff !important; } } /* ========================================================== Luxury Atelier & Craftsmanship Accordion (Product Page) ========================================================== */ .engo-luxury-atelier-box { margin-top: 18px; margin-bottom: 20px; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 16px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04); overflow: hidden; } .engo-atelier-badge-top { display: flex; align-items: center; gap: 8px; padding: 11px 18px; background: #0f172a; color: #f6f1e7; } .engo-atelier-crown { color: #d4af37; display: inline-flex; align-items: center; } .engo-atelier-badge-text { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .engo-atelier-accordion { padding: 4px 16px; } .engo-atelier-item { border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .engo-atelier-item:last-child { border-bottom: none; } .engo-atelier-summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; cursor: pointer; list-style: none; user-select: none; } .engo-atelier-summary::-webkit-details-marker { display: none; } .engo-atelier-summary__title { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #0f172a; } .engo-atelier-summary__title strong { font-weight: 600; letter-spacing: 0.02em; } .engo-atelier-icon { color: #b08d57; flex-shrink: 0; } .engo-atelier-toggle-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; } .engo-atelier-toggle-icon::before, .engo-atelier-toggle-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: #64748b; transform: translate(-50%, -50%); transition: transform 0.2s ease, opacity 0.2s ease; } .engo-atelier-toggle-icon::before { width: 11px; height: 1.5px; } .engo-atelier-toggle-icon::after { width: 1.5px; height: 11px; } .engo-atelier-item[open] .engo-atelier-toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .engo-atelier-body { padding: 0 4px 14px 30px; font-size: 12.5px; line-height: 1.65; color: #475569; } .engo-atelier-body p { margin: 0 0 10px; } .engo-atelier-specs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; } .engo-atelier-specs-list li { position: relative; padding-left: 14px; font-size: 12px; } .engo-atelier-specs-list li::before { content: "•"; position: absolute; left: 0; color: #b08d57; font-weight: bold; } .engo-atelier-stylist-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 9px 12px; background: #f8fafc; border-radius: 8px; border: 1px dashed rgba(15, 23, 42, 0.12); } .engo-atelier-stylist-row span { font-size: 12px; font-weight: 500; color: #334155; } .engo-atelier-stylist-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #25d366; color: #fff !important; font-size: 12px; font-weight: 600; border-radius: 6px; text-decoration: none !important; transition: transform 0.18s ease, filter 0.18s ease; } .engo-atelier-stylist-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } /* ========================================================== Luxury Brand Story & Benefits Bar Refinement ========================================================== */ .engo-luxury-benefits { margin-top: 45px; margin-bottom: 20px; background: #fdfbf7 !important; border-top: 1px solid rgba(176, 141, 87, 0.25) !important; border-bottom: 1px solid rgba(176, 141, 87, 0.25) !important; border-radius: 12px; } .engo-luxury-benefits .brand-benefits__list { padding: 26px 12px; } .brand-benefits__icon-wrap { width: 44px; height: 44px; border-radius: 50%; background: rgba(20, 33, 61, 0.06); border: 1px solid rgba(176, 141, 87, 0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-benefits__icon-wrap i { font-size: 18px; color: #0f172a; } .brand-benefits__content strong { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #0f172a; display: block; } .brand-benefits__content span { font-size: 12px; color: #64748b; display: block; margin-top: 2px; } .engo-luxury-brand-story { margin-top: 60px; margin-bottom: 70px; padding: 40px 0; background: linear-gradient(180deg, rgba(253, 251, 247, 0.6) 0%, rgba(255, 255, 255, 1) 100%); border-radius: 20px; border: 1px solid rgba(176, 141, 87, 0.15); } .engo-luxury-brand-story .brand-story__media img { border-radius: 16px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12); max-height: 520px; object-fit: cover; } .engo-luxury-brand-story .brand-story__eyebrow { color: #b08d57; font-weight: 700; font-size: 11.5px; letter-spacing: 0.22em; } .engo-luxury-brand-story .brand-story__text h2 { font-size: 34px; font-weight: 700; color: #0f172a; line-height: 1.22; margin: 14px 0 18px; } .engo-luxury-brand-story .brand-story__text p { font-size: 14.5px; line-height: 1.8; color: #475569; margin-bottom: 26px; } @media (max-width: 767px) { .engo-luxury-brand-story { margin-top: 40px; margin-bottom: 45px; padding: 24px 14px; } .engo-luxury-brand-story .brand-story__text h2 { font-size: 24px; } .engo-luxury-brand-story .brand-story__text p { font-size: 13.5px; } } /* Mobile announcement bar centering */ @media (max-width: 767px) { .brand-announce.engo-announce { height: 32px !important; } .engo-announce__inner { justify-content: center !important; padding: 0 10px !important; } .engo-announce__msg { display: block !important; text-align: center !important; font-size: 10.5px !important; letter-spacing: 0.06em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ========================================================== Collection Integrated Hero Banner (Slightly Incremented Size) ========================================================== */ .engo-col-hero-banner { position: relative !important; width: 100% !important; min-height: var(--banner-dt-height, clamp(240px, 25vw, 350px)) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; padding: 42px 20px 38px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } .engo-col-hero-banner .pd-banner__media { position: absolute !important; inset: 0 !important; z-index: 1 !important; } .engo-col-hero-banner .pd-banner__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 25% !important; image-rendering: -webkit-optimize-contrast !important; image-rendering: high-quality !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important;} .engo-col-hero-banner .pd-banner__overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(15, 23, 42, 0.42) 0%, rgba(15, 23, 42, 0.78) 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; pointer-events: none !important; } .engo-col-hero-banner .engo-col-title-themed { color: #ffffff !important; font-size: clamp(28px, 3.4vw, 42px) !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; margin: 0 !important; } .engo-col-hero-banner .bread-crumb { margin-bottom: 8px !important; } .engo-col-hero-banner .bread-crumb a, .engo-col-hero-banner .bread-crumb strong, .engo-col-hero-banner .bread-crumb i { color: rgba(255, 255, 255, 0.88) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important; font-size: 11.5px !important; letter-spacing: 0.08em !important; } .engo-col-hero-banner .bread-crumb a:hover { color: #d4af37 !important; } .engo-col-hero-banner .engo-col-pill { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; padding: 4px 14px !important; border-radius: 999px !important; } .engo-col-hero-banner .engo-col-desc { color: rgba(255, 255, 255, 0.94) !important; max-width: 680px !important; margin: 14px auto 0 !important; font-size: clamp(13px, 1.1vw, 15px) !important; line-height: 1.65 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important; } @media (max-width: 767px) { .engo-col-hero-banner { min-height: var(--banner-mb-height, 200px) !important; padding: 30px 16px 24px !important; } .engo-col-hero-banner .engo-col-title-themed { font-size: 24px !important; } .engo-col-hero-banner .engo-col-desc { font-size: 12px !important; margin-top: 8px !important; -webkit-line-clamp: 3 !important; } } /* Hide pill shape gender button from collection slider */ .engo-col-card__dept { display: none !important; } /* ========================================================================== LASTLOOK APPLE iOS 27 LIQUID GLASS PWA EXPERIENCE & DYNAMIC ISLAND ========================================================================== */ /* 1. iOS Standalone App Shell (Installed PWA Fullscreen) */ .is-pwa-standalone { overscroll-behavior-y: contain !important; -webkit-user-select: none; user-select: none; } .is-pwa-standalone body { padding-top: env(safe-area-inset-top) !important; padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; } .is-pwa-standalone .ll-dynamic-island, .is-pwa-standalone .ll-ios-sheet, .is-pwa-standalone .engo-header-install-btn { display: none !important; } /* 2. Apple iOS 27 Liquid Glass Action Sheet (Universal Modal) */ .ll-ios-sheet { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; pointer-events: none !important; visibility: hidden !important; opacity: 0 !important; transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.3s ease !important; -webkit-font-smoothing: antialiased; } .ll-ios-sheet.is-visible { pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; } /* Frosted Liquid Glass Backdrop */ .ll-ios-sheet__backdrop { position: fixed !important; inset: 0 !important; background: rgba(2, 6, 23, 0.65) !important; backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; z-index: 1000000 !important; pointer-events: auto !important; cursor: pointer !important; opacity: 0; transition: opacity 0.35s ease !important; } .ll-ios-sheet.is-visible .ll-ios-sheet__backdrop { opacity: 1 !important; } /* Apple Liquid Bottom Sheet Card */ .ll-ios-sheet__card { position: relative !important; z-index: 1000001 !important; pointer-events: auto !important; width: 100% !important; max-width: 520px !important; margin: 0 auto !important; background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.98) 100%) !important; backdrop-filter: blur(40px) saturate(220%) !important; -webkit-backdrop-filter: blur(40px) saturate(220%) !important; border-top: 1px solid rgba(255, 255, 255, 0.22) !important; border-left: 1px solid rgba(255, 255, 255, 0.1) !important; border-right: 1px solid rgba(255, 255, 255, 0.1) !important; border-bottom: none !important; border-radius: 32px 32px 0 0 !important; box-shadow: 0 -16px 54px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important; padding: 16px 24px calc(24px + env(safe-area-inset-bottom)) !important; color: #ffffff !important; transform: translateY(105%) !important; transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1) !important; will-change: transform; } .ll-ios-sheet.is-visible .ll-ios-sheet__card { transform: translateY(0) !important; } @media (min-width: 992px) { .ll-ios-sheet { align-items: center !important; } .ll-ios-sheet__card { border-radius: 32px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important; padding: 24px 28px !important; transform: scale(0.92) !important; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease !important; } .ll-ios-sheet.is-visible .ll-ios-sheet__card { transform: scale(1) !important; } .ll-ios-sheet__handle-wrap { display: none !important; } } /* Apple Pull Handle */ .ll-ios-sheet__handle-wrap { width: 100% !important; padding: 0 0 14px !important; cursor: grab !important; display: flex !important; justify-content: center !important; align-items: center !important; } .ll-ios-sheet__handle { width: 38px !important; height: 5px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.32) !important; display: block !important; transition: background 0.2s ease !important; } .ll-ios-sheet__handle-wrap:active .ll-ios-sheet__handle { background: rgba(255, 255, 255, 0.55) !important; } /* Frosted Close Button */ .ll-ios-sheet__close { position: absolute !important; top: 18px !important; right: 18px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1) !important; padding: 0 !important; outline: none !important; z-index: 2 !important; } .ll-ios-sheet__close:hover, .ll-ios-sheet__close:active { background: rgba(255, 255, 255, 0.22) !important; transform: scale(0.92) !important; } /* App Header Identity */ .ll-ios-sheet__header { display: flex !important; align-items: center !important; gap: 16px !important; padding-bottom: 18px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; margin-bottom: 18px !important; } .ll-ios-sheet__icon-wrap { position: relative !important; flex-shrink: 0 !important; } .ll-ios-sheet__icon { width: 62px !important; height: 62px !important; border-radius: 17px !important; object-fit: cover !important; border: 1.5px solid rgba(212, 175, 55, 0.45) !important; box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4) !important; display: block !important; } .ll-ios-sheet__badge { position: absolute !important; bottom: -3px !important; right: -3px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: linear-gradient(135deg, #d4af37, #f59e0b) !important; border: 2px solid #0f172a !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; } .ll-ios-sheet__meta { flex: 1 !important; min-width: 0 !important; } .ll-ios-sheet__title-row { display: flex !important; align-items: center !important; gap: 6px !important; } .ll-ios-sheet__title { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif !important; font-size: 20px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.02em !important; margin: 0 !important; line-height: 1.2 !important; } .ll-ios-sheet__subtitle { font-size: 13px !important; color: rgba(255, 255, 255, 0.65) !important; margin: 2px 0 6px !important; line-height: 1.3 !important; } .ll-ios-sheet__rating { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; } .ll-ios-sheet__stars { color: #f59e0b !important; letter-spacing: 1px !important; font-size: 11px !important; } .ll-ios-sheet__rating-text { color: rgba(255, 255, 255, 0.7) !important; font-weight: 500 !important; } .ll-ios-sheet__tag { font-size: 10px !important; font-weight: 700 !important; background: rgba(255, 255, 255, 0.14) !important; padding: 1px 7px !important; border-radius: 999px !important; color: rgba(255, 255, 255, 0.9) !important; letter-spacing: 0.05em !important; } /* iOS Walkthrough Steps */ .ll-ios-walkthrough__title { font-size: 13px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.75) !important; margin: 0 0 12px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } .ll-ios-steps { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 16px !important; } .ll-ios-step { display: flex !important; align-items: center !important; gap: 14px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; padding: 12px 14px !important; transition: background 0.2s ease !important; } .ll-ios-step__num { width: 26px !important; height: 26px !important; border-radius: 50% !important; background: rgba(0, 122, 255, 0.22) !important; border: 1.5px solid #007aff !important; color: #60a5fa !important; font-size: 12px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .ll-ios-step__content { flex: 1 !important; display: flex !important; flex-direction: column !important; } .ll-ios-step__label { font-size: 14px !important; color: #ffffff !important; line-height: 1.3 !important; } .ll-ios-step__label strong { color: #60a5fa !important; } .ll-ios-step__hint { font-size: 11.5px !important; color: rgba(255, 255, 255, 0.5) !important; margin-top: 1px !important; } .ll-ios-step__icon-badge { width: 34px !important; height: 34px !important; border-radius: 10px !important; background: rgba(0, 122, 255, 0.15) !important; border: 1px solid rgba(0, 122, 255, 0.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .ll-ios-step__icon-badge--share { animation: llIosPulse 2.4s infinite ease-in-out !important; } @keyframes llIosPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4); } 50% { transform: scale(1.06); box-shadow: 0 0 12px 2px rgba(0, 122, 255, 0.3); } } /* iPhone Home Simulator Preview */ .ll-ios-preview { display: flex !important; align-items: center !important; gap: 14px !important; background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(15, 23, 42, 0.4) 100%) !important; border: 1px solid rgba(212, 175, 55, 0.22) !important; border-radius: 18px !important; padding: 10px 14px !important; margin-bottom: 18px !important; } .ll-ios-preview__app { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; flex-shrink: 0 !important; } .ll-ios-preview__icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } .ll-ios-preview__label { font-size: 9.5px !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: -0.01em !important; } .ll-ios-preview__text { display: flex !important; flex-direction: column !important; } .ll-ios-preview__text strong { font-size: 13px !important; color: #d4af37 !important; font-weight: 700 !important; } .ll-ios-preview__text span { font-size: 11.5px !important; color: rgba(255, 255, 255, 0.65) !important; margin-top: 1px !important; } /* Android & Perks Block */ .ll-ios-perks { list-style: none !important; padding: 0 !important; margin: 0 0 20px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .ll-ios-perk { display: flex !important; align-items: flex-start !important; gap: 12px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 16px !important; padding: 10px 14px !important; } .ll-ios-perk__glyph { font-size: 18px !important; line-height: 1 !important; flex-shrink: 0 !important; margin-top: 2px !important; } .ll-ios-perk__text { display: flex !important; flex-direction: column !important; } .ll-ios-perk__text strong { font-size: 13.5px !important; color: #ffffff !important; font-weight: 600 !important; } .ll-ios-perk__text span { font-size: 11.5px !important; color: rgba(255, 255, 255, 0.6) !important; } /* Desktop Guide */ .ll-desktop-guide__title { font-size: 13px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.75) !important; margin: 0 0 12px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } .ll-desktop-guide__box { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 20px !important; } .ll-desktop-guide__row { display: flex !important; align-items: center !important; gap: 12px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; padding: 10px 14px !important; } .ll-desktop-guide__badge { font-size: 11px !important; font-weight: 700 !important; background: rgba(212, 175, 55, 0.18) !important; color: #d4af37 !important; border: 1px solid rgba(212, 175, 55, 0.35) !important; padding: 2px 8px !important; border-radius: 999px !important; flex-shrink: 0 !important; } .ll-desktop-guide__desc { font-size: 13px !important; color: rgba(255, 255, 255, 0.85) !important; } .ll-desktop-guide__desc strong { color: #ffffff !important; } .ll-desktop-guide__inline-icon { display: inline-flex !important; vertical-align: middle !important; padding: 2px !important; border-radius: 4px !important; background: rgba(0, 122, 255, 0.2) !important; margin: 0 2px !important; } /* Apple Action Buttons */ .ll-ios-sheet__actions { display: flex !important; flex-direction: column !important; gap: 8px !important; } .ll-ios-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 14px 20px !important; border-radius: 16px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important; font-size: 14.5px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; border: none !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1) !important; text-decoration: none !important; outline: none !important; } .ll-ios-btn:active { transform: scale(0.96) !important; } .ll-ios-btn--primary { background: #007aff !important; color: #ffffff !important; box-shadow: 0 6px 20px rgba(0, 122, 255, 0.35) !important; } .ll-ios-btn--primary:hover { background: #0069d9 !important; } .ll-ios-btn--gold { background: linear-gradient(135deg, #d4af37 0%, #f59e0b 100%) !important; color: #020617 !important; box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35) !important; } .ll-ios-btn--gold:hover { filter: brightness(1.06) !important; } .ll-ios-btn--ghost { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; } .ll-ios-btn--ghost:hover, .ll-ios-btn--ghost:active { background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; } /* 3. Apple Dynamic Island Floating Install Pill (Mobile Browser) */ .ll-dynamic-island { position: fixed !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; right: 14px !important; z-index: 99990 !important; display: none; align-items: center !important; gap: 6px !important; transform: translateY(100px) scale(0.85) !important; opacity: 0 !important; transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease !important; } .ll-dynamic-island.is-visible { display: flex !important; transform: translateY(0) scale(1) !important; opacity: 1 !important; } .ll-dynamic-island__surface { display: inline-flex !important; align-items: center !important; gap: 12px !important; background: rgba(10, 17, 26, 0.88) !important; backdrop-filter: blur(28px) saturate(210%) !important; -webkit-backdrop-filter: blur(28px) saturate(210%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 999px !important; padding: 6px 10px 6px 7px !important; box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important; cursor: pointer !important; transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1) !important; } .ll-dynamic-island__surface:active { transform: scale(0.94) !important; } .ll-dynamic-island__leading { display: flex !important; align-items: center !important; gap: 8px !important; } .ll-dynamic-island__icon { width: 28px !important; height: 28px !important; border-radius: 8px !important; border: 1px solid rgba(212, 175, 55, 0.4) !important; display: block !important; } .ll-dynamic-island__label-block { display: flex !important; flex-direction: column !important; line-height: 1.15 !important; } .ll-dynamic-island__title { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.01em !important; } .ll-dynamic-island__sub { font-size: 9.5px !important; color: #d4af37 !important; font-weight: 500 !important; } .ll-dynamic-island__trailing { display: flex !important; align-items: center !important; } .ll-dynamic-island__cta { background: #ffffff !important; color: #020617 !important; font-size: 10.5px !important; font-weight: 700 !important; padding: 4px 11px !important; border-radius: 999px !important; letter-spacing: 0.05em !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important; } .ll-dynamic-island__close { width: 22px !important; height: 22px !important; border-radius: 50% !important; background: rgba(15, 23, 42, 0.8) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.6) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; transition: all 0.18s ease !important; } .ll-dynamic-island__close:active { transform: scale(0.85) !important; color: #ffffff !important; } /* 4. Apple iOS 27 Standalone Liquid App Dock (Bottom Navigation) */ .ll-app-dock { position: fixed !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; left: 12px !important; right: 12px !important; max-width: 440px !important; margin: 0 auto !important; z-index: 99998 !important; } .ll-app-dock__surface { display: flex !important; align-items: center !important; justify-content: space-around !important; height: 58px !important; background: rgba(10, 17, 26, 0.9) !important; backdrop-filter: blur(28px) saturate(210%) !important; -webkit-backdrop-filter: blur(28px) saturate(210%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 28px !important; padding: 0 6px !important; box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important; } .ll-app-dock__item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; flex: 1 !important; height: 100% !important; color: rgba(255, 255, 255, 0.55) !important; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1) !important; padding: 4px 0 !important; } .ll-app-dock__item:active { transform: scale(0.9) !important; } .ll-app-dock__item.is-active { color: #d4af37 !important; } .ll-app-dock__icon-box { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } .ll-app-dock__icon-box svg { transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1) !important; } .ll-app-dock__item.is-active .ll-app-dock__icon-box svg { transform: scale(1.1) !important; stroke: #d4af37 !important; } .ll-app-dock__label { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; margin-top: 2px !important; } .ll-app-dock__badge { position: absolute !important; top: -4px !important; right: -8px !important; background: #ef4444 !important; color: #ffffff !important; font-size: 9.5px !important; font-weight: 700 !important; padding: 1px 5px !important; border-radius: 999px !important; line-height: 1.2 !important; border: 1.5px solid #0f172a !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; } /* ========================================================================== ENHANCED RETINA SIZING & COMPACT MOBILE ADJUSTMENTS (iOS 27 STANDARDS) ========================================================================== */ /* 1. Mobile Bottom Bar Shifted Down to Bottom with Minor Gap */ @media (max-width: 991px) { .engo-app-tabbar, #EngoAppTabBar { bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) * 0.35 + 4px)) !important; height: 56px !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06) !important; } .is-pwa-standalone .engo-app-tabbar, .is-pwa-standalone #EngoAppTabBar { bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) * 0.4 + 4px)) !important; } } /* 2. Collection Slideshow: Same Size as Category Squares on Mobile */ @media (max-width: 767px) { .engo-col-slider-section .engo-col-slide { flex: 0 0 100% !important; max-width: 100% !important; padding: 0 14px !important; box-sizing: border-box !important; } .engo-col-slider-section .engo-col-card { width: 100% !important; border-radius: 22px !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(10, 18, 36, 0.16) !important; } .engo-col-slider-section .engo-col-card__media { height: auto !important; aspect-ratio: 4 / 5.2 !important; aspect-ratio: auto !important; border-radius: 22px !important; } .engo-col-slider-section .engo-col-card__img { height: 100% !important; width: 100% !important; object-fit: cover !important; border-radius: 22px !important; } .engo-col-slider__track:not(.slick-initialized) .engo-col-slide { flex: 0 0 100% !important; max-width: 100% !important; } } /* 3. Hide Navigation Button (Circular Arrows) from Collection Slideshow */ .engo-col-arrow, .engo-col-arrow--prev, .engo-col-arrow--next, .engo-col-slider-section .engo-col-arrow, #EngoColPrev-our_collections_slider, #EngoColNext-our_collections_slider { display: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } /* 4. Fix Mobile Header Bar Semi-Transparency over Slideshow & in PWA App */ @media (max-width: 1199px) { header.menu-mobile, #mobileHeader, body.template-index header.menu-mobile, body.template-index #mobileHeader, body.template-index header.menu-mobile:not(.is-scrolled), .is-pwa-standalone header.menu-mobile, .is-pwa-standalone #mobileHeader { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important; opacity: 1 !important; } body.template-index header.menu-mobile:not(.is-scrolled) .header-logo img.engo-logo-dark, header.menu-mobile .header-logo img.engo-logo-dark { display: inline-block !important; } body.template-index header.menu-mobile:not(.is-scrolled) .header-logo img.engo-logo-light, header.menu-mobile .header-logo img.engo-logo-light { display: none !important; } body.template-index header.menu-mobile:not(.is-scrolled) .search-mobile, body.template-index header.menu-mobile:not(.is-scrolled) .cart-mobile, body.template-index header.menu-mobile:not(.is-scrolled) .menu-mobile-close { color: #0f172a !important; } body.template-index header.menu-mobile:not(.is-scrolled) .menu-mobile-close:before, body.template-index header.menu-mobile:not(.is-scrolled) .menu-mobile-close:after { background: #0f172a !important; } } /* Refined Mobile Product Card & Slider Rules */ @media (max-width: 767px) { /* Hide side arrows */ .section-product-v1 .engo-slider-arrow, .section-product-v1 .engo-slider-arrow--prev, .section-product-v1 .engo-slider-arrow--next, .section-product-v1 .slick-prev, .section-product-v1 .slick-next, .section-product-v1 .js-mobile-product-slider .slick-prev, .section-product-v1 .js-mobile-product-slider .slick-next { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; } /* Hide pill gender badge */ .section-product-v1 .engo-card-dept-wrap, .section-product-v1 .js-mobile-product-slider .engo-card-dept-wrap, .engo-gender-card .engo-card-dept-wrap { display: none !important; } /* Container padding */ .section-product-v1 .container-fluid, .section-product-v1 .my-container { padding-left: 12px !important; padding-right: 12px !important; } /* Product Card Styling */ .section-product-v1 .js-mobile-product-slider .product-item-v1 { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: min(calc(100vw - 28px), 440px) !important; margin: 0 auto !important; border-radius: 0 !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; border: none !important; padding-bottom: 0 !important; position: relative !important; } /* Product Image */ .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-image { display: block !important; width: 100% !important; border-radius: 16px !important; overflow: hidden !important; position: relative !important; background: #f8fafc !important; } /* Primary Product Photo on Mobile (NEVER show second/hover image) */ .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-image img.engo-card-img--main, .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-image img.engoj_img_main, .product-item-v1 .product-image img.engo-card-img--main, .product-item-v1 .product-image img.engoj_img_main { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1.15 !important; object-fit: cover !important; border-radius: 16px !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Forcefully Hide Second / Hover Image on Mobile */ .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-image img.engo-card-img--hover, .section-product-v1 .js-mobile-product-slider .product-item-v1 img.engo-card-img--hover, .product-item-v1 .product-image img.engo-card-img--hover, .product-item-v1 img.engo-card-img--hover, .product-item-v1 .engo-card-img--hover { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; position: absolute !important; } /* Prevent sticky touch hover from swapping to second image */ .product-item-v1:hover .engo-card-img--main, .product-item-v1 .product-image:hover .engo-card-img--main, .product-item-v1 .product-image:active .engo-card-img--main, .product-item-v1 .product-image:focus .engo-card-img--main { opacity: 1 !important; display: block !important; visibility: visible !important; } .product-item-v1:hover .engo-card-img--hover, .product-item-v1 .product-image:hover .engo-card-img--hover, .product-item-v1 .product-image:active .engo-card-img--hover, .product-item-v1 .product-image:focus .engo-card-img--hover { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Dots */ .section-product-v1 .js-mobile-product-slider .slick-dots { position: absolute !important; bottom: -4px !important; left: 0 !important; right: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; z-index: 2 !important; } } /* ========================================================================== Product Page: Balanced Horizontal Row under Product Gallery & Details ========================================================================== */ .engo-product-promise-row { margin-top: 28px !important; margin-bottom: 30px !important; display: flex !important; flex-wrap: wrap !important; row-gap: 20px !important; } .engo-product-promise-row .engo-promise-col-left, .engo-product-promise-row .engo-promise-col-right { display: flex !important; flex-direction: column !important; } .engo-product-promise-row .engo-delivery-estimator, .engo-product-promise-row .engo-luxury-atelier-box { margin-top: 0 !important; margin-bottom: 0 !important; height: 100% !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; border-radius: 18px !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.09) !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important; } .engo-product-promise-row .engo-delivery-estimator { padding: 18px 20px !important; justify-content: space-between !important; gap: 12px !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-head { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 10px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-loc { display: inline-flex !important; align-items: center !important; gap: 8px !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-pin { color: #b08d57 !important; display: inline-flex !important; align-items: center !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-label { font-size: 13.5px !important; font-weight: 600 !important; color: #0f172a !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(16, 185, 129, 0.09) !important; color: #065f46 !important; font-size: 12px !important; font-weight: 600 !important; padding: 5px 12px !important; border-radius: 999px !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-body { display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 6px 0 !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-row { display: flex !important; align-items: center !important; gap: 12px !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #f1f5f9 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #0f172a !important; font-size: 14px !important; flex-shrink: 0 !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-icon--bolt { background: #fef3c7 !important; color: #d97706 !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-info { font-size: 13px !important; line-height: 1.4 !important; color: #334155 !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-perks { margin-top: auto !important; padding-top: 14px !important; border-top: 1px solid rgba(15, 23, 42, 0.06) !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .engo-product-promise-row .engo-delivery-estimator .engo-perk-item { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11.5px !important; font-weight: 500 !important; color: #475569 !important; line-height: 1.25 !important; } .engo-product-promise-row .engo-delivery-estimator .engo-perk-item i { color: #b08d57 !important; font-size: 13px !important; flex-shrink: 0 !important; } .engo-product-promise-row .engo-luxury-atelier-box { overflow: hidden !important; } .engo-product-promise-row .engo-luxury-atelier-box .engo-atelier-badge-top { padding: 13px 20px !important; background: #0f172a !important; color: #ffffff !important; display: flex !important; align-items: center !important; gap: 8px !important; } .engo-product-promise-row .engo-luxury-atelier-box .engo-atelier-badge-text { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #ffffff !important; } .engo-product-promise-row .engo-luxury-atelier-box .engo-atelier-crown { color: #f59e0b !important; } .engo-product-promise-row .engo-luxury-atelier-box .engo-atelier-accordion { padding: 4px 16px !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .engo-product-promise-row .engo-luxury-atelier-box .engo-atelier-item { border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; } .engo-product-promise-row .engo-luxury-atelier-box .engo-atelier-item:last-child { border-bottom: none !important; } .engo-product-promise-row .engo-luxury-atelier-box .engo-atelier-summary { padding: 12px 4px !important; cursor: pointer !important; list-style: none !important; } .engo-product-promise-row .engo-luxury-atelier-box .engo-atelier-summary__title { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 13.5px !important; color: #0f172a !important; } .engo-product-promise-row .engo-luxury-atelier-box .engo-atelier-icon { color: #b08d57 !important; } @media (max-width: 991px) { .engo-product-promise-row { margin-top: 20px !important; margin-bottom: 20px !important; } .engo-product-promise-row .engo-delivery-estimator .engo-deliv-perks { grid-template-columns: 1fr !important; gap: 8px !important; } } /* ========================================================================== Product Page: World-Class Luxury & Apple iOS 27 Design Layout ========================================================================== */ /* 1. Breadcrumbs */ .wrap-bread-crumb { padding: 16px 0 20px; } .bread-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; } .bread-crumb a { color: #64748b; text-decoration: none; transition: color 0.2s ease; } .bread-crumb a:hover { color: #0f172a; } .bread-crumb i { font-style: normal; color: #cbd5e1; font-size: 11px; } .bread-crumb strong.active { color: #0f172a; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; } /* 2. Gallery Enhancements */ .detail-gallery { position: relative; } .detail-gallery .mid-wrapper { position: relative; border-radius: 18px; overflow: hidden; background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04); } .detail-gallery .mid img { border-radius: 18px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 992px) { .detail-gallery .mid:hover img { transform: scale(1.02); } } .detail-gallery .product-thumbnail-item img { border-radius: 12px; border: 2px solid transparent; transition: all 0.25s ease; background: #f8fafc; } .detail-gallery .product-thumbnail-item.slick-current img, .detail-gallery .product-thumbnail-item:hover img { border-color: #0f172a; opacity: 1; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); } /* Mobile Gallery Counter */ .engo-gallery-counter { position: absolute; bottom: 14px; right: 14px; z-index: 10; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff; font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); pointer-events: none; letter-spacing: 0.06em; } /* 3. Product Info Column Visual Hierarchy */ .detail-info { padding-left: 12px; } @media (max-width: 991px) { .detail-info { padding-left: 0; margin-top: 24px; } } .engo-dept-badge--signature { background: #0f172a !important; color: #ffffff !important; } .engo-dept-dot { width: 6px; height: 6px; border-radius: 50%; background: #b08d57; display: inline-block; } .detail-info .product-title { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; margin-top: 6px; margin-bottom: 10px; line-height: 1.25; } @media (max-width: 767px) { .detail-info .product-title { font-size: 22px; } } /* Price Row with Dynamic Savings Pill */ .product-price-wrap { margin-bottom: 14px; } .detail-info .product-price { font-size: 26px; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; } .detail-info .product-price-compare { font-size: 17px; font-weight: 500; color: #94a3b8; margin-left: 8px; } .engo-price-savings-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); color: #065f46; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; margin-left: 6px; } .engo-savings-dot { width: 5px; height: 5px; border-radius: 50%; background: #10b981; } /* 4. Quantity Stepper Capsule & Action Buttons - Fully Auto-Responsive */ .engo-atc-row { display: flex !important; align-items: center !important; gap: 12px !important; margin: 18px 0 !important; width: 100% !important; } .engo-qty-capsule { display: inline-flex !important; align-items: center !important; background: #f1f5f9 !important; border: 1px solid rgba(15, 23, 42, 0.09) !important; border-radius: 999px !important; height: 52px !important; padding: 4px !important; flex-shrink: 0 !important; } .engo-qty-btn { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 0 !important; background: #ffffff !important; color: #0f172a !important; font-size: 18px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .engo-qty-btn:hover { background: #0f172a !important; color: #ffffff !important; transform: scale(1.05) !important; } .engo-qty-val { width: 40px !important; text-align: center !important; border: 0 !important; background: transparent !important; font-size: 15px !important; font-weight: 700 !important; color: #0f172a !important; padding: 0 !important; user-select: none !important; } .engo-qty-val::-webkit-inner-spin-button, .engo-qty-val::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* Add to Cart CTA - Perfectly Centered, Never Wraps, Adapts to all Device Widths */ .detail-info .engoj-btn-addtocart#EngoMainAtcBtn, #AddToCartForm #EngoMainAtcBtn, #AddToCartForm .engoj-btn-addtocart, .detail-info .engo-atc-row .engoj-btn-addtocart, .detail-info .engo-atc-row button[type="submit"] { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 52px !important; min-height: 52px !important; max-height: none !important; line-height: 1.25 !important; border-radius: 999px !important; background: linear-gradient(135deg, #0b1118 0%, #172333 100%) !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 8px 24px rgba(11, 17, 24, 0.25) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 0 20px !important; white-space: nowrap !important; overflow: hidden !important; margin-top: 0 !important; cursor: pointer !important; } .detail-info .engoj-btn-addtocart#EngoMainAtcBtn span, #AddToCartForm #EngoMainAtcBtn span, .detail-info .engo-atc-row .engoj-btn-addtocart span { display: inline-block !important; white-space: nowrap !important; line-height: 1.25 !important; overflow: hidden !important; text-overflow: ellipsis !important; } .detail-info .engoj-btn-addtocart#EngoMainAtcBtn i, #AddToCartForm #EngoMainAtcBtn i, .detail-info .engo-atc-row .engoj-btn-addtocart i { flex-shrink: 0 !important; margin-right: 0 !important; font-size: 14px !important; } .detail-info .engoj-btn-addtocart#EngoMainAtcBtn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11, 17, 24, 0.35) !important; background: linear-gradient(135deg, #172333 0%, #0b1118 100%) !important; } .detail-info .engoj-btn-addtocart#EngoMainAtcBtn:active { transform: scale(0.98); } /* Responsive Scaling for Tablets and Phones */ @media (max-width: 767px) { .engo-atc-row { gap: 8px !important; margin: 14px 0 !important; } .engo-qty-capsule { height: 48px !important; padding: 3px !important; min-width: 108px !important; } .engo-qty-btn { width: 38px !important; height: 38px !important; font-size: 16px !important; } .engo-qty-val { width: 32px !important; font-size: 14px !important; } .detail-info .engoj-btn-addtocart#EngoMainAtcBtn, #AddToCartForm #EngoMainAtcBtn, #AddToCartForm .engoj-btn-addtocart, .detail-info .engo-atc-row .engoj-btn-addtocart, .detail-info .engo-atc-row button[type="submit"] { height: 48px !important; min-height: 48px !important; padding: 0 14px !important; font-size: clamp(11.5px, 3.2vw, 13.5px) !important; letter-spacing: 0.03em !important; gap: 6px !important; } .detail-info .engoj-btn-addtocart#EngoMainAtcBtn i, #AddToCartForm #EngoMainAtcBtn i { font-size: 13px !important; } } @media (max-width: 380px) { .engo-atc-row { gap: 6px !important; } .engo-qty-capsule { min-width: 98px !important; padding: 2px !important; } .engo-qty-btn { width: 34px !important; height: 34px !important; font-size: 15px !important; } .engo-qty-val { width: 26px !important; font-size: 13px !important; } .detail-info .engoj-btn-addtocart#EngoMainAtcBtn, #AddToCartForm #EngoMainAtcBtn, #AddToCartForm .engoj-btn-addtocart, .detail-info .engo-atc-row .engoj-btn-addtocart, .detail-info .engo-atc-row button[type="submit"] { padding: 0 8px !important; font-size: 11px !important; letter-spacing: 0.01em !important; gap: 4px !important; } .detail-info .engoj-btn-addtocart#EngoMainAtcBtn i, #AddToCartForm #EngoMainAtcBtn i { font-size: 11.5px !important; } } /* WhatsApp Instant Order Button */ .engo-wa-order-wrap { margin-bottom: 14px; } .engo-wa-order-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: 50px !important; border-radius: 999px !important; background: rgba(37, 211, 102, 0.08) !important; color: #128c7e !important; border: 1.5px solid rgba(37, 211, 102, 0.35) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-decoration: none !important; transition: all 0.25s ease !important; } .engo-wa-order-btn:hover { background: #25d366 !important; color: #ffffff !important; border-color: #25d366 !important; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3) !important; transform: translateY(-1px); } .engo-wa-order-btn i { font-size: 19px !important; } /* 5. Under-Photo Balanced Promise Row */ .engo-product-promise-row { margin-top: 36px !important; margin-bottom: 40px !important; row-gap: 24px !important; } .engo-product-promise-row .engo-delivery-estimator, .engo-product-promise-row .engo-luxury-atelier-box { border-radius: 20px !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important; background: #ffffff !important; overflow: hidden !important; } /* 6. Product Tabs: iOS Segmented Control Bar */ .detail-tabs.engo-tabs-elevated { margin-top: 48px; margin-bottom: 50px; } .engo-segmented-tabs { display: inline-flex; background: #f1f5f9; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 999px; padding: 5px; box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.03); } .engo-segmented-tabs .list-tag-detail { display: inline-flex; gap: 4px; } .engo-segmented-tabs .list-tag-detail li a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; color: #64748b !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .engo-segmented-tabs .list-tag-detail li.active a { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important; } .engo-segmented-tabs .list-tag-detail li a:hover:not(.active) { color: #0f172a !important; } .engo-tab-card { margin-top: 24px; border-radius: 22px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 10px 36px rgba(15, 23, 42, 0.03); padding: 34px 38px; } @media (max-width: 767px) { .engo-segmented-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; } .engo-segmented-tabs .list-tag-detail { width: 100%; justify-content: space-between; } .engo-segmented-tabs .list-tag-detail li a { padding: 8px 14px !important; font-size: 12px !important; } .engo-tab-card { padding: 22px 18px; border-radius: 18px; } } /* 7. Curated Selections & Related Products Section */ .engo-luxury-carousel-section { margin-top: 56px; margin-bottom: 50px; } .engo-sec-heading { margin-bottom: 30px; } .engo-sec-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #b08d57; margin-bottom: 6px; } .engo-sec-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; margin-bottom: 12px; } .engo-sec-divider { width: 44px; height: 2px; background: #b08d57; margin: 0 auto; border-radius: 2px; } .engo-product-grid-row { row-gap: 20px; } /* 8. Mobile Sticky Add to Cart Bar */ .engo-sticky-atc-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 990; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.08); padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(115%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .engo-sticky-atc-bar.is-visible { transform: translateY(0); pointer-events: auto; } .engo-sticky-atc-inner { display: flex; align-items: center; gap: 12px; } .engo-sticky-media { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: #f1f5f9; flex-shrink: 0; border: 1px solid rgba(15, 23, 42, 0.06); } .engo-sticky-thumb { width: 100%; height: 100%; object-fit: cover; } .engo-sticky-details { flex: 1; min-width: 0; } .engo-sticky-title { font-size: 13px; font-weight: 600; color: #0f172a; margin: 0 0 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .engo-sticky-price-row { display: flex; align-items: center; gap: 6px; } .engo-sticky-price { font-size: 14px; font-weight: 700; color: #0f172a; } .engo-sticky-compare { font-size: 12px; color: #94a3b8; } .engo-sticky-action { flex-shrink: 0; } .engo-sticky-btn { height: 42px; padding: 0 18px; border-radius: 999px; border: 0; background: #0f172a; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2); cursor: pointer; transition: transform 0.15s ease; } .engo-sticky-btn:active { transform: scale(0.96); } /* ========================================================================== Eye-Caring Luxury: Prominent High-Definition Product Cards ========================================================================== */ /* 1. Unified Single Card Border: Eliminates Duplicate Lines & Bottom White Gap */ .product-item-v1 .product-image, .product-item-v2 .product-image, .product-item-v3 .product-image { border-radius: 16px !important; border: 1px solid #e2e8f0 !important; /* Single authoritative border */ box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important; background: #ffffff !important; overflow: hidden !important; position: relative !important; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important; } /* Strictly neutralize nested inner media & outer wrappers to prevent double borders */ .product-item-v1 .engo-card-media, .product-item-v2 .engo-card-media, .product-item-v3 .engo-card-media, .product-item-v1 .product-mid { border: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } .product-item-v1, .product-item-v2, .product-item-v3, .section-product-v1 .js-mobile-product-slider .product-item-v1 { border: none !important; box-shadow: none !important; background: transparent !important; padding-bottom: 0 !important; } /* 2. REMOVE Specular Reflection & Shiny Overlays Completely */ .product-item-v1 .product-image::after, .product-item-v1 .engo-card-media::after, .product-item-v2 .product-image::after, .product-item-v3 .product-image::after { display: none !important; content: none !important; } /* 3. Focused Hover Elevation: Product stays prominent, sharp, and focused */ .product-item-v1:hover .product-image, .product-item-v2:hover .product-image, .product-item-v3:hover .product-image { border-color: #cbd5e1 !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04) !important; transform: translateY(-4px) !important; } /* 4. Subtle Studio Contrast Tint Behind Product Photos for Maximum Focus */ .product-item-v1 .product-image img, .product-item-v1 .engo-card-media img { border-radius: 13px !important; background: #f8fafc !important; /* Elegant studio background to make apparel cutouts pop */ } /* 5. Color Splash Aura Safeguards (Disabled cleanly) */ body:not(.engo-has-card-splash) .engo-gender-card--boys:hover .product-image, body:not(.engo-has-card-splash) .engo-gender-card--girls:hover .product-image, body:not(.engo-has-card-splash) .engo-gender-card--men:hover .product-image, body:not(.engo-has-card-splash) .engo-gender-card--boys:hover .engo-card-media, body:not(.engo-has-card-splash) .engo-gender-card--girls:hover .engo-card-media, body:not(.engo-has-card-splash) .engo-gender-card--men:hover .engo-card-media, body:not(.engo-has-card-splash) .product-item-v1:hover .product-image, body:not(.engo-has-card-splash) .product-item-v1 .product-image { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important; } body:not(.engo-has-card-splash) .product-item-v1:hover .product-image { border-color: #cbd5e1 !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04) !important; } /* 3. Eye-Caring Department Badges on Cards */ .engo-card-dept-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .engo-card-dept-tag--boys { background: rgba(30, 58, 95, 0.06) !important; color: #1e3a5f !important; border: 1px solid rgba(30, 58, 95, 0.16) !important; } .engo-card-dept-tag--boys .engo-card-dept-dot { background: #1e3a5f !important; box-shadow: none !important; } .engo-card-dept-tag--girls { background: rgba(159, 18, 57, 0.05) !important; color: #881337 !important; border: 1px solid rgba(159, 18, 57, 0.16) !important; } .engo-card-dept-tag--girls .engo-card-dept-dot { background: #881337 !important; box-shadow: none !important; } .engo-card-dept-tag--men { background: rgba(15, 23, 42, 0.05) !important; color: #0f172a !important; border: 1px solid rgba(176, 141, 87, 0.3) !important; } .engo-card-dept-tag--men .engo-card-dept-dot { background: #b08d57 !important; box-shadow: none !important; } /* 4. Eye-Caring Typography & Price Palette */ .product-item-v1 .product-name a { color: #1e293b !important; font-weight: 600 !important; transition: color 0.2s ease; } .product-item-v1 .product-name a:hover { color: #b08d57 !important; } .product-item-v1 .product-price ins { color: #0f172a !important; font-weight: 700 !important; } .product-item-v1 .product-price del { color: #64748b !important; opacity: 0.8 !important; } /* 5. Action Icons on Card: Crisp Modern Frosted Glass */ .product-item-v1 .product-icon .add-to-cart-button, .product-item-v1 .product-icon .quick-view, .product-item-v1 .product-icon .wish-list { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(226, 232, 240, 0.85) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 4px 12px rgba(15, 23, 42, 0.08) !important; color: #1e293b !important; } .product-item-v1 .product-icon .add-to-cart-button:hover, .product-item-v1 .product-icon .quick-view:hover, .product-item-v1 .product-icon .wish-list:hover { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; } /* 6. Eye-Caring Theme Global Neutrals */ body { color: #1e293b; -webkit-font-smoothing: antialiased; } /* ========================================================================== Segmented Product Tabs: Flawless Contrast, No Text-Background Merge ========================================================================== */ .detail-tabs .engo-segmented-tabs, .engo-segmented-tabs { display: inline-flex !important; background: #f1f5f9 !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 999px !important; padding: 5px !important; box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.03) !important; } .detail-tabs .engo-segmented-tabs .list-tag-detail, .engo-segmented-tabs .list-tag-detail { display: inline-flex !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Inactive Tab Base: Soft slate text, transparent background */ .detail-tabs .engo-segmented-tabs .list-tag-detail li a, .engo-segmented-tabs .list-tag-detail li a { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 10px 24px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; color: #64748b !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; transition: all 0.22s ease !important; } .detail-tabs .engo-segmented-tabs .list-tag-detail li a i, .detail-tabs .engo-segmented-tabs .list-tag-detail li a span, .engo-segmented-tabs .list-tag-detail li a i, .engo-segmented-tabs .list-tag-detail li a span { color: #64748b !important; } /* Inactive Tab Hover: Soft satin white glass with high-contrast obsidian text (NEVER dark on dark) */ .detail-tabs .engo-segmented-tabs .list-tag-detail li:not(.active) a:hover, .detail-tabs.engo-tabs-elevated .list-tag-detail li:not(.active) a:hover, .engo-segmented-tabs .list-tag-detail li:not(.active) a:hover { background: rgba(255, 255, 255, 0.85) !important; color: #0f172a !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important; } .detail-tabs .engo-segmented-tabs .list-tag-detail li:not(.active) a:hover i, .detail-tabs .engo-segmented-tabs .list-tag-detail li:not(.active) a:hover span, .engo-segmented-tabs .list-tag-detail li:not(.active) a:hover i, .engo-segmented-tabs .list-tag-detail li:not(.active) a:hover span { color: #0f172a !important; } /* Active Tab: Pure white liquid pill with dark text and subtle drop-shadow */ .detail-tabs .engo-segmented-tabs .list-tag-detail li.active a, .detail-tabs.engo-tabs-elevated .list-tag-detail li.active a, .engo-segmented-tabs .list-tag-detail li.active a, .detail-tabs .engo-segmented-tabs .list-tag-detail li.active a:hover, .detail-tabs.engo-tabs-elevated .list-tag-detail li.active a:hover, .engo-segmented-tabs .list-tag-detail li.active a:hover { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.09) !important; } .detail-tabs .engo-segmented-tabs .list-tag-detail li.active a i, .detail-tabs .engo-segmented-tabs .list-tag-detail li.active a span, .engo-segmented-tabs .list-tag-detail li.active a i, .engo-segmented-tabs .list-tag-detail li.active a span, .detail-tabs .engo-segmented-tabs .list-tag-detail li.active a:hover i, .detail-tabs .engo-segmented-tabs .list-tag-detail li.active a:hover span, .engo-segmented-tabs .list-tag-detail li.active a:hover i, .engo-segmented-tabs .list-tag-detail li.active a:hover span { color: #0f172a !important; } /* General Button Hover Contrast Safeguards */ .shop-button:hover, .brand-btn:hover, .btn-primary:hover, .enj-add-to-cart-btn:hover { color: #ffffff !important; } .shop-button:hover i, .shop-button:hover span, .brand-btn:hover i, .brand-btn:hover span, .btn-primary:hover i, .btn-primary:hover span, .enj-add-to-cart-btn:hover i, .enj-add-to-cart-btn:hover span { color: #ffffff !important; } /* ========================================================================== Core Web Vitals LCP & CLS Acceleration ========================================================================== */ /* 1. Prevent Hero Slideshow Layout Shift & Multi-Image Network Contention */ .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1:not(.slick-initialized) { min-height: clamp(480px, 44vw, 680px); position: relative; overflow: hidden; background: #0f172a; } .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1:not(.slick-initialized) .slideshow-item:not(:first-child) { display: none !important; } .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1:not(.slick-initialized) .slideshow-item:first-child { display: block !important; width: 100% !important; height: clamp(480px, 44vw, 680px) !important; } .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1:not(.slick-initialized) .slideshow-item:first-child img { width: 100% !important; height: 100% !important; object-fit: cover !important; } @media (max-width: 767px) { .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1:not(.slick-initialized), .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1:not(.slick-initialized) .slideshow-item:first-child { height: clamp(540px, 78vh, 680px) !important; min-height: clamp(540px, 78vh, 680px) !important; } .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1:not(.slick-initialized) .slideshow-item:first-child img { object-position: 68% 18% !important; } } /* 2. Prevent Product Page Gallery Layout Shift (CLS = 0) */ .detail-gallery .mid:not(.slick-initialized) { aspect-ratio: 1 / 1 !important; overflow: hidden !important; position: relative !important; background: #f8fafc !important; border-radius: 16px !important; } .detail-gallery .mid:not(.slick-initialized) .engo-main-slide:not(:first-child) { display: none !important; } .detail-gallery .mid:not(.slick-initialized) .engo-main-slide:first-child { display: block !important; width: 100% !important; height: 100% !important; } .detail-gallery .mid:not(.slick-initialized) .engo-main-slide:first-child img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ========================================================================== Product Page Pills: WhatsApp & Size Guide Side-by-Side Horizontal Row ========================================================================== */ .engo-product-actions-pills-row { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 14px 0 16px !important; box-sizing: border-box !important; } .engo-product-actions-pills-row .engo-pills-item { flex: 1 1 50% !important; min-width: 0 !important; } .engo-pill-action-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 46px !important; padding: 0 14px !important; border-radius: 999px !important; font-size: clamp(10.5px, 2.9vw, 12px) !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; text-decoration: none !important; box-sizing: border-box !important; cursor: pointer !important; white-space: nowrap !important; transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important; } .engo-pill-whatsapp { background: #ecfdf5 !important; border: 1.5px solid #10b981 !important; color: #065f46 !important; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.14), 0 1px 0 rgba(255, 255, 255, 0.8) inset !important; } .engo-pill-whatsapp i { font-size: 17px !important; color: #10b981 !important; transition: color 0.2s ease !important; } .engo-pill-whatsapp:hover { background: #10b981 !important; border-color: #10b981 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3) !important; } .engo-pill-whatsapp:hover i { color: #ffffff !important; } .engo-pill-sizeguide { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9) inset !important; } .engo-pill-sizeguide svg { color: #0f172a !important; stroke: #0f172a !important; transition: all 0.2s ease !important; } .engo-pill-sizeguide:hover { background: #0f172a !important; border-color: #0f172a !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22) !important; } .engo-pill-sizeguide:hover svg { color: #ffffff !important; stroke: #ffffff !important; } /* Eliminate duplicate Timber minus quantity button */ .quantity .js-qty, .js-qty, .js-qty__adjust { display: none !important; } /* ========================================================================== Product Tabs: Fix Giant Egg Shape on Mobile & App ========================================================================== */ @media (max-width: 767px) { .detail-tabs.engo-tabs-elevated { margin-top: 24px !important; margin-bottom: 28px !important; } .detail-tabs .detail-tab-title { margin-bottom: 0 !important; border-bottom: 0 !important; padding-bottom: 0 !important; } .detail-tabs .engo-segmented-tabs, .engo-segmented-tabs { display: flex !important; width: 100% !important; border-radius: 14px !important; padding: 4px !important; background: #f1f5f9 !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.03) !important; box-sizing: border-box !important; } .detail-tabs .engo-segmented-tabs .list-tag-detail, .detail-tabs .list-tag-detail, .engo-segmented-tabs .list-tag-detail { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; justify-content: stretch !important; } .detail-tabs .engo-segmented-tabs .list-tag-detail li, .detail-tabs .list-tag-detail li, .engo-segmented-tabs .list-tag-detail li { flex: 1 1 0 !important; min-width: 0 !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .detail-tabs .engo-segmented-tabs .list-tag-detail li a, .detail-tabs .list-tag-detail li a, .engo-segmented-tabs .list-tag-detail li a { display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; height: 40px !important; padding: 0 4px !important; border-radius: 10px !important; font-size: clamp(10px, 2.7vw, 11.5px) !important; font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; white-space: nowrap !important; text-decoration: none !important; box-sizing: border-box !important; } .detail-tabs .engo-segmented-tabs .list-tag-detail li a i, .detail-tabs .list-tag-detail li a i, .engo-segmented-tabs .list-tag-detail li a i { font-size: 11px !important; margin-right: 2px !important; } .detail-tabs .engo-tab-card, .engo-tab-card { margin-top: 14px !important; border-radius: 16px !important; padding: 20px 16px !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; background: #ffffff !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important; } } /* Hero Text-Only Floating Layout: NO box/card around text, NO dark background, NO border, NO backdrop blur */ .section-slideshow-v1.engo-hero-v1 .slideshow-content.engo-hero-content.engo-hero-editorial, .section-slideshow-v1.engo-hero-v1 .slideshow-content, .slideshow-content.engo-hero-editorial, .slideshow-content { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; border-radius: 0 !important; } @media (max-width: 767px) { .section-slideshow-v1.engo-hero-v1 .engo-hero-actions, .section-slideshow-v1.engo-hero-v1 .button-name.engo-hero-btn-primary, .section-slideshow-v1.engo-hero-v1 .engo-hero-btn-ghost, .section-slideshow-v1.engo-hero-v1 .button-name { display: none !important; } .section-slideshow-v1.engo-hero-v1 .slideshow-item, .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1:not(.slick-initialized), .section-slideshow-v1.engo-hero-v1 .js-slideshow-v1:not(.slick-initialized) .slideshow-item:first-child { height: clamp(460px, 68vh, 560px) !important; min-height: clamp(460px, 68vh, 560px) !important; max-height: 70vh !important; aspect-ratio: auto !important; } } .engo-hero-picture { display: block !important; width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; } /* ========================================================================== 1. MOBILE HERO SLIDESHOW: HIDE DOT & SMALL PILL UNDER TEXT ========================================================================== */ @media (max-width: 767px) { .section-slideshow-v1.engo-hero-v1 .slick-dots, .section-slideshow-v1 .slick-dots, .engo-slideshow-wrap .slick-dots { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ========================================================================== 2. COLLECTION PRODUCT CARDS: REDUCE GAP (COMPACT LUXURY GRID) ========================================================================== */ .content-collection-page .product-grid-view .js-col-grid.row, .product-grid-view .js-col-grid.row { margin-left: -8px !important; margin-right: -8px !important; } .content-collection-page .product-grid-view .js-col-grid .js-change-col, .product-grid-view .js-col-grid .js-change-col { padding-left: 8px !important; padding-right: 8px !important; } .content-collection-page .product-grid-view .js-col-grid .js-change-col > .col-12, .product-grid-view .js-col-grid .js-change-col > .col-12 { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } .content-collection-page .product-grid-view .js-col-grid .product-item-v1, .product-grid-view .js-col-grid .product-item-v1 { padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 24px !important; width: 100% !important; } .content-collection-page .product-grid-view .js-col-grid .product-item-v1 .product, .product-grid-view .js-col-grid .product-item-v1 .product, .content-collection-page .product-grid-view .js-col-grid .product-item-v1 .product-image, .product-grid-view .js-col-grid .product-item-v1 .product-image { width: 100% !important; } @media (max-width: 767px) { .content-collection-page .product-grid-view .js-col-grid.row, .product-grid-view .js-col-grid.row { margin-left: -5px !important; margin-right: -5px !important; } .content-collection-page .product-grid-view .js-col-grid .js-change-col, .product-grid-view .js-col-grid .js-change-col { padding-left: 5px !important; padding-right: 5px !important; } .content-collection-page .product-grid-view .js-col-grid .product-item-v1, .product-grid-view .js-col-grid .product-item-v1 { margin-bottom: 16px !important; } } /* Symmetrical rounded bottom corners for collection slideshow on mobile view homepage */ @media (max-width: 767px) { .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-image, .section-product-v1 .js-mobile-product-slider .product-item-v1 .product-image img, .section-product-v1 .js-mobile-product-slider .product-item-v1 .engo-card-media, .section-product-v1 .js-mobile-product-slider .product-item-v1 .engo-card-img, .section-product-v1 .js-mobile-product-slider .product-item-v1 .engo-card-link { border-radius: 16px !important; overflow: hidden !important; } } /* ========================================================== Apple / Luxury Grade Open Animations for Quick View & Added-to-Cart ========================================================== */ @keyframes engoLuxuryOverlayIn { 0% { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); } 100% { opacity: 1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } } @keyframes engoLuxuryAtcPop { 0% { opacity: 0; transform: translateY(28px) scale(0.92); filter: blur(4px); } 55% { filter: blur(0px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); } } @keyframes engoLuxuryQvCardIn { 0% { opacity: 0; transform: translateY(32px) scale(0.94); filter: blur(4px); } 55% { filter: blur(0px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); } } @keyframes engoLuxuryQvCardInMobile { 0% { opacity: 0; transform: translateY(48px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes engoLoaderPop { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } /* Added-to-Cart Confirmation Animation */ .product-popup.engo-popup.active .overlay, .product-popup.active .overlay { animation: engoLuxuryOverlayIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } .product-popup.engo-popup.active .content, .product-popup.active .content, .product-popup.engo-popup[style*="display: block"] .content { animation: engoLuxuryAtcPop 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; will-change: transform, opacity; } /* Quick View Modal Animation */ .quickview-product.tshopify-popup.active .overlay, .quickview-product.active .overlay { animation: engoLuxuryOverlayIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } .quickview-product.active .content.product-quickview, .quickview-product.tshopify-popup.active .content.product-quickview { animation: engoLuxuryQvCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; will-change: transform, opacity; } @media (max-width: 767px) { .quickview-product.active .content.product-quickview, .quickview-product.tshopify-popup.active .content.product-quickview { animation: engoLuxuryQvCardInMobile 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } } /* Luxury Glass Spinner for Loading State */ .loading.tshopify-popup { position: fixed !important; inset: 0 !important; z-index: 100001 !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0; visibility: hidden; transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease !important; pointer-events: none !important; } .loading.tshopify-popup.active { opacity: 1 !important; visibility: visible !important; pointer-events: all !important; } .loading.tshopify-popup .overlay { position: fixed !important; inset: 0 !important; background: rgba(11, 17, 24, 0.38) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .loading.tshopify-popup .loader { position: relative !important; z-index: 2 !important; background: #ffffff !important; padding: 16px !important; border-radius: 50% !important; width: 60px !important; height: 60px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 20px 48px rgba(11, 17, 24, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06) !important; animation: engoLoaderPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } .loading.tshopify-popup .loader svg { width: 28px !important; height: 28px !important; display: block !important; } .loading.tshopify-popup .loader svg path { fill: #0b1118 !important; } /* ========================================================== Comprehensive Bulletproof Quick View Modal Display & Stacking ========================================================== */ /* Inactive state: completely hidden, zero footprint, non-blocking */ .quickview-product.tshopify-popup:not(.active), .quickview-product:not(.active) { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; z-index: -1 !important; position: fixed !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } /* Active state: centered fixed viewport container on ALL screens (desktop & mobile) */ .quickview-product.tshopify-popup.active, .quickview-product.active { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; pointer-events: all !important; z-index: 100000 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 20px 16px !important; box-sizing: border-box !important; } /* Dark blur backdrop overlay */ .quickview-product .overlay, .quickview-product.active .overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 1 !important; background: rgba(11, 17, 24, 0.6) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; cursor: pointer !important; } /* Modal Card: sits on z-index 2 above overlay, always visible & centered */ .quickview-product .content.product-quickview, .quickview-product .content { position: relative !important; z-index: 2 !important; max-width: 900px !important; width: calc(100% - 24px) !important; max-height: 90vh !important; max-height: 90dvh !important; overflow-y: auto !important; overflow-x: hidden !important; margin: auto !important; padding: 28px !important; border-radius: 28px !important; background: #ffffff !important; border: 1px solid rgba(212, 175, 55, 0.35) !important; box-shadow: 0 32px 84px -12px rgba(11, 17, 24, 0.4) !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; display: block !important; } /* Clean, reliable spring entrance animation without compositing bugs */ @keyframes engoQvSpringIn { 0% { opacity: 0; transform: translateY(22px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .quickview-product.active .content.product-quickview { animation: engoQvSpringIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } @media (max-width: 767px) { .quickview-product .content.product-quickview, .quickview-product .content { max-width: 440px !important; width: 100% !important; padding: 20px 16px !important; border-radius: 24px !important; } } /* Auto-Add-to-Cart Button Micro-Feedback */ .engo-card-atc-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; background: transparent !important; border: 0 !important; cursor: pointer !important; color: inherit !important; padding: 0 !important; } .engo-card-atc-btn:active { transform: scale(0.92) !important; } .engo-card-atc-btn i.fa-check { color: #10b981 !important; } /* ========================================================================== Category Squares: Compact Frosted Glass Panel (2026-11-03) ========================================================================== */ .engo-cat-squares .engo-cat-square__content { padding: 12px !important; } .engo-cat-squares .engo-cat-square__glass { width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 10px 18px 12px !important; border-radius: 18px !important; border-width: 1px !important; transform: none !important; } .engo-cat-squares .engo-cat-square__sub { font-size: 10px !important; margin-bottom: 2px !important; } .engo-cat-squares .engo-cat-square__title { font-size: clamp(18px, 1.9vw, 26px) !important; margin: 0 0 8px !important; } .engo-cat-squares .engo-cat-square__btn { padding: 6px 14px !important; font-size: 10.5px !important; } @media (max-width: 767px) { .engo-cat-squares .engo-cat-square__content { padding: 10px !important; } .engo-cat-squares .engo-cat-square__glass { max-width: none !important; padding: 10px 16px 12px !important; border-radius: 16px !important; } .engo-cat-squares .engo-cat-square__title { font-size: 20px !important; margin: 0 0 6px !important; } } /* ========================================================================== Category Squares: Gender-Specific Color Themes (Men / Boy / Girl) ========================================================================== */ /* --- 1. MEN'S: Warm Bronze / Cognac / Gold --- */ .engo-cat-square--men .engo-cat-square__sub, .engo-cat-square:nth-child(1) .engo-cat-square__sub { color: #f3d59b !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important; } .engo-cat-square--men .engo-cat-square__glass, .engo-cat-square:nth-child(1) .engo-cat-square__glass { background: rgba(22, 18, 14, 0.42) !important; border-color: rgba(243, 213, 155, 0.45) !important; box-shadow: 0 12px 32px rgba(10, 14, 24, 0.32), 0 0 22px rgba(176, 141, 87, 0.18) !important; } .engo-cat-square--men .engo-cat-square__btn, .engo-cat-square:nth-child(1) .engo-cat-square__btn { background: #b08d57 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 4px 12px rgba(176, 141, 87, 0.3) !important; } .engo-cat-square--men .engo-cat-square__overlay, .engo-cat-square:nth-child(1) .engo-cat-square__overlay { background: linear-gradient(180deg, rgba(12, 20, 38, 0) 35%, rgba(26, 18, 12, 0.78) 100%) !important; } .engo-cat-square--men:hover .engo-cat-square__glass, .engo-cat-square:nth-child(1):hover .engo-cat-square__glass { background: rgba(28, 22, 16, 0.55) !important; border-color: rgba(243, 213, 155, 0.75) !important; box-shadow: 0 16px 40px rgba(10, 14, 24, 0.4), 0 0 28px rgba(176, 141, 87, 0.32) !important; } .engo-cat-square--men:hover .engo-cat-square__btn, .engo-cat-square:nth-child(1):hover .engo-cat-square__btn { background: #92713d !important; color: #ffffff !important; transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 6px 16px rgba(176, 141, 87, 0.45) !important; } /* --- 2. BOY'S: Cool Cobalt / Sky Blue --- */ .engo-cat-square--boys .engo-cat-square__sub, .engo-cat-square:nth-child(2) .engo-cat-square__sub { color: #38bdf8 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important; } .engo-cat-square--boys .engo-cat-square__glass, .engo-cat-square:nth-child(2) .engo-cat-square__glass { background: rgba(12, 22, 38, 0.45) !important; border-color: rgba(56, 189, 248, 0.45) !important; box-shadow: 0 12px 32px rgba(10, 14, 24, 0.32), 0 0 22px rgba(37, 99, 235, 0.22) !important; } .engo-cat-square--boys .engo-cat-square__btn, .engo-cat-square:nth-child(2) .engo-cat-square__btn { background: #2563eb !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important; } .engo-cat-square--boys .engo-cat-square__overlay, .engo-cat-square:nth-child(2) .engo-cat-square__overlay { background: linear-gradient(180deg, rgba(12, 20, 38, 0) 35%, rgba(10, 24, 48, 0.8) 100%) !important; } .engo-cat-square--boys:hover .engo-cat-square__glass, .engo-cat-square:nth-child(2):hover .engo-cat-square__glass { background: rgba(16, 30, 52, 0.58) !important; border-color: rgba(56, 189, 248, 0.75) !important; box-shadow: 0 16px 40px rgba(10, 14, 24, 0.4), 0 0 28px rgba(37, 99, 235, 0.38) !important; } .engo-cat-square--boys:hover .engo-cat-square__btn, .engo-cat-square:nth-child(2):hover .engo-cat-square__btn { background: #1d4ed8 !important; color: #ffffff !important; transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5) !important; } /* --- 3. GIRL'S: Radiant Peony / Blossom Rose Pink --- */ .engo-cat-square--girls .engo-cat-square__sub, .engo-cat-square:nth-child(3) .engo-cat-square__sub { color: #f472b6 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important; } .engo-cat-square--girls .engo-cat-square__glass, .engo-cat-square:nth-child(3) .engo-cat-square__glass { background: rgba(38, 14, 26, 0.45) !important; border-color: rgba(244, 114, 182, 0.45) !important; box-shadow: 0 12px 32px rgba(10, 14, 24, 0.32), 0 0 22px rgba(219, 39, 119, 0.22) !important; } .engo-cat-square--girls .engo-cat-square__btn, .engo-cat-square:nth-child(3) .engo-cat-square__btn { background: #db2777 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: 0 4px 12px rgba(219, 39, 119, 0.35) !important; } .engo-cat-square--girls .engo-cat-square__overlay, .engo-cat-square:nth-child(3) .engo-cat-square__overlay { background: linear-gradient(180deg, rgba(12, 20, 38, 0) 35%, rgba(38, 12, 26, 0.8) 100%) !important; } .engo-cat-square--girls:hover .engo-cat-square__glass, .engo-cat-square:nth-child(3):hover .engo-cat-square__glass { background: rgba(48, 18, 34, 0.58) !important; border-color: rgba(244, 114, 182, 0.75) !important; box-shadow: 0 16px 40px rgba(10, 14, 24, 0.4), 0 0 28px rgba(219, 39, 119, 0.38) !important; } .engo-cat-square--girls:hover .engo-cat-square__btn, .engo-cat-square:nth-child(3):hover .engo-cat-square__btn { background: #be185d !important; color: #ffffff !important; transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 6px 16px rgba(219, 39, 119, 0.5) !important; } /* Ensure mobile buttons and accents preserve gender colors */ @media (max-width: 767px) { .engo-cat-square--men .engo-cat-square__btn, .engo-cat-square:nth-child(1) .engo-cat-square__btn { background: #b08d57 !important; color: #ffffff !important; } .engo-cat-square--boys .engo-cat-square__btn, .engo-cat-square:nth-child(2) .engo-cat-square__btn { background: #2563eb !important; color: #ffffff !important; } .engo-cat-square--girls .engo-cat-square__btn, .engo-cat-square:nth-child(3) .engo-cat-square__btn { background: #db2777 !important; color: #ffffff !important; } } /* ========================================================================== Product Page: Seamless Add-to-Cart Feedback (No Popup Modal) ========================================================================== */ body.template-product .product-popup, body[class*="product"] .product-popup { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } #EngoMainAtcBtn.is-success, .engoj-btn-addtocart.is-success, #EngoStickyBtn.is-success, .engo-sticky-atc__btn.is-success { background: #10b981 !important; border-color: #10b981 !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4) !important; transform: translateY(-1px) !important; transition: all 0.25s ease !important; } #EngoMainAtcBtn.is-success i, .engoj-btn-addtocart.is-success i, #EngoStickyBtn.is-success i, .engo-sticky-atc__btn.is-success i { color: #ffffff !important; margin-right: 6px !important; } #EngoMainAtcBtn.is-adding, .engoj-btn-addtocart.is-adding, #EngoStickyBtn.is-adding, .engo-sticky-atc__btn.is-adding { opacity: 0.85 !important; pointer-events: none !important; } @keyframes engoCartPulse { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } } .engo-cart-bump { animation: engoCartPulse 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } /* ========================================================================== Header Cart Popover: Proceed to Checkout & Review Bag Capsule Buttons Fix ========================================================================== */ .header-cart-content .actions, .js-minicart-content .actions, .subtotal-actions .actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; } .header-cart-content .actions .button-viewcart, .header-cart-content .actions .button-checkout, .js-minicart-content .actions .button-viewcart, .js-minicart-content .actions .button-checkout, .subtotal-actions .actions .button-viewcart, .subtotal-actions .actions .button-checkout { width: 100% !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; line-height: 1.15 !important; padding: 0 10px !important; margin: 0 !important; border-radius: 999px !important; font-weight: 700 !important; text-transform: uppercase !important; text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; text-decoration: none !important; overflow: hidden !important; white-space: nowrap !important; transition: all .25s var(--ease-spring) !important; } .header-cart-content .actions .button-viewcart, .js-minicart-content .actions .button-viewcart, .subtotal-actions .actions .button-viewcart { font-size: 11px !important; letter-spacing: .04em !important; background: rgba(15, 23, 42, .07) !important; color: #0f172a !important; border: 1.5px solid rgba(15, 23, 42, .18) !important; } .header-cart-content .actions .button-viewcart:hover, .js-minicart-content .actions .button-viewcart:hover, .subtotal-actions .actions .button-viewcart:hover { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; } .header-cart-content .actions .button-checkout, .js-minicart-content .actions .button-checkout, .subtotal-actions .actions .button-checkout { font-size: 10.5px !important; letter-spacing: .02em !important; padding: 0 8px !important; background: linear-gradient(180deg, #1e293b, #0f172a) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, .2) !important; box-shadow: 0 8px 20px rgba(15, 23, 42, .25) !important; } .header-cart-content .actions .button-checkout:hover, .js-minicart-content .actions .button-checkout:hover, .subtotal-actions .actions .button-checkout:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(15, 23, 42, .32) !important; color: #ffffff !important; } @media (max-width: 380px) { .header-cart-content .actions .button-checkout, .js-minicart-content .actions .button-checkout, .subtotal-actions .actions .button-checkout { font-size: 9.5px !important; letter-spacing: 0 !important; padding: 0 4px !important; } .header-cart-content .actions .button-viewcart, .js-minicart-content .actions .button-viewcart, .subtotal-actions .actions .button-viewcart { font-size: 10px !important; letter-spacing: .02em !important; padding: 0 4px !important; } }