/* Marcellus — self-hosted. Was fetched from fonts.googleapis.com on every page load, which cost a DNS lookup and a TLS handshake with two extra domains before any text could be drawn. Both weights of the file are the same 400; Marcellus ships in one weight only. */ @font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/marcellus-normal-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/marcellus-normal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ═══════════════════════════════════════════════════════ SELF-HOSTED FONTS — inlined from fonts.css (removes an @import render-blocking round trip). fonts.css is kept as the canonical copy; regenerate this block from it when editing fonts. ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ SELF-HOSTED FONTS ═══════════════════════════════════════════════════════════ Previously an @import from fonts.googleapis.com, which made the browser resolve DNS and negotiate TLS with TWO more domains (googleapis for the CSS, then gstatic for the files) before a single word of the page could render. Serving them from this origin removes both round trips. Latin and Latin-Extended only — the Cyrillic, Greek, Vietnamese, maths and symbol subsets Google also ships are never used by an English-language shop, and unicode-range means the browser only downloads a file when a character in its range actually appears. Montserrat is a VARIABLE font: one file covers its whole 100-900 weight axis rather than a separate download per weight. Marcellus ships a single 400 and has no axis, which is why every heading weight in this file resolves to 400 — see --font-heading-weight. ═══════════════════════════════════════════════════════════ */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-italic-100900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-italic-100900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-normal-100900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-normal-100900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ Dievon — Design System Brand: deep burgundy + elegant gold + soft ivory ============================================================ */ :root { /* ── Backgrounds ─────────────────────────────────────── */ --bg-main: #fdfbf9; /* warm soft ivory */ --bg-surface: #ffffff; --bg-surface-soft: #f8f5f0; --bg-hero: #f5eee8; /* ── Brand Colors ─────────────────────────────────────── */ --color-primary: #511126; /* deep burgundy / plum */ --color-primary-dark: #3a0c1b; --color-primary-light: #e8d8de; /* soft blush */ --color-primary-bg: #f9f6f7; --color-secondary: #C59B4B; /* elegant gold */ --color-secondary-bg: #fbf8f3; --color-accent: #D4AF37; /* rich gold — decoration, and text on DARK grounds */ --color-accent-bg: #fcfaf6; /* Gold dark enough to read as TEXT on a light ground. ──────────────────────────────────────────────────────────────────────── #D4AF37 on white measures 2.09:1 against a 4.5:1 requirement, so gold text on the pale pages — the "NEW" pill, editorial labels, category card links, the luxury badge — is a WCAG AA failure wherever it appears. It cannot be fixed by darkening --color-accent itself: that token is also gold text on the dark footer (8.98:1) and on maroon (6.85:1), both of which are comfortably passing today and would drop to 3.73:1 and 2.85:1 if the value moved. Changing one token fixes the light pages and breaks the dark ones — measured, not assumed. So the two cases get two tokens. This is the one to reach for when gold sits on white or cream; --color-accent stays exactly as it is everywhere else, and the brand colour is unchanged for every decorative use. */ --color-accent-ink: #8a6a12; /* 5.06:1 on white, 4.90:1 on cream */ --color-danger: #a94442; --color-success: #2e7d32; /* ── Text ─────────────────────────────────────────────── */ --text-primary: #3a0c1b; /* dark burgundy for text */ --text-secondary: #511126; /* 4.21:1 on the cream ground, against a 4.5:1 requirement — a fail by a small margin, and this token carries breadcrumbs, the struck-through MRP, the "From" prefix, card categories and the "Select Size" caption. Nudged to 5.24:1. Verified as body text on light grounds only; no dark-background rule uses it. */ --text-muted: #7a674f; --text-on-primary: #ffffff; /* ── Layout ───────────────────────────────────────────── */ /* The page gutter. .container and the homepage hero's text panel both read it, so a heading in a contained section and the hero headline above it start on the same pixel. Stepped down per breakpoint in responsive.css. */ --dv-gutter: 4.5rem; /* ── Borders ──────────────────────────────────────────── */ --border-color: rgba(81, 17, 38, 0.1); --border-strong: rgba(81, 17, 38, 0.25); --border-light: rgba(81, 17, 38, 0.05); /* ── Gradients ────────────────────────────────────────── */ --grad-primary: linear-gradient(135deg, #511126 0%, #3a0c1b 100%); --grad-coral: linear-gradient(135deg, #78213e 0%, #511126 100%); --grad-mint: linear-gradient(135deg, #C59B4B 0%, #D4AF37 100%); --grad-golden: linear-gradient(135deg, #D4AF37 0%, #e8ca6b 100%); --grad-hero: linear-gradient(135deg, #f5eee8 0%, #ffffff 100%); --grad-warm: linear-gradient(135deg, #f8f5f0 0%, #f5eee8 100%); --grad-text: linear-gradient(135deg, #511126, #C59B4B); /* ── Typography ───────────────────────────────────────── */ /* Marcellus — a low-contrast humanist serif with bracketed serifs. Quieter and warmer than a Didone; it does not echo the DIEVON wordmark the way Bodoni Moda did, which was the reason for the earlier switch, but this is the face the brand wants and it is now served from assets/fonts rather than fetched from Google. Fallbacks are serifs of a similar colour, so a browser that cannot load the file degrades to something related rather than to Times. */ --font-heading: 'Marcellus', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* Both 400, and they have to be. Marcellus ships ONE weight. Bodoni Moda was a variable font with a 400-900 axis, so 500 and 600 were real cuts drawn by the designer; ask Marcellus for them and the browser SYNTHESISES a bold instead — it smears each glyph sideways, which thickens the hairlines unevenly and makes the serifs blunt. That is the exact failure this comment used to warn about for GFS Didot. If headings need more presence, use size or letter-spacing, not weight. */ --font-heading-weight: 400; --font-heading-weight-strong: 400; --font-body: 'Montserrat', sans-serif; /* ── Shadows ──────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(81, 17, 38, 0.03); --shadow-sm: 0 4px 12px rgba(81, 17, 38, 0.05); --shadow-md: 0 8px 24px rgba(81, 17, 38, 0.08); --shadow-lg: 0 16px 40px rgba(81, 17, 38, 0.12); /* ── Radius ─────────────────────────────────────────────── There isn't one, by decision: nothing on this site has rounded corners, so every shape reads as part of the same set. The five tokens that used to live here (0/0/2/4/4) are gone rather than zeroed — a token named --radius-lg that evaluates to 0 is an invitation to "just put it back to 4", which is how the site ended up with six different radii in the first place. Square is not a default here, it is the house style. */ /* ── Transitions ──────────────────────────────────────── */ --transition: all 0.3s ease; --transition-bounce: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); --transition-slow: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); } /* ═══════════════════════════════════════════════════════════ UNIFORM SITE-WIDE MASTER SECTION SPACING (.section-space) ═══════════════════════════════════════════════════════════ */ /* The value lives in assets/css/responsive.css, which loads after this file and therefore wins. A second copy here said 40px while that one said 60px — two numbers for one idea, and only one of them had any effect. */ .section-mb { margin-bottom: 50px !important; } .section-mb-sm { margin-bottom: 30px !important; } .section-mb-lg { margin-bottom: 80px !important; } /* THE container. Single source of truth — the responsive padding ladder for this rule lives at the bottom of responsive.css and nowhere else. The !important flags that used to be here were removed: they were only needed to beat a second, conflicting .container rule further down this file (max-width 1240px / padding 24px), and that rule has been deleted. Keeping them also silently killed every responsive padding step, which is why a 1000px-wide screen was still losing 112px to desktop padding. */ .container { width: 100%; max-width: 1440px; margin: 0 auto; /* 4.5rem = 72px, taken from the design comp: measured at 43-46px on an 864px render, and 864 is exactly 1440 x 0.6, so the scaling is exact rather than estimated. That put the intended gutter at ~74px across five separate content rows; 4.5rem is the round number inside that. Content width at 1440 is therefore 1296px. Read from --dv-gutter rather than written here, because .container is no longer the only thing that needs it: the homepage hero is full bleed, so its text panel is not inside a container, and its headline still has to start on the same pixel as every section heading below it. One variable means the two cannot drift — which is the whole reason the product card and the journal card were unified earlier in this branch. The step-down ladder lives in responsive.css and moves the variable, not this rule — see the note there. */ padding: 0 var(--dv-gutter); box-sizing: border-box; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x uses `clip` (with `hidden` as the legacy fallback) so that html never becomes a scroll container — `hidden` would break position:sticky site-wide. See the matching note in responsive.css. */ html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } /* ── Focus ───────────────────────────────────────────────────────────── The ring is back. This block used to be a blanket reset: button:focus, a:focus, input:focus, … { outline: none !important; box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important; } That removed every focus indicator on the shop and replaced it with a shadow at three per cent opacity — invisible in practice. Someone working through checkout on a keyboard had no way to tell which field or button they were on, all the way to Place Order. It is a WCAG 2.4.7 failure and the first rule of the design skill's accessibility category: never remove the outline without a replacement. The `!important` also made it unfixable from anywhere else in this file, so every later attempt at a focus style was dead on arrival. What replaces it keeps the original intent — no ring when you CLICK something — because :focus-visible only matches keyboard and equivalent input. Mouse users see nothing; keyboard users see the ring. Two layers, because no single colour works on both grounds: burgundy reads 12.6:1 on the pale pages, and the white gap around it is what makes the ring visible against the near-black footer, where burgundy alone would disappear. */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--color-primary, #511126); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; } /* A mouse click leaves no ring — the reason the reset existed at all. */ button:focus:not(:focus-visible), a:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; } /* ── Tap highlight ─────────────────────────────────────────── iOS and Android paint a translucent grey/blue rectangle over any element the moment it is tapped. It is not a focus indicator and it respects none of the styling below it — over a product photo or a rounded pill it reads as a rendering fault rather than feedback, which is exactly how it looked on the card grid. Removing it costs nothing: every interactive control here already has its own :hover / :active / .is-active treatment, and keyboard focus rings are outlines set per component, so they are untouched by this. */ html { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* ── Autofilled fields ─────────────────────────────────────── Chrome overrides an input's background with its own pale yellow (or blue in dark mode) once it autofills it, and ignores `background` to do so. On the checkout and login forms that produced a row of yellow boxes among white ones. The huge inset shadow is the documented way to repaint it, and -webkit-text-fill-color keeps the typed value the right colour. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset !important; box-shadow: 0 0 0 1000px var(--bg-surface) inset !important; -webkit-text-fill-color: var(--text-primary) !important; caret-color: var(--text-primary); transition: background-color 9999s ease-in-out 0s; } .navbar-luxury { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; background: var(--bg-surface); border-bottom: 1px solid var(--border-light); box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ══ High-End Ultra-Slim Luxury Sticky Header ════════════ */ .logo img { width: 100%; transition: height 0.25s ease !important; } .main-header-bar { /* This is the rule that decides the header height. .main-header-bar is declared twice in this file — the other one (further down, with the background and border) also sets a padding, but without !important, so it never applies. Change the value here, not there. */ padding: 20px 0 !important; transition: padding 0.25s ease !important; } /* ══ Compact Luxury Currency Selector ═════════════════════ */ .header-brand-group { display: flex; align-items: center; gap: 12px; } .currency-selector-wrapper { display: inline-flex; align-items: center; } #currencySelector, #countrySelector { /* Quieter than it was. It sits in a row of thin outline icons, and a filled, heavily bordered pill pulled the eye straight to the least important control there. background-COLOR, not the shorthand — the shorthand would wipe the arrow set further down this same block. */ background-color: rgba(197, 155, 75, 0.07) !important; border: 1px solid rgba(197, 155, 75, 0.3) !important; font-family: var(--font-body), sans-serif !important; font-size: 12px !important; /* 700 was heavier than every label beside it. */ font-weight: 700 !important; letter-spacing: 0.04em !important; color: var(--text-primary) !important; cursor: pointer !important; outline: none !important; /* Sized for the two-letter label it now carries. It kept the padding from when this read "IN R INR", so "UK" floated in an oval of empty space. */ padding: 5px 22px 5px 11px !important; height: 32px !important; /* A hard ceiling, so a long country name can never widen this control again and shove the icon row under the centred search bar. The labels are short by design (see includes/header.php) — this is the belt to that braces. */ max-width: 62px !important; text-overflow: ellipsis !important; line-height: 1 !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 10 6'%3E%3Cpath fill='%23C59B4B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; /* Only the two things that actually change on hover. `all` also animated background-image, which is what made the arrow appear to slide away rather than simply be replaced. */ transition: background-color 0.2s ease, border-color 0.2s ease !important; box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important; } #currencySelector:hover, #currencySelector:focus, #countrySelector:hover, #countrySelector:focus { /* background-COLOR, never the shorthand. ───────────────────────────────────────────────────────────── `background: #ffffff` resets background-image along with the colour, and the dropdown arrow IS a background-image (the inline SVG a few rules up). So the arrow vanished the instant the pointer touched the control and came back when it left — "going somewhere and coming". Exactly the same mistake sat in the mobile rule in responsive.css. The shorthand is the trap: it looks like it only sets a colour. */ background-color: #ffffff !important; border-color: var(--color-primary) !important; box-shadow: 0 4px 14px rgba(197, 155, 75, 0.2) !important; color: var(--color-accent) !important; /* No translateY. A control that lifts on hover is fine on a card; in a row of static icons it reads as a wobble, and this one sits inches from the cart button. */ } #currencySelector option, #countrySelector option { background: #ffffff; color: #1e293b; font-weight: 600; padding: 8px 12px; } .show-mobile-only { display: none !important; } /* ══ Mobile Bottom Navigation Dock ═════════════════════════ */ .mobile-bottom-dock { display: none; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border-light); z-index: 998; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); } .mobile-dock-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-secondary); text-decoration: none; background: none; border: none; padding: 4px 0; cursor: pointer; font-family: var(--font-body), sans-serif; font-size: 11px; font-weight: 500; transition: var(--transition); } .mobile-dock-item i { font-size: 20px; color: var(--text-primary); transition: var(--transition); } .mobile-dock-item span { font-size: 11px; line-height: 1.2; color: var(--text-secondary); } .mobile-dock-item.active, .mobile-dock-item:hover { color: var(--color-primary); } .mobile-dock-item.active i, .mobile-dock-item:hover i { color: var(--color-primary); } .mobile-dock-whatsapp i { color: #25d366 !important; font-size: 22px; } .navbar-luxury { /* background: rgba(255, 255, 255, 0.94) !important; */ background: rgba(255, 255, 255, 0.8) !important; /* backdrop-filter: blur(16px) saturate(180%) !important; */ backdrop-filter: blur(5px) !important; /* -webkit-backdrop-filter: blur(16px) saturate(180%) !important; */ -webkit-backdrop-filter: blur(5px) !important; border-bottom: 1px solid rgba(197, 155, 75, 0.18) !important; transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } /* Ultra-Slim Sticky Mode */ .navbar-luxury.header-compact { /* background: rgba(255, 255, 255, 0.98) !important; */ background: rgba(255, 255, 255, 0.8) !important; border-bottom: 1px solid rgba(197, 155, 75, 0.35) !important; box-shadow: 0 8px 25px rgba(20, 4, 8, 0.08) !important; } .navbar-luxury.header-compact .category-nav-bar { padding: 2px 0 !important; } .main-nav-links a { position: relative; padding-bottom: 4px; } .main-nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, #C59B4B, #E6C687); transition: width 0.3s ease, left 0.3s ease; } .main-nav-links a:hover::after { width: 100%; left: 0; } body:not(.admin-wrapper) { background-color: var(--bg-main); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.65; max-width: 100%; padding-top: var(--header-height, 145px) !important; } body.admin-wrapper { padding-top: 56px !important; } a { color: inherit; text-decoration: none; transition: var(--transition); } img { max-width: 100%; height: auto; display: block; } button { font-family: inherit; border: none; outline: none; background: none; cursor: pointer; transition: var(--transition); } h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--text-primary); /* Reads from the variable instead of a hardcoded 700. Marcellus ships a single 400 weight, so asking for 700 made every heading on the site a browser-synthesised bold — glyphs smeared sideways, serifs blunted, hairlines thickened unevenly. Going through the variable means one line decides it, and a future font with real bold cuts only needs --font-heading-weight-strong changed. */ font-weight: var(--font-heading-weight, 400); line-height: 1.2; /* Was -0.02em. Negative tracking pulls the letters together, which suits a tightly-fitted sans but works against a serif with generous sidebearings: squeezing Marcellus collides its bracketed serifs. The logo wordmark is spaced open, not tight, so normal matches it. */ letter-spacing: normal; } /* ── Scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { background: var(--color-primary-light); } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* ── Utilities ─────────────────────────────────────────────── */ .gradient-text { background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } /* Cart button */ .cart-btn { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 1.5px solid var(--border-color); font-size: 18px; color: var(--text-secondary); cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-xs); } .cart-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--shadow-glow); transform: scale(1.05); } .cart-badge { position: absolute; top: -4px; right: -4px; background: var(--grad-primary); color: white; font-size: 10px; font-weight: 700; width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-main); font-family: var(--font-heading); transition: var(--transition-bounce); } .cart-badge.bump { transform: scale(1.5); } /* ── Buttons ───────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; font-size: 14px; font-weight: 700; background: var(--grad-primary); color: white; border: none; cursor: pointer; box-shadow: 0 4px 18px rgba(255, 77, 109, 0.35); transition: var(--transition); font-family: var(--font-heading); letter-spacing: 0.01em; white-space: nowrap; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255, 77, 109, 0.45); } .btn-primary:active { transform: translateY(0); } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 14px; font-weight: 600; background: var(--bg-surface); color: var(--text-primary); border: 1.5px solid var(--border-light); cursor: pointer; transition: var(--transition); font-family: var(--font-heading); box-shadow: var(--shadow-xs); white-space: nowrap; } .btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-danger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; font-size: 12px; font-weight: 600; background: #fff5f5; color: var(--color-danger); border: 1px solid #fecaca; cursor: pointer; transition: var(--transition); } .btn-danger:hover { background: #fee2e2; border-color: var(--color-danger); } .btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; font-size: 12px; font-weight: 600; background: transparent; color: var(--color-primary); border: 1px solid var(--border-strong); cursor: pointer; transition: var(--transition); } .btn-outline:hover { background: var(--color-secondary-bg); border-color: var(--color-secondary); } /* ── Hero ──────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: 0; background: var(--bg-surface); } /* Colourful top band */ .hero-band { background: var(--grad-hero); padding: 70px 0 120px; position: relative; overflow: hidden; } .hero-band::before { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 80px; background: var(--bg-surface); } /* Decorative circles */ .hero-band::after { content: ''; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; background: rgba(255,255,255,0.08); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.35); padding: 6px 16px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.95); margin-bottom: 20px; letter-spacing: 0.04em; text-transform: uppercase; } .hero-title { font-size: 54px; color: #ffffff; margin-bottom: 18px; text-shadow: 0 2px 20px rgba(0,0,0,0.1); } .hero-subtitle { font-size: 16px; color: rgba(255,255,255,0.85); margin-bottom: 32px; max-width: 480px; line-height: 1.7; } .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; } .btn-hero-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-size: 15px; font-weight: 700; background: white; color: var(--color-primary); border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.15); transition: var(--transition); font-family: var(--font-heading); } .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); } .btn-hero-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; font-size: 15px; font-weight: 600; background: rgba(255,255,255,0.18); backdrop-filter: blur(8px); color: white; border: 1.5px solid rgba(255,255,255,0.4); cursor: pointer; transition: var(--transition); font-family: var(--font-heading); } .btn-hero-secondary:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); } /* Hero visual (right side) */ .hero-visual { display: flex; align-items: center; justify-content: center; position: relative; height: 340px; } .hero-card { background: white; padding: 28px; width: 290px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.18); position: relative; z-index: 2; animation: floatingCard 5s infinite ease-in-out; } .hero-card-emoji { font-size: 72px; margin-bottom: 10px; display: block; } .hero-card h3 { font-size: 18px; color: var(--text-primary); margin-bottom: 4px; } .hero-card p { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; } .hero-card-footer { display: flex; justify-content: space-between; align-items: center; } .hero-bubble { position: absolute; background: rgba(255,255,255,0.15); animation: floatBubble 6s infinite ease-in-out; } /* Stats strip */ .hero-stats { display: flex; gap: 0; background: var(--bg-surface); border-bottom: 1px solid var(--border-light); padding: 20px 0; } .hero-stat { flex: 1; text-align: center; padding: 0 24px; border-right: 1px solid var(--border-light); } .hero-stat:last-child { border-right: none; } .hero-stat-value { font-size: 26px; font-weight: 800; font-family: var(--font-heading); color: var(--color-primary); } .hero-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ── Section Helpers ───────────────────────────────────────── */ .section-label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary); background: var(--color-primary-bg); border: 1px solid rgba(255,77,109,0.2); padding: 5px 14px; margin-bottom: 14px; } .section-header { text-align: center; margin-bottom: 45px; position: relative; } .section-title { font-family: var(--font-heading); font-size: 32px; font-weight: var(--font-heading-weight); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; color: var(--text-primary); } .section-header::after { content: ''; display: block; width: 50px; height: 2px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); margin: 14px auto 0; } .section-subtitle { font-size: 14px; color: var(--text-secondary); max-width: 480px; margin: 0 auto; line-height: 1.6; } /* ── Products Section ──────────────────────────────────────── */ .products-section { background: var(--bg-main); } /* Category Tabs */ .category-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; } .cat-tab { padding: 9px 20px; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); border: 1.5px solid var(--border-light); cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-xs); } .cat-tab:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); } .cat-tab.active { background: var(--grad-primary); color: white; border-color: transparent; box-shadow: 0 4px 14px rgba(255,77,109,0.30); } /* Products Grid */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } /* ── Product Card (shared design: shop, home, wishlist, related) ──── */ .product-card { display: flex; flex-direction: column; position: relative; border: 1px solid var(--border-light); background: var(--bg-surface); padding-bottom: 25px; /* Keeps a hover-scaled photograph inside the card's own box. */ overflow: hidden; transition: all 0.5s ease 0s !important; } .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--border-color); } .card-img-container { position: relative; overflow: hidden; /* * aspect-ratio, not a fixed height. * * A fixed 320px against a ~268px card is a ratio of 0.84, while most of the * catalogue is shot at 896x1200 — 3:4, or 0.75. object-fit:cover then had to * crop about 11% off the top and bottom of every one of those photos, which * on a full-length garment is the hem and the model's head. * * 3/4 matches the dominant format, so those images now show essentially * uncropped, and every card still shares one shape so the grid stays even. * The box also scales with the column instead of staying 320px at any width. */ aspect-ratio: 3 / 4; height: auto; border-bottom: 1px solid var(--border-light); } .card-img-link { display: block; height: 100%; } .card-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); } .card-img-fallback { width: 100%; height: 100%; background: var(--bg-surface-soft); display: flex; align-items: center; justify-content: center; font-size: 60px; } /* ── Scroll-reveal fade-in (site-wide utility, see footer.php) ──────── */ .reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity: 1; transform: none; transition: none; } .quick-view-modal, .quick-view-content, .product-lightbox-modal, .product-lightbox-container-wrapper { transition: none; } } .quick-view-btn { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.95); border: 1px solid var(--border-strong); padding: 10px 20px; font-size: 11px; text-transform: uppercase; font-weight: 500; cursor: pointer; display: none; white-space: nowrap; color: var(--text-primary); transition: all 0.3s ease; z-index: 5; } .product-card-cta { padding: 8px 24px; font-size: 10px; width: 100%; justify-content: center; margin-top: auto; } .product-card-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; } .product-card-actions .btn-luxury, .product-card-actions .btn-luxury-outline { width: 100%; padding: 10px; font-size: 11px; } .product-card-sizes { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; display: block; } /* ── Cart Sidebar ──────────────────────────────────────────── */ .cart-overlay { position: fixed; inset: 0; background: rgba(26, 10, 20, 0.4); backdrop-filter: blur(3px); z-index: 99998 !important; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .cart-overlay.open { opacity: 1; pointer-events: all; } .cart-sidebar { position: fixed; top: 0; right: 0; width: 420px; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--bg-surface); border-left: 1px solid var(--border-light); z-index: 99999 !important; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -8px 0 40px rgba(26,10,20,0.12); box-sizing: border-box; } .cart-sidebar.open { transform: translateX(0); } .cart-header { padding: 20px 24px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; background: var(--bg-main); } .cart-header h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; color: var(--text-primary); font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .btn-close-cart { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border-light); font-size: 16px; color: var(--text-muted); cursor: pointer; transition: var(--transition); } .btn-close-cart:hover { background: #fff5f5; border-color: var(--color-danger); color: var(--color-danger); } .cart-items { flex: 1; overflow-y: auto; padding: 16px 20px; background: var(--bg-surface); } .cart-empty { text-align: center; padding: 60px 20px; } .cart-empty-icon { font-size: 60px; margin-bottom: 14px; opacity: 0.35; } .cart-empty p { font-size: 15px; color: var(--text-secondary); } .cart-item { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-light); } .cart-item:last-child { border-bottom: none; } .cart-item-img { width: 65px; height: 75px; object-fit: cover; border: 1px solid var(--border-light); flex-shrink: 0; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); line-height: 1.35; word-break: break-word; white-space: normal; } .cart-item-price { font-size: 13px; color: var(--color-primary); font-weight: 700; } /* The stepper's circle-button look lived here. It is now one pill, defined once at the end of this file — leaving a superseded copy behind is the same two-definitions problem the unification was for. */ .btn-remove-item { color: var(--text-muted); font-size: 14px; padding: 4px 6px; cursor: pointer; transition: var(--transition); background: none; border: none; flex-shrink: 0; } .btn-remove-item:hover { color: var(--color-danger); } .cart-footer { padding: 20px 24px 24px; border-top: 1px solid var(--border-light); background: var(--bg-main); display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; width: 100%; } .cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .cart-total-label { font-size: 14px; color: var(--text-secondary); } .cart-total-amount { font-size: 26px; font-weight: 400; font-family: var(--font-heading); color: var(--color-primary); } .cart-footer .btn-luxury, .cart-footer .btn-luxury-outline { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 48px !important; padding: 0 16px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; box-sizing: border-box !important; margin: 0 0 4px 0 !important; text-decoration: none !important; } .btn-clear-cart { width: 100%; padding: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: var(--transition); text-align: center; margin-top: 4px; } .btn-clear-cart:hover { color: var(--color-danger); } /* ── Toast ─────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px); background: white; border: 1px solid var(--border-light); border-left: 4px solid var(--color-primary); padding: 14px 22px; display: flex; align-items: center; gap: 12px; min-width: 270px; max-width: 360px; z-index: 400; opacity: 0; box-shadow: var(--shadow-md); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast-icon { font-size: 22px; flex-shrink: 0; } .toast-text { font-size: 14px; font-weight: 600; color: var(--text-primary); } .toast-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* ── Alerts ────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; font-size: 14px; font-weight: 500; margin-bottom: 20px; } .alert i { margin-top: 1px; flex-shrink: 0; } .alert-danger { background: #fff5f5; border: 1px solid #fecaca; color: #b91c1c; } .alert-success { background: var(--color-secondary-bg); border: 1px solid rgba(0,201,167,0.3); color: #059669; } .alert-info { background: var(--color-primary-bg); border: 1px solid rgba(255,77,109,0.25); color: var(--color-primary-dark); } /* ── Form Controls ─────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 8px; } .form-control { width: 100%; padding: 13px 16px; background: var(--bg-main); border: 1.5px solid var(--border-light); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; transition: var(--transition); } .form-control:focus { outline: none; border-color: var(--color-primary); background: white; box-shadow: 0 0 0 3px rgba(255,77,109,0.10); } .form-control::placeholder { color: var(--text-muted); } textarea.form-control { resize: vertical; min-height: 100px; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23b8a0b0' d='M5 8l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 36px; } /* ── Checkout Page ─────────────────────────────────────────── */ .checkout-page { padding: 56px 0 80px; background: var(--bg-main); } .checkout-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; } .section-card { padding: 30px; background: var(--bg-surface); border: 1.5px solid var(--border-light); box-shadow: var(--shadow-sm); } .section-card h2 { font-size: 20px; margin-bottom: 22px; display: flex; align-items: center; gap: 10px; } .order-summary-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); } .order-summary-item:last-of-type { border-bottom: none; } .osi-emoji { font-size: 28px; width: 40px; text-align: center; } .osi-info { flex: 1; } .osi-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .osi-qty { font-size: 12px; color: var(--text-muted); } .osi-price { font-size: 15px; font-weight: 700; color: var(--color-primary); } .summary-divider { border: none; border-top: 1px solid var(--border-light); margin: 18px 0; } .summary-total-row { display: flex; justify-content: space-between; align-items: center; } .summary-total-label { font-size: 15px; color: var(--text-secondary); } .summary-total-price { font-size: 28px; font-weight: 800; font-family: var(--font-heading); color: var(--color-primary); } /* ── Order Confirmation ────────────────────────────────────── */ .confirmation-page { padding: 80px 0; text-align: center; background: var(--bg-main); } .confirmation-icon { font-size: 88px; margin-bottom: 12px; animation: bounceIn 0.8s cubic-bezier(0.34,1.56,0.64,1); } .confirmation-title { font-size: 42px; margin-bottom: 12px; } .confirmation-subtitle { font-size: 16px; color: var(--text-secondary); margin: 0 auto 32px; max-width: 480px; line-height: 1.6; } .order-code-box { display: inline-block; background: var(--color-primary-bg); border: 2px dashed rgba(255,77,109,0.35); padding: 16px 36px; margin-bottom: 32px; } .order-code-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 6px; } .order-code-value { font-size: 28px; font-weight: 800; font-family: var(--font-heading); color: var(--color-primary); letter-spacing: 3px; } .confirmation-details { max-width: 540px; margin: 0 auto 36px; padding: 28px; background: var(--bg-surface); border: 1.5px solid var(--border-light); box-shadow: var(--shadow-sm); text-align: left; } .conf-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); } .conf-row:last-child { border-bottom: none; } .conf-label { font-size: 13px; color: var(--text-muted); width: 120px; flex-shrink: 0; padding-top: 2px; } .conf-value { font-size: 14px; font-weight: 600; flex: 1; color: var(--text-primary); } /* ── Status Badges ─────────────────────────────────────────── */ .status-badge { display: inline-block; padding: 4px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .status-pending { background: #fef9c3; color: #a16207; border: 1px solid #fde68a; } .status-processing { background: var(--color-secondary-bg); color: #047857; border: 1px solid rgba(0,201,167,0.3); } .status-delivered { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; } .status-cancelled { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } /* ── Admin Styles ──────────────────────────────────────────── */ .admin-wrapper { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-main); } .admin-content { flex: 1; padding: 36px 0 60px; } /* Tabs */ .admin-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border-light); margin-bottom: 28px; } .admin-tab { padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: var(--transition); display: flex; align-items: center; gap: 8px; } .admin-tab:hover { color: var(--text-primary); background: var(--color-primary-bg); } .admin-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: var(--color-primary-bg); } /* Stats */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { padding: 22px 24px; background: var(--bg-surface); border: 1.5px solid var(--border-light); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-primary); } .stat-card-icon { font-size: 26px; margin-bottom: 10px; } .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; } .stat-value { font-size: 30px; font-weight: 800; font-family: var(--font-heading); color: var(--color-primary); } /* Data Table */ .table-wrapper { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 1.5px solid var(--border-light); background: var(--bg-main); white-space: nowrap; } .data-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-light); font-size: 14px; vertical-align: middle; } .data-table tr:hover td { background: var(--bg-main); } .data-table tr:last-child td { border-bottom: none; } /* Order items pill */ .items-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--color-primary-bg); border: 1px solid rgba(255,77,109,0.15); padding: 3px 10px; font-size: 12px; margin: 2px; color: var(--text-primary); } /* Order detail expand */ .order-detail-row { display: none; } .order-detail-row td { padding: 0; } .order-detail-inner { padding: 20px 24px; background: var(--bg-main); margin: 6px; border: 1px solid var(--border-light); } .order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; } .order-detail-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: block; margin-bottom: 4px; } .order-detail-field p { font-size: 14px; font-weight: 600; color: var(--text-primary); } /* Status select */ .status-select { padding: 8px 12px; background: var(--bg-surface); border: 1.5px solid var(--border-light); color: var(--text-primary); font-size: 13px; font-family: var(--font-body); cursor: pointer; } .status-select:focus { outline: none; border-color: var(--color-primary); } /* Action group */ .action-group { display: flex; gap: 8px; align-items: center; } /* Btn small */ .btn-sm { padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 5px; } .btn-sm-primary { background: var(--grad-primary); color: white; border: none; box-shadow: 0 2px 8px rgba(255,77,109,0.25); } .btn-sm-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,77,109,0.35); } .footer-enhanced { border-top: 1px solid var(--border-light); font-family: var(--font-body); } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 20px; } .btn-sm-outline { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); } .btn-sm-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); } .btn-sm-danger { background: #fff5f5; border: 1px solid #fecaca; color: var(--color-danger); } .btn-sm-danger:hover { background: #fee2e2; border-color: var(--color-danger); } /* Admin page header */ .admin-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .admin-page-title { font-size: 28px; color: var(--text-primary); } .admin-page-subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 4px; } /* Admin glass panel */ .glass-panel { background: var(--bg-surface); border: 1.5px solid var(--border-light); box-shadow: var(--shadow-sm); } .glass-panel:hover { border-color: var(--border-color); box-shadow: var(--shadow-card); } /* Form section */ .form-section { padding: 28px; margin-bottom: 20px; } .form-section h3 { font-size: 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; color: var(--color-primary); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* ── Login Page ────────────────────────────────────────────── */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg-main); } .login-card { width: 100%; max-width: 420px; padding: 44px; text-align: center; } .login-icon { font-size: 52px; margin-bottom: 14px; } .login-title { font-size: 28px; margin-bottom: 6px; } .login-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 30px; } .login-form { text-align: left; } /* ── Footer ────────────────────────────────────────────────── */ .footer { background: var(--text-primary); padding: 32px 0; margin-top: auto; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-logo { font-size: 20px; font-weight: 800; font-family: var(--font-heading); color: white; } .footer-logo span { color: var(--color-primary-light); } .footer-copy { font-size: 13px; color: rgba(255,255,255,0.45); } .footer-links { display: flex; gap: 20px; } .footer-links a { font-size: 13px; color: rgba(255,255,255,0.55); } .footer-links a:hover { color: var(--color-primary-light); } /* ── Expand btn (admin) ────────────────────────────────────── */ .expand-btn { cursor: pointer; background: none; border: none; color: var(--color-secondary); font-size: 13px; display: flex; align-items: center; gap: 4px; } .expand-btn:hover { color: var(--color-primary); } /* Product form extras */ .emoji-btn { font-size: 22px; padding: 8px; background: var(--bg-main); border: 1.5px solid var(--border-light); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .emoji-btn:hover, .emoji-btn.selected { background: var(--color-primary-bg); border-color: var(--color-primary); transform: scale(1.1); } .preview-card { padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; } .preview-img-wrap { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: var(--transition); background: var(--bg-main); border: 2px dashed var(--border-strong); overflow: hidden; } .preview-img-wrap img { width: 100%; height: 100%; object-fit: cover; } /* ── Product Accordions ──────────────────────────────────── */ .product-accordion { border-bottom: 1px solid var(--border-light); } /* .product-detail-static-title rides on this selector deliberately. ──────────────────────────────────────────────────────────────────────────── Design & Fit is a plain heading rather than a button, but it sits in the same stack as five accordion headers and has to be indistinguishable from them — the only difference a shopper should notice is that it has no +/- to press. It began as its own rule with its own numbers and had already drifted: 15px against 14px, and 0.9px of tracking against 0.7px. Small enough that nobody would name it, big enough that the stack looked subtly uneven. Sharing one declaration is the only arrangement in which they cannot drift again. */ .product-accordion-header, .product-detail-static-title { /* These headers are real