/* ============================================================ YESLAMU — Storefront styles Built on the OmniCart design system (omnicart-tokens.css) Midnight Indigo · Signal Teal · Saffron · Plus Jakarta Sans ============================================================ */ /* ---------- Page-level vars (some are Tweak-controlled) ---------- */ :root { --accent: var(--teal); /* interactive accent — overridden by Tweaks */ --accent-strong: var(--teal-600); --accent-soft: var(--teal-100); --accent-glow: 0 10px 30px rgba(0, 212, 180, 0.30); --card-radius: var(--r-lg); --shell-max: 1240px; --nav-h: 68px; /* motion knobs (Tweak-controlled) */ --reveal-dist: 26px; --reveal-dur: 760ms; --reveal-ease: var(--ease-out); /* density (Tweak-controlled) */ --section-y: var(--sp-20); } /* accent presets applied via [data-accent] on */ html[data-accent="saffron"] { --accent: var(--saffron); --accent-strong: var(--saffron-600); --accent-soft: var(--saffron-100); --accent-glow: 0 10px 30px rgba(255, 181, 71, 0.34); } html[data-accent="indigo"] { --accent: var(--indigo-500); --accent-strong: var(--indigo-600); --accent-soft: var(--indigo-100); --accent-glow: 0 10px 30px rgba(44, 74, 134, 0.30); } html[data-density="compact"] { --section-y: var(--sp-12); } html[data-corners="sharp"] { --card-radius: 4px; } html[data-motion="off"] * { animation: none !important; transition: none !important; } html[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg-base); color: var(--fg-primary); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* Elements toggled via the `hidden` attribute that also declare their own `display`. An author `display` rule always beats the browser's built-in [hidden] { display: none }, so without these the element stays on screen even when hidden — usually as an empty box. Safe by construction: these only apply when `hidden` is present, i.e. when it was meant to be gone. */ .address-map-search-clear[hidden], .admin-cart-featured-search-results[hidden], .admin-cart-featured-search-toolbar[hidden], .admin-compact-empty[hidden], .admin-filter-field[hidden], .admin-mini-button[hidden], .admin-reorder-list[hidden], .order-review-image-preview[hidden], .pd-review-image-preview[hidden] { display: none; } .shell { width: min(100% - 48px, var(--shell-max)); margin-inline: auto; } .eyebrow { font-weight: var(--w-bold); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--accent-strong); display: inline-flex; align-items: center; gap: var(--sp-2); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; } /* ============================================================ BUTTONS ============================================================ */ .btn { --bh: 0; font-weight: var(--w-semibold); font-size: var(--fs-body); border: 1px solid transparent; border-radius: var(--r-sm); padding: 13px 22px; display: inline-flex; align-items: center; gap: var(--sp-2); line-height: 1; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn svg { width: 18px; height: 18px; } .btn-accent { background: var(--accent); color: var(--indigo); box-shadow: var(--accent-glow); } .btn-accent:hover { background: var(--accent-strong); transform: translateY(-2px); } .btn-indigo { background: var(--indigo); color: #fff; } .btn-indigo:hover { background: var(--indigo-700); transform: translateY(-2px); } .btn-outline { background: var(--bg-surface); color: var(--indigo); border-color: var(--border); box-shadow: var(--shadow-xs); } .btn-outline:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--fg-secondary); padding-inline: 12px; } .btn-ghost:hover { color: var(--accent-strong); } .btn-ondark { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); backdrop-filter: blur(6px); } .btn-ondark:hover { background: rgba(255,255,255,0.16); } .btn-lg { padding: 16px 28px; font-size: var(--fs-body-lg); border-radius: var(--r-md); } /* ============================================================ ANNOUNCEMENT BAR ============================================================ */ .announce { background: var(--indigo-900); color: var(--fg-onDark); font-size: var(--fs-sm); overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); } .announce-track { display: flex; align-items: center; gap: var(--sp-12); white-space: nowrap; width: max-content; padding: 9px 0; animation: marquee 26s linear infinite; will-change: transform; } .announce:hover .announce-track { animation-play-state: paused; } .announce-item { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; } .announce-item b { color: #fff; font-weight: var(--w-semibold); } .announce-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } @keyframes marquee { to { transform: translateX(-50%); } } html[dir="rtl"] .announce-track { animation-name: marquee-rtl; } @keyframes marquee-rtl { to { transform: translateX(50%); } } @media (prefers-reduced-motion: reduce) { .announce-track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; row-gap: 6px; white-space: normal; text-align: center; } } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow var(--dur-base), border-color var(--dur-base), background var(--dur-base); } .nav.scrolled { box-shadow: var(--shadow-sm); border-color: var(--border); } .nav-inner { height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand img { height: 30px; width: auto; object-fit: contain; } .brand .word { font-weight: var(--w-extrabold); font-size: 21px; letter-spacing: -0.02em; color: var(--indigo); } .brand .word i { color: var(--accent-strong); font-style: normal; } .nav-links { display: flex; justify-content: center; gap: 4px; } .nav-links a { position: relative; font-weight: var(--w-medium); font-size: var(--fs-body); color: var(--slate-700); padding: 8px 14px; border-radius: var(--r-sm); transition: color var(--dur-base), background var(--dur-base); } .nav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .nav-links a:hover { color: var(--indigo); } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a.sale { color: var(--saffron-700); font-weight: var(--w-semibold); } .nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; } .nav-search { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border: 1px solid rgba(0,0,0,0.08); border-radius: 999px; background: rgba(255,255,255,0.84); } .nav-search input { width: 150px; border: none; outline: none; background: transparent; color: var(--ink); font-size: var(--fs-sm); } .icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-sm); background: transparent; border: none; color: var(--slate-700); position: relative; transition: background var(--dur-base), color var(--dur-base), transform var(--dur-fast); } .icon-btn:hover { background: var(--mist-100); color: var(--indigo); } .icon-btn:active { transform: scale(0.92); } .icon-btn svg { width: 20px; height: 20px; } .account-menu { position: relative; flex: 0 0 auto; } .account-menu summary { list-style: none; } .account-menu summary::-webkit-details-marker { display: none; } .account-trigger { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--slate-700); cursor: pointer; user-select: none; transition: background var(--dur-base), color var(--dur-base); } .account-menu.is-guest .account-trigger { width: 42px; padding: 0; } .account-menu.is-authenticated .account-trigger { min-width: 120px; justify-content: flex-start; border: 1px solid rgba(0,121,107,0.10); border-radius: var(--r-pill); background: rgba(255,255,255,0.56); } .account-trigger:hover, .account-menu[open] .account-trigger { background: var(--mist-100); color: var(--indigo); } .account-icon, .account-caret { display: inline-grid; place-items: center; } .account-icon svg { width: 20px; height: 20px; } .account-caret svg { width: 14px; height: 14px; } .account-menu.is-guest .account-caret { display: none; } .account-label { min-width: 0; display: grid; line-height: 1.05; } .account-label small, .account-label b { display: block; white-space: nowrap; } .account-label small { color: var(--fg-muted); font-size: 9px; font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; } .account-label b { max-width: 104px; overflow: hidden; color: inherit; font-size: 12px; font-weight: var(--w-extrabold); text-overflow: ellipsis; } .account-dropdown { position: absolute; top: calc(100% + 10px); right: 0; z-index: 300; width: max-content; min-width: 190px; max-width: min(280px, calc(100vw - 28px)); padding: 7px; border: 1px solid rgba(0,121,107,0.14); border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(6,59,52,0.16); backdrop-filter: blur(16px); } .account-dropdown::before { content: ""; position: absolute; top: -7px; right: 18px; width: 14px; height: 14px; border-left: 1px solid rgba(0,121,107,0.14); border-top: 1px solid rgba(0,121,107,0.14); background: #fff; transform: rotate(45deg); } .account-dropdown a, .account-dropdown button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 11px; background: transparent; color: var(--fg-secondary); padding: 0 9px; font: inherit; font-size: 13px; font-weight: var(--w-semibold); text-align: left; cursor: pointer; } .account-dropdown a:hover, .account-dropdown button:hover { background: var(--accent-soft); color: var(--accent-strong); } .account-dropdown svg { width: 16px; height: 16px; } .account-dropdown form { margin: 0; } .account-dropdown-head { max-width: 250px; padding: 9px; border-bottom: 1px solid #edf5f2; margin-bottom: 6px; } .account-dropdown-head b, .account-dropdown-head small { display: block; } .account-dropdown-head b { color: var(--ink); font-size: 13px; } .account-dropdown-head small { margin-top: 3px; color: var(--fg-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-role-badge { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 999px; background: #eef8f6; color: #00695c; font-size: 11px; font-style: normal; font-weight: var(--w-semibold); } .cart-count { position: absolute; top: 5px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--accent); color: var(--indigo); font-size: 10px; font-weight: var(--w-bold); border-radius: var(--r-pill); display: grid; place-items: center; border: 2px solid #fff; transition: transform var(--dur-fast) var(--ease-out); } .cart-count.bump { animation: bump 360ms var(--ease-out); } @keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} } /* Cart hover flyout */ .cart-flyout-wrap { position: relative; } .cart-flyout { position: absolute; top: calc(100% + 12px); right: 0; z-index: 300; width: 340px; max-width: min(360px, calc(100vw - 28px)); display: flex; flex-direction: column; border: 1px solid rgba(0,121,107,0.14); border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(6,59,52,0.16); overflow: hidden; } .cart-flyout[hidden] { display: none; } html[dir="rtl"] .cart-flyout { right: auto; left: 0; } .cart-flyout-status { padding: 28px 20px; text-align: center; color: var(--fg-muted); font-size: 13.5px; } .cart-flyout-status a { color: var(--accent-strong); font-weight: var(--w-semibold); } .cart-flyout-empty { display: grid; justify-items: center; gap: 10px; padding: 32px 20px; text-align: center; } .cart-flyout-empty svg { width: 34px; height: 34px; color: #cddad6; } .cart-flyout-empty p { margin: 0; color: var(--fg-muted); font-size: 14px; } .cart-flyout-empty .cart-flyout-btn { width: auto; padding: 0 20px; } .cart-flyout-list { display: grid; gap: 2px; padding: 10px; max-height: 320px; overflow-y: auto; } .cart-flyout-line { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; transition: background var(--dur-fast) var(--ease-out); } .cart-flyout-line:hover { background: #f7fbfa; } .cart-flyout-line-image { flex: none; width: 52px; height: 52px; border-radius: 10px; border: 1px solid #eef4f2; background: #eef5f3 center / cover no-repeat; } .cart-flyout-line-info { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; } .cart-flyout-line-name { display: block; color: var(--ink); font-size: 13.5px; font-weight: var(--w-semibold); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-flyout-line-name:hover { color: var(--accent-strong); } .cart-flyout-line-info small { color: var(--fg-muted); font-size: 12px; } .cart-flyout-line-meta { color: var(--fg-secondary); font-size: 12px; font-variant-numeric: tabular-nums; } .cart-flyout-line-issue { color: var(--danger); font-size: 12px; } .cart-flyout-line-remove { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--fg-muted); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .cart-flyout-line-remove:hover { background: rgba(229, 72, 77, 0.09); color: var(--danger); } .cart-flyout-line-remove:disabled { opacity: 0.5; cursor: not-allowed; } .cart-flyout-line-remove svg { width: 14px; height: 14px; } .cart-flyout-footer { padding: 14px 16px 16px; border-top: 1px solid #eef4f2; background: #fbfefd; } .cart-flyout-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .cart-flyout-subtotal span { color: var(--fg-secondary); font-size: 13px; font-weight: var(--w-semibold); } .cart-flyout-subtotal strong { color: var(--accent-strong); font-size: 18px; font-weight: var(--w-extrabold); font-variant-numeric: tabular-nums; } .cart-flyout-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; border: 0; border-radius: 12px; font-size: 13.5px; font-weight: var(--w-bold); text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .cart-flyout-btn + .cart-flyout-btn { margin-top: 8px; } .cart-flyout-btn--primary { background: var(--cta); color: #fff; } .cart-flyout-btn--primary:hover { background: var(--cta-strong); transform: translateY(-1px); } .cart-flyout-btn--ghost { background: #fff; border: 1px solid #d8e8e4; color: var(--ink); } .cart-flyout-btn--ghost:hover { border-color: rgba(0,121,107,0.3); background: #f7fbfa; } .menu-toggle { display: none; } @media (max-width: 760px) { .account-menu.is-authenticated .account-trigger { min-width: 42px; width: 42px; padding: 0; justify-content: center; } .account-label, .account-menu.is-authenticated .account-caret { display: none; } .account-dropdown { right: -86px; } .account-dropdown::before { right: 102px; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; background: var(--indigo); color: var(--fg-onDark); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1100px 600px at 78% -10%, rgba(0,212,180,0.16), transparent 60%), radial-gradient(800px 500px at 8% 110%, rgba(44,74,134,0.55), transparent 55%); pointer-events: none; } .hero-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: var(--sp-12); align-items: center; padding-block: clamp(48px, 7vw, 104px); position: relative; z-index: 2; } .hero-copy { max-width: 560px; } .hero h1 { font-weight: var(--w-extrabold); font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.022em; margin: 18px 0 0; color: #fff; text-wrap: balance; } .hero h1 .hl { color: var(--accent); position: relative; white-space: nowrap; } .hero p.lead { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--fg-onDark-dim); margin: 22px 0 32px; max-width: 460px; } .hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; } .hero-meta { display: flex; gap: var(--sp-8); margin-top: 44px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; } .hero-meta .stat .n { font-size: var(--fs-h3); font-weight: var(--w-extrabold); color: #fff; } .hero-meta .stat .l { font-size: var(--fs-sm); color: var(--fg-onDark-dim); margin-top: 2px; } /* hero visual */ .hero-visual { position: relative; } .hero-frame { position: relative; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 4 / 5; border: 1px solid rgba(255,255,255,0.10); } .hero-frame image-slot { width: 100%; height: 100%; } .hero-badge { position: absolute; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 12px 16px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; } .hero-badge.tl { top: 18px; left: -22px; } .hero-badge.br { bottom: 22px; right: -20px; } .hero-badge .ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-strong); } .hero-badge .ico svg { width: 18px; height: 18px; } .hero-badge .t { font-weight: var(--w-bold); font-size: var(--fs-sm); color: var(--ink); line-height: 1.1; } .hero-badge .s { font-size: var(--fs-xs); color: var(--slate-500); } /* centered hero variant */ html[data-hero="centered"] .hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } html[data-hero="centered"] .hero-copy { max-width: 720px; } html[data-hero="centered"] .hero p.lead { margin-inline: auto; } html[data-hero="centered"] .hero-cta { justify-content: center; } html[data-hero="centered"] .hero-meta { justify-content: center; } html[data-hero="centered"] .hero-visual { display: none; } /* ============================================================ VALUE PROPS ============================================================ */ .values { background: var(--bg-surface); border-bottom: 1px solid var(--border); } .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); padding-block: var(--sp-8); } .value { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--card-radius); transition: background var(--dur-base); } .value:hover { background: var(--mist-50); } .value .ico { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--mist-100); color: var(--indigo); display: grid; place-items: center; transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base); } .value:hover .ico { background: var(--accent-soft); color: var(--accent-strong); transform: translateY(-2px); } .value .t { font-weight: var(--w-bold); font-size: var(--fs-body); color: var(--ink); } .value .s { font-size: var(--fs-sm); color: var(--fg-muted); } /* ============================================================ SECTION HEAD ============================================================ */ section.block { padding-block: var(--section-y); } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-8); } .sec-head h2 { font-weight: var(--w-extrabold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); margin: 10px 0 0; color: var(--ink); } .sec-head p { margin: 8px 0 0; color: var(--fg-secondary); max-width: 460px; } .sec-link { font-weight: var(--w-semibold); color: var(--indigo); display: inline-flex; align-items: center; gap: 6px; transition: gap var(--dur-base), color var(--dur-base); } .sec-link svg { width: 18px; height: 18px; } .sec-link:hover { color: var(--accent-strong); gap: 10px; } .sec-head-actions { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; } /* ============================================================ CATEGORY TILES ============================================================ */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .cat { position: relative; aspect-ratio: 16 / 9; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-sm); display: block; } .cat image-slot { width: 100%; height: 100%; } .cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,27,59,0.78) 0%, rgba(11,27,59,0.12) 48%, transparent 72%); transition: background var(--dur-base); } .cat:hover::after { background: linear-gradient(to top, rgba(11,27,59,0.85) 0%, rgba(11,27,59,0.30) 55%, rgba(11,27,59,0.05) 100%); } .cat .cat-img { position: absolute; inset: 0; transition: transform 700ms var(--ease-out); } .cat:hover .cat-img { transform: scale(1.06); } .cat-label { position: absolute; left: 22px; bottom: 20px; z-index: 2; color: #fff; font-size: var(--fs-h3); font-weight: var(--w-extrabold); letter-spacing: -0.01em; } .cat-go { position: absolute; right: 18px; bottom: 18px; z-index: 2; width: 40px; height: 40px; border-radius: var(--r-pill); background: #fff; color: var(--indigo); display: grid; place-items: center; transform: translateY(8px); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); } .cat:hover .cat-go { transform: translateY(0); opacity: 1; } .cat-go svg { width: 18px; height: 18px; } /* ============================================================ PRODUCT GRID ============================================================ */ .filter-row { display: flex; gap: 8px; margin-bottom: var(--sp-6); flex-wrap: wrap; } .chip { border: 1px solid var(--border); background: var(--bg-surface); color: var(--slate-700); font-weight: var(--w-medium); font-size: var(--fs-sm); padding: 8px 16px; border-radius: var(--r-pill); transition: all var(--dur-base); } .chip:hover { border-color: var(--accent); color: var(--indigo); } .chip.active { background: var(--indigo); color: #fff; border-color: var(--indigo); } .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); } /* The home page's category chips filter by hiding server-rendered cards rather than re-rendering them, so [hidden] has to actually win here. */ .card[hidden] { display: none !important; } .card--out_of_stock, .deal-card.card--out_of_stock { border-color: rgba(229, 72, 77, 0.42); box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.08), var(--shadow-xs); } .card--out_of_stock .card-media::before, .deal-card.card--out_of_stock .deal-media::before { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.58)), rgba(255, 255, 255, 0.24); backdrop-filter: grayscale(0.45) saturate(0.72); pointer-events: none; } .stock-ribbon { position: absolute; top: 50%; left: 0; right: 0; z-index: 4; width: 100%; padding: 13px 18px; border-top: 1px solid rgba(255, 255, 255, 0.22); border-bottom: 1px solid rgba(84, 18, 24, 0.18); border-radius: 0; background: linear-gradient( 90deg, rgba(176, 42, 52, 0.96) 0%, rgba(198, 54, 58, 0.98) 50%, rgba(176, 42, 52, 0.96) 100% ); color: #fff; font-size: 12px; font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px rgba(120, 24, 32, 0.22); transform: translateY(-50%); pointer-events: none; } .card--out_of_stock:hover .stock-ribbon, .deal-card.card--out_of_stock:hover .stock-ribbon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 32px rgba(120, 24, 32, 0.28); } .card--preorder, .deal-card.card--preorder { border-color: rgba(79, 70, 229, 0.35); box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.08), var(--shadow-xs); } .card--coming_soon, .deal-card.card--coming_soon { border-color: rgba(245, 158, 11, 0.42); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08), var(--shadow-xs); } /* Non-standard preorder types (see Product::availabilityClass()) — each reads as its own tag rather than a generic "Coming soon". */ .card--handmade, .deal-card.card--handmade { border-color: rgba(180, 83, 9, 0.42); box-shadow: 0 0 0 1px rgba(180, 83, 9, 0.08), var(--shadow-xs); } .card--limited_edition, .deal-card.card--limited_edition { border-color: rgba(109, 40, 217, 0.42); box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.08), var(--shadow-xs); } .card--one_of_a_kind, .deal-card.card--one_of_a_kind { border-color: rgba(190, 24, 93, 0.42); box-shadow: 0 0 0 1px rgba(190, 24, 93, 0.08), var(--shadow-xs); } .card--low_stock, .deal-card.card--low_stock { border-color: rgba(0, 121, 107, 0.36); box-shadow: 0 0 0 1px rgba(0, 121, 107, 0.08), var(--shadow-xs); } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .card-media { position: relative; aspect-ratio: 4/5; background: var(--mist-100); overflow: hidden; } .card-media image-slot { width: 100%; height: 100%; } .card-media-link { position: absolute; inset: 0; z-index: 2; } .card-name { display: inline-block; text-decoration: none; } .card-name:hover, .deal-name:hover { color: var(--teal); } .badge { position: absolute; top: 12px; left: 12px; z-index: 3; font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); } .badge.new { background: var(--indigo); color: #fff; } .badge.sale { background: var(--saffron); color: var(--indigo); } .availability-pill { position: absolute; top: 12px; left: 12px; z-index: 4; padding: 6px 11px; border-radius: var(--r-pill); color: #fff; font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--shadow-sm); } .availability-pill + .badge { top: 45px; } .availability-pill--out_of_stock { background: var(--danger); } .availability-pill--preorder { background: var(--indigo); } .availability-pill--coming_soon { background: var(--saffron); color: #fff; } .availability-pill--handmade { background: #b45309; } .availability-pill--limited_edition { background: #6d28d9; } .availability-pill--one_of_a_kind { background: #be185d; } .availability-pill--low_stock { background: var(--teal); } .wish { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: var(--r-pill); background: rgba(255,255,255,0.92); color: var(--slate-600); border: none; display: grid; place-items: center; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-base), transform var(--dur-base), color var(--dur-base); } .card:hover .wish { opacity: 1; transform: translateY(0); } .wish svg { width: 18px; height: 18px; } .wish:hover { color: var(--danger); } .wish.on { color: var(--danger); opacity: 1; transform: translateY(0); } .wish.on svg { fill: currentColor; } .quick-add { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; border: none; border-radius: var(--r-sm); background: var(--indigo); color: #fff; font-weight: var(--w-semibold); font-size: var(--fs-sm); padding: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base); } .quick-add svg { width: 17px; height: 17px; } .card:hover .quick-add { opacity: 1; transform: translateY(0); } .quick-add:hover { background: var(--accent); color: var(--indigo); } .quick-add.is-disabled, .quick-add:disabled { cursor: not-allowed; background: var(--mist-200); color: var(--fg-muted); } .card-body { padding: 16px; } .card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .card-name { font-weight: var(--w-bold); font-size: var(--fs-body); color: var(--ink); } .card-cat { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 2px; } .card-price { font-weight: var(--w-bold); font-size: var(--fs-body); color: var(--ink); white-space: nowrap; } .card-price .was { color: var(--slate-400); font-weight: var(--w-regular); text-decoration: line-through; margin-right: 6px; font-size: var(--fs-sm); } .card-price .now.sale { color: var(--saffron-700); } .swatches { display: flex; gap: 6px; margin-top: 12px; position: relative; z-index: 1; } .swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.12); box-shadow: 0 0 0 1px rgba(255,255,255,0.85); cursor: pointer; transition: transform var(--dur-fast); padding: 0; appearance: none; -webkit-appearance: none; background: none; flex-shrink: 0; } .swatch--light { border-color: rgba(0,0,0,0.18); } .swatch:hover { transform: scale(1.18); } .swatch.sel { box-shadow: 0 0 0 2px var(--accent); } .rating { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: var(--fs-xs); color: var(--fg-muted); } .rating svg { width: 13px; height: 13px; color: var(--saffron); fill: var(--saffron); } /* ============================================================ PROMO / SALE BANNER ============================================================ */ .promo { background: var(--indigo); color: #fff; border-radius: 0; overflow: hidden; } .promo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; position: relative; } .promo-art { position: relative; min-height: 460px; } .promo-art image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .promo-art::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(11,27,59,0.10)); } .promo-copy { padding: var(--sp-16) 0; max-width: 480px; } .promo .kicker { display: inline-flex; align-items: center; gap: 8px; background: var(--saffron); color: var(--indigo); font-weight: var(--w-bold); font-size: var(--fs-sm); padding: 7px 14px; border-radius: var(--r-pill); } .promo h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: var(--w-extrabold); letter-spacing: -0.02em; line-height: 1.02; margin: 20px 0 0; color: #fff; } .promo p { color: var(--fg-onDark-dim); font-size: var(--fs-body-lg); margin: 16px 0 28px; } .countdown { display: flex; gap: 10px; margin: 0 0 30px; } .cd-box { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-md); padding: 12px 8px; min-width: 64px; text-align: center; } .cd-box .v { font-size: var(--fs-h2); font-weight: var(--w-extrabold); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; } .cd-box .k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-onDark-dim); margin-top: 6px; } /* ============================================================ NEWSLETTER ============================================================ */ .news { background: var(--bg-surface); } .news-card { background: var(--mist-100); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: clamp(36px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; } .news-card::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); top: -120px; right: -60px; opacity: 0.8; } .news-card h2 { position: relative; font-size: var(--fs-h1); font-weight: var(--w-extrabold); letter-spacing: -0.018em; margin: 12px 0 0; } .news-card p { position: relative; color: var(--fg-secondary); margin: 12px auto 0; max-width: 440px; } .news-form { position: relative; display: flex; gap: 10px; max-width: 480px; margin: 28px auto 0; } .news-input { flex: 1; border: 1px solid var(--border); background: #fff; border-radius: var(--r-sm); padding: 14px 18px; font-size: var(--fs-body); font-family: inherit; color: var(--ink); transition: border-color var(--dur-base), box-shadow var(--dur-base); } .news-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .news-note { position: relative; font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 14px; } .news-ok { position: relative; color: var(--success); font-weight: var(--w-semibold); margin-top: 20px; display: none; align-items: center; justify-content: center; gap: 8px; } .news-ok svg { width: 18px; height: 18px; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--indigo-900); color: var(--fg-onDark-dim); padding-top: var(--sp-16); } .footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-8); padding-bottom: var(--sp-12); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand .word { font-weight: var(--w-extrabold); font-size: 22px; color: #fff; letter-spacing: -0.02em; } .footer-brand .word i { color: var(--accent); font-style: normal; } .footer-brand p { max-width: 280px; margin: 14px 0 20px; font-size: var(--fs-sm); line-height: 1.6; } .footer-brand img { height: 30px; margin-bottom: 16px; } .socials { display: flex; gap: 8px; } .socials a { width: 38px; height: 38px; border-radius: var(--r-sm); background: rgba(255,255,255,0.06); color: var(--fg-onDark); display: grid; place-items: center; transition: background var(--dur-base), color var(--dur-base), transform var(--dur-fast); } .socials a:hover { background: var(--accent); color: var(--indigo); transform: translateY(-2px); } .socials svg { width: 18px; height: 18px; } .fcol h4 { color: #fff; font-size: var(--fs-sm); font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 16px; } .fcol a { display: block; font-size: var(--fs-sm); padding: 6px 0; transition: color var(--dur-base), padding-left var(--dur-base); } .fcol a:hover { color: #fff; padding-left: 4px; } .footer-bot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 22px 0; flex-wrap: wrap; } .footer-bot .copy { font-size: var(--fs-xs); } .pay { display: flex; gap: 8px; align-items: center; } .pay span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-onDark-dim); } .pay .chip-pay { background: rgba(255,255,255,0.08); border-radius: 5px; padding: 5px 9px; font-size: 11px; font-weight: var(--w-bold); color: #fff; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(var(--reveal-dist)); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .reveal[data-rd="1"] { transition-delay: 70ms; } .reveal[data-rd="2"] { transition-delay: 140ms; } .reveal[data-rd="3"] { transition-delay: 210ms; } .reveal[data-rd="4"] { transition-delay: 280ms; } .reveal[data-rd="5"] { transition-delay: 350ms; } .reveal[data-rd="6"] { transition-delay: 420ms; } /* toast */ .toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; } .toast { background: var(--indigo); color: #fff; border-radius: var(--r-md); padding: 13px 18px; box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: var(--w-medium); transform: translateY(20px); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); } .toast.show { transform: translateY(0); opacity: 1; } .toast .tk { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--indigo); display: grid; place-items: center; flex: none; } .toast .tk svg { width: 14px; height: 14px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1040px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } .values-grid { grid-template-columns: repeat(2, 1fr); } .promo-inner { grid-template-columns: 1fr; } .promo-art { min-height: 320px; order: 2; } .promo-copy { padding-top: var(--sp-12); } } @media (max-width: 900px) { .nav-links { display: none; } .nav-search { display: none; } .menu-toggle { display: grid; } .nav-inner { grid-template-columns: auto 1fr auto; } .hero-inner { grid-template-columns: 1fr; text-align: left; } .hero-visual { display: none; } .cat-grid { grid-template-columns: 1fr 1fr; } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .shell { width: min(100% - 32px, var(--shell-max)); } .prod-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .cat-grid { grid-template-columns: 1fr 1fr; } .news-form { flex-direction: column; } .footer-top { grid-template-columns: 1fr; } .hero-badge.tl, .hero-badge.br { display: none; } .sec-head { flex-direction: column; align-items: flex-start; } } /* mobile drawer */ .drawer-scrim { position: fixed; inset: 0; background: rgba(11,27,59,0.5); backdrop-filter: blur(2px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity var(--dur-base); } .drawer-scrim.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 340px); background: #fff; z-index: 95; padding: 22px; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; gap: 4px; } .drawer.open { transform: translateX(0); } .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .drawer a { padding: 14px 8px; font-size: var(--fs-h4); font-weight: var(--w-semibold); color: var(--ink); border-bottom: 1px solid var(--divider); } .drawer a.sale { color: var(--saffron-700); } .drawer-search { display: grid; gap: 8px; margin-top: 16px; } .drawer-search input { border: 1px solid var(--divider); border-radius: 14px; padding: 12px 14px; font: inherit; } .drawer-search button { border: none; border-radius: 14px; padding: 12px 14px; background: var(--cta); color: #fff; font-weight: var(--w-bold); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* nav links with leading icons */ .nav-links a { display: inline-flex; align-items: center; gap: 7px; } .nav-links a svg { width: 16px; height: 16px; opacity: 0.85; } .nav-links a:hover svg { opacity: 1; } /* nav dropdowns */ .nav-item { position: relative; display: flex; } .nav-item > a .caret { width: 14px; height: 14px; opacity: 0.55; transition: transform var(--dur-base); } .nav-item:hover > a .caret { transform: rotate(180deg); } .dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 250px; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); z-index: 80; } .nav-item:hover > .dropdown, .nav-item:focus-within > .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(2px); } .dropdown .dd-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); font-weight: var(--w-medium); } .dropdown .dd-item::after { content: none; } .dropdown .dd-item:hover { background: var(--mist-100); } .dd-img { width: 42px; height: 42px; flex: none; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 1px var(--border); } .dd-tx { display: flex; flex-direction: column; line-height: 1.25; } .dd-tx b { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--ink); } .dd-tx small { font-size: var(--fs-xs); color: var(--fg-muted); } /* brand logo (square icon tile) — round the corners slightly */ .brand img { height: 34px; border-radius: 8px; } .footer-brand img { height: 38px; border-radius: 8px; margin-bottom: 16px; object-fit: contain; } /* ============================================================ YESLAMU RETHEME — Deep Teal (#00796b) + White duotone Editorial serif display · airy white surfaces (appended last so it wins the cascade) ============================================================ */ :root { /* teal ramp around #00796b (drives [data-accent="teal"] default) */ --teal: #00796b; --teal-700: #00695c; --teal-600: #00796b; --teal-500: #00897b; --teal-400: #26a69a; --teal-300: #4db6ac; --teal-100: #e0f2f1; /* dark "indigo" surfaces are re-skinned to deep teal greens */ --indigo: #0a544a; --indigo-900: #063b34; --indigo-800: #0a544a; --indigo-700: #0c5d52; --indigo-600: #0e6b5d; --indigo-500: #00796b; --indigo-400: #2a9d8f; --indigo-300: #5cbeb1; --indigo-200: #9ad9d0; --indigo-100: #cdeae5; /* interactive accent */ --accent: #00796b; --accent-strong: #00695c; --accent-soft: #e0f2f1; --accent-glow: 0 10px 30px rgba(0,121,107,0.26); /* fold the old warm accent into the teal family (duotone) */ --saffron: #00796b; --saffron-600: #00897b; --saffron-700: #00604f; --saffron-300: #4db6ac; --saffron-100: #e0f2f1; --ring: 0 0 0 3px rgba(0,121,107,0.32); /* airy near-white canvas, pure-white slabs sit on top */ --bg-base: #f5faf9; --display-font: 'Fraunces', Georgia, 'Times New Roman', serif; } /* ---- Editorial serif on display headings ---- */ .hero h1, .sec-head h2, .promo h2, .news-card h2 { font-family: var(--display-font); font-weight: 600; letter-spacing: -0.01em; } .hero h1 { font-weight: 600; } /* ---- Dark sections: lift the accent to a mint tint so it reads on teal ---- */ .announce, .hero, .promo, .footer { --accent: #5fd3c2; --accent-strong: #9fe7dc; } /* ---- Richer dark gradients (same hue, just depth) ---- */ .hero { background: linear-gradient(165deg, #0a564b 0%, #063b34 100%); } .hero::before { background: radial-gradient(1100px 600px at 78% -10%, rgba(95,211,194,0.18), transparent 60%), radial-gradient(800px 500px at 8% 110%, rgba(0,121,107,0.50), transparent 55%); } .promo { background: linear-gradient(135deg, #0a544a 0%, #063b34 100%); } /* ---- Buttons re-mapped to the duotone ---- */ /* primary CTA on dark teal sections = solid white with teal text */ .btn-accent { background: #fff; color: #00695c; box-shadow: 0 10px 30px rgba(0,0,0,0.18); } .btn-accent:hover { background: #eafaf7; color: #00604f; transform: translateY(-2px); } /* primary CTA on light sections = solid teal with white text */ .btn-indigo { background: #00796b; color: #fff; } .btn-indigo:hover { background: #00695c; } /* ---- Component contrast fixes after recolor ---- */ .cart-count { color: #fff; } .badge.new { background: #00796b; color: #fff; } .badge.sale { background: #004d40; color: #fff; } .card-price .now.sale { color: var(--accent-strong); } .promo .kicker { background: #fff; color: #00604f; } .rating svg { color: #00796b; fill: #00796b; } .chip.active { background: #00796b; border-color: #00796b; } /* category scrims → teal-green instead of navy */ .cat::after { background: linear-gradient(to top, rgba(6,59,52,0.80) 0%, rgba(6,59,52,0.12) 48%, transparent 72%); } .cat:hover::after { background: linear-gradient(to top, rgba(6,59,52,0.88) 0%, rgba(6,59,52,0.30) 55%, rgba(6,59,52,0.05) 100%); } /* newsletter card: faint teal tint instead of cool grey */ .news-card { background: #eef7f5; border-color: #d6ece8; } /* ============================================================ FILTER ROW + RESULT COUNT ============================================================ */ .filter-row { justify-content: space-between; align-items: center; } .filter-chips { display: flex; gap: 8px; flex-wrap: wrap; } .result-count { font-size: var(--fs-sm); color: var(--fg-muted); font-weight: var(--w-medium); white-space: nowrap; } /* ============================================================ SOCIAL PROOF / REVIEWS ============================================================ */ .reviews { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .reviews-score { text-align: right; } .reviews-score .rs-stars { display: inline-flex; gap: 2px; color: #00796b; } .reviews-score .rs-stars svg { width: 18px; height: 18px; fill: #00796b; } .reviews-score .rs-meta { font-size: var(--fs-sm); color: var(--fg-secondary); margin-top: 4px; } .reviews-score .rs-meta b { color: var(--ink); font-weight: var(--w-extrabold); } .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .review { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); padding: 28px; box-shadow: var(--shadow-xs); margin: 0; display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); } .review:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .review .stars { display: flex; gap: 2px; color: #00796b; margin-bottom: 14px; } .review .stars svg { width: 16px; height: 16px; fill: #00796b; } .review blockquote { margin: 0 0 22px; font-family: var(--display-font); font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink); flex: 1; } .review .who { display: flex; align-items: center; gap: 12px; } .review .ava { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font-weight: var(--w-bold); font-size: var(--fs-sm); letter-spacing: 0.02em; } .review .who > span:last-child { display: flex; flex-direction: column; } .review .nm { font-weight: var(--w-bold); color: var(--ink); font-size: var(--fs-body); } .review .rl { font-size: var(--fs-xs); color: var(--fg-muted); } @media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } .reviews-score { text-align: left; } } /* ============================================================ ACCESSIBILITY + TOUCH POLISH ============================================================ */ a:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible, .swatch:focus-visible, .wish:focus-visible, .quick-add:focus-visible, .news-input:focus-visible { outline: none; box-shadow: var(--ring); } /* product card image: slow zoom-in on hover (host is scaled; .card-media clips) */ .card-media { overflow: hidden; } .card-media image-slot { transform-origin: center; transition: transform 700ms var(--ease-out); } .card:hover .card-media image-slot { transform: scale(1.08); } html[data-motion="off"] .card:hover .card-media image-slot { transform: none; } /* product + category actions are hover-only on desktop — reveal them on touch */ @media (hover: none) { .card .wish, .card .quick-add { opacity: 1; transform: none; } .cat .cat-go { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .card:hover .card-media image-slot { transform: none; } } /* ============================================================ HERO — full-bleed image with overlaid content ============================================================ */ .hero { position: relative; min-height: clamp(520px, 78vh, 780px); display: flex; align-items: center; overflow: hidden; background: #15110d; --accent: #c9923e; --accent-strong: #e8c882; } .hero::before { content: none; } /* full-bleed background image — subtle ken-burns on active slide */ .hero-bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 0; transform-origin: center; } .hero-slide.is-active .hero-bg { animation: heroZoom 24s ease-in-out infinite alternate; } @keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } } html[data-motion="off"] .hero-bg { animation: none; transform: none; } .hero-slider { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1000ms var(--ease-out); } .hero-slide.is-active { opacity: 1; } .hero-copy-stage { position: relative; display: grid; grid-template-rows: 1fr auto; grid-template-columns: 1fr; max-width: 680px; justify-self: start; align-self: center; gap: 22px; } .hero-copy-panel { grid-row: 1; grid-column: 1; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), visibility 700ms; } .hero-copy-panel.is-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .hero-controls { position: relative; z-index: 2; grid-row: 2; grid-column: 1; display: flex; align-items: center; gap: 12px; margin-top: 4px; } .hero-dots { display: flex; gap: 8px; } .hero-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: var(--r-pill); background: rgba(255,247,237,0.38); cursor: pointer; transition: width var(--dur-base) var(--ease-out), background var(--dur-base); } .hero-dot:hover { background: rgba(255,247,237,0.72); } .hero-dot.is-active { width: 26px; background: #d8a552; } .hero-nav { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,247,237,0.24); border-radius: var(--r-pill); background: rgba(21,17,13,0.45); color: #fff7ed; cursor: pointer; backdrop-filter: blur(8px); transition: background var(--dur-base), border-color var(--dur-base); } .hero-nav:hover { background: rgba(21,17,13,0.72); border-color: rgba(216,165,82,0.45); } .hero-nav svg { width: 16px; height: 16px; } @media (max-width: 760px) { .hero-nav { display: none; } } /* warm legibility overlay — lets photography breathe */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(21,17,13,0.82) 0%, rgba(21,17,13,0.52) 44%, rgba(21,17,13,0.14) 72%, rgba(21,17,13,0.02) 100%), linear-gradient(0deg, rgba(21,17,13,0.42) 0%, transparent 42%); } /* overlaid content */ .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 48px); padding-block: clamp(64px, 9vh, 112px); } .hero .eyebrow { color: #9fe7dc; } /* headline with a colour-sweep shimmer travelling across every letter */ .hero h1 { margin-top: 18px; color: #fff; background: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #5fd3c2 50%, #ffffff 62%, #ffffff 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: heroSheen 6s linear infinite; } /* the accent span keeps its own clip so it stays visible */ .hero h1 .hl { background: linear-gradient(110deg, #5fd3c2 0%, #5fd3c2 38%, #ffffff 50%, #5fd3c2 62%, #5fd3c2 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: heroSheen 6s linear infinite; } @keyframes heroSheen { from { background-position: 220% center; } to { background-position: -120% center; } } .hero p.lead { color: rgba(255,255,255,0.88); margin: 22px 0 34px; max-width: 540px; } html[data-motion="off"] .hero h1 { background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; } html[data-motion="off"] .hero h1 .hl { -webkit-text-fill-color: #5fd3c2; color: #5fd3c2; } .hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* centered variant */ html[data-hero="centered"] .hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } html[data-hero="centered"] .hero-copy { max-width: 760px; margin-inline: auto; } html[data-hero="centered"] .hero p.lead { margin-inline: auto; } html[data-hero="centered"] .hero-cta { justify-content: center; } @media (max-width: 700px) { .hero { min-height: clamp(480px, 72vh, 680px); } .hero-overlay { background: linear-gradient(0deg, rgba(21,17,13,0.88) 0%, rgba(21,17,13,0.55) 52%, rgba(21,17,13,0.32) 100%); } } @media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; transform: none; } .hero h1 { background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; } .hero h1 .hl { -webkit-text-fill-color: #5fd3c2; color: #5fd3c2; } } /* ============================================================ PROMO — full-bleed campaign banner ============================================================ */ .promo { position: relative; display: flex; align-items: center; min-height: clamp(520px, 72vh, 720px); overflow: hidden; background: #063b34; } /* cross-fading campaign slider */ .promo-slider { position: absolute; inset: 0; z-index: 0; } .promo-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1100ms var(--ease-out); } .promo-slide.is-active { opacity: 1; } /* full-bleed campaign image with a slow zoom (active slide) */ .promo-bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform-origin: center; } .promo-slide.is-active .promo-bg { animation: heroZoom 26s ease-in-out infinite alternate; } html[data-motion="off"] .promo-bg { animation: none; transform: none; } /* slider indicators */ .promo-dots { position: absolute; z-index: 4; left: 50%; bottom: clamp(22px, 4vw, 38px); transform: translateX(-50%); display: flex; gap: 9px; } .promo-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: var(--r-pill); background: rgba(255,255,255,0.45); cursor: pointer; transition: width var(--dur-base) var(--ease-out), background var(--dur-base); } .promo-dot:hover { background: rgba(255,255,255,0.75); } .promo-dot.is-active { width: 28px; background: #fff; } /* immersive darkening so the offer reads on any photo */ .promo-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 120% at 50% 28%, rgba(4,42,37,0.26), rgba(4,42,37,0.74) 66%, rgba(4,42,37,0.92) 100%), linear-gradient(0deg, rgba(4,42,37,0.78), transparent 58%); } /* thin poster frame for an editorial campaign feel */ .promo::after { content: ""; position: absolute; inset: clamp(14px, 2.2vw, 28px); border: 1px solid rgba(255,255,255,0.28); border-radius: var(--r-lg); z-index: 2; pointer-events: none; } /* centred, overlaid content */ .promo-inner { position: relative; z-index: 3; display: block; text-align: center; padding-block: clamp(76px, 11vh, 124px); } .promo-copy { max-width: 680px; margin-inline: auto; padding: 0; } .promo h2 { font-family: var(--display-font); color: #fff; margin-top: 22px; } .promo p { color: rgba(255,255,255,0.86); margin: 16px auto 32px; max-width: 540px; } .promo .kicker { background: #fff; color: #00604f; box-shadow: 0 8px 24px rgba(0,0,0,0.22); } .countdown { justify-content: center; } .promo .cd-box { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.30); backdrop-filter: blur(8px); } @media (max-width: 700px) { .promo { min-height: 78vh; } .promo::after { inset: 12px; } .countdown { gap: 8px; } .promo .cd-box { min-width: 58px; padding: 11px 6px; } } @media (prefers-reduced-motion: reduce) { .promo-bg { animation: none; transform: none; } } /* ============================================================ NEW ARRIVALS — horizontal scroller ============================================================ */ .scroll-nav { display: flex; gap: 8px; } /* Its own display rule beats the browser's [hidden] { display: none }, so the product page's "nothing to scroll" state needs this to actually hide. */ .scroll-nav[hidden] { display: none; } .scroll-btn { width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--border); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), color var(--dur-base); } .scroll-btn:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); } .scroll-btn svg { width: 18px; height: 18px; } /* The product page disables a rail arrow once that end is reached; the homepage rails never set it, so this is inert there. */ .scroll-btn:disabled { opacity: 0.35; cursor: default; transform: none; } .scroll-btn:disabled:hover { border-color: var(--border); color: inherit; transform: none; } .scroller { display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 10px; scrollbar-width: none; } .scroller::-webkit-scrollbar { display: none; } .scroller .card { flex: 0 0 auto; width: 264px; scroll-snap-align: start; } /* darker teal-tint band for New Arrivals */ #new { background: #e4f2ee; } /* ============================================================ FLASH DEALS ============================================================ */ .deals { background: #e4f2ee; } .deals-timer { display: flex; align-items: center; gap: 10px; } .dt-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--fg-secondary); font-weight: var(--w-semibold); } .dt-label svg { width: 16px; height: 16px; color: #00796b; } .dt-clock { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; font-weight: var(--w-extrabold); font-size: var(--fs-h4); color: #fff; background: #00796b; padding: 8px 14px; border-radius: var(--r-sm); } .deal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .deal-card { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); } .deal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .deal-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--mist-100); } .deal-media-link { position: absolute; inset: 0; z-index: 2; } .deal-media image-slot { width: 100%; height: 100%; transform-origin: center; transition: transform 700ms var(--ease-out); } .deal-card:hover .deal-media image-slot { transform: scale(1.06); } html[data-motion="off"] .deal-card:hover .deal-media image-slot { transform: none; } .deal-off { position: absolute; top: 10px; left: 10px; z-index: 2; background: #00796b; color: #fff; font-weight: var(--w-extrabold); font-size: 12px; padding: 5px 10px; border-radius: var(--r-pill); } .deal-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .deal-name { font-weight: var(--w-bold); color: var(--ink); font-size: var(--fs-body); text-decoration: none; } .deal-price { display: flex; align-items: baseline; gap: 8px; } .deal-price .now { font-weight: var(--w-extrabold); color: var(--accent-strong); font-size: var(--fs-h4); } .deal-price .was { color: var(--slate-400); text-decoration: line-through; font-size: var(--fs-sm); } .deal-stock { margin-top: auto; } .deal-stock .bar { height: 7px; border-radius: var(--r-pill); background: var(--mist-200); overflow: hidden; } .deal-stock .bar span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--accent-strong)); } .deal-sold { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 6px; } .deal-btn { width: 100%; justify-content: center; margin-top: 2px; } @media (max-width: 1040px) { .deal-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .deal-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .scroller .card { width: 220px; } } /* ============================================================ CUSTOMER GALLERY (UGC) — "Styled by you" ============================================================ */ .ugc { background: #e4f2ee; } .ugc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .ugc-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-sm); } .ugc-card image-slot { width: 100%; height: 100%; transform-origin: center; transition: transform 700ms var(--ease-out); } .ugc-card:hover image-slot { transform: scale(1.06); } html[data-motion="off"] .ugc-card:hover image-slot { transform: none; } .ugc-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(6,59,52,0.72) 0%, rgba(6,59,52,0.12) 38%, transparent 60%); } /* customer handle chip */ .ugc-who { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255,255,255,0.92); color: var(--ink); font-weight: var(--w-bold); font-size: var(--fs-xs); padding: 5px 11px; border-radius: var(--r-pill); backdrop-filter: blur(4px); } /* shoppable product tag */ .ugc-tag { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.96); color: var(--ink); padding: 8px 12px; border-radius: var(--r-md); box-shadow: var(--shadow-md); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base); } .ugc-tag:hover { transform: translateY(-2px); background: #fff; } .ugc-tag .ic { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); background: var(--accent-soft); color: #00796b; display: grid; place-items: center; } .ugc-tag .ic svg { width: 16px; height: 16px; } .ugc-tag .tx { display: flex; flex-direction: column; min-width: 0; } .ugc-tag b { font-size: var(--fs-sm); font-weight: var(--w-bold); color: var(--ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ugc-tag .pr { font-size: var(--fs-xs); color: var(--accent-strong); font-weight: var(--w-semibold); } @media (max-width: 900px) { .ugc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ugc-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } } /* ============================================================ SOCIAL MEDIA SECTION ============================================================ */ .social { background: var(--bg-surface); border-top: 1px solid var(--border); } .social-head { text-align: center; max-width: 560px; margin: 0 auto var(--sp-8); } .social-head h2 { font-family: var(--display-font); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; color: var(--ink); margin: 12px 0 0; } .social-head p { color: var(--fg-secondary); margin: 12px auto 0; } .social-head p b { color: var(--accent-strong); font-weight: var(--w-bold); } /* Instagram-style feed grid */ .social-feed { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .sfeed-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-xs); display: block; } .sfeed-item image-slot { width: 100%; height: 100%; transform-origin: center; transition: transform 700ms var(--ease-out); } .sfeed-item:hover image-slot { transform: scale(1.08); } .sfeed-ov { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; background: rgba(0,77,64,0); opacity: 0; transition: opacity var(--dur-base), background var(--dur-base); } .sfeed-item:hover .sfeed-ov { opacity: 1; background: rgba(0,77,64,0.55); } .sfeed-ov svg { width: 28px; height: 28px; } html[data-motion="off"] .sfeed-item:hover image-slot { transform: none; } /* platform buttons */ .social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-8); } .sbtn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid var(--border); background: #fff; color: var(--ink); font-weight: var(--w-semibold); font-size: var(--fs-sm); box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); } .sbtn svg { width: 18px; height: 18px; } .sbtn:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); } @media (max-width: 900px) { .social-feed { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .social-feed { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ YESLAMU BRAND PALETTE v2 Deep Teal (anchor) · CTA Green (actions) · Promo Orange (sales) Charcoal text · Soft Gray / Mint / Cream surfaces · Poppins ============================================================ */ :root { /* anchor — Deep Teal */ --teal: #00796b; --teal-700: #00695c; --teal-600: #00796b; --accent: #00796b; --accent-strong: #00695c; --accent-soft: #ddf3ea; --accent-glow: 0 10px 30px rgba(0,121,107,0.22); /* action + promo */ --cta: #00c853; --cta-strong: #00b34a; --promo: #ff6b00; --promo-strong: #e85f00; /* supporting surfaces */ --mint: #ddf3ea; --cream: #f7f1e8; /* text — Charcoal */ --ink: #212121; --ink-900: #212121; --fg-primary: #212121; /* neutral page background — Soft Gray */ --bg-base: #f4f4f4; /* success uses CTA Green */ --success: #00c853; --success-bg: #e3f9ec; /* focus ring stays brand teal */ --ring: 0 0 0 3px rgba(0,121,107,0.32); /* typography — Poppins for headings/display copy, Inter for body & UI, Cairo for Arabic (both roles — see html[dir="rtl"] override below) */ --font-heading: 'Poppins', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --display-font: var(--font-heading); /* type scale — 16px body for comfortable reading, fluid headings that stay readable on small screens without ever feeling oversized */ --fs-display: clamp(36px, 30px + 1.8vw, 52px); --fs-h1: clamp(28px, 25px + 0.9vw, 40px); --fs-h2: clamp(24px, 22px + 0.6vw, 30px); --fs-h3: clamp(20px, 19px + 0.4vw, 24px); --fs-h4: clamp(18px, 17px + 0.24vw, 20px); --fs-body-lg: 17px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-eyebrow: 12px; } body { font-family: var(--font-sans); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } input, textarea, select, button { font-family: inherit; } html[dir="rtl"] { --font-heading: 'Cairo', 'Segoe UI', system-ui, sans-serif; --font-sans: 'Cairo', 'Segoe UI', system-ui, sans-serif; } /* dark sections keep a mint-tinted accent so it reads on teal */ .announce, .hero, .promo, .footer { --accent: #5fd3c2; --accent-strong: #9fe7dc; } /* ---- CTA GREEN — positive actions only ---- */ .btn-accent { background: var(--cta); color: #fff; box-shadow: 0 10px 28px rgba(0,200,83,0.28); } .btn-accent:hover { background: var(--cta-strong); color: #fff; } .btn-indigo { background: var(--cta); color: #fff; } .btn-indigo:hover { background: var(--cta-strong); } .quick-add { background: var(--cta); color: #fff; } .quick-add:hover { background: var(--cta-strong); color: #fff; } /* ---- PROMO ORANGE — sales & urgency only (used sparingly) ---- */ .badge.sale { background: var(--promo); color: #fff; } .card-price .now.sale { color: var(--promo); } .nav-links a.sale, .drawer a.sale { color: var(--promo-strong); } .promo .kicker { background: var(--promo); color: #fff; } .deal-off { background: var(--promo); color: #fff; } .deal-price .now { color: var(--promo); } .dt-clock { background: var(--promo); } .dt-label svg { color: var(--promo); } .deals .eyebrow { color: var(--promo-strong); } .deals .eyebrow::before { background: var(--promo); } /* ---- SUPPORTING SURFACES — Mint (fresh/trust) · Cream (editorial) ---- */ .values { background: var(--mint); } #new { background: var(--mint); } .deals { background: var(--mint); } .ugc { background: var(--cream); } .reviews { background: #fff; } #featured { background: #fff; } .news-card { background: var(--mint); border-color: #c7e8db; } /* ============================================================ AUTH PAGES Front-end only for now; scoped so storefront sections stay unchanged. ============================================================ */ .auth-body { min-height: 100vh; background: radial-gradient(circle at 16% 18%, rgba(0,121,107,0.15), transparent 28%), radial-gradient(circle at 90% 12%, rgba(255,107,0,0.12), transparent 24%), linear-gradient(135deg, #f4f4f4 0%, #eef7f5 55%, #f7f1e8 100%); } .auth-page { min-height: 100vh; display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); } .auth-shell { width: min(100%, 1120px); } .auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--indigo); font-weight: var(--w-extrabold); font-size: 22px; letter-spacing: -0.02em; } .auth-brand img { width: 38px; height: 38px; border-radius: 10px; } .auth-brand i { color: var(--accent-strong); font-style: normal; } .auth-card { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.78fr); min-height: 680px; overflow: hidden; background: #fff; border: 1px solid rgba(0,121,107,0.14); border-radius: var(--r-2xl); box-shadow: 0 28px 80px rgba(6,59,52,0.16); } .auth-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px, 5vw, 64px); background: linear-gradient(120deg, rgba(4,42,37,0.92), rgba(4,42,37,0.56)), url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=1400&h=1400&fit=crop&q=80") center/cover; color: #fff; } .auth-visual::after { content: ""; position: absolute; inset: clamp(14px, 2vw, 24px); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-xl); pointer-events: none; } .auth-visual-copy, .auth-proof-grid { position: relative; z-index: 1; } .auth-visual .eyebrow { color: #9fe7dc; } .auth-visual h1 { max-width: 560px; margin: 18px 0 0; color: #fff; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; font-weight: var(--w-extrabold); letter-spacing: -0.025em; } .auth-visual p { max-width: 520px; margin: 20px 0 0; color: rgba(255,255,255,0.84); font-size: var(--fs-body-lg); line-height: 1.7; } .auth-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .auth-proof { padding: 18px; border: 1px solid rgba(255,255,255,0.20); border-radius: var(--r-lg); background: rgba(255,255,255,0.10); backdrop-filter: blur(8px); } .auth-proof b { display: block; color: #fff; font-size: var(--fs-h3); line-height: 1; } .auth-proof span { display: block; margin-top: 6px; color: rgba(255,255,255,0.72); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.10em; } .auth-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 56px); } .auth-panel-head { margin-bottom: 24px; } .auth-kicker { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-xs); font-weight: var(--w-bold); letter-spacing: 0.10em; text-transform: uppercase; } .auth-panel h2 { margin: 14px 0 0; color: var(--ink); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--w-extrabold); letter-spacing: var(--tr-h1); } .auth-panel p { margin: 10px 0 0; color: var(--fg-secondary); } .auth-tabs, .account-choice { display: grid; gap: 10px; margin-bottom: 24px; } .auth-tabs { grid-template-columns: repeat(2, 1fr); } .auth-tab, .choice-card { border: 1px solid var(--border); background: #fff; color: var(--slate-700); border-radius: var(--r-md); transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base), transform var(--dur-base); } .auth-tab { min-height: 52px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-weight: var(--w-semibold); } .auth-tab svg, .choice-icon svg, .field-control svg, .auth-note svg { width: 18px; height: 18px; } .auth-tab.is-active, .auth-tab:hover, .choice-card:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .account-choice { grid-template-columns: 1fr 1fr; } .choice-card { position: relative; display: flex; /* Centred against the 40px icon — flex-start left the label sitting ~8px above the icon's middle, which read as misaligned. */ align-items: center; gap: 12px; padding: 16px; cursor: pointer; } .choice-card input { position: absolute; opacity: 0; pointer-events: none; } .choice-card.is-active { border-width: 2px; border-color: var(--accent-strong); background: var(--accent-soft); color: var(--accent-strong); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm); } .choice-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: #fff; color: var(--accent-strong); box-shadow: var(--shadow-xs); transition: background var(--dur-base), color var(--dur-base); } .choice-card.is-active .choice-icon { background: var(--accent-strong); color: #fff; } .choice-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-strong); color: #fff; display: none; align-items: center; justify-content: center; } .choice-check svg { width: 12px; height: 12px; } .choice-card.is-active .choice-check { display: flex; } .choice-card b { display: block; color: var(--ink); font-size: var(--fs-body); } .auth-form { display: grid; gap: 16px; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field label, .field-label-row label { display: block; margin-bottom: 8px; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--w-semibold); } .field label span { color: var(--fg-muted); font-weight: var(--w-regular); } .field-label-row { display: flex; justify-content: space-between; gap: 12px; } .field-label-row a { color: var(--accent-strong); font-size: var(--fs-sm); font-weight: var(--w-semibold); } .field-control { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; transition: border-color var(--dur-base), box-shadow var(--dur-base); } .field-control:focus-within { border-color: var(--accent); box-shadow: var(--ring); } .field-control svg { color: var(--slate-500); flex: none; } .field-control input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; } .field-control input::placeholder { color: var(--slate-400); } .field-control--password { padding-right: 6px; } .password-toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--slate-500); cursor: pointer; flex: none; } .password-toggle:hover { background: #f5fbf9; color: var(--accent-strong); } .password-toggle svg { width: 18px; height: 18px; } .check-row { display: flex; align-items: flex-start; gap: 10px; color: var(--fg-secondary); font-size: var(--fs-sm); line-height: 1.5; } .check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); outline: none; } .auth-submit { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 180px; margin: 4px auto 0; justify-self: center; } .auth-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 13px 14px; border-radius: var(--r-md); background: #fff7ed; color: #9a4c00; font-size: var(--fs-sm); line-height: 1.5; } .auth-note svg { flex: none; margin-top: 1px; } .auth-switch { margin-top: 22px !important; text-align: center; color: var(--fg-secondary); } .auth-switch a { color: var(--accent-strong); font-weight: var(--w-bold); } .auth-helper-copy { margin: 0 0 18px; color: var(--fg-secondary); font-size: var(--fs-sm); line-height: 1.6; } .field-hint { display: block; margin-top: 6px; color: var(--fg-muted); font-size: var(--fs-xs); line-height: 1.5; } .auth-alert { padding: 12px 14px; border: 1px solid rgba(229, 72, 77, 0.25); border-radius: 14px; background: rgba(229, 72, 77, 0.08); color: var(--danger); font-size: var(--fs-sm); font-weight: var(--w-semibold); } .auth-alert-info { border-color: #dcece7; background: #f5fbf9; color: var(--teal); } @media (max-width: 980px) { .auth-card { grid-template-columns: 1fr; } .auth-visual { min-height: 380px; } } @media (max-width: 620px) { .auth-page { padding: 18px; } .auth-card { border-radius: var(--r-xl); } .auth-visual, .auth-panel { padding: 28px; } .auth-tabs, .account-choice, .field-grid, .auth-proof-grid { grid-template-columns: 1fr; } } /* ============================================================ ADMIN PANEL Separate premium admin surface, front-end only until auth is wired. ============================================================ */ .admin-body, .admin-login-body { min-height: 100vh; background: #071b18; color: #eaf7f4; } .admin-shell { min-height: 100vh; display: grid; grid-template-columns: 290px minmax(0, 1fr); background: radial-gradient(circle at 0% 0%, rgba(0,200,83,0.16), transparent 28%), linear-gradient(135deg, #071b18 0%, #092e29 48%, #f4f4f4 48%, #f7f9f8 100%); } .admin-sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; display: flex; flex-direction: column; gap: 8px; background: rgba(4,42,37,0.92); border-right: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(18px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; } .admin-sidebar::-webkit-scrollbar { width: 4px; } .admin-sidebar::-webkit-scrollbar-track { background: transparent; } .admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; } .admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); } .admin-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: var(--w-extrabold); font-size: 22px; letter-spacing: -0.02em; flex-shrink: 0; } .admin-brand img { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; } .admin-brand i { color: #5fd3c2; font-style: normal; } .admin-sidebar-nav { flex: 1 0 auto; margin-top: 8px; } .admin-nav-section + .admin-nav-section { margin-top: 18px; } .admin-side-label { margin: 0 0 8px; padding: 0 12px; color: rgba(255,255,255,0.46); font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase; } .admin-nav { display: grid; gap: 4px; } .admin-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); color: rgba(255,255,255,0.76); font-weight: var(--w-semibold); font-size: 14px; line-height: 1.2; transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base); } .admin-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .admin-nav-label { flex: 1; min-width: 0; } .admin-nav-badge { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: #fff; color: #064e3b; font-size: 11px; font-weight: var(--w-bold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-nav a svg, .admin-top-actions button svg, .admin-action svg { width: 18px; height: 18px; } .admin-nav a:hover { background: rgba(255,255,255,0.12); color: #fff; transform: translateX(2px); } .admin-nav a.is-active { background: rgba(255,255,255,0.12); color: #fff; font-weight: var(--w-semibold); box-shadow: inset 3px 0 0 #00c853; transform: none; } .admin-side-card { margin-top: auto; padding: 18px; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-lg); background: rgba(255,255,255,0.08); flex-shrink: 0; } .admin-side-card span { color: #9fe7dc; font-size: var(--fs-xs); font-weight: var(--w-bold); letter-spacing: 0.10em; text-transform: uppercase; } .admin-side-card b { display: block; margin-top: 8px; color: #fff; } .admin-side-card p { margin: 8px 0 0; color: rgba(255,255,255,0.62); font-size: var(--fs-xs); line-height: 1.55; } .admin-side-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.14); width: 100%; color: #9fe7dc; font-size: var(--fs-xs); font-weight: var(--w-bold); text-decoration: none; transition: color var(--dur-fast); } .admin-side-card-link:hover { color: #fff; } .admin-side-card-link svg { width: 14px; height: 14px; } .admin-main { min-width: 0; background: #f7f9f8; color: var(--ink); border-top-left-radius: 30px; border-bottom-left-radius: 30px; margin: 14px 14px 14px 0; overflow: hidden; box-shadow: -18px 0 60px rgba(0,0,0,0.18); } .admin-topbar { position: sticky; top: 0; z-index: 20; height: 78px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 18px 28px; background: rgba(247,249,248,0.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(6,59,52,0.08); } .admin-top-actions { display: flex; gap: 8px; } .admin-logout-form { margin: 0; } .admin-top-actions button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #dbe9e5; border-radius: var(--r-pill); background: #fff; color: var(--ink); box-shadow: var(--shadow-xs); } .admin-content { padding: clamp(24px, 3vw, 38px); } .admin-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; } .admin-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-strong); font-size: var(--fs-xs); font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase; } .admin-eyebrow svg { width: 12px; height: 12px; flex: none; } .admin-page-head h1 { margin: 10px 0 0; color: var(--ink); font-size: clamp(32px, 4vw, 48px); line-height: 1.04; letter-spacing: -0.025em; } .admin-page-head p { max-width: 680px; margin: 10px 0 0; color: var(--fg-secondary); font-size: var(--fs-body-lg); } .admin-page-actions { flex: none; } .admin-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: var(--r-pill); background: var(--cta); color: #fff; padding: 13px 18px; font-weight: var(--w-bold); box-shadow: 0 12px 26px rgba(0,200,83,0.24); } .admin-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; } .admin-stat-card, .admin-panel-card, .admin-empty-state { border: 1px solid #dbe9e5; background: #fff; border-radius: var(--r-xl); box-shadow: 0 16px 44px rgba(6,59,52,0.07); } .admin-stat-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px; overflow: hidden; position: relative; } .admin-stat-card::before { content: ""; position: absolute; inset: auto -40px -60px auto; width: 140px; height: 140px; border-radius: 50%; background: rgba(0,121,107,0.08); } .admin-stat-card span, .admin-stat-card small { display: block; } .admin-stat-card span { color: var(--fg-muted); font-size: var(--fs-sm); font-weight: var(--w-semibold); } .admin-stat-card strong { display: block; margin-top: 10px; color: var(--ink); font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; } .admin-stat-card small { margin-top: 8px; color: var(--accent-strong); font-weight: var(--w-bold); } .admin-stat-card > svg { position: relative; z-index: 1; width: 42px; height: 42px; padding: 10px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-strong); } .admin-stat-card.tone-warn > svg, .admin-stat-card.tone-warn small { color: #c55a00; } .admin-stat-card.tone-warn > svg { background: #fff1dc; } .admin-stat-card.tone-risk > svg, .admin-stat-card.tone-risk small { color: #c93434; } .admin-stat-card.tone-risk > svg { background: #ffe8e8; } .admin-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-bottom: 18px; } .admin-span-7 { grid-column: span 7; } .admin-span-5 { grid-column: span 5; } .admin-panel-card { padding: 24px; } .admin-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 20px; } .admin-card-head h2 { margin: 7px 0 0; color: var(--ink); font-size: var(--fs-h3); letter-spacing: -0.015em; } .admin-card-head a { color: var(--accent-strong); font-weight: var(--w-bold); font-size: var(--fs-sm); } .admin-task-list, .admin-vendor-list { display: grid; gap: 12px; } .admin-task { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 15px; border: 1px solid #e3efeb; border-radius: var(--r-lg); background: #fbfefd; } .admin-task-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 6px rgba(0,200,83,0.12); } .admin-task.tone-warn .admin-task-dot { background: #ff9f2e; box-shadow: 0 0 0 6px rgba(255,159,46,0.15); } .admin-task.tone-risk .admin-task-dot { background: #e5484d; box-shadow: 0 0 0 6px rgba(229,72,77,0.13); } .admin-task b, .admin-task small, .admin-vendor-row b, .admin-vendor-row small { display: block; } .admin-task b { color: var(--ink); } .admin-task small, .admin-vendor-row small { margin-top: 4px; color: var(--fg-muted); } .admin-task a { color: var(--accent-strong); font-weight: var(--w-bold); font-size: var(--fs-sm); } .admin-vendor-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #edf3f1; } .admin-vendor-row:last-child { border-bottom: 0; } .admin-vendor-row span { color: var(--ink); font-weight: var(--w-bold); } .admin-vendor-row em { min-width: 52px; padding: 5px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-style: normal; font-size: var(--fs-xs); font-weight: var(--w-bold); text-align: center; } .admin-table-wrap { width: 100%; overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; min-width: 680px; } .admin-table th, .admin-table td { padding: 15px 14px; text-align: left; border-bottom: 1px solid #edf3f1; } .admin-table th { color: var(--fg-muted); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; } .admin-table td { color: var(--fg-secondary); } .admin-table td b { color: var(--ink); } .admin-badge { display: inline-flex; align-items: center; border-radius: var(--r-pill); padding: 6px 10px; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-xs); font-weight: var(--w-bold); } .admin-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; } .admin-filter-pills button { border: 1px solid #dbe9e5; background: #fff; color: var(--fg-secondary); border-radius: var(--r-pill); padding: 8px 12px; font-weight: var(--w-semibold); font-size: var(--fs-sm); } .admin-filter-pills button.is-active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } .admin-empty-state { display: flex; gap: 18px; align-items: flex-start; margin-top: 18px; padding: 24px; background: linear-gradient(135deg, #fff, #eef7f5); } .admin-empty-state svg { width: 42px; height: 42px; padding: 10px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-strong); flex: none; } .admin-empty-state h2 { margin: 0; color: var(--ink); } .admin-empty-state p { margin: 8px 0 0; color: var(--fg-secondary); max-width: 760px; } /* Admin panel professional density pass */ .admin-shell { grid-template-columns: 252px minmax(0, 1fr); background: radial-gradient(circle at 0% 0%, rgba(0,200,83,0.11), transparent 24%), linear-gradient(135deg, #061f1b 0%, #092b26 44%, #f3f7f6 44%, #f7f9f8 100%); } .admin-sidebar { padding: 20px 16px; } .admin-brand { font-size: 18px; } .admin-brand img { width: 32px; height: 32px; } .admin-side-label { margin: 0 0 7px; padding: 0 10px; font-size: 10px; } .admin-nav-section + .admin-nav-section { margin-top: 16px; } .admin-nav { gap: 2px; } .admin-nav a { gap: 10px; padding: 10px 11px; border-radius: 8px; font-size: 13px; } .admin-nav a svg, .admin-top-actions button svg, .admin-action svg { width: 16px; height: 16px; } .admin-nav-badge { min-width: 22px; height: 22px; font-size: 10px; } .admin-side-card { padding: 14px; border-radius: 14px; } .admin-main { margin: 10px 10px 10px 0; border-top-left-radius: 22px; border-bottom-left-radius: 22px; box-shadow: -14px 0 46px rgba(0,0,0,0.14); } .admin-topbar { height: 62px; padding: 12px 22px; } .admin-top-actions button { width: 38px; height: 38px; } .admin-content { padding: clamp(18px, 2.2vw, 28px); } .admin-page-head { margin-bottom: 20px; } .admin-page-head h1 { margin-top: 7px; font-size: clamp(26px, 3vw, 36px); } .admin-page-head p { max-width: 620px; font-size: 14px; line-height: 1.65; } .admin-action { padding: 10px 14px; font-size: 13px; box-shadow: 0 10px 18px rgba(0,200,83,0.17); } .admin-action-secondary { border: 1px solid #d4e7e2; background: #fff; color: var(--accent-strong); box-shadow: var(--shadow-xs); } .admin-stat-grid { gap: 12px; margin-bottom: 14px; } .admin-stat-card, .admin-panel-card, .admin-empty-state { border-color: #d9e9e5; border-radius: 18px; box-shadow: 0 12px 32px rgba(6,59,52,0.055); } .admin-stat-card { min-height: 122px; padding: 16px; } .admin-stat-card strong { margin-top: 7px; font-size: clamp(22px, 2.4vw, 28px); } .admin-stat-card small, .admin-stat-card span { font-size: 12px; } .admin-stat-card > svg { width: 34px; height: 34px; padding: 8px; border-radius: 12px; } .admin-grid { gap: 14px; margin-bottom: 14px; } .admin-panel-card { padding: 18px; } .admin-card-head { align-items: center; margin-bottom: 14px; } .admin-card-head h2 { margin-top: 5px; font-size: 18px; } .admin-task-list, .admin-vendor-list { gap: 8px; } .admin-task { gap: 11px; padding: 12px; border-radius: 14px; } .admin-task b, .admin-vendor-row b, .admin-table td b { font-size: 13px; } .admin-task small, .admin-vendor-row small, .admin-table td { font-size: 13px; } .admin-vendor-row { padding: 10px 0; } .admin-table { min-width: 760px; } .admin-table th, .admin-table td { padding: 11px 12px; } .admin-table th { font-size: 10px; } .admin-badge { padding: 5px 9px; font-size: 11px; } .admin-record-count { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid #d9e9e5; border-radius: var(--r-pill); background: #f8fcfb; color: var(--fg-muted); font-size: 12px; font-weight: var(--w-bold); } .admin-table-empty, .admin-compact-empty { display: flex; align-items: center; gap: 10px; color: var(--fg-muted); font-size: 13px; } .admin-table-empty { justify-content: center; padding: 26px 12px; } .admin-compact-empty { padding: 18px 10px; border: 1px dashed #d4e7e2; border-radius: 14px; background: #fbfefd; } .admin-table-empty svg, .admin-compact-empty svg { width: 18px; height: 18px; color: var(--accent-strong); } .admin-real-state { margin-top: 14px; padding: 18px; background: #fbfefd; } .admin-real-state svg { width: 36px; height: 36px; } .admin-real-state h2 { font-size: 18px; } .admin-real-state p { font-size: 13px; } /* ============================================================ SHOP / CATEGORY PAGES Real storefront catalog backed by marketplace tables. ============================================================ */ .shop-body { background: #f6faf8; color: var(--ink); } .shop-nav { background: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(0,121,107,0.10); backdrop-filter: blur(16px); } .shop-nav-links > a { display: inline-flex; align-items: center; min-height: 42px; color: var(--fg-secondary); font-weight: var(--w-semibold); } .shop-shell { padding-top: clamp(34px, 5vw, 58px); } .shop-hero { padding: clamp(54px, 8vw, 92px) 0 42px; background: radial-gradient(circle at 84% 12%, rgba(0,200,83,0.16), transparent 28%), radial-gradient(circle at 8% 18%, rgba(0,121,107,0.12), transparent 26%), linear-gradient(135deg, #f7fcfb 0%, #edf7f4 58%, #f8f2e8 100%); } .shop-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: clamp(28px, 5vw, 60px); } .shop-hero-copy h1 { max-width: 760px; margin: 10px 0 0; font-size: clamp(38px, 6vw, 72px); line-height: 0.98; letter-spacing: -0.055em; } .shop-hero-copy p { max-width: 650px; margin: 18px 0 0; color: var(--fg-secondary); font-size: clamp(16px, 2vw, 19px); line-height: 1.75; } .shop-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .shop-hero-actions .btn-white { background: #fff; color: var(--accent-strong); border: 1px solid rgba(0,121,107,0.14); box-shadow: var(--shadow-xs); } .shop-hero-panel { display: grid; gap: 12px; padding: 18px; border: 1px solid rgba(0,121,107,0.12); border-radius: 28px; background: rgba(255,255,255,0.72); box-shadow: 0 26px 70px rgba(6,59,52,0.11); backdrop-filter: blur(18px); } .shop-hero-panel div { padding: 18px; border: 1px solid #dcece7; border-radius: 20px; background: #fff; } .shop-hero-panel span, .shop-hero-panel strong { display: block; } .shop-hero-panel span { color: var(--fg-muted); font-size: 12px; font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; } .shop-hero-panel strong { margin-top: 8px; color: var(--accent-strong); font-size: 34px; letter-spacing: -0.04em; } .shop-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; padding: 22px 22px 20px; border: 1px solid rgba(67, 44, 24, 0.10); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(255, 255, 255, 0.92)); box-shadow: 0 18px 48px rgba(49, 31, 16, 0.06); } .shop-toolbar-intro { display: grid; gap: 12px; min-width: 0; flex: 1 1 auto; } .shop-toolbar-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); } .shop-toolbar-breadcrumbs a { color: #8b5e2e; } .shop-toolbar-breadcrumbs a:hover { color: #6f4a24; } .shop-toolbar-breadcrumbs [aria-current="page"] { color: var(--ink); } .shop-toolbar-heading h2 { margin: 6px 0 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -0.04em; } .shop-toolbar-heading p { margin: 8px 0 0; color: var(--fg-muted); font-size: 14px; } .shop-toolbar-sort { flex: none; align-self: flex-end; } .shop-sort { display: flex; align-items: center; gap: 12px; } .shop-sort-label { color: #746659; font-size: 12px; font-weight: var(--w-semibold); letter-spacing: 0.04em; white-space: nowrap; } .shop-sort-field { position: relative; min-width: 210px; } .shop-sort-select { width: 100%; min-height: 44px; padding: 0 40px 0 16px; border: 1px solid rgba(67, 44, 24, 0.12); border-radius: 999px; background: #fff; color: #2e261f; font: inherit; font-size: 13px; font-weight: var(--w-semibold); line-height: 1.2; appearance: none; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .shop-sort-field:hover .shop-sort-select { border-color: rgba(139, 94, 46, 0.28); background: #fffdfa; } .shop-sort-select:focus { outline: none; border-color: rgba(139, 94, 46, 0.38); box-shadow: 0 0 0 3px rgba(139, 94, 46, 0.10); } .shop-sort-select:disabled { opacity: 0.72; cursor: wait; } .shop-sort-icon { position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); display: grid; place-items: center; pointer-events: none; color: #8b5e2e; } .shop-sort-icon svg { width: 16px; height: 16px; } .shop-toolbar-field { display: grid; gap: 6px; min-width: 0; } .shop-toolbar-field > span:first-child { color: var(--fg-muted); font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; } .shop-toolbar-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .shop-toolbar-active { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid rgba(67, 44, 24, 0.08); } .shop-filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px 0 12px; border: 1px solid rgba(0, 121, 107, 0.16); border-radius: var(--r-pill); background: rgba(0, 121, 107, 0.08); color: var(--accent-strong); font-size: 12px; font-weight: var(--w-semibold); } .shop-filter-chip svg { width: 14px; height: 14px; opacity: 0.72; } .shop-filter-chip:hover { border-color: rgba(0, 121, 107, 0.28); background: rgba(0, 121, 107, 0.12); } .shop-filter-clear { margin-inline-start: auto; color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); text-decoration: underline; text-underline-offset: 3px; } .shop-filter-clear:hover { color: var(--ink); } .shop-search { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .shop-search label { display: grid; gap: 5px; } .shop-search label span { color: var(--fg-muted); font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; } .shop-search input, .shop-search select { min-height: 40px; border: 1px solid #dcece7; border-radius: 12px; background: #fbfefd; color: var(--ink); padding: 0 12px; font: inherit; } .shop-search button { min-height: 40px; border: 0; border-radius: 12px; background: var(--cta); color: #fff; padding: 0 15px; font-weight: var(--w-bold); } .shop-category-strip { display: flex; flex-wrap: wrap; gap: 9px; padding: 2px 0 18px; margin-bottom: 6px; } .shop-category-strip a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid #dcece7; border-radius: var(--r-pill); background: #fff; color: var(--fg-secondary); font-weight: var(--w-semibold); } .shop-category-strip a.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .shop-category-strip small { color: inherit; opacity: 0.72; } .shop-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .shop-product-card { overflow: hidden; border: 1px solid #dcece7; border-radius: 26px; background: #fff; box-shadow: 0 18px 50px rgba(6,59,52,0.07); } .shop-product-media { position: relative; min-height: 250px; display: grid; place-items: center; background: radial-gradient(circle at 70% 18%, rgba(0,200,83,0.20), transparent 24%), linear-gradient(135deg, #063b34, #0f6b5f); background-size: cover; background-position: center; } .shop-product-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,24,21,0.05), rgba(4,24,21,0.28)); } .shop-product-media-link { position: absolute; inset: 0; z-index: 1; } .shop-product-media em { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 10px; border-radius: var(--r-pill); background: #fff; color: var(--accent-strong); font-size: 11px; font-style: normal; font-weight: var(--w-extrabold); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--shadow-xs); } .shop-product-body { padding: 18px; } .shop-product-meta, .shop-product-foot { display: flex; justify-content: space-between; gap: 12px; } .shop-product-meta span, .shop-product-meta em, .shop-product-foot small { color: var(--fg-muted); font-size: 12px; font-style: normal; font-weight: var(--w-semibold); } .shop-product-body h3 { min-height: 52px; margin: 10px 0 14px; color: var(--ink); font-size: 18px; line-height: 1.35; } .shop-product-foot strong { display: grid; gap: 3px; color: var(--accent-strong); font-size: 18px; } .shop-product-foot del { color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); } .shop-add-button { width: 100%; min-height: 42px; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; background: var(--cta); color: #fff; font-weight: var(--w-bold); } .shop-add-button svg { width: 17px; height: 17px; } .shop-empty { display: grid; grid-template-columns: auto minmax(0, 620px); align-items: start; gap: 20px; padding: clamp(28px, 5vw, 50px); border: 1px solid #dcece7; border-radius: 30px; background: linear-gradient(135deg, #fff, #eef8f5); box-shadow: 0 18px 50px rgba(6,59,52,0.07); } .shop-empty > svg { width: 56px; height: 56px; padding: 14px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-strong); } .shop-empty h2 { margin: 0; color: var(--ink); font-size: clamp(26px, 3vw, 34px); } .shop-empty p { margin: 10px 0 20px; color: var(--fg-secondary); line-height: 1.7; } .shop-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; } .shop-page-link, .shop-page-status { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); font-size: 13px; font-weight: var(--w-bold); } .shop-page-link { min-width: 104px; border: 1px solid #dcece7; background: #fff; color: var(--accent-strong); box-shadow: var(--shadow-xs); } .shop-page-link:not(.is-disabled):hover { border-color: var(--accent); background: var(--accent-soft); } .shop-page-link.is-disabled { color: var(--fg-muted); opacity: 0.55; cursor: not-allowed; } .shop-page-status { padding: 0 14px; background: #eef8f5; color: var(--fg-secondary); } @media (max-width: 1180px) { .shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 920px) { .shop-hero-grid, .shop-toolbar { flex-direction: column; align-items: stretch; } .shop-toolbar-sort { width: 100%; align-self: stretch; } .shop-sort { justify-content: space-between; width: 100%; } .shop-sort-field { flex: 1 1 auto; max-width: 320px; } .shop-search { align-items: stretch; flex-direction: column; } .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .shop-nav-links { display: none; } .shop-sort { flex-direction: column; align-items: stretch; gap: 8px; } .shop-sort-field { max-width: none; } .shop-hero-panel, .shop-product-grid, .shop-empty { grid-template-columns: 1fr; } .shop-product-media { min-height: 210px; } } /* Shop premium polish */ .shop-body { background: radial-gradient(circle at 6% 7%, rgba(0,121,107,0.10), transparent 28%), radial-gradient(circle at 90% 18%, rgba(0,200,83,0.10), transparent 24%), #f6faf8; } .shop-nav { position: sticky; top: 0; z-index: 50; } .shop-hero { position: relative; overflow: hidden; padding-top: clamp(62px, 8vw, 104px); } .shop-hero::before { content: ""; position: absolute; inset: 22px 4vw auto auto; width: 360px; height: 360px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,121,107,0.18), rgba(0,200,83,0.08)); filter: blur(2px); opacity: 0.8; } .shop-hero-grid { position: relative; z-index: 1; } .shop-breadcrumbs { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 8px 12px; border: 1px solid rgba(0,121,107,0.12); border-radius: var(--r-pill); background: rgba(255,255,255,0.72); color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); backdrop-filter: blur(12px); } .shop-breadcrumbs a { color: var(--accent-strong); } .shop-breadcrumbs svg { width: 13px; height: 13px; } .shop-hero-copy h1 { text-wrap: balance; } .shop-trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .shop-trust-row span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(0,121,107,0.12); border-radius: var(--r-pill); background: rgba(255,255,255,0.66); color: var(--fg-secondary); font-size: 13px; font-weight: var(--w-semibold); } .shop-trust-row svg { width: 16px; height: 16px; color: var(--accent-strong); } .shop-hero-panel { position: relative; transform: rotate(1.2deg); } .shop-hero-panel > div { transform: rotate(-1.2deg); } .shop-hero-feature { min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, rgba(6,59,52,0.08), rgba(6,59,52,0.72)), url("https://images.unsplash.com/photo-1483985988355-763728e1935b?w=700&h=500&fit=crop&q=80") center/cover; } .shop-hero-feature small, .shop-hero-feature b { display: block; color: #fff; } .shop-hero-feature small { font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.82; } .shop-hero-feature b { max-width: 270px; margin-top: 7px; font-size: 20px; line-height: 1.2; letter-spacing: -0.03em; } .shop-toolbar { backdrop-filter: blur(14px); } .shop-search { border-radius: 0; } .shop-input-wrap { min-height: 44px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(67, 44, 24, 0.10); border-radius: 14px; background: #fff; padding: 0 12px; transition: border-color var(--dur-base), box-shadow var(--dur-base); } .shop-input-wrap:focus-within { border-color: rgba(0, 121, 107, 0.28); box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.10); } .shop-input-wrap svg { width: 16px; height: 16px; color: var(--accent-strong); flex: none; } .shop-input-wrap input, .shop-input-wrap select { min-height: 42px; width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; appearance: none; } .shop-input-wrap select { cursor: pointer; padding-inline-end: 4px; } .shop-input-wrap--search { padding-inline-end: 6px; } .shop-input-wrap--search input { flex: 1 1 auto; } .shop-search-submit { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border: 0; border-radius: 10px; background: var(--cta); color: #fff; padding: 0; cursor: pointer; transition: transform var(--dur-base), background var(--dur-base); } .shop-search-submit svg { width: 16px; height: 16px; color: #fff; } .shop-search-submit:hover { background: var(--cta-strong); transform: translateY(-1px); } .shop-category-strip { padding-top: 18px; } .shop-category-strip a { box-shadow: 0 8px 20px rgba(6,59,52,0.04); } .shop-category-strip a svg { width: 15px; height: 15px; color: currentColor; } .shop-product-card { position: relative; transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base); } .shop-product-card:hover { transform: translateY(-6px); border-color: rgba(0,121,107,0.22); box-shadow: 0 26px 70px rgba(6,59,52,0.13); } .shop-product-card:hover .shop-product-media::before { background: linear-gradient(180deg, rgba(4,24,21,0.02), rgba(4,24,21,0.18)); } .shop-product-media { min-height: 282px; } .shop-wishlist { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--ink); box-shadow: var(--shadow-xs); } .shop-wishlist svg { width: 17px; height: 17px; } .shop-product-meta { align-items: center; } .shop-product-meta span { padding: 5px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); } .shop-product-body h3 { font-size: 19px; letter-spacing: -0.02em; } .shop-stock-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); } .shop-stock-line .is-low { color: #c55a00; } .shop-add-button { transition: transform var(--dur-base), background var(--dur-base), box-shadow var(--dur-base); } .shop-add-button:hover { background: var(--cta-strong); box-shadow: 0 14px 26px rgba(0,200,83,0.22); transform: translateY(-1px); } .shop-empty { position: relative; overflow: hidden; } .shop-empty::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; bottom: -90px; border-radius: 50%; background: rgba(0,121,107,0.08); } @media (max-width: 920px) { .shop-toolbar { padding: 16px; } .shop-hero-panel, .shop-hero-panel > div { transform: none; } } @media (max-width: 620px) { .shop-breadcrumbs { max-width: 100%; overflow-x: auto; } .shop-trust-row span { width: 100%; } .shop-product-media { min-height: 240px; } } /* Single product page — reference layout */ .product-page { padding: clamp(20px, 3vw, 36px) 0 clamp(44px, 5vw, 72px); background: radial-gradient(circle at top left, rgba(0, 121, 107, 0.05), transparent 28%), radial-gradient(circle at top right, rgba(214, 79, 122, 0.05), transparent 24%), #fbfaf8; } /* .product-shell is a grid, so its children default to min-width: auto. The related-products rail then reports its full scroller content (~1116px) as a minimum, which stretches the shell's only column and drags .pd-layout out with it — the whole page rendered 1124px wide inside a 358px phone. */ .product-shell > * { min-width: 0; } .product-shell { display: grid; gap: clamp(18px, 2.5vw, 28px); /* Wider than the 1120px the rest of the storefront uses: this page now carries three columns (gallery, details, purchase panel) instead of two. */ width: min(100% - 48px, 1320px); margin-inline: auto; } .product-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); } .product-breadcrumbs a { color: var(--accent-strong); } .product-breadcrumbs span[aria-current="page"] { color: var(--ink); } .product-breadcrumbs svg { width: 13px; height: 13px; opacity: 0.5; } html[dir="rtl"] .product-breadcrumbs svg { transform: scaleX(-1); } .pd-layout { display: grid; /* gallery | details | purchase panel */ grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(268px, 300px); gap: clamp(24px, 3vw, 40px); align-items: start; } /* The purchase panel: quantity and the buy buttons, boxed off from the reading matter so the commitment step reads as its own thing. */ .pd-purchase { display: grid; gap: 16px; padding: 20px; border: 1px solid #dcece7; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(6, 59, 52, 0.06); } .pd-purchase .pd-qty-row, .pd-purchase .pd-cta { margin: 0; } /* Price repeated inside the panel — a shade smaller than the headline copy under the title, so it reads as a summary rather than competing with it. */ .pd-purchase-price .pd-price-row strong { font-size: clamp(22px, 2.4vw, 26px); } .pd-purchase .pd-stock { margin: 0; } .pd-assurances { display: grid; gap: 9px; margin: 2px 0 0; padding: 14px 0 0; border-top: 1px solid #e8efec; list-style: none; } .pd-assurances li { display: flex; align-items: center; gap: 9px; color: var(--fg-secondary); font-size: 12.5px; line-height: 1.4; } .pd-assurances svg { flex: none; width: 16px; height: 16px; color: var(--accent-strong); } .pd-assurances a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .pd-assurances a:hover { color: var(--accent-strong); } /* Below three-column width the panel drops under the two remaining columns rather than being squeezed into an unusable strip. Bounded at the bottom by 981px because the stacking rule for narrow screens lives further down the stylesheet and would otherwise be overridden by this one. */ @media (min-width: 981px) and (max-width: 1180px) { .pd-layout { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); } .pd-purchase { grid-column: 1 / -1; } } /* Gallery — main image (pd-stage) first, thumbnail strip below it */ .pd-gallery { position: relative; } /* Keep the gallery in view while the details column scrolls past it. Only above 980px, where .pd-layout is still two columns — below that the columns stack and a sticky gallery would sit on top of the content it's supposed to accompany. align-self: start is what gives sticky room to travel: a grid item that stretches to fill its row is already as tall as the row, so it has nowhere to move. .pd-layout sets align-items: start already; this repeats it locally so the behaviour survives a change to the parent. */ @media (min-width: 1181px) { .pd-purchase { position: sticky; top: calc(var(--nav-h) + 16px); align-self: start; } } @media (min-width: 981px) { .pd-gallery { position: sticky; top: calc(var(--nav-h) + 16px); align-self: start; } /* Rather than letting the gallery scroll, cap the main image so the whole block fits the space under the sticky header. The reserved 190px is the header offset plus the thumbnail strip (72px + its 4px padding) and the 14px gap above it, so the thumbnails always stay on screen. The image is object-fit: cover, so a shorter frame just crops instead of squashing. */ .pd-stage, .pd-image { max-height: calc(100vh - 190px); } } .pd-gallery-inner { display: flex; flex-direction: column; gap: 14px; } .pd-thumbs { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: #cdd8d4 transparent; } .pd-thumbs::-webkit-scrollbar { height: 5px; } .pd-thumbs::-webkit-scrollbar-track { background: transparent; } .pd-thumbs::-webkit-scrollbar-thumb { background: #cdd8d4; border-radius: 999px; } .pd-thumb { flex: none; width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer; transition: border-color var(--dur-base), transform var(--dur-base); } .pd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .pd-thumb:hover { transform: translateY(-1px); } .pd-thumb.is-active { border-color: var(--accent-strong); box-shadow: 0 0 0 1px rgba(0, 121, 107, 0.12); } .pd-stage { position: relative; border-radius: 16px; overflow: hidden; background: #f8f6f2; box-shadow: 0 18px 42px rgba(24, 24, 40, 0.08); } .pd-image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f3faf8; cursor: zoom-in; } .pd-image--placeholder { background: linear-gradient(135deg, #eef7f4, #dcece7); } .pd-tools { position: absolute; top: 14px; right: 14px; z-index: 2; } .pd-tool { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255,255,255,0.92); color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,0.08); cursor: pointer; transition: background var(--dur-base); } .pd-tool:hover { background: #fff; } .pd-tool svg { width: 16px; height: 16px; } /* Panel */ .pd-panel { display: grid; gap: 18px; align-content: start; padding-top: 4px; } .pd-heading-group { display: grid; gap: 8px; /* Closes off the title/rating/price block before the stock line and the variant pickers below it. */ padding-bottom: 16px; border-bottom: 1px solid #e8efec; } .pd-vendor-label { display: inline-flex; align-items: center; color: var(--accent-strong); font-size: 13px; font-weight: var(--w-bold); letter-spacing: 0.02em; text-decoration: none; } .pd-vendor-label:hover { text-decoration: underline; } .pd-title { margin: 0; color: var(--ink); font-size: clamp(22px, 2.1vw, 26px); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--w-bold); } .pd-rating-line { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .pd-rating-row { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .pd-rating-row:hover .pd-rating-count { color: var(--accent-strong); } .pd-rating-count { color: var(--fg-muted); font-size: 14px; font-weight: var(--w-semibold); } .pd-stars { display: inline-flex; align-items: center; gap: 2px; color: #f4b400; font-size: 13px; } .pd-stars svg { width: 16px; height: 16px; fill: currentColor; } .pd-stars .is-empty { opacity: 0.28; fill: none; color: #d0d0d0; } .pd-stars-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; transition: color var(--dur-fast); } .pd-stars-link:hover { color: var(--accent); } .pd-review-stars-input { display: inline-flex; gap: 6px; } .pd-review-stars-input button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #c8d2cf; cursor: pointer; transition: transform var(--dur-fast), color var(--dur-fast); } .pd-review-stars-input button:hover, .pd-review-stars-input button.is-active { color: #f59e0b; } .pd-review-stars-input button:hover { transform: translateY(-1px); } .pd-review-stars-input svg { width: 24px; height: 24px; fill: currentColor; } .pd-review-form-card.is-highlighted { box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.18); border-color: rgba(0, 121, 107, 0.35); } .pd-review-rating-hint { margin: 0; color: var(--fg-muted); font-size: 13px; } .pd-review-rating-hint strong { color: var(--ink); } .pd-review-rating-group { margin: 0; padding: 0; border: 0; } .pd-review-rating-group .pd-review-label span { color: var(--fg-muted); font-weight: 500; } .pd-btn--primary:disabled { opacity: 0.55; cursor: not-allowed; } .pd-rating-note { margin-left: 6px; color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); } .pd-views { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); } .pd-views svg { width: 14px; height: 14px; } .pd-pricing { display: grid; gap: 3px; } .pd-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .pd-price-row strong { color: var(--accent-strong); font-size: clamp(22px, 2.4vw, 28px); font-weight: var(--w-extrabold); letter-spacing: -0.03em; line-height: 1; } .pd-price-row del { color: var(--fg-muted); font-size: 14px; font-weight: var(--w-semibold); } .pd-discount { padding: 3px 7px; border-radius: 999px; background: #fde8ef; color: #d81b60; font-size: 10px; font-weight: var(--w-bold); } .pd-save { margin: 0; color: #2e7d32; font-size: 12px; font-weight: var(--w-semibold); } .pd-stock { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: var(--w-bold); color: var(--ink); } .pd-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #9e9e9e; } .pd-stock em { font-style: normal; font-weight: var(--w-semibold); color: var(--fg-muted); } .pd-stock--in_stock .pd-stock-dot, .pd-stock--low_stock .pd-stock-dot { background: #43a047; } .pd-stock--out_of_stock .pd-stock-dot { background: #e53935; } .pd-stock--coming_soon .pd-stock-dot, .pd-stock--preorder .pd-stock-dot { background: #fb8c00; } .pd-stock--handmade .pd-stock-dot { background: #b45309; } .pd-stock--limited_edition .pd-stock-dot { background: #6d28d9; } .pd-stock--one_of_a_kind .pd-stock-dot { background: #be185d; } .pd-about { padding-top: 4px; border-top: 1px solid #eef0ec; } .pd-about h3 { margin: 0 0 6px; color: var(--ink); font-size: 14px; font-weight: var(--w-bold); } /* Legacy plain-text About (written before the rich-text editor): the seller's blank lines and indentation are what the paragraph should show. pre-wrap keeps both; anywhere stops an unbroken string from pushing the column open. */ .pd-about-copy { white-space: pre-wrap; overflow-wrap: anywhere; } /* Rich About carries its own structure, so pre-wrap would double the spacing by preserving the newlines between the editor's tags as well. */ .pd-about-copy--rich { white-space: normal; } .pd-about-copy--rich p { margin: 0 0 8px; } .pd-about-copy--rich p:last-child { margin-bottom: 0; } .pd-about-copy--rich ul, .pd-about-copy--rich ol { margin: 0 0 8px; padding-inline-start: 20px; } .pd-about-copy--rich li { margin-bottom: 4px; } .pd-about-copy--rich li:last-child { margin-bottom: 0; } .pd-about p { margin: 0; color: var(--fg-secondary); font-size: 14px; line-height: 1.6; } .pd-meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 4px; } .pd-category-tag { display: inline-flex; align-items: center; justify-self: start; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft, #ddf3ea); color: var(--accent-strong); font-size: 12px; font-weight: var(--w-semibold); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); } .pd-category-tag:hover { background: var(--accent); color: #fff; } .pd-category-tag i { width: 13px; height: 13px; } .pd-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 4px; border: 0; background: transparent; color: var(--fg-secondary); font-size: 13px; font-weight: var(--w-semibold); cursor: pointer; transition: color var(--dur-fast); } .pd-share-btn:hover { color: var(--accent-strong); } .pd-share-btn i { width: 15px; height: 15px; } .pd-buybox { display: grid; gap: 16px; padding: 20px; border: 1px solid #eef0ec; border-radius: 16px; background: #fbfaf8; } .pd-variants { display: grid; gap: 14px; position: relative; z-index: 2; } .pd-variant-group { display: grid; gap: 10px; } .pd-colors-label, .pd-variant-label { color: var(--ink); font-size: 14px; font-weight: var(--w-bold); } .pd-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .pd-swatch { width: 30px; height: 30px; padding: 0; border: 2px solid rgba(0,0,0,0.14); border-radius: 50%; background-color: var(--swatch, #ccc); cursor: pointer; pointer-events: auto; touch-action: manipulation; transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base); } .pd-swatch--light { border-color: #d4d4d4; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); } .pd-swatch:hover { transform: scale(1.06); } .pd-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00796b; } .pd-swatch--light.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00796b, inset 0 0 0 1px rgba(0,0,0,0.08); } /* Colour picker on the product page. Each option shows the seller's own photo for that colour (its primary colour image) rather than a flat hex chip, so a shopper sees the actual garment before switching. .pd-swatch above stays for anything still rendering plain chips. */ .pd-color-options { display: flex; flex-wrap: wrap; gap: 10px; } .pd-color-option { position: relative; width: 66px; height: 66px; padding: 3px; /* Same hairline as .pd-size on this page, not a generic grey. */ border: 1px solid #dcece7; border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; transition: border-color var(--dur-base), box-shadow var(--dur-base); } .pd-color-option img { position: relative; display: block; width: 100%; height: 100%; border-radius: 7px; object-fit: cover; } /* Sits under the photo as the fallback layer, not beside it. */ .pd-color-option-chip { position: absolute; inset: 3px; border-radius: 7px; } /* A pale swatch would otherwise vanish against the white tile. */ .pd-color-option-chip.is-light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } /* Set by product-page.js when the photo 404s — dropping the element entirely avoids the browser's broken-image glyph and uncovers the swatch. */ .pd-color-option.has-no-image img { display: none; } .pd-color-option:hover { border-color: #00796b; } /* Declared after :hover deliberately — both are (0,2,0), so the selected state would otherwise lose the moment the pointer is over it. */ .pd-color-option.is-active { border-color: #00796b; box-shadow: 0 0 0 1px #00796b; } .pd-color-option:focus-visible { outline: 2px solid #00796b; outline-offset: 2px; } .pd-colors-selected { font-weight: var(--w-medium); color: var(--fg-secondary); } .pd-size-options { display: flex; flex-wrap: wrap; gap: 8px; } .pd-size { display: inline-flex; align-items: center; justify-content: center; /* Pill rather than a fixed circle: sizes now read as full words ("Medium"), which a 32px round chip can't hold. The min-width is set to fit the longest standard label ("3X-Large") so every button in the row comes out the same size; a longer custom size still grows rather than being clipped. */ min-width: 104px; height: 36px; padding: 0 14px; border: 1px solid #dcece7; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; font-weight: var(--w-bold); white-space: nowrap; cursor: pointer; pointer-events: auto; touch-action: manipulation; transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base); } .pd-size:hover:not(:disabled) { border-color: rgba(0,121,107,0.35); background: #f7fcfb; } /* Selected state is an outline, not a filled chip — the row stays light and the choice still reads clearly. box-shadow thickens the ring without changing the border-box size, so the button doesn't shift by a pixel when it becomes active. */ .pd-size.is-active { border-color: #00796b; background: #fff; color: #00796b; box-shadow: inset 0 0 0 1px #00796b; } /* The generic :hover rule above is more specific than .is-active, so without this the hover background would override the selected look. */ .pd-size.is-active:hover:not(:disabled) { border-color: #00695c; background: #f7fcfb; color: #00695c; box-shadow: inset 0 0 0 1px #00695c; } .pd-size:disabled { opacity: 0.38; cursor: not-allowed; text-decoration: line-through; } .pd-variant-selected { margin: 0; color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); } .pd-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: #f5fbf9; border: 1px solid rgba(0,121,107,0.1); color: var(--fg-secondary); font-size: 13px; line-height: 1.55; } .pd-customization { display: grid; gap: 14px; padding: 14px; border-radius: 12px; background: #f5fbf9; border: 1px solid rgba(0,121,107,0.1); } .pd-customization-heading { margin: 0; font-size: 14px; font-weight: var(--w-semibold); color: var(--ink); } .pd-field { display: grid; gap: 6px; } .pd-field label { font-size: 13px; font-weight: var(--w-semibold); color: var(--ink); } .pd-field label em { color: var(--fg-muted); font-weight: var(--w-regular); font-style: normal; } .pd-required { color: #c0392b; } .pd-field input[type="text"], .pd-field input[type="file"], .pd-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #dcece7; border-radius: 10px; background: #fff; font-size: 14px; font-family: inherit; color: var(--ink); } .pd-field textarea { resize: vertical; min-height: 60px; } .pd-field input:focus, .pd-field textarea:focus { outline: none; border-color: #00796b; box-shadow: 0 0 0 3px rgba(0,121,107,0.12); } .pd-field-hint { color: var(--fg-muted); font-size: 12px; } .pd-qty-row { display: flex; align-items: center; gap: 12px; } .pd-qty-label { color: var(--ink); font-size: 14px; font-weight: var(--w-semibold); } .pd-qty { display: grid; grid-template-columns: 36px 48px 36px; align-items: stretch; border: 1px solid #dcece7; border-radius: 12px; background: #fff; overflow: hidden; } .pd-qty-btn { display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; } .pd-qty-btn:hover { background: #f7fcfb; } .pd-qty-btn svg { width: 14px; height: 14px; } .pd-qty input { width: 100%; min-height: 40px; border: 0; border-inline: 1px solid #eef5f3; text-align: center; font: inherit; font-weight: var(--w-bold); color: var(--ink); -moz-appearance: textfield; } .pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pd-actions-primary { display: grid; gap: 10px; } .pd-cta { display: grid; gap: 12px; margin-top: 4px; } .pd-cta-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 12px; } .pd-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: 15px; font-weight: var(--w-bold); cursor: pointer; transition: transform var(--dur-base), box-shadow var(--dur-base), background var(--dur-base); } .pd-btn svg { width: 18px; height: 18px; } .pd-btn--cart { width: 100%; border: 2px solid var(--accent-strong); background: #fff; color: var(--accent-strong); } .pd-btn--cart:hover { background: rgba(0, 121, 107, 0.08); transform: translateY(-1px); } .pd-btn--wish { width: 52px; padding: 0; border: 1px solid #d8e8e4; background: #fff; color: #d64f7a; } .pd-btn--wish.is-active { border-color: rgba(214, 79, 122, 0.35); background: rgba(214, 79, 122, 0.08); } .pd-btn--wish.is-active svg { fill: currentColor; } .pd-btn--buy { width: 100%; border: 0; background: var(--accent-strong); color: #fff; box-shadow: 0 14px 28px rgba(0, 121, 107, 0.22); } .pd-btn--buy:hover { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(0, 121, 107, 0.28); } .pd-btn--primary { width: 100%; border: 0; background: #00796b; color: #fff; box-shadow: 0 10px 24px rgba(0,121,107,0.22); } .pd-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,121,107,0.28); } .pd-btn--outline { width: 100%; border: 2px solid #00796b; background: #fff; color: #00796b; } .pd-btn--outline:hover { background: #f3faf8; } .pd-btn--ghost { flex: 1; border: 2px solid #00796b; background: #fff; color: #00796b; } .pd-btn--ghost.is-active { color: #c62828; border-color: rgba(198,40,40,0.35); background: #fff5f5; } .pd-btn--ghost.is-active svg { fill: currentColor; } .pd-btn--icon { width: 46px; min-height: 46px; padding: 0; border: 2px solid #00796b; background: #fff; color: #00796b; } .pd-actions-secondary { display: flex; gap: 10px; align-items: stretch; } .pd-unavailable { padding: 12px 14px; border: 1px solid #dcece7; border-radius: 12px; background: #fff; } .pd-unavailable b { display: block; color: var(--ink); font-size: 14px; } .pd-unavailable span { color: var(--fg-muted); font-size: 12px; } .pd-extra { margin-top: clamp(28px, 4vw, 42px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid #ebe6df; } .pd-about h2, .pd-specs h2 { margin: 0 0 16px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; color: var(--ink); } .pd-description-copy, .pd-about-copy { color: var(--fg-secondary); font-size: 15px; line-height: 1.75; } .pd-description-copy p, .pd-about-copy p { margin: 0 0 12px; } .pd-description-copy img { display: block; max-width: 100%; height: auto; margin: 16px 0; border-radius: 12px; } /* Description / Reviews tabs */ .pd-tabs { margin-top: clamp(28px, 4vw, 42px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid #ebe6df; } .pd-tabs-nav { display: flex; gap: clamp(20px, 3vw, 36px); margin-bottom: 24px; border-bottom: 1px solid #eef0ec; } .pd-tab { padding: 0 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--fg-muted); font-size: 16px; font-weight: var(--w-bold); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast); margin-bottom: -1px; } .pd-tab:hover { color: var(--ink); } .pd-tab.is-active { color: var(--accent-strong); border-bottom-color: var(--accent-strong); } .pd-tab-panel[hidden] { display: none; } .pd-specs { margin-top: clamp(24px, 3vw, 34px); padding-top: clamp(20px, 2.5vw, 28px); border-top: 1px solid #e8efec; } /* Collapsible group: label row on top, key/value table beneath. */ .pd-spec-group { border-top: 1px solid #e8efec; } .pd-spec-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; color: var(--ink); font-size: 16px; font-weight: var(--w-bold); cursor: pointer; list-style: none; } /* Safari/Chrome draw their own triangle without this. */ .pd-spec-group > summary::-webkit-details-marker { display: none; } .pd-spec-group > summary::marker { content: ""; } .pd-spec-group > summary svg { flex: none; width: 20px; height: 20px; color: var(--fg-secondary); transition: transform var(--dur-base); } .pd-spec-group[open] > summary svg { transform: rotate(180deg); } .pd-spec-group > summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .pd-specs dl { margin: 0 0 8px; } .pd-specs dl > div { display: grid; /* Label column wide enough for the longest spec name without wrapping it onto two lines, then the value takes the rest. */ grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-top: 1px solid #eef5f3; } .pd-specs dt { margin: 0; color: var(--fg-secondary); font-size: 13px; font-weight: var(--w-bold); } .pd-specs dd { margin: 0; color: var(--ink); font-size: 13px; } @media (max-width: 560px) { .pd-specs dl > div { grid-template-columns: 1fr; gap: 2px; } } .pd-zoom-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: rgba(10,20,18,0.82); } .pd-zoom-modal[hidden] { display: none; } .pd-zoom-modal img { max-width: min(92vw, 900px); max-height: 86vh; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.35); } .pd-zoom-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer; } .pd-zoom-close svg { width: 20px; height: 20px; } .related-products { margin-top: clamp(12px, 2vw, 24px); } /* Rail variant: one scrolling row instead of a wrapping grid. .scroller sizes .card, but the related list renders .shop-product-card, so it needs its own track sizing. */ .related-rail .scroller > * { flex: 0 0 auto; width: 264px; scroll-snap-align: start; } .related-products .sec-head h2 { font-size: clamp(24px, 3vw, 34px); } .pd-reviews { margin-top: clamp(28px, 4vw, 42px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid #e8efec; } /* nested inside the Reviews tab — the tab nav already separates it, no extra divider needed */ .pd-tab-panel .pd-reviews { margin-top: 0; padding-top: 0; border-top: 0; } .pd-reviews-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; } .pd-reviews-head h2 { margin: 6px 0 4px; font-size: clamp(24px, 3vw, 34px); } .pd-reviews-head p { margin: 0; color: var(--fg-muted); } .pd-reviews-score { display: grid; justify-items: end; gap: 4px; text-align: right; } .pd-reviews-score strong { font-size: 34px; line-height: 1; color: var(--ink); } .pd-reviews-score span { color: var(--fg-muted); font-size: 12px; } .pd-review-flash, .pd-review-notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; background: #f4faf8; border: 1px solid #d9ebe6; } .pd-review-notice--pending { background: #fff8eb; border-color: #f2dfae; } .pd-review-notice--approved { background: #f4faf8; border-color: #cfe8e2; } .pd-review-notice--rejected { background: #fff5f5; border-color: #f0d0d0; } .pd-review-notice--unpublished { background: #f7f7f6; border-color: #e3e6e4; } .pd-review-notice b { display: block; margin-bottom: 4px; } .pd-review-notice span, .pd-review-notice em { display: block; color: var(--fg-muted); font-size: 14px; } .pd-review-notice em { margin-top: 6px; font-style: normal; color: #9b2c2c; } .pd-review-notice a { margin-top: 8px; color: var(--accent); font-weight: 600; } .pd-review-pending-preview { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); } .pd-review-pending-preview p { margin: 8px 0 0; color: var(--fg-secondary); white-space: pre-wrap; } .pd-review-form-card { margin-bottom: 24px; padding: 20px; border: 1px solid #e3efeb; border-radius: 18px; background: #fbfefd; } .pd-review-form-card h3 { margin: 0 0 6px; } .pd-review-form-note { margin: 0 0 16px; color: var(--fg-muted); font-size: 14px; } .pd-review-rejection-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #fff5f5; border: 1px solid #f0d0d0; } .pd-review-rejection-banner i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #9b2c2c; } .pd-review-rejection-banner b { display: block; color: #9b2c2c; font-size: 13px; } .pd-review-rejection-banner p { margin: 4px 0 0; color: #9b2c2c; font-size: 13px; line-height: 1.5; } .pd-review-form { display: grid; gap: 16px; } .pd-review-field { display: grid; gap: 8px; } .pd-review-label { font-size: 13px; font-weight: 600; color: var(--ink); } .pd-review-label span { color: var(--fg-muted); font-weight: 500; } .pd-review-form input[type="text"], .pd-review-form textarea, .pd-review-form input[type="file"] { width: 100%; padding: 12px 14px; border: 1px solid #d7e5e1; border-radius: 12px; background: #fff; font: inherit; } .pd-review-image-preview { display: flex; flex-wrap: wrap; gap: 10px; } .pd-review-image-thumb { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; border: 1px solid #e3efeb; } .pd-review-image-thumb img { width: 100%; height: 100%; object-fit: cover; } .pd-review-form-actions { display: grid; gap: 8px; } .pd-review-moderation-note { margin: 0; color: var(--fg-muted); font-size: 13px; } .pd-review-error { color: #b42318; font-size: 12px; } .pd-reviews-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; color: var(--fg-muted); text-align: center; } .pd-reviews-list { display: grid; gap: 14px; } .pd-review-card { padding: 18px; border: 1px solid #e8efec; border-radius: 16px; background: #fff; } .pd-review-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; } .pd-review-author { display: flex; align-items: center; gap: 12px; } .pd-review-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #e8f3f1; color: #0f5f55; font-weight: 700; } .pd-review-author small { display: block; color: var(--fg-muted); } .pd-review-card h3 { margin: 0 0 8px; font-size: 16px; } .pd-review-card p { margin: 0; color: var(--fg-secondary); white-space: pre-wrap; } .pd-review-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .pd-review-image { width: 88px; height: 88px; padding: 0; border: 1px solid #e3efeb; border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; } .pd-review-image img { width: 100%; height: 100%; object-fit: cover; } .pd-review-lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, 0.82); } .pd-review-lightbox[hidden] { display: none !important; } .pd-review-lightbox img { max-width: min(92vw, 920px); max-height: 86vh; border-radius: 12px; } .pd-review-lightbox-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; } body.pd-review-lightbox-open { overflow: hidden; } @media (max-width: 980px) { .pd-layout, .pd-extra, .pd-reviews-head { grid-template-columns: 1fr; } .pd-reviews-head { flex-direction: column; } .pd-reviews-score { justify-items: start; text-align: left; } .pd-review-card-head { flex-direction: column; } } @media (max-width: 640px) { .product-shell { width: min(100% - 32px, 1120px); } .pd-specs dl > div { grid-template-columns: 1fr; gap: 3px; } .pd-cta-row { grid-template-columns: minmax(0, 1fr) 48px; } } /* Cart and wishlist pages */ .commerce-page { padding: clamp(34px, 5vw, 62px) 0 clamp(58px, 7vw, 92px); } .commerce-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; } .commerce-head h1 { margin: 8px 0 0; color: var(--ink); font-size: clamp(38px, 6vw, 64px); line-height: 1; letter-spacing: -0.055em; } .commerce-head p { margin: 10px 0 0; color: var(--fg-secondary); } .commerce-back { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid #dcece7; border-radius: var(--r-pill); background: #fff; color: var(--accent-strong); font-size: 13px; font-weight: var(--w-bold); box-shadow: var(--shadow-xs); } .commerce-back svg { width: 16px; height: 16px; } .commerce-card, .commerce-empty { border: 1px solid #dcece7; border-radius: 28px; background: rgba(255,255,255,0.88); box-shadow: 0 22px 60px rgba(6,59,52,0.08); backdrop-filter: blur(14px); } .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; } .cart-list { display: grid; overflow: hidden; } .cart-line { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid #edf5f2; } .cart-line-select { width: 19px; height: 19px; accent-color: var(--accent, #00c853); cursor: pointer; } .cart-line-select:disabled { cursor: not-allowed; opacity: 0.4; } .cart-select-all { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #edf5f2; color: var(--fg-secondary, #4a5a55); font-size: 13px; font-weight: 600; cursor: pointer; } .cart-select-all input { width: 17px; height: 17px; accent-color: var(--accent, #00c853); cursor: pointer; } .cart-line:last-child { border-bottom: 0; } .cart-line-image { min-height: 112px; border-radius: 20px; background: radial-gradient(circle at 70% 18%, rgba(0,200,83,0.16), transparent 24%), linear-gradient(135deg, #063b34, #0f6b5f); background-size: cover; background-position: center; } .cart-line span, .cart-line small, .cart-qty span, .cart-summary span, .cart-summary p { color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); } .cart-line h2 { margin: 6px 0; color: var(--ink); font-size: 18px; } .cart-line h2 a { color: inherit; } .cart-line > strong { color: var(--accent-strong); font-size: 18px; } .cart-line--blocked { border-color: rgba(229, 72, 77, 0.28); background: rgba(229, 72, 77, 0.04); } .cart-line-warning { display: inline-flex; margin-top: 8px; padding: 7px 10px; border-radius: 999px; background: rgba(229, 72, 77, 0.1); color: var(--danger); font-size: var(--fs-xs); font-weight: var(--w-bold); } /* The display above is an author rule, so it beats the browser's built-in [hidden] { display: none } — without this the empty warning pill stays visible on every line, whether it's hidden in the Blade or toggled off by cart-page.js. */ .cart-line-warning[hidden] { display: none; } .cart-qty { min-width: 74px; display: grid; justify-items: center; gap: 4px; padding: 9px; border: 1px solid #dcece7; border-radius: 16px; background: #fbfefd; } .cart-qty b { color: var(--ink); } .cart-summary { position: sticky; top: 92px; align-self: start; padding: 22px; } .cart-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #edf5f2; } .cart-summary strong { color: var(--ink); } .cart-summary .cart-total strong { color: var(--accent-strong); font-size: 22px; } .commerce-primary { width: 100%; min-height: 48px; margin-top: 18px; border: 0; border-radius: 15px; background: var(--cta); color: #fff; font-weight: var(--w-bold); } .commerce-primary.is-disabled, .commerce-primary:disabled { cursor: not-allowed; background: var(--mist-200); color: var(--fg-muted); } .cart-summary p { margin: 14px 0 0; line-height: 1.6; } .commerce-status { padding: 12px 14px; border: 1px solid #dcece7; border-radius: 14px; background: #f5fbf9; color: var(--teal); font-weight: var(--w-semibold); font-size: var(--fs-sm); } .commerce-status.is-error { border-color: rgba(229, 72, 77, 0.25); background: rgba(229, 72, 77, 0.08); color: var(--danger); } .cart-qty-actions { display: grid; gap: 8px; min-width: 130px; } .cart-qty-stepper { width: 100%; } .cart-qty-input { width: 100%; min-height: 40px; } .cart-line.is-updating { opacity: 0.72; } .cart-line.is-updating .cart-qty-stepper { pointer-events: none; } .cart-qty-form { display: flex; align-items: end; gap: 8px; } .cart-qty-form label { display: grid; gap: 4px; } .cart-qty-form input { width: 68px; border: 1px solid #dcece7; border-radius: 12px; padding: 9px 10px; } .cart-qty-form button, .cart-remove, .cart-clear-form button { border: none; border-radius: 999px; padding: 9px 13px; background: var(--mist-100); color: var(--ink); font-weight: var(--w-semibold); cursor: pointer; } .cart-remove, .cart-clear-form button { color: var(--danger); } .cart-clear-form { display: flex; justify-content: flex-end; } .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; } .checkout-layout-main { display: grid; gap: 24px; } .checkout-form { display: grid; gap: 18px; } .checkout-form h2, .confirmation-card h2 { margin: 0; font-size: var(--fs-h4); } .checkout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .checkout-form label { display: grid; gap: 8px; color: var(--fg-muted); font-size: var(--fs-sm); font-weight: var(--w-semibold); } /* Icon-led choice rows are also elements inside .checkout-form, so they'd otherwise inherit the grid stacking above and split icon/text onto separate rows instead of staying inline. */ .checkout-form label.checkout-choice { display: flex; align-items: center; gap: 8px; } .checkout-form label.address-row { display: flex; align-items: center; gap: 12px; } .checkout-form input, .checkout-form select, .checkout-form textarea { width: 100%; border: 1px solid #dcece7; border-radius: 14px; padding: 12px 14px; color: var(--ink); font: inherit; background: #fff; } .confirmation-card { max-width: 760px; margin: 24px auto 0; } .confirmation-card div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #edf4f2; } .confirmation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .orders-list { display: grid; gap: 16px; } .order-card { padding: 22px; } .order-card-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; } .order-card-head h2 { margin: 6px 0 0; font-size: var(--fs-h4); } .order-card-head strong { color: var(--accent-strong); font-size: 20px; } .order-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .order-meta span { padding: 7px 10px; border-radius: 999px; background: var(--mist-100); color: var(--teal); font-size: var(--fs-xs); font-weight: var(--w-bold); } .order-card ul { margin: 0; padding-left: 20px; color: var(--fg-muted); } .account-dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .account-panel { display: flex; gap: 14px; padding: 22px; color: inherit; text-decoration: none; } .account-panel > svg { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-strong); } .account-panel h2 { margin: 4px 0; color: var(--ink); font-size: var(--fs-h4); } .account-panel p, .account-panel small { color: var(--fg-muted); line-height: 1.6; } .account-next-steps { margin-top: 18px; padding: 24px; } .account-next-steps h2 { margin: 0 0 14px; } .account-next-steps div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .account-next-steps a, .order-detail-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: var(--w-bold); text-decoration: none; } .account-next-steps p { margin: 16px 0 0; color: var(--fg-muted); line-height: 1.6; } .order-card-head h2 a { color: inherit; text-decoration: none; } .order-detail-link { margin-top: 14px; } .order-detail-link svg { width: 16px; height: 16px; } .order-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; } .order-detail-card, .order-support-card { padding: 24px; } .order-detail-card h2, .order-support-card h2 { margin: 0 0 14px; } .order-detail-line { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #edf4f2; } .order-detail-line:last-child { border-bottom: 0; } .order-detail-line div { display: grid; gap: 4px; } .order-detail-line span, .order-support-card p { color: var(--fg-muted); line-height: 1.7; } .order-detail-line b { color: var(--accent-strong); } .order-cancel-form { margin-top: 14px; } .order-cancel-form--inline { margin-top: 10px; } .order-cancel-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(229, 72, 77, 0.35); border-radius: 14px; background: #fff5f5; color: var(--danger); padding: 12px 16px; font: inherit; font-size: var(--fs-sm); font-weight: var(--w-semibold); cursor: pointer; } .order-cancel-btn--inline { width: auto; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--fs-xs); } .order-cancel-btn svg { width: 16px; height: 16px; } .order-cancel-note { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--fg-muted); text-align: center; } .order-support-card { margin-top: 24px; } /* Help & Company service pages */ .service-page-body { background: radial-gradient(circle at top left, rgba(0, 121, 107, 0.05), transparent 32%), #fbfaf8; } .service-page { padding-bottom: clamp(48px, 6vw, 80px); } .service-hero { padding: clamp(28px, 4vw, 48px) 0 clamp(22px, 3vw, 32px); border-bottom: 1px solid #ebe6df; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(251,250,248,0.4)); } .service-hero-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .service-hero-copy { max-width: 720px; } .service-eyebrow { display: inline-block; margin-bottom: 10px; color: var(--accent-strong); font-size: 12px; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; } .service-hero h1 { margin: 0 0 12px; color: var(--ink); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.04em; } .service-hero p { margin: 0; max-width: 54ch; color: var(--fg-muted); font-size: 1.05rem; line-height: 1.7; } .service-back { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--accent-strong); font-weight: var(--w-bold); text-decoration: none; } .service-back svg { width: 16px; height: 16px; } .service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 48px); align-items: start; padding-top: clamp(28px, 4vw, 40px); } .service-main { display: grid; gap: 28px; min-width: 0; } .service-block h2 { margin: 0 0 16px; color: var(--ink); font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.02em; } .service-block p { margin: 0 0 14px; color: var(--fg-secondary); font-size: 1rem; line-height: 1.8; } .service-block p:last-child { margin-bottom: 0; } .service-topic-grid, .service-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .service-topic, .service-contact-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid #e8efeC; border-radius: 16px; background: #fff; color: inherit; text-decoration: none; transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); } a.service-topic:hover { border-color: rgba(0, 121, 107, 0.28); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16, 42, 36, 0.06); } .service-topic-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(0, 121, 107, 0.10); color: var(--accent-strong); flex-shrink: 0; } .service-topic-icon svg { width: 20px; height: 20px; } .service-topic-copy { display: grid; gap: 4px; min-width: 0; } .service-topic-copy strong, .service-contact-card strong { color: var(--ink); font-size: 1rem; } .service-topic-copy span, .service-contact-card small { color: var(--fg-muted); font-size: 0.92rem; line-height: 1.55; } .service-topic-arrow { margin-left: auto; width: 16px; height: 16px; color: var(--fg-muted); flex-shrink: 0; } .service-contact-label { display: block; margin-bottom: 4px; color: var(--fg-muted); font-size: 12px; font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase; } .service-contact-card strong { display: block; } .service-contact-card small { display: block; margin-top: 4px; } .service-steps, .service-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .service-steps li, .service-timeline li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; } .service-step-index { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-strong); color: #fff; font-size: 14px; font-weight: var(--w-bold); } .service-steps strong, .service-timeline strong { display: block; margin-bottom: 4px; color: var(--ink); } .service-steps p, .service-timeline p { margin: 0; color: var(--fg-muted); line-height: 1.65; } .service-timeline { position: relative; padding-left: 4px; } .service-timeline li { position: relative; } .service-timeline-dot { width: 14px; height: 14px; margin: 8px 13px 0; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 6px rgba(0, 121, 107, 0.12); } .service-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: -14px; width: 2px; background: #dcece7; } .service-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .service-stat { padding: 20px 18px; border-radius: 16px; background: #fff; border: 1px solid #e8efec; text-align: center; } .service-stat strong { display: block; margin-bottom: 6px; color: var(--accent-strong); font-size: 1.35rem; letter-spacing: -0.02em; } .service-stat span { color: var(--fg-muted); font-size: 0.9rem; } .service-faq { display: grid; gap: 10px; } .service-faq-item { border: 1px solid #e8efec; border-radius: 14px; background: #fff; padding: 4px 16px; } .service-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; color: var(--ink); font-weight: var(--w-bold); } .service-faq-item summary::-webkit-details-marker { display: none; } .service-faq-item summary svg { width: 18px; height: 18px; color: var(--fg-muted); transition: transform var(--dur-base); } .service-faq-item[open] summary svg { transform: rotate(180deg); } .service-faq-item p { margin: 0 0 16px; padding-top: 2px; border-top: 1px solid #f0f4f2; color: var(--fg-muted); line-height: 1.7; } .service-jobs { display: grid; gap: 12px; } .service-job { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px; border: 1px solid #e8efec; border-radius: 16px; background: #fff; } .service-job strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.05rem; } .service-job span { display: block; margin-bottom: 8px; color: var(--accent-strong); font-size: 12px; font-weight: var(--w-bold); } .service-job p { margin: 0; color: var(--fg-muted); line-height: 1.6; } .service-job-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 12px; background: rgba(0, 121, 107, 0.10); color: var(--accent-strong); font-weight: var(--w-bold); text-decoration: none; white-space: nowrap; } .service-callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: rgba(0, 121, 107, 0.06); border: 1px solid rgba(0, 121, 107, 0.14); } .service-callout > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--accent-strong); flex-shrink: 0; } .service-callout strong { display: block; margin-bottom: 4px; color: var(--ink); } .service-callout p { margin: 0; color: var(--fg-secondary); line-height: 1.65; } .service-aside { position: sticky; top: 96px; } .service-aside-card { display: grid; gap: 12px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #e8efec; box-shadow: 0 14px 34px rgba(16, 42, 36, 0.05); } .service-aside-card h2 { margin: 0; font-size: 1.25rem; color: var(--ink); } .service-aside-card > p { margin: 0; color: var(--fg-muted); line-height: 1.65; } .service-aside-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 4px; padding: 0 16px; border-radius: 12px; background: var(--accent-strong); color: #fff; font-weight: var(--w-bold); text-decoration: none; } .service-aside-cta svg { width: 16px; height: 16px; } .service-aside-links { display: grid; gap: 2px; margin-top: 8px; padding-top: 14px; border-top: 1px solid #edf4f2; } .service-aside-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; color: var(--ink); font-weight: var(--w-semibold); text-decoration: none; } .service-aside-links a:hover { color: var(--accent-strong); } .service-aside-links svg { width: 16px; height: 16px; color: var(--fg-muted); } .service-stores-head { margin-bottom: 18px; } .service-stores-head p { margin: 6px 0 0; color: var(--fg-muted); } @media (max-width: 980px) { .service-layout { grid-template-columns: 1fr; } .service-aside { position: static; } .service-hero-inner { flex-direction: column; align-items: flex-start; } .service-topic-grid, .service-contact-grid, .service-stats { grid-template-columns: 1fr; } .service-job { flex-direction: column; align-items: flex-start; } } .store-directory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } .store-directory-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--divider); border-radius: 18px; background: #fff; text-decoration: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); } .store-directory-card:hover { border-color: rgba(0, 121, 107, 0.28); box-shadow: 0 12px 28px rgba(11, 27, 59, 0.08); transform: translateY(-2px); } .store-directory-card-logo { flex: none; width: 52px; height: 52px; border-radius: 14px; object-fit: cover; } .store-directory-card-monogram { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: var(--w-extrabold); color: #fff; background: linear-gradient(135deg, var(--accent-strong), #0f3d38); } .store-directory-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .store-directory-card-copy strong { color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .store-directory-card-copy span { color: var(--accent-strong); font-size: 12.5px; font-weight: var(--w-semibold); } .store-directory-card-copy small { display: flex; align-items: center; gap: 4px; color: var(--fg-muted); font-size: 12px; } .store-directory-card-copy small svg { width: 12px; height: 12px; } @media (max-width: 1080px) { .store-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .store-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .store-directory-grid { grid-template-columns: 1fr; } } .commerce-empty { display: grid; grid-template-columns: auto minmax(0, 620px); align-items: start; gap: 20px; padding: clamp(28px, 5vw, 48px); background: radial-gradient(circle at 90% 10%, rgba(0,200,83,0.12), transparent 24%), #fff; } .commerce-empty > svg { width: 58px; height: 58px; padding: 15px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-strong); } .commerce-empty h2 { margin: 0; color: var(--ink); font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.04em; } .commerce-empty p { margin: 10px 0 20px; color: var(--fg-secondary); line-height: 1.7; } .commerce-recommendations { margin-top: clamp(28px, 5vw, 54px); } .wishlist-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } @media (max-width: 1100px) { .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: relative; top: auto; } .wishlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .commerce-head { display: grid; align-items: start; } .commerce-empty, .wishlist-grid { grid-template-columns: 1fr; } } .admin-commerce-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .admin-commerce-card { display: grid; gap: 6px; padding: 15px; border: 1px solid #d9e9e5; border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(247,253,251,0.96)), radial-gradient(circle at 100% 0%, rgba(0,121,107,0.10), transparent 34%); color: var(--ink); box-shadow: 0 10px 28px rgba(6,59,52,0.05); } .admin-commerce-card svg { width: 28px; height: 28px; padding: 7px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-strong); } .admin-commerce-card span, .admin-commerce-card small { color: var(--fg-muted); font-size: 12px; font-weight: var(--w-semibold); } .admin-commerce-card strong { color: var(--ink); font-size: 24px; line-height: 1; } .admin-workbench { display: grid; grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1.18fr); gap: 14px; margin-bottom: 14px; } .admin-vendor-payout-form .admin-filter-field:has(textarea) { grid-column: 1 / -1; } .admin-control-card .admin-card-head { margin-bottom: 12px; } .admin-control-card .admin-card-head p { margin: 5px 0 0; color: var(--fg-muted); font-size: 13px; } .admin-filter-form, .admin-create-form { display: grid; gap: 10px; } .admin-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-filter-field { display: grid; gap: 5px; } .admin-filter-field label { color: var(--fg-muted); font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; } .admin-filter-field input, .admin-filter-field select, .admin-filter-field textarea { width: 100%; min-height: 39px; border: 1px solid #d9e9e5; border-radius: 12px; background: #fbfefd; color: var(--ink); padding: 0 11px; font: inherit; font-size: 13px; } .admin-filter-field textarea { min-height: 110px; resize: vertical; } .admin-filter-field input[readonly] { background: #f0f4f3; color: var(--fg-muted); cursor: default; } .admin-checkbox-field { min-height: 39px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: 13px; text-transform: none; letter-spacing: 0; } .admin-checkbox-field input { width: auto; min-height: 0; accent-color: var(--accent); } .locale-switch { display: inline-flex; } .locale-switch button { min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--indigo); font-weight: var(--w-semibold); cursor: pointer; } .mega-nav { gap: 0; } .mega-nav-item { position: static; } .mega-dropdown { left: 50%; width: min(780px, calc(100vw - 32px)); grid-template-columns: 220px 1fr; gap: 12px; padding: 12px; } .nav-item:hover > .mega-dropdown, .nav-item:focus-within > .mega-dropdown { display: grid; } .mega-feature { min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(14, 19, 32, 0.05), rgba(14, 19, 32, 0.72)), var(--mist-100); background-size: cover; background-position: center; color: #fff; overflow: hidden; } .mega-feature span { font-size: var(--fs-xs); opacity: 0.9; } .mega-feature b { font-size: 22px; line-height: 1.05; } .mega-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; } .mega-dd-item { min-height: 64px; border: 1px solid transparent; } .mega-dd-item:hover { border-color: var(--border); } .drawer-sub-link { padding-inline-start: 24px !important; color: var(--fg-muted) !important; font-size: 14px; } [dir="rtl"] body { direction: rtl; } [dir="rtl"] .nav-inner, [dir="rtl"] .nav-actions, [dir="rtl"] .drawer-head, [dir="rtl"] .cart-line, [dir="rtl"] .footer-grid, [dir="rtl"] .checkout-layout, [dir="rtl"] .admin-shell { direction: rtl; } [dir="rtl"] .dropdown { text-align: right; } [dir="rtl"] .nav-search i { left: auto; right: 12px; } [dir="rtl"] .nav-search input { padding-left: 12px; padding-right: 38px; } @media (max-width: 900px) { .locale-switch button { min-width: 44px; padding: 0 10px; } .mega-dropdown { display: none; } } .admin-mini-button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid #d9e9e5; border-radius: 12px; background: #fff; color: var(--accent-strong); font-size: 13px; font-weight: var(--w-bold); } .admin-mini-button-primary { grid-column: 1 / -1; border-color: transparent; background: var(--cta); color: #fff; } .admin-mini-button-danger { border-color: #f1c9c9; background: #fff5f5; color: #dc2626; } .admin-mini-button-danger:hover { border-color: #ef9999; background: #feecec; } .admin-mini-button svg { width: 15px; height: 15px; } .admin-flash { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid rgba(0,121,107,0.18); border-radius: 14px; background: #eefaf5; color: var(--accent-strong); font-size: 13px; font-weight: var(--w-semibold); } .admin-flash-error { border-color: rgba(201,52,52,0.18); background: #fff2f2; color: #b83232; } .admin-flash svg { width: 17px; height: 17px; } .admin-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .admin-row-actions form { margin: 0; } .admin-row-actions button { border: 1px solid #d9e9e5; border-radius: var(--r-pill); background: #fff; color: var(--accent-strong); padding: 5px 8px; font-size: 11px; font-weight: var(--w-bold); } .admin-row-link { display: inline-flex; align-items: center; border: 1px solid #d9e9e5; border-radius: var(--r-pill); background: var(--accent); color: #fff; padding: 5px 10px; font-size: 11px; font-weight: var(--w-bold); text-decoration: none; white-space: nowrap; } .admin-row-link:hover { background: var(--accent-strong); color: #fff; } .admin-name-link { color: var(--accent); text-decoration: none; font-weight: inherit; } .admin-name-link:hover { color: var(--accent-strong); text-decoration: underline; } .admin-order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); gap: 20px; align-items: start; } .admin-order-detail-grid > .admin-panel-card:nth-child(2) { grid-column: 1; } .admin-order-side-card { grid-column: 2; grid-row: 1 / span 2; } .admin-order-summary-card { grid-column: 1; } .admin-order-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #edf3f1; } .admin-order-meta-grid > div { min-width: 0; border-inline-start: 1px solid #e5eeeb; padding-inline-start: 28px; } .admin-order-meta-grid > div:first-child { border-inline-start: 0; padding-inline-start: 0; } .admin-order-meta-grid p > strong { color: var(--ink); } .admin-order-meta-grid p { margin: 6px 0 0; color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.6; } .admin-order-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .admin-order-total-line { margin-top: 8px !important; font-size: var(--fs-body) !important; color: var(--ink) !important; } .admin-order-payable-line strong { color: var(--accent-strong, #06603f) !important; } .admin-order-variant { display: block; color: var(--fg-muted); } .admin-pending-review-card { border-color: rgba(217, 119, 6, 0.3); } .admin-pending-change-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #edf3f1; } .admin-pending-change-grid p { margin: 6px 0 0; color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.6; } .admin-pending-change-grid p strong { color: var(--ink); } /* Rendered rich-text description in the pending-changes diff, so the reviewer sees the real formatting and any inline images. */ .admin-pending-richtext { padding: 10px 12px; border: 1px solid #edf3f1; border-radius: 10px; background: #fbfdfc; color: var(--ink); font-size: var(--fs-sm); line-height: 1.6; } .admin-pending-richtext > *:first-child { margin-top: 0; } .admin-pending-richtext > *:last-child { margin-bottom: 0; } .admin-pending-richtext img { max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; } .admin-order-address-block p { margin: 0 0 8px; color: var(--ink); line-height: 1.5; } .admin-order-note-block, .admin-order-notes p { margin: 0; color: var(--fg-muted); line-height: 1.6; } .admin-order-notes { margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf4f2; } .admin-order-timestamps { margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf4f2; } .admin-order-timestamps p { margin: 4px 0 0; color: var(--fg-muted); font-size: var(--fs-sm); } .admin-order-map { width: 100%; height: 220px; border-radius: 14px; overflow: hidden; border: 1px solid #dcece7; margin-top: 14px; } @media (max-width: 1080px) { .admin-order-detail-grid { grid-template-columns: 1fr; } .admin-order-side-card, .admin-order-summary-card, .admin-order-detail-grid > .admin-panel-card:nth-child(2) { grid-column: auto; grid-row: auto; } .admin-order-meta-grid { grid-template-columns: 1fr; gap: 16px; } .admin-order-meta-grid > div { border-inline-start: 0; padding-inline-start: 0; padding-top: 16px; border-top: 1px solid #e5eeeb; } .admin-order-meta-grid > div:first-child { padding-top: 0; border-top: 0; } } .admin-muted { color: var(--fg-muted); font-size: 12px; } /* Admin product-requests list: inline status control, filter bar, and the windowed pagination partial (admin/partials/pagination.blade.php). */ .admin-inline-select { min-height: 36px; padding: 0 10px; border: 1px solid #d9e9e5; border-radius: 9px; background: #fff; color: var(--ink); font-family: inherit; font-size: 13px; } .admin-inline-select:focus { outline: none; border-color: var(--accent-strong); } .admin-filters-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 16px; } .admin-pagination { margin-top: 18px; } .admin-pagination-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .admin-page-link, .admin-page-num { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 11px; border: 1px solid #d9e9e5; border-radius: 9px; background: #fff; color: var(--accent-strong); font-size: 13px; font-weight: var(--w-semibold); text-decoration: none; } .admin-page-link:hover, .admin-page-num:hover { border-color: var(--accent-strong); } .admin-page-link svg { width: 14px; height: 14px; } .admin-page-link.is-disabled { opacity: 0.45; pointer-events: none; } .admin-page-num.is-current { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } .admin-page-numbers { display: inline-flex; align-items: center; gap: 6px; } .admin-page-gap { color: var(--fg-muted); font-size: 13px; } @media (max-width: 1180px) { .admin-commerce-grid, .admin-workbench { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .admin-commerce-grid, .admin-workbench, .admin-create-form { grid-template-columns: 1fr; } } .admin-login-page { min-height: 100vh; display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); background: radial-gradient(circle at 12% 12%, rgba(0,200,83,0.16), transparent 28%), radial-gradient(circle at 88% 18%, rgba(95,211,194,0.16), transparent 24%), linear-gradient(145deg, #041815 0%, #063b34 100%); } .admin-login-card { width: min(100%, 1080px); min-height: 650px; display: grid; grid-template-columns: 1fr minmax(400px, 0.78fr); overflow: hidden; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-2xl); background: #fff; box-shadow: 0 34px 90px rgba(0,0,0,0.34); } .admin-login-brand { align-self: flex-start; } .admin-login-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 56px); color: var(--ink); } .admin-login-panel h2 { margin: 14px 0 0; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); } .admin-login-panel p { margin: 10px 0 24px; color: var(--fg-secondary); } @media (max-width: 1180px) { .admin-stat-grid { grid-template-columns: repeat(2, 1fr); } .admin-span-7, .admin-span-5 { grid-column: 1 / -1; } } @media (max-width: 940px) { .admin-shell { grid-template-columns: 1fr; } .admin-sidebar { position: relative; height: auto; max-height: none; overflow: visible; } .admin-main { margin: 0; border-radius: 0; } .admin-nav-section { margin-bottom: 12px; } .admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .admin-side-card { margin-top: 18px; } .admin-login-card { grid-template-columns: 1fr; } } @media (max-width: 640px) { .admin-content, .admin-topbar, .admin-sidebar, .admin-login-panel { padding: 22px; } .admin-topbar, .admin-page-head, .admin-card-head { flex-direction: column; align-items: stretch; } .admin-stat-grid, .admin-nav { grid-template-columns: 1fr; } .admin-task { grid-template-columns: auto 1fr; } .admin-task a { grid-column: 2; } } /* ============================================================ AUTH REDESIGN v2 Cleaner marketplace account experience. ============================================================ */ .auth-body { background: radial-gradient(circle at 12% 14%, rgba(0,200,83,0.12), transparent 24%), radial-gradient(circle at 88% 8%, rgba(0,121,107,0.14), transparent 28%), linear-gradient(135deg, #f7fbfa 0%, #eef7f5 48%, #f7f1e8 100%); } .auth-shell { width: min(100%, 640px); } .auth-card { display: block; min-height: auto; overflow: visible; background: rgba(255,255,255,0.78); border: 1px solid rgba(0,121,107,0.13); border-radius: 34px; box-shadow: 0 30px 90px rgba(6,59,52,0.14); backdrop-filter: blur(18px); } .auth-panel { justify-content: flex-start; padding: clamp(30px, 5vw, 56px); background: #fff; border-radius: 34px; box-shadow: 0 18px 60px rgba(6,59,52,0.10); } .auth-panel .auth-brand { margin-bottom: 34px; } .auth-panel-head { margin-bottom: 22px; } .auth-panel h2 { font-size: clamp(32px, 4vw, 44px); } .auth-panel p { max-width: 520px; line-height: 1.7; } .auth-tabs { grid-template-columns: repeat(2, 1fr); } .auth-tab, .choice-card, .field-control { border-color: #d7e9e4; background: #fbfefd; } .field-control { min-height: 56px; border-radius: 15px; } .auth-submit { min-height: 56px; border-radius: 15px; } .auth-note { background: #eef7f5; color: #0a544a; } @media (max-width: 980px) { .auth-card { grid-template-columns: 1fr; } } @media (max-width: 640px) { .auth-page { padding: 14px; } .auth-panel, .auth-card { border-radius: 24px; } .auth-panel .auth-brand { margin-bottom: 24px; } } /* ============================================================ ADMIN LOGIN REDESIGN v2 Secure console entrance, visually separate from customer auth. ============================================================ */ .admin-login-page { background: radial-gradient(circle at 18% 18%, rgba(0,200,83,0.16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(95,211,194,0.12), transparent 28%), linear-gradient(145deg, #03110f 0%, #05231f 46%, #071b18 100%); } .admin-login-card { width: min(100%, 520px); min-height: auto; display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .admin-login-panel { padding: clamp(26px, 4vw, 42px); border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; background: #f8fbfa; box-shadow: 0 26px 70px rgba(0,0,0,0.28); } .admin-login-panel .admin-login-brand { margin-bottom: 34px; color: var(--indigo); } .admin-login-panel .admin-login-brand i { color: var(--accent-strong); } .admin-login-panel h2 { color: var(--ink); font-size: clamp(30px, 3.4vw, 40px); } .admin-login-panel p { margin-bottom: 24px; } .admin-login-panel .auth-note { background: #fff7ed; color: #9a4c00; } @media (max-width: 620px) { .admin-login-card { border-radius: 24px; } .admin-login-panel { border-radius: 22px; } } /* ============================================================ AUTH FINAL POLISH Reference-inspired focused auth cards. ============================================================ */ .auth-body { background: radial-gradient(circle at 50% 24%, rgba(221,243,234,0.78), rgba(255,255,255,0) 34%), radial-gradient(circle at 50% 76%, rgba(0,121,107,0.08), rgba(0,0,0,0) 34%), #f4f4f4; } .auth-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.22; background-image: radial-gradient(rgba(0,121,107,0.20) 0.55px, transparent 0.55px); background-size: 18px 18px; } .auth-page { padding: clamp(22px, 5vw, 52px) 18px; align-items: start; } .auth-shell { width: min(100%, 520px); } .auth-card { border-radius: 24px; background: rgba(255,255,255,0.66); border: 1px solid rgba(0,121,107,0.14); box-shadow: 0 22px 58px rgba(6,59,52,0.13); backdrop-filter: blur(16px); } .auth-panel { padding: clamp(26px, 4vw, 36px); border-radius: 24px; background: rgba(255,255,255,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); } .auth-panel-head { text-align: center; margin: 0 0 26px; } .auth-panel-head h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; color: var(--ink); font-size: clamp(38px, 6vw, 48px); line-height: 1; letter-spacing: -0.06em; } .auth-title-line { display: block; width: 52px; height: 3px; margin: 16px auto 0; border-radius: var(--r-pill); background: var(--accent); } .auth-panel-head p { max-width: 420px; margin: 14px auto 0; color: var(--fg-secondary); } .auth-method-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin-bottom: 24px; border: 1px solid rgba(0,121,107,0.12); border-radius: 15px; background: #e5f1ed; box-shadow: inset 0 2px 4px rgba(6,59,52,0.05); } .auth-method-tabs button { min-height: 46px; border: 0; border-radius: 12px; background: transparent; color: var(--fg-secondary); display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: var(--w-bold); transition: background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); } .auth-method-tabs button.is-active { background: #fff; color: var(--accent-strong); box-shadow: 0 8px 18px rgba(6,59,52,0.10); } .auth-method-tabs svg { width: 18px; height: 18px; } .auth-method-panel { display: none; } .auth-method-panel.is-active { display: grid; gap: 15px; } .auth-verify-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 8px; } .auth-verify-actions form, .auth-verify-actions form .btn-link, .auth-verify-actions > a { margin: 0; } .auth-attempts-note { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: rgba(251, 140, 0, 0.10); border: 1px solid rgba(251, 140, 0, 0.22); color: #9a5b00; font-size: 13px; font-weight: var(--w-semibold); } .auth-attempts-note svg { width: 16px; height: 16px; flex-shrink: 0; } .auth-form { gap: 15px; } .field label, .field-label-row label { color: var(--ink); font-size: 14px; margin-bottom: 8px; } .field-control { min-height: 52px; border-radius: 9px; border: 1px solid #d7e9e4; background: rgba(255,255,255,0.78); } .auth-submit { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 180px; min-height: 50px; margin: 20px auto 0; padding-inline: 28px; border-radius: 999px; background: linear-gradient(135deg, var(--cta), var(--cta-strong)); box-shadow: 0 14px 24px rgba(0,200,83,0.23); color: #fff; font-size: 17px; justify-self: center; } .auth-submit:hover { background: linear-gradient(135deg, var(--cta-strong), #009f42); } .btn-link { display: block; margin: 12px auto 0; padding: 4px; background: none; border: 0; color: var(--accent-strong); font-size: var(--fs-sm); font-weight: var(--w-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .auth-switch { margin: 26px auto 0 !important; padding: 15px 18px; border: 1px solid rgba(0,121,107,0.10); border-radius: 14px; background: rgba(255,255,255,0.70); color: var(--fg-secondary); box-shadow: 0 10px 24px rgba(6,59,52,0.06); } .auth-switch a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 5px; } .choice-card { border-radius: 14px; border-color: #d7e9e4; } @media (max-width: 640px) { .auth-shell { width: min(100%, 560px); } .auth-panel { padding: 28px 22px; } .auth-method-tabs, .account-choice, .field-grid { grid-template-columns: 1fr; } } /* ============================================================ ADMIN LOGIN FINAL POLISH Simple centered professional card. ============================================================ */ .admin-login-page { background: radial-gradient(circle at 50% -10%, rgba(95,211,194,0.15), transparent 34%), linear-gradient(135deg, #063b34 0%, #0a544a 100%); } .admin-login-card { width: min(100%, 470px); } .admin-login-panel { position: relative; overflow: hidden; padding: 40px 38px 32px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,0.28); } .admin-login-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--accent); } .admin-login-logo { display: flex; justify-content: center; margin: 0 auto 24px; } .admin-login-logo img { width: 88px; height: auto; } .admin-panel-badge { width: max-content; margin: 0 auto 28px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border: 1px solid rgba(0,121,107,0.42); border-radius: var(--r-pill); color: var(--accent-strong); background: var(--accent-soft); font-size: 13px; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; } .admin-panel-badge svg { width: 16px; height: 16px; } .admin-error-box { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(193,76,76,0.22); border-radius: 8px; background: #fff4f2; color: #92312d; font-size: 13px; line-height: 1.45; } .admin-error-box svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; } .admin-login-panel .field label { color: #3f4656; } .admin-login-panel .field-control { min-height: 48px; border-radius: 7px; background: #fafafa; } .admin-remember-row { margin-top: -2px; color: #626b7c; } .admin-login-panel .auth-submit { width: 100%; border-radius: 7px; margin-top: 24px; background: var(--cta); box-shadow: none; } .admin-login-panel .auth-submit:hover { background: var(--cta-strong); } .admin-back-store { display: block; margin-top: 28px; text-align: center; color: var(--accent-strong); font-weight: var(--w-medium); } @media (max-width: 620px) { .admin-login-panel { padding: 42px 24px 30px; } } /* Prototype-inspired YESLAMU fashion marketplace header */ .prototype-announce { background: #15110d; color: #fff7ed; border: 0; font-size: 12px; letter-spacing: 0.02em; } .prototype-announce .announce-track { gap: 26px; padding-block: 10px; } @media (prefers-reduced-motion: reduce) { .prototype-announce .announce-track { justify-content: center; } } .prototype-announce .dot { background: #d8a552; box-shadow: 0 0 0 4px rgba(216,165,82,0.18); } .prototype-header { position: sticky; top: 0; z-index: 70; background: rgba(255, 252, 246, 0.96); border-bottom: 1px solid rgba(67, 44, 24, 0.12); box-shadow: 0 16px 42px rgba(49, 31, 16, 0.06); backdrop-filter: blur(18px); } .prototype-topline { min-height: 74px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 560px) minmax(0, 1fr); align-items: center; gap: 20px; } .prototype-brand { justify-self: start; display: inline-flex; flex-direction: row; align-items: center; gap: 12px; color: #201914; } .prototype-search-center { justify-self: center; width: 100%; max-width: 560px; } .prototype-brand img { height: 38px; width: auto; object-fit: contain; border-radius: 12px; } .prototype-brand .word { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #201914; white-space: nowrap; } .prototype-utilities { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; } .prototype-header .prototype-search { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; border: 1px solid rgba(67,44,24,0.14); border-radius: 999px; background: #fff; } .prototype-search-icon { width: 18px; height: 18px; flex: 0 0 18px; color: #746659; } .prototype-header .prototype-search input { flex: 1 1 auto; width: 100%; min-width: 0; border: none; outline: none; background: transparent; color: #201914; font-size: 14px; } .prototype-search-button { flex: 0 0 auto; height: 34px; padding: 0 16px; border: none; border-radius: 999px; background: #201914; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 180ms ease; } .prototype-search-button:hover { background: #8b5e2e; } .prototype-header .icon-btn, .prototype-header .account-trigger { color: #2b231d; border-radius: 999px; } .prototype-header .icon-btn:hover, .prototype-header .account-trigger:hover { background: #f3eadf; } .prototype-header .locale-switch button { min-height: 36px; border-color: rgba(67,44,24,0.14); background: #fff; color: #2b231d; } .prototype-nav-shell { min-height: 46px; display: flex; justify-content: center; align-items: center; border-top: 1px solid rgba(67,44,24,0.08); } .prototype-nav { width: 100%; justify-content: center; gap: 0; } .prototype-nav .nav-item { position: relative; } .prototype-nav .nav-item > a { min-height: 46px; padding: 0 10px; border-radius: 0; color: #2e261f; font-size: 11.5px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; white-space: nowrap; } .prototype-nav .nav-item > a::after { left: 14px; right: 14px; bottom: 7px; height: 1px; background: #8b5e2e; } .prototype-nav .nav-item > a.sale { color: #b14a25; } .prototype-nav .nav-item > a.sale::after { background: #b14a25; } .prototype-nav .nav-item > a.nav-action { min-height: 34px; margin: 6px 2px; padding: 0 14px; border: 1px solid rgba(67, 44, 24, 0.12); border-radius: 999px; background: #fff; letter-spacing: 0.02em; } .prototype-nav .nav-item > a.nav-action::after { display: none; } .prototype-nav .nav-item > a.nav-action.sale { border-color: rgba(177, 74, 37, 0.22); background: rgba(177, 74, 37, 0.08); } .prototype-nav .nav-item > a.nav-action:hover { border-color: rgba(139, 94, 46, 0.28); background: #f8efe3; } .prototype-nav .nav-item > a.nav-action.sale:hover { border-color: rgba(177, 74, 37, 0.34); background: rgba(177, 74, 37, 0.12); } .prototype-nav .nav-item-link { position: relative; } .prototype-mega { top: calc(100% - 1px); left: 0; right: auto; width: min(280px, calc(100vw - 48px)); min-height: auto; min-width: 0; padding: 8px; border: 1px solid rgba(67,44,24,0.12); border-radius: 0 0 16px 16px; background: rgba(255,252,246,0.98); box-shadow: 0 18px 48px rgba(49,31,16,0.14); transform: translateY(8px); } .prototype-nav .nav-item:hover > .prototype-mega, .prototype-nav .nav-item:focus-within > .prototype-mega { display: block; transform: translateY(0); } .prototype-mega-links { display: flex; flex-direction: column; gap: 4px; } .prototype-mega-links .mega-dd-item { min-height: 0; padding: 6px 8px; border-radius: 10px; border: 1px solid rgba(67,44,24,0.06); background: #fff; gap: 10px; } .prototype-mega-links .mega-dd-item:hover { background: #f8efe3; border-color: rgba(139,94,46,0.18); } .prototype-mega-links .dd-img { width: 32px; height: 32px; } .prototype-mega-links .dd-icon { width: 32px; height: 32px; } .prototype-mega-links .dd-icon svg { width: 14px; height: 14px; } .dd-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #f3eadf; color: #8b5e2e; } .dd-icon svg { width: 18px; height: 18px; } .prototype-mega-links .dd-tx { line-height: 1.2; } .prototype-mega-links .dd-tx b { color: #201914; font-size: 13px; font-weight: 600; } [dir="rtl"] .prototype-nav, [dir="rtl"] .prototype-mega { direction: rtl; } [dir="rtl"] .prototype-mega { left: auto; right: 0; } @media (max-width: 1100px) { .prototype-topline { grid-template-columns: minmax(0, 1fr) minmax(220px, 420px) minmax(0, 1fr); gap: 14px; } .prototype-search-center { max-width: 420px; } .prototype-search-button { padding: 0 12px; } .prototype-nav .nav-item > a { padding: 0 7px; font-size: 10.5px; letter-spacing: 0.015em; } } @media (max-width: 900px) { .prototype-topline { grid-template-columns: 1fr auto; min-height: 64px; } .prototype-brand img { height: 34px; } .prototype-brand .word { font-size: 18px; } .prototype-search-center, .prototype-nav-shell { display: none; } } .cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .section-merch { background: linear-gradient(180deg, rgba(0,121,107,0.05), rgba(255,255,255,0)); } .section-merch-alt { background: linear-gradient(180deg, rgba(236,157,33,0.08), rgba(255,255,255,0)); } .merch-grid:empty { display: none; } .shop-visual-section { margin: 8px 0 30px; } .shop-visual-head { display: grid; gap: 6px; margin-bottom: 14px; } .shop-visual-head h3 { margin: 0; font-size: clamp(22px, 2.5vw, 28px); letter-spacing: -0.03em; } .shop-visual-categories { display: flex; flex-wrap: wrap; gap: 24px 16px; margin: 0; } .shop-visual-category { position: relative; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .shop-visual-category::after { content: none; } .shop-visual-img { position: relative; inset: auto; width: 96px; height: 96px; flex: none; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); background: var(--mist-100); box-shadow: 0 10px 22px rgba(6, 59, 52, 0.10); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); } .shop-visual-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .shop-visual-category:hover .shop-visual-img { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(6, 59, 52, 0.16); } .shop-visual-category:hover .shop-visual-img img { transform: scale(1.08); } .shop-visual-copy { position: static; z-index: auto; display: grid; gap: 0; padding: 0; color: var(--ink); justify-items: center; } .shop-visual-copy small { display: none; } .shop-visual-copy b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 104px; font-size: 13px; font-weight: var(--w-semibold); line-height: 1.25; letter-spacing: -0.005em; color: var(--ink); } .shop-visual-category.is-active .shop-visual-img { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 10px 22px rgba(6, 59, 52, 0.14); } .shop-visual-category.is-active .shop-visual-copy b { color: var(--accent-strong); } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 28px; } .hero-copy, .hero-copy-stage { justify-self: stretch; margin-inline: 0; } .shop-visual-categories { gap: 20px 12px; } } body.modal-open { overflow: hidden; } .product-request-modal[hidden] { display: none !important; } .product-request-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px 16px; } .product-request-scrim { position: absolute; inset: 0; background: rgba(14, 19, 32, 0.52); backdrop-filter: blur(4px); } .product-request-dialog { position: relative; z-index: 1; width: min(100%, 480px); max-height: min(92vh, 760px); overflow: auto; padding: 28px 24px 24px; border: 1px solid rgba(67, 44, 24, 0.12); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 252, 246, 0.99), #fff); box-shadow: 0 28px 80px rgba(49, 31, 16, 0.22); } .product-request-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(67, 44, 24, 0.06); color: #2e261f; cursor: pointer; transition: background var(--dur-base), transform var(--dur-base); } .product-request-close:hover { background: rgba(67, 44, 24, 0.12); transform: translateY(-1px); } .product-request-close svg { width: 18px; height: 18px; } .product-request-panel h2 { margin: 8px 0 0; font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.03em; } .product-request-product { margin: 10px 0 0; color: #8b5e2e; font-size: 14px; font-weight: var(--w-semibold); } .product-request-lead { margin: 10px 0 18px; color: var(--fg-muted); font-size: 14px; line-height: 1.6; } .product-request-form { display: grid; gap: 14px; } .product-request-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .product-request-grid { grid-template-columns: 1fr; } } .product-request-form label { display: grid; gap: 6px; } .product-request-form label span { color: var(--fg-muted); font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; } .product-request-form input, .product-request-form textarea { width: 100%; min-height: 44px; padding: 11px 14px; border: 1px solid rgba(67, 44, 24, 0.12); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; transition: border-color var(--dur-base), box-shadow var(--dur-base); } .product-request-form textarea { min-height: 108px; resize: vertical; } .product-request-form input:focus, .product-request-form textarea:focus { outline: none; border-color: rgba(0, 121, 107, 0.32); box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.10); } .product-request-error { margin: 0; color: var(--danger); font-size: 13px; font-weight: var(--w-semibold); } .product-request-submit { width: 100%; min-height: 48px; margin-top: 4px; } .product-request-success[hidden] { display: none !important; } .product-request-success { display: grid; justify-items: center; gap: 12px; padding: 18px 8px 8px; text-align: center; } .product-request-success-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 121, 107, 0.10); color: var(--accent-strong); } .product-request-success-icon svg { width: 28px; height: 28px; } .product-request-success p { margin: 0; color: var(--fg-muted); line-height: 1.6; } .product-request-success .btn { min-width: 140px; margin-top: 8px; } @media (max-width: 620px) { .product-request-dialog { padding: 24px 18px 18px; border-radius: 20px; } } /* ============================================================ QUICK ADD — color/size picker modal (product cards) ============================================================ */ .quick-add-modal[hidden] { display: none !important; } .quick-add-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px 16px; } .quick-add-scrim { position: absolute; inset: 0; background: rgba(14, 19, 32, 0.52); backdrop-filter: blur(4px); } .quick-add-dialog { position: relative; z-index: 1; width: min(100%, 1080px); max-height: min(92vh, 720px); overflow: auto; padding: 28px; border: 1px solid #e7ece9; border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(6, 59, 52, 0.22); } .quick-add-close { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(14, 19, 32, 0.06); color: var(--ink); cursor: pointer; transition: background var(--dur-base), transform var(--dur-base); } .quick-add-close:hover { background: rgba(14, 19, 32, 0.12); transform: translateY(-1px); } .quick-add-close svg { width: 17px; height: 17px; } .quick-add-loading[hidden], .quick-add-layout[hidden] { display: none !important; } .quick-add-loading { display: grid; place-items: center; padding: 90px 0; } .quick-add-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(0, 121, 107, 0.16); border-top-color: var(--accent-strong, #00796b); animation: quick-add-spin 0.7s linear infinite; } @keyframes quick-add-spin { to { transform: rotate(360deg); } } .quick-add-layout { display: grid; /* Two equal halves — gallery and details get the same width. minmax(0,1fr) rather than plain 1fr so a wide child (a long product title, the personalization inputs) can't push its column past its share. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; /* Centre the two columns against each other so a short details panel sits level with the middle of the image instead of hugging the top. */ align-items: center; } .quick-add-gallery { display: flex; gap: 10px; align-items: flex-start; } /* The dialog itself is the scroll container (overflow: auto on .quick-add-dialog), so a tall details column scrolls the image out of view. Pin the gallery to the top of that scrollport instead. align-self: start is required — the layout centres its columns, and a grid item that fills its row has no room to travel. Only above the 620px breakpoint, where the two columns still sit side by side; below that they stack and a pinned image would cover the details. */ @media (min-width: 621px) { .quick-add-gallery { position: sticky; top: 0; align-self: start; } } .quick-add-gallery-thumbs { display: flex; flex-direction: column; gap: 8px; width: 56px; /* Matches .quick-add-gallery-main's height so the strip and the image line up top and bottom. */ max-height: 420px; overflow-y: auto; /* Thumbnails sit to the left of the main image. Done with order rather than by reordering the markup so the main image stays first in the DOM for screen readers. */ order: -1; } .quick-add-gallery-thumbs img { width: 56px; height: 56px; border-radius: 8px; border: 1.5px solid #e7ece9; object-fit: cover; cursor: pointer; transition: border-color var(--dur-base); } .quick-add-gallery-thumbs img:hover { border-color: rgba(0, 121, 107, 0.4); } .quick-add-gallery-thumbs img.is-active { border-color: var(--accent-strong, #00796b); } .quick-add-gallery-main { flex: 1 1 auto; min-width: 0; height: 420px; border-radius: 14px; overflow: hidden; background: #f4f6f5; } .quick-add-gallery-main img { width: 100%; height: 100%; object-fit: cover; } .quick-add-details { display: grid; align-content: start; gap: 6px; min-width: 0; } .quick-add-title { margin: 0; font-size: 17px; font-weight: var(--w-bold); line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .quick-add-sku { margin: 2px 0 0; color: var(--fg-muted); font-size: 12px; } .quick-add-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: inherit; text-decoration: none; width: fit-content; } .quick-add-stars { display: inline-flex; align-items: center; gap: 1px; color: #f4b400; } .quick-add-stars svg { width: 14px; height: 14px; fill: currentColor; } .quick-add-stars .is-empty { opacity: 0.28; fill: none; color: #d0d0d0; } .quick-add-review-count { color: var(--fg-muted); font-size: 13px; font-weight: var(--w-semibold); } .quick-add-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .quick-add-price .now { color: var(--accent-strong, #00796b); font-size: 24px; font-weight: var(--w-extrabold); letter-spacing: -0.02em; line-height: 1; } .quick-add-price .was { color: var(--fg-muted); font-size: 14px; font-weight: var(--w-semibold); text-decoration: line-through; } .quick-add-price .off { padding: 3px 7px; border-radius: 999px; background: #fde8ef; color: #d81b60; font-size: 10px; font-weight: var(--w-bold); } .quick-add-group[hidden] { display: none !important; } .quick-add-group { display: grid; gap: 8px; margin-top: 14px; } /* Handmade preorder personalization inside the quick-add modal. Reuses the product page's .pd-field styling so both entry points look identical. */ .quick-add-personalization { gap: 12px; padding: 12px; border-radius: 12px; background: #f5fbf9; border: 1px solid rgba(0,121,107,0.1); } .quick-add-personalization .pd-field[hidden] { display: none; } .quick-add-group-label { font-size: 13px; font-weight: var(--w-semibold); color: var(--ink); } .quick-add-group-label b { font-weight: var(--w-bold); } .quick-add-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .quick-add-swatch { width: 32px; height: 32px; padding: 0; border: 2px solid rgba(0, 0, 0, 0.14); border-radius: 50%; cursor: pointer; transition: transform var(--dur-base), box-shadow var(--dur-base); } .quick-add-swatch:hover { transform: scale(1.06); } .quick-add-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent-strong, #00796b); } .quick-add-sizes { display: flex; flex-wrap: wrap; gap: 8px; } .quick-add-size-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 36px; padding: 0 10px; border: 1px solid #dcece7; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; font-weight: var(--w-bold); cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base); } .quick-add-size-btn:hover { border-color: rgba(0, 121, 107, 0.35); background: #f7fcfb; } .quick-add-size-btn.is-active { border-color: var(--accent-strong, #00796b); background: var(--accent-strong, #00796b); color: #fff; } .quick-add-view-details { display: inline-flex; align-items: center; gap: 2px; margin-top: 14px; color: var(--accent-strong, #00796b); font-size: 13px; font-weight: var(--w-semibold); text-decoration: none; width: fit-content; } .quick-add-view-details:hover { text-decoration: underline; } .quick-add-view-details svg { width: 15px; height: 15px; } .quick-add-stock { margin: 10px 0 0; font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--fg-muted); } .quick-add-stock.is-out { color: var(--danger); } .quick-add-error { margin: 10px 0 0; color: var(--danger); font-size: 13px; font-weight: var(--w-semibold); } .quick-add-actions { display: flex; gap: 10px; margin-top: 16px; } .quick-add-submit { flex: 1 1 auto; min-height: 48px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; font-weight: var(--w-bold); cursor: pointer; transition: background var(--dur-base), transform var(--dur-base); } .quick-add-submit:hover:not(:disabled) { background: #000; transform: translateY(-1px); } .quick-add-submit:disabled { opacity: 0.4; cursor: not-allowed; } .quick-add-wish { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #dcece7; border-radius: 12px; background: #fff; color: var(--fg-muted); cursor: pointer; transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base); } .quick-add-wish:hover { border-color: rgba(220, 38, 38, 0.35); color: var(--danger); } .quick-add-wish svg { width: 19px; height: 19px; } .quick-add-wish.is-active { border-color: var(--danger); background: #fef2f2; color: var(--danger); } .quick-add-wish.is-active svg { fill: currentColor; } @media (max-width: 620px) { .quick-add-dialog { padding: 20px 18px; border-radius: 20px; max-height: 94vh; } .quick-add-layout { grid-template-columns: 1fr; } .quick-add-gallery-main { height: 220px; } } /* ============================================================ CHECKOUT STEPS + ADDRESS BOOK ============================================================ */ .checkout-steps { display: flex; align-items: center; gap: 14px; margin: 20px 0 28px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(0, 121, 107, 0.08), rgba(11, 27, 59, 0.04)); border: 1px solid #dcece7; } .checkout-step { display: flex; align-items: center; gap: 12px; color: var(--fg-muted); text-decoration: none; min-width: 0; } .checkout-step.is-active { color: var(--ink); } .checkout-step.is-complete { color: var(--accent-strong); } .checkout-step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--w-bold); background: #fff; border: 2px solid #d7e8e3; flex-shrink: 0; } .checkout-step.is-active .checkout-step-num, .checkout-step.is-complete .checkout-step-num { background: var(--accent); border-color: var(--accent); color: #fff; } .checkout-step-copy { display: grid; gap: 2px; min-width: 0; } .checkout-step-copy b { font-size: var(--fs-sm); } .checkout-step-copy small { font-size: var(--fs-xs); color: var(--fg-muted); } .checkout-step-line { flex: 1; height: 2px; background: #d7e8e3; min-width: 24px; } .checkout-grid-full { grid-column: 1 / -1; } .checkout-review-strip { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: #f7fbfa; border: 1px solid #e4f0ec; } .checkout-review-strip > div { display: grid; gap: 4px; min-width: 0; } .checkout-review-strip .eyebrow { margin-bottom: 2px; } .checkout-review-strip > div strong { color: var(--ink); font-size: 16px; font-weight: var(--w-bold); letter-spacing: -0.01em; line-height: 1.2; } .checkout-review-strip p { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.5; } .checkout-review-strip a { flex: none; color: var(--accent-strong); font-weight: var(--w-semibold); text-decoration: none; white-space: nowrap; } .checkout-review-strip a:hover { text-decoration: underline; text-underline-offset: 3px; } .checkout-choice { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #dceae5; border-radius: 10px; cursor: pointer; background: #fff; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast); } .checkout-choice:hover { border-color: rgba(0, 121, 107, 0.35); } .checkout-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, #ddf3ea); box-shadow: 0 0 0 1.5px var(--accent); } .checkout-choice > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; } .checkout-choice-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eef2f1; color: var(--slate-600); transition: background var(--dur-fast), color var(--dur-fast); } .checkout-choice-icon svg { width: 15px; height: 15px; } .checkout-choice:has(input:checked) .checkout-choice-icon { background: #fff; color: var(--accent-strong); box-shadow: 0 1px 3px rgba(6, 59, 52, 0.12); } .checkout-choice-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; } .checkout-choice-title { display: flex; align-items: center; gap: 6px; min-width: 0; } .checkout-choice-title b { color: var(--ink); font-size: 13px; font-weight: var(--w-bold); letter-spacing: -0.01em; } .checkout-choice-text small, .checkout-choice .address-choice-line { color: var(--fg-muted); font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .checkout-choice-aside { flex: none; display: flex; align-items: center; gap: 6px; } .checkout-choice-check { flex: none; width: 14px; height: 14px; color: var(--accent-strong); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); } .checkout-choice:has(input:checked) .checkout-choice-check { opacity: 1; transform: scale(1); } .checkout-choice.is-disabled { cursor: not-allowed; background: #f8faf9; opacity: 0.65; } .checkout-choice.is-disabled:hover { border-color: #dceae5; } /* Replaces the old .checkout-choice-soon "COMING SOON" pill: this is an explanatory sentence ("Sign in to pay by card"), so it reads as a hint line under the option rather than a uppercase badge. */ .checkout-choice-note { display: block; margin-top: 2px; color: var(--fg-muted); font-size: var(--fs-xs); line-height: 1.4; } .checkout-form .checkout-check { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; font-weight: var(--w-semibold); color: var(--ink); cursor: pointer; } .checkout-check input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; outline: none; } .checkout-helper { margin: 0 0 18px; font-size: var(--fs-sm); } .checkout-helper a { color: var(--accent-strong); font-weight: var(--w-semibold); } .checkout-new-address[hidden], .checkout-address-panel[hidden] { display: none !important; } .address-map-block { display: grid; gap: 10px; } .address-map-head span { font-weight: var(--w-semibold); color: var(--ink); } .address-map-head small { display: block; margin-top: 4px; color: var(--fg-muted); } .address-map { width: 100%; height: 280px; border-radius: 16px; overflow: hidden; border: 1px solid #dcece7; z-index: 1; } .address-book-layout { display: grid; gap: 24px; } .address-book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; } .address-card { position: relative; border: 1px solid #dcece7; border-radius: 18px; background: #fff; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .address-card:has(input:checked), .address-card.is-default { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0, 121, 107, 0.1); } .checkout-address-card { display: block; cursor: pointer; } .checkout-address-card input { position: absolute; opacity: 0; pointer-events: none; } .address-card-body { display: grid; gap: 6px; padding: 16px; } .address-card-static .address-card-body { padding-bottom: 10px; } .address-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .address-card-top-label { display: flex; align-items: center; gap: 10px; min-width: 0; } .address-card-top-label b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .address-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: rgba(13, 148, 136, 0.10); color: var(--teal); } .address-card-icon svg { width: 16px; height: 16px; } .address-card-top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .address-card-top-actions form { display: contents; } .address-card-delete-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid rgba(229, 72, 77, 0.2); border-radius: 50%; background: #fff; color: var(--danger); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .address-card-delete-icon svg { width: 14px; height: 14px; } .address-card-delete-icon:hover { border-color: rgba(229, 72, 77, 0.4); background: rgba(229, 72, 77, 0.08); } .address-card-body p, .address-card-body small { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); } .address-card-primary-line { color: var(--ink) !important; font-weight: var(--w-semibold); } .address-map-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--accent-strong); font-size: var(--fs-xs); font-weight: var(--w-semibold); text-decoration: none; width: fit-content; } .address-map-link svg { width: 12px; height: 12px; } .address-map-link:hover { text-decoration: underline; } .address-default-pill { font-size: 10px; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px; border-radius: var(--r-pill); background: rgba(0, 121, 107, 0.12); color: var(--accent-strong); } /* Checkout: Default/New-address mode toggle + saved-address row list */ .address-mode-btn { width: 100%; font: inherit; text-align: start; } .address-mode-btn.is-active { border-color: var(--accent); background: var(--accent-soft, #ddf3ea); box-shadow: 0 0 0 1.5px var(--accent); } .address-mode-btn.is-active .checkout-choice-icon { background: #fff; color: var(--accent-strong); box-shadow: 0 1px 3px rgba(6, 59, 52, 0.12); } .address-row-list { display: grid; gap: 8px; margin-top: 10px; } .address-row-list[hidden] { display: none; } .address-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #dceae5; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast); } .address-row:hover { border-color: rgba(0, 121, 107, 0.35); } .address-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, #ddf3ea); box-shadow: 0 0 0 1.5px var(--accent); } .address-row > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; } .address-row-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eef2f1; color: var(--slate-600); transition: background var(--dur-fast), color var(--dur-fast); } .address-row-icon svg { width: 15px; height: 15px; } .address-row:has(input:checked) .address-row-icon { background: #fff; color: var(--accent-strong); box-shadow: 0 1px 3px rgba(6, 59, 52, 0.12); } .address-row-text { flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .address-row:has(.address-default-pill) { padding-top: 28px; } .address-row .address-default-pill { position: absolute; top: 8px; right: 12px; flex: none; font-size: 9px; padding: 3px 8px; } html[dir="rtl"] .address-row .address-default-pill { right: auto; left: 12px; } .address-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; } .address-card-btn { border: 1px solid #dcece7; background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: var(--fs-xs); font-weight: var(--w-semibold); cursor: pointer; } .address-card-btn-danger { color: var(--danger); border-color: rgba(229, 72, 77, 0.25); } .address-edit-details[open] { flex: 1 1 100%; } .address-edit-details summary { list-style: none; } .address-edit-details summary::-webkit-details-marker { display: none; } .address-edit-form { display: grid; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf4f2; } .address-empty-card { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 36px 24px; } .address-empty-card i { width: 42px; height: 42px; color: var(--accent-strong); } .checkout-summary .commerce-primary { width: 100%; margin-top: 8px; } @media (max-width: 900px) { .checkout-steps { flex-direction: column; align-items: stretch; } .checkout-step-line { width: 2px; height: 18px; margin-left: 16px; } .checkout-layout { grid-template-columns: 1fr; } } /* Vendor platform */ .vendor-pending-body { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(180deg, #f7fcfb 0%, #f4f6fb 100%); } .vendor-pending-shell { width: min(560px, calc(100% - 32px)); display: grid; gap: 24px; justify-items: center; } .vendor-pending-card { width: 100%; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid rgba(0,121,107,0.12); box-shadow: 0 18px 50px rgba(15,23,42,0.08); } .vendor-pending-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; } .vendor-pending-meta small { display: block; color: var(--muted); margin-bottom: 4px; } .vendor-pending-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .vendor-builder-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .vendor-builder-steps button { border: 1px solid rgba(0,121,107,0.18); background: #fff; color: #0f172a; border-radius: 999px; padding: 10px 16px; font-weight: 600; cursor: pointer; } .vendor-builder-steps button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .vendor-builder-panel { display: none; gap: 16px; } .vendor-builder-panel.is-active { display: grid; } .vendor-builder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .vendor-builder-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(15,23,42,0.08); } .vendor-size-matrix-card { padding: 16px; border-radius: 16px; border: 1px solid rgba(15,23,42,0.08); background: #fafcfd; margin-top: 14px; } .vendor-size-matrix-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .vendor-size-rows { display: grid; gap: 10px; } .vendor-size-row { display: grid; grid-template-columns: 0.8fr 1fr 1fr 0.8fr auto; gap: 10px; } .vendor-swatch { width: 18px; height: 18px; border-radius: 999px; border: 1px solid rgba(15,23,42,0.12); flex: 0 0 auto; } .vendor-color-review-images { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; } .vendor-color-review-images img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; } .vendor-store-preview, .vendor-store-hero { position: relative; overflow: hidden; border-radius: 18px; background: #eef5f4; } .vendor-store-cover, .vendor-store-hero-cover { width: 100%; height: 180px; object-fit: cover; display: block; } .vendor-store-preview-copy, .vendor-store-hero-copy { display: flex; gap: 16px; align-items: center; padding: 18px; } .vendor-store-logo, .vendor-store-hero-logo { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; background: #fff; border: 1px solid rgba(15,23,42,0.08); } .vendor-store-hero { margin-bottom: 8px; } .vendor-store-hero-copy { position: relative; z-index: 1; margin-top: -42px; } @media (max-width: 900px) { .vendor-builder-grid, .vendor-size-row, .vendor-pending-meta { grid-template-columns: 1fr; } } /* ============================================================ STOREFRONT POLISH — pagination, vendor store, focus states (shop pages only; home page untouched) ============================================================ */ /* ---- Numbered pagination ---- */ .shop-pagination { flex-wrap: wrap; margin-top: 36px; gap: 8px; } .shop-page-link.shop-page-arrow { min-width: 0; gap: 6px; padding: 0 18px; } .shop-page-arrow i, .shop-page-arrow svg { width: 16px; height: 16px; } [dir="rtl"] .shop-page-arrow i, [dir="rtl"] .shop-page-arrow svg { transform: scaleX(-1); } .shop-page-numbers { display: inline-flex; align-items: center; gap: 6px; } .shop-page-num { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: 13px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; color: var(--fg-secondary); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } a.shop-page-num:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .shop-page-num.is-current { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; box-shadow: var(--shadow-sm); cursor: default; } .shop-page-gap { color: var(--fg-muted); padding: 0 2px; user-select: none; } .shop-pagination a:focus-visible { outline: none; box-shadow: var(--ring); } @media (max-width: 560px) { .shop-page-arrow span { display: none; } .shop-page-link.shop-page-arrow { min-width: 42px; padding: 0 12px; } } /* ---- Vendor public store ---- */ .vendor-store-page .vendor-store-hero { border-radius: 22px; border: 1px solid var(--divider); background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 36px; } .vendor-store-page .vendor-store-hero-cover { height: 220px; } .vendor-store-hero-cover--placeholder { background: radial-gradient(120% 160% at 85% -20%, rgba(0, 212, 180, 0.35), transparent 55%), radial-gradient(120% 160% at 10% 120%, rgba(255, 181, 71, 0.28), transparent 60%), linear-gradient(135deg, #0f3d38, #00796b); height: 160px; } .vendor-store-page .vendor-store-hero-copy { align-items: flex-start; gap: 20px; padding: 0 28px 26px; margin-top: -44px; } .vendor-store-page .vendor-store-hero-logo { width: 88px; height: 88px; border-radius: 20px; border: 3px solid #fff; box-shadow: var(--shadow-md); flex-shrink: 0; } .vendor-store-hero-monogram { display: inline-flex; align-items: center; justify-content: center; font-size: 34px; font-weight: var(--w-extrabold); color: #fff; background: linear-gradient(135deg, var(--accent-strong), #0f3d38); object-fit: unset; } .vendor-store-hero-text { padding-top: 52px; min-width: 0; } .vendor-store-hero-text h1 { margin: 4px 0 6px; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -0.015em; color: var(--fg-primary); } .vendor-store-hero-text > p { margin: 0; max-width: 62ch; color: var(--fg-secondary); line-height: 1.65; } .vendor-store-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .vendor-store-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--divider); background: var(--mist-50); font-size: 12.5px; font-weight: var(--w-semibold); color: var(--fg-secondary); white-space: nowrap; } .vendor-store-chip i, .vendor-store-chip svg { width: 14px; height: 14px; color: var(--accent-strong); } .vendor-store-toolbar { margin-bottom: 4px; } @media (max-width: 700px) { .vendor-store-page .vendor-store-hero-copy { flex-direction: column; padding: 0 18px 22px; } .vendor-store-hero-text { padding-top: 0; } .vendor-store-page .vendor-store-hero-cover { height: 150px; } } /* ============================================================ STOREFRONT EXPERIENCE — UI/UX REDESIGN v2 Brand alignment, spacing rhythm, and component polish for the customer-facing shop, product, cart, checkout, account, order, address and vendor-store pages. Every selector below is scoped to shop-only classes and never touches the home page. ============================================================ */ /* ---------- 1. Toolbar / sort / breadcrumbs: brand alignment ---------- These were left on a stray warm/brown palette from an earlier draft while the rest of the storefront moved to teal + green. Bring them back onto the real brand system. */ .shop-toolbar { padding: 26px 28px 24px; border: 1px solid rgba(0, 121, 107, 0.12); border-radius: 24px; background: linear-gradient(180deg, #ffffff 0%, #f6fbf9 100%); box-shadow: 0 18px 44px rgba(6, 59, 52, 0.06); margin-bottom: 28px; } .shop-toolbar-breadcrumbs a { color: var(--accent-strong); transition: color var(--dur-fast); } .shop-toolbar-breadcrumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .shop-toolbar-heading h2 { letter-spacing: -0.022em; } .shop-toolbar-heading p { color: var(--fg-secondary); } .shop-sort-label { color: var(--fg-secondary); } .shop-sort-select { border-color: rgba(0, 121, 107, 0.16); color: var(--ink); box-shadow: var(--shadow-xs); } .shop-sort-field:hover .shop-sort-select { border-color: rgba(0, 121, 107, 0.32); background: #fff; } .shop-sort-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .shop-sort-icon { color: var(--accent-strong); } /* ---------- 2. Shop shell rhythm ---------- */ .shop-category-strip { margin-bottom: 34px; padding-bottom: 4px; } .shop-category-strip a { transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); } .shop-category-strip a:hover:not(.is-active) { border-color: rgba(0, 121, 107, 0.32); color: var(--accent-strong); transform: translateY(-1px); } .shop-visual-section { margin-bottom: 42px; } .shop-product-grid { gap: 26px 22px; margin-bottom: 12px; } .shop-product-grid .card-body, .wishlist-grid .card-body, .related-products .card-body { padding: 18px 18px 20px; } .shop-product-grid .card-name, .wishlist-grid .card-name { font-size: 15px; } .shop-empty { margin-top: 4px; } /* ---------- 3. Section title rhythm (product page "related", cart/wishlist "recommended") ---------- */ .related-products, .commerce-recommendations { margin-top: 56px; } .related-products .sec-head, .commerce-recommendations .sec-head { margin-bottom: 24px; } /* ---------- 4. Cards that were missing internal padding ---------- .checkout-form is reused for checkout, checkout-information, checkout-address and the "add a new address" panel; confirmation summary was flush against its own rounded edge. */ .checkout-form, .confirmation-card { padding: 30px; } .checkout-form h2 { letter-spacing: -0.01em; } /* ---------- 5. Commerce page rhythm ---------- */ .commerce-head { margin-bottom: 32px; } .commerce-head h1 { letter-spacing: -0.022em; font-weight: var(--w-extrabold); } .commerce-back { transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); } .commerce-back:hover { border-color: var(--accent); color: var(--accent); transform: translateX(-2px); } html[dir="rtl"] .commerce-back:hover { transform: translateX(2px); } .commerce-status { margin-bottom: 22px; } /* ---------- 6. Cart page ---------- */ .cart-layout { gap: 28px; } .cart-list { padding: 6px 0; } .cart-line { grid-template-columns: 128px minmax(0, 1fr) auto auto; gap: 20px; padding: 22px 8px; transition: background var(--dur-fast); } .cart-line:hover { background: rgba(0, 121, 107, 0.025); } .cart-line-image { min-height: 128px; border-radius: 18px; box-shadow: var(--shadow-xs); } .cart-line h2 { font-size: 17px; letter-spacing: -0.01em; } .cart-line small { text-transform: uppercase; letter-spacing: 0.03em; } .cart-qty { border-radius: 14px; transition: border-color var(--dur-fast); } .cart-qty-actions { min-width: 140px; gap: 10px; } .cart-remove { display: inline-flex; align-items: center; gap: 6px; justify-content: center; background: transparent; border: 1px solid transparent; transition: background var(--dur-fast), border-color var(--dur-fast); } .cart-remove:hover { background: rgba(229, 72, 77, 0.08); border-color: rgba(229, 72, 77, 0.22); } .cart-remove svg { width: 15px; height: 15px; } .cart-clear-form button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; transition: background var(--dur-fast), border-color var(--dur-fast); } .cart-clear-form button svg { width: 15px; height: 15px; } .cart-clear-form button:hover { background: rgba(229, 72, 77, 0.08); border-color: rgba(229, 72, 77, 0.22); } .cart-summary { padding: 26px; top: 100px; } .cart-summary .eyebrow { margin-bottom: 4px; } .cart-summary > div { padding: 15px 0; } .commerce-primary { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base); box-shadow: 0 10px 26px rgba(0, 200, 83, 0.24); } .commerce-primary:hover:not(:disabled):not(.is-disabled) { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0, 200, 83, 0.3); } .commerce-primary.is-disabled, .commerce-primary:disabled { box-shadow: none; } .cart-line-warning { margin-top: 10px; } /* ---------- 7. Checkout ---------- */ .checkout-layout { gap: 28px; } .checkout-grid { gap: 16px 14px; } .checkout-form label span { color: var(--fg-secondary); } .checkout-form input, .checkout-form select, .checkout-form textarea { padding: 13px 15px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .checkout-form input:not([type="checkbox"]):focus, .checkout-form select:focus, .checkout-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .checkout-steps { margin: 24px 0 32px; padding: 20px 24px; } .checkout-step-num { transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); } .checkout-review-strip { padding: 18px 20px; border-radius: 18px; } .checkout-layout-side { display: grid; gap: 16px; align-content: start; } .checkout-promo { display: grid; gap: 12px; padding: 18px 20px; border: 1px solid #dcece7; border-radius: 20px; background: #fff; box-shadow: var(--shadow-xs); } .checkout-promo-label { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--fg-secondary); } .checkout-promo-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .checkout-promo-form input { width: 100%; border: 1px solid #dcece7; border-radius: 14px; padding: 12px 14px; color: var(--ink); font: inherit; background: #fff; } .checkout-promo-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .checkout-promo-apply, .checkout-promo-remove { border: 0; border-radius: 14px; padding: 12px 16px; font: inherit; font-weight: var(--w-semibold); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); } .checkout-promo-apply { color: #fff; background: var(--accent); } .checkout-promo-apply:hover { background: var(--accent-strong); } .checkout-promo-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 121, 107, 0.08); border: 1px solid rgba(0, 121, 107, 0.16); } .checkout-promo-applied strong { display: block; color: var(--accent-strong); letter-spacing: 0.04em; } .checkout-promo-applied small { display: block; margin-top: 2px; color: var(--fg-muted); } .checkout-promo-remove { color: var(--fg-muted); background: transparent; text-decoration: underline; padding: 4px 0; } .checkout-discount-row strong { color: var(--accent-strong); } .order-modal-discount span:last-child { color: var(--accent-strong); font-weight: var(--w-semibold); } .order-modal-discount small { color: var(--fg-muted); font-weight: var(--w-regular); } /* ---------- 8. Address book ---------- */ .address-book-layout { gap: 28px; } .address-book-grid { gap: 16px; } .address-card { transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); } .address-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .address-card-body { padding: 18px; } .address-card-actions { padding: 0 18px 18px; } .address-card-btn { display: inline-flex; align-items: center; gap: 6px; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .address-card-btn svg { width: 13px; height: 13px; } .address-card-btn:hover { border-color: var(--accent); color: var(--accent-strong); } .address-card-btn-danger:hover { border-color: rgba(229, 72, 77, 0.4); color: var(--danger); background: rgba(229, 72, 77, 0.06); } .address-map { box-shadow: var(--shadow-xs); } /* ---------- 9. Account dashboard ---------- */ .account-dashboard-grid { gap: 18px; } .account-panel { padding: 24px; border-radius: 22px; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); } a.account-panel:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(6, 59, 52, 0.1); border-color: rgba(0, 121, 107, 0.2); } .account-panel > svg { width: 44px; height: 44px; padding: 11px; border-radius: 15px; } .account-panel h2 { font-size: 26px; letter-spacing: -0.02em; } .account-next-steps { padding: 26px; margin-top: 20px; } .account-next-steps a { padding: 12px 14px; border-radius: 14px; background: #f7fbfa; border: 1px solid #eaf3f0; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); } .account-next-steps a:hover { background: var(--accent-soft, #ddf3ea); border-color: rgba(0, 121, 107, 0.2); transform: translateY(-1px); } /* ---------- 10. Orders ---------- */ .orders-list { gap: 18px; } .order-card { padding: 26px; transition: box-shadow var(--dur-base), transform var(--dur-fast); } .order-card:hover { box-shadow: 0 24px 54px rgba(6, 59, 52, 0.1); } .order-card-head h2 { font-size: 22px; } .order-meta span { transition: background var(--dur-fast); } .order-detail-link { padding: 8px 0; } .order-detail-link:hover { color: var(--accent-strong); } .order-detail-layout { gap: 28px; } .order-detail-card, .order-support-card { padding: 26px; } .order-detail-line b { font-size: 15px; } .order-cancel-btn { transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); } .order-cancel-btn:hover:not(:disabled) { background: #ffe9e9; transform: translateY(-1px); } .order-cancel-btn--inline:hover:not(:disabled) { transform: none; } /* ---------- 11. Service / help pages ---------- */ .service-content { padding: 26px; gap: 12px; } .service-content article { padding: 16px 18px; transition: border-color var(--dur-fast), background var(--dur-fast); } .service-content article:hover { border-color: rgba(0, 121, 107, 0.18); background: #f7fbfa; } /* ---------- 12. Wishlist grid ---------- */ .wishlist-grid { gap: 24px 22px; margin-bottom: 12px; } /* ---------- 13. Product detail page: more breathing room ---------- */ .pd-panel { gap: 20px; } .pd-variants { gap: 16px; } .pd-stage { box-shadow: 0 20px 50px rgba(24, 24, 40, 0.1); } /* ---------- 14. Responsive tuning to match the new spacing ---------- */ @media (max-width: 1100px) { .cart-layout, .checkout-layout, .order-detail-layout { gap: 22px; } } @media (max-width: 900px) { .shop-toolbar { padding: 20px; } .checkout-form, .confirmation-card { padding: 22px; } .account-panel, .order-card, .order-detail-card, .order-support-card, .service-content { padding: 20px; } } @media (max-width: 720px) { .account-dashboard-grid { grid-template-columns: 1fr 1fr; } .account-next-steps div { grid-template-columns: 1fr; } } @media (max-width: 560px) { .account-dashboard-grid { grid-template-columns: 1fr; } .commerce-head { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ============================================================ CART — SENIOR REFINEMENT v4 Compact list-row layout: small rounded thumbnail, name + live price stacked together, a pill quantity stepper and icon-only remove sitting inline on the right. Scoped to the cart page only; the checkout CTA arrow is a pseudo-element because cart-page.js rebuilds the button via textContent on qty change. ============================================================ */ /* ---- The list card ---- */ .cart-list.commerce-card { padding: 6px 26px; background: #fff; } .cart-list .commerce-status { margin: 18px 0 6px; } .cart-line { grid-template-columns: auto 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid #eef4f2; border-radius: 0; transition: background var(--dur-fast) var(--ease-out); } .cart-line:last-child { border-bottom: 0; } .cart-line:hover { background: transparent; } .cart-line-image { min-height: 64px; border-radius: 14px; border: 1px solid #eef4f2; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); } .cart-line-image:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .cart-line-info { display: grid; gap: 3px; align-content: center; min-width: 0; } .cart-line h2 { margin: 0; font-size: 15.5px; font-weight: var(--w-bold); letter-spacing: -0.01em; line-height: 1.3; } .cart-line h2 a { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .cart-line-info small { text-transform: none; letter-spacing: 0; color: var(--fg-muted); font-size: 12px; } .cart-line-customization { display: grid; gap: 2px; } .cart-line-customization a { color: var(--accent-strong); font-size: 12px; font-weight: var(--w-semibold); } .checkout-summary-customization { display: grid; gap: 2px; margin: -8px 0 8px; } .checkout-summary-customization small { color: var(--fg-muted); font-size: 12px; } .checkout-summary-customization a { color: var(--accent-strong); font-weight: var(--w-semibold); } .cart-line-price { color: var(--fg-secondary); font-size: 13.5px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; } /* ---- Actions: stepper + remove sit inline, right-aligned ---- */ .cart-line-actions { display: flex; align-items: center; gap: 10px; align-self: center; } /* ---- Quantity stepper ---- */ .cart-qty-stepper.pd-qty { grid-template-columns: 34px 38px 34px; border-radius: 999px; border-color: #dceae5; background: #fbfefd; box-shadow: var(--shadow-xs); } .cart-qty-stepper .pd-qty-btn { color: var(--accent-strong); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast); } .cart-qty-stepper .pd-qty-btn:hover { background: var(--accent-soft, #ddf3ea); color: var(--accent-strong); } .cart-qty-stepper .pd-qty-btn:active { transform: scale(0.9); } .cart-qty-stepper .cart-qty-input { background: transparent; } /* ---- Remove button: icon-only, circular ---- */ .cart-remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; color: var(--fg-muted); } .cart-remove:hover { background: rgba(229, 72, 77, 0.09); border-color: rgba(229, 72, 77, 0.24); color: var(--danger); } .cart-remove:hover svg { color: var(--danger); } .cart-remove svg { width: 16px; height: 16px; } /* ---- Clear cart (footer of list) ---- */ .cart-clear-form { margin-top: 4px; padding: 18px 0 6px; border-top: 1px solid #eef4f2; } .cart-clear-form button { padding: 9px 16px; border-radius: var(--r-pill); background: transparent; color: var(--fg-secondary); font-size: 13px; font-weight: var(--w-semibold); } .cart-clear-form button:hover { background: rgba(229, 72, 77, 0.08); border-color: rgba(229, 72, 77, 0.22); color: var(--danger); } /* ---- Order summary card + prices ---- */ .cart-summary.commerce-card { padding: 26px 26px 28px; background: #fff; } .cart-summary .eyebrow { margin-bottom: 6px; } .cart-summary > div { align-items: baseline; padding: 14px 0; border-bottom: 1px solid #eef4f2; } .cart-summary > div span { color: var(--fg-secondary); font-size: 13px; text-transform: none; letter-spacing: 0; } .cart-summary > div strong { color: var(--ink); font-size: 15px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; } .cart-summary .cart-total { margin-top: 4px; padding: 18px 0 4px; border-top: 2px solid #e6f1ee; border-bottom: 0; } .cart-summary .cart-total span { color: var(--ink); font-size: 15px; font-weight: var(--w-bold); } .cart-summary .cart-total strong { color: var(--accent-strong); font-size: 26px; font-weight: var(--w-extrabold); letter-spacing: -0.03em; } /* ---- Checkout CTA ---- */ .cart-summary .commerce-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin-top: 20px; border-radius: 14px; font-size: 15px; letter-spacing: 0.005em; text-decoration: none; } /* arrow survives cart-page.js rebuild (textContent-only) */ .cart-summary [data-cart-checkout]:not(.is-disabled):not([disabled])::after { content: "→"; font-size: 17px; line-height: 1; transition: transform var(--dur-fast) var(--ease-out); } .cart-summary [data-cart-checkout]:not(.is-disabled):not([disabled]):hover::after { transform: translateX(3px); } html[dir="rtl"] .cart-summary [data-cart-checkout]:not(.is-disabled):not([disabled])::after { content: "←"; } html[dir="rtl"] .cart-summary [data-cart-checkout]:not(.is-disabled):not([disabled]):hover::after { transform: translateX(-3px); } .cart-summary [data-cart-checkout-note] { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; color: var(--fg-muted); font-size: 12px; line-height: 1.55; } @media (max-width: 720px) { .cart-list.commerce-card { padding: 4px 16px; } .cart-summary.commerce-card { padding: 20px; } .cart-line { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "select select" "image info" "actions actions"; gap: 10px 14px; padding: 16px 0; } .cart-line-select { grid-area: select; justify-self: start; } .cart-line-image { grid-area: image; } .cart-line-info { grid-area: info; } .cart-line-actions { grid-area: actions; justify-content: space-between; } } /* ============================================================ CHECKOUT FORM — SENIOR REFINEMENT v4 Card header, field/label system, and a proper Jordanian phone field with a fixed +962 flag prefix. Scoped to .checkout-form (checkout information + address panels + address book). ============================================================ */ /* ---- Card header ---- */ .checkout-form-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid #eef4f2; } .checkout-form-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft, #ddf3ea); color: var(--accent-strong); } .checkout-form-icon svg { width: 21px; height: 21px; } .checkout-form-head h2 { margin: 0; font-size: var(--fs-h4); letter-spacing: -0.01em; } .checkout-form-head p { margin: 4px 0 0; color: var(--fg-muted); font-size: 13px; line-height: 1.5; } /* ---- Labels ---- */ .checkout-form label > span:first-child { display: inline-flex; align-items: center; color: var(--ink); font-size: 12.5px; font-weight: var(--w-semibold); letter-spacing: 0.01em; } .field-optional { margin-inline-start: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: #eef4f2; color: var(--fg-muted); font-size: 10px; font-style: normal; font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase; } /* ---- Inputs / selects / textarea ---- */ .checkout-form input, .checkout-form select, .checkout-form textarea { min-height: 48px; border-color: #dceae5; color: var(--ink); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast); } .checkout-form textarea { min-height: 112px; padding-top: 12px; line-height: 1.6; resize: vertical; } .checkout-form input::placeholder, .checkout-form textarea::placeholder { color: #a2b5b0; } .checkout-form input:hover:not(:focus), .checkout-form select:hover:not(:focus), .checkout-form textarea:hover:not(:focus) { border-color: #c4dbd4; } /* ---- Field hint ---- */ .field-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--fg-muted); font-size: 12px; line-height: 1.4; } .field-hint svg { width: 13px; height: 13px; color: var(--accent-strong); flex: none; } /* ---- International phone field ---- */ .phone-field { display: flex; align-items: stretch; border: 1px solid #dceae5; border-radius: 14px; background: #fff; overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .phone-field:hover { border-color: #c4dbd4; } .phone-field:focus-within { border-color: var(--accent); box-shadow: var(--ring); } .phone-field .phone-country-select { flex: none; width: 150px; min-height: 48px; padding: 0 26px 0 14px; border: 0; border-inline-end: 1px solid #e2efeb; border-radius: 0; background: #f4faf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235f7d76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; background-size: 15px; appearance: none; -webkit-appearance: none; -moz-appearance: none; color: var(--ink); font-size: 13px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .phone-field .phone-country-select:focus { outline: none; background-color: #eef8f5; } .phone-field .phone-input { flex: 1 1 auto; min-width: 0; min-height: 48px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 13px 15px; font-size: 15px; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; } .phone-field .phone-input:focus { outline: none; box-shadow: none !important; } /* ---- Enhanced country picker (progressive enhancement over the native — the only way to get a low and a high thumb — so the styling has to hide each input's own track, draw one shared track underneath, and leave just the thumbs hit-testable. ========================================================================== */ .shop-toolbar-controls { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .shop-filter { display: grid; gap: 7px; } .shop-filter--price { min-width: 250px; } .shop-filter--sort { min-width: 190px; } .shop-filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .shop-filter-label { color: #746659; font-size: 12px; font-weight: var(--w-semibold); letter-spacing: 0.04em; white-space: nowrap; } .shop-price-readout { color: #2e261f; font-size: 13px; font-weight: var(--w-bold); white-space: nowrap; } /* ---------- The two-handle slider ---------- */ .shop-price-slider { position: relative; height: 22px; display: flex; align-items: center; } .shop-price-track { position: absolute; inset-inline: 0; height: 4px; border-radius: 999px; background: rgba(67, 44, 24, 0.14); } .shop-price-track-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent-strong, #0d7a63); } /* Both inputs sit on the same line. pointer-events: none on the input with auto on the thumb is what lets the lower handle stay grabbable where the two overlap — a plain stack would have the top input swallow every click across the whole track. */ .shop-price-input { position: absolute; inset-inline: 0; width: 100%; margin: 0; height: 22px; background: none; appearance: none; pointer-events: none; } .shop-price-input:focus { outline: none; } .shop-price-input::-webkit-slider-runnable-track { height: 4px; background: transparent; border: 0; } .shop-price-input::-moz-range-track { height: 4px; background: transparent; border: 0; } .shop-price-input::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--accent-strong, #0d7a63); background: #fff; box-shadow: 0 2px 6px rgba(49, 31, 16, 0.18); cursor: grab; transition: transform var(--dur-fast, 0.12s) var(--ease-out, ease); } .shop-price-input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent-strong, #0d7a63); background: #fff; box-shadow: 0 2px 6px rgba(49, 31, 16, 0.18); cursor: grab; } .shop-price-input::-webkit-slider-thumb:hover { transform: scale(1.12); } .shop-price-input:active::-webkit-slider-thumb { cursor: grabbing; } /* Focus has to be visible on the thumb itself — the input has no box of its own to outline. */ .shop-price-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(13, 122, 99, 0.22); } .shop-price-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(13, 122, 99, 0.22); } .shop-price-ends { display: flex; justify-content: space-between; color: #9a8b7c; font-size: 11px; } /* ---------- Actions ---------- */ .shop-filter-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; } .shop-filter-apply { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent-strong, #0d7a63); color: #fff; font: inherit; font-size: 13px; font-weight: var(--w-bold); cursor: pointer; } .shop-filter-apply[hidden] { display: none; } .shop-filter-clear { color: #746659; font-size: 12.5px; font-weight: var(--w-semibold); text-decoration: underline; white-space: nowrap; } .shop-filter-clear:hover { color: var(--accent-strong, #0d7a63); } @media (max-width: 860px) { .shop-toolbar { flex-direction: column; align-items: stretch; } .shop-toolbar-controls { align-items: stretch; } .shop-filter--price, .shop-filter--sort { min-width: 0; flex: 1 1 220px; } } /* ========================================================================== SHOP HERO, PRICE FIELDS, NAV TONES, CARD BORDER ========================================================================== */ /* ---------- The catalogue header ---------- Was a rounded, shadowed panel with the sort control tucked into its bottom-right corner. It is a page heading, so it reads as one now: flat on the page, ruled off underneath, with the filters on their own row below rather than crowded in beside the title. */ body:not(.admin-body):not(.vendor-body):not(.auth-body) .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 0; padding: 4px 0 22px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; } body:not(.admin-body):not(.vendor-body):not(.auth-body) .shop-toolbar-intro { gap: 10px; } /* The category picture, at the size the heading can carry beside it. */ .shop-toolbar-figure { flex: none; width: min(280px, 30vw); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; } .shop-toolbar-figure img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The filter row: ruled off from the heading above it, so the two read as heading-then-controls rather than as one crowded band. */ body:not(.admin-body):not(.vendor-body):not(.auth-body) .shop-toolbar-sort { display: block; align-self: auto; margin-bottom: 22px; padding: 16px 0 0; border-top: 1px solid rgba(67, 44, 24, 0.10); } body:not(.admin-body):not(.vendor-body):not(.auth-body) .shop-toolbar-controls { align-items: flex-end; gap: 18px; } /* ---------- Min and max, typed ---------- */ .shop-price-fields { display: flex; align-items: center; gap: 8px; } .shop-price-field { position: relative; display: inline-flex; align-items: center; } .shop-price-prefix { position: absolute; inset-inline-start: 12px; color: #9a8b7c; font-size: 11.5px; font-weight: var(--w-semibold); pointer-events: none; } .shop-price-field input { width: 108px; min-height: 44px; padding-inline: 46px 12px; border: 1px solid rgba(67, 44, 24, 0.12); border-radius: 999px; background: #fff; color: #2e261f; font: inherit; font-size: 13px; font-weight: var(--w-semibold); } .shop-price-field input:focus { outline: none; border-color: rgba(13, 122, 99, 0.42); box-shadow: 0 0 0 3px rgba(13, 122, 99, 0.12); } /* The spinners are 40px of furniture on a field two keystrokes wide. */ .shop-price-field input::-webkit-outer-spin-button, .shop-price-field input::-webkit-inner-spin-button { appearance: none; margin: 0; } .shop-price-field input[type="number"] { appearance: textfield; } .shop-price-dash { color: #9a8b7c; } /* ---------- Navigation pills ---------- The border was doing nothing the background wasn't already doing, and it boxed in every item on a bar that reads better open. Each action keeps a tone of its own instead: Deals amber, Sell green, Sale as it was. */ /* No border and no pill: the colour lives on the text alone, so these read as navigation in a tone rather than as three buttons parked in the bar. Height and padding come back to the category links' so the whole row sits on one baseline. border: 0 rather than a transparent colour — a transparent border still reserves its 1px and shifts the item against its neighbours. */ .prototype-nav .nav-item > a.nav-action, .prototype-nav .nav-item > a.nav-action.sale, .prototype-nav .nav-item > a.nav-action:hover, .prototype-nav .nav-item > a.nav-action.sale:hover { min-height: 46px; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: none; letter-spacing: 0.035em; } /* Both classes on the , to match the specificity of the .nav-action.sale rule these override. Deals and Sale are both flagged as offers, so the single-class form lost and Deals kept rendering in Sale's colour. */ .prototype-nav .nav-item > a.nav-action.nav-action--deals { color: #96690a; } .prototype-nav .nav-item > a.nav-action.nav-action--sell { color: #0a6b46; } /* Sale keeps the colour it already had. */ .prototype-nav .nav-item > a.nav-action.nav-action--sale { color: #b14a25; } /* The underline the category links show on hover, in each item's own colour, so hover still has somewhere to land now the background is gone. */ .prototype-nav .nav-item > a.nav-action::after { display: block; } .prototype-nav .nav-item > a.nav-action.nav-action--deals::after { background: #96690a; } .prototype-nav .nav-item > a.nav-action.nav-action--sell::after { background: #0a6b46; } .prototype-nav .nav-item > a.nav-action.nav-action--sale::after { background: #b14a25; } /* Same tones in the mobile drawer, which renders the identical classes. */ .drawer a.nav-action--deals { color: #8a6209; } .drawer a.nav-action--sell { color: #0a6b46; } /* ---------- One card border ---------- A product's status was painted onto its frame — indigo for pre-order, red for out of stock, another for a limited edition — so a grid came out as a patchwork of outlines and the border stopped meaning anything. The status is already said in words on the card (the badge, the stock line, the ribbon). The frame is just a frame now, the same green on every card. */ body:not(.admin-body):not(.vendor-body):not(.auth-body) .card, body:not(.admin-body):not(.vendor-body):not(.auth-body) .card--out_of_stock, body:not(.admin-body):not(.vendor-body):not(.auth-body) .card--preorder, body:not(.admin-body):not(.vendor-body):not(.auth-body) .card--coming_soon, body:not(.admin-body):not(.vendor-body):not(.auth-body) .card--limited_edition, body:not(.admin-body):not(.vendor-body):not(.auth-body) .deal-card, body:not(.admin-body):not(.vendor-body):not(.auth-body) .deal-card.card--out_of_stock, body:not(.admin-body):not(.vendor-body):not(.auth-body) .deal-card.card--preorder, body:not(.admin-body):not(.vendor-body):not(.auth-body) .deal-card.card--coming_soon, body:not(.admin-body):not(.vendor-body):not(.auth-body) .deal-card.card--limited_edition { border-color: rgba(13, 122, 99, 0.22); box-shadow: var(--shadow-xs); } @media (max-width: 860px) { body:not(.admin-body):not(.vendor-body):not(.auth-body) .shop-toolbar { flex-direction: column; align-items: stretch; } .shop-toolbar-figure { width: 100%; } .shop-price-field input { width: 100%; min-width: 0; } .shop-price-fields { flex: 1 1 auto; } } /* ========================================================================== SHOP SORT — A LISTBOX THAT CAN BE DESIGNED ========================================================================== The native