:root { --ivory: #f8efe4; --ivory-2: #f1e6d6; --ink: #2b2320; --ink-soft: #6b5f57; --gold: #ad8a3e; --gold-soft: #cbae72; --forest: #3b4a3e; --forest-2: #2c382f; --blush: #e7c3bc; --line: rgba(43, 35, 32, 0.14); --card: #fffdfa; --shadow: 0 18px 40px -20px rgba(43, 35, 32, 0.35); --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif; --radius: 18px; --radius-sm: 10px; --radius-lg: 26px; --lus-scale: 1; --badge-bg: #2b2320; } @import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Amiri:ital,wght@0,400;0,700;1,400&family=Cairo:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=Playfair+Display:wght@700;800&family=Noto+Serif+SC:wght@600;700&family=Baloo+2:wght@400;600;700&family=Baloo+Bhaijaan+2:wght@400;600;700&family=Inter:wght@300;400;500&family=IBM+Plex+Sans+Arabic:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Markazi+Text:wght@600;700&family=Roboto+Slab:wght@500;700&family=El+Messiri:wght@600;700&family=Courier+Prime:wght@400;700&display=swap'); body[data-path="lustrialab"] { background: var(--ivory); } body[data-path="lustrialab"] .navbar { background: var(--forest) !important; box-shadow: none !important; } body[data-path="lustrialab"] .navbar a, body[data-path="lustrialab"] .navbar span { color: var(--ivory) !important; } body[data-path="lustrialab"] .navbar .dropdown-menu a, body[data-path="lustrialab"] .navbar .dropdown-menu span { color: var(--ink) !important; } body[data-path="lustrialab"] footer { background: var(--forest-2) !important; } .lus-page { color: var(--ink); } .lus-page h1, .lus-page h2, .lus-page h3 { color: var(--ink); } .lus-eyebrow { font-size: calc(var(--lus-scale, 1) * 0.7rem); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 14px; } html[lang="ar"] .lus-eyebrow, html[lang="ar"] .lus-btn, html[lang="ar"] .lus-badge, html[lang="ar"] .lus-variant-label { letter-spacing: normal; } /* ============ Look & Feel system (Lustrialab Hero doctype: font_style) ============ Site-wide, not just headings — body text, buttons and labels all switch too. 5 curated styles x 3 languages, each spelled out explicitly (no reliance on cascade order between blocks) so a non-technical admin always gets a clean, fully-loaded, readable pairing — never a broken or missing typeface. JS always sets one of these 5 values on , defaulting to "elegant" (today's original design) if the admin hasn't chosen one yet. */ html[data-lus-font="elegant"] .lus-page, html:not([data-lus-font]) .lus-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } html[data-lus-font="elegant"] .lus-page h1, html[data-lus-font="elegant"] .lus-page h2, html[data-lus-font="elegant"] .lus-page h3, html:not([data-lus-font]) .lus-page h1, html:not([data-lus-font]) .lus-page h2, html:not([data-lus-font]) .lus-page h3 { font-family: var(--serif); font-weight: 500; margin: 0; } html[data-lus-font="elegant"][lang="ar"] .lus-page, html:not([data-lus-font])[lang="ar"] .lus-page { font-family: "Cairo", -apple-system, sans-serif; } html[data-lus-font="elegant"][lang="ar"] .lus-page h1, html[data-lus-font="elegant"][lang="ar"] .lus-page h2, html[data-lus-font="elegant"][lang="ar"] .lus-page h3, html:not([data-lus-font])[lang="ar"] .lus-page h1, html:not([data-lus-font])[lang="ar"] .lus-page h2, html:not([data-lus-font])[lang="ar"] .lus-page h3 { font-family: "Amiri", serif; font-weight: 700; } html[data-lus-font="elegant"][lang="ar"] .lus-hero h1, html:not([data-lus-font])[lang="ar"] .lus-hero h1 { font-family: "Aref Ruqaa", serif; font-weight: 700; line-height: 1.35; } html[data-lus-font="elegant"][lang="zh"] .lus-page, html:not([data-lus-font])[lang="zh"] .lus-page { font-family: "Noto Sans SC", -apple-system, sans-serif; } html[data-lus-font="elegant"][lang="zh"] .lus-page h1, html[data-lus-font="elegant"][lang="zh"] .lus-page h2, html[data-lus-font="elegant"][lang="zh"] .lus-page h3, html:not([data-lus-font])[lang="zh"] .lus-page h1, html:not([data-lus-font])[lang="zh"] .lus-page h2, html:not([data-lus-font])[lang="zh"] .lus-page h3 { font-family: "Noto Sans SC", sans-serif; font-weight: 600; } html[data-lus-font="modern"] .lus-page { font-family: "Cairo", -apple-system, sans-serif; } html[data-lus-font="modern"] .lus-page h1, html[data-lus-font="modern"] .lus-page h2, html[data-lus-font="modern"] .lus-page h3 { font-family: "Cairo", -apple-system, sans-serif; font-weight: 700; margin: 0; } html[data-lus-font="modern"][lang="zh"] .lus-page { font-family: "Noto Sans SC", sans-serif; } html[data-lus-font="modern"][lang="zh"] .lus-page h1, html[data-lus-font="modern"][lang="zh"] .lus-page h2, html[data-lus-font="modern"][lang="zh"] .lus-page h3 { font-family: "Noto Sans SC", sans-serif; font-weight: 700; } html[data-lus-font="bold"] .lus-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } html[data-lus-font="bold"] .lus-page h1, html[data-lus-font="bold"] .lus-page h2, html[data-lus-font="bold"] .lus-page h3 { font-family: "Playfair Display", serif; font-weight: 800; margin: 0; } html[data-lus-font="bold"][lang="ar"] .lus-page { font-family: "Cairo", -apple-system, sans-serif; } html[data-lus-font="bold"][lang="ar"] .lus-page h1, html[data-lus-font="bold"][lang="ar"] .lus-page h2, html[data-lus-font="bold"][lang="ar"] .lus-page h3 { font-family: "Aref Ruqaa", serif; font-weight: 700; } html[data-lus-font="bold"][lang="zh"] .lus-page { font-family: "Noto Sans SC", sans-serif; } html[data-lus-font="bold"][lang="zh"] .lus-page h1, html[data-lus-font="bold"][lang="zh"] .lus-page h2, html[data-lus-font="bold"][lang="zh"] .lus-page h3 { font-family: "Noto Serif SC", serif; font-weight: 700; } html[data-lus-font="rounded"] .lus-page { font-family: "Baloo 2", cursive; font-weight: 400; } html[data-lus-font="rounded"] .lus-page h1, html[data-lus-font="rounded"] .lus-page h2, html[data-lus-font="rounded"] .lus-page h3 { font-family: "Baloo 2", cursive; font-weight: 700; margin: 0; } html[data-lus-font="rounded"][lang="ar"] .lus-page { font-family: "Baloo Bhaijaan 2", sans-serif; font-weight: 400; } html[data-lus-font="rounded"][lang="ar"] .lus-page h1, html[data-lus-font="rounded"][lang="ar"] .lus-page h2, html[data-lus-font="rounded"][lang="ar"] .lus-page h3 { font-family: "Baloo Bhaijaan 2", sans-serif; font-weight: 700; } html[data-lus-font="rounded"][lang="zh"] .lus-page { font-family: "Noto Sans SC", sans-serif; } html[data-lus-font="rounded"][lang="zh"] .lus-page h1, html[data-lus-font="rounded"][lang="zh"] .lus-page h2, html[data-lus-font="rounded"][lang="zh"] .lus-page h3 { font-family: "Noto Sans SC", sans-serif; font-weight: 700; } html[data-lus-font="minimal"] .lus-page { font-family: "Inter", sans-serif; font-weight: 300; } html[data-lus-font="minimal"] .lus-page h1, html[data-lus-font="minimal"] .lus-page h2, html[data-lus-font="minimal"] .lus-page h3 { font-family: "Inter", sans-serif; font-weight: 400; margin: 0; } html[data-lus-font="minimal"][lang="ar"] .lus-page { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 300; } html[data-lus-font="minimal"][lang="ar"] .lus-page h1, html[data-lus-font="minimal"][lang="ar"] .lus-page h2, html[data-lus-font="minimal"][lang="ar"] .lus-page h3 { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 400; } html[data-lus-font="minimal"][lang="zh"] .lus-page { font-family: "Noto Sans SC", sans-serif; font-weight: 300; } html[data-lus-font="minimal"][lang="zh"] .lus-page h1, html[data-lus-font="minimal"][lang="zh"] .lus-page h2, html[data-lus-font="minimal"][lang="zh"] .lus-page h3 { font-family: "Noto Sans SC", sans-serif; font-weight: 400; } html[data-lus-font="editorial"] .lus-page { font-family: "Cormorant Garamond", serif; font-weight: 500; } html[data-lus-font="editorial"] .lus-page h1, html[data-lus-font="editorial"] .lus-page h2, html[data-lus-font="editorial"] .lus-page h3 { font-family: "Cormorant Garamond", serif; font-weight: 600; margin: 0; } html[data-lus-font="editorial"][lang="ar"] .lus-page { font-family: "Markazi Text", serif; font-weight: 500; } html[data-lus-font="editorial"][lang="ar"] .lus-page h1, html[data-lus-font="editorial"][lang="ar"] .lus-page h2, html[data-lus-font="editorial"][lang="ar"] .lus-page h3 { font-family: "Markazi Text", serif; font-weight: 700; } html[data-lus-font="editorial"][lang="zh"] .lus-page { font-family: "Noto Serif SC", serif; } html[data-lus-font="editorial"][lang="zh"] .lus-page h1, html[data-lus-font="editorial"][lang="zh"] .lus-page h2, html[data-lus-font="editorial"][lang="zh"] .lus-page h3 { font-family: "Noto Serif SC", serif; font-weight: 700; } html[data-lus-font="slab"] .lus-page { font-family: "Roboto Slab", serif; font-weight: 500; } html[data-lus-font="slab"] .lus-page h1, html[data-lus-font="slab"] .lus-page h2, html[data-lus-font="slab"] .lus-page h3 { font-family: "Roboto Slab", serif; font-weight: 700; margin: 0; } html[data-lus-font="slab"][lang="ar"] .lus-page { font-family: "El Messiri", sans-serif; font-weight: 500; } html[data-lus-font="slab"][lang="ar"] .lus-page h1, html[data-lus-font="slab"][lang="ar"] .lus-page h2, html[data-lus-font="slab"][lang="ar"] .lus-page h3 { font-family: "El Messiri", sans-serif; font-weight: 700; } html[data-lus-font="slab"][lang="zh"] .lus-page { font-family: "Noto Serif SC", serif; } html[data-lus-font="slab"][lang="zh"] .lus-page h1, html[data-lus-font="slab"][lang="zh"] .lus-page h2, html[data-lus-font="slab"][lang="zh"] .lus-page h3 { font-family: "Noto Serif SC", serif; font-weight: 700; } html[data-lus-font="typewriter"] .lus-page { font-family: "Courier Prime", monospace; font-weight: 400; } html[data-lus-font="typewriter"] .lus-page h1, html[data-lus-font="typewriter"] .lus-page h2, html[data-lus-font="typewriter"] .lus-page h3 { font-family: "Courier Prime", monospace; font-weight: 700; margin: 0; } html[data-lus-font="typewriter"][lang="ar"] .lus-page { font-family: "Cairo", sans-serif; font-weight: 400; } html[data-lus-font="typewriter"][lang="ar"] .lus-page h1, html[data-lus-font="typewriter"][lang="ar"] .lus-page h2, html[data-lus-font="typewriter"][lang="ar"] .lus-page h3 { font-family: "Cairo", sans-serif; font-weight: 700; } html[data-lus-font="typewriter"][lang="zh"] .lus-page { font-family: "Noto Sans SC", sans-serif; } html[data-lus-font="typewriter"][lang="zh"] .lus-page h1, html[data-lus-font="typewriter"][lang="zh"] .lus-page h2, html[data-lus-font="typewriter"][lang="zh"] .lus-page h3 { font-family: "Noto Sans SC", sans-serif; font-weight: 700; } html[data-lus-font="script"] .lus-page { font-family: "Cormorant Garamond", serif; font-weight: 500; font-style: italic; } html[data-lus-font="script"] .lus-page h1, html[data-lus-font="script"] .lus-page h2, html[data-lus-font="script"] .lus-page h3 { font-family: "Cormorant Garamond", serif; font-weight: 600; font-style: italic; margin: 0; } html[data-lus-font="script"][lang="ar"] .lus-page { font-family: "Aref Ruqaa", serif; font-weight: 400; } html[data-lus-font="script"][lang="ar"] .lus-page h1, html[data-lus-font="script"][lang="ar"] .lus-page h2, html[data-lus-font="script"][lang="ar"] .lus-page h3 { font-family: "Aref Ruqaa", serif; font-weight: 700; } html[data-lus-font="script"][lang="zh"] .lus-page { font-family: "Noto Serif SC", serif; } html[data-lus-font="script"][lang="zh"] .lus-page h1, html[data-lus-font="script"][lang="zh"] .lus-page h2, html[data-lus-font="script"][lang="zh"] .lus-page h3 { font-family: "Noto Serif SC", serif; font-weight: 700; } /* ============ Look & Feel system: size (Lustrialab Hero doctype: heading_size) ============ One admin-chosen pixel number drives the WHOLE heading hierarchy proportionally — the big hero title, section titles ("Shop by collection"), collection tile names, and the product detail popup title all scale together. Small utility dialogs (cart drawer, login, checkout, quick "one step" gate) keep their own fixed, comfortable sizes on purpose — those are transient UI, not page content, and scaling them with an extreme hero number would risk breaking their layout. */ .lus-hero { max-width: 1100px; margin: 0 auto; padding: 56px 24px 64px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; } .lus-hero h1 { font-size: var(--lus-h1-size, 48px); line-height: 1.1; margin-bottom: 18px; } @media (max-width: 480px) { .lus-hero h1 { font-size: min(var(--lus-h1-size, 48px), 40px); } } .lus-section-head h2 { font-size: calc(var(--lus-h1-size, 48px) * 0.53); } .lus-collection-card h3 { font-size: calc(var(--lus-h1-size, 48px) * 0.3); } .lus-modal-body h3 { font-size: calc(var(--lus-h1-size, 48px) * 0.43); } .lus-hero h1 em { font-style: italic; color: var(--gold); } .lus-hero p { font-size: calc(var(--lus-scale, 1) * 1rem); line-height: 1.6; color: var(--ink-soft); max-width: 44ch; margin-bottom: 22px; } .lus-hero-art { aspect-ratio: 4/3.6; border-radius: var(--radius-lg); background: linear-gradient(155deg, var(--blush), var(--ivory-2) 55%, var(--gold-soft) 130%); box-shadow: var(--shadow); animation: lusFadeUp 0.7s ease both 0.1s; } /* Once a real photo is uploaded, stop forcing it into the placeholder's fixed near-square box (that's what was cropping pieces off) — size the box to the photo's own natural shape instead, capped so a very tall photo can't blow out the layout. object-fit: contain as a safety net guarantees the whole photo is always visible, never cropped. */ .lus-hero-art.lus-has-photo { aspect-ratio: auto; background: none; } .lus-hero-art.lus-has-photo img { display: block !important; width: 100%; height: auto; max-height: 560px; object-fit: contain; } .lus-btn { font-size: calc(var(--lus-scale, 1) * 0.8rem); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 13px 28px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid transparent; background: var(--forest); color: var(--ivory); transition: background 0.2s ease, transform 0.2s ease; } .lus-btn:hover { background: var(--forest-2); color: var(--ivory); text-decoration: none; transform: translateY(-2px); } @keyframes lusFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .lus-hero h1, .lus-hero p, .lus-hero .lus-eyebrow, .lus-hero .lus-btn { animation: lusFadeUp 0.6s ease both; } .lus-hero .lus-eyebrow { animation-delay: 0s; } .lus-hero h1 { animation-delay: 0.05s; } .lus-hero p { animation-delay: 0.1s; } .lus-hero .lus-btn { animation-delay: 0.15s; } .lus-section { max-width: 1100px; margin: 0 auto; padding: 40px 24px; } .lus-section-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 26px; } .lus-collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 10px; } .lus-collection-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/1.9; display: flex; align-items: flex-end; padding: 14px; text-decoration: none; color: var(--ivory); box-shadow: var(--shadow); cursor: pointer; border: 2px solid transparent; transition: transform 0.25s ease, box-shadow 0.25s ease; background-repeat: no-repeat; background-position: center top; background-size: cover; } .lus-collection-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -18px rgba(43, 35, 32, 0.45); } .lus-collection-card.active { border-color: var(--gold); } .lus-collection-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(190deg, transparent 30%, rgba(20,16,14,0.72) 100%); } .lus-collection-card h3 { position: relative; color: var(--ivory); } .lus-cgrad-0 { background: linear-gradient(150deg, #d9a5a0, #b8734f 120%); } .lus-cgrad-1 { background: linear-gradient(150deg, #cdd6b8, #7f9470 120%); } .lus-cgrad-2 { background: linear-gradient(150deg, #d9c393, #8a6a3a 120%); } .lus-cgrad-3 { background: linear-gradient(150deg, #c9b7d4, #6d5a8a 120%); } .lus-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; } .lus-product-card { cursor: pointer; transition: transform 0.25s ease; } .lus-product-card:hover { transform: translateY(-5px); } .lus-product-card:hover .lus-product-photo { box-shadow: 0 16px 30px -16px rgba(43, 35, 32, 0.35); } .lus-product-photo { aspect-ratio: 1/1.1; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); overflow: hidden; margin-bottom: 12px; position: relative; transition: box-shadow 0.25s ease; } .lus-product-photo img { width: 100%; height: 100%; object-fit: contain; display: block; } .lus-badge { position: absolute; top: 8px; left: 8px; background: var(--badge-bg); color: var(--ivory); font-size: calc(var(--lus-scale, 1) * 0.6rem); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; } .lus-product-title { font-size: calc(var(--lus-scale, 1) * 0.9rem); font-weight: 600; margin-bottom: 2px; } .lus-product-price { font-size: calc(var(--lus-scale, 1) * 0.86rem); color: var(--gold); font-weight: 700; } .lus-stars { color: var(--gold); font-size: calc(var(--lus-scale, 1) * 0.8rem); letter-spacing: 1px; margin: 2px 0; } .lus-stars-empty { color: var(--line); } .lus-loading { grid-column: 1/-1; color: var(--ink-soft); font-size: calc(var(--lus-scale, 1) * 0.9rem); padding: 20px 0; } .lus-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20,16,14,0.5); z-index: 2000; align-items: center; justify-content: center; padding: 20px; } .lus-modal-overlay.open { display: flex; } .lus-modal { background: var(--card); border-radius: var(--radius); max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; } .lus-modal .close { position: absolute; top: 14px; inset-inline-end: 16px; font-size: 1.4rem; color: var(--ink-soft); cursor: pointer; background: none; border: none; z-index: 2; display: flex; align-items: center; justify-content: center; opacity: 1; } .lus-modal-photo-wrap { position: relative; } .lus-modal-photo { width: 100%; aspect-ratio: 1/0.85; object-fit: contain; display: block; background: var(--card); cursor: zoom-in; } .lus-zoom-glass { display: none; position: absolute; width: 130px; height: 130px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 4px 14px rgba(20,16,14,0.3); pointer-events: none; background-repeat: no-repeat; z-index: 5; } @media (hover: none) { .lus-zoom-glass { display: none !important; } .lus-modal-photo { cursor: default; } } .lus-modal-thumbs { display: flex; gap: 8px; padding: 12px 22px 0; flex-wrap: wrap; } .lus-modal-thumb { cursor: pointer; text-align: center; } .lus-modal-thumb img { width: 52px; height: 52px; object-fit: contain; background: var(--card); border-radius: var(--radius-sm); border: 2px solid transparent; display: block; } .lus-modal-thumb.active img { border-color: var(--gold); } .lus-modal-thumb-color { display: block; font-size: calc(var(--lus-scale, 1) * 0.62rem); color: var(--ink-soft); margin-top: 2px; } .lus-modal-thumb.active .lus-modal-thumb-color { color: var(--gold); font-weight: 700; } .lus-modal-thumb-video { position: relative; } .lus-modal-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: calc(var(--lus-scale, 1) * 0.85rem); text-shadow: 0 1px 3px rgba(0,0,0,0.6); pointer-events: none; } .lus-modal-body { padding: 20px 22px 26px; } .lus-modal-body h3 { margin-bottom: 8px; } .lus-modal-price { font-size: calc(var(--lus-scale, 1) * 1.1rem); color: var(--gold); font-weight: 700; margin-bottom: 14px; } .lus-modal-desc { color: var(--ink-soft); font-size: calc(var(--lus-scale, 1) * 0.92rem); line-height: 1.6; margin-bottom: 20px; } .lus-stock-note { font-size: calc(var(--lus-scale, 1) * 0.8rem); color: #b34a3c; font-weight: 600; margin-bottom: 14px; } .lus-modal-cta { display: block; text-align: center; width: 100%; box-sizing: border-box; } @media (max-width: 800px) { .lus-hero { grid-template-columns: 1fr; padding-top: 34px; } .lus-hero-art { order: -1; } } .lus-gate-overlay { display: none; position: fixed; inset: 0; background: rgba(20,16,14,0.5); z-index: 2100; align-items: center; justify-content: center; padding: 20px; } .lus-gate-overlay.open { display: flex; } .lus-gate { background: var(--card); border-radius: var(--radius); max-width: 380px; width: 100%; padding: 24px; position: relative; } .lus-gate .close { position: absolute; top: 14px; inset-inline-end: 16px; font-size: 1.3rem; color: var(--ink-soft); cursor: pointer; background: none; border: none; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 1; } .lus-gate h3 { font-size: 1.05rem; margin-bottom: 6px; } .lus-gate p.lus-gate-sub { color: var(--ink-soft); font-size: 0.84rem; margin-bottom: 16px; } .lus-gate label { display: block; font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; } .lus-gate input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.9rem; font-family: inherit; color: var(--ink); margin-bottom: 12px; } .lus-gate-error { color: #b34a3c; font-size: 0.8rem; margin-bottom: 10px; min-height: 1em; } .lus-gate-submit { display: block; width: 100%; background: var(--forest); color: var(--ivory); border: none; font-weight: 700; font-size: 0.88rem; padding: 12px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease; } .lus-gate-submit:hover { background: var(--forest-2); } .lus-gate-submit:disabled { opacity: 0.6; cursor: default; } .lus-cart-fab { position: fixed; bottom: 24px; inset-inline-end: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--forest); color: var(--ivory); border: none; box-shadow: var(--shadow); cursor: pointer; z-index: 1900; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: background 0.2s ease, transform 0.2s ease; } .lus-cart-fab:hover { background: var(--forest-2); transform: scale(1.08); } .lus-cart-badge { position: absolute; top: -2px; inset-inline-end: -2px; background: var(--gold); color: var(--ivory); font-size: 0.68rem; font-weight: 800; border-radius: 999px; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .lus-cart-badge.zero { display: none; } .lus-cart-overlay { display: none; position: fixed; inset: 0; background: rgba(20,16,14,0.5); z-index: 2200; justify-content: flex-end; } .lus-cart-overlay.open { display: flex; } .lus-cart-drawer { background: var(--card); width: 100%; max-width: 420px; height: 100%; overflow-y: auto; padding: 24px 22px; box-sizing: border-box; position: relative; } .lus-cart-drawer h3 { font-size: 1.15rem; margin: 0 0 18px; } .lus-cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: flex-start; } .lus-cart-line img { width: 56px; height: 56px; object-fit: contain; background: var(--ivory-2); border-radius: var(--radius-sm); flex-shrink: 0; } .lus-cart-line .info { flex: 1; min-width: 0; } .lus-cart-line .name { font-weight: 600; font-size: 0.88rem; margin-bottom: 4px; } .lus-cart-line .price { color: var(--gold); font-size: 0.82rem; } .lus-cart-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .lus-cart-qty button { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: none; cursor: pointer; font-size: 0.9rem; line-height: 1; color: var(--ink); } .lus-cart-qty span { font-size: 0.85rem; min-width: 16px; text-align: center; } .lus-cart-remove { font-size: 0.75rem; color: #b34a3c; text-decoration: none; margin-top: 6px; display: inline-block; } .lus-cart-empty { color: var(--ink-soft); font-size: 0.9rem; padding: 40px 0; text-align: center; } .lus-cart-subtotal { display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; padding: 16px 0; border-top: 1px solid var(--line); margin-top: 6px; } .lus-cart-checkout-btn { display: block; width: 100%; background: var(--forest); color: var(--ivory); border: none; font-weight: 700; font-size: 0.9rem; padding: 13px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease; } .lus-cart-checkout-btn:hover { background: var(--forest-2); } .lus-cart-checkout-btn:disabled { opacity: 0.5; cursor: default; } .lus-checkout-form label { display: block; font-size: 0.8rem; font-weight: 600; margin: 12px 0 5px; color: var(--ink-soft); } .lus-checkout-form input, .lus-checkout-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.9rem; font-family: inherit; color: var(--ink); } .lus-checkout-form textarea { min-height: 66px; resize: vertical; } .lus-payment-note { background: var(--ivory-2); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.8rem; color: var(--ink-soft); margin: 14px 0; } .lus-checkout-back { font-size: 0.82rem; color: var(--ink-soft); text-decoration: none; display: inline-block; margin-bottom: 14px; cursor: pointer; } .lus-checkout-error { color: #b34a3c; font-size: 0.82rem; margin: 4px 0 10px; min-height: 1em; } .lus-pw-checklist { list-style: none; margin: -6px 0 12px; padding: 0; } .lus-pw-checklist li { font-size: 0.76rem; color: var(--ink-soft); padding-inline-start: 20px; position: relative; line-height: 1.6; } .lus-pw-checklist li::before { content: "\25CB"; position: absolute; inset-inline-start: 2px; color: #c9c0b3; } .lus-pw-checklist li.met { color: #2e7d32; } .lus-pw-checklist li.met::before { content: "\2713"; color: #2e7d32; font-weight: 700; } .lus-remember-row { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 0.8rem; color: var(--ink-soft); font-weight: 400; cursor: pointer; } .lus-loyalty-box { background: var(--ivory-2); border-radius: var(--radius-sm); padding: 10px 12px; margin: 14px 0; font-size: 0.84rem; color: var(--ink); } .lus-review-section { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; } .lus-review-heading { font-weight: 700; font-size: calc(var(--lus-scale, 1) * 0.95rem); margin-bottom: 10px; } .lus-review-summary-line { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.84rem; color: var(--ink-soft); } .lus-review-item { border-bottom: 1px solid var(--line); padding: 10px 0; } .lus-review-item:last-child { border-bottom: none; } .lus-review-item .name { font-weight: 700; font-size: 0.82rem; } .lus-review-item .stars { font-size: 0.8rem; margin: 2px 0; } .lus-review-item .comment { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; } .lus-review-item .date { font-size: 0.7rem; color: var(--ink-soft); opacity: 0.7; } .lus-review-form-title { font-weight: 700; font-size: 0.84rem; margin: 12px 0 8px; } .lus-star-picker { display: flex; gap: 4px; margin-bottom: 8px; } .lus-star-picker .lus-star { font-size: 1.5rem; color: var(--line); cursor: pointer; } .lus-star-picker .lus-star.active { color: var(--gold); } #lusReviewComment { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.84rem; font-family: inherit; color: var(--ink); min-height: 60px; resize: vertical; margin-bottom: 8px; } .lus-remember-row input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; } .lus-order-success { text-align: center; padding: 40px 6px; } .lus-order-success .icon { font-size: 2.6rem; margin-bottom: 12px; color: var(--forest); } .lus-order-success p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 20px; } .lus-add-cart-btn { margin-top: 8px; width: 100%; background: none; border: 1.5px solid var(--forest); color: var(--forest); font-weight: 700; font-size: calc(var(--lus-scale, 1) * 0.8rem); padding: 8px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .lus-add-cart-btn:hover { background: var(--forest); color: var(--ivory); } .lus-add-cart-btn:disabled { opacity: 0.45; cursor: default; border-color: var(--line); color: var(--ink-soft); } .lus-modal-cta.secondary { background: none; border: 1.5px solid var(--forest); color: var(--forest); margin-top: 10px; } .lus-select-toggle { display: flex; align-items: center; width: 22px; height: 22px; margin-bottom: 4px; cursor: pointer; } .lus-select-toggle input { width: 18px; height: 18px; cursor: pointer; } .lus-select-toggle input:disabled { cursor: default; opacity: 0.4; } .lus-select-tray { position: fixed; left: 0; right: 0; bottom: 0; background: var(--forest); color: var(--ivory); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 14px 20px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 1950; transform: translateY(100%); transition: transform 0.25s ease; box-shadow: 0 -6px 20px rgba(20,16,14,0.3); } .lus-select-tray.open { transform: translateY(0); } .lus-select-tray-text { font-weight: 700; font-size: 0.9rem; } .lus-select-tray-actions { display: flex; gap: 10px; } .lus-select-tray-actions button { border: none; border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 0.85rem; cursor: pointer; } .lus-select-clear { background: rgba(255,255,255,0.16); color: #fff; } .lus-select-add { background: var(--ivory); color: var(--forest); } .lus-cart-fab.tray-open { bottom: 90px; } .lus-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; font-weight: 600; font-size: 0.88rem; color: var(--ink); text-decoration: none; cursor: pointer; background: #fff; margin-bottom: 10px; } .lus-google-btn:hover { background: var(--ivory-2); } .lus-gate-divider { display: flex; align-items: center; text-align: center; color: var(--ink-soft); font-size: 0.75rem; margin: 10px 0; } .lus-gate-divider::before, .lus-gate-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .lus-gate-divider span { padding: 0 10px; } .lus-account-tabs { display: flex; gap: 6px; margin-bottom: 14px; } .lus-account-tab { flex: 1; background: var(--ivory-2); border: none; border-radius: var(--radius-sm); padding: 9px; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; } .lus-account-tab.active { background: var(--forest); color: var(--ivory); } .lus-cart-variant { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .lus-cart-variant select { font-size: 0.78rem; font-family: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); } .lus-modal-variants { font-size: calc(var(--lus-scale, 1) * 0.8rem); color: var(--ink-soft); margin: 4px 0 10px; } .lus-variant-label { font-size: calc(var(--lus-scale, 1) * 0.78rem); font-weight: 700; color: var(--ink-soft); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; } .lus-variant-pills { display: flex; flex-wrap: wrap; gap: 8px; } .lus-variant-pill { padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: calc(var(--lus-scale, 1) * 0.84rem); cursor: pointer; } .lus-variant-pill.active { background: var(--forest); border-color: var(--forest); color: var(--ivory); } .lus-modal-variant-hint { color: #b34a3c; font-size: calc(var(--lus-scale, 1) * 0.78rem); margin-top: 10px; } .lus-cart-line-variant { color: var(--ink-soft); font-size: 0.76rem; margin: 2px 0; }