/* ================================================================ header.css — Rhehag SITE HEADER STYLES ================================================================ Covers: · .site-header shell · .top-bar · .main-header (logo · search · actions) · .header-menu-toggle (mobile hamburger) · .mobile-overlay · .mobile-panels (3-level slide panel, < 768px) Does NOT include: · Navbar bar (.navbar-wrapper) → see navbar.css · Mega-dropdown (.mega-dropdown) → see navbar.css · CSS variables (:root) → see navbar.css (load that first) Load order in : ← variables first ================================================================ */ /* ================================================================ default content-section margin for web ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap'); .content-section { margin: 0 320px !important; } /* -------- For Brand margin -------- */ #maincontent.page-main .page-main-inner, #maincontent.page-main .page-title-wrapper, #maincontent.page-main .page.messages { margin: 0 320px; } /* close */ main .content-section { margin: unset !important; } #maincontent.page-main { max-width: unset; /* margin: 0 320px !important; */ } .page-main-full-width .content-section { margin: 0 320px !important; } /* ================================================================ SITE HEADER SHELL ================================================================ */ .site-header { width: 100%; position: sticky; top: 0; z-index: 200; background: var(--white); /* Bottom border comes from .navbar-wrapper in navbar.css */ } /* ================================================================ TOP BAR ================================================================ */ .top-bar { background-color: var(--blue); height: 40px; /* Fixed height for ticker viewport */ } .top-bar-viewport { height: 100%; overflow: hidden; position: relative; } .top-bar-inner { height: 40px !important; display: flex; align-items: center; justify-content: center; gap: 64px; /* flex-direction: column; animation: ticker 9s infinite; */ } .top-bar-item { /* Matches viewport height */ display: flex; height: 40px; align-items: center; justify-content: center; gap: 70px; color: var(--white); font-family: var(--font-outfit); font-size: 14px; /* ~13px */ font-weight: 400; white-space: nowrap; } .top-bar-item.announcement-item { display: none !important; } .top-bar-item.features-group { display: flex; flex-direction: row; /* Keeps the 3 icons in one line */ justify-content: center; gap: 40px; } .top-bar-secondary-item { display: flex; align-items: center; gap: 8px; } .top-bar-link { text-decoration: underline !important; } /* Vertical slide animation for 3 items */ @keyframes ticker { 0%, 40% { transform: translateY(0); } 50%, 90% { transform: translateY(-40px); /* Moves to 2nd item */ } 100% { transform: translateY(0); } } /* Vertical slide animation for 3 items */ @keyframes mobile-ticker { /* Item 1 */ 0%, 20% { transform: translateY(0); } /* Item 2 */ 25%, 45% { transform: translateY(-40px); } /* Item 3 */ 50%, 70% { transform: translateY(-80px); } /* Item 4 */ 75%, 95% { transform: translateY(-120px); } /* Smooth reset back to Item 1 */ 100% { transform: translateY(0); } } .top-bar-item img, .top-bar-item svg { width: 18px; height: 18px; flex-shrink: 0; } /* ================================================================ MAIN HEADER (logo · search · actions) ================================================================ */ .main-header { padding: 32px 16px 16px; background-color: var(--white); margin: 0 320px !important; max-width: 100% !important; /* matches your original desktop value */ } .header-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* ── Logo ── */ .logo { width: 144px; height: 40px; flex-shrink: 0; display: flex; align-items: center; } .logo img { width: 100px; height: 80px; } .logo h1 { margin: unset !important; font-family: var(--font-figtree); font-size: 35.53px; font-style: semi-bold !important; font-weight: 600; line-height: 41px; color: var(--primary); } ul.amsearch-product-list { flex-direction: column; } li.amsearch-item.product-item { border-bottom: 0px; padding: 10px; border-radius: 10px; max-width: 100% !important; } span.amsearch-product-image-container.amsearch-product-image-container-218452 { width: 55px; } /* ── Search Bar ── */ section.amsearch-wrapper-block { width: 768px !important; } .amsearch-input-wrapper .amsearch-input { border-radius: 50px !important; font-size: 16px !important; font-family: var(--font-outfit); font-weight: 300; color: var(--secondary) !important; padding: 10px 25px !important; } .search-bar { flex: 1; max-width: 768px; position: relative; height: 40px; width: 750px !important; } .search-bar input { width: 100%; height: 100%; padding: 10px 56px 10px 25px; border: 1px solid var(--primary); border-radius: 999px; color: var(--primary); font-family: var(--font-outfit); font-size: 16px; font-weight: 300; line-height: 1; letter-spacing: 0; background: var(--white); outline: none; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; /* remove default search styling */ } /* Search button / icon */ .search-bar-btn { position: absolute; right: 0; top: 0; width: 48px; height: 100%; background: none; border: none; border-left: 1px solid var(--light-gray); border-radius: 0 999px 999px 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--primary); transition: background 0.15s; padding-left: 12px; box-sizing: content-box; } .search-bar-btn:hover { background: var(--white-smoke); } .search-bar-btn img, .search-bar-btn svg { width: 20px; height: 20px; flex-shrink: 0; } /* ── Header Actions (Login / Cart) ── */ .header-actions-wrapper { display: flex; align-items: center; /* gap: 24px; */ flex-shrink: 0; } .action-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--primary); font-family: var(--font-outfit); font-size: 12px; font-weight: 400; line-height: 16px; text-decoration: none; transition: opacity 0.15s; } .action-item:hover { opacity: 0.7; } .action-item img, .action-item svg { width: 32px; height: 32px; } a.action.showcart.action.showcart { font-family: var(--font-outfit) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 20px !important; color: var(--primary) !important; text-transform: capitalize !important; } .minicart-wrapper .action.showcart::after { margin-left: 6px !important; } .page-header.type2 .header-contact .my-account { font-family: var(--font-outfit) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 20px !important; color: var(--primary) !important; text-transform: capitalize !important; } .action-item span { font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: var(--primary) !important; text-transform: capitalize !important; } /* ── Mobile Hamburger (hidden on desktop) ── */ .header-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: var(--primary); border-radius: 8px; transition: background 0.2s ease; flex-shrink: 0; } /* .header-menu-toggle:hover { background: var(--white-smoke); } */ .header-menu-toggle svg { display: block; } /* ================================================================ MOBILE OVERLAY ================================================================ */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 400; opacity: 0; transition: opacity 0.3s ease; } .mobile-overlay.is-active { display: block; opacity: 1; } /* Lock body scroll while panel is open */ body.menu-open { overflow: hidden; } /* ================================================================ MOBILE PANEL SYSTEM (< 768px) ================================================================ */ /* Outer container — slides in from left */ .mobile-panels { position: fixed; top: 0; left: 0; width: var(--panel-width); max-width: 90vw; height: 100%; z-index: 500; pointer-events: none; transform: translateX(-100%); transition: transform var(--panel-transition); } .mobile-panels.is-open { transform: translateX(0); pointer-events: auto; } /* Viewport — clips individual panels */ .panels-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--panel-bg); box-shadow: var(--panel-shadow); } /* ── Individual panel ── */ .panel { position: absolute; inset: 0; background: var(--panel-bg); display: flex; flex-direction: column; overflow: hidden; /* Off-screen to the right by default */ transform: translateX(100%); transition: transform var(--panel-transition); } /* Active panel: fully visible */ .panel--active { transform: translateX(0); } /* Panel being pushed behind: slide 30% left to show depth */ .panel--behind { transform: translateX(-30%); } /* ── Panel Header ── */ .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--light-gray); flex-shrink: 0; min-height: 60px; background: var(--white); } .panel-title { font-family: var(--font-outfit); font-size: 20px; font-weight: 600; color: var(--primary); flex: 1; text-align: left; } .panel-back { background: none; border: none !important; cursor: pointer; color: var(--primary) !important; padding: 4px !important; display: flex; align-items: center; border-radius: 6px !important; margin-right: 10px; flex-shrink: 0; transition: background 0.15s; } .panel-close { background: none; border: none !important; cursor: pointer; color: var(--primary) !important; padding: 4px !important; display: flex; align-items: center; border-radius: 6px !important; flex-shrink: 0; transition: background 0.15s; } /* ── Panel Body (scrollable) ── */ .panel-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .panel-body::-webkit-scrollbar { width: 4px; } .panel-body::-webkit-scrollbar-thumb { background: var(--light-gray); border-radius: 4px; } /* ── Panel Rows ── */ .panel-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px !important; background: none !important; border: none !important; border-bottom: 1px solid var(--white-smoke); font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--primary) !important; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.12s !important; } .panel-row:last-child { border-bottom: none; } .panel-row-chevron { flex-shrink: 0; color: #9CA3AF; } /* NEW row variant (Household Supplies) */ .panel-row--new { display: flex; align-items: center; gap: 10px; color: var(--primary); } .panel-row--new .pill-new { font-size: 11px; padding: 2px 8px; } /* ── Panel Separator ── */ .panel-sep { height: 1px; background: var(--light-gray); margin: 4px 0; } /* ── Sub-category groups (Level 3) ── */ .panel-sub-group { padding: 20px 20px 4px; } .panel-sub-group-title { font-family: var(--font-outfit); font-size: 12px; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .panel-sub-group-items a { display: flex; align-items: center; padding: 10px 0; font-family: var(--font-outfit); font-size: 15px; font-weight: 400; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--white-smoke); transition: color 0.12s; } .panel-sub-group-items a:hover { color: #6366F1; } .panel-sub-group-items a:last-child { border-bottom: none; } .panel-all-link { display: flex; align-items: center; gap: 4px; font-family: var(--font-outfit); font-size: 13px; font-weight: 500; color: #6B7280; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--white-smoke); transition: color 0.12s; } .panel-all-link:hover { color: var(--primary); } .panel-all-link svg { flex-shrink: 0; } .panel-sep { height: 8px; background: var(--white-smoke); } .panel-section-title { padding: 16px 20px 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #6B7280; letter-spacing: 0.05em; } .mobile-header { display: none; } @media (max-width: 1024px) { .desktop-header { display: none; } .mobile-header { display: block; } .mobile-header { display: block; background: white; padding: 10px 12px; } .mobile-header-row { display: flex; align-items: center; padding-bottom: 10px; justify-content: space-between; } .mobile-logo { height: 28px; } .mobile-search-row { margin-top: 10px; } .mobile-search-row input { width: 100%; height: 44px; border-radius: 999px; border: 1px solid #D1D5DB; padding: 0 16px; } } @media (max-width: 767px) { .mobile-header { display: block; background: white; padding: 10px 12px; } .mobile-header-row { display: flex; align-items: center; padding-bottom: 10px; justify-content: space-between; } .mobile-logo { height: 28px; } .mobile-search-row { margin-top: 10px; } .mobile-search-row input { width: 100%; height: 44px; border-radius: 999px; border: 1px solid #D1D5DB; padding: 0 16px; } } /* ================================================================ navbar.css — Rhehag NAVBAR STYLES + SHARED CSS VARIABLES ================================================================ Load this FIRST, before header.css — it defines :root variables that header.css depends on. Covers: · :root CSS variables (shared across header + navbar) · .navbar-wrapper (horizontal nav bar) · .navbar-links / .nav-btn (nav items + active underline) · .new-products / .pill-new (NEW pill link) · .mega-dropdown (full-width category panel) · .mega-backdrop (click-outside overlay) Does NOT include: · .site-header / .top-bar / .main-header → see header.css · .mobile-panels / .mobile-overlay → see header.css ================================================================ */ /* ================================================================ SHARED CSS VARIABLES (used by both header.css and navbar.css — define here once) ================================================================ */ :root { /* ── Brand colours ── */ --blue: #1F2937; --primary: #111827; --secondary: #374151; --mute-text: #9CA3AF; --link-text: #6B7280; /* Ebony — main text / CTA */ --white: #FFFFFF; --black: #000000; --light-gray: #D1D5DB; /* borders, dividers */ --white-smoke: #F3F4F6; /* hover backgrounds */ --btn-secondary: #EEF2FF; /* pill-new background */ /* ── Typography ── */ --font-outfit: 'Outfit', sans-serif; --font-figtree: 'Figtree', sans-serif; /* ── Layout ── */ --container-width: 1280px; /* ── Mega-dropdown ── */ --mega-bg: #FFFFFF; --mega-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); --mega-radius: 0 0 12px 12px; /* ── Mobile panel ── */ --panel-width: 380px; --panel-bg: #FFFFFF; --panel-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); --panel-transition: 0.32s cubic-bezier(0.22, 1, 0.36, 1); --space-2: 0.125rem; --space-4: 0.25rem; --space-6: 0.375rem; --space-8: 0.5rem; --space-10: 0.625rem; --space-12: 0.75rem; --space-16: 1rem; --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; --space-40: 2.5rem; --space-48: 3rem; --space-60: 3.75rem; --space-64: 4rem; --space-72: 4.5rem; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-pill: 9999px; --radius: 8px; } /* ================================================================ BASE RESET (lightweight — scoped to avoid conflicts) ================================================================ */ *, *::before, *::after { box-sizing: border-box; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: var(--font-outfit); } body { font-family: var(--font-outfit); color: var(--primary); } .page-header .amsearch-wrapper-block:before { display: none !important; } /* ================================================================ NAVBAR WRAPPER ================================================================ */ .navbar-wrapper { background: var(--white); border-bottom: 1px solid var(--primary); position: relative; /* anchor for .mega-dropdown */ z-index: 100; } .navbar-container { max-width: var(--container-width); margin: 0 auto; padding: 0 108px; display: flex; align-items: center; justify-content: space-between; } /* ================================================================ NAV LINKS LIST ================================================================ */ .navbar-links { display: flex; align-items: center; flex: 1; gap: 0; margin: 0; padding: 0; } .nav-item { position: relative; } /* ── Nav button ── */ .nav-btn { display: block; background: none; border: none !important; padding: 12px 16px !important; font-family: var(--font-outfit); font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; letter-spacing: 0; border-radius: 20px !important; /* color: var(--primary); */ white-space: nowrap; position: relative; transition: color 0.15s; } .nav-btn:hover { background-color: var(--white) !important; color: var(--primary) !important; } /* Underline indicator */ .nav-btn::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 12px; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } .nav-btn:hover::after, .nav-btn.is-active::after { transform: scaleX(1); } .nav-btn.is-active { font-weight: 500; } /* ================================================================ NEW PRODUCTS PILL (desktop + tablet) ================================================================ */ .new-products { display: flex; align-items: center; flex-shrink: 0; } .nav-divider { width: 1px; height: 30px; background: var(--light-gray); margin-right: 24px; } .new-products-btn { display: flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--primary) !important; font-size: 16px; font-weight: 500; white-space: nowrap; transition: opacity 0.15s; } .new-products-btn:hover { opacity: 0.75; } .new-products-text { font-family: var(--font-outfit); font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: var(--primary); text-decoration: underline; } .new-products-text:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } /* ── Shared pill badge (.pill-new) ── Used in both navbar (NEW pill) and mobile panels. Defined here so header.css can also reference it. */ .pill-new { display: inline-flex; align-items: center; gap: 4px; background: var(--btn-secondary); color: var(--primary); padding: 3px 10px; border-radius: 999px; font-family: var(--font-outfit); font-size: 14px; font-weight: 200; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .pill-new img, .pill-new svg { width: 14px; height: 14px; flex-shrink: 0; } /* ================================================================ MEGA DROPDOWN ================================================================ */ .mega-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--mega-bg); border-top: 1px solid var(--light-gray); box-shadow: var(--mega-shadow); border-radius: var(--mega-radius); z-index: 300; /* Hidden state */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; pointer-events: none; } .mega-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Inner content wrapper */ .mega-dropdown-inner { max-width: var(--container-width); margin: 0 auto; padding: 36px 113.5px 40px; display: flex; gap: 0; } /* ── Left "All [Category]" column ── */ .mega-all-link { flex-shrink: 0; width: 180px; padding-right: 32px; border-right: 1px solid var(--light-gray); margin-right: 40px; } .mega-all-link a { font-family: var(--font-outfit); font-size: 16px; font-weight: 600; color: var(--primary); line-height: 1.4; transition: opacity 0.15s; } .mega-all-link a:hover { opacity: 0.65; } /* ── Sub-group grid ── */ .mega-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; } /* ── Each group ── */ .mega-group-title { font-family: var(--font-outfit); font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 12px; line-height: 1.3; } .mega-group-list { display: flex; flex-direction: column; gap: 8px; } .mega-group-list a { font-family: var(--font-outfit); font-size: 14px; font-weight: 400; color: #374151; line-height: 1.4; transition: color 0.15s; } .mega-group-list a:hover { color: var(--primary); } /* "All Categories" sub-link */ .mega-all-cats { display: flex !important; align-items: center; gap: 4px; font-size: 13px !important; font-weight: 500 !important; color: #6B7280 !important; margin-top: 4px; } .mega-all-cats:hover { color: var(--primary) !important; } .mega-all-cats svg { flex-shrink: 0; } /* ── Backdrop (click to close) ── */ .mega-backdrop { display: none; position: fixed; inset: 0; z-index: 0; } .mega-backdrop.is-active { display: block; } /* homepage */ /* =========================== PREMIUM BRANDS PAGE =========================== */ /* --- Breadcrumb --- */ .breadcrumb-wrapper { padding: 16px 0 24px; } .breadcrumb-text { font-family: var(--font-outfit); font-size: 14px; font-weight: 300; color: var(--secondary); line-height: 20px; } /* --- Page Title --- */ .premium-brands-title { font-family: var(--font-figtree); font-size: 30px !important; font-weight: 600 !important; font-style: normal !important; color: var(--primary) !important; line-height: 36px !important; margin-bottom: 24px; } /* --- Hero Banner --- */ .hero-banner-wrapper { background: linear-gradient(110deg, #FFFBEB 10%, #EEF2FF 100%); padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; gap: 40px; border-radius: 8px; } .hero-banner-content { flex: 1; } .hero-banner-features { list-style: none; display: flex; flex-direction: column; gap: 12px; } .feature-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-outfit); font-size: 16px; font-weight: 400; color: var(--primary); line-height: 24px; } .feature-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; /* color: var(--primary); */ } .hero-banner-action { flex-shrink: 0; } .hero-banner-btn { font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--white) !important; background-color: var(--blue) !important; border: none !important; padding: 16px 24px !important; border-radius: 4px !important; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .hero-banner-btn:hover { background-color: var(--black) !important; color: var(--white) !important; box-shadow: var(--primary) 0 4px 12px !important; } /* --- Brands Listing --- */ .brands-listing-wrapper { /* padding: 40px 0 80px; */ margin: 24px 0; display: flex; flex-direction: column; gap: 32px; } .top-marken-wrapper, .bestseller-categories-wrapper { display: flex; flex-direction: column; gap: 20px; } .top-marken-wrapper h3, .bestseller-categories-wrapper h3 { font-family: var(--font-outfit); font-size: 24px; font-weight: 700; font-style: bold; color: var(--primary); line-height: 32px; margin-bottom: 20px; } .brands-listing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; } .brand-entry { display: flex; flex-direction: column; gap: 2px; } .brand-link { font-family: var(--font-outfit); font-size: 14px; font-weight: 500; font-style: medium; color: var(--primary); line-height: 20px; text-decoration: none; transition: color 0.2s ease; } .brand-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .brand-count { font-family: var(--font-outfit); font-size: 12px; font-weight: 400; color: var(--link-text); line-height: 16px; } /* --- Alphabet Filter --- */ .alphabet-filter-wrapper { margin-top: 56px; /* padding-top: 24px; */ } .alphabet-filter-list { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; } .filter-link { font-family: var(--font-outfit); font-size: 16px; font-weight: 500; color: var(--primary); text-decoration: none; white-space: nowrap; transition: all 0.2s ease; } .filter-link:hover { transform: translateY(-3px); } .filter-link:hover, .filter-link.active { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 2px; } .filter-link.disabled { color: var(--color-gray-chateau); pointer-events: none; text-decoration: none; } /* --- Letter Groups --- */ .letter-group { margin-bottom: 48px; scroll-margin-top: 100px; } .letter-heading { font-family: var(--font-figtree); font-size: 24px; font-weight: 700; color: var(--primary); margin-bottom: 16px; padding-bottom: 12px; display: flex; align-items: center; } /* --- Premium Brands Grid --- */ .premium-brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; } /* ================================= FOOTER BASE ================================= */ .footer { width: 100%; } .footer-top-section { background-color: var(--white); padding: 60px 0; width: 100%; border-top: 1px solid var(--primary); } .footer-bottom-section { background-color: var(--white); padding: 60px 0 0; color: var(--primary); width: 100%; border-top: 1px solid var(--primary); } /* .footer-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 24px; } */ /* ================================= TOP SECTION (White) ================================= */ .footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .footer-top-left { display: flex; flex-direction: column; gap: 32px; max-width: 500px; } /* Brand & Social */ .footer-brand { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .footer-logo { text-decoration: none; } .footer-logo h1 { font-family: var(--font-figtree); font-size: 34.53px; font-weight: 600 !important; color: var(--primary) !important; line-height: 41.44px; margin: 0; } .footer-logo img { /* width: 100px; */ height: 80px; margin-bottom: 24px; } .social-links { display: flex; gap: 16px; align-items: center; } .social-links a { display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s ease; } .social-links a:hover { opacity: 1; } .social-links img { width: 24px; height: 24px; filter: brightness(0); /* Make icons black */ } /* WhatsApp CTA */ .whatsapp-cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .whatsapp-cta p { font-family: var(--font-outfit); font-size: 15px; font-weight: 500; color: var(--primary); display: flex; align-items: center; gap: 8px; margin: 0; } .whatsapp-icon img { width: 32px; height: 32px; } .btn-footer-register { background-color: var(--blue) !important; color: var(--white) !important; padding: 16px 24px; border-radius: 6px; text-decoration: none; font-family: var(--font-outfit); font-size: 16px; font-weight: 400; letter-spacing: 1px; line-height: 24px; transition: background-color 0.2s ease; } .btn-footer-register:hover { background-color: var(--black) !important; color: var(--white) !important; box-shadow: var(--primary) 0 4px 12px !important; } .btn-dark:hover { background-color: var(--black) !important; color: var(--white) !important; box-shadow: var(--primary) 0 4px 12px !important; } /* Top Newsletter */ .footer-top-right { flex: 1; max-width: 450px; } .footer-top-right .newsletter h3 { font-family: var(--font-figtree); font-size: 18px; font-weight: 400; color: var(--primary); margin-bottom: 8px; } .footer-top-right .newsletter p { font-family: var(--font-outfit); font-size: 14px; color: var(--secondary); line-height: 24px; letter-spacing: 0%; margin-bottom: 20px; } .footer-top-right .newsletter-form { display: flex; gap: 12px; flex-direction: column; align-items: end !important; /* Horizontal layout for top newsletter */ } .footer-top-right .newsletter-form input { background-color: var(--white) !important; height: 53px !important; font-family: var(--font-outfit); font-size: 14px !important; font-weight: 300; padding: 16px 24px !important; border: 1px solid var(--light-gray) !important; border-radius: 8px !important; color: var(--primary); flex: 1; } .footer-top-right .newsletter-form input::placeholder { color: var(--secondary); } .footer-top-right .newsletter-form input:focus { border-color: var(--primary); } .btn-secondary { width: 142px !important; padding: 16px 24px !important; background-color: transparent !important; border: 1px solid var(--primary) !important; color: var(--primary) !important; border-radius: 6px !important; font-family: var(--font-outfit); font-size: 16px !important; font-weight: 400; line-height: 16px !important; letter-spacing: 1px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .btn-secondary:hover { background-color: var(--blue) !important; color: var(--white) !important; } /* ================================= COLUMNS LAYOUT (Bottom) ================================= */ .footer-columns { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* ================================= ALL COLUMNS ================================= */ .footer-column h4 { font-family: var(--font-outfit); font-size: 16px; font-weight: 500; color: var(--primary); text-transform: capitalize; line-height: 24px !important; letter-spacing: 0% !important; margin-bottom: 24px; } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column li+li { margin-top: 12px; } .footer-column a { font-family: var(--font-outfit); font-size: 16px; line-height: 24px !important; font-weight: 300 !important; color: var(--secondary); text-decoration: none; transition: color 0.2s ease; } .footer-column a:hover { color: var(--primary); text-decoration: underline; font-weight: 500; font-size: 16.5px; text-underline-offset: 4px; } /* ================================= COMPANY INFO (Column 1) ================================= */ .company-info { display: flex; flex-direction: column; gap: 16px; } .info-block { display: flex; flex-direction: column; gap: 2px; } .info-label { font-family: var(--font-outfit); font-size: 16px !important; font-weight: 400; line-height: 24px !important; color: var(--secondary); } .info-value { font-family: var(--font-outfit); font-size: 14px; font-weight: 400; color: var(--primary) !important; text-decoration: underline; text-underline-offset: 2px; } .info-link { transition: color 0.2s ease; } .info-link:hover { color: var(--primary); } /* ================================= NEWSLETTER (Column 4 - Bottom) ================================= */ /* .footer-newsletter .newsletter-desc { font-family: var(--font-outfit); font-size: 13px; font-weight: 300; color: var(--secondary); line-height: 20px; margin-bottom: 20px; } .footer-newsletter .newsletter-form { display: flex; flex-direction: column; gap: 16px; } */ /* .footer-newsletter .newsletter-form input { width: 100%; padding: 12px 16px; background-color: #2a3a4e; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; font-family: var(--font-outfit); font-size: 13px; color: #ffffff; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; } .footer-newsletter .newsletter-form input::placeholder { color: #6b7a8d; } .footer-newsletter .newsletter-form input:focus { border-color: rgba(255, 255, 255, 0.35); } .newsletter-btn { align-self: flex-start; padding: 12px 32px; background-color: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; font-family: var(--font-outfit); font-size: 13px; font-weight: 500; letter-spacing: 1px; cursor: pointer; transition: all 0.2s ease; } .newsletter-btn:hover { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); } */ /* ================================= BOTTOM SECTION ================================= */ .footer-bottom { background-color: var(--white) !important; border-top: 1px solid var(--primary) !important; padding: 24px 0; } .footer-copyright-wrapper { display: flex; align-items: center; justify-content: space-between; margin-top: 20px !important; gap: 24px; flex-wrap: wrap; } .footer-copyright-wrapper p { font-family: var(--font-outfit); font-size: 16px !important; font-weight: 400; color: var(--secondary) !important; margin: unset !important; } .legal-links { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; } .legal-links li { display: flex; align-items: center; } /* vertical separator */ .legal-links li:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 20px; background-color: var(--link-text) !important; margin: 0 24px; /* spacing between links */ } .legal-links li a { font-family: var(--font-outfit); font-size: 16px; font-weight: 400; line-height: 24px; color: var(--secondary) !important; text-decoration: none; transition: color 0.2s ease; } .legal-links li a:hover { color: var(--primary) !important; text-decoration: underline; font-weight: 200; text-underline-offset: 4px; } /* Payment */ .payment-methods { display: flex; align-items: center; gap: 16px; } .payment-icon { display: flex; align-items: center; } .payment-icon img { height: 18px !important; /* width: 24px; */ opacity: 1; background-color: var(--white); border-radius: 4px; transition: opacity 0.2s ease; } .payment-icon img:hover { opacity: 1; background-color: var(--white); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /* ================================= Product-Detail (search) page =============================== */ .page-wrapper>.breadcrumbs .items { margin-bottom: 24px !important; } .breadcrumbs { font-family: var(--font-outfit) !important; font-size: 14px !important; font-weight: 300 !important; color: var(--secondary) !important; } .sidebar.sidebar-main.mobile-sidebar { position: sticky !important; top: 80px !important; } .page-main>.page-title-wrapper .page-title { font-family: var(--font-figtree) !important; font-size: 24px !important; font-weight: 600 !important; color: var(--primary) !important; line-height: 40px !important; text-transform: capitalize !important; /* margin-bottom: 24px !important; */ } .product-item-info { max-width: 220px !important; width: 100% !important; } .products-grid.columns3 .product-item { width: 100% !important; } .products-grid.divider-line .product-item-info { border: none !important; } .product-image-photo.default_image { background: var(--white-smoke) !important; padding: 30px; border-radius: 8px; margin-bottom: 15px; } .products-grid.divider-line .product-item-info { box-shadow: unset !important; /* transition: zoom 0.2s ease !important; */ } .product-item-photo:hover:not(.porto-tb-featured-image) { box-shadow: unset !important; } .products-grid.divider-line .product-items { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; } li.item.product.product-item { border: none !important; max-width: 220px !important; gap: 20px !important; } li.item.product.product-item:hover { /* box-shadow: var(--primary) 0 1px 2px !important; */ /* transition: zoom 0.2s ease; */ } .page-products .product-item-name a { font-family: var(--font-outfit) !important; font-size: 16px !important; /* font-weight: !important; */ color: var(--primary) !important; line-height: 20px !important; /* transition: color 0.2s ease; */ text-transform: capitalize !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; } .product-item-info.type6 .product-item-actions .actions-primary .tocart { background-color: var(--primary) !important; color: var(--white) !important; /* was hidden by Porto's default CSS */ } .product-item-info.type6 .product-item-actions .tocompare { background-color: var(--primary) !important; color: var(--white) !important; } .filter-options-title { font-family: var(--font-figtree) !important; font-size: 16px !important; font-weight: bolder !important; color: var(--primary) !important; line-height: 24px !important; } .filter-options-content a { font-family: var(--font-outfit) !important; font-size: 14px !important; font-weight: 100 !important; color: var(--primary) !important; line-height: 20px !important; text-transform: capitalize !important; } .swatch-option.text { border: 1px solid var(--light-gray) !important; border-radius: 100%; height: 32px !important; transform: var(--primary) 0 1px 4px !important; } .swatch-option.text:hover { border: 1.5px solid var(--primary) !important; } .price-box .price { display: flex; font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 500 !important; color: var(--secondary) !important; } .product-item .action.towishlist:before { color: var(--primary) !important; } .amelsearch-further-section .amelsearch-input { border-radius: 9px; width: 400px; } .amelsearch-further-section { display: flex; flex: 1; gap: 43px; } .amelsearch-button.-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; border-radius: 0 8px 8px 0 !important; color: var(--white) !important; font-size: 14px !important; font-weight: 700; height: 36px !important; min-width: 78px; padding: 8px 10px !important; } .amelsearch-further-section .amelsearch-label { font-family: var(--font-outfit) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 24px !important; color: var(--primary) !important; margin: unset !important; } a.action.sorter-action.sort-desc { margin-right: 20px !important; } /* ================================ product-detail page ==================================*/ .product-info-main { background-color: var(--white) !important; box-shadow: var(--light-gray) 0 1px 4px !important; } span.base { font-family: var(--font-figtree) !important; font-size: 24px !important; font-weight: 500 !important; color: var(--primary) !important; text-transform: capitalize !important; } .catalog-product-view .product-info-price { font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 20px !important; color: var(--primary) !important; } /* temporary change */ .amsearch-items-section { display: none !important; } .brandpage-index-index .letter-heading { padding-bottom: 0 !important; } .brandpage-index-index .letter-group { margin-bottom: 10px !important; } /* sahil's change */ .amsearch-products-section.-grid .amsearch-image { padding-bottom: 10px; width: auto; } img.product-image-photo { border-radius: 6px; height: 100%; } a.amsearch-image { margin-right: 10px; padding-bottom: 0px !important; width: 50px !important; height: 50px; } section.amsearch-description.product.details.product-item-details { min-height: 0px; text-align: start; } a.amsearch-link.product-item-link { padding: 0px; min-width: 225px; text-decoration: none; font-weight: bold; } span.amsearch-sku-block { padding: 0px !important; font-size: 12px; } input.amsearch-input { height: 40px !important; color: var(--black); padding-left: 20px !important; /* font-size: 15px; */ background-color: var(--white) !important; border: 1px solid var(--primary) !important; } button.amsearch-button.-loupe.-clear.-icon { background-size: 20px; right: 10px; border-left: 1px solid var(--light-gray); padding-left: 10px; color: var(--secondary) !important; width: 35px; filter: brightness(0); } button.amsearch-button.-close.-clear.-icon { display: none; } span.amsearch-title { font-size: 1rem !important; } .amsearch-input-wrapper .amsearch-button.-loupe { left: unset !important; } /* sahil's changes ends */ /* cart Page changes */ .cart-summary strong { font-family: var(--font-figtree) !important; font-size: 16px !important; font-weight: 600 !important; color: var(--primary) !important; line-height: 24px !important; } .block-summary fieldset.fieldset.estimate span { font-size: 14px !important; font-family: var(--font-outfit) !important; font-weight: 500; color: var(--primary); line-height: 24px; text-transform: capitalize; } .block-summary dl.items.methods span { font-size: 14px; font-weight: 700; } .cart-summary .block .item-options .field .radio+.label { font-family: var(--font-outfit) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--primary) !important; line-height: 24px !important; } .checkout-cart-index button.action.primary.checkout { background-color: var(--blue) !important; border: none !important; border-radius: 8px !important; padding: 10px 12px !important; } .checkout-cart-index button.action.primary.checkout:hover { background-color: var(--black) !important; box-shadow: var(--primary) 0 4px 12px !important; border: none !important; border-radius: 8px !important; padding: 10px 12px !important; } .checkout-cart-index .cart-summary { padding: 16px 24px !important; border-radius: 12px !important; box-shadow: var(--light-gray) 0 4px 12px !important; } .cart-summary .checkout-methods-items { padding: 15px !important; } .cart.table-wrapper { display: grid; flex-direction: column; gap: 24px !important; } .cart.table-wrapper .cart-item { display: grid; grid-template-columns: 250px 1fr 120px; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--light-gray); position: relative; } .cart.table-wrapper .cart-item:last-of-type { border-bottom: none !important; } .cart.table-wrapper .cart-item button { position: absolute !important; top: 8px !important; right: 8px !important; background-color: transparent !important; border: none !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; padding: unset !important; color: var(--primary) !important; } .cart.table-wrapper .cart-item button svg:hover { color: red !important; } .cart.table-wrapper .cart-item .item-image { display: flex; align-items: center; padding: 10px !important; position: relative; width: 230px; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; background: var(--white-smoke) !important; object-fit: contain !important; } .cart.table-wrapper .cart-item .item-image img { width: 100%; height: 100%; object-fit: contain; } .cart.table-wrapper .cart-item .item-wishlist:hover { color: var(--primary) !important; } .cart.table-wrapper .cart-item .item-contant .item-info .item-brand { font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 700; line-height: 24px; letter-spacing: 1px; color: var(--primary) !important; margin-bottom: 10px !important; } .cart.table-wrapper .cart-item .item-contant .item-info .item-name a, .cart-item .item-contant .item-info .item-details, .cart-item .item-contant .item-info .item-seller, .cart-item .item-contant .item-qty { font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 400; line-height: 24px; text-transform: capitalize !important; letter-spacing: 1px; color: var(--primary) !important; } .cart.table-wrapper { box-shadow: var(--light-gray) 0 4px 12px !important; padding: 8px 15px !important; border-radius: 12px !important; } .cart-item .item-contant .item-info .item-seller { margin-top: 10px !important; color: var(--mute-text) !important; font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 400; line-height: 24px; text-transform: capitalize !important; } a.action.action-delete.item-delete svg { width: 24px !important; height: 24px !important; } a.action.action-delete.item-delete svg:hover { color: red !important; } .item-image .item-wishlist svg { width: 24px !important; height: 24px !important; } .cart-item .item-side { display: flex; flex-direction: column; align-items: center; /* gap: 100px; */ justify-content: space-between; } .cart-item .item-side span.price { font-family: var(--font-outfit) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 24px; color: var(--primary) !important; } .cart-item .item-contant .item-qty { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--primary); border-radius: 4px; overflow: hidden; margin-top: 10px; width: 130px; } .cart-item .item-contant .item-qty input { width: 40px; height: 32px; border: none !important; border-right: 1px solid var(--primary) !important; border-left: 1px solid var(--primary) !important; text-align: center; font-size: 16px; color: var(--primary) !important; } .cart-item .item-contant .item-qty .qty-btn { width: 40px; text-align: center; font-size: 24px !important; color: var(--primary) !important; } .fieldset.coupon .field .control input { padding: 12px 16px; background-color: var(--white) !important; border: 1px solid var(--primary) !important; border-radius: 6px 0 0 6px !important; font-family: var(--font-outfit); font-size: 16px !important; color: var(--primary) !important; height: 48px !important; } .fieldset.coupon .field .control input::placeholder { color: var(--secondary) !important; } html .cart-discount .actions-toolbar button.action.primary { /* padding: 16px 24px !important; */ background-color: var(--blue) !important; border: none !important; border-radius: 0 6px 6px 0 !important; font-family: var(--font-outfit) !important; color: var(--white) !important; font-size: 16px !important; font-weight: 700; text-transform: capitalize !important; letter-spacing: 1px !important; opacity: 1 !important; } .cart-discount .actions-toolbar button.action.primary:hover { background-color: var(--black) !important; box-shadow: var(--primary) 0 4px 12px !important; color: var(--white) !important; } .card.faq-card .faq-header { display: flex; align-items: center; justify-content: space-between; } .card.faq-card .faq-header h2.faq-title, .faq-header a.faq-help-link, .customer-service-content h3.customer-service-title { font-family: var(--font-outfit) !important; font-size: 24px !important; font-weight: 500 !important; color: var(--primary) !important; line-height: 32px !important; letter-spacing: -0.36px !important; /* margin-top: 32px !important; */ } .card.faq-card .faq-header a.faq-help-link { color: var(--link-text) !important; font-size: 16px !important; font-weight: 400 !important; margin-bottom: 32px !important; } .card.faq-card .faq-header a.faq-help-link svg { height: 20px !important; width: 20px !important; } .card.faq-card .faq-list .faq-item summary { font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--primary) !important; line-height: 24px !important; letter-spacing: 0% !important; } .card.faq-card .faq-list .faq-item .faq-content p { font-family: var(--font-outfit) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--link-text) !important; line-height: 20px !important; margin: unset !important; } .card.customer-service-card, .card.faq-card { box-shadow: var(--light-gray) 0 4px 12px !important; padding: 16px 24px !important; border-radius: 12px !important; margin-top: 32px !important; } .customer-service-contact { display: flex !important; align-items: flex-start !important; gap: 10px !important; } .customer-service-contact svg { width: 24px !important; height: 24px !important; color: var(--link-text) !important; margin-bottom: 33px !important; } .customer-service-contact .contact-title { font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 500 !important; color: var(--primary) !important; line-height: 24px !important; } .customer-service-contact .contact-description { font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--link-text) !important; line-height: 24px !important; } .cart-discount .block { width: auto !important; } .card.complementary-card .complementary-header .section-subtitle { font-family: var(--font-outfit) !important; font-size: 16px !important; font-weight: 500 !important; color: var(--secondary) !important; line-height: 24px !important; text-transform: capitalize !important; } .card.complementary-card .complementary-header .section-title { font-family: var(--font-figtree) !important; font-size: 24px !important; font-weight: 500 !important; color: var(--primary) !important; line-height: 24px !important; text-transform: capitalize !important; } .card.complementary-card .products-carousel { display: flex; } .products-grid { display: flex; align-items: center; justify-content: space-between; overflow-x: hidden; scroll-behavior: smooth; } /*/* ==== carts page changes ends ==== */ /* ================================= RESPONSIVE — DESKTOP (992px – 1279.98px) Handle standard desktops & large tablets ================================= */ @media (min-width: 1024px) and (max-width: 1440px) { /* Global */ .container { margin: 0 60px !important; } /* -------- For Brand margin -------- */ #maincontent.page-main .page-main-inner, #maincontent.page-main .page-title-wrapper, #maincontent.page-main .page.messages { margin: 0 60px; } .page-main { padding-right: 0 !important; padding-left: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .page-main-full-width .content-section { margin: 0 60px !important; } .content-section { margin: 0 60px !important; } /* Header & Navbar */ .top-bar-viewport, .navbar-container, .mega-dropdown-inner { padding-left: 40px !important; padding-right: 40px !important; } .top-bar { height: 40px !important; } .top-bar-viewport { overflow: visible; } .top-bar-inner { flex-direction: row; justify-content: center; gap: 48px; animation: none; } .navbar-links { overflow-y: hidden; overflow-x: auto; } .navbar-links::-webkit-scrollbar-thumb { background: #eceaea; border-radius: 10px; /* height: 3px !important; width: 20px !important; */ } .main-header { margin: 0 60px !important; } .mega-grid { grid-template-columns: repeat(3, 1fr); } /* Footer */ .footer-columns { grid-template-columns: repeat(2, 1fr); gap: 40px; } /* ============================ ********** Product page******** =============================== */ .sidebar.sidebar-main.mobile-sidebar { position: sticky !important; /* top: 80px !important; */ } .page-header.type2 .search-area { padding-left: 17px; max-width: 100%; display: flex; align-items: center; justify-content: center; } .page-header .amsearch-wrapper-block { float: unset !important; } .amelsearch-further-section .amelsearch-input { width: 277px !important; } .amelsearch-further-section .amelsearch-label { font-size: 18px !important; white-space: nowrap !important; } .amelsearch-further-section { display: flex; flex: 0 1 auto !important; flex-direction: column !important; gap: 20px !important; align-items: flex-start !important; } .toolbar.toolbar-products { display: flex !important; align-items: end !important; } .toolbar-sorter.sorter { margin-right: unset; margin-left: 92px; } .checkout-cart-index .cart-summary { padding: 16px 12px !important; } .cart.table-wrapper { padding: 8px 15px !important; } } /* ============================= */ /* Tablet (768px to 1024px) */ /* ============================= */ @media (min-width: 768px) and (max-width: 1023px) { .sidebar.sidebar-main.mobile-sidebar { position: fixed !important; /* top: 80px !important; */ } /* -------- Global -------- */ .container { margin: 0 40px !important; } .page-main-full-width .content-section { margin: 0 40px !important; } .page-main { padding-right: 0 !important; padding-left: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .page-main-inner { padding: none !important; } /* -------- For Brand margin -------- */ #maincontent.page-main .page-main-inner, #maincontent.page-main .page-title-wrapper, #maincontent.page-main .page.messages { margin: 0 40px; } .content-section { margin: 0 40px !important; } /* -------- Header -------- */ .mobile-header-row button { border: none !important; } .top-bar { height: 40px !important; overflow: hidden !important; /* padding: 8px 0 !important; */ } .top-bar-viewport { overflow: visible !important; } .top-bar-inner { padding-left: 24px !important; padding-right: 24px !important; display: block !important; animation: ticker 10s infinite; gap: 24px !important; flex-direction: row !important; justify-content: center !important; animation: none !important; } .top-bar-item { font-size: 0.75rem !important; } .main-header { margin: 0 24px !important; padding: 24px 16px 16px !important; } .header-wrapper { gap: 16px !important; } .header-center { display: inline-block !important; } .logo h1 { margin-left: 48px !important; } .logo img { height: 50px; width: 50px; } .header-center .search-area.show-icon-tablet a.search-toggle-icon { display: none !important; } .header-center { margin: 0 50px !important; width: 100% !important; } .amsearch-form-block { max-width: 610px; } .search-bar { max-width: 500px !important; } .header-actions-wrapper { gap: 16px !important; margin-left: 0 !important; } .action-item span { display: none !important; } .header-menu-toggle { display: flex !important; } .header-menu-toggle:hover { background-color: transparent !important; color: var(--primary) !important; } /* -------- Navbar -------- */ .navbar-wrapper { display: none; } /* --------Home Page -------- */ .hero-banner-wrapper { padding: 32px 40px !important; gap: 24px !important; } .premium-brands-title { font-size: 26px; line-height: 34px; } .hero-banner-features { gap: 10px 24px; white-space: nowrap; } .brands-listing-grid, .premium-brands-grid { grid-template-columns: repeat(3, 1fr); gap: 16px 20px; } .alphabet-filter-wrapper { margin-top: 24px; margin-bottom: 24px; overflow-x: auto !important; } .alphabet-filter-list { flex-wrap: nowrap !important; gap: 24px 32px } .brands-listing-wrapper { padding: 32px 0 60px; gap: 36px; } .top-marken-wrapper h3, .bestseller-categories-wrapper h3 { font-size: 20px !important; } /* -------- Footer -------- */ .footer-columns { grid-template-columns: repeat(2, 1fr) !important; gap: 36px !important; } .footer-top { flex-direction: column !important; gap: 32px !important; } .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; } .footer-top-right .newsletter-form { display: flex; gap: 12px; flex-direction: row !important; /* align-items: end !important; */ /* height: 52px; */ } /*========================= ******* product page ****** ========================== */ .amelsearch-further-section { display: none !important; /* flex: 1; gap: 43px; */ } .amelsearch-further-section .amelsearch-label { white-space: nowrap !important; } .amelsearch-further-section .amelsearch-input { border-radius: 9px; width: 300px; } .brandpage-index-index main#maincontent { padding-left: unset !important; padding-right: unset !important; /* padding: 0 40px !important; */ } .alphabet-filter-list { gap: 30px !important; } .header-actions-wrapper span { display: none !important; } /* cart page changes */ .cart-container { display: flex !important; flex-wrap: wrap !important; flex-direction: column !important; } .cart-container .form-cart { order: 1 !important; width: 100% !important; padding-right: unset !important; } .cart-container .cart-summary { order: 3 !important; width: 100% !important; padding: 16px !important; } .cart-discount { display: flex !important; order: 2 !important; width: 100% !important; border-bottom: unset !important; margin-bottom: 32px !important; } .cart-discount .block .content { display: flex !important; gap: 16px !important; padding: unset !important; } .card.customer-service-card, .card.faq-card { box-shadow: none !important; padding: unset !important; } .card.faq-card .faq-header a.faq-help-link { font-size: 16px !important; } .customer-service-content h3.customer-service-title { margin-top: 32px !important; } /* .cart.table-wrapper { box-shadow: var(--light-gray) 0 4px 12px !important; padding: 8px 15px !important; border-radius: 12px !important; } .cart.table-wrapper .cart-item:last-of-type { border-bottom: 1px solid var(--primary) !important; } */ /* ends changes */ } /* ================================================================ MOBILE RESPONSIVE 768PX ================================================================ */ @media (max-width: 767px) { /* -------- Global -------- */ .container { margin: 0 16px !important; } .page-main-full-width .content-section { margin: 0 16px !important; } .page-main { padding-right: 0 !important; padding-left: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .content-section { margin: 0 16px !important; } .page-main { padding-left: unset !important; padding-right: unset !important; } .page-main-inner { padding: 0 !important; } /* For brand margin */ #maincontent.page-main .page-main-inner, #maincontent.page-main .page-title-wrapper, #maincontent.page-main .page.messages { margin: 0 16px; } #maincontent { padding-top: 20px !important; } /* -------- Header -------- */ .top-bar { width: 100% !important; overflow: hidden !important; height: 40px !important; overflow: hidden !important; } .announcement-item, .features-group .top-bar-secondary-item { height: 40px; display: flex; align-items: center; justify-content: center; width: 100%; } .top-bar-item.announcement-item { display: flex; } .top-bar-item.features-group { display: block; } .top-bar-inner { display: block; animation: mobile-ticker 10s infinite; } .main-header { margin: 0 !important; padding: 12px 12px !important; } .header-wrapper { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px 12px !important; } .header-menu-toggle { display: flex !important; width: 32px !important; padding: 0 !important; border: none !important; } .logo { width: 100px; order: 2; display: flex; justify-content: center; flex: 1; } .logo h1 { font-size: 24px; line-height: 28px; margin-left: 65px !important; } .logo img { height: 50px; width: 50 spx; } .header-actions-wrapper { display: flex; order: 3; /* gap: 12px; */ } .action-item { padding: 0; gap: 0; } .action-item img { width: 24px; height: 24px; } .action-item span { display: none; } .page-header.type2 .header-contact .my-account span { /* Hide "My Account" on mobile since it's in the hamburger menu below */ display: none !important; } a.action.showcart.action.showcart span { /* Hide "My Account" on mobile since it's in the hamburger menu below */ display: none !important; } a.action.showcart.action.showcart img { /* Show cart icon on mobile */ display: flex !important; width: 24px; height: 24px; } .header-center .search-area.show-icon-tablet a.search-toggle-icon { /* Hide search icon on mobile since search bar will be full width below */ display: none !important; } .page-header.type2 .search-area { padding-left: unset !important; } .search-bar { order: 4; width: 100%; max-width: 100%; flex: 0 0 100%; margin: 0; height: 48px; } section.amsearch-wrapper-block { width: 330px !important; display: flex !important; justify-content: center !important; margin: 0 auto !important; padding-bottom: 0 !important; } .search-bar input { height: 48px; border-radius: 24px; padding: 0 50px 0 20px; border: 1px solid #D1D5DB; /* Lighter border like screenshot */ font-size: 15px; font-weight: 400; /* Normal weight for better readability */ } .search-bar-btn { border: none; width: 44px; padding: 0; } .search-bar-btn img { width: 18px; height: 18px; opacity: 0.6; } /* -------- Navbar -------- */ .navbar-wrapper, .mega-dropdown { display: none; } .mega-backdrop { display: none !important; } /* Home page */ /* -------- Footer -------- */ .footer { padding: 40px 0 0 !important; } .footer-columns { grid-template-columns: 1fr !important; gap: 32px; } .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } .legal-links li { font-size: 12px !important; white-space: nowrap !important; } .payment-methods { gap: 12px; justify-content: center !important; } /* -------- Premium Brands Page -------- */ .hero-banner-wrapper { padding: 24px 16px !important; flex-direction: column !important; gap: 20px !important; align-items: flex-start !important; } .premium-brands-title { font-size: 22px !important; line-height: 30px !important; margin-bottom: 16px !important; } .hero-banner-features { flex-direction: column; gap: 8px; } .feature-item { font-size: 14px; } .hero-banner-action { width: 100%; } .hero-banner-btn { width: 100%; text-align: center; } .brands-listing-wrapper { padding: 24px 0 48px; gap: 32px; } .brands-listing-grid, .premium-brands-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 16px; } .alphabet-filter-wrapper { margin-top: 24px; margin-bottom: 24px; padding-bottom: 16px; overflow-x: auto; -ms-overflow-style: none; } .alphabet-filter-list { gap: 8px 24px !important; flex-wrap: nowrap; } .letter-group { margin-bottom: 32px; } .letter-heading { font-size: 20px; margin-bottom: 16px; } .top-marken-wrapper h3, .bestseller-categories-wrapper h3 { font-size: 18px; } .brand-link { font-size: 16px; } .brand-count { font-size: 14px; } /* -------- Footer Top Section -------- */ .footer-top { flex-direction: column; gap: 40px; } .footer-top-left, .footer-top-right { max-width: 100%; width: 100%; } .footer-top-right .newsletter-form { flex-direction: column; } .footer-top-right .newsletter-form input, .footer-top-right .newsletter-form button { width: 100%; max-width: 100%; } .newsletter-form button { padding: 16px 24px; } /* -------- Copyright Section -------- */ .footer-copyright-wrapper { flex-direction: column; align-items: center; gap: 16px; text-align: center; } .footer-copyright-wrapper p { text-align: center; width: 100%; } /* -------- WhatsApp Icon Fix -------- */ .whatsapp-cta p { display: block; text-align: left; } .whatsapp-icon { vertical-align: middle; margin-left: 8px; width: 30px; height: 30px; } /* product page css */ .page-products .product-item-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; line-height: 20px !important; max-height: 40px; } .page-products .product-item-name a { font-family: var(--font-outfit) !important; font-size: 12px !important; font-weight: 500 !important; color: var(--primary) !important; line-height: 20px !important; transition: color 0.2s ease; text-transform: capitalize !important; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines */ -webkit-box-orient: vertical; overflow: hidden !important; max-height: 40px; } /* catalogsearch-result-index OR .page-product for parent-class */ .page-products .product-item-info.type6.porto-tb-item.type-product.has-post-thumbnail.product-type-simple { margin: 8px !important; padding: unset !important; padding-bottom: 5px !important; box-shadow: var(--light-gray) 0 1px 4px !important; } .price-box .price { font-family: var(--font-outfit) !important; font-size: 18px !important; font-weight: 500 !important; color: var(--secondary) !important; } .sidebar.sidebar-main.mobile-sidebar { position: fixed !important; } .amelsearch-further-section { display: none !important; } /* card checkout page */ .cart.table-wrapper .cart-item { grid-template-columns: 130px 1fr 80px !important; } .cart.table-wrapper .cart-item .item-image { width: 140px !important; } /* .cart.table-wrapper .cart-item:last-of-type { border-bottom: 1px solid var(--primary) !important; } */ .cart.table-wrapper { padding: 8px 6px !important; } .cart-item .item-contant .item-qty { width: 110px !important; } .cart-item .item-side span.price { font-size: 18px !important; } .card.faq-card .faq-header h2.faq-title, .faq-header a.faq-help-link, .customer-service-content h3.customer-service-title { font-size: 20px !important; } .cart-container { display: flex !important; flex-wrap: wrap !important; flex-direction: column !important; } .cart-container .form-cart { order: 1 !important; width: 100% !important; padding-right: unset !important; } .cart-container .cart-summary { order: 3 !important; width: 100% !important; padding: 16px !important; } .cart-discount { display: flex !important; order: 2 !important; width: 100% !important; border-bottom: unset !important; margin-bottom: 32px !important; } .cart.table-wrapper { border-top: none !important; } .cart-discount .block .content { display: flex !important; } .cart-item .item-contant .item-info .item-seller { margin-top: unset !important; } .cart.table-wrapper .cart-item .item-contant .item-info .item-brand { margin-bottom: unset !important; } .cart.table-wrapper .cart-item button { top: -2 !important; } .item-image .item-wishlist svg { height: 20px !important; width: 20px !important; } .cart.table-wrapper .action { margin-right: unset !important; } a.action.action-delete.item-delete svg { height: 20px !important; width: 20px !important; } .cart-item .item-side { justify-content: none !important; gap: 130px !important; } /* card checkout page end*/ } /* 26 feb */ /* ============================================= COMPONENTS — REUSABLE UI ELEMENTS ============================================= */ /* ── Breadcrumb ─────────────────────────── */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-16); } .breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-10); margin: 0; padding: 0; list-style: none; } .breadcrumb__item { display: flex; align-items: center; gap: var(--space-10); font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--color-pale-sky); } .breadcrumb__item a:hover { color: var(--primary); } .breadcrumb__item--active { color: var(--primary); } .breadcrumb__sep { display: flex; align-items: center; color: var(--color-pale-sky); } /* ── Page Heading Block ─────────────────── */ .page-heading { margin-top: var(--space-16); margin-bottom: var(--space-16); } .page-heading__title { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--primary); line-height: var(--lh-tight); margin-bottom: var(--space-8); } .page-heading__desc { display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--secondary); line-height: var(--lh-base); } .page-heading__read-more { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--secondary); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; } .page-heading__desc--truncated { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .page-heading__desc--expanded { display: block; overflow: visible; -webkit-line-clamp: initial; line-clamp: initial; } /* ── Category Sidebar List ──────────────── */ .cat-list { display: flex; flex-direction: column; gap: var(--space-6); } .cat-list__parent { display: flex; align-items: center; gap: var(--space-8); min-height: 24px; border-radius: var(--radius-sm); transition: background var(--transition); } .cat-list__parent { display: flex; align-items: center; justify-content: space-between; width: 100%; } .cat-list__parent-link { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--primary); } .cat-list__children { display: flex; flex-direction: column; gap: var(--space-4); padding-left: var(--space-12); margin-top: var(--space-4); } .cat-list__children--nested { padding-left: var(--space-20); margin-top: var(--space-8); gap: var(--space-12); } .cat-list__child-link { font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--primary); display: block; padding: var(--space-2) 0; transition: color var(--transition); } .cat-list__child-link:hover { color: var(--primary); } .cat-list__root-link { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--primary); display: flex; align-items: center; min-height: 24px; transition: color var(--transition); } .cat-list__root-link:hover { color: var(--primary); } /* --- Badges --- */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-medium); } .badge-outline { border: 1px solid var(--light-gray); color: var(--secondary); background: transparent; } /* ── Trending Brands Tags ───────────────── */ .brand-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-16); } .brand-tag { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-12); border: 1px solid var(--light-gray); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--primary); white-space: nowrap; transition: var(--transition); } .brand-tag:hover { background: var(--white-smoke); border-color: var(--primary); } .brand-tag--active { background: var(--primary); color: var(--white); border-color: var(--primary); } /* ── Brand Checkbox Filter ──────────────── */ .brand-search { position: relative; margin-bottom: var(--space-16); } .brand-search__input { width: 100%; height: 40px; padding: 0 40px 0 var(--space-12); border: var(--light-gray); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-light); color: var(--primary); background: var(--white); outline: none; } .brand-search__icon { position: absolute; right: var(--space-12); top: 50%; transform: translateY(-50%); color: var(--color-gray-chateau); pointer-events: none; } .filter-item-list { display: flex; flex-direction: column; gap: var(--space-4); max-height: 100%; } .filter-item-list::-webkit-scrollbar { width: 4px; } .filter-item-list::-webkit-scrollbar-track { background: var(--color-athens-gray); border-radius: var(--radius-pill); } .filter-item-list::-webkit-scrollbar-thumb { background: var(--light-gray); border-radius: var(--radius-pill); } .filter-item { display: flex; align-items: center; gap: var(--space-8); min-height: 32px; } .filter-item__label { display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-md); font-weight: var(--fw-light); color: var(--primary); cursor: pointer; width: 100%; } .filter-item__checkbox { position: relative; display: flex; align-items: center; justify-content: center; } .filter-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; } /* ── Sort Combo ──────────────────────────── */ .combobox { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 8px 8px 12px; gap: var(--space-8); width: 150px; height: 40px; background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--transition); } .combobox:hover { border-color: var(--primary); } .combobox svg { width: 16px; height: 16px; color: var(--color-gray-chateau); flex-shrink: 0; } .sort-select { border: none; background: none; outline: none; width: 100%; appearance: none; font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-light); color: var(--primary); line-height: 24px; cursor: pointer; } /* ── Sign Up CTA Banner ──────────────────── */ .cta-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); padding: var(--space-32) var(--space-40); margin-bottom: var(--space-40); background-color: var(--white); color: var(--primary); } .cta-banner__content { flex: 1; } .cta-banner__title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-bottom: var(--space-20); } .cta-banner__features { display: grid; grid-template-columns: 1fr; gap: var(--space-12) var(--space-24); } .cta-feature { display: flex; align-items: center; gap: var(--space-12); font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--primary); } .cta-feature svg { color: var(--primary); opacity: 0.8; flex-shrink: 0; } .cta-banner .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--white); padding: var(--space-16) var(--space-32); font-weight: var(--fw-semibold) !important; white-space: nowrap; flex-shrink: 0; min-width: 264px; } .cta-banner .btn-primary:hover { background: var(--black); border-color: var(--white); } @media (max-width: 768px) { .cta-banner { flex-direction: column; align-items: stretch; gap: var(--space-24); padding: var(--space-24); } .cta-banner .btn-primary { width: 100%; white-space: normal; } .cta-banner__features { gap: var(--space-12); } } /* ── Product Card ────────────────────────── */ .product-card_ { display: flex; flex-direction: column; gap: var(--space-12); transition: transform var(--transition), box-shadow var(--transition); } .product-card_:hover { transform: translateY(-4px); } .product-card__image-wrap { position: relative; aspect-ratio: 1; background: var(--white-smoke); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: border-color var(--transition); } .product-card_:hover .product-card__image-wrap { border-color: var(--light-gray); } .product-card__image { width: 100%; height: 100%; object-fit: contain; padding: var(--space-20); } .product-card__body { display: flex; flex-direction: column; gap: var(--space-4); } .product-card__ean { font-size: var(--fs-xs); color: var(--color-gray-chateau); } .product-card__brand { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--secondary); text-transform: uppercase; letter-spacing: 0.05em; } .product-card__name { font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--primary); line-height: var(--lh-base); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 3em; } .product-card__price-link { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--primary); text-decoration: underline; } /* ── Pagination ──────────────────────────── */ .pagination { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); margin-top: var(--space-40); margin-bottom: var(--space-40); padding-top: var(--space-40); border-top: var(--light-gray); } .pagination__info { font-size: var(--fs-md); color: var(--secondary); font-weight: var(--fw-light); } .pagination__pages { display: flex; align-items: center; gap: var(--space-8); } .page-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: var(--light-gray); background: var(--white); color: var(--primary); font-size: var(--fs-md); font-weight: var(--fw-medium); transition: all var(--transition); } .page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .page-btn--active { background: var(--primary); border-color: var(--primary); color: var(--white); } .page-btn--disabled { opacity: 0.5; cursor: not-allowed; background: var(--color-athens-gray); } /* ── Brand Carousel Card ─────────────────── */ .brand-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); min-width: 140px; flex: 0 0 auto; /* Ensure items don't shrink and force overflow */ transition: transform var(--transition); } .brand-card:hover { transform: translateY(-4px); } .brand-card__logo-wrap { width: 140px; height: 140px; border-radius: 50%; background: var(--white-smoke); display: flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: border-color var(--transition); } .brand-card:hover .brand-card__logo-wrap { border-color: var(--light-gray); } .brand-card__logo { max-width: 70%; max-height: 70%; object-fit: contain; } .brand-card__name { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--primary); } /* ── Category Pill Links ─────────────────── */ .cat-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); } .cat-pill { display: inline-flex; padding: var(--space-8) var(--space-16); border: 1px solid var(--light-gray); border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--primary); transition: var(--transition); } .cat-pill:hover { border-color: var(--primary); background: var(--white-smoke); } /* ── FAQ Accordion ───────────────────────── */ .faq-section { padding: 72px 0; } .faq-layout { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 72px; } /* Left Column: Info */ .faq-info { display: flex; flex-direction: column; gap: var(--space-16); width: 376px; flex-shrink: 0; } .faq-heading { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: 32px; letter-spacing: -0.36px; color: var(--primary); } .faq-help { display: flex; flex-direction: column; gap: var(--space-16); } .faq-help__text { font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-light); line-height: 24px; color: var(--secondary); } .faq-help__links { display: flex; flex-direction: column; gap: var(--space-8); padding-left: 20px; } .faq-help__links li { list-style: disc; font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-light); line-height: 24px; color: var(--secondary); } .faq-help__links a { font-weight: var(--fw-regular); color: var(--secondary); } /* Right Column: Accordion */ .faq-accordion { display: flex; flex-direction: column; gap: 12px; width: 824px; flex: 1; max-width: 824px; } .faq-item { display: flex; flex-direction: column; padding-bottom: 12px; border-bottom: 1px solid var(--light-gray); } .faq-question { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0; gap: var(--space-16); text-align: left; background: transparent; border: none; cursor: pointer; } .faq-question span { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-md); line-height: 24px; color: var(--primary); flex: 1; } .faq-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--primary); transition: transform var(--transition); } .faq-item.open .faq-icon { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding: 0; } .faq-item.open .faq-answer { max-height: 300px; padding-top: var(--space-16); } .faq-answer p { font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-light); line-height: var(--lh-base); color: var(--secondary); } /* Responsive Design */ @media (max-width: 1024px) { .faq-layout { gap: var(--space-40); } .faq-info { width: 300px; } .faq-accordion { width: auto; } } @media (max-width: 768px) { .faq-section { padding: var(--space-48) 0; } .faq-layout { flex-direction: column; gap: var(--space-32); } .faq-info { width: 100%; } .faq-heading { font-size: var(--fs-lg); } .faq-help__text { font-size: var(--fs-sm); } .faq-accordion { width: 100%; max-width: 100%; } } @media (max-width: 480px) { .faq-section { padding: var(--space-40) 0; } .faq-layout { gap: var(--space-24); } .faq-heading { font-size: var(--fs-md); } } /* ── Review Card ─────────────────────────── */ .review-card { margin-top: var(--space-60); text-align: center; } .review-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-24); color: var(--primary); } .review-card__box { background: var(--white); border: var(--light-gray); border-radius: var(--radius-lg); padding: var(--space-32); max-width: 600px; margin-inline: auto; box-shadow: var(--shadow-sm); } .review-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-20); } .review-card__user { display: flex; align-items: center; gap: var(--space-12); text-align: left; } .review-card__avatar { width: 40px; height: 40px; background: var(--color-athens-gray); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--primary); } .review-card__author { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--primary); } .review-card__verified { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: #00b67a; font-weight: var(--fw-medium); } .review-card__rating { display: flex; gap: 2px; } .review-card__text { font-size: var(--fs-lg); line-height: var(--lh-base); color: var(--primary); font-weight: var(--fw-regular); margin-bottom: var(--space-24); font-style: italic; } .review-card__trustpilot { font-size: var(--fs-sm); color: var(--secondary); display: inline-block; transition: opacity var(--transition); } .review-card__trustpilot:hover { opacity: 0.8; } .review-card__trustpilot strong { color: #1c1c1c; } /* ── Trust Card (Legacy/Misc) ────────────── */ .trust-card { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-20); background: var(--white-smoke); border-radius: var(--radius-md); margin-top: var(--space-40); } /* as services cart page related products */ /* ── Products Carousel ── */ .products-carousel { position: relative !important; } .carousel-btn { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #ffffff !important; border: 1px solid #e5e5e5 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; transition: all 0.2s !important; } .carousel-btn:hover { background: #f9fafb !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } .carousel-prev { left: -20px !important; } .carousel-next { right: -20px !important; } .products-grid { display: flex !important; gap: 16px !important; overflow-x: auto !important; scroll-behavior: smooth !important; scrollbar-width: none !important; } .products-grid::-webkit-scrollbar { display: none !important; } /* ── Product Card ── */ .product-card { flex: 0 0 20% !important; } .product-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } .product-wishlist { position: absolute !important; top: 8px !important; right: 8px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #ffffff !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #6b7280 !important; z-index: 1 !important; transition: color 0.2s !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } .product-wishlist:hover { color: #ef4444 !important; } .product-card img { width: 100% !important; aspect-ratio: 3/4 !important; object-fit: cover !important; } .product-brand { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #1a1a1a !important; padding: 8px 12px 4px !important; } .product-price { font-size: 14px !important; font-weight: 600 !important; color: #1a1a1a !important; padding: 0 12px 12px !important; } .product-add-btn { width: 100% !important; padding: 12px !important; background: #1a1a1a !important; color: #ffffff !important; border: none !important; font-size: 14px !important; font-weight: 600 !important; transition: background 0.2s !important; } .product-add-btn:hover { background: #000000 !important; } .card { background: #ffffff !important; border-radius: 8px !important; padding: 24px !important; margin-bottom: 24px !important; box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.08) !important; } .card-header { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; margin-bottom: 24px !important; padding-bottom: 16px !important; border-bottom: 1px solid #e5e5e5 !important; } .card-title { font-size: 20px !important; font-weight: 700 !important; margin-bottom: 4px !important; color: #1a1a1a !important; } .card-subtitle { font-size: 13px !important; color: #6b7280 !important; } .delivery-date { font-size: 13px !important; color: #1a1a1a !important; font-weight: 500 !important; }