/* ========================================================================== RARE VISION — Design tokens (light theme) Palette: white surfaces, near-black text/CTAs, warm gold accent for product highlights, red for sale/discount signals, dark footer. Type: Poppins (headings / wordmark / gold style names), Inter (body/UI). ========================================================================== */ :root{ --bg: #ffffff; --surface: #ffffff; --surface-muted: #f2f0ea; --surface-muted-alt: #eeece5; --border: #e5e3dc; --border-strong: #d8d5cc; --text: #14140f; --text-muted: #6b6b70; --text-faint: #9a9aa0; --gold: #c9962e; --gold-dark: #a67a20; --red: #e13a3a; --black: #0b0b0d; --footer-bg: #0e0e10; --footer-text: #d8d6d0; --footer-text-muted: #8f8d88; --footer-border: #232326; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-card: 0 10px 30px -14px rgba(0,0,0,.18); --shadow-pill: 0 8px 20px rgba(0,0,0,.14); --shadow-panel: -20px 0 60px -20px rgba(0,0,0,.35); --font-display: 'Poppins', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --header-h: 72px; --header-bg: #ffffff; /* solid on purpose: page content scrolls beneath the sticky header */ --ease: cubic-bezier(.22,.85,.34,1); /* Where the side drawers (nav / cart / sign-in / notifications) start. Always 0: every drawer is full viewport height and slides OVER the sticky site header. */ --drawer-top: 0px; /* Z-INDEX LAYERING, bottom -> top: page content ........... 0-60 (pdp-sticky-bar 60, in-page dropdowns 20) STICKY SITE HEADER ..... 1000 drawer backdrop ........ 10000 (.overlay) side drawers ........... 10001-4 (cart 10001, sign-in 10002, notify 10003, nav 10004) dialog backdrop ........ 10100 (.modal-overlay, #discountPopupOverlay) dialogs / lightbox ..... 10110 (product, profile, map, waitlist, discount) toast .................. 10120 Drawers cover the header. Dialogs sit above the drawers so a dialog opened from a drawer (or one that reuses .overlay) is never dimmed by a drawer backdrop. */ --z-header: 1000; --z-modal-overlay: 10100; --z-modal: 10110; --z-toast: 10120; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; } } body{ margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea{ font: inherit; color: inherit; } ::selection{ background: var(--gold); color: #fff; } :focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; } .svg-icon, svg{ width: 22px; height: 22px; } /* ========================================================================== HEADER ========================================================================== */ /* STICKY HEADER js/header-loader.js injects

INSIDE #header-container. position:sticky only travels within its parent's box, and that wrapper is exactly one header tall (every drawer/modal inside it is position:fixed, i.e. out of flow) — so the header never had any room to stick and scrolled away with the page. display:contents removes the wrapper's own box, making (the full page height) the header's containing block. #header-placeholder is listed too in case a page uses that mount id instead. */ #header-container, #header-placeholder{ display: contents; } .site-header{ position: -webkit-sticky; position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); display: flex; align-items: center; background: var(--header-bg); /* fully opaque: no bleed-through while scrolling */ border-bottom: 1px solid var(--border); transition: box-shadow .25s var(--ease); } /* Toggled by js/header-loader.js once the page has scrolled past the top. */ .site-header.is-scrolled{ box-shadow: 0 8px 22px -12px rgba(0,0,0,.28); } .header-inner{ position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .header-left{ display: flex; align-items: center; gap: 4px; min-width: 0; } .header-right{ display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .icon-btn{ position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text); transition: background .2s; flex-shrink: 0; } .icon-btn:hover{ background: var(--surface-muted); } .icon-btn svg{ width: 21px; height: 21px; } .notify-badge{ position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; } .cart-badge{ position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--black); color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .25s var(--ease); border: 1.5px solid #fff; } .cart-badge.show{ transform: scale(1); } /* Logo: "RARE" in black + "VISION" in gold — same wordmark used on checkout.html and the sign-in panel header, so the shared typography/layout stays on the plain .logo-lockup class. Only the site header centers it dead-center via absolute positioning (below) — those other contexts just want it as a normal flex item, in flow, on the left/wherever it's placed. */ .logo-lockup{ display: flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: .01em; white-space: nowrap; } /* Header-only: positioned dead-center of the header via absolute positioning (relative to .header-inner) rather than as a flex/grid sibling of .header-left/.header-right — those two groups hold very different amounts of content (a hamburger + full search bar on the left vs. two icons on the right), so centering the logo "in the leftover space" between them (the grid's old 1fr/auto/1fr approach) pushed it visibly off-center toward whichever side had less content. Taking it out of flow and centering it against the header itself keeps it exactly centered regardless of how wide the search bar grows. */ .site-header .logo-lockup{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; } /* Legacy static text nav (.main-nav — "New Arrivals / Best Sellers / Shop All / Contact") has been fully removed from the markup and its styles purged from here. The hamburger button (#navToggle) is now the single, permanent entry point into navigation at every breakpoint — it opens the modern #navDrawer (see js/header.js) and nothing else. */ .nav-toggle{ display: flex; } /* ========================================================================== HERO ========================================================================== */ .hero{ position: relative; height: 88svh; min-height: 480px; max-height: 820px; overflow: hidden; background: #000; display: flex; align-items: flex-end; } .hero-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; } .hero-overlay{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.05) 100%); } .hero-content{ position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px 56px; } .hero-title{ font-family: var(--font-display); font-size: clamp(30px, 5.5vw, 56px); font-weight: 800; line-height: 1.15; color: #fff; margin: 0 0 20px; max-width: 620px; } .hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; } .btn-hero-primary, .btn-hero-outline{ display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14.5px; transition: transform .2s var(--ease), background .2s, color .2s; } .btn-hero-primary{ background: #fff; color: var(--black); } .btn-hero-primary:hover{ transform: translateY(-2px); background: var(--gold); color: #fff; } .btn-hero-outline{ border: 1.5px solid rgba(255,255,255,.8); color: #fff; } .btn-hero-outline:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); } /* ========================================================================== SHOWCASE SECTIONS (New Arrivals / Best Sellers) ========================================================================== */ .showcase-section{ max-width: 1320px; margin: 0 auto; padding: 56px 20px 24px; } .showcase-heading{ font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; text-align: center; margin: 0 0 32px; letter-spacing: .01em; } .home-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .view-all-link{ display: block; text-align: center; margin: 28px auto 0; font-weight: 600; font-size: 14.5px; color: var(--text); width: fit-content; padding: 6px 4px; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; } .view-all-link:hover{ border-color: var(--text); color: var(--gold-dark); } /* ---- Home card (New Arrivals / Best Sellers style) ---- */ .home-card{ display: flex; flex-direction: column; animation: cardIn .4s var(--ease) both; } @keyframes cardIn{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: translateY(0); } } .home-card-media{ position: relative; aspect-ratio: 3 / 4; background: var(--surface-muted); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; } .home-card-media img{ width: 100%; height: 100%; object-fit: cover; } .home-badge{ position: absolute; top: 10px; left: 10px; background: #fff; color: var(--text); font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; box-shadow: var(--shadow-pill); } .home-badge.sale{ background: var(--red); color: #fff; } .home-rank-badge{ position: absolute; top: 10px; right: 10px; background: var(--black); color: #fff; font-family: var(--font-display); font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 6px; } .out-of-stock{ position: absolute; inset: 0; background: rgba(255,255,255,.72); display: flex; align-items: center; justify-content: center; color: var(--text); font-weight: 700; font-family: var(--font-display); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } .choose-options-btn{ position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); background: #fff; color: var(--text); font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 13px 18px; border-radius: 999px; box-shadow: var(--shadow-pill); white-space: nowrap; transition: background .2s, color .2s; z-index: 3; } .choose-options-btn:hover:not(:disabled){ background: var(--black); color: #fff; } .choose-options-btn:disabled{ color: var(--text-faint); cursor: not-allowed; } .home-card-body{ padding-top: 30px; display: flex; flex-direction: column; gap: 4px; } .swatch-row{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .swatch-dot{ width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 0 0 1px #fff inset; flex-shrink: 0; } .home-card-name{ font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; margin: 0; color: var(--text); cursor: pointer; } .home-card-subtitle{ font-size: 12px; color: var(--text-muted); margin: 0; } .home-price-row{ display: flex; align-items: baseline; gap: 8px; margin-top: 2px; } .home-price{ font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text); } .home-price.sale{ color: var(--red); } .home-price-old{ font-family: var(--font-display); font-size: 12px; color: var(--text-faint); text-decoration: line-through; } .home-rating-row{ display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-faint); } .stars{ display: inline-flex; gap: 1px; font-size: 11px; line-height: 1; } .star{ color: var(--border-strong); } .star.filled{ color: var(--gold); } .rating-count{ font-family: var(--font-display); } /* ========================================================================== BRAND MARQUEE Renders real partner logo files (supplied by you at /assets/logos/*.svg — see README.md). Scrolls right; logos keep their original colors and proportions (no filters, no forced aspect ratio). ========================================================================== */ .brand-marquee-section{ border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 26px 0; margin-top: 48px; overflow: hidden; } .brand-marquee{ width: 100%; overflow: hidden; } .brand-track{ display: flex; align-items: center; gap: 56px; width: max-content; /* Starts at -50% and animates to 0 so the (duplicated) content appears to travel to the right, rather than the left. */ animation: marquee-scroll-right 38s linear infinite; } .brand-track:hover{ animation-play-state: paused; } @keyframes marquee-scroll-right{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } } .brand-logo-item{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } /* Uniform height, auto width — logos keep their original aspect ratio and are never stretched or distorted. No grayscale/filter is applied, so each logo displays in its original brand colors. */ .brand-logo{ height: 50px; width: auto; max-width: 220px; object-fit: contain; display: block; } /* Shown automatically in place of any logo file that hasn't been uploaded yet to /assets/logos/ — keeps the marquee looking intentional instead of showing broken-image icons during setup. Disappears once the real file is in place, since the will simply load successfully instead. */ .brand-logo-fallback{ font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-muted); white-space: nowrap; } /* ========================================================================== SHOP BY CATEGORY SECTION ========================================================================== */ /* ========================================================================== CATALOG BANNER (new-arrivals.html / best-sellers.html title banner) STRICT CATALOG ROUTING: these two pages are dedicated catalog pages, not shop.html?filter=... — see their own "STRICT CATALOG ROUTING" HTML comments and js/main.js's initPageCatalogFilter(). This banner replaces the video .hero on those pages with a simple, static title band. ========================================================================== */ .catalog-banner{ background: var(--surface-muted); border-bottom: 1px solid var(--border); padding: 52px 20px 40px; text-align: center; } .catalog-banner-inner{ max-width: 1320px; margin: 0 auto; } .catalog-banner-title{ font-family: var(--font-display); font-size: clamp(28px, 5vw, 48px); font-weight: 800; letter-spacing: .02em; margin: 0 0 10px; } .catalog-banner-subtitle{ font-size: 15px; color: var(--text-muted); margin: 0; } .shop-section{ max-width: 1320px; margin: 0 auto; padding: 56px 20px 80px; } /* Dedicated catalog pages (new-arrivals.html/best-sellers.html) have no toolbar above the grid — .catalog-banner above already carries the page title, so the grid section itself just needs a touch less top padding. */ .catalog-banner + .shop-page-section{ padding-top: 40px; } .shop-toolbar{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 22px; } .filter-pills{ display: flex; gap: 8px; flex-wrap: wrap; } .pill{ padding: 10px 18px; border-radius: 999px; background: var(--black); color: #fff; font-size: 13px; font-weight: 600; transition: all .2s; white-space: nowrap; } .pill:hover{ background: #26262a; } .pill.active{ background: var(--gold); color: #fff; } .search-box{ position: relative; flex: 1 1 260px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 14px; height: 44px; } .search-box:focus-within{ border-color: var(--gold); } .search-box input{ flex: 1; background: transparent; border: none; outline: none; font-size: 14px; color: var(--text); height: 100%; } .search-box input::placeholder{ color: var(--text-faint); } .search-box svg{ width: 18px; height: 18px; color: var(--text-faint); flex-shrink: 0; } .search-clear{ font-size: 18px; color: var(--text-faint); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .search-clear:hover{ color: var(--text); } /* Custom gender dropdown */ .gender-dropdown{ position: relative; flex-shrink: 0; } .gender-dropdown-btn{ display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; transition: border-color .2s; } .gender-dropdown.open .gender-dropdown-btn, .gender-dropdown-btn:hover{ border-color: var(--gold); } .gender-dropdown-btn svg{ width: 16px; height: 16px; transition: transform .2s; } .gender-dropdown.open .gender-dropdown-btn svg{ transform: rotate(180deg); } .gender-dropdown-menu{ position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); list-style: none; margin: 0; padding: 6px; z-index: 20; } .gender-dropdown-menu li{ padding: 11px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s; } .gender-dropdown-menu li:hover{ background: var(--surface-muted); } .gender-dropdown-menu li.selected{ font-weight: 700; color: var(--gold-dark); } .results-meta{ color: var(--text-faint); font-size: 13px; margin: 0 0 18px; } /* Shop grid */ .shop-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .shop-card{ background: var(--surface-muted); border-radius: var(--radius-md); padding: 18px 18px 22px; display: flex; flex-direction: column; animation: cardIn .4s var(--ease) both; } .shop-card-media{ position: relative; aspect-ratio: 1 / 1; margin-bottom: 16px; cursor: pointer; } .shop-card-media img{ width: 100%; height: 100%; object-fit: contain; } .shop-badge-stack{ position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; z-index: 2; } .shop-badge{ background: var(--black); color: #fff; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; } .shop-badge.sale{ position: absolute; top: 0; right: 0; background: var(--red); left: auto; } .shop-card-title{ font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--gold); margin: 0 0 6px; cursor: pointer; } .shop-card-brand{ display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; } .shop-card-fullname{ font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 10px; } .shop-rating-row{ display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); margin-bottom: 8px; } .shop-rating-row .stars{ font-size: 13px; } .shop-price-row{ display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; } .shop-price{ font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); } .shop-price.sale{ color: var(--red); } .shop-price-old{ font-family: var(--font-display); font-size: 13px; color: var(--text-faint); text-decoration: line-through; } .btn-select-size{ width: 100%; background: var(--black); color: #fff; font-weight: 700; font-size: 14px; padding: 13px; border-radius: var(--radius-sm); text-align: center; transition: background .2s, transform .2s; } .btn-select-size:hover:not(:disabled){ background: var(--gold); transform: translateY(-1px); } .btn-select-size:disabled{ background: var(--border-strong); color: var(--text-faint); cursor: not-allowed; transform: none; } .btn-ghost-dark{ background: transparent; border: 1.5px solid var(--border-strong); color: var(--text); font-weight: 700; font-size: 14px; padding: 13px; border-radius: var(--radius-sm); transition: border-color .2s, color .2s; } .btn-ghost-dark:hover{ border-color: var(--text); } /* Empty / loading states */ .empty-state, .loading-state{ text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state p{ margin-bottom: 16px; } .spinner{ width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--gold); margin: 0 auto 14px; animation: spin .8s linear infinite; } @keyframes spin{ to{ transform: rotate(360deg); } } /* ========================================================================== FOOTER ========================================================================== */ .site-footer{ background: var(--footer-bg); color: var(--footer-text); position: relative; } .footer-inner{ max-width: 1320px; margin: 0 auto; padding: 56px 24px 60px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; } .footer-col h4, .footer-social{ margin: 0 0 18px; } .footer-col h4{ font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .08em; color: #fff; } .footer-col{ display: flex; flex-direction: column; gap: 13px; } .footer-col a{ color: var(--footer-text); font-size: 15px; transition: color .2s; } .footer-col a:hover{ color: var(--gold); } .coming-soon-badge{ display: inline-block; color: var(--red); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 8px; vertical-align: middle; } /* Column 3 of the redesigned footer: a single Instagram glyph centered above a "Homepage" / "Contact" link pair (see footer.html). Replaces the old multi-icon row + contact-email block. */ .footer-social{ display: flex; flex-direction: column; align-items: center; gap: 26px; } .social-links{ display: flex; align-items: center; justify-content: center; } .social-links a{ width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; transition: color .2s var(--ease), transform .2s var(--ease); } .social-links a:hover{ color: var(--gold); transform: translateY(-2px); } .social-links svg{ width: 38px; height: 38px; display: block; } .footer-quicklinks{ display: flex; align-items: center; justify-content: center; gap: 56px; } .footer-quicklinks a{ color: #fff; font-size: 16px; transition: color .2s; } .footer-quicklinks a:hover{ color: var(--gold); } .footer-bottom{ position: relative; border-top: 1px solid var(--footer-border); padding: 22px 24px 30px; max-width: 1320px; margin: 0 auto; font-size: 13px; color: var(--footer-text-muted); } .scroll-top-btn{ position: absolute; right: 24px; top: -20px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--black); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-pill); transition: transform .2s; } .scroll-top-btn:hover{ transform: translateY(-2px); } /* ========================================================================== CART PANEL + OVERLAY (light theme) ========================================================================== */ .overlay{ position: fixed; inset: 0; background: rgba(10,10,10,.45); backdrop-filter: blur(2px); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .overlay.show{ opacity: 1; pointer-events: auto; } /* The guest discount popup (index.html) reuses .overlay for its backdrop but is a centred dialog, so its backdrop must cover the sticky header too. */ #discountPopupOverlay{ z-index: var(--z-modal-overlay); } .cart-panel{ position: fixed; top: var(--drawer-top); right: 0; bottom: 0; width: min(420px, 100vw); background: #fff; border-left: 1px solid var(--border); box-shadow: var(--shadow-panel); z-index: 10001; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .38s var(--ease); } .cart-panel.open{ transform: translateX(0); } .cart-header{ display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cart-header h3{ margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; } .cart-header .icon-btn{ font-size: 22px; } .cart-body{ flex: 1; overflow-y: auto; padding: 12px 22px; } .cart-items{ display: flex; flex-direction: column; gap: 16px; padding: 8px 0; } .cart-empty{ display: none; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 60px 10px; color: var(--text-muted); } .cart-empty.show{ display: flex; } /* Shipping accordion (cart drawer) */ .cart-accordion{ border-top: 1px solid var(--border); margin-top: 4px; } .accordion-trigger{ width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; font-size: 14px; font-weight: 700; color: var(--text); } .accordion-chevron{ width: 16px; height: 16px; transition: transform .2s var(--ease); flex-shrink: 0; } .cart-accordion.open .accordion-chevron{ transform: rotate(180deg); } .accordion-panel{ padding: 0 2px 16px; color: var(--text-muted); font-size: 13.5px; line-height: 1.7; } .accordion-panel p{ margin: 0; } .cart-item{ display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; } .cart-item img{ width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted); } .cart-item-name{ font-size: 14px; font-weight: 700; margin: 0 0 4px; } .cart-item-size{ display: inline-block; font-size: 11px; color: var(--text-faint); margin-bottom: 4px; } .cart-item-price{ font-family: var(--font-display); font-size: 13px; color: var(--gold-dark); } .cart-item-qty{ display: flex; align-items: center; gap: 8px; margin-top: 8px; } .qty-btn{ width: 24px; height: 24px; border: 1px solid var(--border-strong); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text); } .qty-btn:hover{ border-color: var(--gold); color: var(--gold-dark); } .qty-value{ font-family: var(--font-display); font-size: 13px; min-width: 16px; text-align: center; } .cart-item-remove{ align-self: flex-start; color: var(--text-faint); font-size: 12px; text-decoration: underline; } .cart-item-remove:hover{ color: var(--red); } .cart-footer{ flex-shrink: 0; padding: 18px 22px 22px; border-top: 1px solid var(--border); } .cart-total-row{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 15px; } .cart-total-row span:last-child{ font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--gold-dark); } /* Any element using the native `hidden` attribute must actually disappear. Without this, class-based `display` rules elsewhere on the page (e.g. .cart-total-row{ display:flex }) tie with the browser's built-in `[hidden]{ display:none }` rule on specificity, and — because they're declared later in this file — win the tie and show the element anyway. */ [hidden]{ display: none !important; } /* Discount row (cart drawer) — lives inside the Discount accordion panel itself, right under the code form, and only appears once a percent-off code has actually been applied (see js/main.js renderCart()). */ .cart-discount-row{ margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-muted); } .cart-discount-row span:last-child{ font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--red); } /* Discount accordion trigger uses a "+" that rotates into an "×" when open, matching the Shipping accordion's chevron mechanics but visually distinct. */ .accordion-plus{ width: 16px; height: 16px; transition: transform .2s var(--ease); flex-shrink: 0; } .cart-accordion.open .accordion-plus{ transform: rotate(45deg); } /* "Add N more items for Free Shipping" progress bar */ .free-shipping-bar{ padding: 4px 2px 18px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .free-shipping-text{ margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--text); text-align: center; } .free-shipping-text strong{ color: var(--gold-dark); font-weight: 700; } .free-shipping-track{ height: 6px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; } .free-shipping-fill{ height: 100%; width: 0%; border-radius: 999px; background: var(--gold); transition: width .4s var(--ease); } .free-shipping-bar.unlocked .free-shipping-fill{ background: var(--red); } /* Subtotal / Free Shipping summary block — sits directly under the bar above */ .cart-subtotal-block{ background: var(--surface-muted); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; } .cart-subtotal-row{ display: flex; justify-content: space-between; align-items: center; } .cart-subtotal-row:first-child{ font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .cart-subtotal-row:first-child span:last-child{ font-family: var(--font-display); font-weight: 700; } .cart-subtotal-row--muted{ font-size: 12.5px; color: var(--text-faint); } /* "Others Also Bought" upsell strip (admin-curated via the CMS's "Show in 'Others Also Bought'" toggle on each product) */ .cart-upsell{ border-top: 1px solid var(--border); margin-top: 4px; padding: 18px 0 6px; } .cart-upsell-heading{ margin: 0 0 14px; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .cart-upsell-track{ display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .cart-upsell-card{ flex: 0 0 108px; width: 108px; } .cart-upsell-media{ position: relative; width: 108px; height: 108px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-muted); cursor: pointer; } .cart-upsell-media img{ width: 100%; height: 100%; object-fit: cover; } .cart-upsell-add-btn{ position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-pill); transition: background .2s, transform .2s; } .cart-upsell-add-btn svg{ width: 14px; height: 14px; } .cart-upsell-add-btn:hover{ background: var(--gold); transform: scale(1.06); } .cart-upsell-name{ margin: 8px 0 2px; font-size: 12px; font-weight: 600; line-height: 1.35; } .cart-upsell-price-row{ display: flex; align-items: baseline; gap: 6px; } .cart-upsell-price{ font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--text); } .cart-upsell-price.sale{ color: var(--red); } .cart-upsell-price-old{ font-size: 11px; color: var(--text-faint); text-decoration: line-through; } .form-error{ background: rgba(225,58,58,.08); border: 1px solid rgba(225,58,58,.3); color: #b52c2c; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin: 0; } .btn-spinner{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; } /* Used inside .checkout-thank-you on checkout.html */ .thank-you-icon{ width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 26px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } /* ========================================================================== TOAST ========================================================================== */ .toast{ position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px); background: var(--black); color: #fff; padding: 13px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.3); z-index: var(--z-toast); opacity: 0; pointer-events: none; transition: all .3s var(--ease); max-width: 90vw; text-align: center; } .toast.show{ opacity: 1; transform: translate(-50%, 0); } /* ========================================================================== PRODUCT DETAIL MODAL (light theme) ========================================================================== */ .modal-overlay{ position: fixed; inset: 0; background: rgba(10,10,10,.55); backdrop-filter: blur(3px); z-index: var(--z-modal-overlay); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .modal-overlay.show{ opacity: 1; pointer-events: auto; } .product-modal{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96); width: min(920px, 92vw); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: opacity .28s var(--ease), transform .28s var(--ease); } .product-modal.open{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .modal-close{ position: sticky; top: 16px; float: left; margin: 16px 0 0 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid var(--border); color: var(--text); font-size: 20px; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background .2s; } .modal-close:hover{ background: var(--surface-muted); } .modal-body{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .modal-gallery{ padding: 24px; } .modal-main-image{ position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-muted); } .modal-main-image img{ width: 100%; height: 100%; object-fit: cover; } .modal-thumbs{ display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; } .modal-thumb{ flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border); opacity: .7; transition: all .2s; } .modal-thumb img{ width: 100%; height: 100%; object-fit: cover; } .modal-thumb:hover{ opacity: 1; } .modal-thumb.active{ border-color: var(--gold); opacity: 1; } .modal-details{ padding: 24px 28px 32px 8px; display: flex; flex-direction: column; gap: 12px; } .modal-title{ font-family: var(--font-display); font-size: 24px; font-weight: 800; margin: 2px 0 0; line-height: 1.2; } .modal-price-row{ display: flex; align-items: baseline; gap: 10px; margin-top: 4px; } .modal-price{ font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--text); } .modal-price.sale{ color: var(--red); } .modal-short-desc{ color: var(--text-muted); font-size: 14px; margin: 0; } .size-select{ margin-top: 6px; } .size-select-label, .qty-select-label{ display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; } .size-grid{ display: flex; flex-wrap: wrap; gap: 8px; } .size-btn{ min-width: 46px; height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-muted); color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 14px; transition: all .2s; } .size-btn:hover:not(:disabled){ border-color: var(--gold); color: var(--gold-dark); } .size-btn.selected{ background: var(--black); border-color: var(--black); color: #fff; } .size-btn.unavailable{ color: var(--text-faint); background: transparent; border-style: dashed; text-decoration: line-through; cursor: not-allowed; opacity: .55; } .size-error{ color: #b52c2c; font-size: 12.5px; margin: 8px 0 0; } .qty-select{ margin-top: 4px; } .qty-stepper{ display: inline-flex; align-items: center; gap: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 14px; } .qty-stepper .qty-btn{ width: 26px; height: 26px; border: none; background: var(--surface-muted); } .qty-stepper .qty-value{ font-size: 14px; min-width: 20px; } .modal-specs h3, .modal-description h3{ font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 18px 0 10px; border-top: 1px solid var(--border); padding-top: 18px; } .spec-list{ margin: 0; display: flex; flex-direction: column; gap: 8px; } .spec-row{ display: grid; grid-template-columns: 42% 1fr; gap: 12px; font-size: 13.5px; } .spec-row dt{ color: var(--text-faint); margin: 0; } .spec-row dd{ color: var(--text); margin: 0; } .modal-description p{ color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: 0 0 12px; } .modal-description ul, .modal-description ol{ margin: 0 0 12px; padding-left: 20px; color: var(--text-muted); font-size: 14px; line-height: 1.7; } .modal-description li{ margin-bottom: 4px; } .modal-description strong{ color: var(--text); } .modal-description a{ color: var(--gold-dark); text-decoration: underline; } /* ========================================================================== SIGN IN DRAWER (light theme, same mechanics as the cart panel) ========================================================================== */ .signin-panel{ position: fixed; top: var(--drawer-top); right: 0; bottom: 0; width: min(420px, 100vw); background: #fff; border-left: 1px solid var(--border); box-shadow: var(--shadow-panel); z-index: 10002; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .38s var(--ease); } .signin-panel.open{ transform: translateX(0); } .signin-panel-header{ display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .signin-panel-logo{ font-size: 18px; justify-self: start; } .signin-panel-header .icon-btn{ font-size: 22px; } .signin-panel-body{ flex: 1; overflow-y: auto; padding: 28px 26px 36px; } .signin-section-title{ font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text); margin: 0 0 20px; } .signin-form{ display: flex; flex-direction: column; gap: 16px; } .signin-form .form-row{ display: flex; flex-direction: column; gap: 7px; margin: 0; } .signin-form label{ font-size: 13px; font-weight: 600; color: var(--text-muted); } .signin-form input{ width: 100%; background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14.5px; color: var(--text); font-family: var(--font-body); outline: none; transition: border-color .2s; height: 46px; } .signin-form input:focus{ border-color: var(--gold); } .signin-form input::placeholder{ color: var(--text-faint); } .password-field{ position: relative; display: flex; } .password-field input{ padding-right: 44px; } .password-toggle{ position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-faint); transition: color .2s, background .2s; } .password-toggle:hover{ color: var(--text); background: var(--surface-muted); } .password-toggle svg{ width: 19px; height: 19px; } .password-toggle.is-visible .icon-eye{ display: none; } .password-toggle.is-visible .icon-eye-off{ display: block; } .forgot-password-link{ align-self: flex-start; margin-top: -6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } .forgot-password-link:hover:not(:disabled){ color: var(--gold-dark); } .forgot-password-link:disabled{ opacity: .55; cursor: not-allowed; } .btn-signin{ width: 100%; background: var(--black); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; padding: 15px; border-radius: var(--radius-sm); margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s, transform .2s; } .btn-signin:hover:not(:disabled){ background: var(--gold); transform: translateY(-1px); } .btn-signin:disabled{ background: var(--border-strong); color: var(--text-faint); cursor: not-allowed; transform: none; } .form-success{ background: rgba(201,150,46,.08); border: 1px solid rgba(201,150,46,.35); color: var(--gold-dark); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin: 0; } .signin-divider{ height: 1px; background: var(--border); margin: 32px 0; } .signin-new-account{ text-align: left; } .signin-subtext{ font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 20px; } .btn-create-account{ display: block; width: 100%; text-align: center; background: transparent; border: 1.5px solid var(--border-strong); color: var(--text); font-weight: 700; font-size: 13.5px; padding: 15px; border-radius: var(--radius-sm); transition: border-color .2s, color .2s; } .btn-create-account:hover{ border-color: var(--text); color: var(--gold-dark); } /* Small gold indicator dot on the header's Account icon once a shopper is signed in (see updateAccountButtonUI() in js/main.js). Clicking the icon while signed in signs the shopper out instead of reopening this drawer. */ .icon-btn#accountToggle.is-signed-in::after{ content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); border: 1.5px solid #fff; } /* ========================================================================== REGISTER PAGE (register.html) Centered account card between the shared header and footer. Everything is scoped to .register-* so it can't collide with the checkout / sign-in .form-row and .password-field rules elsewhere in this file. ========================================================================== */ .register-page{ min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: clamp(28px, 6vw, 80px) 16px; background: var(--surface-muted); } .register-card{ width: 100%; max-width: 480px; padding: clamp(28px, 6vw, 52px); background: var(--surface); border-radius: 28px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 40px 80px -40px rgba(20,20,15,.35); animation: registerIn .6s var(--ease) both; } @keyframes registerIn{ from{ opacity: 0; transform: translateY(16px); } } .register-header{ text-align: center; margin-bottom: 32px; } .register-header h1{ margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(28px, 6vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; } .register-header p{ margin: 0 auto; max-width: 320px; font-size: 15px; color: var(--text-muted); } .register-form{ display: flex; flex-direction: column; gap: 14px; } .register-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Floating-label field: the label rests inside the input until it is focused or filled. */ .register-field{ position: relative; } .register-field input{ width: 100%; height: 60px; padding: 26px 16px 8px; background: #fff; border: 1px solid var(--border-strong); border-radius: 14px; font-size: 16px; color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; } .register-field--password input{ padding-right: 56px; } .register-field input:hover{ border-color: var(--text-faint); } .register-field input:focus{ border-color: var(--black); box-shadow: 0 0 0 4px rgba(201,150,46,.2); } .register-field input::placeholder{ color: transparent; } .register-field label{ position: absolute; top: 18px; left: 17px; font-size: 16px; line-height: 24px; color: var(--text-muted); pointer-events: none; transform-origin: left top; transition: transform .2s var(--ease), color .2s; } .register-field input:focus + label, .register-field input:not(:placeholder-shown) + label, .register-field input:-webkit-autofill + label{ transform: translateY(-11px) scale(.76); } .register-field input:focus + label{ color: var(--gold-dark); } .register-toggle{ position: absolute; top: 9px; right: 8px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--text-faint); transition: color .2s, background .2s; } .register-toggle:hover{ color: var(--text); background: var(--surface-muted); } .register-toggle svg{ width: 20px; height: 20px; } .register-toggle .icon-eye-off{ display: none; } .register-toggle.is-visible .icon-eye{ display: none; } .register-toggle.is-visible .icon-eye-off{ display: block; } .register-hint{ margin: -4px 0 0 4px; font-size: 12.5px; color: var(--text-faint); } .register-form-error, .register-form-success{ margin: 0; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; } .register-form-error{ background: #fdecec; color: #a42020; } .register-form-success{ background: #eaf6ee; color: #1d6b3a; } .register-form-error[hidden], .register-form-success[hidden]{ display: none; } .btn-register-submit{ display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; margin-top: 6px; background: var(--black); color: #fff; border-radius: 999px; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .01em; transition: background .25s, box-shadow .25s, transform .2s var(--ease); } .btn-register-submit:hover:not(:disabled){ background: var(--gold); box-shadow: 0 14px 28px -12px rgba(201,150,46,.6); } .btn-register-submit:active:not(:disabled){ transform: scale(.985); } .btn-register-submit:disabled{ opacity: .7; cursor: progress; } .btn-register-submit [hidden]{ display: none; } .register-signin-prompt{ margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; font-size: 14px; color: var(--text-muted); } .register-signin-prompt a{ font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; } .register-signin-prompt a:hover{ color: var(--gold-dark); text-decoration-color: currentColor; } @media (max-width: 440px){ .register-row{ grid-template-columns: 1fr; } .register-card{ border-radius: 22px; } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (min-width: 960px){ .header-left{ gap: 6px; } .home-grid{ gap: 22px; } .shop-grid{ grid-template-columns: repeat(3, 1fr); gap: 22px; } } @media (min-width: 1200px){ .shop-grid{ grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px){ .home-card-name{ font-size: 10.5px; } .home-card-subtitle{ font-size: 10.5px; } .home-price{ font-size: 11.5px; } .home-price-old{ font-size: 10.5px; } .choose-options-btn{ font-size: 9px; padding: 11px 12px; } .logo-lockup{ font-size: 17px; } .footer-inner{ grid-template-columns: 1fr; gap: 32px; } .footer-quicklinks{ gap: 32px; } .shop-card-title{ font-size: 18px; } .modal-body{ grid-template-columns: 1fr; } .product-modal{ width: 94vw; max-height: 92vh; } .modal-details{ padding: 8px 20px 28px; } .modal-gallery{ padding: 20px 20px 0; } .cart-panel{ width: 100vw; } .signin-panel{ width: 100vw; } } /* ========================================================================== CHECKOUT PAGE (checkout.html) STRICT UI & ROUTING FIX note: checkout.html now also carries #cartOverlay/#cartPanel and #signinOverlay/#signinPanel markup (copied from index.html) so js/header.js's cart/sign-in click intercepts have a real panel to open on this page. No new rules were needed here for that — .overlay/.cart-panel/.signin-panel/.nav-drawer (all defined further up this file) are shared, page-agnostic classes already used by index.html/register.html, and .checkout-page only sets this page's background — it doesn't restrict position:fixed children, so those drawers render and animate identically here. ========================================================================== */ .checkout-page{ background: var(--bg); } .checkout-header{ height: var(--header-h); display: flex; align-items: center; border-bottom: 1px solid var(--border); } .checkout-header-inner{ max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; } .checkout-logo{ font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .01em; display: flex; align-items: center; } .checkout-logo .logo-img{ height: 32px; } .checkout-main{ max-width: 1180px; margin: 0 auto; padding: 40px 24px 80px; } .checkout-grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; } /* ---- Left column: form ---- */ .checkout-section{ padding: 28px 0; border-bottom: 1px solid var(--border); } .checkout-section:first-child{ padding-top: 0; } .checkout-form-col > form > .checkout-section:last-of-type{ border-bottom: none; } .checkout-section-title{ font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 0 18px; } .checkout-section-subtitle{ font-size: 13px; color: var(--text-faint); margin: -10px 0 16px; } .form-row{ display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; } .form-row.two-col{ grid-template-columns: 1fr 1fr; } .form-row.three-col{ grid-template-columns: 1fr auto 1fr; align-items: start; } .checkout-form-col label{ display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-muted); } .checkout-form-col input, .checkout-form-col select{ background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14.5px; color: var(--text); font-family: var(--font-body); outline: none; transition: border-color .2s; height: 46px; } .checkout-form-col select{ cursor: pointer; } .checkout-form-col input:focus, .checkout-form-col select:focus{ border-color: var(--gold); } .checkout-form-col input::placeholder{ color: var(--text-faint); } .pin-location-field{ display: flex; flex-direction: column; gap: 7px; } .field-label{ font-size: 13px; font-weight: 600; color: var(--text-muted); } .btn-pin-location{ display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text); text-align: center; transition: border-color .2s, color .2s, background .2s; white-space: nowrap; } .btn-pin-location svg{ width: 17px; height: 17px; flex-shrink: 0; } .btn-pin-location:hover{ border-color: var(--gold); color: var(--gold-dark); } .btn-pin-location.pinned{ border-style: solid; border-color: var(--gold); background: rgba(201,150,46,.08); color: var(--gold-dark); } .pin-location-status{ font-size: 12px; color: var(--gold-dark); font-weight: 600; margin: 0; } .shipping-method-box, .payment-method-box{ display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1.5px solid var(--gold); background: rgba(201,150,46,.06); border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; } .shipping-method-label{ flex: 1; } .shipping-method-price{ font-family: var(--font-display); font-weight: 700; } .shipping-method-radio, .payment-method-radio{ width: 18px; height: 18px; border-radius: 50%; border: 5px solid var(--gold); background: #fff; flex-shrink: 0; } .btn-complete-order{ width: 100%; background: var(--black); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; padding: 17px; border-radius: var(--radius-sm); margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s, transform .2s; } .btn-complete-order:hover:not(:disabled){ background: var(--gold); transform: translateY(-1px); } .btn-complete-order:disabled{ background: var(--border-strong); color: var(--text-faint); cursor: not-allowed; transform: none; } .checkout-thank-you{ text-align: center; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .checkout-thank-you h2{ font-family: var(--font-display); font-size: 24px; margin: 6px 0 0; } .checkout-thank-you p{ color: var(--text-muted); max-width: 360px; margin: 0 0 10px; } /* ---- Right column: order summary ---- */ .checkout-summary-col{ background: var(--surface-muted); border-radius: var(--radius-lg); padding: 28px; } .checkout-summary-sticky{ position: sticky; top: calc(var(--header-h) + 24px); } .summary-items{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; } .summary-item{ display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; } .summary-item-thumb{ position: relative; width: 56px; height: 56px; } .summary-item-thumb img{ width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); background: #fff; } .summary-item-qty{ position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; border-radius: 50%; background: var(--black); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface-muted); } .summary-item-name{ font-size: 13.5px; font-weight: 700; margin: 0 0 3px; } .summary-item-variant{ font-size: 11.5px; color: var(--text-faint); } .summary-item-price{ font-family: var(--font-display); font-size: 13px; font-weight: 600; white-space: nowrap; } .discount-section{ border-top: 1px solid var(--border-strong); padding: 18px 0; } .discount-toggle{ font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .discount-toggle:hover{ color: var(--gold-dark); } .discount-form{ display: flex; gap: 8px; margin-top: 12px; } .discount-form input{ flex: 1; height: 44px; padding: 0 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13.5px; background: #fff; outline: none; } .discount-form input:focus{ border-color: var(--gold); } .btn-apply-discount{ height: 44px; padding: 0 20px; border-radius: var(--radius-sm); background: var(--black); color: #fff; font-weight: 700; font-size: 13.5px; transition: background .2s; } .btn-apply-discount:hover{ background: var(--gold); } .discount-message{ font-size: 12.5px; color: var(--gold-dark); margin: 10px 0 0; } .discount-message.error{ color: #b52c2c; } .summary-totals{ border-top: 1px solid var(--border-strong); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; } .summary-row{ display: flex; justify-content: space-between; font-size: 14px; color: var(--text-muted); } .summary-row span:last-child{ font-family: var(--font-display); color: var(--text); font-weight: 600; } .summary-total{ padding-top: 8px; border-top: 1px solid var(--border-strong); font-size: 15px; font-weight: 700; color: var(--text); } .summary-total span:last-child{ font-size: 19px; font-weight: 800; color: var(--gold-dark); } /* ---- Google Maps pin modal ---- */ .map-modal{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96); width: min(560px, 92vw); max-height: 88vh; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: opacity .28s var(--ease), transform .28s var(--ease); display: flex; flex-direction: column; overflow: hidden; } .map-modal.open{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .map-modal-header{ display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); } .map-modal-header h3{ margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; } .map-modal-body{ padding: 20px; } .map-canvas{ width: 100%; height: 320px; border-radius: var(--radius-md); background: var(--surface-muted); display: flex; align-items: center; justify-content: center; } .map-not-configured{ color: var(--text-muted); font-size: 13.5px; text-align: center; padding: 24px; margin: 0; } .map-modal-hint{ font-size: 12.5px; color: var(--text-faint); margin: 12px 0 0; text-align: center; } .map-modal-footer{ display: flex; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--border); } .map-modal-footer > *{ flex: 1; } /* ---- Checkout responsive ---- */ @media (max-width: 900px){ .checkout-grid{ grid-template-columns: 1fr; gap: 40px; } .checkout-summary-col{ order: -1; } .checkout-summary-sticky{ position: static; } .form-row.three-col{ grid-template-columns: 1fr; } } @media (max-width: 480px){ .form-row.two-col{ grid-template-columns: 1fr; } .checkout-main{ padding: 28px 18px 60px; } .checkout-summary-col{ padding: 20px; } } /* ========================================================================== CHECKOUT PAGE — LAYOUT RESTRUCTURE (single-column, accordion summary) Appended rather than rewriting the CHECKOUT PAGE block above, so the existing .checkout-form-col / .shipping-method-box / .summary-item* / .summary-row / .summary-total rules keep working unchanged — the

still carries the .checkout-form-col class, and the accordion reuses .summary-items / .discount-section / .summary-totals as-is. ========================================================================== */ /* ---- Header: centered logo + minimal bag icon ---- */ .checkout-header-inner{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .checkout-logo{ justify-self: center; } .checkout-bag-link{ justify-self: end; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text); transition: color .2s; } .checkout-bag-link svg{ width: 22px; height: 22px; } .checkout-bag-link:hover{ color: var(--gold-dark); } /* ---- Single-column page body (replaces the old two-column .checkout-grid) ---- */ .checkout-main--single{ max-width: 640px; } .checkout-single-col{ display: flex; flex-direction: column; } /* ---- Order summary accordion ---- */ .order-summary-accordion{ border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-muted); margin-bottom: 28px; overflow: hidden; } .order-summary-trigger{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; } .order-summary-trigger-label{ display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; } .order-summary-chevron{ width: 15px; height: 15px; transition: transform .2s var(--ease); flex-shrink: 0; } .order-summary-accordion.open .order-summary-chevron{ transform: rotate(180deg); } .order-summary-trigger-total{ font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text); white-space: nowrap; } .order-summary-panel{ padding: 0 20px 22px; display: none; } .order-summary-accordion.open .order-summary-panel{ display: block; } #summaryItemCount{ font-size: 11.5px; font-weight: 500; color: var(--text-faint); } #summaryTotal{ font-size: 19px; font-weight: 800; color: var(--gold-dark); } /* ---- Contact section ---- */ .checkout-section-header-row{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .checkout-section-header-row .checkout-section-title{ margin: 0; } .checkout-signin-link{ font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .checkout-signin-link:hover{ color: var(--gold-dark); } .checkbox-row{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; margin-top: 6px; } .checkbox-row input[type="checkbox"]{ width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; } /* ---- Small inline help icon (Email / Phone fields) ---- */ .input-icon-wrap{ position: relative; display: block; } .input-icon-wrap input{ padding-right: 40px; } .input-help-icon{ position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--text-faint); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* Pin Location / Governorate / Notes: even thirds, reordered to match the checkout mockup (Pin Location, Governorate, Notes — was Governorate, Pin Location, Notes in an auto-sized middle column). */ .form-row.three-col{ grid-template-columns: 1fr 1fr 1fr; } /* ========================================================================== TASK 1.2 — HEADER OVERHAUL Eye logo, header search bar, notification drawer, full-screen nav drawer, account profile modal. Built on the existing token system above — the only new tokens are the two accent-search values, sampled directly from the search-button reference mock (a warm amber distinct from --gold). ========================================================================== */ :root{ --accent-search: #F5A623; --accent-search-dark: #dd9412; } /* ---- Logo (replaces the RARE/VISION text lockup with the eye mark) ---- Sizing lives entirely here now (no inline style on the — see index.html) so these media queries can actually take effect: shrinking the header logo on narrow screens frees up the room the absolutely centered .logo-lockup needs so it never runs into the search bar. */ .logo-img{ height: 40px; width: auto; max-width: 160px; object-fit: contain; display: block; } .signin-panel-logo .logo-img{ height: 30px; } .logo-lockup-fallback{ display: flex; align-items: center; } @media (max-width: 640px){ .logo-img{ height: 34px; } } @media (max-width: 480px){ .site-header .logo-img{ height: 26px; } } @media (max-width: 380px){ .site-header .logo-img{ height: 22px; } } /* ---- Header search bar (Image 1) ---- Amazon-style compound control: category select | text input | submit — one bordered pill, not three separate controls, so the divider lines sit flush and the corner radius is shared. */ .header-search{ display: flex; align-items: stretch; height: 38px; flex: 1 1 200px; min-width: 0; max-width: 420px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: #fff; transition: border-color .2s; } .header-search:focus-within{ border-color: var(--gold); } .header-search-category{ position: relative; display: flex; align-items: center; flex-shrink: 0; background: var(--surface-muted); border-right: 1px solid var(--border-strong); padding: 0 20px 0 12px; } .header-search-category select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; border: none; outline: none; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; max-width: 90px; } .header-search-category svg{ position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--text-faint); pointer-events: none; } .header-search input{ flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0 12px; font-size: 13.5px; color: var(--text); } .header-search input::placeholder{ color: var(--text-faint); } .header-search-submit{ flex-shrink: 0; width: 44px; display: flex; align-items: center; justify-content: center; background: var(--accent-search); color: var(--black); transition: background .2s; } .header-search-submit:hover{ background: var(--accent-search-dark); } .header-search-submit svg{ width: 18px; height: 18px; } /* Progressively shrink the search bar's max-width as the header narrows so it never grows wide enough to run into the absolutely-centered logo (see .logo-lockup above) — the flex-grow itself is fine, it's the ceiling that needs to come down in step with the available half-width. */ @media (max-width: 1099px){ .header-search{ max-width: 300px; } } @media (max-width: 899px){ .header-search{ max-width: 220px; } .header-left{ gap: 3px; } } @media (max-width: 640px){ .header-search{ flex-basis: 110px; max-width: 150px; } .header-search-category{ padding: 0 14px 0 10px; } .header-search-category select{ max-width: 56px; font-size: 11.5px; } .header-left{ gap: 2px; } } @media (max-width: 480px){ .header-search{ flex-basis: 70px; max-width: 92px; } .header-search-category{ padding: 0 8px 0 8px; } .site-header .icon-btn{ width: 34px; height: 34px; } .site-header .icon-btn svg{ width: 19px; height: 19px; } .header-left{ gap: 1px; } .header-inner{ padding: 0 12px; } } @media (max-width: 420px){ .header-search-category select{ display: none; } .header-search-category{ padding: 0 6px; } .header-search{ flex-basis: 50px; max-width: 68px; } .site-header .icon-btn{ width: 30px; height: 30px; } .site-header .icon-btn svg{ width: 17px; height: 17px; } } @media (max-width: 380px){ .header-search{ flex-basis: 40px; max-width: 54px; } .header-inner{ padding: 0 8px; gap: 6px; } } /* ---- Notifications drawer (Image 3) ---- Same slide-from-right drawer pattern as .cart-panel / .signin-panel, so it feels native to the rest of the site rather than a one-off. */ .notify-panel{ position: fixed; top: var(--drawer-top); right: 0; bottom: 0; width: min(440px, 100vw); background: #fff; border-left: 1px solid var(--border); box-shadow: var(--shadow-panel); z-index: 10003; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .38s var(--ease); } .notify-panel.open{ transform: translateX(0); } .notify-panel-header{ display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .notify-panel-header h3{ margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .notify-panel-header .icon-btn{ font-size: 20px; } .notify-panel-body{ flex: 1; overflow-y: auto; } .notify-list{ display: flex; flex-direction: column; } .notify-item{ display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: flex-start; padding: 16px 22px; border-bottom: 1px solid var(--border); position: relative; transition: background .15s; cursor: pointer; } .notify-item:hover{ background: var(--surface-muted); } .notify-item.unread::before{ content: ''; position: absolute; left: 8px; top: 23px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); } .notify-item-thumb{ width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-muted); flex-shrink: 0; } .notify-item-copy{ min-width: 0; } .notify-item-title{ margin: 0 0 4px; font-size: 14px; font-weight: 700; } .notify-item-message{ margin: 0 0 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; } .notify-item-link{ font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; color: var(--text); } .notify-item-link:hover{ color: var(--gold-dark); } .notify-item-chevron{ width: 16px; height: 16px; color: var(--text-faint); margin-top: 6px; flex-shrink: 0; } .notify-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 72px 32px; color: var(--text-faint); } .notify-empty svg{ width: 36px; height: 36px; } .notify-empty-title{ margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--text); } .notify-empty-sub{ margin: 0; font-size: 13px; color: var(--text-faint); } .notify-loading{ display: flex; justify-content: center; padding: 60px 0; } /* ---- Full-screen nav drawer (Image 4) ---- Slides in from the left (mirrors the hamburger's position) as opposed to the right-hand cart/signin/notify drawers. */ .nav-drawer{ position: fixed; inset: var(--drawer-top) 0 0 0; width: min(440px, 100vw); background: #fff; z-index: 10004; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-100%); transition: transform .38s var(--ease); box-shadow: 20px 0 60px -20px rgba(0,0,0,.35); } .nav-drawer.open{ transform: translateX(0); } .nav-drawer-header{ display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; position: sticky; top: 0; background: #fff; z-index: 2; } .nav-drawer-header-actions{ display: flex; align-items: center; gap: 2px; } .nav-drawer-body{ flex: 1; padding: 4px 24px 8px; } .nav-drawer-columns{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding: 22px 0; border-bottom: 1px solid var(--border); } .nav-drawer-col{ display: flex; flex-direction: column; min-width: 0; } .nav-drawer-col h4{ margin: 0 0 12px; font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .nav-drawer-col a{ padding: 8px 0; font-size: 14px; color: var(--text-muted); transition: color .15s; } .nav-drawer-col a:hover{ color: var(--gold-dark); } .badge-new{ display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .03em; vertical-align: middle; } .nav-drawer-help{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; padding: 18px 0 6px; } .nav-drawer-help a{ padding: 9px 0; font-size: 14.5px; font-weight: 700; color: var(--text); } .nav-drawer-help a:hover{ color: var(--gold-dark); } .nav-drawer-footer{ display: flex; align-items: center; gap: 18px; padding: 18px 24px 26px; border-top: 1px solid var(--border); flex-shrink: 0; margin-top: auto; } .nav-drawer-footer button{ font-size: 14px; font-weight: 700; color: var(--text); } .nav-drawer-footer button:hover{ color: var(--gold-dark); } .nav-drawer-region{ font-size: 14px; color: var(--text-muted); } /* ---- Account profile modal ---- Reuses .modal-overlay / .product-modal for the fade+scale behavior, but overrides size and layout for a compact single-column card instead of the two-column gallery/detail grid product pages use. */ .profile-modal{ width: min(380px, 92vw); max-height: none; } .profile-modal-body{ display: block; padding: 40px 32px 32px; text-align: center; } .profile-modal-avatar{ width: 56px; height: 56px; border-radius: 50%; background: var(--surface-muted); color: var(--text-muted); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: var(--font-display); font-size: 20px; font-weight: 700; text-transform: uppercase; } .profile-modal-email{ margin: 0 0 24px; font-size: 14.5px; font-weight: 600; color: var(--text); word-break: break-all; } .profile-modal-signout{ width: 100%; padding: 13px; border-radius: var(--radius-sm); background: var(--black); color: #fff; font-weight: 700; font-size: 14px; transition: background .2s; } .profile-modal-signout:hover{ background: var(--gold); } /* ---- Responsive: header overhaul ---- */ @media (max-width: 640px){ .notify-panel{ width: 100vw; } .nav-drawer{ width: 100vw; box-shadow: none; } .header-left{ gap: 4px; } } /* ========================================================================== PROMPT 4 — STANDALONE PRODUCT PAGE (product.html) Core layout + variant engine for the PDP: image gallery/lightbox, color swatches, size grid with waitlist ("Notify Me") states, quantity stepper, shipping/trust banner, Complete the Look rail, the customer reviews panel, the four content accordions, and the We Recommend grid. Reuses existing tokens/components wherever the shape already matches: .stars/.star (rating), .btn-select-size (primary CTA — its disabled/ enabled states already are "SELECT A SIZE" vs active), .qty-stepper/ .qty-btn/.qty-value (quantity), .size-select-label/.qty-select-label (field labels), .accordion-trigger/.accordion-panel/.accordion-plus (the "+" → "×" accordion mechanics already used by the cart drawer), .home-grid/.home-card/.home-badge (We Recommend), .modal-overlay/ .modal-close (shared overlay dismiss chrome). Layout note: the reference mockups were captured at a narrow (mobile) viewport, where the hero is a single column (image, then info below) and the reviews/accordion section already reads as two columns. Both are reproduced as-is at that width; wider breakpoints below add a two-column hero and a few grid adjustments as a straightforward responsive enhancement, not a deviation from the mockups. ========================================================================== */ /* ---- Page shell ---- */ .pdp-main{ min-height: 60vh; } /* ---- Hero: gallery + info ---- */ .pdp-hero{ max-width: 900px; margin: 0 auto; padding: 18px 18px 6px; display: flex; flex-direction: column; gap: 22px; } /* ---- Gallery / slider ---- */ .pdp-gallery{ width: 100%; } .pdp-slider{ position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-muted); aspect-ratio: 3 / 4; touch-action: pan-y; } .pdp-slider-track{ display: flex; height: 100%; transition: transform .35s var(--ease); } .pdp-slide{ flex: 0 0 100%; height: 100%; cursor: zoom-in; } .pdp-slide img{ width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 4; border-radius: 8px; } .pdp-slider-arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-pill); display: flex; align-items: center; justify-content: center; color: var(--text); z-index: 3; transition: background .2s, color .2s; } .pdp-slider-arrow.prev{ left: 14px; } .pdp-slider-arrow.next{ right: 14px; } .pdp-slider-arrow svg{ width: 18px; height: 18px; } .pdp-slider-arrow:hover{ background: var(--gold); color: #fff; } .pdp-expand-btn{ position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-pill); display: flex; align-items: center; justify-content: center; color: var(--text); z-index: 3; } .pdp-expand-btn svg{ width: 16px; height: 16px; } .pdp-slider-dots{ position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; z-index: 3; } .pdp-slider-dots span{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); transition: background .2s, width .2s; cursor: pointer; } .pdp-slider-dots span.active{ background: #fff; width: 16px; border-radius: 4px; } /* ---- Info column ---- */ .pdp-info{ display: flex; flex-direction: column; gap: 2px; } .pdp-badge-pill{ display: inline-block; width: fit-content; padding: 7px 14px; border-radius: 6px; background: var(--surface-muted); color: var(--text); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; } .pdp-title{ font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; margin: 2px 0 0; line-height: 1.25; } .pdp-price-row{ display: flex; flex-direction: column; gap: 2px; margin: 10px 0 4px; } .pdp-price-old{ font-family: var(--font-display); font-size: 14.5px; color: var(--text-faint); text-decoration: line-through; } .pdp-price-active{ font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--red); } .pdp-rating-row{ display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin: 4px 0 10px; } .pdp-rating-row .stars{ font-size: 14px; } .pdp-rating-value{ font-weight: 700; color: var(--text); } .pdp-rating-count{ color: var(--text-faint); } .pdp-features{ margin: 2px 0 4px; } .pdp-features-text{ margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-muted); } .pdp-features-text.clamped{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pdp-learn-more{ display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: var(--text); } .pdp-learn-more:hover{ color: var(--gold-dark); } .pdp-color-block{ margin: 14px 0 4px; } .pdp-color-label-row{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pdp-color-label-row .size-select-label{ margin-bottom: 0; } .pdp-color-name{ font-size: 13px; font-weight: 600; color: var(--text); } .pdp-color-row{ display: flex; flex-wrap: wrap; gap: 10px; } .pdp-color-swatch{ width: 78px; height: 78px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border); padding: 0; background: var(--surface-muted); cursor: pointer; transition: border-color .2s; flex-shrink: 0; } .pdp-color-swatch img{ width: 100%; height: 100%; object-fit: cover; } .pdp-color-swatch.active{ border-color: var(--gold); } .pdp-meta-row{ display: flex; gap: 32px; align-items: flex-start; margin: 16px 0 4px; flex-wrap: wrap; } .pdp-meta-col{ display: flex; flex-direction: column; } .pdp-category-pill{ display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 11px 22px; border-radius: 999px; background: var(--black); color: #fff; font-weight: 700; font-size: 13.5px; } .pdp-size-block{ margin: 18px 0 6px; } .pdp-size-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .pdp-size-btn{ position: relative; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); overflow: hidden; transition: border-color .2s, color .2s; } .pdp-size-btn:hover:not(.selected):not(.unavailable){ border-color: var(--gold); color: var(--gold-dark); } .pdp-size-btn.selected{ background: var(--black); border-color: var(--black); color: #fff; } .pdp-size-btn.unavailable{ cursor: pointer; } .pdp-size-btn.unavailable .pdp-size-label{ opacity: .4; } .pdp-size-strike{ display: none; } .pdp-size-btn.unavailable .pdp-size-strike{ display: block; position: absolute; left: -6%; top: 50%; width: 112%; height: 1.5px; background: var(--border-strong); transform: rotate(-14deg); } .pdp-size-mail{ display: none; } .pdp-size-btn.unavailable .pdp-size-mail{ display: flex; position: absolute; right: 7px; top: 7px; width: 16px; height: 16px; align-items: center; justify-content: center; color: var(--text-faint); } .pdp-size-btn.unavailable .pdp-size-mail svg{ width: 13px; height: 13px; } /* ---- Shipping / trust banner ---- */ .pdp-shipping-banner{ margin-top: 20px; padding: 18px 16px 20px; border-radius: var(--radius-md); background: var(--surface-muted); } .pdp-shipping-title{ margin: 0 0 14px; text-align: center; font-size: 14.5px; font-weight: 700; } .pdp-trust-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; } .pdp-trust-item{ display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text); } .pdp-trust-item svg{ width: 22px; height: 22px; color: var(--text); } /* ---- Complete the Look ---- */ .pdp-complete-look{ max-width: 900px; margin: 0 auto; padding: 40px 18px 8px; } .pdp-section-heading{ font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; } .complete-look-scroll{ display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; } .complete-look-card{ flex: 0 0 148px; scroll-snap-align: start; } .complete-look-media{ position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-muted); } .complete-look-media img{ width: 100%; height: 100%; object-fit: cover; } .complete-look-add{ position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-pill); color: var(--text); } .complete-look-add svg{ width: 15px; height: 15px; } .complete-look-name{ margin: 10px 0 2px; font-size: 12.5px; font-weight: 600; line-height: 1.35; } .complete-look-price{ font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--text); } /* ---- Reviews + accordions section ---- */ .pdp-details-grid{ max-width: 900px; margin: 0 auto; padding: 44px 18px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; border-top: 1px solid var(--border); } .pdp-reviews-title{ font-family: var(--font-display); font-size: 21px; font-weight: 800; margin: 0 0 14px; } .reviews-average-row{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .reviews-average-row .stars{ font-size: 19px; } .reviews-average-value{ font-family: var(--font-display); font-size: 19px; font-weight: 700; } .reviews-count-text{ margin: 0 0 18px; color: var(--text-faint); font-size: 13.5px; } .rating-bars{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .rating-bar-row{ display: grid; grid-template-columns: 44px 1fr 38px; align-items: center; gap: 10px; font-size: 13px; color: var(--gold-dark); font-weight: 600; } .rating-bar-track{ height: 8px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; } .rating-bar-fill{ display: block; height: 100%; background: var(--gold); border-radius: 999px; } .rating-bar-pct{ text-align: right; color: var(--text-muted); font-weight: 500; } .ratings-calc-toggle{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; margin-bottom: 18px; } .ratings-calc-toggle svg{ width: 14px; height: 14px; transition: transform .2s; } .ratings-calc-toggle.open svg{ transform: rotate(180deg); } .ratings-calc-copy{ font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: -8px 0 18px; } .write-review-block{ padding: 18px 0 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 24px; } .write-review-block h3{ margin: 0 0 4px; font-size: 16px; font-weight: 800; } .write-review-block p{ margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); } .pdp-reviews-country-heading{ font-family: var(--font-display); font-size: 24px; font-weight: 800; text-align: center; margin: 0 0 16px; } .reviews-toolbar{ display: flex; justify-content: flex-start; margin-bottom: 16px; } .reviews-sort-select{ padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; background: #fff; color: var(--text); } .review-cards-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .review-card{ padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 8px; } .review-card-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; } .review-card-date{ font-size: 11px; color: var(--text-faint); white-space: nowrap; } .review-card-user{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .review-avatar{ width: 24px; height: 24px; border-radius: 50%; background: var(--surface-muted); color: var(--text-faint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .review-avatar svg{ width: 13px; height: 13px; } .review-username{ font-size: 12.5px; font-weight: 600; } .verified-badge{ display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--black); color: #fff; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .verified-badge svg{ width: 9px; height: 9px; } .review-card-title{ margin: 2px 0 0; font-size: 13.5px; font-weight: 700; } .review-card-body{ margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } .review-pagination{ display: flex; align-items: center; justify-content: center; gap: 8px; } .review-pagination button{ width: 28px; height: 28px; border-radius: 50%; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .review-pagination button.active{ background: var(--black); color: #fff; } .review-pagination button:hover:not(.active){ color: var(--gold-dark); } /* ---- Accordion column ---- */ .pdp-accordion-group{ border-top: 1px solid var(--border); } .pdp-accordion{ border-bottom: 1px solid var(--border); } .pdp-accordion .accordion-trigger{ font-size: 14.5px; font-weight: 700; padding: 18px 2px; } .pdp-accordion .accordion-panel{ padding: 0 2px 18px; font-size: 13.5px; line-height: 1.7; color: var(--text-muted); } .pdp-accordion .accordion-panel ul{ margin: 0; padding-left: 18px; } .pdp-accordion .accordion-panel li{ margin-bottom: 4px; } /* Strict single-expanded accordion icon: unlike the cart drawer's Discount accordion (which rotates its whole "+" into an "×"), the PDP accordions need a literal "−" when expanded. Each trigger's SVG has two s; only the vertical one carries `.accordion-plus-v`, so scaling just that line to 0 leaves the horizontal line standing alone as "−" while collapsed accordions keep the full "+". transform-box:fill-box makes the scale originate from the line's own center instead of the SVG viewport's top-left corner. */ .pdp-accordion .accordion-plus-v{ transform-box: fill-box; transform-origin: center; transition: transform .2s var(--ease); } .pdp-accordion.open .accordion-plus-v{ transform: scaleY(0); } .report-product-row{ display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--text-faint); font-size: 13px; font-weight: 600; transition: color .2s; } .report-product-row svg{ width: 16px; height: 16px; flex-shrink: 0; } .report-product-row:hover{ color: var(--text); } /* ---- Lightbox (image zoom) ---- */ .lightbox-modal{ position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .lightbox-modal.open{ opacity: 1; pointer-events: auto; } .lightbox-modal img{ max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: var(--radius-sm); } .lightbox-modal .modal-close{ position: fixed; top: 20px; right: 20px; margin: 0; } .lightbox-modal .pdp-slider-arrow{ position: fixed; top: 50%; } .lightbox-modal .pdp-slider-arrow.prev{ left: 20px; } .lightbox-modal .pdp-slider-arrow.next{ right: 20px; } /* ---- Waitlist ("Notify Me") modal ---- */ .waitlist-modal{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96); width: min(420px, 92vw); background: #fff; border-radius: var(--radius-lg); box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: opacity .28s var(--ease), transform .28s var(--ease); } .waitlist-modal.open{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .waitlist-modal-body{ padding: 32px 28px 28px; } .waitlist-modal-body h3{ margin: 0 0 8px; font-family: var(--font-display); font-size: 19px; font-weight: 800; } .waitlist-modal-sub{ margin: 0 0 18px; font-size: 13.5px; color: var(--text-muted); } #waitlistForm input[type="email"]{ width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); margin: 6px 0 14px; font-size: 14px; background: #fff; } #waitlistForm input[type="email"]:focus-visible{ border-color: var(--gold); } .waitlist-error{ color: #b52c2c; font-size: 12.5px; margin: -8px 0 12px; } .waitlist-success{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 10px 0 4px; } .waitlist-success svg{ width: 36px; height: 36px; color: var(--gold-dark); } .waitlist-success p{ margin: 0; font-size: 14px; color: var(--text); } /* ---- Sticky mobile add-to-bag bar ---- */ .pdp-sticky-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.15); transform: translateY(100%); transition: transform .3s var(--ease); } .pdp-sticky-bar.show{ transform: translateY(0); } .pdp-sticky-bar img{ width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--surface-muted); } .pdp-sticky-info{ flex: 1; min-width: 0; } .pdp-sticky-name{ margin: 0; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdp-sticky-price{ margin: 0; font-size: 12px; color: var(--text-muted); } .pdp-sticky-bar .btn-select-size{ width: auto; padding: 11px 18px; font-size: 12.5px; flex-shrink: 0; } /* ---- Responsive ---- NOTE: the gallery/info hero used to switch from stacked (flex-column) to side-by-side only at 1000px, which left the whole tablet range (768–999px) rendering as a single, full-width column — the "full-width gallery" bug. It now becomes a strict 2-column CSS Grid starting at 768px, per the PDP layout spec. `.product-main-wrapper` / `.product-gallery-column` / `.product-details-column` are the same elements as `.pdp-hero` / `.pdp-gallery` / `.pdp-info` (see markup — both classes are applied together), kept as duplicate selectors so either name can be used to hook into this layout. */ @media (min-width: 768px){ .pdp-hero, .product-main-wrapper{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; max-width: 1200px; margin: 0 auto; padding: 20px; } .pdp-gallery, .product-gallery-column{ width: 100%; max-width: 550px; overflow: hidden; position: sticky; top: calc(var(--header-h) + 24px); } .pdp-info, .product-details-column{ width: 100%; } } @media (min-width: 1000px){ .pdp-hero, .product-main-wrapper{ max-width: 1320px; padding: 32px 24px 8px; gap: 48px; } .pdp-complete-look{ max-width: 1320px; padding: 48px 24px 8px; } .pdp-details-grid{ max-width: 1320px; padding: 56px 24px 8px; gap: 64px; } } @media (max-width: 560px){ .pdp-details-grid{ grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 420px){ .review-cards-grid{ grid-template-columns: 1fr; } } /* ========================================================================== ADMIN PANEL — EXECUTIVE THEME (admin/index.html, admin/admin.js) ========================================================================== Scoped under .admin-login-view / .admin-shell so none of this leaks onto the storefront pages that also load this stylesheet. Class names match admin/admin.js's DOM queries exactly — this is a re-skin, not a markup rewrite, so no selector here may be renamed without a matching JS change. Palette: near-black canvas + warm gold, extending the storefront's own --gold/--black tokens rather than inventing a second brand. Status hues (processing/shipped/delivered/...) keep their original meaning but move to translucent tints so they read correctly on a dark surface. ========================================================================== */ :root{ --adm-bg: #0a0a0c; --adm-surface: #131316; --adm-surface-2: #1b1b1f; --adm-border: #26262c; --adm-border-strong: #34343c; --adm-text: #f2efe8; --adm-text-muted: #a5a29c; --adm-text-faint: #6d6b67; --adm-gold: var(--gold); --adm-gold-bright: #e2b862; --adm-gold-wash: rgba(201,150,46,.14); --adm-gold-wash-strong: rgba(201,150,46,.26); --adm-danger: #ef7d7d; --adm-danger-wash: rgba(225,58,58,.15); --adm-success: #6fd08d; --adm-success-wash: rgba(30,150,70,.15); --adm-shadow: 0 20px 44px -18px rgba(0,0,0,.6); --adm-shadow-lift: 0 8px 22px -10px rgba(0,0,0,.5); } body{ font-family: var(--admin-font, 'Cairo', var(--font-body)); } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- Login view ---- */ .admin-login-view{ min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(560px 420px at 50% -8%, rgba(201,150,46,.16), transparent 60%), var(--adm-bg); position: relative; } .admin-login-card{ width: min(380px, 100%); background: linear-gradient(180deg, var(--adm-surface), var(--adm-surface-2)); border: 1px solid var(--adm-border); border-radius: var(--radius-lg); padding: 38px 32px 32px; box-shadow: var(--adm-shadow); display: flex; flex-direction: column; } .admin-login-logo{ font-family: var(--font-display); font-weight: 800; font-size: 20px; text-align: center; margin-bottom: 26px; letter-spacing: .04em; color: var(--adm-text); } .admin-login-logo span{ color: var(--adm-gold); } .admin-login-card h1{ font-size: 18px; font-weight: 800; margin: 0 0 6px; color: var(--adm-text); text-align: center; } .admin-login-card > p{ margin: 0 0 24px; color: var(--adm-text-muted); font-size: 13.5px; line-height: 1.7; text-align: center; } .admin-login-card label{ font-size: 13px; font-weight: 700; margin-bottom: 6px; display: block; color: var(--adm-text-muted); } .admin-login-card input{ width: 100%; padding: 12px 14px; border: 1px solid var(--adm-border-strong); border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; font-family: inherit; background: rgba(255,255,255,.03); color: var(--adm-text); transition: border-color .2s, background .2s; } .admin-login-card input::placeholder{ color: var(--adm-text-faint); } .admin-login-card input:focus-visible{ border-color: var(--adm-gold); background: rgba(255,255,255,.05); outline: none; } .admin-login-error{ color: var(--adm-danger); font-size: 13px; margin: -8px 0 14px; } .admin-login-submit{ width: 100%; padding: 13px; border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--adm-gold-bright), var(--adm-gold)); color: #1a1405; font-weight: 800; font-size: 14.5px; transition: opacity .2s, transform .15s; } .admin-login-submit:disabled{ opacity: .55; } .admin-login-submit:hover:not(:disabled){ opacity: .92; transform: translateY(-1px); } /* ---- Shell ---- */ .admin-shell{ display: flex; min-height: 100svh; background: var(--adm-bg); color: var(--adm-text); } .admin-sidebar{ --sb-w: 254px; width: var(--sb-w); flex-shrink: 0; background: #08080a; border-inline-end: 1px solid var(--adm-border); color: var(--adm-text); display: flex; flex-direction: column; gap: 20px; padding: 22px 14px; position: sticky; top: 0; height: 100svh; transition: width .22s var(--ease, ease); } .admin-sidebar-head{ display: flex; align-items: center; justify-content: space-between; padding: 0 6px; gap: 8px; } .admin-sidebar-logo{ font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #fff; letter-spacing: .03em; white-space: nowrap; overflow: hidden; } .admin-sidebar-logo span{ color: var(--adm-gold); } .admin-sidebar-collapse-btn{ width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--adm-text-muted); border: 1px solid var(--adm-border); background: rgba(255,255,255,.03); transition: background .15s, color .15s, transform .2s; } .admin-sidebar-collapse-btn:hover{ background: var(--adm-gold-wash); color: var(--adm-gold-bright); } .admin-sidebar-collapse-btn svg{ width: 15px; height: 15px; transition: transform .22s var(--ease, ease); } .admin-nav-list{ display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; overflow-x: hidden; list-style: none; margin: 0; padding: 0; } .admin-nav-item{ position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10.5px 12px; border-radius: var(--radius-sm); font-size: 13.8px; font-weight: 600; color: var(--adm-text-muted); text-align: right; border-inline-end: 3px solid transparent; transition: background .18s, color .18s, border-color .18s; white-space: nowrap; } .admin-nav-item span{ overflow: hidden; text-overflow: ellipsis; } .admin-nav-item svg{ width: 18px; height: 18px; flex-shrink: 0; color: currentColor; opacity: .85; } .admin-nav-item:hover{ background: rgba(255,255,255,.05); color: var(--adm-text); } .admin-nav-item.active{ background: var(--adm-gold-wash); color: var(--adm-gold-bright); border-inline-end-color: var(--adm-gold); } .admin-nav-item.active svg{ opacity: 1; } .admin-nav-badge{ margin-inline-start: auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--adm-gold); color: #1a1405; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-nav-badge[hidden]{ display: none; } .admin-logout-btn{ display: flex; align-items: center; gap: 12px; padding: 10.5px 12px; border-radius: var(--radius-sm); color: var(--adm-text-muted); font-size: 13.8px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .admin-logout-btn svg{ width: 18px; height: 18px; flex-shrink: 0; } .admin-logout-btn:hover{ background: var(--adm-danger-wash); color: var(--adm-danger); } /* ---- Collapsed sidebar state ---- */ body.admin-sidebar-collapsed .admin-sidebar{ width: 74px; } body.admin-sidebar-collapsed .admin-sidebar-logo, body.admin-sidebar-collapsed .admin-nav-item span, body.admin-sidebar-collapsed .admin-logout-btn span, body.admin-sidebar-collapsed .admin-nav-badge{ display: none; } body.admin-sidebar-collapsed .admin-sidebar-head{ justify-content: center; } body.admin-sidebar-collapsed .admin-nav-item, body.admin-sidebar-collapsed .admin-logout-btn{ justify-content: center; padding-inline: 0; } body.admin-sidebar-collapsed .admin-sidebar-collapse-btn svg{ transform: rotate(180deg); } .admin-main{ flex: 1; min-width: 0; padding: 32px 36px 60px; } .admin-topbar{ margin-bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .admin-topbar h1{ font-family: var(--font-display); font-size: 24px; font-weight: 800; margin: 0; color: var(--adm-text); } .admin-section-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .admin-section-hint{ margin: 0; color: var(--adm-text-muted); font-size: 13.5px; } .admin-timeframe-select{ padding: 10px 34px 10px 14px; border: 1px solid var(--adm-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; font-weight: 600; background-color: var(--adm-surface); color: var(--adm-text); appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: left 12px center; background-size: 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 7 7-7' fill='none' stroke='%23a5a29c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-timeframe-select:focus-visible{ border-color: var(--adm-gold); outline: none; } /* ---- KPI cards ---- */ .admin-kpi-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 14px; } .admin-kpi-card{ background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--adm-shadow-lift); } .admin-kpi-card--accent{ background: linear-gradient(155deg, #1c1710, var(--adm-surface) 60%); border-color: var(--adm-gold-wash-strong); } .admin-kpi-icon{ width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; color: var(--adm-text-muted); } .admin-kpi-icon svg{ width: 18px; height: 18px; } .admin-kpi-card--accent .admin-kpi-icon{ background: var(--adm-gold-wash-strong); color: var(--adm-gold-bright); } .admin-kpi-label{ margin: 0; font-size: 13px; color: var(--adm-text-muted); font-weight: 600; } .admin-kpi-value{ margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--adm-text); } .admin-kpi-card--accent .admin-kpi-value{ color: var(--adm-gold-bright); } .admin-kpi-updated{ margin: 0; font-size: 12.5px; color: var(--adm-text-faint); } /* ---- Placeholder panels for tabs not yet built ---- */ .admin-placeholder{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 90px 24px; text-align: center; border: 1px dashed var(--adm-border-strong); border-radius: var(--radius-lg); } .admin-placeholder svg{ width: 32px; height: 32px; color: var(--adm-text-faint); } .admin-placeholder h2{ margin: 0; font-size: 16px; font-weight: 700; color: var(--adm-text); } .admin-placeholder p{ margin: 0; max-width: 340px; font-size: 13.5px; color: var(--adm-text-muted); } @media (max-width: 860px){ .admin-shell{ flex-direction: column; } .admin-sidebar, body.admin-sidebar-collapsed .admin-sidebar{ width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 12px 14px; gap: 12px; } .admin-sidebar-head{ display: none; } .admin-nav-list{ flex-direction: row; flex: none; overflow-x: auto; } .admin-nav-item span, body.admin-sidebar-collapsed .admin-nav-item span{ display: inline; } .admin-nav-item{ white-space: nowrap; border-inline-end: none; border-bottom: 2px solid transparent; } .admin-nav-item.active{ border-bottom-color: var(--adm-gold); } .admin-logout-btn span{ display: none; } .admin-main{ padding: 20px 14px 48px; } .admin-form-row.two-col{ grid-template-columns: 1fr; } .admin-modal-overlay{ padding: 16px; } .admin-modal{ max-height: calc(100svh - 32px); } } /* ========================================================================== Products tab ========================================================================== */ .admin-toolbar-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .admin-search-input{ padding: 10px 14px; border: 1px solid var(--adm-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; background: var(--adm-surface); color: var(--adm-text); min-width: 220px; } .admin-search-input::placeholder{ color: var(--adm-text-faint); } .admin-search-input:focus-visible{ border-color: var(--adm-gold); outline: none; } .admin-btn-primary{ display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--adm-gold-bright), var(--adm-gold)); color: #1a1405; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 800; font-size: 13.5px; transition: opacity .2s, transform .15s; } .admin-btn-primary svg{ width: 15px; height: 15px; } .admin-btn-primary:hover{ opacity: .92; transform: translateY(-1px); } .admin-btn-primary:disabled{ opacity: .55; transform: none; } .admin-btn-secondary{ background: transparent; border: 1px solid var(--adm-border-strong); padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: 13.5px; color: var(--adm-text); display: inline-flex; align-items: center; gap: 8px; } .admin-btn-secondary:hover{ background: rgba(255,255,255,.05); border-color: var(--adm-gold); } .admin-table-wrap{ background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--radius-md); overflow-x: auto; } .admin-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; } .admin-table th, .admin-table td{ padding: 14px 16px; text-align: right; border-bottom: 1px solid var(--adm-border); vertical-align: middle; white-space: nowrap; } .admin-table th{ background: rgba(255,255,255,.02); font-weight: 700; color: var(--adm-gold-bright); font-size: 12.5px; } .admin-table tbody tr:last-child td{ border-bottom: none; } .admin-table tbody tr:hover{ background: rgba(255,255,255,.025); } .admin-product-cell{ display: flex; align-items: center; gap: 12px; white-space: normal; } .admin-product-thumb{ width: 46px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; background: var(--adm-surface-2); flex-shrink: 0; } .admin-product-thumb--empty{ display: flex; align-items: center; justify-content: center; } .admin-product-thumb--empty svg{ width: 18px; height: 18px; color: var(--adm-text-faint); } .admin-product-name{ font-weight: 700; color: var(--adm-text); } .admin-product-subtitle{ font-size: 12px; color: var(--adm-text-faint); margin-top: 2px; } .admin-strike{ text-decoration: line-through; } .admin-category-chip{ display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 11.5px; color: var(--adm-text-muted); margin: 2px 3px 2px 0; white-space: nowrap; } .admin-status-badge{ display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; } .admin-status-badge.active{ background: var(--adm-success-wash); color: var(--adm-success); } .admin-status-badge.archived{ background: rgba(255,255,255,.07); color: var(--adm-text-muted); } .admin-row-actions{ display: flex; gap: 6px; flex-wrap: wrap; } .admin-action-btn{ display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; border: 1px solid var(--adm-border-strong); background: transparent; color: var(--adm-text); transition: background .15s, border-color .15s; } .admin-action-btn svg{ width: 14px; height: 14px; } .admin-action-btn:hover{ background: var(--adm-gold-wash); border-color: var(--adm-gold); } .admin-action-btn:disabled{ opacity: .5; } .admin-action-btn.danger{ color: var(--adm-danger); border-color: rgba(225,58,58,.35); } .admin-action-btn.danger:hover{ background: var(--adm-danger-wash); } .admin-action-btn.is-notified{ background: var(--adm-success-wash); border-color: rgba(30,150,70,.35); color: var(--adm-success); } .admin-action-btn.success{ color: var(--adm-success); border-color: rgba(30,150,70,.35); } .admin-action-btn.success:hover{ background: var(--adm-success-wash); border-color: var(--adm-success); } .admin-empty-row td{ text-align: center; padding: 50px 16px; color: var(--adm-text-muted); white-space: normal; } /* ---- Modal ---- */ .admin-modal-overlay{ position: fixed; inset: 0; background: rgba(4,4,5,.72); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 100; } .admin-modal-overlay[hidden]{ display: none; } .admin-modal{ background: linear-gradient(180deg, var(--adm-surface), #101013); border: 1px solid var(--adm-border-strong); width: min(640px, 100%); border-radius: var(--radius-lg); box-shadow: var(--adm-shadow); display: flex; flex-direction: column; max-height: calc(100svh - 80px); } .admin-modal-header{ display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--adm-border); flex-shrink: 0; } .admin-modal-header h2{ margin: 0; font-size: 17px; font-weight: 800; color: var(--adm-text); } .admin-modal-close{ width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--adm-text-muted); flex-shrink: 0; } .admin-modal-close:hover{ background: rgba(255,255,255,.06); color: var(--adm-text); } .admin-modal-close svg{ width: 16px; height: 16px; } .admin-modal-body{ padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; } .admin-modal-footer{ display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--adm-border); flex-shrink: 0; } .admin-form-error{ color: var(--adm-danger); font-size: 13px; margin: 0; } .admin-form-success{ color: var(--adm-success); font-size: 13px; margin: 0; } /* ---- Form fields ---- */ .admin-form-row{ display: grid; gap: 14px; } .admin-form-row.two-col{ grid-template-columns: 1fr 1fr; } .admin-field label{ font-size: 13px; font-weight: 700; margin-bottom: 6px; display: block; color: var(--adm-text-muted); } .admin-field input[type="text"], .admin-field input[type="number"], .admin-field select, .admin-field textarea{ width: 100%; padding: 10px 12px; border: 1px solid var(--adm-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; background: rgba(255,255,255,.03); color: var(--adm-text); } .admin-field input:focus-visible, .admin-field select:focus-visible, .admin-field textarea:focus-visible{ border-color: var(--adm-gold); outline: none; } .admin-field textarea{ resize: vertical; min-height: 72px; } .admin-price-input{ display: flex; align-items: stretch; border: 1px solid var(--adm-border-strong); border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,.03); } .admin-price-input input{ border: none; flex: 1; padding: 10px 12px; font-family: inherit; font-size: 13.5px; min-width: 0; background: transparent; color: var(--adm-text); } .admin-price-input input:focus{ outline: none; } .admin-price-input span{ display: flex; align-items: center; padding: 0 12px; background: rgba(255,255,255,.05); font-size: 12.5px; font-weight: 700; color: var(--adm-text-muted); } .admin-fieldset{ border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .admin-fieldset legend{ font-size: 14px; font-weight: 800; padding: 0; margin: 0 0 6px; color: var(--adm-text); } .admin-checkbox-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .admin-checkbox-item{ display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 10px; border: 1px solid var(--adm-border); border-radius: var(--radius-sm); cursor: pointer; color: var(--adm-text); } .admin-checkbox-item input{ width: 15px; height: 15px; flex-shrink: 0; } .admin-field-hint{ font-size: 12.5px; color: var(--adm-text-faint); margin: -6px 0 0; } /* ---- Target-category custom text input (Men/Women/Kids/Unisex/Custom) ---- */ .admin-target-category-custom{ margin-top: 8px; } /* ---- Tag cloud: multi-select category chips + free-text size chips ---- */ .admin-tag-cloud{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .admin-tag-chip{ display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--adm-border-strong); background: transparent; font-size: 12.5px; font-weight: 700; color: var(--adm-text-muted); font-family: inherit; } button.admin-tag-chip{ padding: 7px 14px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } button.admin-tag-chip:hover{ border-color: var(--adm-gold); color: var(--adm-text); } .admin-tag-chip.is-selected{ background: var(--adm-gold); color: #1a1405; border-color: var(--adm-gold); } .admin-tag-chip.is-custom{ padding-inline-end: 6px; } .admin-tag-chip-toggle{ border: none; background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 12.5px; padding: 7px 4px 7px 14px; cursor: pointer; } .admin-tag-chip-text{ padding: 7px 4px 7px 14px; color: inherit; } .admin-tag-remove{ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: none; margin-inline-start: 2px; background: rgba(255,255,255,.1); color: inherit; } .admin-tag-remove:hover{ background: var(--adm-danger-wash); color: var(--adm-danger); } .admin-tag-remove svg{ width: 9px; height: 9px; } .admin-tag-add-row{ display: flex; gap: 8px; } .admin-tag-add-row input{ flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--adm-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; background: rgba(255,255,255,.03); color: var(--adm-text); } .admin-tag-add-row input:focus-visible{ outline: none; border-color: var(--adm-gold); } .admin-tag-add-row .admin-btn-secondary{ flex-shrink: 0; white-space: nowrap; } /* ---- Free-text sizes builder (master list shared across colors) ---- */ .admin-sizes-builder{ display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--adm-border); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); } .admin-sizes-builder-label{ font-size: 12.5px; font-weight: 700; color: var(--adm-text-muted); margin: 0; } /* ---- Toggle switch ---- */ .admin-switch-row{ display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--adm-border); border-radius: var(--radius-sm); background: rgba(255,255,255,.03); } .admin-switch-row label{ font-size: 13.5px; font-weight: 700; margin: 0; color: var(--adm-text); } .admin-switch{ position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .admin-switch input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; } .admin-switch-track{ position: absolute; inset: 0; background: var(--adm-border-strong); border-radius: 999px; transition: background .2s; pointer-events: none; } .admin-switch-track::before{ content: ''; position: absolute; inset-inline-start: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.4); } .admin-switch input:checked + .admin-switch-track{ background: var(--adm-gold); } .admin-switch input:checked + .admin-switch-track::before{ transform: translateX(-18px); } /* ---- Color variant builder ---- */ .admin-color-card{ border: 1px solid var(--adm-border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,.02); } .admin-color-card + .admin-color-card{ margin-top: 12px; } .admin-color-card-header{ display: flex; align-items: center; gap: 10px; } .admin-color-card-header input{ flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--adm-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; background: rgba(255,255,255,.03); color: var(--adm-text); } .admin-icon-btn{ width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--adm-text-muted); border: 1px solid var(--adm-border-strong); background: transparent; flex-shrink: 0; } .admin-icon-btn:hover{ background: var(--adm-danger-wash); color: var(--adm-danger); border-color: rgba(225,58,58,.35); } .admin-icon-btn svg{ width: 14px; height: 14px; } /* ---- Color image grid: direct Firebase Storage upload thumbnails ---- */ .admin-color-image-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; } .admin-color-image-slot{ position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--adm-border-strong); background: var(--adm-surface-2); } .admin-color-image-slot img{ width: 100%; height: 100%; object-fit: cover; display: block; } .admin-color-image-slot-placeholder{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--adm-text-faint); } .admin-color-image-slot-placeholder svg{ width: 20px; height: 20px; } .admin-remove-image-btn{ position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: none; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); z-index: 2; } .admin-remove-image-btn svg{ width: 11px; height: 11px; } .admin-remove-image-btn:hover{ background: var(--adm-danger); } .admin-upload-progress-track{ position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.4); z-index: 1; } .admin-upload-progress-bar{ height: 100%; background: var(--adm-gold); transition: width .2s; } .admin-upload-overlay{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.35); z-index: 1; } .admin-upload-overlay.is-error{ background: rgba(225,58,58,.6); } .admin-add-image-tile{ aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px dashed var(--adm-border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--adm-text-muted); font-size: 11px; font-weight: 700; text-align: center; padding: 6px; cursor: pointer; } .admin-add-image-tile:hover{ border-color: var(--adm-gold); color: var(--adm-text); background: rgba(255,255,255,.03); } .admin-add-image-tile svg{ width: 18px; height: 18px; } .admin-add-image-tile input[type="file"]{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .admin-size-toggle-row{ display: flex; gap: 8px; flex-wrap: wrap; } .admin-size-chip{ padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--adm-border-strong); font-size: 13px; font-weight: 700; background: transparent; color: var(--adm-text-muted); } .admin-size-chip[aria-pressed="true"]{ background: var(--adm-gold); color: #1a1405; border-color: var(--adm-gold); } .admin-add-color-btn{ align-self: flex-start; } /* ========================================================================== Products table — Quick Inventory Toggle (الجرد السريع) ========================================================================== */ .admin-stock-quick{ display: flex; flex-direction: column; gap: 8px; white-space: normal; max-width: 260px; } .admin-stock-quick-color{ display: flex; align-items: flex-start; gap: 8px; } .admin-stock-quick-color-label{ font-size: 11px; font-weight: 700; color: var(--adm-text-faint); min-width: 44px; padding-top: 6px; flex-shrink: 0; } .admin-stock-quick .admin-size-toggle-row{ gap: 6px; } .admin-size-chip--sm{ padding: 4px 10px; font-size: 11.5px; } .admin-stock-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; transition: opacity .15s; } .admin-stock-pill svg{ width: 12px; height: 12px; } .admin-stock-pill.in-stock{ background: var(--adm-success-wash); color: var(--adm-success); } .admin-stock-pill.out-of-stock{ background: var(--adm-danger-wash); color: var(--adm-danger); } .admin-stock-pill:hover{ opacity: .8; } .admin-stock-pill:disabled{ opacity: .5; } /* ========================================================================== Orders / Reviews / Reports / Waitlist tabs ========================================================================== */ .admin-status-select{ appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 6px 30px 6px 14px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; background-repeat: no-repeat; background-position: left 10px center; background-size: 9px; } .admin-status-select:disabled{ opacity: .6; cursor: not-allowed; } .admin-status-select.processing{ background-color: rgba(90,110,220,.16); color: #93a4f0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 7 7-7' fill='none' stroke='%2393a4f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-status-select.shipped{ background-color: rgba(40,150,210,.16); color: #7cc4ea; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 7 7-7' fill='none' stroke='%237cc4ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-status-select.delivered{ background-color: var(--adm-success-wash); color: var(--adm-success); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 7 7-7' fill='none' stroke='%236fd08d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-status-select.cancelled{ background-color: var(--adm-danger-wash); color: var(--adm-danger); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 7 7-7' fill='none' stroke='%23ef7d7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-status-select.open{ background-color: rgba(201,150,46,.16); color: var(--adm-gold-bright); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 7 7-7' fill='none' stroke='%23e2b862' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-status-select.replied{ background-color: rgba(40,150,210,.16); color: #7cc4ea; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 7 7-7' fill='none' stroke='%237cc4ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-status-select.thanked{ background-color: var(--adm-success-wash); color: var(--adm-success); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 7 7-7' fill='none' stroke='%236fd08d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-status-select.closed{ background-color: rgba(255,255,255,.08); color: var(--adm-text-muted); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 7 7-7' fill='none' stroke='%23a5a29c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-status-badge.pending{ background: rgba(201,150,46,.16); color: var(--adm-gold-bright); } .admin-status-badge.approved{ background: var(--adm-success-wash); color: var(--adm-success); } .admin-status-badge.rejected{ background: var(--adm-danger-wash); color: var(--adm-danger); } .admin-status-badge.type-percentage{ background: var(--adm-gold-wash); color: var(--adm-gold-bright); } .admin-status-badge.type-fixed{ background: rgba(255,255,255,.07); color: var(--adm-text); } .admin-status-badge.type-free-shipping{ background: var(--adm-success-wash); color: var(--adm-success); } .admin-star-rating{ color: var(--adm-gold); letter-spacing: 1px; font-size: 14px; white-space: nowrap; } .admin-review-content{ margin-top: 4px; font-size: 12.5px; color: var(--adm-text-muted); white-space: normal; max-width: 320px; } .admin-wrap-cell{ white-space: normal; max-width: 280px; } .admin-modal--wide{ width: min(760px, 100%); } .admin-detail-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .admin-detail-item label{ display: block; font-size: 12px; font-weight: 700; color: var(--adm-text-muted); margin-bottom: 3px; } .admin-detail-item p{ margin: 0; font-size: 13.5px; color: var(--adm-text); white-space: pre-line; } .admin-order-map{ width: 100%; height: 240px; border-radius: var(--radius-sm); border: 1px solid var(--adm-border); overflow: hidden; filter: saturate(.35) brightness(.92) contrast(1.05); } .admin-order-map[hidden]{ display: none; } .admin-order-map-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -6px; } .admin-order-map-actions[hidden]{ display: none; } .admin-map-link-btn, .admin-map-copy-btn{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--adm-border-strong); color: var(--adm-text); } .admin-map-link-btn:hover, .admin-map-copy-btn:hover{ background: var(--adm-gold-wash); border-color: var(--adm-gold); } .admin-map-link-btn svg, .admin-map-copy-btn svg{ width: 13px; height: 13px; } /* ---- Order Details Modal: custom delivery-time fieldset (تحديد موعد التسليم) ---- */ .admin-delivery-fieldset{ border: 1px solid var(--adm-border); border-radius: var(--radius-md); background: var(--adm-surface-2); padding: 16px 18px 18px; } .admin-delivery-fieldset-grid{ display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: end; } .admin-form-field label{ display: block; font-size: 12px; font-weight: 700; color: var(--adm-text-muted); margin-bottom: 6px; } .admin-form-select, .admin-form-input{ width: 100%; padding: 10px 12px; border: 1px solid var(--adm-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; background: var(--adm-surface); color: var(--adm-text); } .admin-form-input::placeholder{ color: var(--adm-text-faint); } .admin-form-select:focus-visible, .admin-form-input:focus-visible{ border-color: var(--adm-gold); outline: none; } .admin-delivery-fieldset-actions{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; } .admin-delivery-saved-note{ display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--adm-success); } .admin-delivery-saved-note svg{ width: 15px; height: 15px; } /* ---- Orders table: small "🕒 " hint under the status select, only when set ---- */ .admin-delivery-window-hint{ display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; color: var(--adm-text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-delivery-window-hint svg{ width: 11px; height: 11px; flex-shrink: 0; color: var(--adm-gold-bright); } @media (max-width: 640px){ .admin-delivery-fieldset-grid{ grid-template-columns: 1fr; } } /* ---- Waitlist ---- */ .admin-waitlist-group{ border: 1px solid var(--adm-border); border-radius: var(--radius-md); background: var(--adm-surface); margin-bottom: 12px; overflow: hidden; } .admin-waitlist-group summary{ padding: 14px 16px; cursor: pointer; font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; color: var(--adm-text); } .admin-waitlist-group summary::-webkit-details-marker{ display: none; } .admin-waitlist-group-info{ white-space: normal; } .admin-waitlist-group-actions{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .admin-waitlist-group-count{ background: rgba(255,255,255,.06); padding: 2px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--adm-text-muted); flex-shrink: 0; } .admin-restock-btn{ background: linear-gradient(180deg, var(--adm-gold-bright), var(--adm-gold)); color: #1a1405; border-color: transparent; font-weight: 800; } .admin-restock-btn:hover{ opacity: .9; background: linear-gradient(180deg, var(--adm-gold-bright), var(--adm-gold)); border-color: transparent; } .admin-restock-btn:disabled{ opacity: .55; } .admin-waitlist-entries{ border-top: 1px solid var(--adm-border); } .admin-waitlist-entry{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--adm-border); font-size: 13px; flex-wrap: wrap; } .admin-waitlist-entry:last-child{ border-bottom: none; } .admin-waitlist-entry-date{ color: var(--adm-text-faint); font-size: 12px; } /* ---- Returns / Promo Codes / Notifications / Banner ---- */ .admin-btn-secondary.danger{ color: var(--adm-danger); border-color: rgba(225,58,58,.35); } .admin-btn-secondary.danger:hover{ background: var(--adm-danger-wash); } .admin-photo-link{ display: inline-block; line-height: 0; } .admin-list-modal{ display: flex; flex-direction: column; border: 1px solid var(--adm-border); border-radius: var(--radius-md); max-height: 320px; overflow-y: auto; } .admin-list-row{ padding: 11px 16px; border-bottom: 1px solid var(--adm-border); font-size: 13px; color: var(--adm-text); word-break: break-all; } .admin-list-row:last-child{ border-bottom: none; } .admin-list-empty{ padding: 36px 16px; text-align: center; color: var(--adm-text-muted); font-size: 13.5px; } .admin-settings-card{ background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 18px; max-width: 620px; } .admin-banner-preview{ display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--adm-gold-bright), var(--adm-gold)); color: #1a1405; font-size: 13.5px; font-weight: 800; text-align: center; transition: opacity .2s; } .admin-banner-preview.is-off{ opacity: .3; } /* ---- Direct Free Email: today's per-tier dispatch quota strip ---- */ .admin-quota-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .admin-quota-grid:empty{ display: none; } .admin-quota-item{ background: var(--adm-surface-2); border: 1px solid var(--adm-border); border-radius: var(--radius-sm); padding: 14px 16px; } .admin-quota-item .label{ font-size: 11.5px; color: var(--adm-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } .admin-quota-item .value{ font-size: 18px; font-weight: 800; color: var(--adm-text); } .admin-quota-item .bar{ height: 5px; border-radius: 999px; background: var(--adm-border-strong); margin-top: 8px; overflow: hidden; } .admin-quota-item .bar-fill{ height: 100%; background: var(--adm-gold); border-radius: 999px; } /* ========================================================================== PROMPT — STANDALONE FULL-PAGE CART (cart.html) Distinct from the quick-view `.cart-panel` slide-out drawer defined above (that stays as-is, sitewide, for the fly-out preview). This is the dedicated full-page checkout-adjacent cart at /cart.html: an item TABLE (thumb / details / qty / line total) rather than the drawer's compact stacked rows, plus a "You May Also Like" cross-sell rail. Reuses wherever the shape already matches so cart.html stays visually identical to the rest of the site: .free-shipping-text / .free-shipping-track / .free-shipping-fill — same progress-bar mechanics as the drawer .qty-stepper / .qty-btn / .qty-value — same bordered "− N +" control as the PDP .cart-accordion / .accordion-trigger / .accordion-panel / .accordion-plus — Order Note uses the identical "+" → "×" mechanics as the drawer's Shipping/Discount accordions .btn-complete-order — same primary CTA class checkout.html uses, so "Complete Order" looks identical on both pages .view-all-link — "Continue shopping" reuses this centered underline-on-hover link style .empty-state — empty-cart state .home-grid / .home-card / … — the "You May Also Like" cards are the same card used for New Arrivals/Best Sellers, just placed in a horizontal scroll-snap rail instead of a CSS grid ========================================================================== */ .cart-page-section{ max-width: 1320px; margin: 0 auto; padding: 48px 20px 0; } .cart-page-title{ font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 40px); font-weight: 800; letter-spacing: .01em; margin: 0 0 28px; } .cart-count-sup{ font-size: .45em; font-weight: 700; color: var(--text-muted); vertical-align: super; margin-left: 2px; } /* ---- Free shipping bar (full-width page variant) ---- */ .cart-page-shipping-bar{ padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--border); } .cart-page-shipping-bar .free-shipping-text{ display: flex; align-items: center; justify-content: center; gap: 8px; } .cart-page-shipping-bar .free-shipping-text svg{ width: 17px; height: 17px; color: var(--gold-dark); flex-shrink: 0; } /* ---- Two-column layout: item table + summary sidebar ---- */ .cart-page-layout{ display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; padding-bottom: 64px; } .cart-table-head{ display: flex; justify-content: space-between; padding: 0 2px 14px; margin-bottom: 22px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); } .cart-rows{ display: flex; flex-direction: column; } .cart-row{ display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--border); animation: cardIn .35s var(--ease) both; } .cart-rows > .cart-row:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .cart-row-media{ width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-muted); flex-shrink: 0; } .cart-row-media img{ width: 100%; height: 100%; object-fit: cover; } .cart-row-details{ display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cart-row-name{ font-size: 15px; font-weight: 700; margin: 0; color: var(--text); cursor: pointer; } .cart-row-name:hover{ color: var(--gold-dark); } .cart-row-price-row{ display: flex; align-items: baseline; gap: 8px; margin: 1px 0; } .cart-row-price{ font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); } .cart-row-price.sale{ color: var(--red); } .cart-row-price-old{ font-family: var(--font-display); font-size: 12.5px; color: var(--text-faint); text-decoration: line-through; } .cart-row-variant{ font-size: 12.5px; color: var(--text-faint); } .cart-row-actions{ display: flex; align-items: center; gap: 12px; margin-top: 10px; } .cart-row-remove-btn{ width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-faint); transition: background .2s, color .2s; flex-shrink: 0; } .cart-row-remove-btn:hover{ background: var(--surface-muted); color: var(--red); } .cart-row-remove-btn svg{ width: 17px; height: 17px; } .cart-row-total{ display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-top: 2px; white-space: nowrap; } .cart-row-total-price{ font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); } .cart-row-total-price.sale{ color: var(--red); } .cart-row-total-old{ font-family: var(--font-display); font-size: 12.5px; color: var(--text-faint); text-decoration: line-through; } /* ---- Summary sidebar ---- */ .cart-summary-box{ background: var(--surface-muted); border-radius: var(--radius-lg); padding: 28px; position: sticky; top: calc(var(--header-h) + 24px); } .cart-summary-row{ display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .cart-summary-row span:last-child{ font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--gold-dark); } .cart-summary-shipping-note{ font-size: 12.5px; color: var(--text-faint); margin: 0 0 6px; } .cart-summary-shipping-note a{ color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .cart-summary-shipping-note a:hover{ color: var(--gold-dark); } .cart-summary-box .cart-accordion{ margin-top: 10px; } .cart-summary-box .accordion-panel textarea{ width: 100%; min-height: 80px; resize: vertical; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; padding: 10px 12px; font: inherit; font-size: 13.5px; color: var(--text); outline: none; } .cart-summary-box .accordion-panel textarea:focus{ border-color: var(--gold); } .cart-summary-box .btn-complete-order{ margin-top: 18px; } .cart-summary-box .view-all-link{ margin-top: 16px; } /* ---- Empty cart ---- */ .cart-empty-page svg{ width: 40px; height: 40px; color: var(--text-faint); margin-bottom: 6px; } .cart-empty-page .btn-ghost-dark{ display: inline-block; padding: 13px 28px; } /* ========================================================================== YOU MAY ALSO LIKE — horizontal cross-sell rail, populated from window.RareVisionFirebase.fetchProducts() (js/firebase-data.js). Cards reuse .home-card in full (badge / choose-options / swatches / price / rating) so they read as identical siblings of the New Arrivals grid — only the container is a scroll-snap flex track instead of a CSS grid. ========================================================================== */ .you-may-like-section{ max-width: 1320px; margin: 0 auto; padding: 8px 20px 90px; } .you-may-like-header{ display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; } .you-may-like-heading{ font-family: var(--font-display); font-size: clamp(26px, 4.2vw, 42px); font-weight: 800; letter-spacing: .01em; margin: 0; } .you-may-like-controls{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .carousel-arrow-btn{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; transition: border-color .2s, color .2s; } .carousel-arrow-btn svg{ width: 17px; height: 17px; } .carousel-arrow-btn:hover:not(:disabled){ border-color: var(--gold); color: var(--gold-dark); } .carousel-arrow-btn:disabled{ opacity: .35; cursor: not-allowed; } .you-may-like-track{ display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 14px; scrollbar-width: thin; } .also-like-card{ flex: 0 0 240px; width: 240px; scroll-snap-align: start; } /* ---- Responsive ---- */ @media (max-width: 980px){ .cart-page-layout{ grid-template-columns: 1fr; gap: 40px; } .cart-summary-box{ position: static; } } @media (max-width: 640px){ .cart-page-title{ margin-bottom: 20px; } .cart-row{ grid-template-columns: 72px 1fr; gap: 14px; } .cart-row-media{ width: 72px; height: 72px; } .cart-row-total{ grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 8px; margin-top: -4px; } .also-like-card{ flex-basis: 156px; width: 156px; } .you-may-like-section{ padding-bottom: 64px; } } /* ========================================================================== SLEEK LIVE ORDER TRACKER — cart.html's "dual-state" view Lives inside the same `.cart-page-section` as `.cart-page-layout` (the normal item table + summary sidebar), but the two are mutually exclusive: js/cart-page.js shows exactly one of #cartTableView / #orderTrackerView at a time, switching to this one the moment it detects an active order (via ?orderId=... or the rareVisionActiveOrderId localStorage key) and keeping it live via a Firestore onSnapshot() listener on orders/{orderId}. Reuses the same tokens/radii as the rest of cart.html (--gold / --surface-muted / --radius-lg / --font-display / --ease) so it reads as a native part of the page, not a bolted-on widget. ========================================================================== */ .order-tracker-view{ max-width: 720px; margin: 0 auto; padding-bottom: 64px; animation: cardIn .4s var(--ease) both; } /* ---- Live delivery banner ---- */ .tracker-banner{ display: flex; align-items: flex-start; gap: 16px; background: linear-gradient(155deg, var(--surface-muted), #fff 70%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 36px; } .tracker-banner.delivered{ background: linear-gradient(155deg, rgba(80,170,110,.12), #fff 70%); border-color: rgba(80,170,110,.35); } .tracker-banner.cancelled{ background: linear-gradient(155deg, rgba(225,58,58,.08), #fff 70%); border-color: rgba(225,58,58,.3); } .tracker-pulse-badge{ position: relative; width: 44px; height: 44px; flex-shrink: 0; margin-top: 2px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(201,150,46,.14); } .tracker-pulse-badge.delivered{ background: rgba(80,170,110,.16); } .tracker-pulse-badge.cancelled{ background: rgba(225,58,58,.12); } .tracker-pulse-dot{ width: 12px; height: 12px; border-radius: 50%; background: var(--gold); position: relative; z-index: 1; } .tracker-pulse-badge.delivered .tracker-pulse-dot{ background: #4f9a67; } .tracker-pulse-badge.cancelled .tracker-pulse-dot{ background: var(--red); } .tracker-pulse-badge.pulsing::before{ content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: .55; animation: trackerPulse 1.8s ease-out infinite; } .tracker-pulse-badge.pulsing.delivered::before{ background: #4f9a67; } @keyframes trackerPulse{ 0%{ transform: scale(1); opacity: .55; } 100%{ transform: scale(2.2); opacity: 0; } } .tracker-banner-copy{ flex: 1; min-width: 0; } .tracker-banner-order-ref{ margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); } .tracker-banner-headline{ margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--text); } .tracker-banner-subtext{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); } /* ---- 4-stage visual timeline: Order Confirmed → Preparing → Out for Delivery → Delivered ---- */ .tracker-timeline{ display: flex; align-items: flex-start; list-style: none; margin: 0 0 40px; padding: 0; } .tracker-stage{ position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .tracker-stage::after{ content: ''; position: absolute; top: 17px; left: 50%; z-index: 0; width: 100%; height: 2px; background: var(--border-strong); transition: background .3s var(--ease); } .tracker-stage:last-child::after{ display: none; } .tracker-stage.done::after{ background: var(--gold); } .tracker-stage.cancelled::after{ background: var(--border-strong); } .tracker-stage-dot{ position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--border-strong); color: var(--text-faint); font-family: var(--font-display); font-weight: 700; font-size: 13px; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .tracker-check-icon{ width: 16px; height: 16px; display: none; } .tracker-stage.done .tracker-stage-dot{ background: var(--gold); border-color: var(--gold); color: #fff; } .tracker-stage.done .tracker-check-icon{ display: block; } .tracker-stage.done .tracker-stage-number{ display: none; } .tracker-stage.active .tracker-stage-dot{ border-color: var(--gold); color: var(--gold-dark); box-shadow: 0 0 0 4px rgba(201,150,46,.18); } .tracker-stage.pending .tracker-stage-dot{ opacity: .7; } .tracker-stage.cancelled .tracker-stage-dot{ background: #fff; border-color: var(--border-strong); color: var(--text-faint); opacity: .6; } .tracker-stage-label{ max-width: 84px; font-size: 12px; font-weight: 700; color: var(--text-muted); } .tracker-stage.active .tracker-stage-label, .tracker-stage.done .tracker-stage-label{ color: var(--text); } /* ---- Mini order summary ---- */ .tracker-order-summary{ background: var(--surface-muted); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 28px; } .tracker-summary-title{ margin: 0 0 16px; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--text); } .tracker-summary-items{ display: flex; flex-direction: column; gap: 14px; } .tracker-summary-item{ display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; } .tracker-summary-item-media{ width: 52px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; background: #fff; flex-shrink: 0; } .tracker-summary-item-media img{ width: 100%; height: 100%; object-fit: cover; } .tracker-summary-item-details{ min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tracker-summary-item-name{ margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text); } .tracker-summary-item-variant{ font-size: 11.5px; color: var(--text-faint); } .tracker-summary-item-qty{ font-size: 11.5px; color: var(--text-faint); } .tracker-summary-item-total{ font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; } .tracker-summary-total-row{ display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-strong); font-size: 15px; font-weight: 700; color: var(--text); } .tracker-summary-total-row span:last-child{ font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--gold-dark); } /* ---- Actions ---- */ .tracker-actions{ display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .tracker-not-my-order-btn{ font-size: 12.5px; color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; } .tracker-not-my-order-btn:hover{ color: var(--text); } @media (max-width: 640px){ .tracker-stage-label{ font-size: 10.5px; max-width: 64px; } .tracker-banner{ padding: 18px; gap: 12px; } .tracker-summary-item{ grid-template-columns: 44px 1fr auto; } } /* ========================================================================== GLOBAL UTILITY — .hidden returns.html (and its script) toggle this class to show/hide the sign-in banner, form-error chip, form card, and success view, but no rule for it existed anywhere in this stylesheet, so those toggles were previously a no-op. Added here as a plain, global, low-risk utility. ========================================================================== */ .hidden{ display: none !important; } /* ========================================================================== EXCHANGE & RETURN PORTAL (returns.html) A dark, elevated "portal" card floating on the site's normal white page shell — keeps the header/footer and overall site continuity intact while giving this specific flow the requested luxury/dark treatment. Reuses existing tokens throughout (--black, --gold, --gold-dark, --radius-lg/md/sm, --shadow-panel, --font-display, --ease) plus the already-established .form-row/.form-row.two-col grid classes from the checkout form. The success-state green (#4f9a67) matches the existing "delivered" color used by the order tracker on cart.html, rather than introducing a new hue. ========================================================================== */ .returns-page{ background: var(--bg); min-height: 60vh; } .returns-page-inner{ max-width: 680px; margin: 0 auto; padding: 64px 20px 96px; } .returns-portal{ background: var(--black); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding: 44px 40px; box-shadow: var(--shadow-panel); color: #fff; } /* ---- Header ---- */ .returns-header{ text-align: center; margin-bottom: 26px; } .returns-header h1{ font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.6vw, 32px); letter-spacing: .01em; margin: 0 0 10px; color: #fff; } .returns-header p{ font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.65); max-width: 440px; margin: 0 auto; } /* ---- Sign-in pill banner ---- */ .returns-signin-banner{ display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 10px 18px; font-size: 12.5px; color: rgba(255,255,255,.72); text-align: center; margin: 0 0 30px; } .returns-signin-banner a{ color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .returns-signin-banner a:hover{ color: #fff; } /* ---- Form fields ---- */ .returns-portal .form-group{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .returns-portal .form-row{ margin-bottom: 0; } .returns-portal .form-row.two-col > .form-group{ margin-bottom: 0; } .returns-portal .form-row.two-col + .form-group, .returns-portal .form-row + .form-row{ margin-top: 16px; } .returns-portal label{ font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.55); } .returns-portal .required{ color: var(--gold); margin-left: 2px; } .returns-portal input[type="text"], .returns-portal input[type="email"], .returns-portal select, .returns-portal textarea{ width: 100%; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 13px 14px; font-size: 14.5px; font-family: var(--font-body); color: #fff; outline: none; transition: border-color .2s, background .2s; } .returns-portal input::placeholder, .returns-portal textarea::placeholder{ color: rgba(255,255,255,.32); } .returns-portal input:focus, .returns-portal select:focus, .returns-portal textarea:focus{ border-color: var(--gold); background: rgba(255,255,255,.08); } .returns-portal input:disabled, .returns-portal select:disabled{ opacity: .5; cursor: not-allowed; } .returns-portal textarea{ resize: vertical; min-height: 110px; } /* Custom select chevron (browser default arrow suppressed) */ .returns-portal select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 13px; } .returns-portal select option{ background: var(--black); color: #fff; } /* ---- Photo dropzone ---- */ .returns-dropzone{ border: 1.5px dashed rgba(255,255,255,.22); border-radius: var(--radius-md); padding: 26px 18px; text-align: center; cursor: pointer; background: rgba(255,255,255,.03); transition: border-color .2s, background .2s; } .returns-dropzone:hover, .returns-dropzone.is-dragover{ border-color: var(--gold); background: rgba(201,150,46,.08); } .returns-dropzone:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; } .returns-dropzone-icon{ display: block; font-size: 24px; margin-bottom: 8px; } .returns-dropzone-text{ font-size: 13.5px; font-weight: 600; color: #fff; margin: 0 0 10px; } .returns-dropzone-badges{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .returns-dropzone-badge{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .returns-photo-list{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .returns-photo-chip{ position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(255,255,255,.16); flex-shrink: 0; } .returns-photo-chip img{ width: 100%; height: 100%; object-fit: cover; display: block; } .returns-photo-remove{ position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s; } .returns-photo-remove:hover{ background: var(--red); } /* ---- Error chip (dark-context variant of the light .form-error) ---- */ .returns-form-error{ background: rgba(225,58,58,.16); border: 1px solid rgba(225,58,58,.4); color: #ff9d9d; padding: 11px 13px; border-radius: var(--radius-sm); font-size: 13px; margin: 0 0 18px; } /* ---- Submit / secondary pill buttons ---- */ .btn-returns-submit{ width: 100%; background: #fff; color: var(--black); font-family: var(--font-display); font-weight: 700; font-size: 15px; padding: 16px; border-radius: 999px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s, color .2s, transform .2s, box-shadow .2s; } .btn-returns-submit:hover:not(:disabled){ background: var(--gold); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(201,150,46,.32); } .btn-returns-submit:disabled{ background: rgba(255,255,255,.25); color: rgba(255,255,255,.5); cursor: not-allowed; transform: none; box-shadow: none; } .btn-returns-secondary{ display: block; width: 100%; text-align: center; background: transparent; border: 1.5px solid rgba(255,255,255,.25); color: #fff; font-weight: 700; font-size: 13.5px; padding: 14px; border-radius: 999px; transition: border-color .2s, color .2s; } .btn-returns-secondary:hover{ border-color: var(--gold); color: var(--gold); } /* ---- Success state ---- */ .returns-success{ text-align: center; padding: 8px 2px 2px; } .returns-success-icon{ width: 72px; height: 72px; border-radius: 50%; background: rgba(80,170,110,.16); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; animation: returnsSuccessPop .5s var(--ease) both; } .returns-success-icon svg{ width: 32px; height: 32px; color: #4f9a67; } @keyframes returnsSuccessPop{ 0%{ transform: scale(.4); opacity: 0; } 60%{ transform: scale(1.08); opacity: 1; } 100%{ transform: scale(1); opacity: 1; } } .returns-success h2{ font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; margin: 0 0 12px; } .returns-success p{ font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.65); max-width: 420px; margin: 0 auto 28px; } .returns-success-actions{ display: flex; flex-direction: column; gap: 12px; } .returns-success-actions .btn-returns-submit{ margin-top: 0; } @media (max-width: 640px){ .returns-page-inner{ padding: 48px 16px 72px; } .returns-portal{ padding: 34px 22px; border-radius: var(--radius-md); } .returns-portal .form-row.two-col{ grid-template-columns: 1fr; gap: 16px; } } html, body { overflow-x: clip !important; } /* ========================================================================== OFF-CANVAS DRAWER SHADOWS The cart, sign-in, notifications and navigation drawers slide in with `transform: translateX(±100%)`, but their box-shadow stayed painted while they were closed, so a grey fade bled in from BOTH screen edges on every page. The shadow now exists only while a drawer is open. ========================================================================== */ .cart-panel, .signin-panel, .notify-panel, .nav-drawer{ box-shadow: none; } .cart-panel.open, .signin-panel.open, .notify-panel.open{ box-shadow: var(--shadow-panel); } .nav-drawer.open{ box-shadow: 20px 0 60px -20px rgba(0,0,0,.35); } /* ========================================================================== HEADER SEARCH ON PHONES Below 480px the search box was squeezed to ~10px of usable input between the menu button and the centred logo, so nothing could be typed. On phones it is now just the magnifier button: tapping it takes the shopper to the page's own full-width search box (js/header.js: shop grid on the home page, otherwise shop.html -> search.html). ========================================================================== */ @media (max-width: 480px){ .header-search{ flex: 0 0 auto; width: 34px; max-width: none; border-radius: 10px; } .header-search input, .header-search-category{ display: none; } .header-search-submit{ width: 100%; } }