/* =================================================================== Fiemart — "Gadget & Gear" style theme Loads AFTER style.css + responsive.css to override the old green/gold achar palette with the G&G orange + white + Roboto look. Accent: #101518 · BG: #FFFFFF/#F5F6F8 · Ink nav: #101518 =================================================================== */ /* ---------- 1. Palette + font remap (variable-driven) ---------- */ :root { --primary: #101518; --primary-light: #2A3138; --primary-dark: #000000; --primary-rgb: 16, 21, 24; --secondary: #101518; --secondary-light:#2A3138; --secondary-dark: #000000; --accent: #101518; --accent-light: #2A3138; --accent-dark: #000000; --dark: #101518; --dark-light: #2A3138; /* neutral true-grays (replace the brown-tinted achar grays) */ --gray-900: #101518; --gray-800: #1F262C; --gray-700: #333B42; --gray-600: #4B555C; --gray-500: #737B82; --gray-400: #9AA1A7; --gray-300: #CBD0D4; --gray-200: #E5E8EA; --gray-100: #F0F2F4; --gray-50: #F7F8F9; --danger: #101518; --success: #101518; --bg-body: #FFFFFF; --bg-card: #FFFFFF; --font-primary: 'Roboto', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-heading: 'Roboto', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --shadow-sm: 0 2px 8px rgba(16,21,24,0.04); --shadow-md: 0 6px 18px rgba(16,21,24,0.07); --shadow-lg: 0 14px 34px rgba(16,21,24,0.10); --shadow-card: 0 2px 12px rgba(16,21,24,0.06); --shadow-glow: 0 6px 20px rgba(16, 21, 24,0.28); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* footer stays ink-black (style.css --footer-bg was green, now orange after the global hex swap — force it black so the footer matches Gadget & Gear) */ --footer-bg: #101518 !important; } html, body { background: var(--bg-body) !important; font-family: var(--font-primary) !important; color: #1F262C; } h1, h2, h3, h4, h5, h6, .section-title, .slide-title, .blog-title { font-family: var(--font-heading) !important; } /* NOTE: — do NOT force Hind Siliguri first here, or Latin text loses Roboto. Roboto leads the stack; Bengali glyphs auto-fall back to Hind Siliguri. */ /* ---------- 2. Generic accent cleanups ---------- */ a { color: inherit; } a:hover { color: var(--primary); } ::selection { background: rgba(16, 21, 24,0.18); } .text-primary, .text-success { color: var(--primary) !important; } .bg-primary { background: var(--primary) !important; } /* ---------- 3. Header (FULL BLACK bar like Gadget & Gear) ---------- */ .main-header { background: #101518 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.18); } .main-header .header-top, .main-header .container { background: transparent !important; } /* top announcement ticker — slightly darker strip */ .news-ticker-bar { background: #0A0E10 !important; color: #fff !important; border: 0 !important; } .news-ticker-bar .ticker-icon { color: var(--primary) !important; } .news-ticker-bar span { color: #E6E9EB !important; } .header-logo .logo-text { font-weight: 400 !important; letter-spacing: -0.5px; color: #fff !important; font-size: 1.5rem !important; line-height: 1.05; } .header-logo .logo-text::first-letter { color: var(--primary); } .header-logo .logo-tagline { color: #8A9299 !important; font-weight: 500; text-transform: uppercase; font-size: 0.58rem; letter-spacing: 0.4px; } /* compact header row like G&G: wide search, tight logo/icons */ .main-header .header-top { padding-top: 10px !important; padding-bottom: 10px !important; } .header-logo { flex: 0 0 auto; } .header-top .search-wrapper#searchWrapper { flex: 1 1 auto !important; max-width: 620px !important; margin: 0 22px !important; } .header-icons { gap: 8px !important; } /* G&G has no wishlist heart in the top bar — hide it there (still in account) */ .header-icons a[aria-label="Wishlist"] { display: none !important; } /* FULLY-ROUNDED (pill) white search like G&G. The WRAPPER carries the white pill (it sits behind the input and was square + wider → made the bar look square). */ .search-wrapper#searchWrapper, .search-wrapper#mobileHeaderSearch { background: #fff !important; border-radius: 999px !important; border: 0 !important; overflow: visible !important; padding: 0 !important; } .search-wrapper .search-input { border-radius: 999px !important; border: 0 !important; background: transparent !important; height: 46px; padding-left: 22px !important; padding-right: 50px !important; font-size: 0.95rem; } .search-wrapper .search-input:focus { box-shadow: 0 0 0 3px rgba(16, 21, 24,0.30) !important; } .search-wrapper .search-btn { background: transparent !important; color: var(--primary) !important; border: 0 !important; border-radius: 999px !important; right: 10px !important; } .search-wrapper .search-btn i { color: var(--primary) !important; font-size: 1.2rem !important; } /* Live-search suggestion chips (Shajgoj-style) shown at top of the search dropdown */ .search-suggests{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px 8px; border-bottom:1px solid #F0F1F3; } .search-chip{ border:0; background:#F2F3F5; color:var(--primary); font-size:.78rem; font-weight: 400; padding:6px 12px; border-radius:999px; cursor:pointer; white-space:nowrap; line-height:1.2; } .search-chip:hover{ background:var(--primary); color:#fff; } /* header action icons — white on black, become orange on hover */ .header-icon-btn { color: #fff !important; background: rgba(255,255,255,0.06) !important; border-radius: 10px !important; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; } .header-icon-btn:hover { color: #fff !important; background: var(--primary) !important; } .badge-count { background: var(--primary) !important; color: #fff !important; } /* cart = plain dark icon button like G&G (no white pill, no price text) */ .header-cart-wrap { background: transparent !important; padding: 0 !important; height: auto !important; border-radius: 10px !important; } .header-cart-wrap:hover { background: transparent !important; } .header-cart-amount { display: none !important; } /* the cart icon itself was inheriting a DARK color from style.css → invisible on the black header. Force it white + give it the same button chrome as the other icons. */ .header-cart-wrap .header-icon-btn, .header-cart-wrap:hover .header-icon-btn { color: #fff !important; background: rgba(255,255,255,0.06) !important; border-radius: 10px !important; width: 42px; height: 42px; } .header-cart-wrap .header-icon-btn:hover { background: var(--primary) !important; } .header-cart-wrap .header-icon-btn i { color: #fff !important; } /* Offers / Store-Locator top links (G&G style) */ .header-top-link { display: inline-flex; align-items: center; gap: 6px; color: #fff !important; text-decoration: none; font-weight: 400; font-size: 0.85rem; white-space: nowrap; } .header-top-link i { font-size: 1rem; } .header-top-link.offers-link { color: var(--primary) !important; } .header-top-link.locator-link { background: rgba(255,255,255,0.06); padding: 8px 14px; border-radius: 10px; } .header-top-link:hover { color: var(--primary) !important; } /* ---------- 4. Category nav bar (BLACK like G&G) ---------- */ .mega-nav { background: #101518 !important; border: 0 !important; box-shadow: 0 2px 10px rgba(16,21,24,0.12); } /* nav links start from the LEFT like Gadget & Gear (not centered) */ .mega-nav .nav.d-lg-flex, .mega-nav .navbar-collapse .nav { justify-content: flex-start !important; } .mega-nav .nav-link { color: #fff !important; font-weight: 500 !important; font-size: 0.85rem !important; letter-spacing: 0.1px; padding: 13px 11px !important; text-transform: none; white-space: nowrap; } .mega-nav .nav-item:first-child .nav-link { padding-left: 0 !important; } @media (min-width: 992px){ .mega-nav .nav.d-lg-flex { flex-wrap: nowrap !important; } } .mega-nav .nav-link:hover, .mega-nav .nav-item:hover > .nav-link { color: var(--primary) !important; } .mega-nav .nav-link i { color: inherit !important; } /* mega dropdown panel stays light */ .mega-nav .mega-dropdown, .mega-nav .dropdown-menu { background: #fff !important; color: #101518 !important; } /* mobile nav tabs */ .mobile-tab-btn.active { color: var(--primary) !important; border-color: var(--primary) !important; } /* ---------- 5. Section headings ---------- */ .section-title { color: #101518 !important; font-weight: 400 !important; letter-spacing: -0.3px; } .section-subtitle { color: var(--gray-500) !important; } /* "Show All" links */ .section-spacing a[href]:not(.product-card):not(.btn-global) { } .view-all-link, .section-view-all, a.show-all { color: var(--primary) !important; font-weight: 400 !important; } /* ---------- 6. Product cards (G&G look) ---------- */ .product-card { background: #fff !important; border: 1px solid var(--gray-200) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; overflow: hidden; } .product-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px); border-color: var(--gray-300) !important; } .product-image-wrap { background: #fff !important; padding: 10px; position: relative; overflow: hidden; } .product-image { mix-blend-mode: normal; } /* NEW ARRIVAL corner ribbon = SVG image in the top-left corner (like Gadget & Gear) */ .product-ribbon-img { position: absolute; top: 0; left: 0; width: 64px; height: 64px; z-index: 3; pointer-events: none; } /* keep the -X% sale tag on the TOP-RIGHT so it doesn't clash with the corner ribbon */ .product-badges { left: auto !important; right: 10px !important; } /* carousel arrows = clean white circle w/ dark chevron (Gadget & Gear) */ .carousel-nav { background: #fff !important; color: #101518 !important; border: 1px solid var(--gray-200) !important; box-shadow: var(--shadow-md) !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; } .carousel-nav i { color: #101518 !important; } .carousel-nav:hover { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } .carousel-nav:hover i { color: #fff !important; } /* card info CENTERED like Gadget & Gear */ .product-info { text-align: center !important; } .product-info .product-rating { justify-content: center !important; } .product-info .product-price-wrap { justify-content: center !important; text-align: center !important; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } /* brand / category label */ .product-category-label { color: var(--gray-500) !important; font-weight: 400 !important; font-size: 0.68rem !important; text-transform: uppercase; letter-spacing: 0.4px; text-align: center; } .product-name { color: #1F262C !important; font-weight: 500 !important; font-size: 0.9rem !important; min-height: 2.4em; } /* star rating in G&G gold-orange */ .product-rating i { color: #F6A609 !important; font-size: 0.8rem; } .product-rating .rating-count { color: var(--gray-500) !important; } /* price: bold orange + struck grey original (beats .offer-product-card override) */ .product-price, .offer-product-card .product-price, .product-card .product-price { color: var(--primary) !important; font-weight: 400 !important; font-size: 1.02rem !important; } .product-original-price, .offer-product-card .product-original-price, .product-card .product-original-price { color: var(--gray-400) !important; text-decoration: line-through; font-weight: 500 !important; font-size: 0.82rem !important; } /* sale badge -> orange; featured -> red NEW ARRIVAL ribbon */ .product-badge.sale { background: var(--primary) !important; color: #fff !important; border-radius: 6px !important; font-weight: 400 !important; } .product-badge.hot { background: #101518 !important; color: #fff !important; font-weight: 400 !important; letter-spacing: 0.3px; } /* wishlist / quick-view float buttons */ .product-action-btn { background: #fff !important; color: #101518 !important; box-shadow: var(--shadow-sm); } .product-action-btn:hover { background: var(--primary) !important; color: #fff !important; } /* ---------- 7. Buttons ---------- */ .btn-global, .btn-global-dark-red, .add-to-cart-btn { background: var(--primary) !important; /* solid black */ color: #fff !important; /* white text */ border: 1.5px solid var(--primary) !important; border-radius: 999px !important; font-weight: 400 !important; transition: background .15s ease, color .15s ease; } .btn-global:hover, .btn-global-dark-red:hover, .add-to-cart-btn:hover { background: #2A3138 !important; /* slightly lighter on hover */ color: #fff !important; } .add-to-cart-btn:disabled { background: var(--gray-100) !important; color: var(--gray-400) !important; border-color: var(--gray-200) !important; } /* WhatsApp / Call buttons keep their brand colours (the generic .btn-global override above was hijacking them → white text on faint orange = invisible). Restore green / blue. */ .btn-global.btn-whatsapp, a.btn-whatsapp { background: #25D366 !important; color: #fff !important; border: 0 !important; } .btn-global.btn-whatsapp:hover, a.btn-whatsapp:hover { background: #1EBE5A !important; color: #fff !important; } .btn-global.btn-call, a.btn-call { background: #00A8FF !important; color: #fff !important; border: 0 !important; } .btn-global.btn-call:hover, a.btn-call:hover { background: #0091DD !important; color: #fff !important; } .btn-global.btn-whatsapp i, .btn-global.btn-call i { color: #fff !important; } /* WhatsApp / Call were shorter (chapta) than Add-to-Cart/Buy-Now → match their height + keep pill */ .btn-global.btn-whatsapp, a.btn-whatsapp, .btn-global.btn-call, a.btn-call{ min-height:50px; padding-top:12px !important; padding-bottom:12px !important; border-radius:999px !important; } /* the two main product buttons: Add to Cart = solid orange, Buy Now = orange outline */ .qv-buttons .btn-global-dark-red { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } .qv-buttons .btn-global-dark-red:hover { background: var(--primary-dark) !important; } .qv-buttons .btn-global-dark-red i { color: #fff !important; } /* solid primary CTAs (checkout etc.) */ .btn-checkout-next, .mini-cart-checkout-btn, .btn-primary, .btn-buy-now { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; border-radius: 999px !important; font-weight: 400 !important; } .btn-checkout-next:hover, .mini-cart-checkout-btn:hover, .btn-primary:hover { background: var(--primary-dark) !important; } /* ---------- 8. Featured category circles ---------- */ .category-card, .cat-circle, .category-icon-card { background: transparent !important; border: 0 !important; } .category-card:hover { transform: translateY(-3px); } .category-card .cat-card-icon, .category-icon-wrap { background: var(--gray-100) !important; border-radius: 50% !important; transition: background .15s ease, box-shadow .15s ease; } .category-card:hover .cat-card-icon { background: rgba(16, 21, 24,0.12) !important; box-shadow: var(--shadow-sm); } /* ---------- 8b. Trust / USP badge row ---------- */ .trust-badges-section { padding: 20px 0; background: transparent; border: 0; } .trust-badges-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 14px; } .trust-badge { display: flex; align-items: center; gap: 10px; color: #101518; font-weight: 400; font-size: 0.9rem; } .trust-badge i { color: var(--primary); font-size: 1.5rem; } /* thin vertical divider between badges (like Gadget & Gear) */ @media (min-width: 768px){ .trust-badge:not(:last-child)::after { content: ""; width: 1px; height: 26px; background: var(--gray-300); margin-left: clamp(14px, 3vw, 40px); } } @media (max-width: 767px){ .trust-badge { flex: 0 0 46%; font-size: 0.8rem; } .trust-badge i { font-size: 1.2rem; } } /* ---------- 8c. Shop by Brands strip ---------- */ .brand-strip-section { background: #fff; } .brand-logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .brand-logo-chip { display: flex; align-items: center; justify-content: center; min-height: 68px; padding: 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .brand-logo-chip:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .brand-logo-chip img { max-height: 40px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .15s, opacity .15s; } .brand-logo-chip:hover img { filter: grayscale(0); opacity: 1; } .brand-logo-chip span { font-weight: 400; color: #101518; font-size: 0.92rem; letter-spacing: -0.2px; } .brand-logo-chip:hover span { color: var(--primary); } @media (max-width: 991px){ .brand-logo-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 575px){ .brand-logo-grid { grid-template-columns: repeat(3, 1fr); } } /* brand logo STRIP (horizontal, like G&G tab strip) */ .brand-logo-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; border-bottom: 1px solid var(--gray-200); padding-bottom: 18px; } .brand-strip-item { display: inline-flex; align-items: center; justify-content: center; min-width: 108px; height: 56px; padding: 8px 16px; text-decoration: none; border-radius: 8px; transition: background .15s ease, color .15s ease; } .brand-strip-item span { font-weight: 400; color: #101518; font-size: 0.92rem; letter-spacing: -0.2px; } .brand-strip-item img { max-height: 34px; max-width: 100px; object-fit: contain; filter: grayscale(1); opacity:.75; } .brand-strip-item:hover { background: var(--gray-100); } .brand-strip-item:hover span { color: var(--primary); } .brand-strip-item:hover img { filter: grayscale(0); opacity: 1; } /* Shop by Brands — tab strip (like G&G) */ .brand-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; border-bottom: 1px solid var(--gray-200); padding-bottom: 6px; margin-bottom: 22px; } .brand-tab { background: transparent; border: 0; cursor: pointer; padding: 12px 18px; font-weight: 400; font-size: 0.92rem; color: #6B7278; border-bottom: 2px solid transparent; margin-bottom: -7px; transition: color .15s ease, border-color .15s ease; display: inline-flex; align-items: center; min-height: 44px; } .brand-tab img { max-height: 26px; max-width: 92px; object-fit: contain; filter: grayscale(1); opacity: .7; } .brand-tab:hover { color: #101518; } .brand-tab.active { color: #101518; border-bottom-color: var(--primary); } .brand-tab.active img { filter: grayscale(0); opacity: 1; } .brand-tab-showall { margin-left: 6px; color: var(--primary); font-weight: 400; font-size: 0.85rem; text-decoration: none; white-space: nowrap; } .brand-tab-showall:hover { color: var(--primary-dark); } /* promo banner grids (image cards over background) */ .promo-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .promo-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .promo-banner-card { display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .promo-banner-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .promo-banner-card img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 767px){ .promo-grid-4 { grid-template-columns: repeat(2, 1fr); } .promo-grid-2 { grid-template-columns: 1fr; } } /* Exclusively Available — grey panel + brand grid (like G&G) */ .excl-avail-panel { background: var(--gray-100); border-radius: var(--radius-lg); padding: 34px; display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; } .excl-avail-title { font-size: 2.4rem; font-weight: 400; line-height: 1.05; color: #B8BEC4; letter-spacing: -1px; } .excl-avail-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .excl-avail-chip { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; height: 58px; padding: 8px; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .15s ease; } .excl-avail-chip:hover { transform: translateY(-2px); } .excl-avail-chip span { font-weight: 400; color: #101518; font-size: 0.8rem; } .excl-avail-chip:hover span { color: var(--primary); } .excl-avail-chip img { max-height: 30px; max-width: 78px; object-fit: contain; } @media (max-width: 991px){ .excl-avail-panel { grid-template-columns: 1fr; } .excl-avail-title { font-size: 1.8rem; text-align:center; } .excl-avail-grid { grid-template-columns: repeat(4,1fr); } } @media (max-width: 479px){ .excl-avail-grid { grid-template-columns: repeat(3,1fr); } } /* Home SEO text block */ .home-seo-section { padding: 40px 0 10px; } .home-seo-section h2 { font-size: 1.5rem; font-weight: 400; color: #101518; margin-bottom: 12px; } .home-seo-section h3 { font-size: 1.1rem; font-weight: 400; color: #101518; margin: 20px 0 8px; } .home-seo-section p { color: var(--gray-600); font-size: 0.92rem; line-height: 1.7; margin-bottom: 10px; } /* ---------- 8d. Featured Categories grid (G&G: centered circles, 2 rows) ---------- */ .featured-cats-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 26px 8px; justify-items: center; } .featured-cats-section .category-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; width: 100%; } .category-card .cat-icon { width: 104px; height: 104px; border-radius: 50%; background: #F1F3F5 !important; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; overflow: hidden; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; } /* Kill the old orange full-card hover (style.css set .category-card:hover background:var(--primary)!important → made the first hovered card a big orange box). Keep the card clean; hover feedback is the icon + name. */ .category-card, .category-card:hover { background: transparent !important; box-shadow: none !important; border: 0 !important; } .category-card:hover .cat-icon { background: #F2F3F5 !important; box-shadow: var(--shadow-sm); transform: translateY(-3px); } .category-card .cat-icon i { font-size: 42px; color: var(--primary); line-height: 1; } .category-card .cat-icon img, .category-card .cat-icon svg { width: 72px; height: 72px; object-fit: contain; } .category-card .cat-name { color:#101518 !important; font-weight: 400; font-size:0.86rem; text-align:center; } .category-card:hover .cat-name { color: var(--primary) !important; } .category-card .cat-count { display: none !important; } /* G&G shows no item count */ .category-card { text-align:center; } @media (max-width: 991px){ .featured-cats-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 479px){ .featured-cats-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 6px; } .category-card .cat-icon { width:74px; height:74px; } .category-card .cat-icon i { font-size:30px; } } /* ---------- 9. Hero / slider ---------- */ .hero-section { background: transparent !important; } .hero-slider-wrap, .hero-side-banner { border-radius: var(--radius-lg); } /* hero text sits on a dark banner → keep it white & readable */ .slide-title { color: #fff !important; text-shadow: 0 2px 16px rgba(0,0,0,0.45) !important; } .slide-desc { color: #E6E9EB !important; } .slide-overlay { background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15)) !important; } .slide-btn { background: var(--primary) !important; color: #fff !important; border-radius: 999px !important; } .swiper-pagination-bullet-active { background: var(--primary) !important; } .swiper-button-next, .swiper-button-prev { color: var(--primary) !important; } .slider-dot.active { background: var(--primary) !important; } /* ---------- 10. Mini-cart / drawer accents ---------- */ .mini-cart-header { border-bottom: 1px solid var(--gray-200); } .drawer-rec-add-btn { background: var(--primary) !important; color: #fff !important; border-radius: 999px !important; } .drawer-rec-price { color: var(--primary) !important; } /* ---------- 11. Footer (dark like G&G) ---------- */ .site-footer, footer.footer, .main-footer { background: #101518 !important; color: #C9CED2 !important; } .site-footer a, footer.footer a, .main-footer a { color: #C9CED2 !important; } .site-footer a:hover, footer.footer a:hover, .main-footer a:hover { color: var(--primary) !important; } .site-footer h4, .site-footer h5, .main-footer h4, .main-footer h5 { color: #fff !important; } /* ---------- 11b. Footer G&G layout ---------- */ .gg-footer .footer-box h5 { color: #fff !important; font-weight: 400 !important; font-size: 1rem !important; margin-bottom: 16px; } .gg-footer .footer-links-list { list-style: none; padding: 0; margin: 0; } .gg-footer .footer-links-list li { margin-bottom: 10px; } .gg-footer .footer-links-list a { color: #AEB4B9 !important; font-size: 0.88rem; text-decoration: none; } .gg-footer .footer-links-list a:hover { color: var(--primary) !important; } .gg-footer .footer-desc { color: #9AA1A7 !important; font-size: 0.86rem; line-height: 1.6; } .gg-footer .footer-brand-text { color: #fff !important; font-weight: 400; font-size: 1.6rem; text-decoration: none; } .gg-footer .footer-brand-text::first-letter { color: var(--primary); } .footer-call-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: #fff !important; padding: 9px 18px; border-radius: 999px; font-weight: 400; text-decoration: none; margin-top: 6px; font-size: 0.95rem; } .footer-call-btn:hover { background: var(--primary-dark); color:#fff !important; } .footer-email-line { display:block; color:#AEB4B9 !important; font-size:0.85rem; margin-top:12px; text-decoration:none; } .footer-email-line:hover { color: var(--primary) !important; } .footer-social-actions a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); color:#fff !important; margin-right:8px; font-size:1rem; transition:background .15s ease; } .footer-social-actions a:hover { background: var(--primary); } .footer-newsletter { display:flex; flex-direction:column; gap:8px; } .footer-newsletter input { width:100%; padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:#1A2126; color:#fff; font-size:0.85rem; } .footer-newsletter input::placeholder { color:#7A828A; } .footer-newsletter input:focus { outline:none; border-color:var(--primary); } .footer-subscribe-btn { background:var(--primary); color:#fff; border:0; border-radius:8px; padding:10px 14px; font-weight: 400; cursor:pointer; font-size:0.88rem; } .footer-subscribe-btn:hover { background:var(--primary-dark); } .footer-payments { display:flex; flex-wrap:wrap; gap:8px; } .footer-payments .pay-chip { background:#fff; color:#101518; font-weight: 400; font-size:0.72rem; padding:6px 12px; border-radius:6px; letter-spacing:0.2px; } /* Bottom bar: copyright LEFT + payments RIGHT (Gadget & Gear) */ .footer-bottom-bar { background:#0A0E10 !important; color:#8891 !important; padding:16px 0; } .footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .footer-bottom-bar p, .footer-copy-text { color:#8A9299 !important; font-size:0.82rem; margin:0; } .footer-dev-link { color:var(--primary) !important; text-decoration:none; font-weight: 400; } @media (max-width:767px){ .footer-bottom-inner{ flex-direction:column; text-align:center; } } /* Contact row (phone + email) in the newsletter column */ .footer-contact-lines { display:flex; flex-direction:column; gap:8px; } .footer-contact-item { display:inline-flex; align-items:center; gap:8px; color:#AEB4B9 !important; font-size:0.85rem; text-decoration:none; } .footer-contact-item i { color:var(--primary); } .footer-contact-item:hover { color:var(--primary) !important; } /* ---------- 11b2. Category INDEX grid (main categories, G&G style) ---------- */ .category-index-search-wrap { display:flex; justify-content:center; margin-bottom:34px; } .category-index-search { width:100%; max-width:440px; padding:12px 22px; border-radius:999px; border:1.5px solid var(--gray-200); background:#fff; font-size:0.95rem; color:#1F262C; } .category-index-search::placeholder { color: var(--gray-400); } .category-index-search:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(16, 21, 24,0.12); } .category-index-grid { row-gap: 36px; } /* ---------- 11c. Category faceted filter sidebar ---------- */ .filter-group { border-top: 1px solid var(--gray-200); padding: 14px 0; } .filter-group:first-of-type { border-top: 0; padding-top: 4px; } .filter-sidebar .filter-h { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; font-size: 0.82rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.4px; color: #101518; margin-bottom: 12px; padding-bottom: 0; border-bottom: 0; } .filter-toggle { font-size: 1.2rem; font-weight: 400; color: var(--gray-500); line-height: 1; } .filter-group.collapsed .filter-body { display: none; } .filter-group.collapsed .filter-h { margin-bottom: 0; } .filter-options:not(.expanded) .filter-check:nth-child(n+7) { display: none; } .filter-see-more { background: none; border: 1px solid var(--gray-300); border-radius: 6px; padding: 4px 14px; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.3px; color: var(--gray-600); cursor: pointer; margin-top: 8px; text-transform: uppercase; } .filter-see-more:hover { border-color: var(--primary); color: var(--primary); } .price-filter-row { display: flex; align-items: center; gap: 10px; } .price-filter-row > div { flex: 1; } .price-filter-row .price-lbl { font-size: 0.68rem; color: var(--gray-500); margin-bottom: 3px; } .price-filter-row input { width: 100%; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 0.85rem; } .price-filter-row input:focus { outline: none; border-color: var(--primary); } /* dual-range price slider */ .price-slider { position: relative; height: 30px; margin: 6px 4px 0; } .price-slider-track { position: absolute; top: 13px; left: 0; right: 0; height: 4px; background: var(--gray-200); border-radius: 4px; } .price-slider-range { position: absolute; top: 0; bottom: 0; background: var(--primary); border-radius: 4px; } .price-slider input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 30px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; } .price-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .price-slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); cursor: pointer; } /* quick brand pills (top of category listing) */ .brand-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 2px; } .brand-pill { display: inline-block; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700); font-size: 0.82rem; font-weight: 400; text-decoration: none; transition: all .15s ease; } .brand-pill:hover { border-color: var(--primary); color: var(--primary); } .brand-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; } .filter-check { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--gray-700); margin-bottom: 9px; cursor: pointer; } .filter-check input { accent-color: var(--primary); width: 15px; height: 15px; } .filter-check:hover { color: var(--primary); } .filter-check .fc-count { color: var(--gray-400); font-size: 0.76rem; margin-left: auto; } .filter-scroll { max-height: 220px; overflow-y: auto; padding-right: 4px; } .filter-scroll::-webkit-scrollbar { width: 5px; } .filter-scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; } .filter-actions .filter-clear { display: block; text-align: center; margin-top: 10px; font-size: 0.82rem; color: var(--gray-500); text-decoration: none; } .filter-actions .filter-clear:hover { color: var(--primary); } /* ---------- 11d. Product Specification table (Gadget & Gear style) ---------- */ .spec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .spec-table tr { border-bottom: 1px solid var(--gray-200); } .spec-table .spec-group-row td { background: #F2F3F5; color: var(--primary); font-weight: 400; padding: 12px 16px; text-transform: none; letter-spacing: 0.2px; } .spec-table .spec-key { color: var(--gray-600); padding: 12px 16px; width: 34%; vertical-align: top; font-weight: 500; } .spec-table .spec-val { color: #1F262C; padding: 12px 16px; vertical-align: top; } @media (max-width: 575px){ .spec-table .spec-key { width: 42%; } } /* ---------- 11e. Stock / availability badges ---------- */ .stock-badge { display:inline-block; padding:4px 12px; border-radius:6px; font-size:0.78rem; font-weight: 400; } .stock-badge.stock-in_stock { background:#E7F6EC; color:#16A34A; } .stock-badge.stock-out_of_stock { background:#F1F3F5; color:#6B7280; } .stock-badge.stock-preorder { background:#F2F3F5; color:var(--primary); } .stock-badge.stock-coming_soon{ background:#F2F3F5; color:#101518; } .stock-low { color:#101518; font-weight: 400; font-size:0.82rem; } /* card image corner badge for non-in-stock products */ /* stock status = a clean full-width strip along the BOTTOM of the image (no longer a corner badge that sat on top of the product). Absolute → does not change card height. */ .card-stock-badge { position:absolute; bottom:0; left:0; right:0; width:100%; z-index:3; padding:5px 8px; border-radius:0; font-size:0.58rem; font-weight: 400; text-transform:uppercase; letter-spacing:0.5px; color:#fff; text-align:center; } .card-stock-badge.card-stock-out_of_stock { background:#101518; } .card-stock-badge.card-stock-preorder { background:#101518; } .card-stock-badge.card-stock-coming_soon { background:#101518; } /* ---------- 12. Misc: badges, free-delivery bar orange ---------- */ .header-progress-bar-wrap { background: #F2F3F5 !important; border-color: rgba(16, 21, 24,0.15) !important; } #headerFreeDeliveryBar, #miniCartFreeDeliveryBar { background: linear-gradient(90deg, var(--primary), var(--primary-light)) !important; } #headerFreeDeliveryMsg, #miniCartFreeDeliveryMsg, .free-delivery-text { color: var(--primary) !important; } .free-delivery-progress-wrap { background: #F2F3F5 !important; border-color: rgba(16, 21, 24,0.2) !important; } /* ===== Category intro blurb + bottom SEO article (Gadget & Gear style) ===== */ .category-intro{color:#5a6673;font-size:.95rem;line-height:1.7;max-width:1000px;margin-top:6px} .category-seo-article{background:#fff;border:1px solid #eef0f2;border-radius:14px;padding:26px 30px;color:#39424c;line-height:1.75;font-size:.95rem;box-shadow:var(--shadow-card)} .category-seo-article h1,.category-seo-article h2,.category-seo-article h3,.category-seo-article h4{color:#101518;font-weight: 400;margin:20px 0 12px;line-height:1.3} .category-seo-article h2{font-size:1.4rem} .category-seo-article h3{font-size:1.15rem} .category-seo-article p{margin:0 0 14px} .category-seo-article a{color:var(--primary);text-decoration:none} .category-seo-article a:hover{text-decoration:underline} .category-seo-article ul,.category-seo-article ol{margin:0 0 14px 22px} .category-seo-article li{margin:4px 0} .category-seo-article img{max-width:100%;height:auto;border-radius:8px} .category-seo-article table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.9rem;overflow-x:auto;display:block} .category-seo-article thead th{background:#f6f7f9;color:#101518;text-align:left} .category-seo-article th,.category-seo-article td{border:1px solid #e7eaee;padding:10px 14px;vertical-align:top} .category-seo-article tbody tr:nth-child(even){background:#fafbfc} @media(max-width:767px){.category-seo-article{padding:18px}} /* ===== Header hover MEGA-MENU (sub-categories) — Gadget & Gear style ===== */ @media (min-width: 992px){ .mega-nav .nav-item.has-mega{ position: relative; } .mega-nav .nav-item.has-mega > .nav-link .mega-caret{ font-size:.62rem; opacity:.75; margin-left:3px; transition:transform .15s; } .mega-nav .nav-item.has-mega:hover > .nav-link .mega-caret{ transform:rotate(180deg); } .mega-dropdown{ position:absolute; top:100%; left:0; margin-top:0; background:#fff; max-width:calc(100vw - 40px); max-height:74vh; overflow-y:auto; border:1px solid #eef0f2; border-top:3px solid var(--primary); border-radius:0 0 12px 12px; box-shadow:0 16px 36px rgba(0,0,0,.16); padding:12px; z-index:1400; display:none; opacity:0; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease; } /* adaptive width by sub-category count */ .mega-dropdown.mega-cols-1{ width:230px; } .mega-dropdown.mega-cols-2{ width:420px; } .mega-dropdown.mega-cols-3{ width:610px; } /* small hover bridge so the menu doesn't close in the gap */ .mega-dropdown::before{ content:""; position:absolute; top:-8px; left:0; right:0; height:8px; } .mega-nav .nav-item.has-mega:hover > .mega-dropdown{ display:block; opacity:1; transform:translateY(0); } .mega-list{ list-style:none; margin:0; padding:0; display:grid; gap:1px 6px; } .mega-cols-1 .mega-list{ grid-template-columns:1fr; } .mega-cols-2 .mega-list{ grid-template-columns:repeat(2,1fr); } .mega-cols-3 .mega-list{ grid-template-columns:repeat(3,1fr); } .mega-list > li{ position:relative; } .mega-list > li > a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 12px; border-radius:8px; color:#2b3138; font-size:.85rem; font-weight:500; text-decoration:none; white-space:nowrap; line-height:1.25; } .mega-list > li > a:hover{ background:#F2F3F5; color:var(--primary); } .mega-plus{ color:#9aa4ad; font-weight: 400; font-size:1rem; line-height:1; } .mega-list > li.has-flyout:hover > a .mega-plus{ color:var(--primary); } .mega-flyout{ position:absolute; top:-12px; left:100%; min-width:196px; background:#fff; border:1px solid #eef0f2; border-radius:12px; box-shadow:0 16px 36px rgba(0,0,0,.16); padding:8px; list-style:none; margin:0; display:none; z-index:1500; } .mega-list > li.has-flyout:hover > .mega-flyout{ display:block; } .mega-flyout li a{ display:block; padding:6px 12px; border-radius:8px; color:#2b3138; font-size:.84rem; text-decoration:none; white-space:nowrap; } .mega-flyout li a:hover{ background:#F2F3F5; color:var(--primary); } /* right-most nav items: open the dropdown flush to the right so it never leaves the viewport */ .mega-nav .nav-item.has-mega:nth-last-child(-n+4) .mega-dropdown{ left:auto; right:0; border-radius:12px 0 12px 12px; } .mega-nav .nav-item.has-mega:nth-last-child(-n+4) .mega-list > li.has-flyout:hover > .mega-flyout{ left:auto; right:100%; } } /* ===== Quick-view Specification tab table ===== */ .qv-spec-group{ margin-bottom:16px; } .qv-spec-group-title{ font-weight: 400; color:#101518; font-size:.9rem; margin:0 0 6px; padding-bottom:4px; border-bottom:2px solid #f0f1f3; } .qv-spec-table{ width:100%; border-collapse:collapse; font-size:.86rem; } .qv-spec-table tr{ border-bottom:1px solid #f0f1f3; } .qv-spec-table tr:last-child{ border-bottom:0; } .qv-spec-table th{ text-align:left; font-weight:500; color:#6b7480; width:42%; padding:7px 10px 7px 0; vertical-align:top; white-space:nowrap; } .qv-spec-table td{ color:#2b3138; padding:7px 0; vertical-align:top; } /* ===== Brand listing page (/brand) — Gadget & Gear style ===== */ .brand-search-wrap{ max-width:520px; margin:0 auto 30px; } .brand-search-input{ width:100%; height:46px; border:1px solid #e2e5e9; border-radius:10px; padding:0 18px; font-size:.95rem; background:#fff; outline:none; } .brand-search-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(16, 21, 24,.14); } .brand-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; } .brand-logo-card{ display:flex; flex-direction:column; align-items:center; text-decoration:none; background:#fff; border:1px solid #eef0f2; border-radius:14px; padding:26px 14px 16px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .brand-logo-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(16,21,24,.10); border-color:#e3d3c8; } .brand-logo-box{ height:60px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .brand-logo-box img{ max-height:56px; max-width:130px; object-fit:contain; } .brand-logo-text{ font-size:1.25rem; font-weight: 400; letter-spacing:-.3px; color:#101518; text-align:center; } .brand-logo-name{ font-size:.9rem; font-weight:500; color:#5a6673; text-align:center; } .brand-logo-card:hover .brand-logo-name{ color:var(--primary); } @media(max-width:1100px){ .brand-grid{ grid-template-columns:repeat(4,1fr); } } @media(max-width:767px){ .brand-grid{ grid-template-columns:repeat(3,1fr); gap:10px; } .brand-logo-box img{ max-width:96px; } } @media(max-width:460px){ .brand-grid{ grid-template-columns:repeat(2,1fr); } } /* ===== Numbered circular pagination (Gadget & Gear style) ===== */ .pagination{ gap:8px; flex-wrap:wrap; } .pagination .page-item{ list-style:none; } .pagination .page-link{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; border-radius:50%; border:1px solid #e2e5e9 !important; background:#fff; color:#2b3138 !important; font-size:.9rem; font-weight: 400; text-decoration:none; transition:all .14s ease; } .pagination .page-link:hover{ border-color:var(--primary) !important; color:var(--primary) !important; } .pagination .page-item.active .page-link{ background:var(--secondary) !important; border-color:var(--secondary) !important; color:#fff !important; } .pagination .page-item.disabled .page-link{ opacity:.45; pointer-events:none; } .pagination .page-item.ellipsis .page-link{ border:0 !important; background:transparent; pointer-events:none; min-width:24px; } /* Brand card product-count badge + summary */ .brand-count-summary{ text-align:center; color:#8a929a; font-size:.86rem; margin-top:10px; } .brand-count-summary strong{ color:#101518; font-weight: 400; } .brand-count-badge{ display:inline-block; margin-top:8px; padding:3px 12px; border-radius:999px; font-size:.76rem; font-weight: 400; background:#F2F3F5; color:var(--primary); } .brand-count-badge.is-empty{ background:#f0f1f3; color:#9aa4ad; } .brand-logo-card:hover .brand-count-badge{ background:var(--primary); color:#fff; } .brand-logo-card:hover .brand-count-badge.is-empty{ background:#e2e5e9; color:#6b7480; } /* ===== Footer = EXACT Gadget & Gear layout (no box border, outline call btn, inline form) ===== */ .footer-boxed-row, .main-footer .gg-footer.footer-boxed-row { border:0 !important; border-radius:0 !important; } .main-footer .container > .gg-footer { border:0 !important; } /* dividers between columns like G&G */ /* reduce the big empty space at the top of the footer (was 60px) + drop the top border line */ .main-footer{ padding-top:30px !important; border-top:0 !important; } /* no column divider lines / no box — clean like Gadget & Gear */ .gg-footer .footer-col .footer-box{ border:0 !important; padding-left:0 !important; background:transparent !important; } /* Call button — ORANGE OUTLINE (not filled) */ .footer-call-outline{ background:transparent !important; border:2px solid var(--primary); color:var(--primary) !important; padding:11px 22px; margin:0 0 4px; } .footer-call-outline i{ color:var(--primary); } .footer-call-outline:hover{ background:var(--primary) !important; color:#fff !important; } .footer-call-outline:hover i{ color:#fff; } /* In the footer --primary is white, so the generic :hover above (bg:var(--primary) + white text) turned the pill SOLID WHITE with invisible text — and iOS keeps :hover/:focus stuck after a tap. Force it to stay an OUTLINE button in the footer for EVERY interactive state: subtle translucent highlight, white text/border, never solid white. */ .gg-footer .footer-call-outline, .gg-footer .footer-call-outline:hover, .gg-footer .footer-call-outline:active, .gg-footer .footer-call-outline:focus, .gg-footer .footer-call-outline:focus-visible{ background: rgba(255,255,255,0.12) !important; color:#fff !important; border-color:#fff !important; } .gg-footer .footer-call-outline{ background: transparent !important; } /* resting = fully transparent */ .gg-footer .footer-call-outline i, .gg-footer .footer-call-outline:hover i, .gg-footer .footer-call-outline:active i, .gg-footer .footer-call-outline:focus i{ color:#fff !important; } /* Newsletter form horizontal (input + Subscribe side by side) */ .footer-newsletter-inline{ flex-direction:row !important; gap:0 !important; } .footer-newsletter-inline input{ border-radius:8px 0 0 8px !important; border-right:0 !important; } .footer-newsletter-inline .footer-subscribe-btn{ border-radius:0 8px 8px 0 !important; white-space:nowrap; padding-left:20px; padding-right:20px; } /* Contact row inline (phone | email on one line) */ .footer-contact-inline{ flex-direction:row !important; flex-wrap:wrap; gap:22px !important; align-items:center; } /* ===== Mobile menu category accordion (Gadget & Gear style) ===== */ .mobile-cat-accordion-wrap{ list-style:none; padding:0; } .mobile-cat-accordion{ display:flex; flex-direction:column; } .m-cat-row{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eef0f2; } .m-cat-link{ flex:1; padding:13px 4px; color:#101518 !important; font-weight: 400; font-size:.95rem; text-decoration:none; } .m-cat-toggle{ width:34px; height:34px; flex:0 0 34px; border:1px solid #e2e5e9; background:#fff; border-radius:8px; font-size:1.2rem; font-weight: 400; line-height:1; color:#333; cursor:pointer; } .m-cat-toggle.open{ background:var(--primary); border-color:var(--primary); color:#fff; } .m-cat-subs{ padding:4px 0 10px 12px; border-bottom:1px solid #eef0f2; } .m-cat-sublink{ display:block; padding:8px 6px; color:#5a6673 !important; font-size:.88rem; text-decoration:none; } .m-cat-sublink:hover{ color:var(--primary) !important; } .m-cat-showall{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:var(--primary) !important; font-weight: 400; text-decoration:none; font-size:.92rem; } /* ===== Mobile fixes to match Gadget & Gear ===== */ @media (max-width:991px){ /* 1. Hamburger = plain white 3-line icon (no white box behind it) */ .mobile-menu-btn{ background:transparent !important; border:0 !important; box-shadow:none !important; color:#fff !important; padding:4px 6px !important; } .mobile-menu-btn i{ color:#fff !important; font-size:1.7rem !important; } /* 2. Trust-badge USP row is desktop-only (G&G mobile has none) */ .trust-badges-section{ display:none !important; } /* 3. Mobile bottom nav = DARK like G&G (was orange) */ .mobile-bottom-nav{ background:#101518 !important; border-top:1px solid rgba(255,255,255,0.08) !important; box-shadow:0 -4px 16px rgba(0,0,0,0.25) !important; } .mobile-bottom-item{ color:#AEB4B9 !important; } .mobile-bottom-item i, .mobile-bottom-item .item-label{ color:inherit !important; } .mobile-bottom-item.active{ color:var(--primary) !important; } .mobile-bottom-item.active i, .mobile-bottom-item.active .item-label{ color:var(--primary) !important; } } /* ===== Mobile header (Shajgoj-style): hamburger (left) · logo (center) · cart (right), with the SEARCH BAR always visible full-width on its own row below ===== */ @media (max-width:991px){ /* let the top row wrap so the search becomes a full-width 2nd row */ .main-header .header-top > .d-flex{ flex-wrap:wrap !important; align-items:center; row-gap:10px; } .mobile-menu-btn{ order:1; flex:0 0 auto; } /* logo: static + centered between hamburger and cart (was absolute-centered) */ .header-logo{ position:static !important; transform:none !important; left:auto !important; top:auto !important; margin:0 !important; order:2; flex:1 1 auto; max-width:none !important; justify-content:center; } .header-logo .logo-text{ font-size:1.45rem !important; letter-spacing:.3px; } .header-icons{ order:3; flex:0 0 auto; } /* search toggle icon no longer needed — search is always shown */ #mobileSearchToggle{ display:none !important; } /* the mobile search = always-visible full-width white pill on row 2 */ #mobileHeaderSearch.search-wrapper{ display:flex !important; position:static !important; order:4; flex:1 0 100%; width:100%; max-width:100% !important; margin:0 !important; padding:0 !important; background:#fff !important; box-shadow:none !important; border-top:0 !important; animation:none !important; } } /* ===== Mobile header = WHITE, clean like Shajgoj (light theme, mobile only) ===== */ @media (max-width:991px){ .main-header{ background:#fff !important; box-shadow:0 1px 10px rgba(0,0,0,0.06) !important; border-bottom:1px solid #EFEFF2 !important; } /* hamburger = dark 3-line */ .mobile-menu-btn i{ color:#111418 !important; } /* logo = bold UPPERCASE letter-spaced dark wordmark (Shajgoj font style) */ .header-logo .logo-text{ color:#111418 !important; font-weight: 400 !important; letter-spacing:2.5px !important; text-transform:uppercase !important; font-size:1.4rem !important; } .header-logo .logo-text::first-letter{ color:#111418 !important; } /* cart + action icons = dark on the white header */ .header-icons .header-icon-btn, .header-cart-wrap .header-icon-btn{ color:#111418 !important; background:transparent !important; } .header-icons .header-icon-btn i, .header-cart-wrap .header-icon-btn i{ color:#111418 !important; } .header-icons .header-icon-btn:hover, .header-cart-wrap .header-icon-btn:hover{ background:transparent !important; color:var(--primary) !important; } .header-icons .header-icon-btn:hover i, .header-cart-wrap .header-icon-btn:hover i{ color:var(--primary) !important; } /* search = white pill with an ORANGE ring + magnifier on the LEFT (Shajgoj layout) */ #mobileHeaderSearch.search-wrapper{ border:1.6px solid var(--primary) !important; position:relative !important; } #mobileHeaderSearch .search-input{ padding-left:44px !important; padding-right:16px !important; color:#222 !important; } #mobileHeaderSearch .search-btn{ position:absolute !important; left:8px !important; right:auto !important; top:50% !important; transform:translateY(-50%) !important; width:auto !important; } #mobileHeaderSearch .search-btn i{ color:#8A9299 !important; } } /* ===== Mobile header COMPACT: smaller so it eats less space (content sits higher) ===== */ @media (max-width:991px){ .main-header .header-top{ padding-top:6px !important; padding-bottom:6px !important; } .main-header .header-top > .d-flex{ row-gap:6px !important; } .header-logo .logo-text{ font-size:1.2rem !important; letter-spacing:2px !important; } #mobileHeaderSearch .search-input{ height:38px !important; padding-top:6px !important; padding-bottom:6px !important; font-size:0.88rem !important; } /* hide the mobile header search on Category, Cart & Account pages (they don't need it) */ .page-category #mobileHeaderSearch, .page-cart #mobileHeaderSearch, .page-account #mobileHeaderSearch{ display:none !important; } } /* ===== iOS (iPhone Safari/Chrome = WebKit) overscroll + repaint hardening ===== Fixes: pulling/over-scrolling detached the fixed header & bottom-nav leaving white gaps, and the hero text ghosted/double-painted. Android (Blink) never had this. SCOPED TO iOS ONLY: `@supports (-webkit-touch-callout: none)` matches iOS Safari/Chrome and NOTHING else — so Android/desktop are completely untouched (their scrolling is exactly as before; these layer-promotions were breaking Android scroll when global). ===== */ @supports (-webkit-touch-callout: none) { /* NOTE: previously had `html,body{ overscroll-behavior-y:none }` to stop the rubber-band, but that also KILLED the browser's pull-to-refresh on iPhone (user wants it back). Removed — the layer-promotions below keep the fixed bars stable during overscroll, which was the real visual fix; pull-to-refresh now works again. */ /* give the fixed bars their own stable compositing layer so WebKit stops smearing them on scroll */ .main-header, .mobile-bottom-nav { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* the hero was promoted with a permanent will-change:transform (responsive.css) which iOS double-paints under the fixed header — pin it to a clean layer + drop the always-on hint */ .hero-section, .hero-slider, .hero-slide, .hero-slide-inner { -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: auto !important; } /* footer was painting only half-way on fast momentum scroll until you tapped it — putting it on its own compositing layer makes WebKit paint it immediately */ .gg-footer { -webkit-transform: translateZ(0); transform: translateZ(0); } } /* Login/Register tabs: the underline must follow the .active class, never the tab position. (Belt-and-suspenders after fixing switchAccTab's global selector — guarantees the active tab is the one underlined regardless of cascade/cache quirks.) */ .auth-tabs .auth-tab{ color: var(--gray-500) !important; border-bottom-color: transparent !important; } .auth-tabs .auth-tab.active{ color: var(--primary) !important; border-bottom-color: var(--primary) !important; } /* Mobile product carousel: show 2 cards per row like G&G (min-width:250px was forcing 1.5) */ @media (max-width:575px){ .common-carousel-item{ min-width:0 !important; flex:0 0 calc(50% - 12px) !important; margin:0 6px !important; } .common-carousel-item .product-card{ padding:8px !important; } .common-carousel-item .product-name{ font-size:.82rem !important; } /* carousel arrows smaller + not overlapping cards */ .carousel-nav{ width:30px !important; height:30px !important; } .carousel-nav.prev{ left:-4px !important; } .carousel-nav.next{ right:-4px !important; } } /* ===== Mobile: Featured Categories + Brand tabs like Gadget & Gear ===== */ @media (max-width:767px){ /* Featured categories = compact 2-row HORIZONTAL scroll, 4 per view, small circles */ .featured-cats-grid{ display:grid !important; grid-template-columns:none !important; grid-template-rows:repeat(2, auto) !important; grid-auto-flow:column !important; grid-auto-columns:calc(25% - 9px) !important; gap:16px 12px !important; overflow-x:auto !important; scroll-snap-type:x proximity; padding:4px 2px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .featured-cats-grid::-webkit-scrollbar{ display:none; } .featured-cats-grid .category-card{ scroll-snap-align:start; } .featured-cats-grid .cat-icon{ width:58px !important; height:58px !important; margin-bottom:8px !important; } .featured-cats-grid .cat-icon img, .featured-cats-grid .cat-icon svg{ width:36px !important; height:36px !important; } .featured-cats-grid .cat-name{ font-size:.72rem !important; line-height:1.2; } /* category INDEX page keeps a normal wrapping grid (not the home carousel) */ .category-index-grid{ grid-template-rows:none !important; grid-auto-flow:row !important; grid-template-columns:repeat(3,1fr) !important; overflow-x:visible !important; } /* Shop by Brands tab strip = single HORIZONTAL scroll row (was wrapping to 3 rows) */ .brand-tabs{ flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; gap:20px !important; padding-bottom:8px; scrollbar-width:none; } .brand-tabs::-webkit-scrollbar{ display:none; } .brand-tabs > *{ flex:0 0 auto !important; white-space:nowrap !important; } } /* Category carousel pagination dots (mobile, Gadget & Gear style) */ .cat-scroll-dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; } .cat-scroll-dots .cat-dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:#cfd4d9; cursor:pointer; transition:all .18s ease; } .cat-scroll-dots .cat-dot.active{ background:#101518; width:9px; height:9px; } @media (min-width:992px){ .cat-scroll-dots{ display:none !important; } } /* ===== Mobile: tighten the big gaps between sections (Gadget & Gear is compact) ===== */ @media (max-width:767px){ /* section vertical padding was 30–40px (×2 = 60–80px gaps between sections) → tighten. Only touch vertical padding — the shorthand "16px 0" was killing the left/right container padding. */ .section-spacing{ padding-top:16px !important; padding-bottom:16px !important; } /* section header bottom margin (title + subtitle block) */ section .mb-4{ margin-bottom:14px !important; } section .animate-on-scroll.mb-4, section .text-center.mb-4, section .d-flex.mb-4{ margin-bottom:14px !important; } /* brand tabs → products gap */ .brand-tabs-section .brand-tabs{ margin-bottom:8px !important; } /* Exclusively Available = compact small chips like G&G (was big 3-col cards) */ .excl-avail-panel{ padding:14px 12px !important; } .excl-avail-title{ font-size:1.3rem !important; margin-bottom:12px !important; } .excl-avail-grid{ grid-template-columns:repeat(4,1fr) !important; gap:8px !important; } .excl-avail-chip{ padding:8px 4px !important; height:40px !important; min-height:0 !important; border-radius:8px !important; } .excl-avail-chip span{ font-size:.64rem !important; line-height:1.1; } .excl-avail-chip img{ max-height:22px !important; max-width:56px !important; } } /* ===== Mobile: hero spacing + round dots + clean section headers (G&G) ===== */ @media (max-width:767px){ /* less empty space above the hero banner */ .section-spacing-top{ padding-top:6px !important; } .hero-section{ margin-top:0 !important; } /* hero slider dots = small ROUND dots (was a wide orange pill when active) */ .slider-dot{ width:8px !important; height:8px !important; border-radius:50% !important; } .slider-dot.active{ width:8px !important; height:8px !important; border-radius:50% !important; background:var(--primary) !important; } /* section headers: G&G shows just the title + Show All (no subtitle, smaller title) */ .section-subtitle{ display:none !important; } .section-title{ font-size:1rem !important; font-weight: 400 !important; } } /* ===== Mobile: "Show All" plain text link + hero dots not-orange (G&G) ===== */ @media (max-width:767px){ /* Show All / View All = plain orange TEXT link, no outlined pill (like G&G) */ .btn-see-more{ border:0 !important; background:transparent !important; padding:0 !important; color:var(--primary) !important; font-weight: 400 !important; font-size:.9rem !important; box-shadow:none !important; transform:none !important; } .btn-see-more:hover{ background:transparent !important; color:var(--primary-dark) !important; box-shadow:none !important; transform:none !important; } .btn-see-more i{ font-size:.8rem; } /* hero dots now sit BELOW the banner (outside the wrap) on the white page bg → dark dots (were invisible when white), active = orange, centered row */ .slider-dots{ position:static !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; justify-content:center !important; margin:9px 0 2px !important; } .slider-dot{ background:#CBD2D9 !important; border-color:#CBD2D9 !important; } .slider-dot.active{ background:var(--primary) !important; border-color:var(--primary) !important; } } /* Mobile: hero banner fuller / less surrounding empty space */ @media (max-width:767px){ .hero-section{ padding:4px 8px 0 !important; } .hero-section .container{ padding-left:0 !important; padding-right:0 !important; } } /* ===== Mobile: smaller Load More + tighter section margins ===== */ @media (max-width:767px){ .load-more-btn{ padding:8px 26px !important; font-size:.85rem !important; } section .mt-5{ margin-top:18px !important; } section .mb-5{ margin-bottom:16px !important; } section .mt-4{ margin-top:14px !important; } /* header → hero gap: the hero section sits too far below the sticky header */ .hero-section{ padding-top:0 !important; margin-top:0 !important; } main > section:first-child, main > .hero-section:first-child{ margin-top:0 !important; } } /* Mobile: fixed-header offset fallback. The AUTHORITATIVE value is set by JS in footer.php (body padding-top = header height + 14px mobile gap, inline !important which beats this rule). This is only the fallback if that JS fails to run. */ @media (max-width:767px){ body{ padding-top:116px !important; } } /* Mobile: hero banner proportion 401:280 (taller, was ~144px flat) */ @media (max-width:767px){ .hero-slider-wrap{ aspect-ratio:401 / 280 !important; height:auto !important; min-height:0 !important; } .hero-slider-wrap .hero-slide, .hero-slider-wrap .swiper-slide, .hero-slider-wrap .slider-slide, .hero-slider-wrap img{ height:100% !important; object-fit:cover !important; } } /* Mobile: hide "Featured Categories" heading (G&G has none), tighten category rows, fix carousel peek/arrows */ @media (max-width:767px){ /* category heading NOW shown on mobile (user wants a title + View All like other sections) */ .featured-cats-header{ display:flex !important; margin-bottom:10px !important; } /* tighter gap between the 2 category rows */ .featured-cats-grid{ gap:10px 10px !important; } /* show exactly 2 product cards (kill the awkward sliver of a 3rd card) */ .common-carousel-item{ flex:0 0 calc(50% - 8px) !important; margin:0 4px !important; } .common-carousel-track{ padding:0 !important; } /* carousel arrows: subtle white circles, slightly translucent, don't cover cards */ .carousel-nav{ width:28px !important; height:28px !important; background:rgba(255,255,255,0.92) !important; color:#101518 !important; box-shadow:0 2px 8px rgba(0,0,0,.15) !important; } .carousel-nav.prev{ left:0 !important; } .carousel-nav.next{ right:0 !important; } } /* Section title color per request (#292D32) */ .section-title{ color:#292D32 !important; } @media (max-width:767px){ /* vertically center the title with the "Show All" link (remove its bottom margin) */ .section-title{ margin:0 !important; } /* Featured Categories section: heading is hidden on mobile, so cut its empty top/bottom padding */ section:has(> .container > .featured-cats-grid), section:has(.featured-cats-grid){ padding-top:6px !important; padding-bottom:6px !important; } } /* Mobile: the product carousel container had 25px bottom padding → big gap under cards. Cut it. */ @media (max-width:767px){ .common-carousel-container{ padding-bottom:4px !important; } } /* Mobile: remove logo tagline text + tighten section gaps more */ @media (max-width:767px){ .header-logo .logo-tagline, .logo-tagline{ display:none !important; } .section-spacing{ padding-top:9px !important; padding-bottom:9px !important; } } /* Mobile: section title CENTERED + "Show All" absolute on the RIGHT (Gadget & Gear layout) */ @media (max-width:767px){ section .d-flex.justify-content-between:has(.section-title){ justify-content:space-between !important; position:relative !important; gap:8px !important; margin-top:14px !important; text-align:left !important; } section .d-flex.justify-content-between:has(.section-title) .btn-see-more{ position:static !important; transform:none !important; margin:0 !important; } } /* Mobile: category cards were 180px tall (content only ~72px) → huge empty band between the 2 rows. Collapse to content. */ @media (max-width:767px){ #featuredCatsGrid, .featured-cats-grid{ grid-template-rows:auto auto !important; align-items:start !important; row-gap:12px !important; } #featuredCatsGrid .category-card, .featured-cats-grid .category-card{ height:auto !important; min-height:0 !important; justify-content:flex-start !important; padding:4px 2px !important; align-self:start !important; } section:has(.featured-cats-grid){ padding-top:2px !important; } } /* Mobile: tighten the gap between the product carousel and the categories */ @media (max-width:767px){ .common-carousel-container{ padding-bottom:0 !important; } section:has(.featured-cats-grid){ padding-top:0 !important; } } /* Mobile: product cards — applied to BOTH the 2-up carousel AND the grid/list (Featured Products, Load-More, etc.) so every card looks identical. `margin-top:auto` pins the price+button to the card BOTTOM so buttons ALIGN across cards (no empty-space break). */ @media (max-width:767px){ .common-carousel-container{ scroll-snap-type:x mandatory !important; scroll-behavior:smooth; } /* carousel: exactly 2 cards, small 4px gap between them */ .common-carousel-item{ scroll-snap-align:start !important; flex:0 0 calc(50% - 4px) !important; margin:0 2px !important; } /* image area height (grid + carousel) — a bit taller per request */ .product-card .product-image-wrap, .common-carousel-item .product-card .product-image-wrap{ padding-top:100% !important; } /* tighter interior spacing */ .product-card .product-info, .common-carousel-item .product-card .product-info{ padding:9px 8px !important; } .product-card .product-category-label, .common-carousel-item .product-card .product-category-label{ margin-bottom:2px !important; } .product-card .product-name, .common-carousel-item .product-card .product-name{ margin-bottom:4px !important; height:2.9em !important; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.4; } .product-card .product-rating, .common-carousel-item .product-card .product-rating{ margin-bottom:6px !important; } /* no-review cards reserve the rating row's height (invisible) so every card is the same height */ .product-card .product-rating-empty, .common-carousel-item .product-card .product-rating-empty{ height:16px !important; } /* auto top-margin = price & button pinned to bottom → buttons ALIGN (fixes broken gap) */ .product-card .product-price-wrap, .common-carousel-item .product-card .product-price-wrap{ margin-top:auto !important; margin-bottom:8px !important; } /* smaller gap between GRID product cards (Bootstrap gutter was 16px → 6px), scoped to rows that actually hold product cards so other layouts are untouched */ .row.g-3:has(.product-card), .row.g-2:has(.product-card), .row.g-4:has(.product-card){ --bs-gutter-x:6px !important; --bs-gutter-y:8px !important; } /* Keep price + struck original on ONE line (long 6-digit prices were wrapping to 2 lines, making that card taller → the whole carousel stretched → big rating↔price gap on the others). nowrap + slightly smaller font → every card is the SAME height → gap gone. */ .product-card .product-price-wrap, .common-carousel-item .product-card .product-price-wrap{ flex-wrap:nowrap !important; white-space:nowrap; overflow:hidden; } .product-card .product-price, .common-carousel-item .product-card .product-price{ font-size:0.78rem !important; letter-spacing:-0.2px; } .product-card .product-original-price, .common-carousel-item .product-card .product-original-price{ font-size:0.66rem !important; } } /* ===== Mobile footer = Gadget & Gear layout (Newsletter first, horizontal link rows, stacked) ===== */ @media (max-width:767px){ .gg-footer{ text-align:center; } /* every column full-width & stacked (Help/Policy were side-by-side) */ .gg-footer .footer-col{ flex:0 0 100% !important; max-width:100% !important; } /* Newsletter block first (G&G mobile order), then call-btn+Company, Help, Policy */ .gg-footer .footer-col:has(.footer-newsletter){ order:-1 !important; } /* link lists = one horizontal centered row (Our Brands · Careers · Blogs · About Us) */ .gg-footer .footer-links-list{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:8px 18px; padding:0 8px; } .gg-footer .footer-links-list li{ margin:0 !important; } /* centered headings + underline */ .gg-footer .footer-box h5{ text-align:center; } .gg-footer .footer-box h5::after{ left:50% !important; transform:translateX(-50%) !important; } /* contact row + social centered */ .footer-contact-inline{ justify-content:center !important; } .footer-social-actions{ justify-content:center; display:flex; } .footer-call-outline{ display:inline-flex; } } /* Mobile footer: the .footer-box had 30px padding → huge gaps between sections. Make it compact like G&G. */ @media (max-width:767px){ .gg-footer .footer-box{ padding:6px 8px !important; } .gg-footer{ --bs-gutter-y:4px !important; row-gap:0 !important; } .gg-footer .footer-col{ padding-top:6px !important; padding-bottom:6px !important; } .footer-call-outline{ margin:4px 0 !important; } .gg-footer .footer-box h5{ margin-bottom:14px !important; } } /* Mobile: payment chips in ONE line (were wrapping to 2 rows) */ @media (max-width:767px){ .footer-payments{ flex-wrap:nowrap !important; overflow-x:auto !important; justify-content:center; gap:6px !important; scrollbar-width:none; padding:0 4px; } .footer-payments::-webkit-scrollbar{ display:none; } .footer-payments .pay-chip{ flex:0 0 auto; white-space:nowrap; font-size:.62rem !important; padding:5px 8px !important; } } /* Mobile: readable copyright (wraps to 2 lines instead of shrinking to a tiny nowrap line) */ @media (max-width:767px){ .footer-bottom-bar p, .footer-copy-text{ font-size:.8rem !important; white-space:normal; line-height:1.5; } .footer-bottom-inner{ padding:0 10px; } } /* ===== Mobile: results bar — COMPACT single line (short count + Filter + Sort) ===== */ .cat-count-short{ display:none; } @media (max-width:767px){ /* everything on one tight row */ .category-info-bar{ flex-wrap:nowrap; gap:8px; padding:10px 12px !important; } /* short count "13 products" on mobile; hide the verbose "Showing X of Y" */ .cat-count-full{ display:none; } .cat-count-short{ display:inline; white-space:nowrap; } .category-info-bar > .cat-count{ font-size:.82rem !important; flex:0 1 auto; min-width:0; } /* compact controls */ .category-info-bar > .d-flex{ flex:none; gap:8px !important; } .cat-filter-btn{ padding:5px 11px !important; font-size:.78rem !important; } .category-info-bar .cat-sort{ font-size:.78rem !important; padding:4px 22px 4px 8px !important; } } /* ===== Mobile: filter as a SIDE DRAWER (slide-in), like Gadget & Gear ===== */ .cat-filter-btn{ display:none; } .filter-mobile-header{ display:none; } .filter-overlay{ display:none; } @media (max-width:991px){ /* Filter button in the results bar */ .cat-filter-btn{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--primary); color:var(--primary); font-weight: 400; font-size:.82rem; padding:6px 14px; border-radius:8px; } /* the sidebar column no longer reserves space; the sidebar itself becomes a fixed drawer */ .container-category-grid .col-lg-3{ position:static; } .filter-sidebar{ position:fixed !important; top:0; left:0; bottom:0; width:86%; max-width:340px; z-index:3000; overflow-y:auto; transform:translateX(-100%); transition:transform .28s ease; border-radius:0 !important; margin:0 !important; box-shadow:0 0 40px rgba(0,0,0,.35); -webkit-overflow-scrolling:touch; } .filter-sidebar.open{ transform:translateX(0); } .filter-overlay{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:2999; opacity:0; visibility:hidden; transition:opacity .28s, visibility .28s; } .filter-overlay.open{ opacity:1; visibility:visible; } /* drawer header with close button */ .filter-mobile-header{ display:flex !important; align-items:center; justify-content:space-between; padding:4px 0 12px; margin-bottom:8px; border-bottom:1px solid #eef0f2; position:sticky; top:0; background:#fff; z-index:2; } .filter-mobile-title{ font-weight: 400; font-size:1rem; color:#101518; display:inline-flex; align-items:center; gap:8px; } .filter-mobile-title i{ color:var(--primary); } .filter-mobile-close{ width:34px; height:34px; border:0; background:#f0f1f3; border-radius:50%; font-size:1rem; color:#101518; cursor:pointer; } } /* ===== Mobile product page: horizontal scroll-nav TABS + all sections stacked (tab click = scroll) ===== */ @media (max-width:767px){ /* sticky horizontal scrollable tab bar (sits below the fixed header) */ /* Mobile: show ALL tabs nicely — WRAP to fit (no horizontal overflow / cut-off tabs) */ .nav-tabs#productTabs{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; overflow:visible !important; border-bottom:1px solid var(--gray-200) !important; gap:2px 0 !important; justify-content:center; position:static !important; background:#fff; } .nav-tabs#productTabs::-webkit-scrollbar{ display:none; } .nav-tabs#productTabs .nav-item{ width:auto !important; flex:0 0 auto; } .nav-tabs#productTabs .nav-link{ border:0 !important; border-radius:0 !important; background:transparent !important; white-space:nowrap; padding:10px 14px !important; font-size:0.95rem !important; color:var(--gray-600) !important; font-weight:500; text-align:center; } .nav-tabs#productTabs .nav-link.active{ background:transparent !important; color:var(--primary) !important; border-bottom:2px solid var(--primary) !important; } .nav-tabs#productTabs .nav-link::after{ display:none !important; } /* ALL sections shown stacked (scroll-nav), each with its section label */ .tab-content .tab-pane{ display:block !important; opacity:1 !important; scroll-margin-top:150px; } .mobile-accordion-header{ display:flex !important; pointer-events:none; background:#F2F3F5 !important; color:var(--primary) !important; font-weight: 400; } .mobile-accordion-header i{ display:none !important; } } /* Mobile: remove the little orange underline dash under footer headings */ @media (max-width:767px){ .main-footer h5::after, .gg-footer .footer-box h5::after{ display:none !important; } } /* Mobile: remove the faint divider lines under footer headings + between sections */ @media (max-width:767px){ .gg-footer .footer-box h5{ border-bottom:0 !important; padding-bottom:0 !important; } .gg-footer .footer-col .footer-box{ border-top:0 !important; border-bottom:0 !important; } .gg-footer .footer-col{ border:0 !important; } } /* ===== Mobile: cart-page item row wrap (was overflowing right → prices/trash cut off) ===== */ @media (max-width:767px){ .cart-page .cart-item{ flex-wrap:wrap; gap:12px; padding:14px; } .cart-page .cart-item img{ width:64px !important; height:64px !important; } .cart-page .cart-item > .d-flex{ flex:1 1 100%; justify-content:space-between; } } /* ===== Mobile: hide the product sticky Add/Buy bar — it sat under the fixed bottom-nav (only "Add" peeked out); the in-page Add/Buy buttons + bottom-nav already cover it. ===== */ @media (max-width:991px){ .sticky-action-bar{ display:none !important; } /* sticky action bar is hidden on mobile, but the fixed bottom nav still needs clearance so the footer/copyright isn't covered by it (product pages carry .has-sticky-bar). */ body.has-sticky-bar{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)) !important; } } /* ============================================================ MONOCHROME (black & white only) — light surfaces override. Loads LAST → wins. Flips the dark header/nav/footer/bottom-nav to white with black text/icons. Accent orange is already black (var(--primary) = #101518). 2026-08-02 round 57. ============================================================ */ /* --- Header = white, black text/icons --- */ .main-header{ background:#fff !important; box-shadow:0 1px 10px rgba(0,0,0,0.06) !important; border-bottom:1px solid #ECEDEF !important; } .news-ticker-bar{ background:#F2F3F5 !important; } .news-ticker-bar span{ color:#101518 !important; } .news-ticker-bar .ticker-icon{ color:#101518 !important; } .header-logo .logo-text{ color:#101518 !important; } .header-logo .logo-text::first-letter{ color:#101518 !important; } .header-icon-btn, .header-cart-wrap .header-icon-btn{ color:#101518 !important; background:transparent !important; } .header-icon-btn i, .header-cart-wrap .header-icon-btn i{ color:#101518 !important; } .header-icon-btn:hover, .header-cart-wrap .header-icon-btn:hover{ background:#F2F3F5 !important; color:#000 !important; } .header-icon-btn:hover i, .header-cart-wrap .header-icon-btn:hover i{ color:#000 !important; } .header-top-link, .header-top-link.offers-link{ color:#101518 !important; } .header-top-link.locator-link{ background:#F2F3F5 !important; } .header-top-link:hover{ color:#000 !important; } .badge-count{ background:#101518 !important; color:#fff !important; } /* --- Category nav = white, black links --- */ .mega-nav{ background:#fff !important; border-bottom:1px solid #ECEDEF !important; box-shadow:0 2px 8px rgba(0,0,0,0.05) !important; } .mega-nav .nav-link{ color:#101518 !important; } .mega-nav .nav-link:hover, .mega-nav .nav-item:hover > .nav-link{ color:#000 !important; background:#F5F6F8 !important; } /* --- Footer stays DARK (unchanged); ONLY the marked orange accents (phone/email icons, call button, link hovers, brand letter) → WHITE, so nothing orange remains but the footer look is otherwise the same. Per user: only the marked items change. --- */ .site-footer, footer.footer, .main-footer, .gg-footer{ --primary:#ffffff !important; --primary-light:#ffffff !important; --primary-dark:#e6e6e6 !important; --accent:#ffffff !important; } /* solid buttons whose fill is now white → give them DARK text so the label is readable */ .footer-call-btn, .footer-subscribe-btn{ color:#101518 !important; } .footer-subscribe-btn:hover{ background:#e6e6e6 !important; color:#101518 !important; } /* --- Mobile bottom nav = white, black items (active = bold black) --- */ .mobile-bottom-nav{ background:#fff !important; border-top:1px solid #ECEDEF !important; box-shadow:0 -4px 16px rgba(0,0,0,0.08) !important; } .mobile-bottom-item{ color:#5A6673 !important; } .mobile-bottom-item i, .mobile-bottom-item .item-label{ color:inherit !important; } .mobile-bottom-item.active, .mobile-bottom-item.active i, .mobile-bottom-item.active .item-label{ color:#101518 !important; font-weight: 400 !important; } /* WhatsApp / Call buttons → black too (monochrome: no green/blue) */ .btn-global.btn-whatsapp, a.btn-whatsapp, .btn-global.btn-call, a.btn-call{ background:#101518 !important; color:#fff !important; } .btn-global.btn-whatsapp:hover, a.btn-whatsapp:hover, .btn-global.btn-call:hover, a.btn-call:hover{ background:#000 !important; color:#fff !important; } /* Rating stars: KEPT gold (Google rich-snippet / standard rating look) — per user request. No override. */ /* Bootstrap utility colors + tabs → monochrome (blue/red/green → black; .text-warning left GOLD for stars) */ .text-danger, .text-success, .text-primary, .text-info, .text-secondary{ color:#101518 !important; } .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info{ background-color:#101518 !important; color:#fff !important; } .btn-primary{ background:#101518 !important; border-color:#101518 !important; color:#fff !important; } .nav-tabs .nav-link, .nav-pills .nav-link, .nav-link{ color:#101518 !important; } .nav-tabs .nav-link.active, .nav-pills .nav-link.active{ color:#101518 !important; border-color:#101518 #101518 #fff !important; } .qv-discount, .discount-badge, .product-discount, .save-badge, .stock-low{ color:#101518 !important; } /* ===== 2026-08-03 round 58: Shajgoj-style mobile header + full-bleed hero ===== */ /* custom hamburger = 3 bars, each lower bar longer (staircase), monochrome black */ .mobile-menu-btn .ham-bars{ display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; width:26px; } .mobile-menu-btn .ham-bars span{ display:block; height:3px; border-radius:1px; background:#101518; } .mobile-menu-btn .ham-bars span:nth-child(1){ width:55%; } .mobile-menu-btn .ham-bars span:nth-child(2){ width:100%; } .mobile-menu-btn .ham-bars span:nth-child(3){ width:72%; } @media (max-width:991px){ /* remove the cart icon from the top header (Shajgoj has none; cart lives in the bottom nav) */ .header-cart-wrap{ display:none !important; } /* header-icons now empty → make it a spacer the width of the hamburger so the logo stays centered */ .header-icons{ min-width:38px !important; justify-content:flex-end; } } @media (max-width:767px){ /* hero banner = FULL-BLEED, square (sharp) corners like Shajgoj */ .hero-section{ padding-left:0 !important; padding-right:0 !important; } .hero-section .container{ padding-left:0 !important; padding-right:0 !important; max-width:100% !important; } .hero-slider-wrap{ border-radius:0 !important; aspect-ratio:980 / 632 !important; } /* Shajgoj mobile slider ratio */ } /* Hero overlay must read on the DARK banner (monochrome): white "Shop Now" button + translucent-white "Limited Offer" tag (button/tag were black → invisible on dark). */ .slide-btn{ background:#fff !important; color:#101518 !important; } .slide-btn:hover{ background:#F2F3F5 !important; color:#101518 !important; } .slide-btn i{ color:#101518 !important; } .slide-tag{ background:rgba(255,255,255,0.16) !important; color:#fff !important; } /* Mobile: hide the hover heart/eye action buttons on product cards — no hover on touch, they stuck open on tap and cluttered the image. Card tap still opens quick-view/details. */ @media (max-width:991px){ .product-actions{ display:none !important; } } /* Mobile menu drawer: close (X) button top-right */ .mobile-nav-header{ position:relative; padding-top:42px; } .mobile-nav-close{ position:absolute; top:6px; right:8px; z-index:6; width:36px; height:36px; border:0; background:transparent; color:#101518; font-size:1.15rem; display:flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; } .mobile-nav-close:hover{ background:#F2F3F5; } /* Category/listing grid gap: force small column padding directly (the --bs-gutter-x var alone didn't win on the category page where col padding was hardcoded to 8px → 16px gap). */ @media (max-width:767px){ .row.g-3:has(.product-card) > [class*="col-"], .row.g-2:has(.product-card) > [class*="col-"], .row.g-4:has(.product-card) > [class*="col-"]{ padding-left:3px !important; padding-right:3px !important; } .row.g-3:has(.product-card), .row.g-2:has(.product-card), .row.g-4:has(.product-card){ margin-left:-3px !important; margin-right:-3px !important; } } /* Category page header banner: clean dark gradient (was a faded/patchy radial gradient with a white glow → looked washed-out). */ /* Category page banner: clean SOLID dark (uniform, no uneven/faded gradient), matches header/footer */ .premium-page-header{ background:#101518 !important; background-image:none !important; } .premium-page-header .breadcrumb-item, .premium-page-header .breadcrumb-item + .breadcrumb-item::before, .premium-page-header nav *{ color:#C9CED2 !important; } .premium-page-header .breadcrumb-item.active, .premium-page-header h1{ color:#ffffff !important; } /* Remove the active-item indicator dot on the mobile bottom nav (per user) */ .mobile-bottom-item.active .item-icon-wrapper::after{ display:none !important; } /* Review star-picker: filled stars gold (from inline color), empty stars a light gray */ #reviewStarInput .bi-star{ color:#D9DCE0 !important; } /* No bold anywhere — normalize Bootstrap fw-bold + strong/b to a light medium (per user) */ .fw-bold, .fw-bolder, b, strong{ font-weight:500 !important; } /* (pink seam line removed — reverted to the plain light header border per user) */ /* Mobile: tighter side spacing on content sections (cards closer to the screen edges) */ @media (max-width:767px){ section .container, .section-spacing .container, .section-spacing-compact .container{ padding-left:8px !important; padding-right:8px !important; } } /* Featured Categories: remove the gray circle bg — just a bigger image + text (per user). Sized so an uploaded 512x512 category image looks crisp. */ .featured-cats-grid .category-card .cat-icon, .featured-cats-grid .category-card:hover .cat-icon{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; width:auto !important; height:auto !important; transform:none !important; margin:0 auto 8px !important; overflow:visible !important; } .featured-cats-grid .cat-icon img, .featured-cats-grid .cat-icon svg{ width:74px !important; height:74px !important; object-fit:contain; } .featured-cats-grid .cat-icon i{ font-size:58px !important; color:#101518 !important; } @media (max-width:767px){ .featured-cats-grid .cat-icon img, .featured-cats-grid .cat-icon svg{ width:62px !important; height:62px !important; } .featured-cats-grid .cat-icon i{ font-size:48px !important; } .featured-cats-grid{ gap:16px 4px !important; } } /* Section titles / labels bold again (per user); body text stays normal */ .section-title{ font-weight:700 !important; } /* Mobile: match carousel section's header→content gap to the grid sections (carousel had 25px top padding making its gap bigger — consistent now) */ @media (max-width:767px){ .common-carousel-container{ padding-top:0 !important; } } /* Mobile: reduce the gap above the product tab/accordion section */ @media (max-width:767px){ .tab-content{ margin-top:4px !important; } .product-tabs-section, .product-tabs-wrap{ margin-top:8px !important; } } /* Mobile: consistent tighter side padding across the whole site (product page had 12px → 8px) */ @media (max-width:767px){ .container, .container-fluid{ padding-left:8px !important; padding-right:8px !important; } } /* Product gallery: thumbnails on the LEFT (vertical column), main image on the right — per user reference */ .product-page-gallery{ display:flex !important; gap:10px; align-items:flex-start; } .product-page-gallery .product-main-swiper{ order:2; flex:1 1 auto; min-width:0; margin-bottom:0 !important; } .product-page-gallery #productThumbs{ order:1; flex:0 0 auto; flex-direction:column !important; flex-wrap:nowrap !important; gap:8px !important; } .product-page-gallery #productThumbs .qv-thumb{ width:58px !important; height:58px !important; } .product-page-gallery .qv-thumb.active{ border:2px solid #101518 !important; } @media (max-width:767px){ .product-page-gallery #productThumbs .qv-thumb{ width:52px !important; height:52px !important; } } /* Gallery side-layout fit fix: force the main image to shrink so nothing overflows */ .product-page-gallery{ overflow:hidden; } .product-page-gallery .product-main-swiper{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:100% !important; } .product-page-gallery #productThumbs{ flex:0 0 auto !important; } /* active thumb — clear dark border (covers both plain .active and swiper thumb-active) */ .product-page-gallery .qv-thumb.active, .product-page-gallery .swiper-slide-thumb-active .qv-thumb{ border:2px solid #101518 !important; } @media (max-width:767px){ .product-page-gallery #productThumbs .qv-thumb{ width:50px !important; height:50px !important; } } /* Gallery side-layout — FINAL: force main image to flex-shrink (width:1px + flex-grow), thumbnails matched to the reference (46px, 8px gap, 2px dark active border) */ @media (max-width:767px){ .product-page-gallery{ display:flex !important; gap:8px !important; align-items:flex-start !important; overflow:hidden !important; } .product-page-gallery #productThumbs{ order:0 !important; flex:0 0 46px !important; width:46px !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:8px !important; margin:0 !important; } .product-page-gallery #productThumbs .qv-thumb{ width:46px !important; height:46px !important; } .product-page-gallery .product-main-swiper{ order:1 !important; flex:1 1 0 !important; width:1px !important; min-width:0 !important; max-width:100% !important; margin:0 !important; } .product-page-gallery .product-main-swiper .swiper-slide, .product-page-gallery .product-page-main-img{ width:100% !important; } .product-page-gallery .qv-thumb.active{ border:2px solid #101518 !important; } } /* Mobile: product detail row/col shouldn't overflow the viewport (fixes gallery side-layout width) */ @media (max-width:767px){ .row.g-4{ --bs-gutter-x:12px !important; } .row.g-4 > .col-lg-6{ padding-left:6px !important; padding-right:6px !important; } } /* Gallery images = SHARP corners (no round), per user reference */ .product-page-gallery .qv-thumb{ border-radius:0 !important; } .product-page-gallery .product-main-swiper, .product-page-gallery .product-page-main-img, .product-page-gallery .swiper-slide img{ border-radius:0 !important; } /* Buttons much less round (were pill 999px → small radius) */ .btn-global, .btn-global-dark-red, .add-to-cart-btn, .btn-sticky-cart{ border-radius:999px !important; } /* Gallery FINAL: side padding + explicit main-image width (fits, no overflow) + active by opacity (no harsh black border) */ @media (max-width:767px){ .product-page-gallery{ padding-left:8px !important; padding-right:8px !important; box-sizing:border-box !important; gap:8px !important; } .product-page-gallery #productThumbs{ flex:0 0 46px !important; width:46px !important; } .product-page-gallery #productThumbs .qv-thumb{ width:46px !important; height:46px !important; } .product-page-gallery .product-main-swiper{ flex:0 0 auto !important; width:calc(100vw - 72px) !important; max-width:calc(100vw - 72px) !important; min-width:0 !important; } } /* thumbnails: no black border — dim the inactive, full-opacity the active (clean indicator) */ .product-page-gallery .qv-thumb{ opacity:0.5 !important; border:1px solid #E5E7EA !important; } .product-page-gallery .qv-thumb.active{ opacity:1 !important; border:1px solid #C9CED2 !important; box-shadow:none !important; transform:none !important; } /* (active indicator = opacity dimming from the block above — active bright, others dim, no black border) */ /* Thumbnails FINAL: no dimming (all bright), active = subtle gray border (ID specificity to win) */ .product-page-gallery #productThumbs .qv-thumb{ opacity:1 !important; } .product-page-gallery #productThumbs .qv-thumb.active{ opacity:1 !important; border:1.5px solid #9AA1A7 !important; box-shadow:none !important; transform:none !important; } /* Mobile: SYMMETRIC side padding on the product page — kill the row gutter/col padding asymmetry, let the container's equal 8px padding define both sides. */ @media (max-width:767px){ .row.g-4{ --bs-gutter-x:0 !important; margin-left:0 !important; margin-right:0 !important; } .row.g-4 > .col-lg-6{ padding-left:0 !important; padding-right:0 !important; } /* main image fills the space that's LEFT after thumbs — flex-basis 0 forces it to shrink (was overflowing) */ .product-page-gallery{ padding:0 !important; } .product-page-gallery .product-main-swiper{ flex:1 1 0 !important; width:0 !important; max-width:100% !important; } } /* Force Swiper's fixed-width slides to shrink with the flex container (mobile side-gallery) */ @media (max-width:767px){ .product-page-gallery{ padding:0 8px !important; box-sizing:border-box !important; } .product-page-gallery .product-main-swiper, .product-page-gallery .product-main-swiper .swiper-wrapper, .product-page-gallery .product-main-swiper .swiper-slide, .product-page-gallery .product-main-swiper .swiper-slide > a, .product-page-gallery .product-main-swiper .swiper-slide img{ width:100% !important; max-width:100% !important; min-width:0 !important; } } /* Gallery: match the ~8px symmetric side gap of the rest of the page (compensate col offset) */ @media (max-width:767px){ .product-page-gallery{ padding-left:15px !important; padding-right:15px !important; } } /* "Save Tk. XXX" savings text (replaces the -X% badge on the product page) */ .qv-save{ display:inline-block; background:#16A34A; color:#fff !important; font-weight:600; font-size:0.78rem; padding:3px 11px; border-radius:999px; margin-left:10px; white-space:nowrap; } /* Product "Code: SKU" next to the availability badge (reference style, with separator) */ .product-code{ font-size:0.85rem; color:#5A6673; padding-left:12px; border-left:1px solid #D7DBDF; white-space:nowrap; } .product-code strong{ color:#101518; font-weight:500; } /* "Availability:" label before the stock status (reference style) */ .avail-label{ font-size:0.85rem; color:#5A6673; } .avail-label strong{ color:#101518; font-weight:500; } /* ============ Customer photo reviews (Daraz-style) ============ */ /* Rating summary card */ .review-summary-card{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#F7F8F9; border:1px solid #EBEEF0; border-radius:10px; padding:16px 20px; margin-bottom:20px; } .rsc-score{ display:flex; align-items:center; gap:10px; } .rsc-num{ font-size:2.4rem; font-weight:700; color:#101518; line-height:1; } .rsc-stars{ font-size:1.15rem; letter-spacing:1px; } .rsc-count{ font-size:.85rem; color:#5A6673; } .rs-chip{ display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:#101518; background:#fff; border:1px solid #E4E7EB; border-radius:20px; padding:6px 13px; } .rs-chip i{ font-size:.9rem; } /* Review card */ .review-item{ padding:16px 0; border-bottom:1px solid #EEF0F2; } .review-item:last-child{ border-bottom:0; } .review-head{ display:flex; align-items:flex-start; gap:11px; } .review-avatar{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:#101518; color:#fff; font-weight:600; font-size:1rem; display:inline-flex; align-items:center; justify-content:center; text-transform:uppercase; } .review-head-meta{ flex:1 1 auto; min-width:0; } .review-author-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .review-author{ font-weight:600; color:#101518; font-size:.95rem; } .review-stars{ font-size:.95rem; letter-spacing:.5px; white-space:nowrap; } .review-item .review-date{ font-size:.74rem; color:#9AA3AD; margin-top:2px; display:flex; align-items:center; gap:4px; } .review-item .review-date i{ color:#16A34A; font-size:.8rem; } .review-item .review-text{ line-height:1.55; color:#3A434D; font-size:.9rem; margin:8px 0 0; padding-left:49px; } .review-photos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding-left:49px; } .review-photo-thumb{ display:block; width:92px; height:92px; border-radius:8px; overflow:hidden; border:1px solid #E4E7EB; background:#F7F8F9; } .review-photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; } .review-photo-thumb:hover img{ transform:scale(1.06); } @media (max-width:575px){ .review-item .review-text, .review-photos{ padding-left:0; } .review-photo-thumb{ width:calc(33.333% - 6px); height:auto; aspect-ratio:1/1; } .rsc-num{ font-size:2rem; } } /* Product-page compact preview: bigger photos filling the row (4 across, "+N" on the last) */ #tabReviews .review-photos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding-left:0; margin-top:10px; max-width:380px; } #tabReviews .review-photo-thumb{ width:100%; height:auto; aspect-ratio:1/1; border-radius:8px; } #tabReviews .review-item .review-text{ padding-left:0; } @media (max-width:575px){ #tabReviews .p-4{ padding:14px 12px !important; } /* more width for the photo row on mobile */ /* let the photo row use the full card width (edge-to-edge, Daraz-style bigger photos) */ #tabReviews .review-photos{ margin-left:-12px; margin-right:-12px; } } .review-photo-hidden{ display:none !important; } .review-photo-more{ position:relative; } .review-photo-more::after{ content:attr(data-more); position:absolute; inset:0; background:rgba(16,21,24,.58); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1.05rem; border-radius:8px; pointer-events:none; } /* Product-page compact review preview header (Daraz "Ratings and Reviews (N) ... View All") */ .rev-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; } .rev-preview-title strong{ font-size:1.02rem; font-weight:700; color:#101518; } .rev-preview-title .rph-count{ font-size:.92rem; font-weight:600; color:#5A6673; } .rev-preview-subline{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid #EEF0F2; } .rev-preview-subline .rps-num{ font-size:1.25rem; font-weight:700; color:#101518; line-height:1; } .rev-preview-subline .rps-stars{ font-size:1rem; letter-spacing:1px; } .rev-preview-viewall{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; font-size:.9rem; font-weight:600; color:#101518; text-decoration:none; } .rev-preview-viewall:hover{ text-decoration:underline; } .rev-preview-viewall i{ font-size:.82rem; } /* Dedicated reviews page (/product/{slug}/reviews) — Daraz-style bigger 2-column photo grid */ .product-reviews-page .pr-review-list .review-photos{ display:grid; grid-template-columns:repeat(2, minmax(0, 148px)); gap:8px; margin-top:11px; } .product-reviews-page .pr-review-list .review-photo-thumb{ width:100%; height:auto; aspect-ratio:1/1; } @media (max-width:575px){ .product-reviews-page .pr-review-list .review-photos{ grid-template-columns:repeat(2, 1fr); padding-left:0; max-width:none; } } .view-all-reviews-btn{ display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-size:.9rem; font-weight:500; color:#101518; text-decoration:none; border:1px solid #101518; border-radius:6px; padding:9px 18px; transition:.15s; } .view-all-reviews-btn:hover{ background:#101518; color:#fff; } .view-all-reviews-btn i{ font-size:.9rem; } /* Photo picker in the Write-a-Review form */ .review-photo-preview{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .review-photo-preview:empty{ margin-bottom:0; } .rev-prev-cell{ position:relative; width:66px; height:66px; border-radius:6px; overflow:hidden; border:1px solid #E4E7EB; } .rev-prev-cell img{ width:100%; height:100%; object-fit:cover; display:block; } .rev-prev-remove{ position:absolute; top:2px; right:2px; width:20px; height:20px; line-height:18px; border:0; border-radius:50%; background:rgba(16,21,24,.78); color:#fff; font-size:15px; cursor:pointer; padding:0; text-align:center; } .rev-prev-remove:hover{ background:#101518; } .review-photo-add{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:.85rem; color:#101518; border:1px dashed #B7BEC6; border-radius:6px; padding:8px 15px; background:#fff; } .review-photo-add:hover{ border-color:#101518; background:#F7F8F9; } .review-photo-add i{ font-size:1rem; }