/* ================================================ GLOBAL — Horizontal overflow / scrollbar fix Desktop: scrollbar-gutter: stable eliminates 15px body vs viewport width mismatch. Mobile: overflow-x: hidden clamps any element bleeding past viewport (product rows etc). ================================================ */ html { overflow-x: hidden !important; scrollbar-gutter: stable !important; } body { overflow-x: hidden !important; width: 100% !important; } /* ================================================ END — Horizontal overflow fix ================================================ */ /* ================================================ SOCIAL MEDIA FLOATER v3: WhatsApp + Call only, vertical stack, bottom-right corner, desktop only (768px+). Call icon built and appended by footer JS. FB / Instagram / YouTube / LinkedIn hidden. Viber removed from Zoho backend — not in DOM. Colours: WhatsApp #25D366 | Call #2563eb Wrapper card border/shadow reset included. ================================================ */ /* ---- Hidden by default (mobile) ---- */ .zpsocialicon-floater { display: none !important; } @media (min-width: 768px) { /* ---- Floater anchor: fixed bottom-right ---- */ .zpsocialicon-floater { display: block !important; position: fixed !important; bottom: 24px !important; right: 20px !important; top: auto !important; left: auto !important; transform: none !important; z-index: 9999 !important; background: none !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 !important; } /* ---- Strip Zoho card styling from all wrappers ---- */ .zpsocialicon-floater .theme-socialicon-parent, .zpsocialicon-floater .theme-scoialicon-inner-parent { background: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important; } /* ---- Outer wrapper: vertical column ---- */ .theme-socialicon-parent { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } /* ---- Icon list: vertical, gap between circles ---- */ .theme-scoialicon-inner-parent { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ---- Hide: FB, Instagram, YouTube, LinkedIn ---- */ .zpsocialicon-floater .theme-socialicon-list:has(.theme-facebook-container), .zpsocialicon-floater .theme-socialicon-list:has(.theme-instagram-container), .zpsocialicon-floater .theme-socialicon-list:has(.theme-youtube-container), .zpsocialicon-floater .theme-socialicon-list:has(.theme-linkedin-container) { display: none !important; } /* ---- Circular base: WhatsApp (existing Zoho li) ---- */ .zpsocialicon-floater .theme-scoialicon-inner-parent .theme-socialicon-list a { display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; text-decoration: none !important; flex-shrink: 0 !important; border: none !important; outline: none !important; } .zpsocialicon-floater .theme-scoialicon-inner-parent .theme-socialicon-list a:hover { transform: scale(1.12) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30) !important; } /* ---- WhatsApp: brand green ---- */ .zpsocialicon-floater .theme-whatsapp-container { background-color: #25D366 !important; } /* WhatsApp SVG: outer bubble stays transparent, inner handset icon turns white. Set all paths white first, then restore the transparent presentation-attribute path. */ .zpsocialicon-floater .theme-whatsapp-container .zpsocialprofile path { fill: #ffffff !important; } .zpsocialicon-floater .theme-whatsapp-container .zpsocialprofile path[fill="transparent"] { fill: transparent !important; } /* WhatsApp SVG size */ .zpsocialicon-floater .theme-whatsapp-container .zpsocialprofile { width: 28px !important; height: 28px !important; } /* ---- Call button li: JS-injected ---- */ .zpsocialicon-floater .zw-call-floater-li { display: flex !important; align-items: center !important; justify-content: center !important; list-style: none !important; background: none !important; border: none !important; box-shadow: none !important; } /* ---- Call button anchor ---- */ .zpsocialicon-floater .zw-call-floater-li a.zw-call-floater-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; background-color: #2563eb !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; text-decoration: none !important; flex-shrink: 0 !important; border: none !important; outline: none !important; } .zpsocialicon-floater .zw-call-floater-li a.zw-call-floater-btn:hover { transform: scale(1.12) !important; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.40) !important; } /* Call SVG: all paths white, no stroke bleed. viewBox is 512x513.5 (topbar icon dimensions) so explicit sizing is mandatory. */ .zpsocialicon-floater .zw-call-floater-btn svg { width: 26px !important; height: 26px !important; display: block !important; } .zpsocialicon-floater .zw-call-floater-btn svg path { fill: #ffffff !important; stroke: none !important; } } /* ================================================ END — SOCIAL MEDIA FLOATER ================================================ */ /* ================================================ DESKTOP — Navigation Bar ================================================ */ .theme-header.zpheader-style-navigation-07 { background-color: #003366 !important; } .theme-header.zpheader-style-navigation-07 .theme-menu ul li a { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background-color: transparent !important; } .theme-header.zpheader-style-navigation-07 .theme-menu-name { color: #ffffff !important; text-align: center !important; } .theme-header.zpheader-style-navigation-07 .theme-menu ul li a:hover .theme-menu-name { color: #66b2ff !important; } .theme-header.zpheader-style-navigation-07 .theme-menu ul li.theme-menu-selected > a { background-color: transparent !important; border-bottom: none !important; box-shadow: none !important; } .theme-header.zpheader-style-navigation-07 .theme-menu ul li.theme-menu-selected > a .theme-menu-name { color: #ffffff !important; font-weight: normal !important; } .theme-header.zpheader-style-navigation-07 .theme-submenu-down-arrow, .theme-header.zpheader-style-navigation-07 .theme-submenu-up-arrow, .theme-header.zpheader-style-navigation-07 .theme-submenu-right-arrow { border-color: #ffffff !important; color: #ffffff !important; } .theme-header.zpheader-style-navigation-07 .theme-search-cart-non-res svg path, .theme-header.zpheader-style-navigation-07 .theme-search-cart-non-res svg circle, .theme-header.zpheader-style-navigation-07 .theme-search-cart-non-res svg rect, .theme-header.zpheader-style-navigation-07 .theme-search-cart-non-res svg line { stroke: #ffffff !important; } .theme-header.zpheader-style-navigation-07 .theme-search-cart-non-res .zpheader-cart-count { background-color: #FF6600 !important; color: #ffffff !important; } /* ================================================ DESKTOP — Mega Menu Dropdown ================================================ */ .zpmm.zpmm-container-style-02 { background-color: #ffffff !important; border-top: 3px solid #FF6600 !important; box-shadow: 0 10px 30px rgba(0, 51, 102, 0.15) !important; padding: 16px 0 24px 0 !important; } .zpmm.zpmm-container-style-02 .zpelem-col.zpcol-md-4:not(:last-child) { border-right: 1px solid #dde6f0 !important; } .zpmm-element.zpmm-title { margin: 2px 8px !important; padding: 9px 14px !important; border-radius: 5px !important; border-left: 3px solid transparent !important; transition: background-color 0.2s ease, border-left-color 0.2s ease, padding-left 0.2s ease !important; box-sizing: border-box !important; } .zpmm-element.zpmm-title .zpmm-element-textcontent { color: #003366 !important; font-size: 13.5px !important; font-weight: 600 !important; font-family: 'Montserrat', sans-serif !important; transition: color 0.2s ease !important; } .zpmm-element.zpmm-title:hover { background-color: #003366 !important; border-left-color: #FF6600 !important; padding-left: 20px !important; } .zpmm-element.zpmm-title:hover .zpmm-element-textcontent { color: #ffffff !important; } /* ================================================ MOBILE DRAWER ================================================ */ @media screen and (max-width: 768px) { /* ---- Drawer header: white, orange bottom accent ---- */ .theme-mobile-header-slide-header { background-color: #ffffff !important; border-bottom: 3px solid #FF6600 !important; } .theme-mobile-header-slide-close svg path { fill: #333333 !important; } /* ---- Drawer body: dark navy ---- */ .theme-mobile-header-slide { background-color: #001e3c !important; } /* ---- All inner wrappers: transparent ---- */ .theme-mobile-header-slide .theme-mobile-header-slide-content, .theme-mobile-header-slide .theme-mobile-header-slide-box, .theme-mobile-header-slide .theme-mobile-header-navigation, .theme-mobile-header-slide .theme-responsive-menu-area, .theme-mobile-header-slide .theme-responsive-menu, .theme-mobile-header-slide .theme-menu-area, .theme-mobile-header-slide .theme-menu { background-color: transparent !important; background: transparent !important; } /* ---- Force all nav text white ---- */ .theme-mobile-header-slide .theme-menu a, .theme-mobile-header-slide .theme-menu a span, .theme-mobile-header-slide .theme-menu li span, .theme-mobile-header-slide .theme-menu .theme-menu-name, .theme-mobile-header-slide .theme-menu .theme-menu-content { color: #ffffff !important; } /* ---- Nav items ---- */ .theme-mobile-header-slide .theme-menu ul > li { border-left: 3px solid #FF6600 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: none !important; border-right: none !important; background-color: transparent !important; list-style: none !important; transition: background-color 0.18s ease !important; } /* ---- Nav link row ---- */ .theme-mobile-header-slide .theme-menu ul li > a { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 16px 20px !important; background-color: transparent !important; position: relative !important; text-decoration: none !important; transition: background-color 0.18s ease !important; } .theme-mobile-header-slide .theme-menu ul li > a .theme-menu-name { font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; color: #ffffff !important; } /* ---- Chevron on plain nav items only ---- */ .theme-mobile-header-slide .theme-menu ul > li > a::after { content: '›' !important; position: absolute !important; right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 22px !important; line-height: 1 !important; color: rgba(255, 102, 0, 0.7) !important; transition: right 0.15s ease !important; } /* ---- Remove chevron from items with a built-in dropdown toggle ---- */ .theme-mobile-header-slide .theme-menu ul > li[data-megamenu] > a::after, .theme-mobile-header-slide .theme-menu ul > li.theme-sub-menu-open > a::after { content: none !important; display: none !important; } /* ---- Tap state ---- */ .theme-mobile-header-slide .theme-menu ul > li:active { background-color: rgba(255, 255, 255, 0.06) !important; } .theme-mobile-header-slide .theme-menu ul li:active > a .theme-menu-name { color: #66b2ff !important; } .theme-mobile-header-slide .theme-menu ul li:active > a::after { right: 12px !important; } /* ---- Kill selected-page highlight ---- */ .theme-mobile-header-slide .theme-menu ul li.theme-menu-selected > a { background-color: transparent !important; } .theme-mobile-header-slide .theme-menu ul li.theme-menu-selected > a .theme-menu-name { color: #ffffff !important; font-weight: 600 !important; } /* ---- Dropdown toggle arrows: orange ---- */ .theme-mobile-header-slide .theme-sub-li-menu.theme-submenu-down-arrow, .theme-mobile-header-slide .theme-sub-li-menu.theme-submenu-up-arrow { border-color: rgba(255, 102, 0, 0.8) !important; } /* ================================================ SHOP BY CATEGORY DROPDOWN ANIMATION Zoho adds .mmactive when the mega menu opens — this is the safe hook, no opacity:0 on base state ================================================ */ .theme-mobile-header-slide .theme-sub-menu .zpmm { opacity: 1 !important; transform: translateY(0) !important; } .theme-mobile-header-slide .theme-sub-menu .zpmm.mmactive { animation: mobileSubMenuOpen 0.28s ease forwards !important; } @keyframes mobileSubMenuOpen { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ================================================ MOBILE MEGA MENU PANEL ================================================ */ .theme-mobile-header-slide .theme-sub-menu .zpmm.zpmm-container-style-02 { background-color: rgba(0, 8, 22, 0.7) !important; border-top: 1px solid rgba(255, 102, 0, 0.3) !important; border-bottom: 1px solid rgba(255, 102, 0, 0.12) !important; border-left: none !important; border-right: none !important; box-shadow: none !important; padding: 8px 0 14px 0 !important; } .theme-mobile-header-slide .theme-sub-menu .zpmm .zpelem-col.zpcol-md-4:not(:last-child) { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; padding-bottom: 4px !important; margin-bottom: 4px !important; } .theme-mobile-header-slide .theme-sub-menu .zpmm a, .theme-mobile-header-slide .theme-sub-menu .zpmm a span, .theme-mobile-header-slide .theme-sub-menu .zpmm span, .theme-mobile-header-slide .theme-sub-menu .zpmm .zpmm-element-textcontent { color: #7fb3d3 !important; } .theme-mobile-header-slide .theme-sub-menu .zpmm-element.zpmm-title { margin: 1px 8px 1px 22px !important; padding: 9px 12px !important; border-radius: 0 !important; border-left: 2px solid rgba(255, 102, 0, 0.4) !important; border-top: none !important; border-right: none !important; border-bottom: none !important; background-color: transparent !important; transition: background-color 0.15s ease !important; } .theme-mobile-header-slide .theme-sub-menu .zpmm-element.zpmm-title:active { background-color: rgba(255, 255, 255, 0.06) !important; border-left-color: #FF6600 !important; } .theme-mobile-header-slide .theme-sub-menu .zpmm-element.zpmm-title:active .zpmm-element-textcontent { color: #ffffff !important; } .theme-mobile-header-slide .theme-sub-menu .zpmm-element.zpmm-title:hover { background-color: transparent !important; padding-left: 12px !important; } /* ================================================ CONTACT INFO SECTION ================================================ */ .theme-mobile-header-slide .theme-topbar-contact-info { background-color: transparent !important; border-top: 1px solid rgba(255, 102, 0, 0.2) !important; padding: 18px 20px 14px 20px !important; margin-top: 4px !important; } .theme-mobile-header-slide .theme-topbar-contact-info ul { list-style: none !important; padding: 0 !important; margin: 0 0 14px 0 !important; } .theme-mobile-header-slide .theme-topbar-info { margin-bottom: 10px !important; } .theme-mobile-header-slide .theme-topbar-info a { display: flex !important; align-items: center !important; gap: 10px !important; color: #7fb3d3 !important; text-decoration: none !important; font-size: 13px !important; font-weight: 500 !important; } .theme-mobile-header-slide .theme-topbar-info a * { color: #7fb3d3 !important; } .theme-mobile-header-slide .theme-topbar-info-icon { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; } .theme-mobile-header-slide .theme-topbar-info-icon svg { width: 15px !important; height: 15px !important; } .theme-mobile-header-slide .theme-topbar-info-icon svg path { fill: #FF6600 !important; } /* ================================================ SOCIAL ICONS — equidistant row, no arrows/borders ================================================ */ .theme-mobile-header-slide .theme-scoialicon-inner-parent { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-evenly !important; align-items: center !important; width: 100% !important; padding: 8px 0 4px 0 !important; list-style: none !important; margin: 0 !important; } /* Each social icon li — hard reset all inherited styles */ .theme-mobile-header-slide .theme-scoialicon-inner-parent > li, .theme-mobile-header-slide .theme-socialicon-list { display: inline-flex !important; align-items: center !important; justify-content: center !important; list-style: none !important; border: none !important; border-left: none !important; border-bottom: none !important; border-top: none !important; border-right: none !important; background: none !important; padding: 0 !important; margin: 0 !important; flex: 1 !important; } /* Kill any ::after or ::before pseudo-elements on social li and a */ .theme-mobile-header-slide .theme-socialicon-list::after, .theme-mobile-header-slide .theme-socialicon-list::before, .theme-mobile-header-slide .theme-socialicon-list a::after, .theme-mobile-header-slide .theme-socialicon-list a::before, .theme-mobile-header-slide .theme-scoialicon-inner-parent li::after, .theme-mobile-header-slide .theme-scoialicon-inner-parent li::before, .theme-mobile-header-slide .theme-scoialicon-inner-parent li a::after, .theme-mobile-header-slide .theme-scoialicon-inner-parent li a::before { content: none !important; display: none !important; } .theme-mobile-header-slide .zpsocialprofile { width: 24px !important; height: 24px !important; display: block !important; } /* Plain white only — no colour change */ .theme-mobile-header-slide .zpsocialprofile path { fill: rgba(255, 255, 255, 0.5) !important; } /* ================================================ PORTAL — Sign In / Sign Up ================================================ */ .theme-mobile-header-slide .theme-mobile-header-slide-content[data-zs-drawer-content="portal"] { padding: 32px 24px !important; } .theme-mobile-header-slide .theme-portal-icon path { fill: #ffffff !important; } .theme-mobile-header-slide .theme-portal-container[data-portal-loggedout] { display: flex !important; flex-direction: column !important; gap: 14px !important; padding-top: 8px !important; } .theme-mobile-header-slide .theme-portal-content a[data-portal-signin] { display: block !important; text-align: center !important; background-color: #FF6600 !important; color: #ffffff !important; padding: 14px 24px !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.6px !important; text-decoration: none !important; text-transform: uppercase !important; } .theme-mobile-header-slide .theme-portal-content a[data-portal-signin]:active { background-color: #cc5200 !important; } .theme-mobile-header-slide .theme-portal-content a[data-portal-signup] { display: block !important; text-align: center !important; background-color: transparent !important; color: #ffffff !important; padding: 13px 24px !important; border-radius: 6px !important; border: 1.5px solid rgba(255, 255, 255, 0.3) !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0.6px !important; text-decoration: none !important; text-transform: uppercase !important; } .theme-mobile-header-slide .theme-portal-content a[data-portal-signup]:active { border-color: #FF6600 !important; color: #FF6600 !important; } .theme-mobile-header-slide .theme-portal-username, .theme-mobile-header-slide .theme-username-dropdown-list a { color: #7fb3d3 !important; font-size: 14px !important; } } /* Homepage /* ================================================ HOMEPAGE — Full-Width Banner Image Fix ================================================ */ [data-element-id="elm_5lv2py9Vtfxqg7N-ntajjw"] .zpimage-container figure img { width: 100% !important; height: auto !important; max-width: 100% !important; } [data-element-id="elm_5lv2py9Vtfxqg7N-ntajjw"] .zpimage-container, [data-element-id="elm_5lv2py9Vtfxqg7N-ntajjw"] .zpimage-container figure { width: 100% !important; } /* ================================================ FILMSTRIP SECTION HEADER — Mobile title fit fix ================================================ */ @media screen and (max-width: 768px) { .zpfilmstrip-title-container { flex-wrap: nowrap !important; align-items: center !important; } .zpfilmstrip-title { flex: 1 1 0 !important; min-width: 0 !important; font-size: clamp(12px, 4vw, 16px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; } } /* ================================================ ALL PAGES — Trust Icons: 2 columns on mobile ================================================ */ @media (max-width: 767px) { [data-element-id="elm_X2GS-swv0br9vLRluN34JQ"] .zpelem-col, [data-element-id="elm_THhpD97Ln2RJG2V9Ply9zQ"] .zpelem-col, [data-element-id="elm_lT3Aw9KGoB5sb3yud0HyoQ"] .zpelem-col, [data-element-id="elm_RUZ3tFFlvBNGE5K52WqKnw"] .zpelem-col, [data-element-id="elm_BTmwMwxweRw6SjiRw6MFSQ"] .zpelem-col { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; box-sizing: border-box !important; } } /* ================================================ HOMEPAGE — BRAND MARQUEE + EXPLORE BRANDS Section: elm_4JaA1MbpMufY6c8jT16uGw Row: elm_SJRQs-wRUheCySNmXelR7Q Marquee col: elm_CxtY_sEZvb8JdUyqKYjmSg Button col: elm_aLCnQFy1uxtsVJrOJqOtPw Layout: marquee left, button right — all viewports v2: desktop split changed 85/15 → 92/8 to eliminate 108px dead space right of button. Mobile untouched. ================================================ */ [data-element-id="elm_4JaA1MbpMufY6c8jT16uGw"].zpsection { padding-block-start: 0 !important; padding-block-end: 0 !important; } [data-element-id="elm_4JaA1MbpMufY6c8jT16uGw"] .zpcontainer { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Row: side-by-side always — never stacks */ [data-element-id="elm_SJRQs-wRUheCySNmXelR7Q"] { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; } /* ---- DESKTOP 992px+ : 92 / 8 split ---- */ @media (min-width: 992px) { [data-element-id="elm_CxtY_sEZvb8JdUyqKYjmSg"] { flex: 0 0 92% !important; width: 92% !important; max-width: 92% !important; overflow: hidden !important; padding: 0 !important; align-self: stretch !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important; } [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] { flex: 0 0 8% !important; width: 8% !important; max-width: 8% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px 8px !important; box-sizing: border-box !important; } } /* ---- TABLET 768px–991px : 80 / 20 split ---- */ @media (min-width: 768px) and (max-width: 991px) { [data-element-id="elm_CxtY_sEZvb8JdUyqKYjmSg"] { flex: 0 0 80% !important; width: 80% !important; max-width: 80% !important; overflow: hidden !important; padding: 0 !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important; } [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] { flex: 0 0 20% !important; width: 20% !important; max-width: 20% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 14px 16px !important; box-sizing: border-box !important; } } /* ---- MOBILE max 767px : 80 / 20 split — no stacking ---- */ @media (max-width: 767px) { [data-element-id="elm_CxtY_sEZvb8JdUyqKYjmSg"] { flex: 0 0 80% !important; width: 80% !important; max-width: 80% !important; overflow: hidden !important; padding: 0 !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important; } [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] { flex: 0 0 20% !important; width: 20% !important; max-width: 20% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 6px !important; box-sizing: border-box !important; } } /* ---- MARQUEE TRACK — all viewports ---- */ .hp-brand-track { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; animation: hp-marquee 40s linear infinite !important; will-change: transform !important; } .hp-brand-track:hover { animation-play-state: paused !important; } @keyframes hp-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---- MARQUEE TILES — DESKTOP 992px+ ---- */ @media (min-width: 992px) { .hp-brand-track .zpelement.zpelem-image { flex: 0 0 auto !important; width: 160px !important; height: 110px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 28px !important; box-sizing: border-box !important; } .hp-brand-track .zpimage-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; overflow: visible !important; margin: 0 !important; } .hp-brand-track .zpimage-container figure { display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } .hp-brand-track .zpimage-container figure picture { display: contents !important; } .hp-brand-track .zpimage-container figure img { max-width: 100px !important; max-height: 70px !important; width: auto !important; height: auto !important; object-fit: contain !important; object-position: center !important; display: block !important; transition: filter 0.4s ease, transform 0.35s ease !important; } .hp-brand-track .zpelement.zpelem-image:hover .zpimage-container figure img { transform: scale(1.1) !important; } } /* ---- MARQUEE TILES — TABLET 768px–991px ---- */ @media (min-width: 768px) and (max-width: 991px) { .hp-brand-track .zpelement.zpelem-image { flex: 0 0 auto !important; width: 130px !important; height: 90px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 20px !important; box-sizing: border-box !important; } .hp-brand-track .zpimage-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; overflow: visible !important; margin: 0 !important; } .hp-brand-track .zpimage-container figure { display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } .hp-brand-track .zpimage-container figure picture { display: contents !important; } .hp-brand-track .zpimage-container figure img { max-width: 85px !important; max-height: 60px !important; width: auto !important; height: auto !important; object-fit: contain !important; object-position: center !important; display: block !important; transition: filter 0.4s ease, transform 0.35s ease !important; } .hp-brand-track .zpelement.zpelem-image:hover .zpimage-container figure img { transform: scale(1.1) !important; } } /* ---- MARQUEE TILES — MOBILE max 767px ---- */ @media (max-width: 767px) { .hp-brand-track .zpelement.zpelem-image { flex: 0 0 auto !important; width: 90px !important; height: 65px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px !important; box-sizing: border-box !important; } .hp-brand-track .zpimage-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; overflow: visible !important; margin: 0 !important; } .hp-brand-track .zpimage-container figure { display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } .hp-brand-track .zpimage-container figure picture { display: contents !important; } .hp-brand-track .zpimage-container figure img { max-width: 60px !important; max-height: 42px !important; width: auto !important; height: auto !important; object-fit: contain !important; object-position: center !important; display: block !important; filter: none !important; } } /* ---- EXPLORE BRANDS BUTTON — shared base ---- */ [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] .zpelement.zpelem-button { width: 100% !important; margin: 0 !important; } [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] .zpbutton-container { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ---- EXPLORE BRANDS — DESKTOP + TABLET 768px+ ---- */ @media (min-width: 768px) { [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] .zpbutton.zpbutton-type-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #003366 !important; color: #ffffff !important; border: 2px solid #003366 !important; border-radius: 4px !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; width: 80px !important; white-space: normal !important; word-spacing: 999px !important; word-break: keep-all !important; overflow-wrap: normal !important; text-align: center !important; line-height: 1.6 !important; padding: 12px 10px !important; box-sizing: border-box !important; box-shadow: 0 2px 8px rgba(0, 51, 102, 0.2) !important; transition: background-color 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease, box-shadow 0.3s ease !important; cursor: pointer !important; } [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] .zpbutton-content { word-spacing: 999px !important; word-break: keep-all !important; overflow-wrap: normal !important; text-align: center !important; display: block !important; } [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] .zpbutton.zpbutton-type-primary:hover { background-color: #001f3f !important; border-color: #001f3f !important; color: #ffffff !important; letter-spacing: 2.5px !important; box-shadow: 0 4px 14px rgba(0, 51, 102, 0.35) !important; } } /* ---- EXPLORE BRANDS — MOBILE max 767px ---- */ @media (max-width: 767px) { [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] .zpbutton.zpbutton-type-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #003366 !important; color: #ffffff !important; border: 2px solid #003366 !important; border-radius: 4px !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 8px !important; letter-spacing: 1px !important; text-transform: uppercase !important; width: 54px !important; white-space: normal !important; word-spacing: 999px !important; word-break: keep-all !important; overflow-wrap: normal !important; text-align: center !important; line-height: 1.6 !important; padding: 8px 6px !important; box-sizing: border-box !important; cursor: pointer !important; } [data-element-id="elm_aLCnQFy1uxtsVJrOJqOtPw"] .zpbutton-content { word-spacing: 999px !important; word-break: keep-all !important; overflow-wrap: normal !important; text-align: center !important; display: block !important; } } /* ================================================ END — HOMEPAGE BRAND MARQUEE + EXPLORE BRANDS ================================================ */ /* ================================================ HOMEPAGE — CATEGORY STRIP Section: elm_lfsK6pique1R5qPMddXZpA Row: elm_ivI5wcNWcNybNXHk0ptU6g Button: elm_NsRBljl2PhasL0NORfLnXA Hex: regular pointy-top, 24-point polygon. Squircle: n=5 superellipse, 24 matching points. Sweep border: @property, opacity 0 at rest. Dynamic mask: JS class-driven, no static fade. Active tile: hp-cat-tile-active mirrors hover while cursor is inside dropdown. Mobile button: JS moves it out of flex row, styled via hp-cat-btn-mobile. Mobile arrows: subtle pill chevrons, hint anim. Mobile top padding: reduced to 10px. v2: drop-shadow added to hex at rest via .zpelem-image parent (clip-path safe). v3: metallic shimmer border via ::before on .zpelem-image, conic-gradient @property, 8s loop. Mobile ring sized to 78px base. ================================================ */ @property --hp-sweep { syntax: ''; inherits: false; initial-value: 0deg; } @property --zw-shimmer-angle { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes zw-metal-shimmer { 0% { --zw-shimmer-angle: 0deg; } 100% { --zw-shimmer-angle: 360deg; } } [data-element-id="elm_lfsK6pique1R5qPMddXZpA"].zpsection { padding-block-start: 28px !important; padding-block-end: 0 !important; } [data-element-id="elm_lfsK6pique1R5qPMddXZpA"] .zpcontainer { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } [data-element-id="elm_ivI5wcNWcNybNXHk0ptU6g"] { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; } /* ---- WRAPPER ---- */ .hp-cat-wrapper { flex: 1 1 0 !important; min-width: 0 !important; position: relative !important; display: flex !important; align-items: center !important; } /* ---- TRACK ---- */ .hp-cat-track { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: visible !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; padding: 24px 52px !important; box-sizing: border-box !important; gap: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; } .hp-cat-track::-webkit-scrollbar { display: none !important; } /* Dynamic fade — left side only */ .hp-cat-track.hp-cat-fade-left:not(.hp-cat-fade-right) { -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 100% ) !important; mask-image: linear-gradient( to right, transparent 0%, black 8%, black 100% ) !important; } /* Dynamic fade — right side only */ .hp-cat-track.hp-cat-fade-right:not(.hp-cat-fade-left) { -webkit-mask-image: linear-gradient( to right, black 0%, black 86%, transparent 100% ) !important; mask-image: linear-gradient( to right, black 0%, black 86%, transparent 100% ) !important; } /* Dynamic fade — both sides */ .hp-cat-track.hp-cat-fade-left.hp-cat-fade-right { -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 86%, transparent 100% ) !important; mask-image: linear-gradient( to right, transparent 0%, black 8%, black 86%, transparent 100% ) !important; } /* ---- ARROW BUTTONS — DESKTOP ---- */ .hp-cat-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 20 !important; background: #ffffff !important; border: 2px solid #003366 !important; color: #003366 !important; border-radius: 50% !important; width: 38px !important; height: 38px !important; font-size: 30px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 0 2px 0 !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important; } .hp-cat-arrow:hover { background-color: #003366 !important; color: #ffffff !important; box-shadow: 0 5px 18px rgba(0, 51, 102, 0.3) !important; transform: translateY(-50%) scale(1.1) !important; } .hp-cat-arrow-left { left: 8px !important; } .hp-cat-arrow-right { right: 8px !important; } /* ---- BUTTON COLUMN — DESKTOP + TABLET ---- */ [data-element-id="elm_NsRBljl2PhasL0NORfLnXA"] { flex: 0 0 140px !important; width: 140px !important; min-width: 140px !important; max-width: 140px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px 12px !important; box-sizing: border-box !important; align-self: center !important; } [data-element-id="elm_NsRBljl2PhasL0NORfLnXA"] .zpelement.zpelem-button { width: 100% !important; margin: 0 !important; } [data-element-id="elm_NsRBljl2PhasL0NORfLnXA"] .zpbutton-container { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } [data-element-id="elm_NsRBljl2PhasL0NORfLnXA"] .zpbutton.zpbutton-type-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #003366 !important; color: #ffffff !important; border: 2px solid #003366 !important; border-radius: 4px !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; width: 100px !important; white-space: normal !important; word-spacing: 999px !important; word-break: keep-all !important; overflow-wrap: normal !important; text-align: center !important; line-height: 1.7 !important; padding: 12px 10px !important; box-sizing: border-box !important; box-shadow: 0 2px 8px rgba(0, 51, 102, 0.2) !important; transition: background-color 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important; cursor: pointer !important; } [data-element-id="elm_NsRBljl2PhasL0NORfLnXA"] .zpbutton-content { word-spacing: 999px !important; word-break: keep-all !important; text-align: center !important; display: block !important; color: #ffffff !important; } [data-element-id="elm_NsRBljl2PhasL0NORfLnXA"] .zpbutton.zpbutton-type-primary:hover { background-color: #001f3f !important; border-color: #001f3f !important; color: #ffffff !important; letter-spacing: 2.5px !important; box-shadow: 0 6px 18px rgba(0, 51, 102, 0.35) !important; transform: scale(1.05) !important; } /* ---- CATEGORY TILE ---- */ .hp-cat-track .zpelem-col { flex: 0 0 168px !important; width: 168px !important; min-width: 168px !important; max-width: 168px !important; padding: 12px 10px !important; box-sizing: border-box !important; position: relative !important; cursor: pointer !important; border-radius: 14px !important; isolation: isolate !important; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important; } .hp-cat-track .zpelem-col:hover { background-color: rgba(255, 255, 255, 0.45) !important; box-shadow: 0 8px 28px rgba(0, 51, 102, 0.12) !important; transform: translateY(-4px) !important; } /* ---- SWEEP BORDER ---- */ .hp-cat-track .zpelem-col::before { content: '' !important; position: absolute !important; inset: -2px !important; border-radius: 16px !important; background: conic-gradient( from 270deg, #fccb03 var(--hp-sweep), rgba(252, 203, 3, 0.08) var(--hp-sweep) ) !important; padding: 2px !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; --hp-sweep: 0deg !important; opacity: 0 !important; transition: --hp-sweep 0.9s ease !important; z-index: -1 !important; pointer-events: none !important; } .hp-cat-track .zpelem-col:hover::before { opacity: 1 !important; --hp-sweep: 360deg !important; } /* ---- TILE ACTIVE STATE (cursor inside dropdown) ---- */ .hp-cat-track .zpelem-col.hp-cat-tile-active { background-color: rgba(255, 255, 255, 0.45) !important; box-shadow: 0 8px 28px rgba(0, 51, 102, 0.12) !important; transform: translateY(-4px) !important; } .hp-cat-track .zpelem-col.hp-cat-tile-active::before { opacity: 1 !important; --hp-sweep: 360deg !important; } .hp-cat-track .zpelem-col.hp-cat-tile-active .zpimage-container { clip-path: polygon( 50% 3%, 79.5% 3.7%, 85.6% 5.5%, 90.7% 9.3%, 94.5% 14.4%, 96.3% 20.5%, 97% 50%, 96.3% 79.5%, 94.5% 85.6%, 90.7% 90.7%, 85.6% 94.5%, 79.5% 96.3%, 50% 97%, 20.5% 96.3%, 14.4% 94.5%, 9.3% 90.7%, 5.5% 85.6%, 3.7% 79.5%, 3% 50%, 3.7% 20.5%, 5.5% 14.4%, 9.3% 9.3%, 14.4% 5.5%, 20.5% 3.7% ) !important; } .hp-cat-track .zpelem-col.hp-cat-tile-active .zpimage-container figure img { filter: grayscale(0%) brightness(1.06) !important; transform: scale(1.08) !important; } .hp-cat-track .zpelem-col.hp-cat-tile-active .zpaccordion-name { color: #001f3f !important; border-bottom-color: #fccb03 !important; letter-spacing: 1.1px !important; } /* ---- HEX IMAGE — DROP SHADOW + METALLIC BORDER ---- */ /* Drop shadow on .zpelem-image so it escapes clip-path. ::before carries the metallic shimmer ring. Both fade out on hover/active — tile lift takes over. */ .hp-cat-track .zpelem-col .zpelem-image { position: relative !important; filter: drop-shadow(0 4px 12px rgba(0, 51, 102, 0.22)) !important; transition: filter 0.45s ease !important; } .hp-cat-track .zpelem-col:hover .zpelem-image, .hp-cat-track .zpelem-col.hp-cat-tile-active .zpelem-image { filter: none !important; } /* Metallic shimmer ring — ::before traces the same hex polygon */ .hp-cat-track .zpelem-col .zpelem-image::before { content: '' !important; position: absolute !important; top: -5px !important; left: 50% !important; width: calc(128px + 10px) !important; height: calc(128px + 10px) !important; transform: translateX(-50%) !important; clip-path: polygon( 50% 0%, 60.8% 6.25%, 71.7% 12.5%, 82.5% 18.75%, 93.3% 25%, 93.3% 37.5%, 93.3% 50%, 93.3% 62.5%, 93.3% 75%, 82.5% 81.25%, 71.7% 87.5%, 60.8% 93.75%, 50% 100%, 39.2% 93.75%, 28.3% 87.5%, 17.5% 81.25%, 6.7% 75%, 6.7% 62.5%, 6.7% 50%, 6.7% 37.5%, 6.7% 25%, 17.5% 18.75%, 28.3% 12.5%, 39.2% 6.25% ) !important; background: conic-gradient( from var(--zw-shimmer-angle), #3a3a3a 0%, #888888 8%, #d8d8d8 14%, #ffffff 19%, #c0c0c0 25%, #585858 33%, #3c3c3c 41%, #909090 50%, #e4e4e4 57%, #ffffff 62%, #b8b8b8 68%, #484848 77%, #787878 87%, #3a3a3a 100% ) !important; animation: zw-metal-shimmer 8s linear infinite !important; z-index: 0 !important; pointer-events: none !important; } /* Ring fades out on hover / active */ .hp-cat-track .zpelem-col:hover .zpelem-image::before, .hp-cat-track .zpelem-col.hp-cat-tile-active .zpelem-image::before { opacity: 0 !important; transition: opacity 0.35s ease !important; } /* ---- IMAGE — REGULAR POINTY-TOP HEX (24-point) ---- */ .hp-cat-track .zpelem-col .zpimage-container { width: 128px !important; height: 128px !important; margin: 0 auto 14px auto !important; overflow: hidden !important; clip-path: polygon( 50% 0%, 60.8% 6.25%, 71.7% 12.5%, 82.5% 18.75%, 93.3% 25%, 93.3% 37.5%, 93.3% 50%, 93.3% 62.5%, 93.3% 75%, 82.5% 81.25%, 71.7% 87.5%, 60.8% 93.75%, 50% 100%, 39.2% 93.75%, 28.3% 87.5%, 17.5% 81.25%, 6.7% 75%, 6.7% 62.5%, 6.7% 50%, 6.7% 37.5%, 6.7% 25%, 17.5% 18.75%, 28.3% 12.5%, 39.2% 6.25% ) !important; transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; z-index: 1 !important; } .hp-cat-track .zpelem-col:hover .zpimage-container { clip-path: polygon( 50% 3%, 79.5% 3.7%, 85.6% 5.5%, 90.7% 9.3%, 94.5% 14.4%, 96.3% 20.5%, 97% 50%, 96.3% 79.5%, 94.5% 85.6%, 90.7% 90.7%, 85.6% 94.5%, 79.5% 96.3%, 50% 97%, 20.5% 96.3%, 14.4% 94.5%, 9.3% 90.7%, 5.5% 85.6%, 3.7% 79.5%, 3% 50%, 3.7% 20.5%, 5.5% 14.4%, 9.3% 9.3%, 14.4% 5.5%, 20.5% 3.7% ) !important; } .hp-cat-track .zpelem-col .zpimage-container figure { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } .hp-cat-track .zpelem-col .zpimage-container figure a { display: block !important; width: 100% !important; height: 100% !important; } .hp-cat-track .zpelem-col .zpimage-container figure img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; filter: grayscale(25%) brightness(0.93) !important; transition: filter 0.45s ease, transform 0.45s ease !important; } .hp-cat-track .zpelem-col:hover .zpimage-container figure img { filter: grayscale(0%) brightness(1.06) !important; transform: scale(1.08) !important; } /* ---- ACCORDION — display name only ---- */ .hp-cat-track .zpaccordion-container { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .hp-cat-track .zpaccordion { background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer !important; display: flex !important; justify-content: center !important; align-items: center !important; position: relative !important; z-index: 1 !important; } .hp-cat-track .zpaccordionicon, .hp-cat-track .zpaccord-icon-inactive, .hp-cat-track .zpaccord-icon-active { display: none !important; } .hp-cat-track .zpaccordion-name { display: block !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; color: #003366 !important; line-height: 1.5 !important; text-align: center !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; max-width: 148px !important; margin: 0 auto !important; padding-bottom: 3px !important; border-bottom: 2px solid transparent !important; transition: color 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease !important; } .hp-cat-track .zpelem-col:hover .zpaccordion-name { color: #001f3f !important; border-bottom-color: #fccb03 !important; letter-spacing: 1.1px !important; } .hp-cat-track .zpaccordion-content { display: none !important; } /* ---- DROPDOWN PANEL ---- */ .hp-cat-dropdown { position: absolute !important; z-index: 99999 !important; width: 215px !important; background: #ffffff !important; border-radius: 10px !important; border-top: 3px solid #fccb03 !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important; padding: 6px 0 8px 0 !important; animation: hp-cat-fade-in 0.2s ease !important; max-height: 300px !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: #fccb03 #f5f5f5 !important; } @keyframes hp-cat-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .hp-cat-dropdown-item { margin: 1px 6px !important; border-radius: 4px !important; transition: background-color 0.25s ease !important; } .hp-cat-dropdown-item:hover { background-color: rgba(252, 203, 3, 0.18) !important; } .hp-cat-dropdown-item a { display: block !important; padding: 9px 14px !important; font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; color: #1a1a2e !important; text-decoration: none !important; transition: color 0.25s ease, padding-left 0.25s ease, letter-spacing 0.25s ease !important; line-height: 1.4 !important; } .hp-cat-dropdown-item a:hover { color: #003366 !important; padding-left: 20px !important; letter-spacing: 0.3px !important; } .hp-cat-dropdown-item-plain { padding: 9px 14px !important; font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 500 !important; color: #888888 !important; line-height: 1.4 !important; } /* ================================================ MOBILE BUTTON — hp-cat-btn-mobile Added by JS when button is physically moved out of the flex row on viewports < 768px. ================================================ */ .hp-cat-btn-mobile { display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; padding: 12px 20px 20px 20px !important; box-sizing: border-box !important; } .hp-cat-btn-mobile .zpelement.zpelem-button { width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } .hp-cat-btn-mobile .zpbutton-container { width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .hp-cat-btn-mobile .zpbutton.zpbutton-type-primary { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; background-color: #003366 !important; color: #ffffff !important; border: 2px solid #003366 !important; border-radius: 4px !important; font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-align: center !important; white-space: nowrap !important; word-spacing: normal !important; word-break: normal !important; overflow-wrap: normal !important; line-height: 1 !important; padding: 16px 20px !important; box-shadow: 0 2px 8px rgba(0, 51, 102, 0.2) !important; transform: none !important; cursor: pointer !important; overflow: hidden !important; } .hp-cat-btn-mobile .zpbutton-content { display: block !important; color: #ffffff !important; white-space: nowrap !important; word-spacing: normal !important; text-align: center !important; width: 100% !important; } .hp-cat-btn-mobile .zpbutton.zpbutton-type-primary:active { background-color: #001f3f !important; border-color: #001f3f !important; } /* ================================================ MOBILE — Track, tiles, subtle scroll arrows max-width: 767px ================================================ */ @media (max-width: 767px) { /* Reduced top padding */ [data-element-id="elm_lfsK6pique1R5qPMddXZpA"].zpsection { padding-block-start: 10px !important; margin-top: 0 !important; } .hp-cat-track { padding: 16px 16px !important; overflow-y: hidden !important; } .hp-cat-track.hp-cat-fade-left:not(.hp-cat-fade-right) { -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 100% ) !important; mask-image: linear-gradient( to right, transparent 0%, black 8%, black 100% ) !important; } .hp-cat-track.hp-cat-fade-right:not(.hp-cat-fade-left) { -webkit-mask-image: linear-gradient( to right, black 0%, black 86%, transparent 100% ) !important; mask-image: linear-gradient( to right, black 0%, black 86%, transparent 100% ) !important; } .hp-cat-track.hp-cat-fade-left.hp-cat-fade-right { -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 86%, transparent 100% ) !important; mask-image: linear-gradient( to right, transparent 0%, black 8%, black 86%, transparent 100% ) !important; } /* ---- MOBILE SCROLL ARROWS ---- */ .hp-cat-arrow { display: flex !important; width: 20px !important; height: 42px !important; border-radius: 10px !important; border: none !important; background: rgba(255, 255, 255, 0.52) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important; color: #003366 !important; font-size: 15px !important; padding: 0 !important; transition: opacity 0.4s ease !important; } .hp-cat-arrow:hover, .hp-cat-arrow:active { background: rgba(255, 255, 255, 0.52) !important; color: #003366 !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important; transform: translateY(-50%) !important; } .hp-cat-arrow-right { animation: hp-mob-arrow-hint 1.8s ease-in-out 0.8s 3 !important; } @keyframes hp-mob-arrow-hint { 0% { transform: translateY(-50%) translateX(0); } 40% { transform: translateY(-50%) translateX(4px); } 100% { transform: translateY(-50%) translateX(0); } } /* ---- TILE SIZING ---- */ .hp-cat-track .zpelem-col { flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; padding: 8px 8px !important; } .hp-cat-track .zpelem-col::before { display: none !important; } .hp-cat-track .zpelem-col:active { transform: translateY(-2px) !important; background-color: rgba(255, 255, 255, 0.5) !important; } .hp-cat-track .zpelem-col .zpimage-container { width: 78px !important; height: 78px !important; margin: 0 auto 10px auto !important; } /* Mobile ring sized to match 78px container */ .hp-cat-track .zpelem-col .zpelem-image::before { width: calc(78px + 10px) !important; height: calc(78px + 10px) !important; top: -5px !important; } .hp-cat-track .zpelem-col .zpimage-container figure img { filter: none !important; } .hp-cat-track .zpaccordion-name { font-size: 9px !important; max-width: 100px !important; letter-spacing: 0.3px !important; } .hp-cat-dropdown { display: none !important; } } /* ── Tap active state ── */ .theme-product-list-style-17 .theme-product-box-content:active, .theme-product-list-style-17 .theme-product-box-content.zw-tap-reset { opacity: 1 !important; background: #ffffff !important; } .theme-product-list-style-17 a:active, .theme-product-list-style-17 a:focus { opacity: 1 !important; background: transparent !important; -webkit-tap-highlight-color: transparent !important; outline: none !important; } /* ================================================ END — HOMEPAGE CATEGORY STRIP ================================================ */ /* 2. The Bulletproof Out of Stock Badge */ .theme-product-list-style-19 .theme-product-box-content .theme-product-image-area .theme-outofstock-overlay { position: absolute !important; top: 0.5rem !important; left: auto !important; right: 0.5rem !important; /* Changed from 15px to 0.5rem for better mobile scaling */ transform: scale(0.7) !important; transform-origin: top right !important; /* New rules to fix the weirdness */ width: max-content !important; /* Forces the box to perfectly hug the text */ max-width: none !important; /* Overrides any theme limits squeezing the box */ height: auto !important; white-space: nowrap !important; /* PREVENTS the text from breaking into two lines on small screens */ } /* Make the Out of Stock text bold */ .theme-product-list-style-19 .theme-product-box-content .theme-product-image-area .theme-outofstock-overlay .theme-ribbon-stock { font-weight: 700 !important; /* 700 is standard bold, 800 or 900 is extra bold */ } /* ================================================ PRODUCT DETAIL PAGE ================================================ */ /* 1. PAGE CONTAINER */ /* Base zpcontainer padding — overridden for large screens in the desktop breakpoint block below */ .theme-section[data-zs-product-details-primary-section] .zpcontainer { padding-left: 16px !important; padding-right: 16px !important; } .theme-product-detail-container { background: linear-gradient(to bottom, #fafbfd 0%, #ffffff 100%) !important; border-radius: 16px !important; padding: 36px 36px 40px !important; box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important; margin: 0 auto !important; width: 100% !important; max-width: 1200px !important; box-sizing: border-box !important; } /* 2. IMAGE AREA CRITICAL: .img-zoom-container must stay display:block. Zoho's zoom uses getBoundingClientRect — flex centering shifts coordinates and breaks the zoom lens entirely. FIX v7: img[product-image] was an attribute selector — wrong. Actual HTML uses id="product-image". Now targets img#product-image AND all img inside zoom container as belt-and-suspenders fallback. */ .theme-product-detail-container .theme-product-detail-image-inner { display: flex !important; align-items: flex-start !important; justify-content: center !important; } .theme-product-detail-container .img-zoom-container { position: relative !important; display: block !important; width: 100% !important; line-height: 0 !important; } .theme-product-detail-container .img-zoom-container img#product-image, .theme-product-detail-container .img-zoom-container img { display: block !important; width: 100% !important; height: auto !important; max-height: 500px !important; object-fit: contain !important; object-position: center !important; margin: 0 auto !important; } .theme-product-detail-image-inner, .theme-product-detail-image-inner picture, .theme-product-detail-image-inner .img-zoom-container { border: none !important; outline: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* 3. THUMBNAILS — left vertical strip (desktop) */ .theme-product-detail-image-container { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 12px !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .theme-product-detail-image { flex: 1 1 auto !important; min-width: 0 !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .theme-product-detail-thumbnail-container { display: flex !important; flex-direction: column !important; order: -1 !important; gap: 8px !important; width: 72px !important; min-width: 72px !important; flex-shrink: 0 !important; } .theme-product-detail-thumbnail { width: 72px !important; height: 72px !important; border: 2px solid #e2e8f0 !important; border-radius: 6px !important; overflow: hidden !important; cursor: pointer !important; box-sizing: border-box !important; padding: 3px !important; background: #fff !important; transition: border-color 0.15s !important; flex-shrink: 0 !important; } .theme-product-detail-thumbnail img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .theme-product-detail-thumbnail.theme-active-thumbnail { border-color: #428DFF !important; } /* 4. PRODUCT TITLE */ .theme-product-detail-container [data-zs-product-name] { font-size: 26px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #111827 !important; } /* 4a. RIGHT COLUMN — white card Sits inside the gradient container as a distinct white card with a subtle border and shadow. */ .theme-product-detail-varients-container { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important; padding: 28px 24px !important; box-sizing: border-box !important; } /* 5. PRICING — scoped to PDP container only. DO NOT remove the .theme-product-detail-container parent — without it this rule hides prices on collection tiles too. */ .theme-product-detail-container .theme-product-detail-price-area { display: none !important; } /* Exclusive of GST row */ .zw-pdp-excl-row { margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; white-space: nowrap; } .zw-pdp-excl-price { font-size: 22px; font-weight: 600; color: #111827; white-space: nowrap; } .zw-pdp-excl-label { font-size: 13px; color: #6b7280; white-space: nowrap; } /* Inclusive of GST box */ .zw-pdp-price-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; } .zw-pdp-price-box-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; white-space: nowrap; margin-bottom: 4px; } .zw-pdp-incl-price { font-size: 34px; font-weight: 700; color: #111827; line-height: 1; white-space: nowrap; flex-shrink: 0; } .zw-pdp-mrp { font-size: 16px; color: #9ca3af; text-decoration: line-through; white-space: nowrap; flex-shrink: 0; } .zw-pdp-save-badge { font-size: 14px; font-weight: 700; color: #16a34a; white-space: nowrap; flex-shrink: 0; } .zw-pdp-incl-label { font-size: 12px; color: #6b7280; display: block; } /* 6. PRODUCT ID */ .zw-pdp-product-id { font-size: 12px; color: #9ca3af; margin-top: 14px; } .zw-pdp-product-id span { color: #6b7280; font-weight: 500; } /* ============================================ RATING REVIEW CONTAINER — PDP mobile overlap fix "Be the first to review" text collides with stars on real devices (not in emulation). Root cause: Zoho default theme uses inline/ absolute positioning that breaks 1–4px under real browser chrome width. Fix: force clean flex-column, reset all position offsets, ensure full-width block. ============================================ */ .theme-rating-review-container { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; position: relative !important; overflow: visible !important; margin-bottom: 6px !important; box-sizing: border-box !important; } /* Stars row — stays in normal flow */ .theme-rating-review-container .theme-product-review-rating, .theme-rating-review-container [class*="rating"], .theme-rating-review-container [class*="star"] { position: static !important; display: flex !important; align-items: center !important; flex-shrink: 0 !important; } /* "Be the first to review" link/text — own line, never overlaps */ .theme-rating-review-container a, .theme-rating-review-container [data-zs-product-review-count], .theme-rating-review-container [class*="review-count"], .theme-rating-review-container [class*="review-link"] { position: static !important; display: block !important; width: 100% !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; line-height: 1.5 !important; top: auto !important; left: auto !important; transform: none !important; } /* Mobile-specific reinforcement */ @media screen and (max-width: 768px) { .theme-rating-review-container { flex-direction: column !important; gap: 4px !important; width: calc(100% - 0px) !important; /* explicit full bleed */ } .theme-rating-review-container a, .theme-rating-review-container [data-zs-product-review-count] { font-size: 13px !important; max-width: 100% !important; display: block !important; position: static !important; } } /* 7. BUTTONS */ /* Hide Zoho's default wishlist near title */ .theme-product-name-social-share .wishlist-selection-container { display: none !important; } /* Button area — column: ATC row first, Buy Now below */ .theme-product-detail-container .theme-button-area { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } /* Row: Add to Cart + Wishlist side by side */ .zw-pdp-atc-row { display: flex; flex-direction: row; gap: 10px; align-items: stretch; } .zw-pdp-atc-row [data-zs-add-to-cart] { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; box-sizing: border-box !important; } /* No-ATC state — wishlist goes full width */ .zw-pdp-atc-row.zw-no-atc { flex-direction: column !important; } .zw-pdp-atc-row.zw-no-atc .zw-pdp-wishlist-btn { width: 100% !important; min-width: unset !important; padding: 14px 0 !important; font-size: 16px !important; } /* Add to Cart */ .theme-product-detail-container [data-zs-add-to-cart] { background-color: #428DFF !important; border-color: #428DFF !important; color: #ffffff !important; border-radius: 8px !important; transition: background-color 0.15s ease !important; } .theme-product-detail-container [data-zs-add-to-cart]:hover { background-color: #6aaaff !important; border-color: #6aaaff !important; } /* Wishlist — ghost blue */ .zw-pdp-wishlist-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 18px; min-width: 150px; border: 1.5px solid #428DFF; border-radius: 8px; background: #fff; color: #428DFF; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; line-height: 1; box-sizing: border-box; } .zw-pdp-wishlist-btn:hover { background: #eff6ff; } .zw-pdp-wishlist-btn.zw-wishlisted { background: #fff1f2; border-color: #dc2626; color: #dc2626; } .zw-pdp-wishlist-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .zw-pdp-wishlist-btn.zw-wishlisted svg path { fill: #dc2626; stroke: #dc2626; } /* Buy Now */ .theme-pdp-buynow-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; background-color: #111827 !important; border-color: #111827 !important; border-radius: 8px !important; color: #ffffff !important; cursor: pointer !important; transition: background-color 0.15s ease !important; } .theme-pdp-buynow-btn:hover { background-color: #1f2937 !important; border-color: #1f2937 !important; } /* 8. SPEC / ABOUT TABS */ .zw-spec-table-wrap { padding: 8px 0 16px; } .zw-spec-table { border-collapse: collapse !important; width: 100% !important; border: none !important; font-size: 14px !important; } .zw-spec-table tr:nth-child(even) { background-color: #f8fafc !important; } .zw-spec-table td { padding: 10px 14px !important; border: none !important; border-bottom: 1px solid #f0f4f8 !important; vertical-align: top !important; color: #374151 !important; } .zw-spec-table td:first-child { font-weight: 600 !important; color: #111827 !important; width: 35% !important; min-width: 130px !important; } .zw-spec-table tr:last-child td { border-bottom: none !important; } /* 9. MISC */ .theme-product-short-description { display: none !important; } .theme-prod-detail-tab-content[data-detail-tab-content="theme-product-detail-content"] { color: #060606 !important; } .theme-prod-non-returnable { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; font-weight: 500 !important; color: #888888 !important; background-color: transparent !important; border: 1px solid #dddddd !important; border-radius: 4px !important; padding: 3px 8px !important; letter-spacing: 0.2px !important; opacity: 0.85 !important; margin-top: 10px !important; margin-bottom: 10px !important; } .theme-prod-non-returnable::before { content: '⚠' !important; font-size: 11px !important; color: #aaaaaa !important; line-height: 1 !important; } .theme-product-stock-availability-details { margin-top: 10px !important; } .theme-product-varients-area { display: none !important; } /* Zero-price mode: wishlist is full-width */ .zw-pdp-wishlist-btn.zw-pdp-wishlist-standalone { width: 100%; justify-content: center; min-height: 48px; margin-bottom: 0.75rem; } /* RQ button full-width override */ .zw-pdp-rq-styled { box-sizing: border-box; } /* ── DESKTOP SCALING ───────────────────────────── Scoped entirely to the PDP section via [data-zs-product-details-primary-section]. Zero impact on any other page or component. Mobile (<= 768px) overridden at the bottom. */ /* Free zpcontainer width within PDP only (≥1200px) */ @media (min-width: 1200px) { .theme-section[data-zs-product-details-primary-section] .zpcontainer { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } /* 1440px — small large desktop */ @media (min-width: 1440px) { .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container { max-width: 1280px !important; } /* Image column = 50% of container inner width */ .theme-section[data-zs-product-details-primary-section] .theme-product-detail-image-container { flex: 0 0 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Variants card fills the other ~50% */ .theme-section[data-zs-product-details-primary-section] .theme-product-detail-varients-container { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; } /* Zoom container: fit-content so its width matches the image's rendered pixel width (not full column). JS stamps exact height to close the 70px mismatch. */ .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container .img-zoom-container { width: fit-content !important; max-width: 100% !important; margin: 0 auto !important; display: block !important; line-height: 0 !important; position: relative !important; } /* Image: auto-width proportional to max-height */ .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container .img-zoom-container img#product-image, .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container .img-zoom-container img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 500px !important; object-fit: contain !important; display: block !important; margin: 0 !important; } } /* 1600px — mid large desktop */ @media (min-width: 1600px) { .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container { max-width: 1440px !important; } .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container .img-zoom-container img#product-image, .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container .img-zoom-container img { max-height: 540px !important; } } /* 1920px — 24" and above */ @media (min-width: 1920px) { .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container { max-width: 1560px !important; padding: 40px 40px 44px !important; } .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container .img-zoom-container img#product-image, .theme-section[data-zs-product-details-primary-section] .theme-product-detail-container .img-zoom-container img { max-height: 580px !important; } } /* ── ZOOM FIX ───────────────────────────────────── background-repeat: no-repeat stops tiling when bg-pos-y overshoots bgH at container bottom edge. pointer-events fix: zoom activates only when cursor is over the actual zoom container, not the wider picture whitespace. Desktop only (≥1200px). */ #magnify-image, .img-zoom-result { background-repeat: no-repeat !important; } @media (min-width: 1200px) { .theme-section[data-zs-product-details-primary-section] .theme-product-detail-image-inner picture { pointer-events: none !important; } .theme-section[data-zs-product-details-primary-section] .img-zoom-container { pointer-events: all !important; } } /* 10. MOBILE */ @media screen and (max-width: 768px) { .theme-product-detail-container { padding: 20px 16px 28px !important; border-radius: 12px !important; margin: 0 8px !important; width: calc(100% - 16px) !important; } /* On mobile Zoho may strip .img-zoom-container. Target picture > img directly as primary, keep zoom as fallback. */ .theme-product-detail-image { width: 100% !important; min-width: 0 !important; overflow: hidden !important; } .theme-product-detail-container .theme-product-detail-image-inner { display: block !important; width: 100% !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } .theme-product-detail-container .theme-product-detail-image-inner picture { display: block !important; width: 100% !important; overflow: hidden !important; pointer-events: auto !important; } .theme-product-detail-container .theme-product-detail-image-inner picture img, .theme-product-detail-container .theme-product-detail-image-inner img#product-image { display: block !important; width: 100% !important; height: auto !important; max-height: 360px !important; object-fit: contain !important; object-position: center !important; margin: 0 auto !important; } /* Fallback: zoom wrapper still present on some products */ .theme-product-detail-container .img-zoom-container { display: block !important; width: 100% !important; overflow: hidden !important; } .theme-product-detail-container .img-zoom-container img#product-image, .theme-product-detail-container .img-zoom-container img { display: block !important; width: 100% !important; height: auto !important; max-height: 360px !important; object-fit: contain !important; object-position: center !important; margin: 0 auto !important; } /* Thumbnails — horizontal row below image on mobile */ .theme-product-detail-image-container { flex-direction: column !important; } .theme-product-detail-thumbnail-container { flex-direction: row !important; order: 1 !important; width: 100% !important; min-width: unset !important; overflow-x: auto !important; padding-bottom: 4px !important; } .theme-product-detail-container [data-zs-product-name] { font-size: 20px !important; } .zw-pdp-price-box-row { flex-wrap: wrap !important; white-space: normal !important; } .zw-pdp-incl-price { font-size: 26px !important; flex-basis: 100% !important; } .zw-pdp-mrp { font-size: 14px !important; } .zw-pdp-save-badge { font-size: 13px !important; } .zw-pdp-excl-price { font-size: 18px !important; } .zw-pdp-atc-row { flex-direction: column !important; } .zw-pdp-wishlist-btn { width: 100% !important; min-width: unset !important; padding: 13px 0 !important; } .zw-spec-table td:first-child { width: 40% !important; min-width: 100px !important; } } /* ================================================================ QUANTITY SPINNER — Rounded edges, no internal divider borders ================================================================ */ /* Container: rounded pill, clip children to enforce radius */ .theme-product-quantity-spinner { border-radius: 8px !important; overflow: hidden !important; border: 1.5px solid #d1d5db !important; display: flex !important; } /* All three inputs: reset all borders (container border is the outline) */ .theme-product-quantity-spinner input { border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; } /* − and + buttons */ .theme-product-quantity-spinner .theme-quantity-decrease, .theme-product-quantity-spinner .theme-quantity-increase { background: #f3f4f6 !important; color: #374151 !important; font-size: 16px !important; font-weight: 500 !important; width: 36px !important; cursor: pointer !important; } /* Qty text input — flex:1 fills all remaining width */ .theme-product-quantity-spinner input[data-theme-quantity] { background: #ffffff !important; text-align: center !important; flex: 1 !important; min-width: 36px !important; width: auto !important; } /* Hover states on +/- buttons */ .theme-product-quantity-spinner .theme-quantity-decrease:hover, .theme-product-quantity-spinner .theme-quantity-increase:hover { background: #e5e7eb !important; } /* Best Sellers and Shop ALL page fix */ /* ================================================ PRODUCT CARD TITLE — GLOBAL (All screen sizes) Brand name stacked above product name, bold brand, hyphen removed everywhere ================================================ */ /* Brand name: block-level so it sits above the product name */ .theme-brand-product-name { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .theme-brand-product-name .theme-brand-name { display: block !important; font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; margin-bottom: 2px !important; line-height: 1.3 !important; } /* Hide the hyphen separator on all screen sizes */ .theme-brand-product-name .theme-brand-separator { display: none !important; } /* Product name sits cleanly below the brand */ .theme-brand-product-name .theme-product-name { display: block !important; white-space: normal !important; line-height: 1.4 !important; } /* --- MOBILE LAYOUT FIXES (Screens 768px and smaller) --- */ @media screen and (max-width: 768px) { /* 1. Force 2 products per row instead of 3 (Applies to Best Sellers & Shop All Pages), EXCLUDES Filmstrip */ :not(.zpfilmstrip-gutter-fix) > .theme-store-style-collection-row-19 .theme-prod-box, .theme-product-ratio .theme-prod-box { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; } /* 2. Fix awkward line breaks in the product title (Applies everywhere, including filmstrip) */ .theme-brand-product-name { display: block !important; } /* Brand name: slightly smaller on mobile cards, still bold and stacked */ .theme-brand-product-name .theme-brand-name { display: block !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; margin-bottom: 2px !important; white-space: normal !important; } .theme-brand-product-name .theme-product-name { display: block !important; white-space: normal !important; font-size: 13px !important; } /* 3. Hide the hyphen on mobile to save horizontal space */ .theme-brand-product-name .theme-brand-separator { display: none !important; } /* 4. No trailing space needed — brand is block-stacked, not inline */ .theme-brand-product-name .theme-brand-name::after { content: "" !important; } } /* ================================================ PRODUCT TILE — style-17 — FULL FINAL Changes in this version: - Discount bubble moved to TOP RIGHT (was top left) Desktop: top:8px / right:8px Mobile: top:6px / right:6px ================================================ */ /* ── Base card ── */ .theme-product-list-style-17 .theme-product-box-content { background: #ffffff !important; border: 1px solid transparent !important; border-radius: 8px !important; overflow: visible !important; position: relative !important; transition: border-color 0.22s ease, box-shadow 0.22s ease !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; height: 100% !important; } /* ── Card hover ── */ .theme-product-list-style-17 .theme-product-box-content:hover { border-color: #c7e0fe !important; box-shadow: 0 6px 24px rgba(37, 99, 235, 0.10) !important; } /* ── Image area ── */ .theme-product-list-style-17 .theme-product-image-area { position: relative !important; width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; min-height: unset !important; max-height: unset !important; overflow: hidden !important; border-radius: 7px 7px 0 0 !important; background: #f8f8f8 !important; transition: transform 0.25s ease, border-radius 0.25s ease, box-shadow 0.25s ease !important; z-index: 1 !important; flex-shrink: 0 !important; } /* ── Image: full display, no crop, no filter ── */ .theme-product-list-style-17 .theme-product-image-area img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; filter: none !important; mix-blend-mode: normal !important; display: block !important; } .theme-product-list-style-17 .theme-product-image-area picture { display: block !important; width: 100% !important; height: 100% !important; } /* ── Strip all pseudo-element overlays from template ── */ .theme-product-list-style-17 .theme-product-image-area::before, .theme-product-list-style-17 .theme-product-image-area::after, .theme-product-list-style-17 .theme-product-image-area a::before, .theme-product-list-style-17 .theme-product-image-area a::after, .theme-product-list-style-17 .theme-product-image-area picture::before, .theme-product-list-style-17 .theme-product-image-area picture::after { display: none !important; background: none !important; opacity: 0 !important; } /* ── Image pop-out on card hover ── */ .theme-product-list-style-17 .theme-product-box-content:hover .theme-product-image-area { transform: scale(1.025) translateY(-4px) !important; border-radius: 8px !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10) !important; } /* ════════════════════════════════════════════════ DISCOUNT BUBBLE — top RIGHT ════════════════════════════════════════════════ */ .theme-product-list-style-17 .theme-product-image-area .theme-product-ribbon-area { all: unset !important; position: absolute !important; top: 8px !important; right: 8px !important; z-index: 10 !important; pointer-events: none !important; display: block !important; } .theme-product-list-style-17 .theme-product-image-area .theme-product-ribbon-area * { all: unset !important; } .theme-product-list-style-17 .theme-product-image-area .theme-product-sale-ribbon[data-zs-sale] { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #e53e3e !important; border-radius: 4px !important; padding: 4px 8px !important; line-height: 1 !important; } .theme-product-list-style-17 .theme-product-image-area .theme-product-sale-ribbon[data-zs-sale] .theme-sale-message { display: inline !important; font-family: inherit !important; font-size: 11px !important; font-weight: 700 !important; color: #ffffff !important; white-space: nowrap !important; letter-spacing: 0.4px !important; line-height: 1 !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; } /* ════════════════════════════════════════════════ DETAILS AREA ════════════════════════════════════════════════ */ .theme-product-list-style-17 .theme-product-details-area { padding: 10px 12px 12px 12px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; gap: 0 !important; } .theme-product-list-style-17 .theme-product-details-area .theme-name-variants { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } /* ── Product name ── */ .theme-product-list-style-17 .theme-product-name a { font-size: 14px !important; font-weight: 700 !important; color: #111111 !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-decoration: none !important; margin-bottom: 6px !important; transition: color 0.18s ease !important; } .theme-product-list-style-17 .theme-product-box-content:hover .theme-product-name a { color: #2563eb !important; } /* ── Prices ── */ .theme-product-list-style-17 .theme-product-price .theme-product-detail-price-area { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 6px !important; overflow: hidden !important; } .theme-product-list-style-17 .theme-product-price span[data-zs-selling-price], .theme-product-list-style-17 .theme-product-price span[data-zs-label-price] { white-space: nowrap !important; flex-shrink: 1 !important; min-width: 0 !important; } .theme-product-list-style-17 .theme-product-price span[data-zs-selling-price] { font-size: clamp(14px, 3.5vw, 19px) !important; font-weight: 700 !important; color: #111111 !important; } .theme-product-list-style-17 .theme-product-price span[data-zs-label-price] { font-size: clamp(11px, 2.5vw, 13px) !important; color: #9e9e9e !important; text-decoration: line-through !important; font-weight: 400 !important; } /* ── GST label ── */ .theme-product-list-style-17 .zw-gst-label { display: block !important; font-size: 12px !important; color: #757575 !important; margin-top: 3px !important; margin-bottom: 0 !important; font-weight: 400 !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ── Suppress variant dropdown ── */ .theme-product-list-style-17 details.theme-list-variants { display: none !important; } /* ── Button area pinned to bottom ── */ .theme-product-list-style-17 .theme-product-list-addcart { margin-top: auto !important; padding-top: 10px !important; padding-bottom: 0 !important; } .theme-product-list-style-17 .theme-product-list-addcart .theme-product-button-area { padding: 0 !important; margin: 0 !important; } /* ── Add to Cart ── */ .theme-product-list-style-17 .theme-product-list-addcart .theme-product-button-area a[data-zs-add-to-cart] { display: block !important; width: 100% !important; text-align: center !important; background: #ffffff !important; color: #2563eb !important; border: 1.5px solid #2563eb !important; border-radius: 10px !important; padding: 12px 16px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: background-color 0.18s ease, color 0.18s ease !important; box-sizing: border-box !important; text-decoration: none !important; letter-spacing: 0.2px !important; } .theme-product-list-style-17 .theme-product-list-addcart .theme-product-button-area a[data-zs-add-to-cart] span[data-theme-cart-button-text] { color: #2563eb !important; font-size: 14px !important; font-weight: 600 !important; } .theme-product-list-style-17 .theme-product-list-addcart .theme-product-button-area a[data-zs-add-to-cart]:hover { background: #2563eb !important; color: #ffffff !important; } .theme-product-list-style-17 .theme-product-list-addcart .theme-product-button-area a[data-zs-add-to-cart]:hover span[data-theme-cart-button-text] { color: #ffffff !important; } /* ── Out of Stock ── */ .theme-product-list-style-17 .theme-ribbon-stock[data-zs-outofstock] { display: block !important; width: 100% !important; text-align: center !important; background: #f3f4f6 !important; color: #6b7280 !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; padding: 12px 16px !important; font-size: 14px !important; font-weight: 600 !important; box-sizing: border-box !important; cursor: not-allowed !important; letter-spacing: 0.2px !important; } /* ── Kill Buy Now ── */ .theme-buynow-btn { display: none !important; } /* ════════════════════════════════════════════════ TOUCH DEVICES — disable sticky hover states ════════════════════════════════════════════════ */ @media (hover: none) { .theme-product-list-style-17 .theme-product-box-content:hover { border-color: transparent !important; box-shadow: none !important; } .theme-product-list-style-17 .theme-product-box-content:hover .theme-product-image-area { transform: none !important; box-shadow: none !important; border-radius: 7px 7px 0 0 !important; } .theme-product-list-style-17 .theme-product-box-content:hover .theme-product-name a { color: #111111 !important; } .theme-product-list-style-17 .theme-product-box-content { -webkit-tap-highlight-color: transparent !important; } } /* ════════════════════════════════════════════════ MOBILE — max-width: 768px ════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { /* 2 tiles per row */ :not(.zpfilmstrip-gutter-fix) > .theme-store-style-collection-row-19 .theme-prod-box, .theme-product-ratio .theme-prod-box { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; } .theme-product-list-style-17 { padding: 5px !important; box-sizing: border-box !important; } .theme-product-list-style-17 .theme-product-box-content { border: 1px solid #e5e7eb !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; overflow: hidden !important; } .theme-product-list-style-17 .theme-product-image-area { margin: 6px 6px 0 6px !important; width: calc(100% - 12px) !important; border-radius: 6px !important; aspect-ratio: 1 / 1 !important; height: auto !important; } .theme-product-list-style-17 .theme-product-details-area { padding: 8px 10px 10px 10px !important; } .theme-product-list-style-17 .theme-product-name { overflow: hidden !important; width: 100% !important; } .theme-product-list-style-17 .theme-product-name a { display: block !important; width: 100% !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; font-size: 12px !important; font-weight: 700 !important; margin-bottom: 4px !important; } .theme-product-list-style-17 .theme-product-name a.zw-name-scroll { animation: zw-marquee var(--zw-scroll-duration, 6s) linear infinite !important; animation-delay: 1.5s !important; will-change: transform !important; text-overflow: clip !important; } .theme-product-list-style-17 .theme-product-price .theme-product-detail-price-area { flex-wrap: nowrap !important; gap: 4px !important; } .theme-product-list-style-17 .theme-product-price span[data-zs-selling-price] { font-size: clamp(12px, 4.5vw, 16px) !important; white-space: nowrap !important; flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; } .theme-product-list-style-17 .theme-product-price span[data-zs-label-price] { font-size: clamp(9px, 3vw, 11px) !important; white-space: nowrap !important; flex-shrink: 2 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; } .theme-product-list-style-17 .zw-gst-label { font-size: clamp(9px, 2.8vw, 11px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-top: 2px !important; } .theme-product-list-style-17 .theme-product-list-addcart { padding-top: 8px !important; } .theme-product-list-style-17 .theme-product-list-addcart .theme-product-button-area a[data-zs-add-to-cart] { font-size: 12px !important; padding: 10px 8px !important; border-radius: 8px !important; } .theme-product-list-style-17 .theme-product-list-addcart .theme-product-button-area a[data-zs-add-to-cart] span[data-theme-cart-button-text] { font-size: 12px !important; } .theme-product-list-style-17 .theme-ribbon-stock[data-zs-outofstock] { font-size: 12px !important; padding: 10px 8px !important; border-radius: 8px !important; } /* Discount bubble — top RIGHT, 6px gap from edge */ .theme-product-list-style-17 .theme-product-image-area .theme-product-ribbon-area { top: 6px !important; right: 6px !important; } .theme-product-list-style-17 .theme-product-image-area .theme-product-sale-ribbon[data-zs-sale] .theme-sale-message { font-size: 10px !important; } } /* ── Tap active: prevent transparency ── */ .theme-product-list-style-17 .theme-product-box-content:active, .theme-product-list-style-17 .theme-product-box-content.zw-tap-reset { opacity: 1 !important; background: #ffffff !important; } .theme-product-list-style-17 a:active, .theme-product-list-style-17 a:focus { opacity: 1 !important; background: transparent !important; -webkit-tap-highlight-color: transparent !important; outline: none !important; } /* ================================================ SHOP BY BRANDS PAGE - Uniform logo tile size (fixed width + height) - 2-column grid on mobile - Subtle shadow + hover zoom effect ================================================ */ /* --- DESKTOP: Uniform Logo Cell Height --- */ .zpelem-col.zpcol-md-2 .zpelem-image:has(.zpimage-container:not(.zpimage-overlay)) { height: 130px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* --- FIXED TILE BOX --- */ .zpelem-col.zpcol-md-2 .zpimage-container:not(.zpimage-overlay) { width: 170px !important; height: 130px !important; border: 1px solid transparent !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important; padding: 12px !important; background: #ffffff !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; margin: 0 auto !important; position: relative !important; } /* --- FIGURE + PICTURE: reset so they don't push the box open --- */ .zpelem-col.zpcol-md-2 .zpimage-container:not(.zpimage-overlay) figure, .zpelem-col.zpcol-md-2 .zpimage-container:not(.zpimage-overlay) figure picture { display: flex !important; align-items: center !important; justify-content: center !important; width: 0 !important; /* stops figure/picture from being sized by their img child */ height: 0 !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } /* --- IMAGE: absolute pixel max values — immune to inline !important size --- Inner area = 170px - (12px × 2) = 146px wide 130px - (12px × 2) = 106px tall max-height/max-width always beat height/width in CSS, even when height/width use !important */ .zpelem-col.zpcol-md-2 .zpimage-container:not(.zpimage-overlay) figure img { max-width: 146px !important; max-height: 106px !important; width: auto !important; height: auto !important; object-fit: contain !important; object-position: center !important; display: block !important; position: relative !important; } /* --- HOVER --- */ .zpelem-col.zpcol-md-2 .zpimage-container:not(.zpimage-overlay):hover { transform: scale(1.06) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important; cursor: pointer !important; } /* --- MOBILE: 2-column grid --- */ @media screen and (max-width: 768px) { .zpelem-col.zpcol-md-2.zpcol-sm-12:has(.zpimage-container:not(.zpimage-overlay)) { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; } .zpelem-col.zpcol-md-2 .zpelem-image:has(.zpimage-container:not(.zpimage-overlay)) { height: 110px !important; } /* Mobile inner area = 140px - 20px = 120px wide, 110px - 20px = 90px tall */ .zpelem-col.zpcol-md-2 .zpimage-container:not(.zpimage-overlay) { width: 140px !important; height: 110px !important; padding: 10px !important; } .zpelem-col.zpcol-md-2 .zpimage-container:not(.zpimage-overlay) figure img { max-width: 120px !important; max-height: 90px !important; } } /* Product Listing Page /* ================================================ FILTER SIDEBAR — Fix thin font weight Zoho sets font-weight: 300 on filter labels, making them appear washed out despite dark colour ================================================ */ .theme-product-filter-box .theme-product-filter-text, .theme-product-filter-box label.theme-product-filter-text { font-weight: 400 !important; color: #1a1a1a !important; } /* Price range values */ .theme-product-filter-box .theme-product-filter-min-price, .theme-product-filter-box .theme-product-filter-max-price { font-weight: 400 !important; color: #1a1a1a !important; }