/* Theme Name: Aura Theme Theme URI: https://aurafragrances.ca Author: Aura Fragrances Author URI: https://aurafragrances.ca Description: Luxury fragrance e-commerce theme for Aura Fragrances. Pure PHP, vanilla CSS, no page builders. Version: 1.0.3 Requires at least: 6.0 Requires PHP: 8.0 License: Proprietary License URI: https://aurafragrances.ca Text Domain: aura-theme Tags: e-commerce, woocommerce, luxury, minimalist */ /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { /* Colors */ --color-gold: #c9a84c; --color-gold-dark: #b0922e; --color-white: #ffffff; --color-body-text: #6a6353; --color-heading: #262626; --color-border: #eeeeee; --color-bg: #ffffff; --color-footer-bg: #1a1a1a; --color-footer-text: #b0a99a; --color-announcement-bg: #c9a84c; --color-light-bg: #faf9f7; --color-overlay: rgba(26, 26, 26, 0.85); /* Typography */ --font-primary: 'Plus Jakarta Sans', sans-serif; --font-weight-thin: 100; --font-weight-regular: 400; --font-weight-semi: 600; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; /* Layout */ --container-max: 1280px; --container-narrow: 800px; --container-pad: 24px; /* Borders */ --radius-sm: 2px; --radius-md: 4px; --radius-full: 999px; /* Shadows */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 8px 32px rgba(0,0,0,0.14); /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* Header */ --header-height: 72px; --header-height-scrolled: 56px; --announcement-height: 36px; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* overflow-x intentionally removed — setting overflow-x on implicitly sets overflow-y to auto, creating a new scroll container that breaks position:sticky on all descendants (including .single-product-summary). */ } body { font-family: var(--font-primary); font-weight: var(--font-weight-thin); color: var(--color-body-text); background-color: var(--color-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; /* clip prevents horizontal scroll without creating a scroll container — keeps position:sticky working */ } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; border: none; background: none; cursor: pointer; } h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semi); color: var(--color-heading); line-height: 1.25; letter-spacing: -0.01em; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); } h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); } h4 { font-size: 1.125rem; } h5 { font-size: 1rem; } h6 { font-size: 0.875rem; } p { margin-bottom: var(--space-md); } p:last-child { margin-bottom: 0; } strong, b { font-weight: var(--font-weight-semi); } em, i { font-style: italic; } hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-xl) 0; } :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } /* ============================================================ UTILITY CLASSES ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } .container--narrow { max-width: var(--container-narrow); } /* Grid */ .grid { display: grid; gap: var(--space-lg); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Flex */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } /* Text */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-gold { color: var(--color-gold); } .text-white { color: var(--color-white); } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .text-lg { font-size: 1.125rem; } /* Spacing */ .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } .py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } /* Display */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .hidden { display: none !important; } .visible { visibility: visible; } .invisible { visibility: hidden; } /* ============================================================ ANIMATIONS — fade-in on scroll via Intersection Observer ============================================================ */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .fade-in.is-visible { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-24px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .fade-in-left.is-visible { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(24px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .fade-in-right.is-visible { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .fade-in, .fade-in-left, .fade-in-right { opacity: 1; transform: none; transition: none; } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 14px 32px; font-family: var(--font-primary); font-weight: var(--font-weight-semi); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast); cursor: pointer; white-space: nowrap; text-decoration: none; } .btn--primary { background-color: var(--color-gold); color: var(--color-white); border: 1px solid var(--color-gold); } .btn--primary:hover, .btn--primary:focus-visible { background-color: var(--color-gold-dark); border-color: var(--color-gold-dark); color: var(--color-white); } .btn--outline { background-color: transparent; color: var(--color-gold); border: 1px solid var(--color-gold); } .btn--outline:hover, .btn--outline:focus-visible { background-color: var(--color-gold); color: var(--color-white); } .btn--white { background-color: var(--color-white); color: var(--color-heading); border: 1px solid var(--color-white); } .btn--white:hover { background-color: var(--color-gold); border-color: var(--color-gold); color: var(--color-white); } .btn--sm { padding: 8px 18px; font-size: 0.75rem; } .btn--lg { padding: 16px 40px; font-size: 1rem; } .btn--full { width: 100%; } /* ============================================================ LINKS ============================================================ */ .link-gold { color: var(--color-gold); font-weight: var(--font-weight-semi); transition: color var(--transition-fast); } .link-gold:hover { color: var(--color-gold-dark); } .link-underline { border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color var(--transition-fast); } .link-underline:hover { color: var(--color-gold); } /* ============================================================ FORMS ============================================================ */ .form-group { margin-bottom: var(--space-md); } .form-label { display: block; margin-bottom: var(--space-xs); font-weight: var(--font-weight-semi); font-size: 0.875rem; color: var(--color-heading); letter-spacing: 0.04em; } .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-white); color: var(--color-heading); font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: 0.9375rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15); } .form-textarea { min-height: 140px; resize: vertical; } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-body-text); opacity: 0.6; } /* ============================================================ ANNOUNCEMENT BAR ============================================================ */ .announcement-bar { background-color: var(--color-announcement-bg); color: var(--color-white); text-align: center; padding: 0 var(--space-md); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.12em; height: var(--announcement-height); display: flex; align-items: center; justify-content: center; } .announcement-bar__mobile { display: none; } .announcement-bar__desktop { display: inline; } /* ============================================================ HEADER & NAVIGATION ============================================================ */ .site-header { position: sticky; top: 0; z-index: 1000; background-color: var(--color-white); border-bottom: 1px solid #ede8e0; transition: box-shadow var(--transition-base); } .site-header.scrolled { box-shadow: var(--shadow-md); } .site-header.scrolled .main-nav { height: var(--header-height-scrolled); } .main-nav { height: var(--header-height); transition: height var(--transition-base); } .main-nav .container { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-lg); } .main-nav .container > .nav-menu { justify-self: center; } /* Logo */ .site-logo { flex-shrink: 0; display: flex; align-items: center; } .site-logo img { height: 40px; width: auto; object-fit: contain; } .logo-text { font-size: 1.375rem; font-weight: var(--font-weight-semi); color: var(--color-heading); letter-spacing: 0.05em; text-transform: uppercase; } /* Primary Menu */ .nav-menu { display: flex; align-items: center; gap: 0; height: 100%; } .nav-menu > li { position: relative; height: 100%; display: flex; align-items: center; } .nav-menu > li > a { display: flex; align-items: center; padding: 0 16px; height: 100%; font-weight: 400; font-size: 0.8125rem; color: var(--color-heading); letter-spacing: 0.1em; text-transform: uppercase; transition: color var(--transition-fast); white-space: nowrap; } .nav-menu > li > a:hover, .nav-menu > li.current-menu-item > a, .nav-menu > li.current-menu-parent > a { color: var(--color-gold); } /* Dropdown indicator — handled by walker SVG button, no ::after needed */ /* Standard Dropdown */ .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background-color: var(--color-white); border: 1px solid var(--color-border); border-top: 2px solid var(--color-gold); box-shadow: var(--shadow-md); padding: var(--space-sm) 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base); border-radius: 0 0 var(--radius-md) var(--radius-md); } .nav-menu > li.has-dropdown:hover .dropdown-menu, .nav-menu > li.has-dropdown .dropdown-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu li a { display: block; padding: 10px 20px; font-size: 0.9rem; color: var(--color-body-text); transition: color var(--transition-fast), padding-left var(--transition-fast); } .dropdown-menu li a:hover { color: var(--color-gold); padding-left: 28px; } /* Mega Menu — kept standard width */ .nav-menu > li.mega-menu { position: relative; } .nav-menu > li.mega-menu .dropdown-menu { min-width: 200px; width: auto; transform: translateY(8px); display: block; padding: var(--space-sm) 0; } .nav-menu > li.mega-menu:hover .dropdown-menu, .nav-menu > li.mega-menu .dropdown-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .mega-menu-group h5 { font-size: 0.75rem; font-weight: var(--font-weight-semi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-sm); padding: 0 0 var(--space-xs) 0; border-bottom: 1px solid var(--color-border); } .mega-menu-group ul li a { padding: 6px 0; font-size: 0.875rem; } /* Nav Utilities */ .nav-utils { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; } .search-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-heading); transition: color var(--transition-fast); font-size: 1.1rem; } .search-toggle:hover { color: var(--color-gold); } .cart-icon { display: flex; align-items: center; position: relative; color: var(--color-heading); transition: color var(--transition-fast); } .cart-icon:hover { color: var(--color-gold); } .account-icon { display: flex; align-items: center; gap: 6px; font-weight: var(--font-weight-regular); font-size: 0.9375rem; color: var(--color-heading); transition: color var(--transition-fast); } .account-icon:hover { color: var(--color-gold); } .cart-count { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -7px; right: -8px; width: 16px; height: 16px; background-color: var(--color-gold); color: #fff; font-size: 0.625rem; font-weight: 700; border-radius: var(--radius-full); line-height: 1; } .cart-count:empty, .cart-count[data-count="0"] { display: none; } /* Hide cart count badge when it contains only "0" */ .cart-count { font-variant-numeric: tabular-nums; } .cart-count:not(.has-items) { display: none; } .mobile-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.25rem; color: var(--color-heading); } /* ============================================================ MOBILE MENU ============================================================ */ .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-white); z-index: 2000; overflow-y: auto; transform: translateX(-100%); transition: transform var(--transition-base); padding: var(--space-xl) var(--space-lg); } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu-close { position: absolute; top: var(--space-md); right: var(--space-md); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--color-heading); } .mobile-nav { margin-top: var(--space-xl); } .mobile-nav li { border-bottom: 1px solid var(--color-border); } .mobile-nav li a { display: block; padding: var(--space-md) 0; font-size: 1rem; font-weight: var(--font-weight-regular); color: var(--color-heading); } .mobile-nav li a:hover { color: var(--color-gold); } .mobile-nav .sub-menu { padding-left: var(--space-md); display: none; } .mobile-nav .sub-menu.is-open { display: block; } .mobile-nav li.has-dropdown > a { display: flex; justify-content: space-between; align-items: center; } /* ============================================================ SEARCH OVERLAY ============================================================ */ .search-overlay { position: fixed; inset: 0; background-color: var(--color-overlay); z-index: 1500; display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } .search-overlay.is-open { opacity: 1; visibility: visible; } .search-overlay-inner { width: 100%; max-width: 640px; padding: 0 var(--space-lg); } .search-overlay form { display: flex; gap: 0; } .search-overlay input[type="search"] { flex: 1; padding: 16px 20px; font-size: 1rem; border: 2px solid var(--color-gold); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--color-white); color: var(--color-heading); } .search-overlay input[type="search"]:focus { outline: none; } .search-overlay button[type="submit"] { padding: 16px 24px; background-color: var(--color-gold); color: var(--color-white); font-weight: var(--font-weight-semi); font-size: 0.875rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: background-color var(--transition-fast); } .search-overlay button[type="submit"]:hover { background-color: var(--color-gold-dark); } .search-overlay-close { position: fixed; top: var(--space-lg); right: var(--space-lg); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--color-white); font-size: 1.5rem; cursor: pointer; } /* ============================================================ MAIN CONTENT OFFSET (for sticky header) ============================================================ */ /* Header is position:sticky (stays in normal flow), so NO body offset is needed — it occupies its own space and only sticks once scrolled past. The previous padding-top double-offset the sticky header and left a dead ~108px white band at the top of every page. (Wave 4 fix) */ body { padding-top: 0; } /* When announcement bar is hidden (e.g. dismissed or not rendered) */ body.no-announcement { padding-top: 0; /* Zero-out --announcement-height so every sticky offset that uses calc(var(--header-height) + var(--announcement-height) + …) — including .single-product-summary, .single-product-gallery, cart/checkout sidebars — collapses cleanly when the bar is dismissed. (Wave 2 rework) */ --announcement-height: 0px; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); padding-top: var(--space-2xl); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-col h4 { font-size: 0.75rem; font-weight: var(--font-weight-semi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-lg); } .footer-brand .footer-logo { display: inline-block; margin-bottom: var(--space-md); } .footer-brand .footer-logo img { height: 80px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; } .footer-brand .logo-text { font-size: 1.25rem; font-weight: var(--font-weight-semi); color: var(--color-white); letter-spacing: 0.05em; text-transform: uppercase; } .footer-brand p { font-size: 0.875rem; line-height: 1.7; margin-bottom: var(--space-lg); color: var(--color-footer-text); } .footer-social { display: flex; gap: var(--space-sm); } .footer-social a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--color-footer-text); transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast); } .footer-social a:hover { border-color: var(--color-gold); color: var(--color-white); background-color: var(--color-gold); } .footer-col ul li { margin-bottom: var(--space-sm); } .footer-col ul li a { font-size: 0.875rem; color: var(--color-footer-text); transition: color var(--transition-fast); } .footer-col ul li a:hover { color: var(--color-gold); } .footer-col .menu { /* WP nav menu within footer */ } .footer-col .menu li { margin-bottom: var(--space-sm); } .footer-col .menu li a { font-size: 0.875rem; color: var(--color-footer-text); transition: color var(--transition-fast); } .footer-col .menu li a:hover { color: var(--color-gold); } .footer-contact p { font-size: 0.875rem; margin-bottom: var(--space-sm); color: var(--color-footer-text); } .footer-contact a { color: var(--color-footer-text); transition: color var(--transition-fast); } .footer-contact a:hover { color: var(--color-gold); } .footer-contact-note { margin-top: var(--space-md); font-size: 0.8125rem; opacity: 0.88; /* Wave 5: was 0.7 -> failed contrast on dark footer */ } .footer-bottom { padding: var(--space-lg) 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); } .footer-bottom p { font-size: 0.8125rem; color: var(--color-footer-text); opacity: 0.88; /* Wave 5: was 0.7 -> failed contrast */ margin-bottom: 0; } .footer-bottom-links { display: flex; gap: var(--space-lg); } .footer-bottom-links a { font-size: 0.8125rem; color: var(--color-footer-text); opacity: 0.88; /* Wave 5: was 0.7 -> failed contrast */ transition: color var(--transition-fast), opacity var(--transition-fast); } .footer-bottom-links a:hover { color: var(--color-gold); opacity: 1; } /* ============================================================ BREADCRUMBS ============================================================ */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); font-size: 0.8125rem; color: var(--color-body-text); padding: var(--space-md) 0; } .breadcrumb a { color: var(--color-body-text); transition: color var(--transition-fast); } .breadcrumb a:hover { color: var(--color-gold); } .breadcrumb-sep { color: var(--color-border); } .breadcrumb-current { color: var(--color-heading); font-weight: var(--font-weight-regular); } /* ============================================================ WOOCOMMERCE — General ============================================================ */ /* Remove default WooCommerce styles interference */ .woocommerce-error, .woocommerce-info, .woocommerce-message { border-top-color: var(--color-gold); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); font-size: 0.9rem; } .woocommerce-error { border-top-color: #d63031; } .woocommerce-info { border-top-color: var(--color-gold); } .woocommerce-message { border-top-color: var(--color-gold, #c9a84c); } /* Sale Badge */ .onsale, .woocommerce span.onsale { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 4px 8px; background-color: var(--color-gold); color: var(--color-white); font-size: 0.6875rem; font-weight: var(--font-weight-semi); letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-sm); position: absolute; top: var(--space-md); left: var(--space-md); z-index: 2; line-height: 1; } /* Price */ .price, .woocommerce-Price-amount { font-weight: var(--font-weight-semi); color: var(--color-heading); } del .woocommerce-Price-amount { color: var(--color-body-text); opacity: 0.6; font-weight: var(--font-weight-regular); font-size: 0.875em; } ins .woocommerce-Price-amount { color: var(--color-gold); text-decoration: none; } ins { text-decoration: none; } /* ============================================================ WOOCOMMERCE — Product Cards (archive / shop grid) ============================================================ */ .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); list-style: none; padding: 0; margin: 0; } .product-card, .woocommerce ul.products li.product { position: relative; background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition-base), transform var(--transition-base); display: flex; flex-direction: column; } .product-card:hover, .woocommerce ul.products li.product:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .product-card__image, .woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; overflow: hidden; background-color: var(--color-light-bg); aspect-ratio: 3 / 4; } .product-card__image img, .woocommerce ul.products li.product img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .product-card:hover .product-card__image img, .woocommerce ul.products li.product:hover img { transform: scale(1.04); } .product-card__body, .woocommerce ul.products li.product .woocommerce-loop-product__body { padding: var(--space-md); flex: 1; display: flex; flex-direction: column; } .product-card__brand { font-size: 0.6875rem; font-weight: var(--font-weight-semi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 4px; } .product-card__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.9375rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-sm); line-height: 1.35; } .product-card__price, .woocommerce ul.products li.product .price { font-size: 1rem; margin-bottom: var(--space-md); margin-top: auto; } /* Add to cart button on cards */ .product-card .button, .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 10px 20px; background-color: var(--color-gold); color: var(--color-white); font-family: var(--font-primary); font-weight: var(--font-weight-semi); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); transition: background-color var(--transition-fast); border: none; cursor: pointer; margin-top: auto; } .product-card .button:hover, .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product .add_to_cart_button:hover { background-color: var(--color-gold-dark); color: var(--color-white); } /* Loading state */ .woocommerce ul.products li.product .button.loading { opacity: 0.7; pointer-events: none; } /* ============================================================ WOOCOMMERCE — Shop / Archive Page ============================================================ */ .woocommerce-products-header { padding: var(--space-xl) 0 var(--space-lg); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-xl); } .woocommerce-products-header__title { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: var(--font-weight-semi); color: var(--color-heading); } .woocommerce-ordering select, .woocommerce .woocommerce-ordering select { padding: 8px 36px 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--color-heading); background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231a1a1a'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 10px 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .woocommerce-result-count { font-size: 0.875rem; color: var(--color-body-text); } /* Pagination */ .woocommerce-pagination, .woocommerce nav.woocommerce-pagination { margin-top: var(--space-2xl); display: flex; justify-content: center; } .woocommerce-pagination ul { display: flex; gap: var(--space-xs); list-style: none; } .woocommerce-pagination ul li a, .woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--color-heading); transition: all var(--transition-fast); } .woocommerce-pagination ul li a:hover, .woocommerce-pagination ul li span.current { background-color: var(--color-gold); border-color: var(--color-gold); color: var(--color-white); } /* ============================================================ WOOCOMMERCE — Single Product ============================================================ */ .single-product-layout { padding: var(--space-2xl) 0; } .product-gallery { position: sticky; top: calc(var(--header-height) + var(--announcement-height) + var(--space-lg)); } .product-gallery__main { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-md); background-color: var(--color-light-bg); margin-bottom: var(--space-md); } .product-gallery__main img { width: 100%; height: 100%; object-fit: cover; } .product-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); } .product-gallery__thumb { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: border-color var(--transition-fast); } .product-gallery__thumb.active, .product-gallery__thumb:hover { border-color: var(--color-gold); } .product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .product-details { padding-top: var(--space-sm); } .product-brand { font-size: 0.75rem; font-weight: var(--font-weight-semi); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-sm); } .product-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-md); } .product-price { font-size: 1.5rem; margin-bottom: var(--space-lg); } .product-short-desc { font-size: 0.9375rem; line-height: 1.8; margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); } .product-variations { margin-bottom: var(--space-lg); } .product-variations label { font-size: 0.8125rem; font-weight: var(--font-weight-semi); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-heading); display: block; margin-bottom: var(--space-sm); } /* Size buttons (variations) */ .variation-options { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .variation-option { padding: 8px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--color-heading); cursor: pointer; transition: all var(--transition-fast); background: var(--color-white); } .variation-option:hover, .variation-option.selected { border-color: var(--color-gold); background-color: var(--color-gold); color: var(--color-white); } .variation-option.out-of-stock { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Quantity + ATC */ .product-atc { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); } .qty-control { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .qty-control button { width: 40px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--color-heading); background: transparent; transition: background-color var(--transition-fast), color var(--transition-fast); } .qty-control button:hover { background-color: var(--color-gold); color: var(--color-white); } .qty-control input[type="number"] { width: 56px; height: 48px; text-align: center; font-size: 0.9375rem; font-weight: var(--font-weight-semi); color: var(--color-heading); border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); -moz-appearance: textfield; } .qty-control input[type="number"]::-webkit-outer-spin-button, .qty-control input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } .btn-atc { flex: 1; height: 48px; font-size: 0.875rem; } .product-meta { font-size: 0.8125rem; color: var(--color-body-text); margin-top: var(--space-md); } .product-meta span { color: var(--color-heading); } /* ============================================================ WOOCOMMERCE — Cart ============================================================ */ .woocommerce-cart-form table { width: 100%; border-collapse: collapse; } .woocommerce-cart-form table th, .woocommerce-cart-form table td { padding: var(--space-md); border-bottom: 1px solid var(--color-border); vertical-align: middle; font-size: 0.9375rem; } .woocommerce-cart-form table th { font-weight: var(--font-weight-semi); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-heading); padding-bottom: var(--space-sm); } .woocommerce-cart-form .product-thumbnail img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); } .cart-subtotals { background-color: var(--color-light-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); position: sticky; top: 100px; } .cart-subtotals h2 { font-size: 1rem; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); } .cart-subtotals table { width: 100%; font-size: 0.875rem; } .cart-subtotals table td { padding: var(--space-xs) 0; } .cart-subtotals table td:last-child { text-align: right; font-weight: var(--font-weight-semi); } .cart-subtotals .wc-proceed-to-checkout .checkout-button { display: block; width: 100%; padding: 16px; background-color: var(--color-gold); color: var(--color-white); text-align: center; font-weight: var(--font-weight-semi); font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); margin-top: var(--space-lg); transition: background-color var(--transition-fast); } .cart-subtotals .wc-proceed-to-checkout .checkout-button:hover { background-color: var(--color-gold-dark); } /* ============================================================ WOOCOMMERCE — Checkout ============================================================ */ .woocommerce-checkout { padding: var(--space-2xl) 0; } .checkout-layout { display: grid; grid-template-columns: 1fr 420px; gap: var(--space-2xl); align-items: start; } .checkout-section-title { font-size: 1.125rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-gold); } #order_review { background-color: var(--color-light-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-xl); position: sticky; top: calc(var(--header-height) + var(--announcement-height) + var(--space-lg)); } #order_review h3 { font-size: 1rem; font-weight: var(--font-weight-semi); margin-bottom: var(--space-lg); } #place_order { display: block; width: 100%; padding: 16px; background-color: var(--color-gold); color: var(--color-white); font-family: var(--font-primary); font-weight: var(--font-weight-semi); font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: background-color var(--transition-fast); margin-top: var(--space-lg); } #place_order:hover { background-color: var(--color-gold-dark); } /* ============================================================ WOOCOMMERCE — My Account ============================================================ */ .woocommerce-account { padding: var(--space-2xl) 0; } .account-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-2xl); align-items: start; } .woocommerce-MyAccount-navigation ul { list-style: none; } .woocommerce-MyAccount-navigation ul li a { display: block; padding: 10px var(--space-md); font-size: 0.9rem; color: var(--color-body-text); border-left: 2px solid transparent; transition: all var(--transition-fast); } .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { color: var(--color-gold); border-left-color: var(--color-gold); padding-left: var(--space-lg); } .woocommerce-MyAccount-content { min-width: 0; } /* ============================================================ PAGE SECTIONS (reusable section styles) ============================================================ */ .section { padding: var(--space-3xl) 0; } .section--light { background-color: var(--color-light-bg); } .section-header { text-align: center; max-width: 600px; margin: 0 auto var(--space-2xl); } .section-label { font-size: 0.6875rem; font-weight: var(--font-weight-semi); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); display: block; margin-bottom: var(--space-sm); } .section-title { font-size: clamp(1.5rem, 3.5vw, 2.5rem); color: var(--color-heading); margin-bottom: var(--space-md); } .section-subtitle { font-size: 0.9375rem; color: var(--color-body-text); line-height: 1.8; } /* ============================================================ HERO BANNER ============================================================ */ .hero { position: relative; min-height: 80vh; display: flex; align-items: center; overflow: hidden; background-color: var(--color-light-bg); } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.1) 70%); z-index: 1; } .hero__content { position: relative; z-index: 2; max-width: 600px; } .hero__label { font-size: 0.6875rem; font-weight: var(--font-weight-semi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); display: block; margin-bottom: var(--space-md); } .hero__title { color: var(--color-white); margin-bottom: var(--space-md); } .hero__subtitle { color: rgba(255,255,255,0.8); font-size: 1rem; margin-bottom: var(--space-xl); max-width: 480px; } .hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; } /* ============================================================ CATEGORY CARDS ============================================================ */ .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .category-card { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 3 / 4; display: block; } .category-card__image { position: absolute; inset: 0; } .category-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .category-card:hover .category-card__image img { transform: scale(1.06); } .category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,26,26,0.7) 0%, transparent 60%); transition: background var(--transition-base); } .category-card:hover .category-card__overlay { background: linear-gradient(to top, rgba(26,26,26,0.85) 0%, transparent 60%); } .category-card__body { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-xl); } .category-card__name { font-size: 1.25rem; font-weight: var(--font-weight-semi); color: var(--color-white); display: block; margin-bottom: var(--space-xs); } .category-card__count { font-size: 0.8125rem; color: rgba(255,255,255,0.65); } /* ============================================================ NOTICES & ALERTS ============================================================ */ .alert { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: var(--space-md); border-left: 3px solid; } .alert--success { background-color: #f0fdf4; border-color: #22c55e; color: #166534; } .alert--error { background-color: #fef2f2; border-color: #ef4444; color: #991b1b; } .alert--info { background-color: #fefce8; border-color: var(--color-gold); color: #713f12; } /* ============================================================ LOADING SPINNER ============================================================ */ .spinner { width: 24px; height: 24px; border: 2px solid var(--color-border); border-top-color: var(--color-gold); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ RESPONSIVE — Tablet (1024px) ============================================================ */ @media (max-width: 1024px) { :root { --container-pad: 20px; } .products { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } .footer-brand { grid-column: 1 / -1; } .checkout-layout { grid-template-columns: 1fr 360px; gap: var(--space-xl); } .nav-menu > li > a { padding: 0 12px; font-size: 0.875rem; } } /* ============================================================ RESPONSIVE — Tablet overflow zone (Wave 4 fix) Between the 768px and 1024px breakpoints the desktop header nav and the 2-column cart/checkout layouts do not fit (e.g. iPad Air portrait = 820px, iPad Pro 11" = 834px), causing horizontal scroll. Switch to the mobile header + single-column commerce layouts up to 960px so there is never a horizontal scrollbar on any tablet. ============================================================ */ @media (max-width: 960px) { /* Header: hide desktop menu, show hamburger early */ .nav-menu { display: none; } .mobile-menu-toggle { display: flex; } /* Commerce: stack to a single column so the order/summary panel can't push a fixed-width sidebar past the viewport edge */ .checkout-layout { grid-template-columns: 1fr; } .aura-checkout-layout { grid-template-columns: 1fr; gap: 0; } .aura-cart-layout { grid-template-columns: 1fr; } .aura-checkout-summary-toggle { display: flex; } #order_review { position: static; } } /* ============================================================ RESPONSIVE — Mobile (768px) ============================================================ */ @media (max-width: 768px) { :root { --container-pad: 16px; --space-3xl: 64px; --space-2xl: 48px; } /* Nav — hide desktop menu, show mobile toggle */ .nav-menu { display: none; } .mobile-menu-toggle { display: flex; } /* Products — 2 columns */ .products { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .products .product-card, .products li.product { min-width: 0; flex: none; } /* Grid utilities */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .footer-brand { grid-column: auto; } .footer-bottom { flex-direction: column; text-align: center; } /* Checkout */ .checkout-layout { grid-template-columns: 1fr; } #order_review { position: static; } /* Account */ .account-layout { grid-template-columns: 1fr; } /* Single product */ .product-gallery { position: static; } /* Hero */ .hero { min-height: 60vh; } .hero__actions { flex-direction: column; } /* Category grid */ .category-grid { grid-template-columns: 1fr 1fr; } /* Announcement */ .announcement-bar { font-size: 0.75rem; padding: 0 var(--space-sm); white-space: nowrap; overflow: hidden; } .announcement-bar__desktop { display: none; } .announcement-bar__mobile { display: inline; } } /* ============================================================ RESPONSIVE — Small mobile (480px) ============================================================ */ @media (max-width: 480px) { .products { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .category-grid { grid-template-columns: 1fr; } .product-atc { flex-direction: column; } .btn-atc { height: 48px; } } /* ============================================================ FADE-IN SECTION ANIMATION ============================================================ */ .fade-in-section { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in-section.visible { opacity: 1; transform: translateY(0); } /* ============================================================ HERO SECTION ============================================================ */ .hero-section { position: relative; width: 100%; height: 90vh; min-height: 560px; max-height: 900px; overflow: hidden; background: var(--color-heading); } .hero-slides { position: relative; width: 100%; height: 100%; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; } .hero-slide.is-active { opacity: 1; pointer-events: auto; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 6s ease; } .hero-slide.is-active .hero-bg { transform: scale(1); } /* CSS gradient fallbacks when no ACF image is set */ .hero-bg--gradient-1 { background: linear-gradient(135deg, #1a1a1a 0%, #3a2e1c 50%, #262626 100%); } .hero-bg--gradient-2 { background: linear-gradient(135deg, #262626 0%, #6a6353 60%, #1a1a1a 100%); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(26, 26, 26, 0.25) 0%, rgba(26, 26, 26, 0.55) 60%, rgba(26, 26, 26, 0.75) 100% ); } .hero-content { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--container-max); padding: 0 var(--container-pad); color: var(--color-white); text-align: center; } .hero-eyebrow { font-size: 0.75rem; font-weight: var(--font-weight-semi); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-md); } .hero-title { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: var(--font-weight-thin); color: var(--color-white); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--space-lg); } .hero-title em { font-style: italic; color: var(--color-gold); } .hero-sub { font-size: 0.9rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.8); margin-bottom: var(--space-xl); } .hero-ctas { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } /* Hero controls */ .hero-prev, .hero-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--color-white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base); } .hero-prev { left: var(--space-lg); } .hero-next { right: var(--space-lg); } .hero-prev:hover, .hero-next:hover { background: var(--color-gold); border-color: var(--color-gold); } .hero-dots { position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-sm); z-index: 10; } .hero-dot { width: 32px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background var(--transition-base), width var(--transition-base); } .hero-dot.is-active { background: var(--color-gold); width: 48px; } @media (max-width: 640px) { .hero-section { height: 70vh; min-height: 420px; } .hero-prev, .hero-next { width: 38px; height: 38px; } .hero-prev { left: var(--space-sm); } .hero-next { right: var(--space-sm); } } /* ============================================================ BUTTONS (shared) ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 14px 32px; font-size: 0.8125rem; font-weight: var(--font-weight-semi); letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast); white-space: nowrap; text-decoration: none; } .btn:hover { transform: translateY(-1px); } .btn--gold { background: var(--color-gold); color: var(--color-white); border: 1px solid var(--color-gold); } .btn--gold:hover { background: var(--color-gold-dark); border-color: var(--color-gold-dark); color: var(--color-white); } .btn--outline-white { background: transparent; color: var(--color-white); border: 1px solid rgba(255, 255, 255, 0.9); } .btn--outline-white:hover { background: var(--color-white); color: var(--color-heading); border-color: var(--color-white); } .btn--full { width: 100%; } /* ============================================================ CATEGORY STRIP ============================================================ */ .category-strip { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border); } .category-strip-list { display: flex; gap: var(--space-xl); justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: var(--space-xs); } .category-strip-list::-webkit-scrollbar { display: none; } .category-strip-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); color: var(--color-body-text); font-size: 0.8rem; font-weight: var(--font-weight-semi); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--transition-base); } .category-strip-item:hover { color: var(--color-gold); } .cat-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--color-border); border-radius: 50%; transition: border-color var(--transition-base), background var(--transition-base); } .category-strip-item:hover .cat-icon { border-color: var(--color-gold); background: rgba(201, 168, 76, 0.06); } @media (max-width: 640px) { .category-strip-list { justify-content: flex-start; padding-left: var(--container-pad); } } /* ============================================================ SECTION HEADERS ============================================================ */ .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-xl); } .section-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--font-weight-regular); color: var(--color-heading); letter-spacing: -0.01em; position: relative; padding-bottom: var(--space-sm); } .section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--color-gold); } .section-link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: 0.8rem; font-weight: var(--font-weight-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); text-decoration: none; transition: gap var(--transition-base); } .section-link:hover { gap: var(--space-sm); } /* ============================================================ PRODUCTS CAROUSEL SECTION ============================================================ */ .products-carousel-section { padding: var(--space-3xl) 0; } .products-carousel-section--alt { background: var(--color-light-bg); } .carousel-wrapper { position: relative; padding: 0 28px; overflow: hidden; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; background: var(--color-white); border: 1px solid var(--color-border); color: var(--color-heading); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base); } .carousel-btn:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-white); box-shadow: var(--shadow-md); } .carousel-btn--prev { left: 0; } .carousel-btn--next { right: 0; } .products-carousel { display: flex; gap: var(--space-lg); cursor: grab; transition: transform 0.35s ease; will-change: transform; align-items: stretch; } .products-carousel:active { cursor: grabbing; } /* Product Card */ .product-card { flex: 0 0 calc((100% - (4 * var(--space-lg))) / 5); min-width: 200px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition-base), border-color var(--transition-base); position: relative; display: flex; flex-direction: column; } .product-card:hover { box-shadow: var(--shadow-md); border-color: rgba(201, 168, 76, 0.3); } .product-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } .product-image { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-light-bg); } .product-image img, .product-image .product-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image img, .product-card:hover .product-image .product-img { transform: scale(1.05); } .product-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-gold); background: linear-gradient(160deg, #f9f6f0 0%, #efe8d6 100%); opacity: 0.6; } /* Product Badges */ .product-badge { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 2; font-size: 0.7rem; font-weight: var(--font-weight-semi); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); } .product-badge--sale { background: var(--color-gold); color: var(--color-white); } .product-badge--new { background: var(--color-heading); color: var(--color-white); } .product-badge--bestseller { background: #b91c1c; /* deep red */ color: var(--color-white); } /* ─── Hover slide-up overlay ─── */ .product-hover-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 12px; background: rgba(18, 18, 18, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; gap: 8px; transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); z-index: 4; } .product-card:hover .product-hover-overlay { transform: translateY(0); } .phov-btn { flex: 1; padding: 9px 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-sm); cursor: pointer; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s, color 0.18s, border-color 0.18s; border: none; } .phov-btn--quick-view { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.75); } .phov-btn--quick-view:hover { background: rgba(255,255,255,0.15); border-color: #fff; } .phov-btn--add-to-cart { background: var(--color-gold, #c2a957); color: #1a1a1a; border: 1px solid var(--color-gold, #c2a957); } .phov-btn--add-to-cart:hover { background: var(--color-gold-dark, #a88e3e); border-color: var(--color-gold-dark, #a88e3e); color: #fff; } .phov-btn--add-to-cart.is-loading { opacity: 0.65; cursor: wait; } .phov-btn--add-to-cart.is-added { background: var(--color-gold, #c9a84c); border-color: var(--color-gold, #c9a84c); color: #fff; } /* Product info */ .product-info { padding: var(--space-md); padding-bottom: 0; flex-grow: 1; display: flex; flex-direction: column; } .product-info > :last-child { margin-top: auto; } .product-cat { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-xs); } .product-cat a { color: inherit; text-decoration: none; } .product-cat a:hover { opacity: 0.8; } .product-title, .woocommerce-loop-product__title { font-size: 0.8rem; font-weight: var(--font-weight-semi); color: var(--color-heading); line-height: 1.4; margin-bottom: var(--space-sm); letter-spacing: 0.02em; text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-price { font-size: 0.9rem; color: var(--color-heading); margin-bottom: var(--space-md); } .product-price del { color: var(--color-body-text); font-weight: var(--font-weight-regular); margin-right: var(--space-xs); opacity: 0.6; } .product-price ins { text-decoration: none; color: var(--color-gold-dark); font-weight: var(--font-weight-semi); } /* ─── Add to Cart toast notification ─── */ .aura-toast { position: fixed; top: 24px; right: 24px; z-index: 99999; background: #1a1a1a; color: #fff; padding: 13px 20px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,0.22); display: flex; align-items: center; gap: 10px; transform: translateX(110%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; opacity: 0; pointer-events: none; } .aura-toast.is-visible { transform: translateX(0); opacity: 1; pointer-events: auto; } .aura-toast__icon { width: 18px; height: 18px; background: var(--color-gold, #c2a957); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.65rem; color: #1a1a1a; font-weight: 700; } .aura-toast__cart-link { color: var(--color-gold, #c2a957); text-decoration: underline; font-size: 0.8rem; margin-left: 4px; } /* ─── Quick View Modal ─── */ .aura-qv-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.65); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.28s ease; } .aura-qv-backdrop.is-open { opacity: 1; } .aura-qv-modal { background: #fff; border-radius: var(--radius-md); max-width: 820px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.25); display: flex; position: relative; transform: translateY(30px) scale(0.97); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .aura-qv-backdrop.is-open .aura-qv-modal { transform: translateY(0) scale(1); } .aura-qv-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: none; background: rgba(0,0,0,0.06); border-radius: 50%; cursor: pointer; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; color: #333; z-index: 2; transition: background 0.15s; } .aura-qv-close:hover { background: rgba(0,0,0,0.14); } .aura-qv-image { flex: 0 0 42%; background: #f7f4ef; border-radius: var(--radius-md) 0 0 var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; } .aura-qv-image img { width: 100%; height: 100%; object-fit: cover; } .aura-qv-details { flex: 1; padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 10px; } .aura-qv-category { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold, #c2a957); font-weight: 600; } .aura-qv-title { font-size: 1.25rem; font-weight: 700; color: #1a1a1a; line-height: 1.3; margin: 0; } .aura-qv-price { font-size: 1.1rem; color: #1a1a1a; font-weight: 600; } .aura-qv-price del { color: #999; font-weight: 400; margin-right: 6px; } .aura-qv-price ins { text-decoration: none; color: var(--color-gold-dark, #a88e3e); } .aura-qv-desc { font-size: 0.88rem; color: #555; line-height: 1.65; } .aura-qv-actions { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; } .aura-qv-atc { padding: 13px 24px; background: var(--color-gold, #c2a957); color: #1a1a1a; border: none; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.18s, color 0.18s; text-align: center; text-decoration: none; display: block; } .aura-qv-atc:hover { background: var(--color-gold-dark, #a88e3e); color: #fff; } .aura-qv-atc.is-loading { opacity: 0.65; cursor: wait; } .aura-qv-atc.is-added { background: var(--color-gold, #c9a84c); border-color: var(--color-gold, #c9a84c); color: #fff; } .aura-qv-full-link { text-align: center; font-size: 0.78rem; color: #888; text-decoration: underline; cursor: pointer; } .aura-qv-loading { padding: 60px 40px; text-align: center; color: #888; font-size: 0.9rem; } @media (max-width: 600px) { .aura-qv-modal { flex-direction: column; } .aura-qv-image { flex: none; height: 260px; border-radius: var(--radius-md) var(--radius-md) 0 0; } .aura-toast { right: 12px; left: 12px; top: 12px; } } @media (max-width: 1200px) { .product-card { flex: 0 0 calc((100% - (3 * var(--space-lg))) / 4); } } @media (max-width: 900px) { .product-card { flex: 0 0 calc((100% - (2 * var(--space-lg))) / 3); } .carousel-btn--prev { left: 0; } .carousel-btn--next { right: 0; } } @media (max-width: 600px) { .product-card { flex: 0 0 calc((100% - var(--space-lg)) / 2); } /* On touch/mobile, always show the hover overlay */ .product-hover-overlay { transform: translateY(0); } } @media (max-width: 420px) { .product-card { flex: 0 0 100%; } } /* ============================================================ PROMO BANNER ============================================================ */ .promo-banner { background: var(--color-heading); padding: var(--space-3xl) var(--container-pad); text-align: center; position: relative; overflow: hidden; } .promo-banner::before { content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(201, 168, 76, 0.12) 0%, transparent 70%); pointer-events: none; } .promo-banner-content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .promo-banner-eyebrow { font-size: 0.7rem; font-weight: var(--font-weight-semi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-md); } .promo-banner-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: var(--font-weight-thin); color: var(--color-white); letter-spacing: -0.01em; line-height: 1.15; margin-bottom: var(--space-lg); } .promo-banner-text { font-size: 1rem; color: rgba(255, 255, 255, 0.65); margin-bottom: var(--space-xl); line-height: 1.7; } /* ============================================================ NEWSLETTER SECTION ============================================================ */ .newsletter-section { padding: var(--space-3xl) 0; background: var(--color-light-bg); border-top: 1px solid var(--color-border); } .newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xl); flex-wrap: wrap; } .newsletter-text { flex: 1 1 300px; } .newsletter-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--font-weight-thin); color: var(--color-heading); margin-bottom: var(--space-sm); } .newsletter-sub { font-size: 0.95rem; color: var(--color-body-text); } .newsletter-form { flex: 1 1 380px; } .newsletter-input-group { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); } .newsletter-input { flex: 1; padding: 14px var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); font-size: 0.9rem; color: var(--color-heading); outline: none; transition: border-color var(--transition-base); } .newsletter-input:focus { border-color: var(--color-gold); } .newsletter-btn { flex-shrink: 0; padding: 14px var(--space-xl); } .newsletter-disclaimer { font-size: 0.75rem; color: var(--color-body-text); opacity: 0.7; } @media (max-width: 640px) { .newsletter-inner { flex-direction: column; align-items: flex-start; } .newsletter-input-group { flex-direction: column; } .newsletter-btn { width: 100%; } } /* ============================================================ SHOP PAGE ============================================================ */ .shop-page { padding: var(--space-2xl) 0 var(--space-3xl); } .shop-header { margin-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-lg); } .shop-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--font-weight-thin); color: var(--color-heading); margin-bottom: var(--space-sm); } .shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-2xl); align-items: start; } /* Sidebar */ .shop-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-lg)); } .filter-section { margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); } .filter-section:last-child { border-bottom: none; padding-bottom: 0; } .filter-title { font-size: 0.75rem; font-weight: var(--font-weight-semi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-heading); margin-bottom: var(--space-md); } .filter-list { display: flex; flex-direction: column; gap: var(--space-sm); } .filter-list li a, .filter-sublist li a { font-size: 0.875rem; color: var(--color-body-text); text-decoration: none; display: flex; justify-content: space-between; transition: color var(--transition-base); } .filter-list li a:hover, .filter-sublist li a:hover { color: var(--color-gold); } .filter-list li.current-cat > a { color: var(--color-gold); font-weight: var(--font-weight-semi); } .filter-sublist { margin-top: var(--space-sm); margin-left: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); } .cat-count { opacity: 0.5; font-size: 0.8em; } /* Shop Toolbar */ .shop-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) 0; margin-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); } .woocommerce-result-count { font-size: 0.85rem; color: var(--color-body-text); } .woocommerce-ordering select { padding: 8px 36px 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--color-heading); background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231a1a1a'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 10px 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } /* Products Grid — the actual grid is WooCommerce's ul.products inside this wrapper */ .products-grid { /* wrapper only — grid lives on ul.products */ } .products-grid ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-xl) !important; } .products-grid .product-card { flex: none; } /* Shop Pagination */ .shop-pagination { margin-top: var(--space-2xl); } .woocommerce-pagination ul { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; } .woocommerce-pagination ul li a, .woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--color-heading); text-decoration: none; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base); } .woocommerce-pagination ul li a:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-white); } .woocommerce-pagination ul li span.current { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-white); } @media (max-width: 960px) { .shop-layout { grid-template-columns: 1fr; } .shop-sidebar { position: static; display: none; /* Hidden by default on mobile — toggle with JS if needed */ } .products-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .products-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-md) !important; } } /* ============================================================ SHOP FILTER BAR — Phase 3 AJAX filter overhaul ============================================================ */ /* Override old sidebar-based layout — shop is now single column */ .shop-layout { display: block !important; } .shop-sidebar { display: none !important; } /* ── Filter Bar Wrapper ─────────────────────────────────── */ .shop-filter-bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-bg, #faf8f3); border: 1px solid rgba(201,168,76,0.25); border-radius: var(--radius-md, 6px); margin-bottom: var(--space-lg); flex-wrap: wrap; position: relative; } /* ── Filter Groups (left) ───────────────────────────────── */ .filter-bar-groups { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; flex: 1; } /* Individual filter group (dropdown trigger + panel) */ .filter-group { position: relative; flex-shrink: 0; } /* Groups that are inline toggles (On Sale / New Arrivals) */ .filter-group--toggle { margin-left: var(--space-sm); } /* ── Filter Group Button ────────────────────────────────── */ .filter-group-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: transparent; border: 1px solid var(--color-border); border-radius: 100px; font-size: 0.8125rem; font-weight: var(--font-weight-semi); color: var(--color-body-text); cursor: pointer; transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base); white-space: nowrap; letter-spacing: 0.02em; } .filter-group-btn:hover, .filter-group-btn[aria-expanded="true"] { border-color: var(--color-gold); color: var(--color-gold); } .filter-group-btn.has-active { border-color: var(--color-gold); background: rgba(201, 168, 76, 0.08); color: var(--color-gold); } .filter-group-count { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--color-gold); color: #000; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; line-height: 1; margin-right: 2px; } .filter-chevron { transition: transform var(--transition-base); flex-shrink: 0; } .filter-group-btn[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); } /* ── Filter Group Dropdown Panel ────────────────────────── */ .filter-group-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 500; min-width: 220px; max-height: 320px; overflow-y: auto; background: var(--color-bg, #faf8f3); border: 1px solid rgba(201,168,76,0.3); border-radius: var(--radius-md, 6px); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); color: var(--color-body-text, #6a6353); box-shadow: 0 8px 32px rgba(0,0,0,0.1); animation: filterPanelIn 0.18s ease; } .filter-group-panel[hidden] { display: none; } /* Price panel is a bit wider */ .filter-group-panel--price { min-width: 280px; } @keyframes filterPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Filter Checkboxes ──────────────────────────────────── */ .filter-check-label { display: flex; align-items: center; gap: var(--space-sm); padding: 6px 4px; cursor: pointer; border-radius: var(--radius-sm, 4px); transition: background var(--transition-base); } .filter-check-label:hover { background: rgba(201,168,76,0.07); } .filter-check-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-gold); flex-shrink: 0; cursor: pointer; } .filter-check-text { flex: 1; font-size: 0.875rem; color: var(--color-body-text); line-height: 1.3; } .filter-check-count { font-size: 0.75rem; color: rgba(0,0,0,0.38); flex-shrink: 0; } /* ── Price Range Inputs ─────────────────────────────────── */ /* ── Price Range Dual-Handle Slider ─────────────────────── */ .filter-price-slider-wrap { padding: 4px 4px 8px; min-width: 220px; } .filter-price-display { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--color-heading); margin-bottom: 16px; font-feature-settings: "tnum"; } .filter-price-display span:first-child, .filter-price-display span:last-child { min-width: 40px; font-weight: 500; color: var(--color-gold); } .filter-price-sep { font-size: 0.875rem; color: rgba(0,0,0,0.3); flex-shrink: 0; } /* Track container — both range inputs are stacked here */ .price-slider-track-wrap { position: relative; height: 4px; background: rgba(0,0,0,0.1); border-radius: 2px; margin: 12px 0 4px; } /* Gold fill between the two thumbs */ .price-slider-fill { position: absolute; top: 0; height: 100%; background: var(--color-gold, #c9a84c); border-radius: 2px; pointer-events: none; left: 0; width: 100%; } /* Both range inputs sit on top of the track */ .price-slider { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 20px; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; } .price-slider:focus { outline: none; } /* Thumb styles — webkit */ .price-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-gold, #c9a84c); border: 2px solid var(--color-bg, #faf8f3); cursor: pointer; pointer-events: all; transition: transform 0.1s ease, box-shadow 0.1s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .price-slider::-webkit-slider-thumb:hover, .price-slider:focus::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(201,168,76,0.25); } /* Thumb styles — moz */ .price-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-gold, #c9a84c); border: 2px solid var(--color-bg, #faf8f3); cursor: pointer; pointer-events: all; transition: transform 0.1s ease, box-shadow 0.1s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .price-slider::-moz-range-thumb:hover { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(201,168,76,0.25); } /* Min slider sits below max so max thumb stays on top when dragging to low values */ .price-slider--min { z-index: 2; } .price-slider--max { z-index: 3; } /* ── Toggle Switches (On Sale / New Arrivals) ───────────── */ .filter-toggle-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 0; } .filter-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .filter-toggle-track { width: 34px; height: 18px; border-radius: 9px; background: var(--color-border); position: relative; transition: background 0.2s ease; flex-shrink: 0; } .filter-toggle-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; } .filter-toggle-input:checked + .filter-toggle-track { background: var(--color-gold); } .filter-toggle-input:checked + .filter-toggle-track::after { transform: translateX(16px); } .filter-toggle-text { font-size: 0.8125rem; font-weight: var(--font-weight-semi); color: var(--color-body-text); white-space: nowrap; letter-spacing: 0.02em; } .filter-toggle-input:checked ~ .filter-toggle-text { color: var(--color-gold); } /* ── Filter Bar Right (sort + mobile trigger) ───────────── */ .filter-bar-right { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; } .filter-sort-select { padding: 8px 32px 8px 12px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px; border: 1px solid var(--color-border); border-radius: 100px; font-size: 0.8125rem; color: var(--color-body-text); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; transition: border-color var(--transition-base); } .filter-sort-select:hover, .filter-sort-select:focus { border-color: var(--color-gold); outline: none; } /* Mobile trigger button — hidden on desktop */ .filter-mobile-trigger { display: none; align-items: center; gap: 6px; padding: 8px 14px; background: transparent; border: 1px solid var(--color-border); border-radius: 100px; font-size: 0.8125rem; font-weight: var(--font-weight-semi); color: var(--color-body-text); cursor: pointer; white-space: nowrap; transition: border-color var(--transition-base), color var(--transition-base); } .filter-mobile-trigger:hover { border-color: var(--color-gold); color: var(--color-gold); } /* ── Active Filter Chips ────────────────────────────────── */ .filter-chips-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); } .filter-chips-bar[hidden] { display: none; } .filter-chips-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); flex: 1; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.4); border-radius: 100px; font-size: 0.8rem; color: var(--color-gold); } .filter-chip-label { line-height: 1; } .filter-chip-remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: transparent; border: none; padding: 0; cursor: pointer; color: var(--color-gold); opacity: 0.7; transition: opacity var(--transition-base); flex-shrink: 0; } .filter-chip-remove:hover { opacity: 1; } .filter-clear-all { background: transparent; border: none; padding: 5px 8px; font-size: 0.8rem; color: rgba(0,0,0,0.45); cursor: pointer; text-decoration: underline; white-space: nowrap; transition: color var(--transition-base); flex-shrink: 0; } .filter-clear-all:hover { color: var(--color-gold); } /* ── Skeleton Loader ────────────────────────────────────── */ .filter-skeleton { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-bottom: var(--space-xl); } .filter-skeleton[hidden] { display: none; } .skeleton-card { background: var(--color-border, #eeeeee); border-radius: var(--radius-md, 6px); aspect-ratio: 3 / 4; overflow: hidden; } /* Shimmer animation */ @keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .shimmer { background-image: linear-gradient( 90deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.02) 100% ); background-size: 600px 100%; animation: shimmer 1.4s infinite linear; } /* Products grid fade when loading */ #shop-products-grid { transition: opacity 0.2s ease; } /* ── No products message ────────────────────────────────── */ .aura-no-products { grid-column: 1 / -1; text-align: center; padding: var(--space-3xl) 0; color: var(--color-body-text); font-size: 1rem; } /* ── Mobile Filter Drawer ───────────────────────────────── */ .filter-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 900; opacity: 0; transition: opacity 0.3s ease; } .filter-drawer-overlay.is-visible { display: block; opacity: 1; } .filter-drawer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 901; background: var(--color-bg, #faf8f3); color: var(--color-body-text, #6a6353); border-top: 1px solid rgba(201,168,76,0.25); border-radius: 16px 16px 0 0; max-height: 85dvh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); overscroll-behavior: contain; } .filter-drawer.is-open { transform: translateY(0); } .filter-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .filter-drawer-title { font-size: 1rem; font-weight: var(--font-weight-semi); color: var(--color-heading); letter-spacing: 0.05em; text-transform: uppercase; } .filter-drawer-close { width: 44px; height: 44px; background: transparent; border: 1px solid var(--color-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-body-text); transition: border-color var(--transition-base), color var(--transition-base); } .filter-drawer-close:hover { border-color: var(--color-gold); color: var(--color-gold); } .filter-drawer-body { overflow-y: auto; flex: 1; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-lg); -webkit-overflow-scrolling: touch; } .filter-drawer-section { display: flex; flex-direction: column; gap: var(--space-sm); } .filter-drawer-section-title { font-size: 0.7rem; font-weight: var(--font-weight-semi); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 4px; } .filter-drawer-options { display: flex; flex-direction: column; gap: 2px; } .filter-drawer-options--scrollable { max-height: 200px; overflow-y: auto; } .filter-sort-select-mobile { width: 100%; padding: 10px 36px 10px 12px; background: rgba(0,0,0,0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 4px); font-size: 0.9rem; color: var(--color-heading); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .filter-drawer-footer { display: flex; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); flex-shrink: 0; padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); } .filter-drawer-clear { flex: 1; padding: 13px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 4px); font-size: 0.9rem; color: var(--color-body-text); cursor: pointer; transition: border-color var(--transition-base), color var(--transition-base); } .filter-drawer-clear:hover { border-color: var(--color-gold); color: var(--color-gold); } .filter-drawer-apply { flex: 2; padding: 13px; background: var(--color-gold); border: none; border-radius: var(--radius-sm, 4px); font-size: 0.9rem; font-weight: var(--font-weight-semi); color: #000; cursor: pointer; transition: opacity var(--transition-base); } .filter-drawer-apply:hover { opacity: 0.9; } /* Prevent body scroll when drawer is open */ body.filter-drawer-open { overflow: hidden; } /* ── Responsive overrides ───────────────────────────────── */ /* Tablet & below: hide desktop filter groups, show mobile trigger */ @media (max-width: 768px) { .filter-bar-groups { display: none; } .filter-mobile-trigger { display: inline-flex; } .filter-bar-right { width: 100%; justify-content: space-between; } .filter-sort-select { flex: 1; } .filter-skeleton { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .products-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .shop-filter-bar { padding: var(--space-sm) var(--space-md); } } /* ============================================================ BRANDS SECTION ============================================================ */ .brands-section { padding: var(--space-2xl) 0; background: var(--color-white); } .brands-section .section-header { justify-content: center; text-align: center; } .brands-section .section-title::after { left: 50%; transform: translateX(-50%); } .brands-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); min-height: 60px; align-items: center; } .brand-item { padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base); cursor: pointer; } .brand-item:hover { border-color: var(--color-gold); box-shadow: var(--shadow-sm); color: var(--color-gold); } .brand-name { font-size: 0.75rem; font-weight: var(--font-weight-semi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-heading); white-space: nowrap; transition: color var(--transition-base); } .brand-item:hover .brand-name { color: var(--color-gold); } /* ============================================================ GENERIC PAGE CONTENT ============================================================ */ .page-content { padding: var(--space-3xl) 0; } /* Base page-header spacing (used by generic page.php and any page without a specific override) */ .page-header { margin-bottom: var(--space-2xl); } .page-header h1, .page-header .page-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--font-weight-semi, 600); letter-spacing: 0.02em; line-height: 1.15; color: var(--color-heading, #262626); margin: 0; } .page-body { max-width: 800px; } .page-body h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-md); } /* Hide the redundant H2 that duplicates the page H1 title in content-managed pages (e.g. Shipping Policy, Terms of Service where WP content starts with a matching h2) */ .page-body > h2:first-child { display: none; } .page-body h3 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); color: var(--color-heading); } .page-body p { margin-bottom: var(--space-md); line-height: 1.8; } .page-body ul, .page-body ol { margin-bottom: var(--space-md); padding-left: var(--space-xl); line-height: 1.8; } .page-body ul { list-style: disc; } .page-body ol { list-style: decimal; } .page-body li { margin-bottom: var(--space-xs); } .page-body a { color: var(--color-gold); text-decoration: none; } .page-body a:hover { text-decoration: underline; } /* ============================================================ CONTACT PAGE ============================================================ */ /* ============================================================ CONTACT PAGE — PREMIUM REDESIGN ============================================================ */ .contact-page { padding: var(--space-3xl) 0 calc(var(--space-3xl) * 1.5); } /* Centered page header */ .contact-page-header { text-align: center; max-width: 560px; margin: 0 auto var(--space-3xl); } .contact-intro { font-size: 1.0625rem; color: var(--color-muted, #6b6b6b); margin-top: var(--space-sm); line-height: 1.7; } /* ── Contact cards row ── */ .contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); margin-bottom: var(--space-3xl); } .contact-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-xl) var(--space-lg); border: 1px solid var(--color-border, #e8e8e8); border-radius: var(--radius-md, 8px); background: var(--color-white, #fff); transition: box-shadow 0.25s ease, border-color 0.25s ease; } .contact-card:hover { border-color: var(--color-gold, #c2a957); box-shadow: 0 8px 32px rgba(194, 169, 87, 0.12); } a.contact-card--link { cursor: pointer; text-decoration: none; color: inherit; } a.contact-card--link:hover .contact-card-value { color: var(--color-gold, #c2a957); } .contact-card-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(194, 169, 87, 0.10); color: var(--color-gold, #c2a957); margin-bottom: var(--space-md); flex-shrink: 0; } .contact-card-label { display: block; font-size: 0.6875rem; font-weight: var(--font-weight-semi, 600); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted, #6b6b6b); margin-bottom: 6px; } .contact-card-value { display: block; font-size: 0.9375rem; color: var(--color-heading, #262626); text-decoration: none; line-height: 1.5; transition: color 0.2s; } .contact-card-value:hover { color: var(--color-gold, #c2a957); } .contact-card-value--sub { font-size: 0.875rem; color: var(--color-muted, #6b6b6b); margin-top: 2px; } /* ── Message form ── */ .contact-form-wrap { max-width: 720px; margin: 0 auto; padding: var(--space-3xl); border: 1px solid var(--color-border, #e8e8e8); border-radius: var(--radius-md, 8px); background: var(--color-white, #fff); } .contact-form-heading { font-size: clamp(1.25rem, 2.5vw, 1.625rem); font-weight: var(--font-weight-regular, 400); letter-spacing: 0.04em; color: var(--color-heading, #262626); margin-bottom: var(--space-xl); text-align: center; } .contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); } .aura-contact-form .form-group { margin-bottom: var(--space-lg); } .aura-contact-form label { display: block; font-size: 0.8125rem; font-weight: var(--font-weight-semi, 600); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-xs); color: var(--color-heading, #262626); } .form-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-muted, #6b6b6b); } .aura-contact-form input[type="text"], .aura-contact-form input[type="email"], .aura-contact-form input[type="tel"], .aura-contact-form textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--color-border, #e8e8e8); border-radius: var(--radius-sm, 4px); font-size: 1rem; font-family: inherit; color: var(--color-heading, #262626); background: #fafafa; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; } .aura-contact-form input:focus, .aura-contact-form textarea:focus { outline: none; border-color: var(--color-gold, #c2a957); background: var(--color-white, #fff); box-shadow: 0 0 0 3px rgba(194, 169, 87, 0.15); } .aura-contact-form textarea { resize: vertical; min-height: 140px; } .contact-form-submit { display: flex; justify-content: center; margin-top: var(--space-lg); } .contact-form-submit .btn--gold { min-width: 220px; padding: 15px 40px; letter-spacing: 0.1em; } /* ── Responsive ── */ @media (max-width: 900px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .contact-cards { grid-template-columns: 1fr 1fr; gap: var(--space-md); } .contact-form-wrap { padding: var(--space-xl) var(--space-lg); } .contact-form-row { grid-template-columns: 1fr; } } @media (max-width: 420px) { .contact-cards { grid-template-columns: 1fr; } } /* ============================================================ LOCATIONS PAGE ============================================================ */ .locations-page { padding: var(--space-3xl) 0; } .locations-page-header { text-align: center; margin-bottom: var(--space-2xl); } .locations-page-header h1 { text-align: center; } .locations-store-count { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--color-gold); margin: var(--space-lg) auto; line-height: 1; } .locations-count-number { font-size: 2.25rem; font-weight: var(--font-weight-semi); color: var(--color-gold); line-height: 1; } .locations-count-label { font-size: 0.625rem; font-weight: var(--font-weight-semi); color: var(--color-gold); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; } .locations-page .page-header { margin-bottom: var(--space-2xl); } .locations-intro { font-size: 1rem; color: var(--color-body-text); margin-top: var(--space-sm); text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; } .locations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); } /* Anchor wrapper — makes the entire card clickable */ .location-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; } .location-card { padding: var(--space-lg); background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; transition: border-color var(--transition-base), box-shadow var(--transition-base); height: 100%; } .location-card-link:hover .location-card, .location-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-sm); } .location-city-label { font-size: 0.75rem; font-weight: var(--font-weight-semi); color: var(--color-gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-xs); } .location-name { font-size: 0.9375rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-xs); } .location-mall { font-size: 0.875rem; color: var(--color-gold); margin-bottom: var(--space-xs); } .location-address { font-size: 0.8125rem; color: var(--color-body-text); margin-bottom: var(--space-sm); flex-grow: 1; } .location-maps-link { display: inline-block; margin-top: auto; font-size: 0.8125rem; font-weight: var(--font-weight-semi); color: var(--color-gold); text-decoration: none; letter-spacing: 0.05em; } .location-maps-link:hover { text-decoration: underline; } .locations-no-results { grid-column: 1 / -1; text-align: center; color: var(--color-body-text); font-size: 0.9375rem; padding: var(--space-2xl) 0; } /* ============================================================ PRINT ============================================================ */ @media print { .site-header, .site-footer, .announcement-bar, .mobile-menu, .search-overlay { display: none !important; } body { padding-top: 0; } } /* === WAVE 1A: LAYOUT FIXES === */ /* Fix 1: Ensure no extra margin/padding causes whitespace above header */ html { margin: 0; } body { margin: 0; } .site-header { margin-top: 0; } /* WP admin bar — no extra body padding needed (header is position:sticky, takes flow space) */ body.logged-in.admin-bar { padding-top: 0; } body.logged-in.admin-bar.no-announcement { padding-top: 0; } /* Fix 2: Constrain header logo to max-height 48px */ .site-logo .custom-logo-link { display: flex; align-items: center; } .site-logo .custom-logo-link img, .site-logo .custom-logo { height: 48px !important; width: auto !important; max-width: 220px !important; object-fit: contain; object-position: left center; } /* Fix 3: Remove white space at bottom of page */ #main-content { margin-bottom: 0; padding-bottom: 0; } .site-footer { margin-top: 0; } /* Fix 4: Footer logo (wp_get_attachment_image direct img) */ .footer-logo-img { filter: brightness(0) invert(1); opacity: 0.85; height: 80px !important; width: auto !important; display: block; margin-bottom: var(--space-md); } /* === WAVE 2A: SINGLE PRODUCT === */ /* Two-column inner layout */ .single-product-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; /* overflow:hidden removed — it breaks position:sticky on child columns */ } .single-product-gallery { position: relative; min-width: 0; align-self: flex-start; } /* Inner clip div: isolates overflow without breaking sticky positioning */ .single-product-gallery__clip { overflow: hidden; width: 100%; } /* Sticky product info panel — stays in viewport as user scrolls gallery. Top offset must clear BOTH the sticky header (72px) and the announcement bar (36px) when the bar is active, otherwise the summary title overlaps the header on scroll. Uses the same CSS vars as .single-product-gallery above (see --header-height / --announcement-height in :root at line 71). Fallback to 124px for browsers that can't resolve the vars. */ .single-product-summary { position: sticky; top: calc(var(--header-height, 72px) + var(--announcement-height, 36px) + var(--space-md, 16px)); max-height: calc(100vh - var(--header-height, 72px) - var(--announcement-height, 36px) - var(--space-md, 16px) - var(--space-lg, 24px)); overflow-y: auto; align-self: flex-start; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .single-product-summary::-webkit-scrollbar { display: none; /* Chrome/Safari */ } @media (max-width: 768px) { .single-product-inner { grid-template-columns: 1fr; } .single-product-gallery { position: static; } /* On mobile summary is not sticky — it flows naturally below gallery */ .single-product-summary { position: static; max-height: none; overflow-y: visible; } } /* WC Product Gallery */ .woocommerce-product-gallery { position: relative; width: 100%; overflow: hidden; } /* FlexSlider viewport — clips the wide wrapper track, provides visual container */ .woocommerce-product-gallery .flex-viewport { overflow: hidden; width: 100%; border-radius: var(--radius-md, 8px); background: var(--color-light-bg, #f8f7f4); margin-bottom: var(--space-md, 1rem); } /* Individual slides — FlexSlider sets their dimensions inline; don't override */ .woocommerce-product-gallery .woocommerce-product-gallery__image { background: var(--color-light-bg, #f8f7f4); } .woocommerce-product-gallery .woocommerce-product-gallery__image img { width: 100%; height: auto; object-fit: contain; /* natural ratio — no crop */ display: block; /* crossfade transition: opacity fades when JS swaps active slide */ transition: opacity 0.25s ease; } .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm, 0.5rem); list-style: none; padding: 0; margin: 0; } .woocommerce-product-gallery .flex-control-thumbs li img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; border-radius: var(--radius-sm, 4px); border: 2px solid transparent; cursor: pointer; transition: border-color var(--transition-fast, 0.15s); } .woocommerce-product-gallery .flex-control-thumbs li img.flex-active, .woocommerce-product-gallery .flex-control-thumbs li img:hover { border-color: var(--color-gold, #c2a957); } /* Gallery swipe cursor hint on mobile */ .woocommerce-product-gallery .flex-viewport { cursor: grab; -webkit-user-select: none; user-select: none; touch-action: pan-y; /* allow vertical scroll but capture horizontal swipe */ } .woocommerce-product-gallery .flex-viewport:active { cursor: grabbing; } /* Crossfade: when .aura-gallery-fading class is set via JS, fade the active image out-in */ .woocommerce-product-gallery .woocommerce-product-gallery__image.aura-fading img { opacity: 0; } .woocommerce-product-gallery .woocommerce-product-gallery__image img { transition: opacity 0.25s ease; } /* Thumbnail strip — ensure 4-per-row grid with touch scroll fallback on mobile */ @media (max-width: 480px) { .woocommerce-product-gallery .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* WC Product Tabs */ .single-product-tabs { margin-top: var(--space-2xl); border-top: 1px solid var(--color-border, #eeeeee); padding-top: var(--space-xl); max-width: 900px; } /* Desktop: horizontal tabs with gold underline */ .woocommerce-tabs .tabs { display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 var(--space-lg); border-bottom: 2px solid var(--color-border, #eeeeee); } .woocommerce-tabs .tabs li { margin: 0; } .woocommerce-tabs .tabs li a { display: block; padding: 12px 24px; color: var(--color-body-text, #6a6353); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .woocommerce-tabs .tabs li.active a, .woocommerce-tabs .tabs li a:hover { color: var(--color-gold, #c9a84c); border-bottom-color: var(--color-gold, #c9a84c); } .woocommerce-tabs .woocommerce-Tabs-panel { padding: var(--space-lg) 0; line-height: 1.8; color: var(--color-body-text, #6a6353); animation: auraTabFadeIn 0.3s ease; } .woocommerce-tabs .woocommerce-Tabs-panel h2 { display: none; /* tab title already shows in the tab bar */ } @keyframes auraTabFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Mobile: convert tabs to accordion */ @media (max-width: 767px) { .woocommerce-tabs .tabs { display: none; } .woocommerce-tabs .woocommerce-Tabs-panel { display: none; padding: 16px 0; } .woocommerce-tabs .woocommerce-Tabs-panel.is-accordion-open { display: block; animation: auraTabFadeIn 0.25s ease; } .aura-tab-accordion-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; background: none; border: none; border-bottom: 1px solid var(--color-border, #eeeeee); color: var(--color-heading, #262626); font-family: var(--font-primary); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: color 0.2s ease; } .aura-tab-accordion-toggle:hover { color: var(--color-gold, #c9a84c); } .aura-tab-accordion-toggle.is-active { color: var(--color-gold, #c9a84c); } .aura-tab-accordion-toggle svg { transition: transform 0.25s ease; flex-shrink: 0; } .aura-tab-accordion-toggle.is-active svg { transform: rotate(180deg); } } @media (min-width: 768px) { .aura-tab-accordion-toggle { display: none; } } /* Trust Badges */ .trust-badges { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border, #eeeeee); } .trust-badge { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-body-text, #6a6353); font-size: 0.8125rem; } .trust-badge svg { color: var(--color-gold, #c2a957); flex-shrink: 0; } /* === WAVE 2B: FAQ + STATIC PAGES === */ /* FAQ Accordion */ .faq-page .page-header { margin-bottom: var(--space-xl); } /* Subheading "Frequently Asked Questions" — smaller, muted, acts as a section label not a title */ .faq-body > h2:first-child { display: block; /* override the generic page-body > h2:first-child rule */ font-size: 1rem; font-weight: var(--font-weight-semi, 600); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted, #6b6b6b); margin-top: 0; margin-bottom: var(--space-xl); } .faq-question { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border, #eeeeee); color: var(--color-heading, #262626); font-size: 1rem; font-weight: 600; user-select: none; transition: color var(--transition-fast, 0.15s); } .faq-question:hover, .faq-question.is-open { color: var(--color-gold, #c2a957); } .faq-toggle-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; } .faq-toggle-btn::after { content: ''; display: inline-block; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--transition-fast, 0.15s); flex-shrink: 0; margin-left: var(--space-md); } .faq-question.is-open .faq-toggle-btn::after { transform: rotate(-135deg); } .faq-answer { padding: var(--space-md) 0 var(--space-lg); color: var(--color-body-text, #6a6353); line-height: 1.8; border-bottom: 1px solid var(--color-border, #eeeeee); } .faq-answer[hidden] { display: none; } .faq-body h3 { margin: 0; } /* Track Order Page */ /* Show and style the page title on track-order page */ body:has(.woocommerce-form-track-order) .page-header { display: block; text-align: center; margin-bottom: var(--space-lg); } body:has(.woocommerce-form-track-order) .page-header h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--font-weight-semi); color: var(--color-heading); letter-spacing: 0.02em; } /* Subtle gold accent line above page title */ body:has(.woocommerce-form-track-order) .page-header::before { content: ''; display: block; width: 48px; height: 2px; background-color: var(--color-gold); margin: 0 auto var(--space-md); border-radius: var(--radius-full); } /* Helper text below title */ body:has(.woocommerce-form-track-order) .page-header::after { content: 'Enter your order number and email to check your order status.'; display: block; text-align: center; font-size: 0.9375rem; color: var(--color-body-text); margin-top: var(--space-sm); line-height: 1.6; } /* Light gradient background wrapper */ body:has(.woocommerce-form-track-order) { background: linear-gradient(160deg, #fdfcf9 0%, #f7f4ef 100%); } /* Center the track-order section with card styling */ body:has(.woocommerce-form-track-order) .page-body { max-width: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; padding: var(--space-2xl) 0; } body:has(.woocommerce-form-track-order) .page-body > p:first-child { text-align: center; max-width: 560px; margin-bottom: var(--space-lg); color: var(--color-text, #5a5a5a); font-size: 0.95rem; line-height: 1.6; } .woocommerce-form-track-order { max-width: 560px; width: 100%; margin: 0 auto; border: 1px solid var(--color-border, #eeeeee); border-radius: var(--radius-md, 8px); padding: 32px 40px; background: #fff; } .woocommerce-form-track-order p { margin-bottom: var(--space-md); } .woocommerce-form-track-order .form-row { margin-bottom: var(--space-md); } .woocommerce-form-track-order label { display: block; margin-bottom: var(--space-xs); font-weight: 600; font-size: 0.875rem; color: var(--color-heading, #262626); } .woocommerce-form-track-order input[type="text"], .woocommerce-form-track-order input[type="email"] { width: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border, #eeeeee); border-radius: var(--radius-sm, 4px); font-family: inherit; font-size: 1rem; color: var(--color-heading, #262626); transition: border-color var(--transition-fast, 0.15s); } .woocommerce-form-track-order input:focus { outline: none; border-color: var(--color-gold, #c2a957); } .woocommerce-form-track-order button[type="submit"], .woocommerce-form-track-order .button { display: inline-block; margin-top: var(--space-md); padding: var(--space-sm) var(--space-xl); background: var(--color-gold, #c2a957); color: #fff; font-family: inherit; font-size: 0.875rem; font-weight: var(--font-weight-semi, 600); letter-spacing: 0.1em; text-transform: uppercase; border: none; border-radius: var(--radius-sm, 4px); cursor: pointer; transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s); } .woocommerce-form-track-order button[type="submit"]:hover, .woocommerce-form-track-order .button:hover { background: var(--color-heading, #262626); color: #fff; } /* === WAVE 2C: CONTACT + LOCATIONS === */ /* Locations search bar */ .locations-filter-bar { margin-bottom: var(--space-xl); } .locations-search-input { width: 100%; max-width: 100%; padding: 14px var(--space-md); border: 1px solid var(--color-border, #eeeeee); border-radius: var(--radius-sm, 4px); font-family: inherit; font-size: 1rem; color: var(--color-heading, #262626); transition: border-color var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s); box-sizing: border-box; } .locations-search-input:focus { outline: 2px solid transparent; border-color: var(--color-gold, #c2a957); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15); } /* Contact page icon items — legacy (kept for safety, superseded by .contact-card above) */ /* === WAVE 3A: BRANDS PAGE === */ .brands-page .page-header { text-align: center; margin-bottom: var(--space-2xl); } .brands-page .page-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--font-weight-regular, 400); color: var(--color-heading, #262626); letter-spacing: 0.04em; margin-bottom: 0; } .brands-page .page-subtitle { color: var(--color-body-text, #6a6353); margin-top: var(--space-sm); font-size: 1rem; } .brands-page-grid { display: grid; /* auto-fit collapses empty tracks — so 1 card centers, 4+ fills the full row */ grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); justify-content: center; gap: var(--space-xl); margin-bottom: var(--space-3xl, 5rem); } @media (max-width: 480px) { .brands-page-grid { grid-template-columns: 1fr; } } .brand-page-card { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--color-heading, #262626); border: 1px solid var(--color-border, #eeeeee); border-radius: var(--radius-md, 8px); padding: var(--space-xl); transition: box-shadow var(--transition-base, 0.25s ease), border-color var(--transition-base, 0.25s ease), transform var(--transition-base, 0.25s ease); will-change: transform; } .brand-page-card:hover { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.1)); border-color: rgba(201, 168, 76, 0.4); transform: translateY(-3px); } .brand-page-card__logo { width: 120px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); } .brand-page-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .brand-page-card__placeholder { width: 80px; height: 80px; border-radius: 50%; background: var(--color-light-bg, #f8f7f4); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); } .brand-page-card__initial { font-size: 2rem; font-weight: 600; color: var(--color-gold, #c9a84c); line-height: 1; } .brand-page-card__info { width: 100%; min-width: 0; } .brand-page-card__name { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-heading, #262626); margin: 0 0 var(--space-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-page-card__count { font-size: 0.8125rem; color: var(--color-body-text, #6a6353); } .brands-page-empty { text-align: center; color: var(--color-body-text, #6a6353); padding: var(--space-2xl) 0; font-size: 1rem; } /* ============================================================ SECTION 6: SINGLE PRODUCT PAGE — COMPREHENSIVE FIXES ============================================================ */ /* --- Product title (WC outputs h1.product_title.entry-title) --- */ .single-product-summary h1.product_title, .single-product-summary .entry-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: var(--font-weight-semi, 600); color: var(--color-heading, #262626); margin-bottom: var(--space-md, 1rem); line-height: 1.2; } /* --- Price (single product) --- */ .single-product-summary .price { font-size: 1.5rem; font-weight: var(--font-weight-semi, 600); color: var(--color-heading, #262626); margin-bottom: var(--space-lg, 1.5rem); display: block; } .single-product-summary .price del { color: var(--color-body-text, #6a6353); opacity: 0.6; font-size: 1rem; font-weight: var(--font-weight-regular, 400); margin-right: var(--space-sm, 0.5rem); } .single-product-summary .price ins { text-decoration: none; color: var(--color-gold, #c2a957); } /* --- Short description --- */ .woocommerce-product-details__short-description { font-size: 0.9375rem; line-height: 1.8; color: var(--color-body-text, #6a6353); margin-bottom: var(--space-lg, 1.5rem); padding-bottom: var(--space-lg, 1.5rem); border-bottom: 1px solid var(--color-border, #eeeeee); } /* --- ATC form: quantity + button row --- */ .single-product-summary form.cart { display: flex; align-items: center; gap: var(--space-sm, 0.5rem); margin-bottom: var(--space-md, 1rem); flex-wrap: wrap; } /* Quantity wrapper */ .single-product-summary .quantity { display: flex; align-items: center; border: 1px solid var(--color-border, #eeeeee); border-radius: var(--radius-sm, 4px); overflow: hidden; height: 48px; } /* Quantity input */ .single-product-summary .quantity .qty { width: 60px; height: 48px; text-align: center; font-size: 0.9375rem; font-weight: var(--font-weight-semi, 600); font-family: inherit; color: var(--color-heading, #262626); border: none; background: transparent; -moz-appearance: textfield; padding: 0; } .single-product-summary .quantity .qty::-webkit-inner-spin-button, .single-product-summary .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .single-product-summary .quantity .qty:focus { outline: none; } /* Add to Cart button (WC class) */ .single-product-summary .single_add_to_cart_button { flex: 1; min-width: 160px; height: 48px; padding: 0 var(--space-xl, 2rem); background-color: var(--color-gold, #c2a957); color: var(--color-white, #ffffff); border: 2px solid var(--color-gold, #c2a957); border-radius: var(--radius-sm, 4px); font-family: inherit; font-size: 0.875rem; font-weight: var(--font-weight-semi, 600); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s); } .single-product-summary .single_add_to_cart_button:hover, .single-product-summary .single_add_to_cart_button:focus { background-color: transparent; color: var(--color-gold, #c2a957); outline: none; } .single-product-summary .single_add_to_cart_button.loading { opacity: 0.7; cursor: wait; } .single-product-summary .single_add_to_cart_button.added { background-color: var(--color-gold, #c9a84c); border-color: var(--color-gold, #c9a84c); color: var(--color-white, #ffffff); } /* --- Product meta (category, tags, SKU) --- */ .product_meta { font-size: 0.8125rem; color: var(--color-body-text, #6a6353); margin-top: var(--space-md, 1rem); display: flex; flex-wrap: wrap; gap: var(--space-xs, 0.25rem) var(--space-md, 1rem); } .product_meta .posted_in, .product_meta .tagged_as, .product_meta .sku_wrapper { display: block; } .product_meta a { color: var(--color-gold, #c2a957); text-decoration: none; } .product_meta a:hover { text-decoration: underline; } /* --- Gallery: force visibility regardless of JS init state --- */ .woocommerce-product-gallery { opacity: 1 !important; } /* FlexSlider turns wrapper into a wide horizontal track — clip it */ .woocommerce-product-gallery .flex-viewport { overflow: hidden !important; width: 100% !important; } /* Each slide in the track is full width */ .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image { width: 100%; float: none; } /* --- Variations (variable products) --- */ .variations_form .variations { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg, 1.5rem); } .variations_form .variations td, .variations_form .variations th { padding: var(--space-xs, 0.25rem) 0 var(--space-sm, 0.5rem); vertical-align: middle; text-align: left; } .variations_form .variations .label label { font-size: 0.8125rem; font-weight: var(--font-weight-semi, 600); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-heading, #262626); white-space: nowrap; padding-right: var(--space-md, 1rem); } .variations_form .variations .value select { width: 100%; padding: var(--space-sm, 0.5rem) var(--space-md, 1rem); border: 1px solid var(--color-border, #eeeeee); border-radius: var(--radius-sm, 4px); font-family: inherit; font-size: 0.9375rem; color: var(--color-heading, #262626); background: var(--color-white, #ffffff); cursor: pointer; appearance: auto; transition: border-color var(--transition-fast, 0.15s); } .variations_form .variations .value select:focus { outline: none; border-color: var(--color-gold, #c2a957); } .reset_variations { display: inline-block; font-size: 0.8125rem; color: var(--color-gold, #c2a957); text-decoration: none; margin-top: var(--space-xs, 0.25rem); } .reset_variations:hover { text-decoration: underline; } /* --- Related products section --- */ .single-product-related { margin-top: var(--space-3xl, 5rem); padding-top: var(--space-xl, 2rem); border-top: 1px solid var(--color-border, #eeeeee); overflow: hidden; /* prevent child grid from causing horizontal overflow */ } /* section.related.products inherits .products grid — override to block */ section.related.products { display: block; } /* The actual product grid is the ul inside */ section.related.products ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg, 1.5rem); list-style: none; padding: 0; margin: 0; } @media (max-width: 1024px) { section.related.products ul.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { section.related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-md, 1rem); } section.related.products ul.products .product-card { min-width: 0; flex: none; } } .related-products-title, .related.products > h2, .related.products > .related-products-title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: var(--font-weight-semi, 600); color: var(--color-heading, #262626); margin-bottom: var(--space-xl, 2rem); text-align: left; display: block; width: 100%; } /* --- Product tabs: Description heading (hidden, shown in tab bar) --- */ /* --- Woo notices on product page --- */ .woocommerce-notices-wrapper { margin-bottom: var(--space-md, 1rem); } /* ============================================================ WOOCOMMERCE BLOCKS — Cart, Checkout, My Account (WooCommerce block editor uses different classes than the classic shortcode. These rules target the block versions.) ============================================================ */ /* ---------------------------------------------------------- WC Blocks: Generic button base (overrides block defaults) ---------------------------------------------------------- */ .wc-block-components-button.wp-element-button, .wc-block-components-button.wp-element-button:not(:disabled) { background-color: var(--color-gold); color: var(--color-white); border: none; border-radius: var(--radius-sm); font-family: var(--font-primary); font-weight: var(--font-weight-semi); font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color var(--transition-fast); } .wc-block-components-button.wp-element-button:hover, .wc-block-components-button.wp-element-button:focus { background-color: var(--color-gold-dark); color: var(--color-white); } /* ---------------------------------------------------------- WC Blocks: Cart — "Proceed to Checkout" button High specificity needed to override WC block theme compat CSS ---------------------------------------------------------- */ .wc-block-cart__submit-container .wc-block-cart__submit-button, .wc-block-cart__submit-container .wc-block-cart__submit-button.contained, a.wc-block-cart__submit-button.wp-element-button { display: block; width: 100%; min-height: 52px; padding: 14px 16px; text-align: center; margin-top: var(--space-lg); background-color: var(--color-gold) !important; color: var(--color-white) !important; border: none; border-radius: 8px; font-family: var(--font-primary); font-weight: var(--font-weight-semi); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background-color var(--transition-fast); } .wc-block-cart__submit-container .wc-block-cart__submit-button:hover, a.wc-block-cart__submit-button.wp-element-button:hover { background-color: var(--color-gold-dark) !important; color: var(--color-white) !important; } /* ---------------------------------------------------------- WC Blocks: Cart — Empty state ---------------------------------------------------------- */ .wc-block-cart--is-empty .wc-block-cart__empty-cart__title { font-size: 1.25rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-md); } .wc-block-cart--is-empty .wc-block-cart__empty-cart__image { margin-bottom: var(--space-lg); } /* Return to shop button inside empty cart */ .wc-block-cart--is-empty .wc-block-components-button { display: inline-block; padding: 12px 28px; margin-top: var(--space-md); } /* ---------------------------------------------------------- WC Blocks: Checkout — form inputs and selects ---------------------------------------------------------- */ .wc-block-checkout__form input[type="text"], .wc-block-checkout__form input[type="email"], .wc-block-checkout__form input[type="tel"], .wc-block-checkout__form input[type="password"], .wc-block-checkout__form textarea { width: 100%; padding: 14px 16px; border: 1.5px solid #d4cfc7; border-radius: 8px; background-color: var(--color-white); color: var(--color-heading); font-family: var(--font-primary); font-size: 0.9375rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; } .wc-block-checkout__form input[type="text"]:focus, .wc-block-checkout__form input[type="email"]:focus, .wc-block-checkout__form input[type="tel"]:focus, .wc-block-checkout__form input[type="password"]:focus, .wc-block-checkout__form textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18); } .wc-blocks-components-select__select { width: 100%; padding: 14px 40px 14px 16px; border: 1.5px solid #d4cfc7; border-radius: 8px; background-color: var(--color-white); color: var(--color-heading); font-family: var(--font-primary); font-size: 0.9375rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; } .wc-blocks-components-select__select:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18); } /* Checkout labels */ .wc-block-checkout__form label, .wc-block-components-text-input label, .wc-blocks-components-select label { display: block; margin-bottom: var(--space-xs); font-weight: var(--font-weight-semi); font-size: 0.875rem; color: var(--color-heading); letter-spacing: 0.04em; } /* Section headings inside checkout blocks */ .wc-block-checkout__contact-fields .wc-block-components-checkout-step__title, .wc-block-checkout__billing-fields .wc-block-components-checkout-step__title, .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title, .wc-block-checkout__payment-method .wc-block-components-checkout-step__title, .wc-block-components-checkout-step__title { font-size: 1.0625rem; font-weight: var(--font-weight-semi); color: var(--color-heading); letter-spacing: 0.04em; padding-bottom: 10px; border-bottom: 2px solid var(--color-gold); margin-bottom: var(--space-xl); } /* ---------------------------------------------------------- WC Blocks: Checkout — Place Order button High specificity to override WC block theme compat CSS ---------------------------------------------------------- */ .wc-block-components-checkout-place-order-button, .wc-block-components-checkout-place-order-button.contained, button.wc-block-components-checkout-place-order-button.wp-element-button { display: block; width: 100%; min-height: 52px; padding: 14px 16px; text-align: center; margin-top: var(--space-lg); background-color: var(--color-gold) !important; color: var(--color-white) !important; border: none; border-radius: 8px; font-family: var(--font-primary); font-weight: var(--font-weight-semi); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color var(--transition-fast); } .wc-block-components-checkout-place-order-button:hover, button.wc-block-components-checkout-place-order-button.wp-element-button:hover { background-color: var(--color-gold-dark) !important; color: var(--color-white) !important; } /* ---------------------------------------------------------- WC Blocks: Checkout — Return to Cart link ---------------------------------------------------------- */ .wc-block-components-checkout-return-to-cart-button { display: inline-flex; align-items: center; gap: 6px; color: var(--color-body-text); font-size: 0.875rem; text-decoration: none; transition: color var(--transition-fast); } .wc-block-components-checkout-return-to-cart-button:hover { color: var(--color-gold); } .wc-block-components-checkout-return-to-cart-button svg { fill: currentColor; } /* ---------------------------------------------------------- WC Blocks: Checkout actions row layout ---------------------------------------------------------- */ .wc-block-checkout__actions_row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); } /* ============================================================ CART & CHECKOUT & MY ACCOUNT — RING DESIGN / OPEN LAYOUT Airy, outlined ring cards, generous whitespace, premium feel. Inspired by Apple, Aesop, Byredo checkout experiences. ============================================================ */ /* ---------------------------------------------------------- Page background: warm off-white so white cards float ---------------------------------------------------------- */ .woocommerce-cart, .woocommerce-checkout, .woocommerce-account { background-color: #faf8f5 !important; } .woocommerce-cart .page-body, .woocommerce-checkout .page-body, .woocommerce-account .page-body { background-color: #faf8f5 !important; } /* Also cover the site body on these pages */ body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account { background-color: #faf8f5 !important; } /* ---------------------------------------------------------- Cart/checkout page container — match site max-width (1280px) ---------------------------------------------------------- */ .woocommerce-cart .page-content .container, .woocommerce-checkout .page-content .container, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { max-width: var(--container-max) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--container-pad) !important; padding-right: var(--container-pad) !important; } /* Override .page-body max-width on cart/checkout pages */ .woocommerce-cart .page-body, .woocommerce-checkout .page-body { max-width: var(--container-max) !important; width: 100% !important; } /* Also widen any direct inner wrapper that WC Blocks generates */ .wc-block-cart, .wc-block-checkout { max-width: var(--container-max); margin: 0 auto; } /* Extra vertical breathing room on the page */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { padding-top: 48px !important; padding-bottom: 80px !important; } /* ---------------------------------------------------------- WC Blocks: Cart — items table area (no box, just rows) ---------------------------------------------------------- */ .wc-block-cart-items { border: none !important; background: transparent !important; } .wc-block-cart-items__row { padding: 28px 0 !important; border-bottom: 1px solid #ede8e0 !important; border-top: none !important; gap: 24px !important; background: transparent !important; } .wc-block-cart-items__row:first-child { border-top: 1px solid #ede8e0 !important; } /* Cart item image — rounded corners */ .wc-block-cart-items .wc-block-cart-item__image { width: 96px !important; flex-shrink: 0 !important; } .wc-block-cart-items .wc-block-cart-item__image img, .wc-block-cart-item__image img { border-radius: 10px !important; object-fit: cover !important; } /* Cart item name / product title */ .wc-block-cart-item__product-name, .wc-block-cart-item__product-name a { font-size: 0.9375rem !important; font-weight: var(--font-weight-semi) !important; color: var(--color-heading) !important; letter-spacing: 0.01em !important; } /* Cart item price */ .wc-block-cart-item__total .wc-block-formatted-money-amount, .wc-block-cart-item__prices .wc-block-formatted-money-amount { font-weight: var(--font-weight-semi) !important; color: var(--color-heading) !important; } /* Return to shop link — gold text, no border button */ .wc-block-cart__return-to-shop, .wc-block-cart__return-to-shop .wc-block-components-button, .wc-block-cart__return-to-shop a { background: none !important; border: none !important; box-shadow: none !important; color: var(--color-gold) !important; font-size: 0.875rem !important; font-weight: var(--font-weight-semi) !important; letter-spacing: 0.04em !important; text-decoration: none !important; padding: 0 !important; cursor: pointer !important; transition: color var(--transition-fast) !important; } .wc-block-cart__return-to-shop:hover, .wc-block-cart__return-to-shop a:hover { color: var(--color-gold-dark) !important; } /* ---------------------------------------------------------- WC Blocks: Cart totals sidebar — premium ring card ---------------------------------------------------------- */ .wc-block-cart__totals-title { font-size: 0.75rem !important; font-weight: var(--font-weight-semi) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--color-gold) !important; font-variant: small-caps !important; padding-bottom: 12px !important; border-bottom: 1px solid #ede8e0 !important; margin-bottom: 24px !important; } /* The cart order summary outer panel — ring card */ .wc-block-cart__sidebar { background-color: #ffffff !important; border: 1px solid #ede8e0 !important; border-radius: 12px !important; box-shadow: none !important; padding: 32px 36px !important; } /* Inner totals wrappers — no border, no extra padding (inherit parent card) */ .wc-block-cart__sidebar .wc-block-components-totals-wrapper, .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Row items inside cart totals */ .wc-block-components-totals-item { padding: 14px 0 !important; border-bottom: 1px solid #f0ece6 !important; font-size: 0.9375rem !important; } .wc-block-components-totals-item:last-child { border-bottom: none !important; } /* Total row emphasis */ .wc-block-components-totals-item.wc-block-components-totals-footer-item { font-size: 1.0625rem !important; font-weight: var(--font-weight-semi) !important; padding-top: 20px !important; border-top: 1px solid #ede8e0 !important; border-bottom: none !important; } /* Coupon expander row */ .wc-block-components-totals-coupon { padding: 14px 0 !important; border-bottom: 1px solid #f0ece6 !important; } /* ---------------------------------------------------------- WC Blocks: Cart — "Proceed to Checkout" button (override) ---------------------------------------------------------- */ .wc-block-cart__submit-container .wc-block-cart__submit-button, .wc-block-cart__submit-container .wc-block-cart__submit-button.contained, a.wc-block-cart__submit-button.wp-element-button { display: block !important; width: 100% !important; min-height: 42px !important; padding: 11px 12px !important; text-align: center !important; margin-top: 24px !important; background-color: var(--color-gold) !important; color: var(--color-white) !important; border: none !important; border-radius: 8px !important; font-family: var(--font-primary) !important; font-weight: var(--font-weight-semi) !important; font-size: 0.875rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; transition: background-color var(--transition-fast) !important; } .wc-block-cart__submit-container .wc-block-cart__submit-button:hover, a.wc-block-cart__submit-button.wp-element-button:hover { background-color: var(--color-gold-dark) !important; color: var(--color-white) !important; } /* ---------------------------------------------------------- WC Blocks: Cart — Empty state ---------------------------------------------------------- */ .wc-block-cart--is-empty .wc-block-cart__empty-cart__title { font-size: 1.25rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-md); } .wc-block-cart--is-empty .wc-block-cart__empty-cart__image { margin-bottom: var(--space-lg); } .wc-block-cart--is-empty .wc-block-components-button { display: inline-block; padding: 12px 28px; margin-top: var(--space-md); } /* ---------------------------------------------------------- WC Blocks: Checkout sidebar (Order Summary) — ring card ---------------------------------------------------------- */ .wc-block-checkout__sidebar { background-color: #ffffff !important; border: 1px solid #ede8e0 !important; border-radius: 12px !important; box-shadow: none !important; padding: 32px 36px !important; } /* Inner totals wrappers inside checkout sidebar — no extra border/padding */ .wc-block-checkout__sidebar .wc-block-components-totals-wrapper, .wc-block-checkout__sidebar .wc-block-checkout__sidebar-totals { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Order summary heading — gold small-caps */ .wc-block-checkout__sidebar .wc-block-checkout__sidebar-totals h2, .wc-block-checkout__sidebar h2 { font-size: 0.75rem !important; font-weight: var(--font-weight-semi) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--color-gold) !important; font-variant: small-caps !important; padding-bottom: 12px !important; border-bottom: 1px solid #ede8e0 !important; margin-bottom: 24px !important; } /* ---------------------------------------------------------- WC Blocks: Checkout layout — two columns ---------------------------------------------------------- */ .wc-block-checkout__main { flex: 1 1 0 !important; min-width: 0 !important; } .wc-block-checkout__sidebar { width: 360px !important; min-width: 320px !important; flex-shrink: 0 !important; position: sticky !important; top: 120px !important; } /* The overall checkout layout wrapper */ .wp-block-woocommerce-checkout .wc-block-checkout { display: flex !important; flex-direction: row !important; gap: 48px !important; align-items: flex-start !important; } /* ---------------------------------------------------------- WC Blocks: Checkout form sections — premium ring card ---------------------------------------------------------- */ .wc-block-components-checkout-step { background: #ffffff !important; border: 1px solid #ede8e0 !important; border-radius: 12px !important; box-shadow: none !important; padding: 32px 40px !important; margin-bottom: 24px !important; } /* Section step heading — gold small-caps + separator line */ .wc-block-checkout__contact-fields .wc-block-components-checkout-step__title, .wc-block-checkout__billing-fields .wc-block-components-checkout-step__title, .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title, .wc-block-checkout__payment-method .wc-block-components-checkout-step__title, .wc-block-components-checkout-step__title { font-size: 0.75rem !important; font-weight: var(--font-weight-semi) !important; color: var(--color-gold) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-variant: small-caps !important; padding-bottom: 14px !important; border-bottom: 1px solid #ede8e0 !important; margin-bottom: 28px !important; } /* Step number badges — hide or style subtly */ .wc-block-components-checkout-step__title .wc-block-components-checkout-step__title-icon { display: none !important; } /* ---------------------------------------------------------- WC Blocks: Checkout form field group spacing ---------------------------------------------------------- */ .wc-block-components-address-form, .wc-block-checkout__contact-fields__inner { row-gap: 20px !important; column-gap: 16px !important; } .wc-block-components-text-input, .wc-blocks-components-select { margin-bottom: 0 !important; } /* ---------------------------------------------------------- WC Blocks: Checkout form inputs — rounded, refined ---------------------------------------------------------- */ .wc-block-checkout__form input[type="text"], .wc-block-checkout__form input[type="email"], .wc-block-checkout__form input[type="tel"], .wc-block-checkout__form input[type="password"], .wc-block-checkout__form textarea { width: 100%; padding: 14px 16px; border: 1px solid #d4cfc8; border-radius: 8px; background-color: var(--color-white); color: var(--color-heading); font-family: var(--font-primary); font-size: 0.9375rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; } .wc-block-checkout__form input[type="text"]:focus, .wc-block-checkout__form input[type="email"]:focus, .wc-block-checkout__form input[type="tel"]:focus, .wc-block-checkout__form input[type="password"]:focus, .wc-block-checkout__form textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2); } /* Select dropdowns */ .wc-blocks-components-select__select { width: 100%; padding: 14px 40px 14px 16px; border: 1px solid #d4cfc8; border-radius: 8px; background-color: var(--color-white); color: var(--color-heading); font-family: var(--font-primary); font-size: 0.9375rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; } .wc-blocks-components-select__select:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2); } /* Checkout labels */ .wc-block-checkout__form label, .wc-block-components-text-input label, .wc-blocks-components-select label { display: block; margin-bottom: var(--space-xs); font-weight: var(--font-weight-semi); font-size: 0.8125rem; color: var(--color-heading); letter-spacing: 0.06em; text-transform: uppercase; } /* ---------------------------------------------------------- WC Blocks: Generic text inputs — catch all WC input components outside of .wc-block-checkout__form ---------------------------------------------------------- */ .wc-block-components-text-input input, .wc-block-components-text-input input[type="text"], .wc-block-components-text-input input[type="email"], .wc-block-components-text-input input[type="tel"] { padding: 14px 16px !important; border: 1px solid #d4cfc8 !important; border-radius: 8px !important; background-color: #ffffff !important; } .wc-block-components-text-input input:focus, .wc-block-components-text-input input[type="text"]:focus, .wc-block-components-text-input input[type="email"]:focus, .wc-block-components-text-input input[type="tel"]:focus { border-color: var(--color-gold) !important; box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2) !important; outline: none !important; } /* ---------------------------------------------------------- WC Blocks: Checkout — Place Order button ---------------------------------------------------------- */ .wc-block-components-checkout-place-order-button, .wc-block-components-checkout-place-order-button.contained, button.wc-block-components-checkout-place-order-button.wp-element-button { display: block !important; width: 100% !important; min-height: 56px !important; padding: 16px 32px !important; text-align: center !important; margin-top: 24px !important; background-color: var(--color-gold) !important; color: var(--color-white) !important; border: none !important; border-radius: 10px !important; font-family: var(--font-primary) !important; font-weight: var(--font-weight-semi) !important; font-size: 1rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background-color var(--transition-fast) !important; } .wc-block-components-checkout-place-order-button:hover, button.wc-block-components-checkout-place-order-button.wp-element-button:hover { background-color: var(--color-gold-dark) !important; color: var(--color-white) !important; } /* ---------------------------------------------------------- WC Blocks: Checkout — Return to Cart link (gold text) ---------------------------------------------------------- */ .wc-block-components-checkout-return-to-cart-button { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gold); font-size: 0.875rem; font-weight: var(--font-weight-semi); text-decoration: none; transition: color var(--transition-fast); background: none !important; border: none !important; padding: 0 !important; } .wc-block-components-checkout-return-to-cart-button:hover { color: var(--color-gold-dark); } .wc-block-components-checkout-return-to-cart-button svg { fill: currentColor; } /* ---------------------------------------------------------- WC Blocks: Checkout actions row layout ---------------------------------------------------------- */ .wc-block-checkout__actions_row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); padding-top: var(--space-md); } /* ---------------------------------------------------------- WC Classic: My Account — Login card ring design Centered card, max-width 480px, generous padding ---------------------------------------------------------- */ /* Center the entire account woocommerce wrapper */ .woocommerce-account .page-body { display: flex !important; justify-content: center !important; align-items: flex-start !important; max-width: 100% !important; width: 100% !important; } .woocommerce-account .woocommerce { max-width: 540px !important; width: 100% !important; margin: 0 !important; } /* The Login h2 that sits above the card — hidden (replaced by tabs) */ .woocommerce-account .woocommerce > h2 { display: none !important; } /* ---------------------------------------------------------- Aura Account Card — tabbed Sign In / Create Account ---------------------------------------------------------- */ /* Outer card wrapper — same ring style as the old form-login */ .aura-account-card { background: #ffffff; border: 1px solid #ede8e0; border-radius: 12px; padding: 0; max-width: 540px; width: 100%; margin: 0; overflow: hidden; } /* Tab strip */ .aura-account-tabs { display: flex; border-bottom: 1px solid #ede8e0; } .aura-account-tab { flex: 1; padding: 18px 20px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-primary); font-size: 0.8125rem; font-weight: var(--font-weight-semi); letter-spacing: 0.1em; text-transform: uppercase; color: #a09890; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .aura-account-tab--active { color: var(--color-gold); border-bottom-color: var(--color-gold); } .aura-account-tab:hover:not(.aura-account-tab--active) { color: var(--color-heading); } /* Panels */ .aura-account-panel { padding: 36px 44px 40px; } .aura-account-panel[hidden] { display: none; } /* Register password note */ .aura-reg-password-note { font-size: 0.875rem; color: var(--color-body-text); margin-bottom: var(--space-md); } /* Register submit button — same as login */ .woocommerce-form-register__submit, .woocommerce-form-register .button[type="submit"] { display: block; width: 100%; padding: 14px 28px; margin-top: var(--space-lg); background-color: var(--color-gold); color: var(--color-white); font-family: var(--font-primary); font-weight: var(--font-weight-semi); font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 10px; border: none; cursor: pointer; transition: background-color var(--transition-fast); text-align: center; } .woocommerce-form-register__submit:hover, .woocommerce-form-register .button[type="submit"]:hover { background-color: var(--color-gold-dark); color: var(--color-white); } /* Password-input wrapper inside register panel */ .aura-account-panel .password-input { position: relative; display: block; } .aura-account-panel .show-password-input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0; color: var(--color-body-text); font-size: 0.8rem; } /* Keep the old .woocommerce-form-login padding rule consistent — now the form sits inside .aura-account-panel instead */ .woocommerce-form-login { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; max-width: 100% !important; } /* ---------------------------------------------------------- WC Classic: My Account — Input fields (same as checkout) ---------------------------------------------------------- */ .woocommerce-Input--text, .woocommerce input.input-text, .woocommerce-page input.input-text { width: 100%; padding: 13px 16px; border: 1px solid #d4cfc8; border-radius: 8px; background-color: var(--color-white); color: var(--color-heading); font-family: var(--font-primary); font-size: 0.9375rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; display: block; } .woocommerce-Input--text:focus, .woocommerce input.input-text:focus, .woocommerce-page input.input-text:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2); } /* ---------------------------------------------------------- WC Classic: My Account — Login form row spacing ---------------------------------------------------------- */ .woocommerce-form-row { margin-bottom: 20px; } .woocommerce-form-row label { display: block; margin-bottom: var(--space-xs); font-weight: var(--font-weight-semi); font-size: 0.8125rem; color: var(--color-heading); letter-spacing: 0.06em; text-transform: uppercase; } /* Row with "Remember me" checkbox and "Log in" button */ .woocommerce-form-login .form-row:not(.woocommerce-form-row) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); } .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.875rem; color: var(--color-body-text); cursor: pointer; } /* ---------------------------------------------------------- WC Classic: My Account — Log In button ---------------------------------------------------------- */ .woocommerce-button.button.woocommerce-form-login__submit, .woocommerce-form-login .button[type="submit"] { display: block; width: 100%; padding: 14px 28px; margin-top: var(--space-lg); background-color: var(--color-gold); color: var(--color-white); font-family: var(--font-primary); font-weight: var(--font-weight-semi); font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 10px; border: none; cursor: pointer; transition: background-color var(--transition-fast); text-align: center; } .woocommerce-button.button.woocommerce-form-login__submit:hover, .woocommerce-form-login .button[type="submit"]:hover { background-color: var(--color-gold-dark); color: var(--color-white); } /* ---------------------------------------------------------- WC Classic: Notices — consistent styling ---------------------------------------------------------- */ .woocommerce-error, .woocommerce-info, .woocommerce-message { background-color: var(--color-light-bg); color: var(--color-heading); border-radius: var(--radius-sm); list-style: none; } .woocommerce-error a, .woocommerce-info a, .woocommerce-message a { color: var(--color-gold); } /* "Return to shop" button inside notices */ .woocommerce-cart .return-to-shop .button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce .button.wc-forward { display: inline-block; padding: 10px 24px; background-color: var(--color-gold); color: var(--color-white); font-family: var(--font-primary); font-weight: var(--font-weight-semi); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: background-color var(--transition-fast); text-decoration: none; margin-left: var(--space-md); } .woocommerce-cart .return-to-shop .button:hover, .woocommerce-message .button:hover, .woocommerce-info .button:hover, .woocommerce .button.wc-forward:hover { background-color: var(--color-gold-dark); color: var(--color-white); } /* Password toggle button (show/hide) */ .woocommerce-form-login .password-input { position: relative; display: block; } .woocommerce-form-login .show-password-input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0; color: var(--color-body-text); font-size: 0.8rem; } /* Lost password link */ .woocommerce-LostPassword a { color: var(--color-gold); font-size: 0.875rem; } .woocommerce-LostPassword a:hover { color: var(--color-gold-dark); } /* ============================================================ PRODUCT IMAGE LIGHTBOX ============================================================ */ /* Hide WC's built-in zoom trigger button */ .woocommerce-product-gallery__trigger { display: none !important; } /* Make the main gallery image show a pointer so it's obviously clickable */ .woocommerce-product-gallery .woocommerce-product-gallery__image a { cursor: zoom-in; display: block; } /* Lightbox overlay */ #aura-lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.90); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } #aura-lightbox-overlay.is-open { opacity: 1; pointer-events: auto; } #aura-lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: block; } #aura-lightbox-close { position: fixed; top: 20px; right: 28px; background: none; border: none; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; z-index: 100000; opacity: 0.85; transition: opacity 0.15s; font-weight: 100; } #aura-lightbox-close:hover { opacity: 1; } /* ============================================================ PRODUCT SIDE CARD (floating quick-buy panel) Desktop ≥1025px : fixed to right edge, slides in from right. Mobile <1025px : fixed to bottom, slides up from bottom. ============================================================ */ /* ---------- Base (shared) ---------- */ .product-side-card { position: fixed; z-index: 9000; background: #1a1a1a; box-shadow: 4px 0 32px rgba(0,0,0,0.45); pointer-events: none; transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease; opacity: 0; } .product-side-card.is-visible { pointer-events: auto; opacity: 1; } /* ---------- Desktop: left-edge panel ---------- */ @media (min-width: 1025px) { .product-side-card { top: 50%; left: 0; width: 280px; max-height: calc(100vh - 120px); border-radius: 0 12px 12px 0; transform: translateY(-50%) translateX(-100%); box-shadow: 4px 0 32px rgba(0,0,0,0.45); overflow-y: auto; } .product-side-card.is-visible { transform: translateY(-50%) translateX(0); } } /* ---------- Mobile: bottom sheet ---------- */ @media (max-width: 1024px) { .product-side-card { bottom: 0; left: 0; right: 0; width: 100%; border-radius: 14px 14px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.4); transform: translateY(100%); } .product-side-card.is-visible { transform: translateY(0); padding-bottom: env(safe-area-inset-bottom, 12px); } } /* ---------- Close button ---------- */ .product-side-card__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: none; border-radius: 50%; color: rgba(255,255,255,0.55); cursor: pointer; transition: background 0.15s, color 0.15s; z-index: 1; } .product-side-card__close:hover, .product-side-card__close:focus { background: rgba(255,255,255,0.15); color: #fff; outline: none; } /* ---------- Inner wrapper ---------- */ .product-side-card__inner { padding: 20px 18px 16px; display: flex; flex-direction: column; gap: 14px; } /* ---------- Top row: thumbnail + meta + heart ---------- */ .product-side-card__top { display: flex; align-items: flex-start; gap: 12px; padding-right: 28px; /* clear close btn */ } .product-side-card__img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); } .product-side-card__meta { flex: 1; min-width: 0; } .product-side-card__name { font-size: 0.875rem; font-weight: 600; color: #f0ece4; line-height: 1.35; margin: 0 0 4px; /* Clamp to 2 lines */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-side-card__price { font-size: 0.9375rem; font-weight: 700; color: #fff; margin: 0; } .product-side-card__price ins { text-decoration: none; } .product-side-card__price del { color: rgba(255,255,255,0.55); font-size: 0.8125rem; font-weight: 400; margin-right: 4px; } /* ---------- Wishlist heart ---------- */ .product-side-card__wishlist { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.4); padding: 4px; flex-shrink: 0; transition: color 0.2s, transform 0.2s; line-height: 0; } .product-side-card__wishlist:hover, .product-side-card__wishlist:focus { color: #e85d5d; outline: none; } .product-side-card__wishlist.is-active { color: #e85d5d; } .product-side-card__wishlist.is-active svg { fill: #e85d5d; } .product-side-card__wishlist:active { transform: scale(1.25); } /* ---------- Variant chips ---------- */ .product-side-card__variants { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; } .psc-variant-chip { display: inline-flex; align-items: center; padding: 3px 10px; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.35); border-radius: 20px; font-size: 0.75rem; color: rgba(255,255,255,0.8); white-space: nowrap; } .psc-variant-chip__label { color: rgba(201,168,76,0.85); font-weight: 600; margin-right: 2px; } /* ---------- Actions: qty + ATC ---------- */ .product-side-card__actions { display: flex; align-items: center; gap: 10px; } /* Quantity stepper */ .product-side-card__qty { display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; overflow: hidden; flex-shrink: 0; height: 40px; } .psc-qty-btn { width: 34px; height: 100%; background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.7); font-size: 1.125rem; cursor: pointer; transition: background 0.15s, color 0.15s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .psc-qty-btn:hover, .psc-qty-btn:focus { background: rgba(255,255,255,0.12); color: #fff; outline: none; } .psc-qty-input { width: 38px; text-align: center; background: transparent; border: none; color: #fff; font-size: 0.9375rem; font-weight: 600; font-family: inherit; -moz-appearance: textfield; } .psc-qty-input::-webkit-inner-spin-button, .psc-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; } .psc-qty-input:focus { outline: none; } /* Add to Cart button */ .product-side-card__atc { flex: 1; height: 40px; background: var(--color-gold, #c9a84c); color: #fff; border: 2px solid var(--color-gold, #c9a84c); border-radius: 8px; font-family: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.18s, color 0.18s, opacity 0.18s; white-space: nowrap; min-width: 0; } .product-side-card__atc:hover, .product-side-card__atc:focus { background: transparent; color: var(--color-gold, #c9a84c); outline: none; } .product-side-card__atc.is-loading { opacity: 0.55; cursor: wait; } .product-side-card__atc.is-added { background: var(--color-gold, #c9a84c); border-color: var(--color-gold, #c9a84c); color: #fff; } /* ---------- Buy Now link ---------- */ .product-side-card__buynow { display: block; text-align: center; padding: 10px; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.75); text-decoration: none; transition: border-color 0.18s, color 0.18s, background 0.18s; } .product-side-card__buynow:hover, .product-side-card__buynow:focus { border-color: var(--color-gold, #c9a84c); color: var(--color-gold, #c9a84c); background: rgba(201,168,76,0.06); outline: none; } /* ---------- Payment Request Button (Google Pay / Apple Pay) ---------- */ /* Separator line shown above the payment request area on the product page */ .aura-prb-separator { margin: 16px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.1); position: relative; } .aura-prb-separator::after { content: 'or'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-bg-dark, #0d0d0d); padding: 0 10px; font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.35); text-transform: uppercase; } /* Product page button container */ .aura-payment-request-button { width: 100%; margin-bottom: 12px; min-height: 48px; border-radius: 4px; overflow: hidden; } /* Side card button container — slightly smaller height */ .aura-prc-side-card { width: 100%; min-height: 44px; border-radius: 4px; overflow: hidden; margin-top: 4px; } /* Stripe iframe inside the containers */ .aura-payment-request-button iframe, .aura-prc-side-card iframe { border-radius: 4px; } /* ---------- Mobile layout adjustments ---------- */ @media (max-width: 1024px) { .product-side-card__inner { padding: 16px 16px 8px; gap: 12px; } .product-side-card__img { width: 52px; height: 52px; } .product-side-card__actions { gap: 8px; } .product-side-card__close { top: 8px; right: 8px; } } /* ============================================================ PAGE TITLE SUPPRESSION — Cart / Checkout / My Account Hide the .page-header h1 on WooCommerce functional pages where the title adds no value and clutters the layout. ============================================================ */ body.woocommerce-cart .page-header, body.woocommerce-checkout .page-header, body.woocommerce-account .page-header { display: none !important; } /* ============================================================ AJAX LIVE SEARCH DROPDOWN ============================================================ */ .aura-search-wrap { position: relative; width: 100%; } .aura-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid #ede8e0; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); z-index: 9999; overflow: hidden; max-height: 520px; overflow-y: auto; /* Fade-in animation */ opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease; } .aura-search-results.is-visible { opacity: 1; transform: translateY(0); } /* Scrollbar styling */ .aura-search-results::-webkit-scrollbar { width: 4px; } .aura-search-results::-webkit-scrollbar-thumb { background: #ede8e0; border-radius: 2px; } /* Result list */ .aura-search-list { list-style: none; margin: 0; padding: 8px 0; } /* Individual result row */ .aura-search-item { display: flex; align-items: center; gap: 14px; padding: 10px 16px; cursor: pointer; transition: background 0.15s ease; text-decoration: none; color: inherit; } .aura-search-item:hover, .aura-search-item.is-active { background: #fdf8f2; border-left: 3px solid #c9a84c; padding-left: 13px; /* compensate for border so text doesn't jump */ } /* Thumbnail — 80x80 */ .aura-search-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #f5f2ee; } /* Info column */ .aura-search-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .aura-search-name { font-size: 0.9rem; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aura-search-meta { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; } .aura-search-cat { color: #9b8b78; } .aura-search-price { color: #b08d57; font-weight: 600; } /* Arrow */ .aura-search-arrow { color: #b08d57; font-size: 1rem; flex-shrink: 0; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; } .aura-search-item:hover .aura-search-arrow, .aura-search-item.is-active .aura-search-arrow { opacity: 1; transform: translateX(3px); } /* "View all" footer link */ .aura-search-footer { display: block; padding: 12px 16px; text-align: center; font-size: 0.82rem; font-weight: 600; color: #b08d57; text-decoration: none; border-top: 1px solid #f0ebe4; transition: background 0.15s ease; } .aura-search-footer:hover { background: #fdf8f2; color: #8a6d3e; } /* Empty state (legacy — kept for fallback) */ .aura-search-empty { padding: 20px 16px; text-align: center; font-size: 0.875rem; color: #9b8b78; } /* Zero results state */ .aura-search-zero { padding: 24px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .aura-search-zero__msg { font-size: 0.9rem; color: #4a3f34; margin: 0; } .aura-search-zero__msg strong { color: #1a1a1a; } .aura-search-zero__dym { font-size: 0.82rem; color: #9b8b78; margin: 0; } .aura-search-zero__dym-link { background: none; border: none; padding: 0; color: #c9a84c; font-weight: 600; cursor: pointer; font-size: 0.82rem; text-decoration: underline; } .aura-search-zero__dym-link:hover { color: #a07830; } .aura-search-zero__browse { display: inline-block; margin-top: 4px; padding: 8px 20px; background: #1a1a1a; color: #c9a84c; border: 1px solid #c9a84c; border-radius: 6px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .aura-search-zero__browse:hover { background: #c9a84c; color: #1a1a1a; } /* Did-you-mean bar shown above footer when results exist */ .aura-search-dym-bar { padding: 8px 16px; font-size: 0.8rem; color: #9b8b78; border-top: 1px solid #f0ebe4; } .aura-search-dym-bar__link { background: none; border: none; padding: 0; color: #c9a84c; font-weight: 600; cursor: pointer; font-size: 0.8rem; text-decoration: underline; } .aura-search-dym-bar__link:hover { color: #a07830; } /* Scope tabs */ .aura-search-tabs { display: flex; gap: 6px; margin-bottom: 16px; } .aura-search-tab { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(201, 168, 76, 0.3); border-radius: 24px; color: rgba(255, 255, 255, 0.65); cursor: pointer; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; padding: 6px 16px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .aura-search-tab:hover { background: rgba(201, 168, 76, 0.12); border-color: #c9a84c; color: #c9a84c; } .aura-search-tab.is-active { background: #c9a84c; border-color: #c9a84c; color: #1a1a1a; font-weight: 700; } /* Trending searches panel */ .aura-search-trending-label { padding: 12px 16px 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9b8b78; margin: 0; } .aura-search-trending-list { list-style: none; margin: 0; padding: 4px 0 8px; } .aura-search-trending-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer; font-size: 0.88rem; color: #2a2a2a; transition: background 0.12s ease, color 0.12s ease; border-left: 3px solid transparent; } .aura-search-trending-item:hover { background: #fdf8f2; border-left-color: #c9a84c; color: #1a1a1a; } .aura-search-trending-icon { color: #c9a84c; display: flex; align-items: center; flex-shrink: 0; } /* Loading spinner */ .aura-search-spinner { display: flex; justify-content: center; align-items: center; padding: 24px 16px; } .aura-search-spinner__dot { width: 20px; height: 20px; border: 2px solid #ede8e0; border-top-color: #b08d57; border-radius: 50%; animation: aura-spin 0.6s linear infinite; } @keyframes aura-spin { to { transform: rotate(360deg); } } /* ============================================================ CART DRAWER ============================================================ */ /* Backdrop */ #aura-cart-backdrop { position: fixed; inset: 0; background: rgba(30, 20, 10, 0.55); z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } #aura-cart-backdrop.is-open { opacity: 1; visibility: visible; } /* Drawer panel */ #aura-cart-drawer { position: fixed; top: 0; right: 0; width: 420px; max-width: 100vw; height: 100%; background: #fff; z-index: 10001; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s; box-shadow: -4px 0 32px rgba(0, 0, 0, 0.14); overflow: hidden; } #aura-cart-drawer.is-open { transform: translateX(0); visibility: visible; } /* Header row */ .acd-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #ede8e0; flex-shrink: 0; } .acd-header__title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1a1a; margin: 0; } .acd-header__close { background: none; border: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: #888; padding: 4px 8px; transition: color 0.2s; } .acd-header__close:hover { color: #1a1a1a; } /* Loading */ .acd-loading { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #999; } /* Scrollable body */ #aura-cart-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } /* Free shipping bar */ .acd-shipping-bar { padding: 16px 24px; border-bottom: 1px solid #f0ebe3; flex-shrink: 0; } .acd-shipping-msg { font-size: 0.82rem; color: #555; margin: 0 0 10px; line-height: 1.4; } .acd-shipping-msg.is-unlocked { color: #b08d57; font-weight: 600; } .acd-shipping-track { height: 6px; background: #ede8e0; border-radius: 3px; overflow: hidden; } .acd-shipping-fill { height: 100%; background: linear-gradient(90deg, #c8a96e, #b08d57); border-radius: 3px; transition: width 0.5s ease; min-width: 0; } /* Empty cart */ .acd-empty { padding: 40px 24px; text-align: center; color: #888; font-size: 0.9rem; flex: 1; } /* Items list */ .acd-items { list-style: none; margin: 0; padding: 0 24px; border-bottom: 1px solid #f0ebe3; flex-shrink: 0; } .acd-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid #f5f1eb; } .acd-item:last-child { border-bottom: none; } .acd-item__thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 1px solid #ede8e0; } .acd-item__info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .acd-item__name { font-size: 0.85rem; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acd-item__price { font-size: 0.85rem; color: #b08d57; font-weight: 600; } .acd-item__qty { font-size: 0.78rem; color: #888; } .acd-item__remove { font-size: 1.1rem; color: #bbb; text-decoration: none; line-height: 1; flex-shrink: 0; transition: color 0.2s; margin-top: 2px; } .acd-item__remove:hover { color: #c0392b; } /* Subtotal row */ .acd-subtotal { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #f0ebe3; font-size: 0.9rem; font-weight: 600; color: #1a1a1a; flex-shrink: 0; } .acd-subtotal__val { color: #b08d57; font-size: 1rem; } /* Buttons */ .acd-buttons { display: flex; flex-direction: column; gap: 10px; padding: 18px 24px; flex-shrink: 0; } .acd-btn { display: block; width: 100%; padding: 13px 20px; text-align: center; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: 3px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .acd-btn--outline { background: transparent; color: #1a1a1a; border: 1.5px solid #d4c9b8; } .acd-btn--outline:hover { border-color: #b08d57; color: #b08d57; } .acd-btn--gold { background: #b08d57; color: #fff; border: 1.5px solid #b08d57; } .acd-btn--gold:hover { background: #9a7a48; border-color: #9a7a48; color: #fff; } /* Suggestions section */ .acd-suggestions { background: #faf8f4; padding: 20px 24px 28px; border-top: 1px solid #ede8e0; flex-shrink: 0; } .acd-suggestions__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin: 0 0 16px; } .acd-suggestions__grid { display: flex; flex-direction: column; gap: 14px; } .acd-sug-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #ede8e0; border-radius: 6px; padding: 12px; } .acd-sug-card__img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .acd-sug-card__info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .acd-sug-card__name { font-size: 0.82rem; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acd-sug-card__price { font-size: 0.82rem; color: #b08d57; font-weight: 600; } .acd-sug-card__atc { display: inline-block; margin-top: 4px; padding: 5px 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: #b08d57; color: #fff; border: none; border-radius: 3px; cursor: pointer; text-decoration: none; transition: background 0.2s; align-self: flex-start; } .acd-sug-card__atc:hover { background: #9a7a48; color: #fff; } .acd-sug-card__atc--link { background: #e8e2d9; color: #1a1a1a; } .acd-sug-card__atc--link:hover { background: #d4c9b8; color: #1a1a1a; } /* Prevent body scroll when drawer open */ body.cart-drawer-open { overflow: hidden; } /* Mobile responsive */ @media (max-width: 480px) { #aura-cart-drawer { width: 100vw; } } /* (old sticky-buy-bar override removed — replaced by #product-side-card above) */ /* ============================================================ QUANTITY STEPPER — +/- pill ============================================================ */ .single-product-summary .quantity { border: 1px solid #d4cfc8 !important; border-radius: 8px !important; overflow: hidden !important; display: flex !important; align-items: center !important; height: 48px !important; background: #fff; } .qty-stepper-btn { width: 36px; height: 48px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; font-size: 1.25rem; font-weight: 400; color: #6b6560; transition: color 0.15s, background 0.15s; flex-shrink: 0; line-height: 1; padding: 0; outline: none; } .qty-stepper-btn:hover, .qty-stepper-btn:focus { color: var(--color-gold, #c9a84c); background: #f5f1ea; } .single-product-summary .quantity .qty { width: 44px !important; text-align: center !important; border: none !important; background: transparent !important; font-size: 0.9375rem !important; font-weight: 600 !important; color: #262626 !important; -moz-appearance: textfield !important; padding: 0 !important; } .single-product-summary .quantity .qty::-webkit-inner-spin-button, .single-product-summary .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* ============================================================ RECENTLY VIEWED SECTION ============================================================ */ .recently-viewed-section { padding: var(--space-3xl, 4rem) 0; background: #faf8f5; } .recently-viewed-section .section-title { font-size: 1.5rem; font-weight: var(--font-weight-semi, 600); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-heading, #262626); margin-bottom: var(--space-xl, 2rem); text-align: center; } .recently-viewed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg, 1.5rem); } @media (max-width: 900px) { .recently-viewed-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .recently-viewed-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm, 0.75rem); } } .rv-card { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: var(--radius-md, 8px); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid #ede8e0; } .rv-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); text-decoration: none; color: inherit; } .rv-card__img-wrap { aspect-ratio: 4/5; overflow: hidden; background: #f5f1ea; } .rv-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .rv-card:hover .rv-card__img-wrap img { transform: scale(1.04); } .rv-card__info { padding: var(--space-sm, 0.75rem) var(--space-md, 1rem); } .rv-card__name { font-size: 0.875rem; font-weight: 600; color: var(--color-heading, #262626); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .rv-card__price { font-size: 0.8125rem; color: var(--color-gold, #c9a84c); font-weight: 600; } /* ============================================================ AURA — Google Sign In (Nextend Social Login) ============================================================ */ .aura-social-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: #888; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; } .aura-social-divider::before, .aura-social-divider::after { content: ''; flex: 1; height: 1px; background: rgba(201, 168, 76, 0.25); } /* Reset Nextend container */ .nsl-container, .nsl-container-block { display: block !important; width: 100% !important; text-align: left !important; } /* Reset Nextend button to brand spec — dark/gold luxury theme */ .nsl-button.nsl-button-default.nsl-button-google, .nsl-button.nsl-button-google { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; padding: 0.75rem 1.25rem !important; background: #1a1a1a !important; border: 1px solid rgba(201, 168, 76, 0.5) !important; border-radius: 4px !important; color: #c9a84c !important; font-size: 0.9375rem !important; font-weight: 500 !important; font-family: inherit !important; letter-spacing: 0.04em !important; cursor: pointer !important; text-decoration: none !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; box-shadow: none !important; } .nsl-button.nsl-button-default.nsl-button-google:hover, .nsl-button.nsl-button-google:hover { background: #222 !important; border-color: #c9a84c !important; color: #e0bf70 !important; box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.25) !important; } .nsl-button-google .nsl-button-svg-container { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; } .nsl-button-google .nsl-button-svg-container svg { width: 18px !important; height: 18px !important; } .nsl-button-google .nsl-button-label-container { flex: 1 !important; text-align: center !important; } /* ---------------------------------------------------------- Checkout Order Summary Sidebar — more spacious (override) ---------------------------------------------------------- */ /* Increase inner padding of the sidebar card */ .wc-block-checkout__sidebar { padding: 36px 40px !important; } /* More breathing room between totals line items */ .wc-block-checkout__sidebar .wc-block-components-totals-item { padding: 18px 0 !important; } .wc-block-checkout__sidebar .wc-block-components-totals-coupon { padding: 18px 0 !important; } /* Larger font for product names and prices in order summary */ .wc-block-checkout__sidebar .wc-block-components-order-summary-item__description, .wc-block-checkout__sidebar .wc-block-components-order-summary-item__individual-prices, .wc-block-checkout__sidebar .wc-block-components-order-summary-item__name, .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-item-block, .wc-block-checkout__sidebar .wc-block-components-totals-item__label, .wc-block-checkout__sidebar .wc-block-components-totals-item__value { font-size: 1rem !important; } /* More gap between product rows in the order summary list */ .wc-block-checkout__sidebar .wc-block-components-order-summary-item { padding: 16px 0 !important; } .wc-block-checkout__sidebar .wc-block-components-order-summary__cart-items { gap: 16px !important; row-gap: 16px !important; } /* Place Order button — more prominent, full width, taller */ .wc-block-components-checkout-place-order-button, .wc-block-components-checkout-place-order-button.contained, button.wc-block-components-checkout-place-order-button.wp-element-button { padding: 18px 0 !important; width: 100% !important; display: block !important; font-size: 1.05rem !important; min-height: 60px !important; } /* ============================================================ Nextend Social Login — Google button (Aura gold/dark theme) ============================================================ */ /* Wrapper that holds the social buttons */ .nsl-container, .nsl-container-buttons { margin-top: 20px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; } /* Divider "or" separator injected by Nextend */ .nsl-separator { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: #888; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } .nsl-separator::before, .nsl-separator::after { content: ''; flex: 1; height: 1px; background: rgba(201, 168, 76, 0.25); } /* Base social button */ .nsl-button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 12px 20px !important; border-radius: 4px !important; font-size: 0.9rem !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-decoration: none !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; cursor: pointer !important; border: 1px solid rgba(201, 168, 76, 0.35) !important; box-sizing: border-box !important; } /* Google button — dark background with gold text */ .nsl-button-google { background: #1a1a1a !important; color: #c9a84c !important; border-color: rgba(201, 168, 76, 0.45) !important; } .nsl-button-google:hover, .nsl-button-google:focus { background: #222 !important; border-color: #c9a84c !important; color: #e0bf70 !important; } /* Google icon inside the button */ .nsl-button-google .nsl-button-svg-container, .nsl-button-google svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; } /* Button label text */ .nsl-button-label-container { font-family: inherit !important; } /* Hide the default Nextend container border/bg if any */ .nsl-container-block { background: transparent !important; border: none !important; padding: 0 !important; } /* ============================================================ TASK 3 — Cart totals sidebar: ensure wrapper supports sticky ============================================================ */ /* The cart page layout must have the sidebar as a separate column */ .woocommerce-cart .cart-collaterals { position: relative; } /* WooCommerce native cart totals box */ .woocommerce-cart .cart_totals { position: sticky; top: 100px; } /* ============================================================ TASK 4 — Checkout page design fixes ============================================================ */ /* 4.1 Ship to different address checkbox — fix alignment */ #ship-to-different-address label, .woocommerce-checkout #ship-to-different-address .woocommerce-form__label, .woocommerce-checkout #ship-to-different-address label { display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer; } #ship-to-different-address input[type="checkbox"] { margin: 0 !important; flex-shrink: 0; } /* 4.2 Order review box (right side) — wider, cleaner, tighter */ #order_review_heading { font-size: 1.125rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-md); } .woocommerce-checkout #order_review { min-width: 400px; background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-lg); box-shadow: var(--shadow-sm); } /* Tighter line items inside order review */ .woocommerce-checkout #order_review table.shop_table td, .woocommerce-checkout #order_review table.shop_table th { padding: var(--space-xs) var(--space-sm); font-size: 0.875rem; } /* 4.3 Place Order button — full width, gold, uppercase, bold */ #place_order { display: block !important; width: 100% !important; padding: 16px !important; background-color: var(--color-gold) !important; color: var(--color-white) !important; font-family: var(--font-primary) !important; font-weight: var(--font-weight-semi) !important; font-size: 0.9375rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: var(--radius-sm) !important; border: none !important; cursor: pointer !important; transition: background-color var(--transition-fast) !important; margin-top: var(--space-lg) !important; box-sizing: border-box !important; } #place_order:hover { background-color: var(--color-gold-dark) !important; } /* 4.4 Return to cart link — subtle text link, centered below place order */ .woocommerce-checkout .return-to-shop a, .woocommerce-checkout a.back-to-shop, .woocommerce-checkout .wc-backward { display: block; text-align: center; color: var(--color-gold); font-size: 0.875rem; text-decoration: none; margin-top: var(--space-md); transition: text-decoration var(--transition-fast); } .woocommerce-checkout .return-to-shop a:hover, .woocommerce-checkout a.back-to-shop:hover, .woocommerce-checkout .wc-backward:hover { text-decoration: underline; } /* 4.5 General checkout consistency — form inputs */ .woocommerce-checkout .woocommerce-input-wrapper input, .woocommerce-checkout .woocommerce-input-wrapper select, .woocommerce-checkout .woocommerce-input-wrapper textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: 0.9375rem; color: var(--color-heading); box-sizing: border-box; transition: border-color var(--transition-fast); appearance: none; } .woocommerce-checkout .woocommerce-input-wrapper input:focus, .woocommerce-checkout .woocommerce-input-wrapper select:focus, .woocommerce-checkout .woocommerce-input-wrapper textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18); } /* Section titles consistency */ .checkout-section-title, .woocommerce-checkout h3#order_review_heading, .woocommerce-checkout h3 { font-size: 1.125rem !important; font-weight: var(--font-weight-semi) !important; color: var(--color-heading) !important; margin-bottom: var(--space-lg) !important; padding-bottom: var(--space-sm) !important; border-bottom: 2px solid var(--color-gold) !important; } /* ============================================================ MEGA MENU — Shop Navigation Panel ============================================================ */ .has-mega-menu { position: static !important; } .has-mega-menu > .sub-menu { display: none !important; } .mega-menu { position: absolute; left: 0; right: 0; top: 100%; width: 100%; background: #1a1a1a; border-top: 2px solid #c9a84c; padding: 40px 60px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; z-index: 1000; box-shadow: 0 20px 60px rgba(0,0,0,0.5); pointer-events: none; } .has-mega-menu:hover .mega-menu, .has-mega-menu:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; } .mega-menu-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; max-width: 1200px; margin: 0 auto; } .mega-menu-heading { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #c9a84c; margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 1px solid rgba(201, 168, 76, 0.3); } /* Category list */ .mega-menu-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .mega-menu-cat-list li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #cccccc; text-decoration: none; font-size: 14px; font-weight: 400; letter-spacing: 0.02em; border-radius: 4px; transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease; } .mega-menu-cat-list li a:hover { color: #c9a84c; background: rgba(201, 168, 76, 0.08); padding-left: 18px; } .mega-menu-cat-icon { width: 18px; height: 18px; opacity: 0.6; flex-shrink: 0; } /* Featured products grid */ .mega-menu-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .mega-menu-product-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .mega-menu-product-card:hover .mega-menu-product-name { color: #c9a84c; } .mega-menu-product-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; margin-bottom: 10px; background: #2a2a2a; transition: opacity 0.2s ease; } .mega-menu-product-card:hover .mega-menu-product-img { opacity: 0.85; } .mega-menu-product-img-placeholder { width: 100%; aspect-ratio: 1 / 1; background: #2a2a2a; border-radius: 4px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; color: #555; font-size: 12px; } .mega-menu-product-name { font-size: 13px; font-weight: 500; color: #e0e0e0; line-height: 1.4; margin-bottom: 4px; transition: color 0.2s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mega-menu-product-price { font-size: 13px; color: #c9a84c; font-weight: 600; } /* Mobile mega menu accordion */ @media (max-width: 768px) { .mega-menu { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: all; padding: 0; border-top: none; box-shadow: none; background: transparent; display: none; } .mega-menu.is-open { display: block; } .mega-menu-inner { grid-template-columns: 1fr; gap: 0; max-width: 100%; } .mega-menu-categories { padding: 12px 0; } .mega-menu-featured { display: none; } .mega-menu-heading { font-size: 12px; margin-bottom: 8px; padding: 0 20px 8px; } .mega-menu-cat-list li a { padding: 12px 20px; font-size: 15px; border-radius: 0; } .mega-menu-cat-list li a:hover { padding-left: 28px; } } /* ============================================================ PHASE 6 — CART PAGE (aura-cart-page) ============================================================ */ /* Page wrapper */ .aura-cart-page { max-width: var(--container-max); margin: 0 auto; padding: var(--space-2xl) var(--container-pad); } /* Remove WooCommerce's default cart page heading (we render our own) */ .woocommerce-cart h1.page-title { display: none; } /* ── Empty cart ── */ .aura-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); padding: var(--space-3xl) var(--container-pad); text-align: center; } .aura-cart-empty svg { color: var(--color-gold); opacity: 0.6; } .aura-cart-empty h2 { font-size: 1.5rem; font-weight: var(--font-weight-semi); color: var(--color-heading); } .aura-cart-empty p { color: var(--color-body-text); } /* ── Free shipping progress bar (dark luxury) ── */ .aura-cart-shipping-bar { background: #1a1a1a; border: 1px solid rgba(201,168,76,0.3); border-radius: 12px; padding: 20px; margin-bottom: var(--space-xl); } .aura-cart-shipping-bar__msg { font-size: 0.9rem; color: rgba(240,235,224,0.9); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-xs); } .aura-cart-shipping-bar__msg svg { stroke: rgba(240,235,224,0.6); } .aura-cart-shipping-bar__msg.is-unlocked { color: #c9a84c; font-weight: var(--font-weight-semi); } .aura-cart-shipping-bar__msg.is-unlocked svg { stroke: #c9a84c; } .aura-cart-shipping-bar__track { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; } .aura-cart-shipping-bar__fill { height: 100%; background: linear-gradient(90deg, #b0922e, #c9a84c); border-radius: 2px; transition: width 0.5s ease; } /* ── Two-column layout ── */ .aura-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-2xl); align-items: start; } /* ── Items column ── */ .aura-cart-items__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-gold); } .aura-cart-items__title { font-size: 1.125rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin: 0; } .aura-cart-continue-link { font-size: 0.8125rem; color: var(--color-body-text); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: color var(--transition-fast); } .aura-cart-continue-link:hover { color: var(--color-gold); } /* ── Single cart item row ── */ .aura-cart-item { display: grid; grid-template-columns: 100px 1fr auto auto auto; gap: var(--space-lg); align-items: center; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); transition: opacity var(--transition-base); } .aura-cart-item__img-wrap { display: block; width: 100px; height: 100px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-light-bg); flex-shrink: 0; } .aura-cart-item__img { width: 100%; height: 100%; object-fit: cover; display: block; } .aura-cart-item__info { display: flex; flex-direction: column; gap: 6px; } .aura-cart-item__name { font-size: 0.9375rem; font-weight: var(--font-weight-semi); color: var(--color-heading); text-decoration: none; line-height: 1.3; transition: color var(--transition-fast); } .aura-cart-item__name:hover { color: var(--color-gold); } .aura-cart-item__variant { font-size: 0.75rem; color: var(--color-body-text); } .aura-cart-item__unit-price { font-size: 0.8125rem; color: var(--color-body-text); } .aura-cart-item__total { font-size: 0.9375rem; font-weight: var(--font-weight-semi); color: var(--color-heading); min-width: 80px; text-align: right; } .aura-cart-item__remove { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--color-body-text); text-decoration: none; border-radius: 50%; transition: color var(--transition-fast), background var(--transition-fast); } .aura-cart-item__remove:hover { color: #c0392b; background: rgba(192,57,43,0.08); } /* ── Qty stepper ── */ .aura-qty-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; transition: opacity var(--transition-fast); } .aura-qty-stepper.is-loading { opacity: 0.5; pointer-events: none; } .aura-qty-stepper__btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 36px; background: transparent; border: none; cursor: pointer; color: var(--color-heading); transition: background var(--transition-fast); } .aura-qty-stepper__btn:hover:not(:disabled) { background: var(--color-light-bg); } .aura-qty-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; } .aura-qty-stepper__val { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: var(--font-weight-semi); color: var(--color-heading); border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); background: var(--color-white); } /* ── Order summary panel ── */ .aura-cart-summary { position: sticky; top: calc(var(--header-height) + var(--announcement-height) + var(--space-lg)); background: var(--color-light-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-xl); } .aura-cart-summary__title { font-size: 1rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin: 0 0 var(--space-lg); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-gold); } .aura-cart-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: var(--color-body-text); margin-bottom: var(--space-md); } .aura-cart-summary__row--total { font-size: 1rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); } /* Hide WooCommerce's default cart totals table (we render our own rows) */ .aura-cart-summary .cart_totals, .aura-cart-summary .woocommerce-shipping-calculator { display: none; } .aura-cart-summary__row--total .cart_totals { display: block; } .aura-shipping-free { color: #2e7d32; font-weight: var(--font-weight-semi); font-size: 0.8125rem; } .aura-cart-summary__divider { height: 1px; background: var(--color-border); margin: var(--space-md) 0; } /* Coupon */ .aura-coupon-row { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); } .aura-coupon-row__input { flex: 1; height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--color-heading); background: var(--color-white); outline: none; transition: border-color var(--transition-fast); } .aura-coupon-row__input:focus { border-color: var(--color-gold); } .aura-coupon-row__btn { height: 40px; padding: 0 var(--space-md); font-size: 0.8125rem; white-space: nowrap; } .aura-coupon-feedback { font-size: 0.8125rem; min-height: 0; } .aura-coupon-feedback.is-visible { margin-bottom: var(--space-sm); } .aura-applied-coupon { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: var(--font-weight-semi); color: #2e7d32; background: rgba(46,125,50,0.08); border-radius: var(--radius-full); padding: 4px 10px; margin-top: var(--space-xs); } .aura-applied-coupon__remove { color: inherit; text-decoration: none; font-size: 1rem; line-height: 1; opacity: 0.7; } .aura-applied-coupon__remove:hover { opacity: 1; } /* Checkout CTA button */ .aura-cart-summary__checkout-btn { display: flex !important; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; padding: 16px; font-size: 0.9375rem; font-weight: var(--font-weight-semi); letter-spacing: 0.06em; text-transform: uppercase; margin-top: var(--space-lg); text-decoration: none; color: #ffffff !important; background: var(--color-gold, #c9a84c); border-radius: var(--radius-sm, 6px); } /* Trust badges */ .aura-cart-summary__trust { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .aura-cart-summary__trust span { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.75rem; color: var(--color-body-text); } /* ── Upsells section ── */ .aura-cart-upsells { margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-border); } .aura-cart-upsells__title { font-size: 1.125rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-xl); } .aura-cart-upsells__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .aura-upsell-card { display: flex; flex-direction: column; gap: var(--space-sm); text-decoration: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition-base), border-color var(--transition-base); } .aura-upsell-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-gold); } .aura-upsell-card__img-wrap { aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-light-bg); } .aura-upsell-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .aura-upsell-card__body { padding: var(--space-sm) var(--space-md) var(--space-md); } .aura-upsell-card__name { display: block; font-size: 0.8125rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .aura-upsell-card__price { font-size: 0.875rem; color: var(--color-gold); font-weight: var(--font-weight-semi); } /* ── Btn helpers ── */ .aura-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 12px var(--space-xl); border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: 0.875rem; font-weight: var(--font-weight-semi); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .aura-btn--gold { background: var(--color-gold); color: var(--color-white); } .aura-btn--gold:hover { background: var(--color-gold-dark); color: var(--color-white); } .aura-btn--outline { background: transparent; color: var(--color-heading); border: 1px solid var(--color-border); } .aura-btn--outline:hover { border-color: var(--color-gold); color: var(--color-gold); } /* Reuse for input */ .aura-input { height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: 0.875rem; color: var(--color-heading); background: var(--color-white); width: 100%; box-sizing: border-box; outline: none; transition: border-color var(--transition-fast); } .aura-input:focus { border-color: var(--color-gold); } /* ============================================================ PHASE 6 — CHECKOUT PAGE ============================================================ */ /* Hide WC page title */ .woocommerce-checkout h1.page-title { display: none; } /* ── Progress steps ── */ .aura-checkout-steps { max-width: var(--container-max); margin: 0 auto; padding: var(--space-xl) var(--container-pad) 0; } .aura-checkout-steps__list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0 0 var(--space-xl); padding: 0; } .aura-checkout-steps__item { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.8125rem; color: var(--color-body-text); flex: 1; position: relative; } .aura-checkout-steps__item:not(:last-child)::after { content: ''; display: block; height: 1px; background: var(--color-border); flex: 1; margin: 0 var(--space-sm); } .aura-checkout-steps__item.is-done .aura-checkout-steps__icon { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-white); } .aura-checkout-steps__item.is-done .aura-checkout-steps__label { color: var(--color-gold); } .aura-checkout-steps__item.is-active .aura-checkout-steps__icon { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-white); font-weight: var(--font-weight-semi); } .aura-checkout-steps__item.is-active .aura-checkout-steps__label { color: var(--color-heading); font-weight: var(--font-weight-semi); } .aura-checkout-steps__icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--color-border); border-radius: 50%; font-size: 0.6875rem; background: var(--color-white); color: var(--color-body-text); flex-shrink: 0; } .aura-checkout-steps__label { white-space: nowrap; text-decoration: none; color: inherit; } /* ── Express checkout ── */ .aura-checkout-express { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad) var(--space-xl); } .aura-checkout-express__inner { max-width: 560px; } .aura-checkout-express__label { font-size: 0.8125rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-md); letter-spacing: 0.06em; text-transform: uppercase; } .aura-checkout-express__btn-wrap { min-height: 44px; /* Stripe injects a button here */ } .aura-checkout-express__divider { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); color: var(--color-body-text); font-size: 0.8125rem; } .aura-checkout-express__divider::before, .aura-checkout-express__divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } /* ── Mobile summary toggle (hidden on desktop) ── */ .aura-checkout-summary-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--container-pad); background: var(--color-light-bg); border: none; border-bottom: 1px solid var(--color-border); cursor: pointer; font-family: var(--font-primary); font-size: 0.875rem; color: var(--color-gold); font-weight: var(--font-weight-semi); text-align: left; } .aura-checkout-summary-toggle__label { display: flex; align-items: center; gap: var(--space-sm); } .aura-checkout-summary-toggle__total { font-size: 1rem; color: var(--color-heading); } .aura-checkout-summary-toggle__chevron { transition: transform var(--transition-fast); } .aura-checkout-summary-toggle[aria-expanded="true"] .aura-checkout-summary-toggle__chevron { transform: rotate(180deg); } /* ── Checkout two-column layout ── */ .aura-checkout-form { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad) var(--space-3xl); } .aura-checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-2xl); align-items: start; } /* ── Checkout sections (card-style) ── */ .aura-checkout-section { background: #fff; border: 1px solid #eeeeee; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 28px; margin-bottom: 20px; } .aura-checkout-section__title { font-size: 0.9375rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-gold); letter-spacing: 0.04em; text-transform: uppercase; } /* ── Floating labels ── */ .aura-checkout-fields .form-row { position: relative; margin-bottom: var(--space-lg); } .aura-checkout-fields .form-row label { display: block; font-size: 0.8125rem; color: var(--color-body-text); margin-bottom: 6px; transition: color var(--transition-fast); } .aura-checkout-fields .form-row.is-focused label { color: var(--color-gold); } /* WC appends required abbr */ .aura-checkout-fields .form-row label abbr { color: var(--color-gold); } .aura-checkout-fields .form-row input[type="text"], .aura-checkout-fields .form-row input[type="email"], .aura-checkout-fields .form-row input[type="tel"], .aura-checkout-fields .form-row input[type="password"], .aura-checkout-fields .form-row select, .aura-checkout-fields .form-row textarea { width: 100%; box-sizing: border-box; height: 48px; padding: 12px 14px; border: 1px solid #ddd; border-radius: 8px; font-family: var(--font-primary); font-size: 0.95rem; color: var(--color-heading); background: var(--color-white); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; -webkit-appearance: none; } .aura-checkout-fields .form-row textarea { height: auto; padding: var(--space-md); resize: vertical; } .aura-checkout-fields .form-row input:focus, .aura-checkout-fields .form-row select:focus, .aura-checkout-fields .form-row textarea:focus { border-color: #c9a84c; box-shadow: 0 0 0 3px rgba(201,168,76,0.15); } .aura-checkout-fields .form-row.woocommerce-invalid input, .aura-checkout-fields .form-row.woocommerce-invalid select { border-color: #c0392b; } /* Half-width fields */ .aura-checkout-fields .form-row-first, .aura-checkout-fields .form-row-last { width: calc(50% - var(--space-sm)); display: inline-block; vertical-align: top; } .aura-checkout-fields .form-row-first { margin-right: var(--space-sm); } .aura-checkout-fields .form-row-last { margin-left: var(--space-sm); } /* Select arrow */ .aura-checkout-fields select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a6353' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-md) center; padding-right: 36px; } /* ── Stripe elements ── */ #stripe-card-element, .aura-stripe-element { margin-bottom: var(--space-lg); } /* Stripe injects an iframe; give it visible space */ .StripeElement { height: 48px; padding: 13px 14px; border: 1px solid #ddd; border-radius: 8px; background: var(--color-white); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .StripeElement--focus { border-color: #c9a84c; box-shadow: 0 0 0 3px rgba(201,168,76,0.15); } .StripeElement--invalid { border-color: #c0392b; } /* ── Order summary panel (checkout) ── */ .aura-checkout-summary { position: sticky; top: 100px; background: #f8f7f5; border: 1px solid #eeeeee; border-radius: 12px; overflow: hidden; } .aura-checkout-summary__inner { padding: 24px; } .aura-checkout-summary__title { font-size: 1rem; font-weight: var(--font-weight-semi); color: var(--color-heading); margin: 0 0 var(--space-lg); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-gold); } /* Items preview */ .aura-checkout-summary__items { margin-bottom: var(--space-lg); } .aura-checkout-summary__item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; } .aura-checkout-summary__item-img-wrap { position: relative; flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border); } .aura-checkout-summary__item-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .aura-checkout-summary__item-qty { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-heading); color: var(--color-white); font-size: 0.625rem; font-weight: var(--font-weight-semi); display: flex; align-items: center; justify-content: center; } .aura-checkout-summary__item-name { flex: 1; font-size: 0.8125rem; color: var(--color-heading); line-height: 1.3; } .aura-checkout-summary__item-price { font-size: 0.875rem; font-weight: var(--font-weight-semi); color: var(--color-heading); } .aura-checkout-summary__divider { height: 1px; background: var(--color-border); margin: var(--space-md) 0; } /* WC order review table inside summary */ .aura-checkout-summary .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .aura-checkout-summary .woocommerce-checkout-review-order-table th, .aura-checkout-summary .woocommerce-checkout-review-order-table td { padding: var(--space-xs) 0; color: var(--color-body-text); border: none; } .aura-checkout-summary .woocommerce-checkout-review-order-table .order-total td, .aura-checkout-summary .woocommerce-checkout-review-order-table .order-total th { font-size: 1rem; font-weight: var(--font-weight-semi); color: var(--color-heading); padding-top: var(--space-md); } /* Place order button — inside WC payment section */ .aura-checkout-fields #place_order { display: block; width: 100%; padding: 16px 24px; background: #262626; color: #fff; font-family: var(--font-primary); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: none; border-radius: 8px; cursor: pointer; transition: background var(--transition-fast); margin-top: var(--space-lg); box-sizing: border-box; } .aura-checkout-fields #place_order:hover { background: #1a1a1a; } /* ============================================================ PHASE 6 — RESPONSIVE: Cart & Checkout ============================================================ */ @media (max-width: 1024px) { .aura-cart-layout { grid-template-columns: 1fr 300px; gap: var(--space-xl); } .aura-checkout-layout { grid-template-columns: 1fr 320px; } .aura-cart-upsells__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { /* Cart: single column */ .aura-cart-layout { grid-template-columns: 1fr; } .aura-cart-summary { position: static; order: -1; /* summary goes above items on mobile */ } .aura-cart-item { grid-template-columns: 72px 1fr; grid-template-rows: auto auto auto; gap: var(--space-sm); } .aura-cart-item__img-wrap { width: 72px; height: 72px; grid-row: 1 / 3; } .aura-cart-item__info { grid-column: 2; } .aura-cart-item__qty-wrap { grid-column: 2; grid-row: 2; } .aura-cart-item__total { grid-column: 2; grid-row: 3; text-align: left; font-size: 0.875rem; } .aura-cart-item__remove { position: absolute; top: var(--space-lg); right: 0; } .aura-cart-item { position: relative; } .aura-cart-upsells__grid { grid-template-columns: repeat(2, 1fr); } /* Checkout: single column, show toggle */ .aura-checkout-summary-toggle { display: flex; } .aura-checkout-layout { grid-template-columns: 1fr; gap: 0; } .aura-checkout-section { padding: 20px 16px; border-radius: 10px; margin-bottom: 16px; } .aura-checkout-summary { position: static; display: none; /* hidden until toggle opens it */ border-radius: 0; border-left: none; border-right: none; margin-bottom: var(--space-xl); } .aura-checkout-summary.is-open { display: block; } .aura-checkout-steps__list { gap: 0; } .aura-checkout-steps__item .aura-checkout-steps__label { display: none; } .aura-checkout-steps__item.is-active .aura-checkout-steps__label { display: block; } .aura-checkout-fields .form-row-first, .aura-checkout-fields .form-row-last { width: 100%; display: block; margin-left: 0; margin-right: 0; } .aura-checkout-express { padding: 0 var(--container-pad) var(--space-lg); } } @media (max-width: 480px) { .aura-cart-page { padding: var(--space-xl) var(--container-pad); } .aura-cart-upsells__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } } /* ============================================================ PHASE 8 — MOBILE & RESPONSIVE AUDIT FIXES ============================================================ */ /* Prevent body scroll when search overlay or mobile menu is open */ body.search-open, body.menu-open { overflow: hidden; } /* ── Search overlay: move input higher so mobile keyboard doesn't bury it ── */ @media (max-width: 768px) { .search-overlay { padding-top: 60px; align-items: flex-start; } .search-overlay-inner { padding: 0 var(--space-md); } /* AJAX search results panel — full width, no max-width cap */ .search-results-panel { max-width: 100%; } /* Search scope tabs — scrollable row on mobile */ .search-scope-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: var(--space-sm); padding-bottom: 2px; flex-wrap: nowrap; } } /* ── Mobile nav: ensure toggle is shown at correct size and positioned ── */ @media (max-width: 768px) { .mobile-menu-toggle { display: flex; min-width: 44px; min-height: 44px; } /* Cart icon and account icon — enforce minimum 44px tap area */ .cart-icon, .account-icon { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Nav util buttons — ensure tap target */ .search-toggle, .nav-utils > a, .nav-utils > button { min-width: 44px; min-height: 44px; } /* Mobile nav links — generous tap targets */ .mobile-nav li a { min-height: 44px; display: flex; align-items: center; } /* Mega menu mobile links — generous tap target */ .mega-menu-cat-list li a { min-height: 44px; display: flex; align-items: center; } } /* ── Homepage carousel: 1 card on ≤480px, smooth swipe ── */ @media (max-width: 480px) { .products-carousel { /* Card widths are set via JS; ensure wrapper clips */ gap: var(--space-sm); } .carousel-btn { /* Slightly smaller visual size on very small screens but keep 44px tap target */ width: 44px; height: 44px; } /* Category strip: horizontal scroll on very small screens */ .category-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: var(--space-sm); } .category-strip::-webkit-scrollbar { display: none; } } /* ── Shop page: product grid 2-col on mobile (already set but reinforce) ── */ @media (max-width: 768px) { .products-grid .products, .products-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; } /* Filter mobile trigger — ensure tap target */ .filter-mobile-trigger { min-height: 44px; min-width: 44px; padding: 0 var(--space-md); } /* Filter chips — each chip has sufficient tap height */ .filter-chip { min-height: 36px; display: inline-flex; align-items: center; } } /* ── Product page: bottom sheet close button clear tap target ── */ @media (max-width: 1024px) { /* Bottom sheet: inner padding accounts for safe area at bottom */ .product-side-card__inner { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } /* Quantity stepper buttons — 44px tap target */ .product-side-card .quantity-btn { width: 44px; height: 44px; } } /* ── Checkout form: full-width fields, larger inputs on mobile ── */ @media (max-width: 768px) { /* Floating label fields stack full width */ .aura-field { min-height: 56px; } /* Express checkout buttons — prominent on mobile */ .aura-checkout-express { position: sticky; bottom: 0; z-index: 10; background: var(--color-bg); padding: var(--space-md) var(--container-pad); border-top: 1px solid var(--color-border); margin: 0 calc(var(--container-pad) * -1); } } /* ── General: prevent any table from causing horizontal scroll ── */ @media (max-width: 768px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } /* WooCommerce cart table specifically */ .woocommerce-cart-form table, .shop_table { display: block; overflow-x: auto; } } /* ── Font size floor: raise any visible text below 14px on mobile ── */ @media (max-width: 768px) { /* Filter drawer section labels */ .filter-drawer-section-title { font-size: 0.75rem; /* 12px — acceptable for all-caps section labels */ } /* Announcement bar — raised from 10px */ /* (already set to 0.75rem via earlier rule) */ /* Product card meta text — floor at 0.875rem */ .product-card__category, .product-card__brand { font-size: 0.875rem; } /* Search results: ensure minimum readable size */ .search-result-cat, .search-suggestion { font-size: 0.875rem; } } /* ============================================================ BLOG — archive.php & single.php ============================================================ */ /* ── Archive: Page Header ─────────────────────────────────── */ .aura-blog-archive__header { background: #0d0d0d; padding: 80px 24px 60px; text-align: center; border-bottom: 1px solid rgba(201, 168, 76, 0.18); } .aura-blog-archive__header-inner { max-width: 680px; margin: 0 auto; } .aura-blog-archive__eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #c9a84c; margin: 0 0 16px; } .aura-blog-archive__title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 600; color: #f0ebe0; margin: 0 0 20px; line-height: 1.15; } .aura-blog-archive__desc { font-size: 1rem; color: rgba(240, 235, 224, 0.65); margin: 0; line-height: 1.7; } /* ── Archive: Category Nav Pills ─────────────────────────── */ .aura-blog-archive__cats { background: #111; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 18px 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .aura-blog-archive__cats::-webkit-scrollbar { display: none; } .aura-blog-archive__cats-inner { display: flex; gap: 10px; max-width: 1200px; margin: 0 auto; flex-wrap: nowrap; } .aura-blog-cat-pill { display: inline-flex; align-items: center; white-space: nowrap; padding: 7px 18px; border-radius: 50px; border: 1px solid rgba(201, 168, 76, 0.35); color: rgba(240, 235, 224, 0.75); font-size: 0.8rem; letter-spacing: 0.05em; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } .aura-blog-cat-pill:hover, .aura-blog-cat-pill.is-active { background: #c9a84c; border-color: #c9a84c; color: #0d0d0d; } /* ── Home Journal section ────────────────────────────────── */ .aura-home-journal { padding: var(--space-3xl) 0; background: var(--color-bg, #faf8f3); } .aura-home-journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; } @media (max-width: 991px) { .aura-home-journal__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 639px) { .aura-home-journal__grid { grid-template-columns: 1fr; gap: 20px; } } /* ── Archive: Container & Grid ───────────────────────────── */ .aura-blog-archive__container { max-width: 1200px; margin: 0 auto; padding: 60px 24px 80px; } .aura-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; } /* ── Blog Card ───────────────────────────────────────────── */ .aura-blog-card { background: #161616; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.25s, transform 0.25s; } .aura-blog-card:hover { border-color: rgba(201, 168, 76, 0.35); transform: translateY(-3px); } .aura-blog-card__img-link { display: block; } .aura-blog-card__img-wrap { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #1e1e1e; } .aura-blog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .aura-blog-card:hover .aura-blog-card__img { transform: scale(1.04); } .aura-blog-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #1e1e1e; color: rgba(201, 168, 76, 0.35); } .aura-blog-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .aura-blog-card__cat { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: #c9a84c; text-decoration: none; margin-bottom: 10px; display: inline-block; font-weight: 600; } .aura-blog-card__title { font-size: 1.05rem; font-weight: 600; color: #f0ebe0; margin: 0 0 12px; line-height: 1.4; } .aura-blog-card__title a { color: inherit; text-decoration: none; } .aura-blog-card__title a:hover { color: #c9a84c; } .aura-blog-card__excerpt { font-size: 0.875rem; color: rgba(240, 235, 224, 0.55); line-height: 1.65; margin: 0 0 auto; padding-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aura-blog-card__meta { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: rgba(240, 235, 224, 0.4); margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .aura-blog-card__meta-sep { opacity: 0.4; } /* ── Archive: Pagination ─────────────────────────────────── */ .aura-blog-pagination { margin-top: 60px; } .aura-blog-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 8px; } .aura-blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(201, 168, 76, 0.3); border-radius: 4px; color: rgba(240, 235, 224, 0.65); font-size: 0.875rem; text-decoration: none; transition: background 0.2s, color 0.2s; } .aura-blog-pagination .page-numbers.current, .aura-blog-pagination .page-numbers:hover { background: #c9a84c; border-color: #c9a84c; color: #0d0d0d; } .aura-blog-pagination .page-numbers.dots { border-color: transparent; background: transparent; cursor: default; color: rgba(240, 235, 224, 0.35); } /* ── Archive: Empty State ────────────────────────────────── */ .aura-blog-empty { text-align: center; padding: 80px 24px; } .aura-blog-empty__text { color: rgba(240, 235, 224, 0.55); margin-bottom: 24px; } /* ── Archive: CTA Banner ─────────────────────────────────── */ .aura-blog-archive__cta { background: #0d0d0d; border-top: 1px solid rgba(201, 168, 76, 0.18); padding: 48px 24px; text-align: center; } .aura-blog-archive__cta-inner { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .aura-blog-archive__cta-text { color: rgba(240, 235, 224, 0.7); font-size: 0.95rem; margin: 0; } /* ============================================================ SINGLE POST — single.php ============================================================ */ /* ── Hero ────────────────────────────────────────────────── */ .aura-post-hero { position: relative; width: 100%; max-height: 520px; overflow: hidden; background: #0d0d0d; } .aura-post-hero__img-wrap { position: relative; width: 100%; } .aura-post-hero__img { width: 100%; height: 520px; object-fit: cover; display: block; } .aura-post-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(13,13,13,0.85) 100%); } /* ── Container ───────────────────────────────────────────── */ .aura-post-container { max-width: 720px; margin: 0 auto; padding: 60px 24px 80px; } /* ── Article Header ──────────────────────────────────────── */ .aura-post-article { margin-bottom: 60px; } .aura-post-header { margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(201, 168, 76, 0.2); } .aura-post-header__cat { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: #c9a84c; text-decoration: none; font-weight: 600; display: inline-block; margin-bottom: 14px; } .aura-post-header__title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 600; color: #f0ebe0; line-height: 1.2; margin: 0 0 20px; } .aura-post-header__meta { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: rgba(240, 235, 224, 0.6); flex-wrap: wrap; } .aura-post-header__meta-sep { opacity: 0.4; } /* ── Article Content ─────────────────────────────────────── */ .aura-post-content { font-size: 1.125rem; line-height: 1.8; color: rgba(240, 235, 224, 0.92); } .aura-post-content h2 { font-size: 1.5rem; font-weight: 600; color: #f0ebe0; margin: 2.5em 0 0.8em; padding-top: 2em; border-top: 1px solid rgba(201, 168, 76, 0.15); } .aura-post-content h3 { font-size: 1.2rem; font-weight: 600; color: #f0ebe0; margin: 2em 0 0.6em; } .aura-post-content p { margin: 0 0 1.4em; } .aura-post-content a { color: #c9a84c; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .aura-post-content a:hover { color: #e0bf6a; } .aura-post-content ul, .aura-post-content ol { padding-left: 1.5em; margin: 0 0 1.4em; } .aura-post-content li { margin-bottom: 0.5em; } .aura-post-content blockquote { margin: 2em 0; padding: 20px 24px; border-left: 3px solid #c9a84c; background: rgba(201, 168, 76, 0.06); border-radius: 0 4px 4px 0; font-style: italic; color: rgba(240, 235, 224, 0.7); } .aura-post-content blockquote p { margin: 0; } .aura-post-content img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 2em 0; } .aura-post-content strong { color: #f0ebe0; font-weight: 600; } .aura-post-content hr { border: none; border-top: 1px solid rgba(201, 168, 76, 0.2); margin: 3em 0; } /* ── Post Footer (Tags) ──────────────────────────────────── */ .aura-post-footer { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .aura-post-tags { display: flex; flex-wrap: wrap; gap: 8px; } .aura-post-tag { display: inline-block; padding: 5px 12px; font-size: 0.78rem; border: 1px solid rgba(201, 168, 76, 0.3); border-radius: 50px; color: rgba(240, 235, 224, 0.6); text-decoration: none; transition: background 0.2s, color 0.2s; } .aura-post-tag:hover { background: rgba(201, 168, 76, 0.12); color: #c9a84c; } /* ── Share Buttons ─────────────────────────────────────── */ .aura-post-share { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; align-items: center; gap: 16px; } .aura-post-share__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(240, 235, 224, 0.45); } .aura-post-share__buttons { display: flex; gap: 12px; } .aura-post-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(240, 235, 224, 0.2); background: transparent; color: rgba(240, 235, 224, 0.6); text-decoration: none; cursor: pointer; transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; } .aura-post-share__btn:hover, .aura-post-share__btn:focus-visible { border-color: #c9a84c; color: #c9a84c; background: rgba(201, 168, 76, 0.08); } .aura-post-share__btn svg { flex-shrink: 0; } /* ── Post Navigation ───────────────────────────────────── */ .aura-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .aura-post-nav__link { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border: 1px solid rgba(240, 235, 224, 0.1); border-radius: 8px; text-decoration: none; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .aura-post-nav__link:hover { border-color: rgba(201, 168, 76, 0.35); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .aura-post-nav__next { text-align: right; } .aura-post-nav__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240, 235, 224, 0.4); } .aura-post-nav__title { font-size: 0.95rem; font-weight: 500; color: rgba(240, 235, 224, 0.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } .aura-post-nav__link:hover .aura-post-nav__title { color: #c9a84c; } @media (max-width: 768px) { .aura-post-nav { grid-template-columns: 1fr; gap: 12px; } .aura-post-nav__next { text-align: left; } .aura-post-share__btn { width: 36px; height: 36px; } } /* ── Related Posts ───────────────────────────────────────── */ .aura-related-posts { margin-top: 60px; padding-top: 48px; border-top: 1px solid rgba(201, 168, 76, 0.2); } .aura-related-posts__heading { font-size: 1.1rem; font-weight: 600; color: #f0ebe0; letter-spacing: 0.04em; margin: 0 0 28px; } .aura-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .aura-related-card { background: #161616; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; overflow: hidden; transition: border-color 0.2s; } .aura-related-card:hover { border-color: rgba(201, 168, 76, 0.3); } .aura-related-card__img-link { display: block; } .aura-related-card__img-wrap { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #1e1e1e; } .aura-related-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .aura-related-card:hover .aura-related-card__img { transform: scale(1.04); } .aura-related-card__img-placeholder { width: 100%; height: 100%; background: #1e1e1e; } .aura-related-card__body { padding: 16px; } .aura-related-card__title { font-size: 0.9rem; font-weight: 600; color: #f0ebe0; margin: 6px 0 10px; line-height: 1.4; } .aura-related-card__title a { color: inherit; text-decoration: none; } .aura-related-card__title a:hover { color: #c9a84c; } /* ── Post: Shop CTA ──────────────────────────────────────── */ .aura-post-shop-cta { margin-top: 64px; background: linear-gradient(135deg, #1a1507, #0d0d0d); border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 8px; padding: 40px 32px; text-align: center; } .aura-post-shop-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; } .aura-post-shop-cta__text { color: rgba(240, 235, 224, 0.72); font-size: 1rem; margin: 0; } /* ── Responsive — Tablet (≤1024px) ──────────────────────── */ @media (max-width: 1024px) { .aura-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .aura-related-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Responsive — Mobile (≤640px) ───────────────────────── */ @media (max-width: 640px) { .aura-blog-archive__header { padding: 60px 20px 40px; } .aura-blog-archive__container { padding: 40px 20px 60px; } .aura-blog-grid { grid-template-columns: 1fr; gap: 20px; } .aura-related-grid { grid-template-columns: 1fr; } .aura-post-container { padding: 40px 20px 60px; } .aura-post-hero__img { height: 280px; } .aura-blog-archive__cta-inner { flex-direction: column; text-align: center; } .aura-blog-archive__cats-inner { padding-bottom: 4px; } } /* ========================================================================== */ /* Wave 2 — stacked gallery */ /* ========================================================================== */ .aura-product-gallery--stacked { display: flex; flex-direction: column; gap: var(--space-md); } .aura-product-gallery--stacked img, .aura-product-gallery--stacked .aura-gallery-img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); } /* ========================================================================== */ /* Phase 2 — Feature Additions */ /* ========================================================================== */ /* --- Wishlist icon in header --- */ .wishlist-icon { display: flex; align-items: center; position: relative; color: var(--color-heading); transition: color var(--transition-fast); } .wishlist-icon:hover { color: var(--color-gold); } .wishlist-count { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -7px; right: -8px; width: 16px; height: 16px; background-color: var(--color-gold); color: #fff; font-size: 0.625rem; font-weight: 700; border-radius: var(--radius-full); line-height: 1; font-variant-numeric: tabular-nums; } .wishlist-count:empty { display: none; } /* --- Quick Actions Row (Buy Now + GPay side by side) --- */ .aura-quick-actions-row { display: flex; gap: 10px; margin-top: 10px; margin-bottom: 12px; } .aura-quick-actions-row > * { flex: 1; min-width: 0; } .aura-quick-actions-row .aura-payment-request-button { margin-bottom: 0; } @media (max-width: 480px) { .aura-quick-actions-row { flex-direction: column; } } /* --- Buy Now button on product page --- */ .aura-buy-now-btn { display: block; width: 100%; padding: 14px 24px; margin-top: 0; font-family: var(--font-primary); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gold); background: transparent; border: 2px solid var(--color-gold); border-radius: var(--radius-md); cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .aura-buy-now-btn:hover { background: var(--color-gold); color: #fff; } .aura-buy-now-btn.is-loading { opacity: 0.6; pointer-events: none; } /* --- Share button on product page --- */ .aura-share-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; padding: 8px 0; font-family: var(--font-primary); font-size: 0.8125rem; font-weight: 500; color: var(--color-body-text); background: none; border: none; cursor: pointer; transition: color 0.2s ease; } .aura-share-btn:hover { color: var(--color-gold); } /* --- Waitlist Form (sold-out products) --- */ .aura-waitlist-form { margin-top: 20px; padding: 24px; background: #1a1a1a; border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 12px; } .aura-waitlist-form__label { margin: 0 0 16px; font-family: var(--font-primary); font-size: 0.875rem; line-height: 1.6; color: rgba(240, 235, 224, 0.75); } .aura-waitlist-form__row { display: flex; gap: 10px; } .aura-waitlist-form__input { flex: 1; padding: 12px 16px; font-family: var(--font-primary); font-size: 0.9375rem; color: #f0ebe0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .aura-waitlist-form__input::placeholder { color: rgba(240, 235, 224, 0.4); } .aura-waitlist-form__input:focus { border-color: var(--color-gold, #c9a84c); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15); } .aura-waitlist-form__btn { flex-shrink: 0; padding: 12px 24px; font-family: var(--font-primary); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.03em; color: #1a1a1a; background: var(--color-gold, #c9a84c); border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; } .aura-waitlist-form__btn:hover { background: var(--color-gold-dark, #b0922e); } .aura-waitlist-form__btn:active { transform: scale(0.97); } .aura-waitlist-form__btn:disabled { opacity: 0.6; cursor: not-allowed; } .aura-waitlist-message { margin-top: 12px; font-family: var(--font-primary); font-size: 0.8125rem; line-height: 1.5; } .aura-waitlist-message.success { color: var(--color-gold, #c9a84c); } .aura-waitlist-message.error { color: #c0392b; } @media (max-width: 480px) { .aura-waitlist-form { padding: 20px 16px; } .aura-waitlist-form__row { flex-direction: column; } .aura-waitlist-form__btn { width: 100%; padding: 14px 24px; } } /* --- Google Pay placeholder button (Phase 6) --- */ .aura-gpay-placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 12px; background: #000; border: none; border-radius: var(--radius-md); cursor: default; opacity: 0.55; transition: opacity 0.2s ease; } .aura-gpay-placeholder svg { height: 22px; width: auto; } .aura-gpay-placeholder.is-active { opacity: 1; cursor: pointer; } /* --- Phase 3: Cart drawer remove button fix --- */ button.acd-item__remove { background: none; border: none; font-size: 1.25rem; color: var(--color-body-text, #6a6353); cursor: pointer; padding: 4px 8px; line-height: 1; transition: color 0.2s ease; flex-shrink: 0; } button.acd-item__remove:hover { color: #c0392b; } .acd-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; gap: 16px; } /* ========================================================================== */ /* Phase 4 — Blog Hero Post */ /* ========================================================================== */ .aura-blog-hero { margin-bottom: 40px; border-radius: var(--radius-lg, 12px); overflow: hidden; } .aura-blog-hero__link { display: block; position: relative; text-decoration: none; color: inherit; } .aura-blog-hero__img-wrap { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: #1a1a1a; } .aura-blog-hero__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .aura-blog-hero__link:hover .aura-blog-hero__img { transform: scale(1.03); } .aura-blog-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); } .aura-blog-hero__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 36px; color: #fff; } .aura-blog-hero__cat { display: inline-block; padding: 4px 12px; background: var(--color-gold, #c9a84c); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 3px; margin-bottom: 12px; } .aura-blog-hero__title { font-size: 1.75rem; font-weight: 700; line-height: 1.25; color: #fff; margin: 0 0 10px; } .aura-blog-hero__excerpt { font-size: 0.9375rem; color: rgba(255,255,255,0.85); margin: 0 0 10px; max-width: 600px; } .aura-blog-hero__meta { font-size: 0.8125rem; color: rgba(255,255,255,0.7); display: flex; gap: 8px; align-items: center; } @media (max-width: 767px) { .aura-blog-hero__img-wrap { aspect-ratio: 16 / 10; } .aura-blog-hero__title { font-size: 1.25rem; } .aura-blog-hero__content { padding: 20px; } .aura-blog-hero__excerpt { display: none; } } /* ============================================================ GOOGLE PAY PLACEHOLDER (item 11) Always renders — Stripe JS upgrades to real button when keys added ============================================================ */ /* Container always visible — becomes real button when Stripe mounts iframe */ #aura-payment-request-button, .aura-prc-side-card { position: relative; height: 48px; border-radius: 4px; overflow: hidden; background: #000; display: none; /* hidden until JS confirms Stripe wallet works */ } /* "G Pay" text placeholder via pseudo-element — sits behind Stripe's iframe */ #aura-payment-request-button::before, .aura-prc-side-card::before { content: ''; position: absolute; inset: 0; display: block; background: #000; color: #fff; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.04em; text-align: center; line-height: 48px; pointer-events: none; z-index: 0; } /* Stripe's iframe sits above the placeholder text */ #aura-payment-request-button iframe, .aura-prc-side-card iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; } /* Reduced opacity + no-pointer when Stripe is not yet configured */ #aura-payment-request-button.aura-gpay--no-key, .aura-prc-side-card.aura-gpay--no-key { opacity: 0.42; cursor: not-allowed; pointer-events: none; } /* ============================================================ WISHLIST PAGE (item 6) ============================================================ */ .aura-wishlist-page { padding: var(--space-xl, 48px) 0 var(--space-2xl, 80px); min-height: 60vh; } /* Header */ .aura-wishlist-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: var(--space-xl, 48px); border-bottom: 1px solid var(--color-border, #eeeeee); padding-bottom: var(--space-md, 16px); } .aura-wishlist-header__title { font-size: 1.75rem; font-weight: 600; color: var(--color-heading, #262626); margin: 0; } .aura-wishlist-header__count { font-size: 0.875rem; color: var(--color-body, #6a6353); margin: 0; } /* Actions bar */ .aura-wishlist-actions { display: flex; justify-content: flex-end; margin-bottom: var(--space-md, 16px); } .aura-wishlist-clear { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--color-border, #eeeeee); color: var(--color-body, #6a6353); font-size: 0.8125rem; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-sm, 4px); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); } .aura-wishlist-clear:hover { border-color: var(--color-heading, #262626); color: var(--color-heading, #262626); } /* Loading */ .aura-wishlist-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 0; color: var(--color-body, #6a6353); font-size: 0.9375rem; } .aura-wishlist-spinner { width: 36px; height: 36px; border: 2px solid var(--color-border, #eeeeee); border-top-color: var(--color-gold, #c9a84c); border-radius: 50%; animation: aura-spin 0.7s linear infinite; } @keyframes aura-spin { to { transform: rotate(360deg); } } /* Empty state */ .aura-wishlist-empty { text-align: center; padding: 80px 0; } .aura-wishlist-empty__icon { display: inline-block; color: var(--color-gold, #c9a84c); opacity: 0.35; margin-bottom: 24px; } .aura-wishlist-empty__title { font-size: 1.25rem; font-weight: 600; color: var(--color-heading, #262626); margin: 0 0 10px; } .aura-wishlist-empty__text { font-size: 0.9375rem; color: var(--color-body, #6a6353); margin: 0 0 28px; } .aura-wishlist-empty__cta { display: inline-flex; align-items: center; padding: 12px 32px; background: var(--color-gold, #c9a84c); color: #fff; font-size: 0.9375rem; font-weight: 600; border-radius: var(--radius-sm, 4px); text-decoration: none; transition: background var(--transition-fast); } .aura-wishlist-empty__cta:hover { background: var(--color-gold-dark, #b0922e); color: #fff; } /* Product grid */ .aura-wishlist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg, 24px); } /* Card */ .aura-wishlist-card { position: relative; background: #fff; border: 1px solid var(--color-border, #eeeeee); border-radius: var(--radius-md, 8px); overflow: hidden; transition: box-shadow var(--transition-fast); } .aura-wishlist-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .aura-wishlist-card__img-wrap { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface, #f9f6f2); } .aura-wishlist-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .aura-wishlist-card:hover .aura-wishlist-card__img-wrap img { transform: scale(1.04); } /* Remove button */ .aura-wishlist-card__remove { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; cursor: pointer; color: var(--color-body, #6a6353); transition: background var(--transition-fast), color var(--transition-fast); z-index: 2; padding: 0; } .aura-wishlist-card__remove:hover { background: #fff; color: #c0392b; } /* Card body */ .aura-wishlist-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; } .aura-wishlist-card__name { font-size: 0.875rem; font-weight: 600; color: var(--color-heading, #262626); text-decoration: none; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aura-wishlist-card__name:hover { color: var(--color-gold, #c9a84c); } .aura-wishlist-card__price { font-size: 0.9375rem; font-weight: 600; color: var(--color-gold, #c9a84c); margin: 0; } .aura-wishlist-card__atc { display: block; width: 100%; margin-top: 8px; padding: 10px 16px; background: var(--color-heading, #262626); color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: none; border-radius: var(--radius-sm, 4px); cursor: pointer; transition: background var(--transition-fast); } .aura-wishlist-card__atc:hover { background: var(--color-gold, #c9a84c); } .aura-wishlist-card__atc.is-added, .aura-wishlist-card__atc:disabled { background: var(--color-gold, #c9a84c); cursor: default; } /* Responsive */ @media (max-width: 1024px) { .aura-wishlist-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .aura-wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm, 12px); } .aura-wishlist-header__title { font-size: 1.375rem; } } @media (max-width: 440px) { .aura-wishlist-grid { grid-template-columns: 1fr; } } /* ============================================================ WAITLIST FORM — Sold-out product notification ============================================================ */ .aura-waitlist-form { background: #1a1a1a; border: 1px solid var(--color-gold, #c9a84c); border-radius: var(--radius-md, 8px); padding: 24px; margin: 16px 0 8px; } .aura-waitlist-form__label { font-size: 0.9375rem; color: rgba(240, 235, 224, 0.85); line-height: 1.5; margin: 0 0 16px; } .aura-waitlist-form__row { display: flex; gap: 10px; } .aura-waitlist-form__input { flex: 1; padding: 12px 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-sm, 4px); color: #fff; font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color var(--transition-fast); } .aura-waitlist-form__input::placeholder { color: rgba(255, 255, 255, 0.4); } .aura-waitlist-form__input:focus { border-color: var(--color-gold, #c9a84c); } .aura-waitlist-form__btn { padding: 12px 24px; background: var(--color-gold, #c9a84c); color: #fff; font-size: 0.875rem; font-weight: 600; font-family: inherit; letter-spacing: 0.04em; text-transform: uppercase; border: none; border-radius: var(--radius-sm, 4px); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast); } .aura-waitlist-form__btn:hover { background: var(--color-gold-dark, #b0922e); } .aura-waitlist-form__btn:disabled { opacity: 0.7; cursor: default; } .aura-waitlist-message { margin-top: 12px; font-size: 0.875rem; line-height: 1.4; } .aura-waitlist-message--success { color: var(--color-gold, #c9a84c); } .aura-waitlist-message--error { color: #e74c3c; } @media (max-width: 480px) { .aura-waitlist-form__row { flex-direction: column; } .aura-waitlist-form__btn { width: 100%; } } /* ============================================================ SAVE FOR LATER — Cart page ============================================================ */ /* "Save for Later" link on each cart item */ .aura-save-for-later { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; margin: 0; color: var(--color-body, #6a6353); font-size: 0.75rem; font-family: inherit; font-weight: 500; cursor: pointer; transition: color var(--transition-fast); position: absolute; bottom: 0; right: 0; } .aura-save-for-later:hover { color: var(--color-gold, #c9a84c); } .aura-save-for-later svg { flex-shrink: 0; } /* Ensure cart item is positioned for absolute child */ .aura-cart-item { position: relative; padding-bottom: 24px; } /* Saved for Later section */ .aura-saved-for-later { margin-top: var(--space-xl, 48px); padding-top: var(--space-lg, 24px); border-top: 1px solid var(--color-border, #eeeeee); } .aura-saved-for-later__title { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 600; color: var(--color-heading, #262626); margin: 0 0 var(--space-md, 16px); } .aura-saved-for-later__count { font-size: 0.875rem; font-weight: 400; color: var(--color-body, #6a6353); } /* Saved items grid */ .aura-saved-for-later__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md, 16px); } /* Saved card */ .aura-saved-card { background: #fff; border: 1px solid var(--color-border, #eeeeee); border-radius: var(--radius-md, 8px); overflow: hidden; transition: box-shadow var(--transition-fast); } .aura-saved-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } .aura-saved-card__img-wrap { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface, #f9f6f2); } .aura-saved-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .aura-saved-card:hover .aura-saved-card__img-wrap img { transform: scale(1.04); } .aura-saved-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; } .aura-saved-card__name { font-size: 0.8125rem; font-weight: 600; color: var(--color-heading, #262626); text-decoration: none; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aura-saved-card__name:hover { color: var(--color-gold, #c9a84c); } .aura-saved-card__price { font-size: 0.875rem; font-weight: 600; color: var(--color-gold, #c9a84c); margin: 2px 0 6px; } .aura-saved-card__actions { display: flex; align-items: center; gap: 8px; } .aura-saved-card__move { flex: 1; padding: 8px 12px; background: var(--color-heading, #262626); color: #fff; font-size: 0.75rem; font-weight: 600; font-family: inherit; letter-spacing: 0.04em; text-transform: uppercase; border: none; border-radius: var(--radius-sm, 4px); cursor: pointer; transition: background var(--transition-fast); } .aura-saved-card__move:hover { background: var(--color-gold, #c9a84c); } .aura-saved-card__move.is-out-of-stock, .aura-saved-card__move:disabled { background: var(--color-body, #6a6353); opacity: 0.5; cursor: not-allowed; } .aura-saved-card__remove { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: 1px solid var(--color-border, #eeeeee); border-radius: var(--radius-sm, 4px); color: var(--color-body, #6a6353); cursor: pointer; padding: 0; transition: border-color var(--transition-fast), color var(--transition-fast); } .aura-saved-card__remove:hover { border-color: #c0392b; color: #c0392b; } /* Responsive */ @media (max-width: 767px) { .aura-saved-for-later__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm, 12px); } } @media (max-width: 440px) { .aura-saved-for-later__grid { grid-template-columns: 1fr; } } /* ============================================================ SEARCH RESULTS PAGE ============================================================ */ .search-results-page { padding: var(--space-3xl, 4rem) 0; } .search-results-page .page-header { margin-bottom: var(--space-xl, 2rem); } .search-results-page .page-header h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--font-weight-semi, 600); color: var(--color-heading, #262626); } .search-results-page .search-query { color: var(--color-gold, #c9a84c); font-style: italic; } .search-results-page .no-results { text-align: center; padding: var(--space-3xl, 4rem) 0; } .search-results-page .no-results p { font-size: 1.125rem; color: var(--color-body-text, #6a6353); margin-bottom: var(--space-lg, 1.5rem); } /* ============================================================ WAVE 5 — ACCESSIBILITY: COLOR CONTRAST (WCAG AA) White-on-gold (#c9a84c) was 2.28:1 and gold-on-white 2.28:1 — both fail. Use dark ink on gold backgrounds (>7:1) and a darker gold "ink" for gold-coloured text on white (>4.5:1). Brand gold is unchanged for decorative fills/borders. (Wave 5 fix) ============================================================ */ :root { --color-on-gold: #1f1a08; /* text sitting ON a gold background */ --color-gold-ink: #6e520f; /* gold-toned text on a white background */ } /* Text on gold backgrounds -> dark ink */ .announcement-bar, .announcement-bar a, .announcement-bar__mobile, .announcement-bar__desktop { color: var(--color-on-gold); } .btn--primary, .btn--primary:hover, .btn--primary:focus-visible, .btn--outline:hover, .btn--outline:focus-visible, .btn--gold, .btn--gold:hover, .single_add_to_cart_button.button.alt, button.single_add_to_cart_button, .product-side-card__atc, .aura-buy-now-btn:hover { color: var(--color-on-gold); } /* Gold-coloured text on white -> darker gold ink (passes AA + 3:1 vs text) */ .product-cat, .product-cat a, .product_meta a, .product_meta .posted_in a, .product_meta .tagged_as a, .aura-buy-now-btn, ins .woocommerce-Price-amount, .price ins .woocommerce-Price-amount { color: var(--color-gold-ink); } .aura-buy-now-btn { border-color: var(--color-gold-ink); } /* link-in-text-block: meta category links must be distinguishable from the surrounding body text by more than colour -> underline. (Wave 5 fix) */ .product_meta a { text-decoration: underline; text-underline-offset: 2px; } /* Dark-on-dark price bug: .woocommerce-Price-amount forces #262626, which is invisible on the dark (#1a1a1a) sticky side card. Restore white. (Wave 5 fix) */ .product-side-card__price .woocommerce-Price-amount, .product-side-card__price .price, .product-side-card__price ins { color: #fff; } .product-side-card__price del .woocommerce-Price-amount { color: rgba(255,255,255,0.55); } /* ==================================================================== AURA HEADER v5 — clean rebuild (Wave 6, 2026-05-26) Namespace `.ahdr-*`. Overrides legacy `.site-header / .main-nav` rules that were fighting each other and producing scattered nav items. ==================================================================== */ /* Reset legacy styles that bleed in */ header.ahdr, header.ahdr * { box-sizing: border-box; } /* Force-disable old broken header rules — they had scattered nav items */ .site-header.scrolled, .site-header .main-nav .container, .site-header .main-nav .container > .nav-menu, .site-header .nav-menu, .site-header .nav-utils { all: revert; } /* === Header shell === */ .ahdr { position: sticky; top: 0; left: 0; right: 0; z-index: 1000; background: #ffffff; border-bottom: 1px solid #eee5d8; } /* === Gold announcement strip === */ .ahdr-strip { background: var(--color-gold, #c9a64a); color: #fff; text-align: center; font-size: 12px; letter-spacing: 0.08em; height: 36px; line-height: 36px; padding: 0 16px; overflow: hidden; white-space: nowrap; } .ahdr-strip-mobile { display: none; } @media (max-width: 768px) { .ahdr-strip { font-size: 11px; height: 32px; line-height: 32px; letter-spacing: 0.05em; } .ahdr-strip-desktop { display: none; } .ahdr-strip-mobile { display: inline; } } /* === Main bar — three CSS Grid columns, perfectly even === */ .ahdr-bar { display: grid; grid-template-columns: 220px 1fr 220px; align-items: center; gap: 24px; height: 72px; padding: 0 32px; max-width: 1440px; margin: 0 auto; } @media (max-width: 1024px) { .ahdr-bar { grid-template-columns: auto 1fr auto; padding: 0 16px; height: 64px; gap: 16px; } } /* === Logo column (left) === */ .ahdr-logo { display: flex; align-items: center; text-decoration: none; color: #1a1a1a; min-width: 0; } .ahdr-logo-img, .ahdr-logo img { height: 44px !important; width: auto !important; max-width: 200px !important; object-fit: contain; object-position: left center; } .ahdr-logo-text { font-family: var(--font-serif, Georgia, serif); font-weight: 600; font-size: 20px; letter-spacing: 0.05em; text-transform: uppercase; color: #1a1a1a; } /* === Menu (centered) === */ .ahdr-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 36px; height: 100%; } .ahdr-menu li { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; align-items: center; } .ahdr-menu li a { display: inline-flex; align-items: center; height: 100%; color: #1a1a1a; text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.18s ease; white-space: nowrap; } .ahdr-menu li a:hover, .ahdr-menu li.current-menu-item > a, .ahdr-menu li.current-menu-parent > a { color: var(--color-gold, #c9a64a); } @media (max-width: 1024px) { .ahdr-menu { display: none; } } /* === Utilities (right) === */ .ahdr-utils { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .ahdr-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 0; border-radius: 999px; color: #1a1a1a; cursor: pointer; padding: 0; position: relative; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; } .ahdr-icon-btn:hover { background: #f6efe1; color: var(--color-gold, #c9a64a); } .ahdr-icon-btn svg { display: block; } .ahdr-burger { display: none; } @media (max-width: 1024px) { .ahdr-burger { display: inline-flex; } } /* Cart / wishlist count badge */ .ahdr-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--color-gold, #c9a64a); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border-radius: 999px; pointer-events: none; } .ahdr-badge[hidden], .ahdr-badge:not(.is-on) { display: none; } /* Belt-and-suspenders: kill any duplicate / leftover headers from old plugins */ .elementor-location-header, header.jupiterx-header, .jupiterx-main-header, .entry-header.elementor-element { display: none !important; } /* Stop the hero/page content from bleeding under header (no negative margins) */ #main-content { margin-top: 0 !important; } /* === Footer logo — make it the same wordmark as header, tinted white === */ .footer-logo { display: inline-flex; align-items: center; text-decoration: none; } .footer-logo-img, .footer-logo .custom-logo, .footer-logo img { height: 56px !important; width: auto !important; max-width: 220px !important; object-fit: contain; /* If the asset is already white we don't need a filter; if it's the dark wordmark we invert. Keep this defensive — the brightness:0 makes the image fully black, then invert(1) makes it fully white. */ filter: brightness(0) invert(1); }