/* ═══════════════════════════════════════════════════════════════════════════ AURELIELLE PRODUCT PAGE — MASTER STYLESHEET v3.5.3 Modern DTC patterns: glassmorphism, container queries, scroll-reveals, CSS custom-property theme tokens, smooth GPU-only animations. v3.5.3 — gallery fix: .woocommerce-product-gallery__wrapper now explicitly set to display:flex + flex-wrap:nowrap with each slide at flex:0 0 100%. The WC 8+ wrapper class no longer matches flexslider.css's legacy `.flex-viewport .slides { display:flex }` rule, so without this override every slide stacked vertically, the wrapper grew to ~5x the viewport height, and clicking a thumbnail visually did nothing (the wrapper was translated horizontally but the stack was already off-screen to the left). Also: bullet-proof against the user-reported "ERR_BLOCKED_BY_CLIENT" console errors caused by ad blockers; font now self-hosted. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Design Tokens ────────────────────────────────────────────────────── */ :root { --gold: #C9A96E; --gold-light: #E8D5A8; --gold-dark: #A67C52; --ink: #1A1A1A; --ink-2: #2A2A2A; --bg: #FBF9F5; --bg-warm: #FAF7F0; --bg-cream: #FFFBF0; --bg-card: #FFFFFF; --line: #EDEAE3; --line-2: #F0EDE6; --muted: #888; --muted-2: #666; --danger: #D64545; --success: #2D6A4F; --star: #F5A623; --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --shadow: 0 6px 22px rgba(0,0,0,0.06); --shadow-lg: 0 16px 40px rgba(0,0,0,0.10); --shadow-gold: 0 10px 26px rgba(201,169,110,0.35); --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --max-w: 1280px; --content-w: 1100px; --summary-w: 560px; } /* ─── Page container ────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .aur-product { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; color: var(--ink); -webkit-font-smoothing: antialiased; } /* Hide native WooCommerce noise */ .aur-product .onsale, .aur-product span.onsale { display: none !important; } .woocommerce-breadcrumb { display: none !important; } .aur-product .woocommerce-tabs { display: none !important; } .aur-product .product_meta { display: none !important; } /* When the bundle upsell is active, hide WC's redundant quantity input — the bundle radios already set the qty via JS. */ .aur-product-top:has(.aur-upsell-selector) .aur-summary-col .quantity, .aur-product-top:has(.aur-upsell-selector) form.cart .quantity { display: none !important; } /* Make the Add-to-Cart button take full width when bundle is active so the long "Add 2 to Cart — $106.20" label never clips. */ .aur-product-top:has(.aur-upsell-selector) form.cart { gap: 8px; } .aur-product-top:has(.aur-upsell-selector) form.cart .single_add_to_cart_button { flex: 1 1 100%; min-width: 0; width: 100%; white-space: normal; text-align: center; font-size: 14px !important; line-height: 1.3; padding: 16px 18px !important; } /* Override Kadence parent-theme vertical padding that creates a giant empty space above the product area. */ .aur-product { margin-top: 0 !important; padding-top: 0 !important; } .single-product .entry-content-wrap, .single-product .content-container { padding-top: 16px !important; } /* Full-width page override for Kadence wrapper */ .single-product .content-area, .single-product #primary, .single-product .site-main, .single-product .entry-content { max-width: 100% !important; width: 100% !important; } /* ═══════════════════════════════════════════════════════════════════════ ANNOUNCEMENT MARQUEE STRIP ═══════════════════════════════════════════════════════════════════════ */ .aur-ann-strip { background: linear-gradient(90deg, var(--ink), var(--ink-2)); color: #fff; border-radius: var(--radius); margin: 16px 0 0; padding: 10px 0; overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .aur-ann-track { display: flex; list-style: none; margin: 0; padding: 0; gap: 56px; white-space: nowrap; animation: aur-marquee 32s linear infinite; will-change: transform; } .aur-ann-track:hover { animation-play-state: paused; } .aur-ann-item { font-size: 13px; font-weight: 500; letter-spacing: 0.2px; flex-shrink: 0; } @keyframes aur-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ═══════════════════════════════════════════════════════════════════════ PRODUCT TOP — two-column layout (gallery + summary) ═══════════════════════════════════════════════════════════════════════ */ .aur-product-top { display: grid; /* Gallery needs at least 380px to show thumbnails; summary needs at least 480px to fit the bundle radios without collapsing text. */ grid-template-columns: minmax(380px, 1.1fr) minmax(480px, 1fr); gap: 48px; margin: 0 auto; align-items: start; padding-top: 8px; } /* Only the gallery needs min-width: 0 to let thumbnails shrink. The summary column MUST NOT have min-width:0, otherwise the grid's minmax(480px, 1fr) gets overridden and the column collapses to ~150px. */ .aur-gallery-col { min-width: 0; } @media (max-width: 980px) { .aur-product-top { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 18px; } } /* ═══════════════════════════════════════════════════════════════════════ GALLERY — enhance WooCommerce native (never replace) ═══════════════════════════════════════════════════════════════════════ */ .aur-gallery-col .woocommerce-product-gallery { border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 90px; background: var(--bg-card); box-shadow: var(--shadow); } .aur-gallery-col .woocommerce-product-gallery__wrapper img { border-radius: var(--radius-lg); width: 100%; height: auto; display: block; transition: transform 0.6s var(--ease); transform-origin: center center; } /* Hover scale: each ancestor of the now has overflow:hidden so the 3% scaled visual never bleeds past the slide's right edge. Before this fix the link wrapper had overflow:visible which let the 1.03x visual spill out the right side and show a sliver of the next slide — exactly the bug the user reported. */ .aur-gallery-col .woocommerce-product-gallery__wrapper:hover img { transform: scale(1.03); } .aur-gallery-col .woocommerce-product-gallery__image, .aur-gallery-col .woocommerce-product-gallery__image a { overflow: hidden !important; display: block !important; } .aur-gallery-col .flex-control-thumbs { display: flex !important; gap: 10px; margin-top: 14px; padding: 2px; overflow-x: auto; scrollbar-width: none; } .aur-gallery-col .flex-control-thumbs::-webkit-scrollbar { display: none; } .aur-gallery-col .flex-control-thumbs li { flex: 0 0 76px; height: 76px; border-radius: 12px; overflow: hidden; position: relative; border: 2px solid var(--line); opacity: 0.55; cursor: pointer; transition: all 0.3s var(--ease); background: #fff; } .aur-gallery-col .flex-control-thumbs li img { width: 100%; height: 100%; object-fit: cover; } .aur-gallery-col .flex-control-thumbs li.flex-active, .aur-gallery-col .flex-control-thumbs li:hover { border-color: var(--gold); opacity: 1; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(201,169,110,0.3); } @media (max-width: 980px) { .aur-gallery-col .woocommerce-product-gallery { position: static; } .aur-gallery-col .flex-control-thumbs li { flex: 0 0 58px; height: 58px; } } /* ═══════════════════════════════════════════════════════════════════════ SUMMARY COLUMN — stats, title, price, sale, ATC, urgency, etc. ═══════════════════════════════════════════════════════════════════════ */ /* ── Stats row ─────────────────────────────────────────────────────────── */ .aur-stats-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 13px; color: var(--muted-2); margin-bottom: 8px; padding: 14px 18px; background: linear-gradient(135deg, #FFFBF0, #FFF6E1); border: 1px solid #F0E6CC; border-radius: var(--radius); position: relative; z-index: 5; } /* Show the stats row on every viewport. Earlier revisions hid it on mobile because it overlapped the gallery thumbnails — the v7 fix (flex column on .aur-gallery-col + sticky disabled + thumbs hidden on ≤380px) removed that overlap, so the row is safe to keep. */ .aur-stat { display: inline-flex; align-items: center; gap: 6px; padding-right: 16px; border-right: 1px solid rgba(0,0,0,0.06); } .aur-stat:last-child { padding-right: 0; border-right: none; } .aur-stat strong { color: var(--ink); font-weight: 700; } .aur-stat-rating .aur-stat-stars { color: var(--star); letter-spacing: 1px; } .aur-stat-meta { color: var(--muted); } .aur-stat-icon { font-size: 14px; } /* ── Title + wishlist heart row ────────────────────────────────────────── */ .aur-title-row { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; margin-top: 14px; } .aur-summary-col .product_title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; color: var(--ink); line-height: 1.18; margin: 0; letter-spacing: -0.4px; word-wrap: break-word; min-width: 0; flex: 1 1 auto; } .aur-wish-btn { flex: 0 0 auto; height: 44px; padding: 0 14px 0 12px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: all 0.3s var(--ease-pop); font-size: 13px; font-weight: 600; font-family: inherit; white-space: nowrap; } .aur-wish-btn:hover { border-color: #ff6b8a; color: #ff6b8a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,107,138,0.18); } .aur-wish-btn.is-saved { border-color: #ff6b8a; color: #ff6b8a; background: #fff0f3; } .aur-wish-btn.is-saved svg path { fill: #ff6b8a; } .aur-wish-btn svg { display: block; flex: 0 0 auto; } .aur-wish-btn .aur-wish-label { letter-spacing: 0.01em; } /* Mobile: shrink to icon-only to save room */ @media (max-width: 640px) { .aur-wish-btn { width: 44px; padding: 0; } .aur-wish-btn .aur-wish-label { display: none; } } /* ── Price ─────────────────────────────────────────────────────────────── */ .aur-summary-col .price { font-size: 28px; font-weight: 700; color: var(--ink); display: block; margin: 8px 0 4px; } .aur-summary-col .price del { font-size: 17px; color: var(--muted); font-weight: 400; margin-right: 8px; } .aur-summary-col .price ins { color: var(--danger); text-decoration: none; font-weight: 700; } /* ── Add to Cart form (grid bug fixed: min-width: 0) ───────────────────── */ .aur-summary-col form.cart { display: flex; align-items: stretch; gap: 12px; margin: 18px 0 4px; flex-wrap: wrap; width: 100%; } .aur-summary-col .quantity { flex: 0 0 auto; margin: 0 !important; } .aur-summary-col .quantity .qty { border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 0 14px; width: 78px; height: 100%; font-size: 15px; min-height: 54px; font-family: inherit; color: var(--ink); background: #fff; } .aur-summary-col .single_add_to_cart_button { flex: 1 1 200px; min-width: 0; background: var(--ink) !important; color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.5px; text-transform: uppercase; padding: 16px 28px !important; transition: all 0.35s var(--ease-pop) !important; position: relative; overflow: hidden; cursor: pointer; font-family: inherit !important; } .aur-summary-col .single_add_to_cart_button:hover { background: var(--gold) !important; transform: translateY(-2px); box-shadow: var(--shadow-gold); } .aur-summary-col .single_add_to_cart_button:active { transform: translateY(0); } .aur-summary-col .single_add_to_cart_button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); animation: aurShimmer 3s ease-in-out infinite; } @keyframes aurShimmer { 0% { left: -100%; } 35% { left: 100%; } 100% { left: 100%; } } /* ── Seasonal Sale Banner ─────────────────────────────────────────────── */ .aur-sale-banner { border-radius: var(--radius); padding: 18px 22px; margin: 14px 0; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow); } .aur-sale-shine { position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-20deg); animation: aurSaleShine 4s ease-in-out infinite; } @keyframes aurSaleShine { 0% { left: -75%; } 50%, 100% { left: 150%; } } .aur-sale-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; z-index: 1; } .aur-sale-tag { font-size: 11px; letter-spacing: 2px; opacity: 0.85; margin-bottom: 4px; text-transform: uppercase; } .aur-sale-pct { font-size: 22px; font-weight: 700; line-height: 1.1; } .aur-sale-sub { font-size: 12px; opacity: 0.8; margin-top: 4px; } .aur-sale-save { background: rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px; padding: 12px 18px; text-align: center; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.18); } .aur-sale-save-label { font-size: 11px; opacity: 0.85; letter-spacing: 1px; text-transform: uppercase; } .aur-sale-save-amt { font-size: 22px; font-weight: 700; } @media (max-width: 560px) { .aur-sale-row { flex-direction: column; align-items: flex-start; } .aur-sale-save { align-self: flex-start; } } /* ── Bundle Selector — vertical stacked radio cards ───────────────────── */ .aur-upsell-selector { margin: 20px 0 6px; } .aur-upsell-pack-head { font-size: 13px; font-weight: 600; color: var(--muted-2); letter-spacing: 0.3px; margin-bottom: 10px; } .aur-upsell-cards { display: flex; flex-direction: column; gap: 10px; align-items: stretch; /* ensure cards fill the column even when content is small */ } .aur-upsell-card { position: relative; display: flex; align-items: center; gap: 16px; cursor: pointer; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 18px 20px; width: 100%; box-sizing: border-box; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease); min-width: 0; } .aur-upsell-card:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); } .aur-upsell-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .aur-upsell-card { /* give the radio a proper centerline inside the row */ align-items: center; } .aur-upsell-radio { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C8C8C8; background: #fff; position: relative; flex-shrink: 0; transition: all 0.2s var(--ease); margin: 0; /* perfect circle, properly centered */ box-sizing: border-box; } .aur-upsell-card--selected, .aur-upsell-card:has(input[type="radio"]:checked) { border-color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .aur-upsell-card--selected, .aur-upsell-card:has(input[type="radio"]:checked), .aur-upsell-card.is-selected { border-color: var(--gold) !important; box-shadow: 0 0 0 2px var(--gold-light), 0 4px 16px rgba(201,169,110,0.25) !important; } .aur-upsell-card--selected .aur-upsell-radio, .aur-upsell-card:has(input[type="radio"]:checked) .aur-upsell-radio, .aur-upsell-card.is-selected .aur-upsell-radio { border-color: var(--gold) !important; background: var(--gold) !important; } /* The white dot inside the selected radio — overrides EVERY pseudo-element that might come from theme, Kadence, or WooCommerce. */ .aur-upsell-card--selected .aur-upsell-radio::after, .aur-upsell-card:has(input[type="radio"]:checked) .aur-upsell-radio::after, .aur-upsell-card.is-selected .aur-upsell-radio::after { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #fff !important; transform: translate(-50%, -50%) !important; opacity: 1 !important; } /* HARD GUARANTEE for the selected card border + shadow — high specificity so it always wins even if Kadence / theme / woocommerce drop in rules. */ body .aur-product .aur-upsell-selector .aur-upsell-card.is-selected, body .aur-product .aur-upsell-selector .aur-upsell-card:has(input[type="radio"]:checked), body .aur-product .aur-upsell-selector .aur-upsell-card.aur-upsell-card--selected { border-color: #C9A96E !important; border-width: 2px !important; box-shadow: 0 0 0 1px #C9A96E, 0 8px 24px rgba(201, 169, 110, 0.30) !important; transform: translateY(-2px) !important; } .aur-upsell-card--selected .aur-upsell-radio::after, .aur-upsell-card:has(input[type="radio"]:checked) .aur-upsell-radio::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); } /* When bundle is active, hide the redundant WC quantity input — the bundle radios already control the qty via JS. */ .aur-product-top:has(.aur-upsell-selector) .aur-summary-col .quantity, .aur-product-top:has(.aur-upsell-selector) form.cart .quantity { display: none !important; } /* When bundle is active, the WC ATC button takes full width so the long "Add 2 to Cart — $106.20" label never clips. */ .aur-product-top:has(.aur-upsell-selector) form.cart { gap: 8px; } .aur-product-top:has(.aur-upsell-selector) form.cart .single_add_to_cart_button { flex: 1 1 100%; min-width: 0; width: 100%; white-space: normal; text-align: center; font-size: 14px !important; line-height: 1.3; padding: 16px 18px !important; } .aur-upsell-card--best { border-color: var(--line); } .aur-upsell-card--best.aur-upsell-card--selected, .aur-upsell-card--best:has(input[type="radio"]:checked) { border-color: var(--gold); box-shadow: 0 2px 12px rgba(201,169,110,0.25); } .aur-upsell-card-body { flex: 1 1 auto; min-width: 0; } .aur-upsell-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .aur-upsell-card-text { min-width: 0; flex: 1 1 0%; } .aur-upsell-qty { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; } .aur-upsell-sub { font-size: 12px; color: var(--muted-2); margin-top: 2px; line-height: 1.4; } .aur-upsell-card-pricing { text-align: right; flex: 0 0 auto; flex-shrink: 0; min-width: 90px; } .aur-upsell-price { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.15; letter-spacing: -0.2px; } .aur-upsell-was { font-size: 12px; color: #B8B8B8; text-decoration: line-through; line-height: 1.2; margin-top: 2px; } .aur-upsell-save { font-size: 11px; font-weight: 600; color: var(--success); margin-top: 2px; line-height: 1.2; } .aur-upsell-feats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted-2); } .aur-upsell-feat { display: inline-flex; align-items: center; gap: 4px; } .aur-upsell-feat::before { content: '✓'; } .aur-upsell-card--best .aur-upsell-feat::before { content: '✓'; color: var(--gold); font-weight: 700; } .aur-upsell-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.18); } .aur-upsell-card--best .aur-upsell-badge { background: var(--gold); box-shadow: 0 4px 14px rgba(201,169,110,0.45); } /* ── Bundle Selector v2 (premium DTC design) ──────────────────────────── */ .aur-upsell-selector--v2 { margin: 24px 0 4px; } .aur-bundle-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 0 4px; } .aur-bundle-head-left { min-width: 0; flex: 1 1 auto; } .aur-bundle-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold); display: inline-block; margin-bottom: 4px; } .aur-bundle-headline { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.35; letter-spacing: -0.2px; } .aur-bundle-head-shipping { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--success); background: #EAF7EE; padding: 6px 10px; border-radius: 8px; white-space: nowrap; letter-spacing: 0.1px; } .aur-upsell-card-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .aur-upsell-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.2px; } .aur-bundle-tag-disc { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #8B6F3F; background: rgba(201,169,110,0.18); padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .aur-upsell-subtitle { font-size: 12px; color: var(--muted-2); margin-top: 3px; line-height: 1.4; } .aur-bundle-feat--ship { color: var(--success); font-weight: 600; } .aur-upsell-card--best { background: linear-gradient(180deg, #FFFCF3 0%, #FFFFFF 50%); } .aur-upsell-card--best.aur-upsell-card--selected, .aur-upsell-card--best:has(input[type="radio"]:checked) { background: linear-gradient(180deg, #FFF6E1 0%, #FFFFFF 60%); } @media (max-width: 480px) { .aur-bundle-section-head { flex-direction: column; align-items: flex-start; gap: 8px; } .aur-bundle-head-shipping { align-self: flex-start; } } /* ── Urgency Box ───────────────────────────────────────────────────────── */ .aur-urgency-box { background: linear-gradient(135deg, #FFFBF0, #FFF6E1); border: 1px solid #F0E6CC; border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; font-size: 14px; display: flex; flex-direction: column; gap: 9px; position: relative; overflow: hidden; } .aur-urgency-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(201,169,110,0.15), transparent 60%); pointer-events: none; } .aur-urgency-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #444; position: relative; z-index: 1; } .aur-urgency-ico { font-size: 16px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 6px; border: 1px solid #F0E6CC; flex-shrink: 0; } .aur-timer { color: var(--danger); font-family: "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; font-size: 15px; padding: 2px 8px; background: rgba(214,69,69,0.08); border-radius: 6px; } .aur-stock-count { color: var(--danger); font-weight: 700; } .aur-stock-bar { flex: 1 1 80px; height: 6px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden; min-width: 60px; max-width: 120px; margin-left: auto; } .aur-stock-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #F5A623, var(--danger)); border-radius: 3px; transition: width 0.6s var(--ease); } /* ── Trust badges + Shipping Bar ─────────────────────────────────────────── */ .aur-trust-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; } .aur-badge { font-size: 13px; color: var(--ink); background: var(--bg-warm); padding: 7px 13px 7px 7px; border-radius: 22px; border: 1px solid var(--line-2); transition: all 0.3s var(--ease-pop); display: inline-flex; align-items: center; gap: 7px; } .aur-badge-ico { font-size: 14px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; } .aur-badge:hover { background: var(--gold); color: #fff; transform: translateY(-2px); border-color: var(--gold); } .aur-ship-bar-wrap { margin: 14px 0 6px; } .aur-ship-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; } .aur-ship-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 4px; transition: width 0.9s var(--ease); } .aur-ship-text { font-size: 13px; color: var(--muted-2); margin-top: 8px; } .aur-ship-bar-wrap--free .aur-ship-text { color: var(--success); font-weight: 600; } /* ── Delivery estimate ─────────────────────────────────────────────────── */ .aur-delivery-estimate { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #F0FAF0, #E8F7EC); border: 1px solid #D4EDDA; border-radius: var(--radius); margin: 14px 0; font-size: 14px; color: var(--success); line-height: 1.4; } .aur-delivery-icon { font-size: 20px; flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; border: 1px solid #D4EDDA; margin-top: 1px; } .aur-delivery-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .aur-delivery-text strong { color: var(--ink); font-weight: 700; font-size: 14px; } .aur-delivery-sub { font-size: 12px; color: #5A9A7A; } /* ── Payment icons ─────────────────────────────────────────────────────── */ .aur-payment-icons { text-align: center; margin: 22px 0 6px; } .aur-payment-label { font-size: 11px; color: var(--muted); letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; } .aur-payment-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .aur-pay-badge { background: #fff; padding: 5px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 32px; border: 1px solid var(--line); transition: transform 0.3s var(--ease-pop); } .aur-pay-badge:hover { transform: translateY(-2px); } .aur-pay-badge svg { width: 100%; height: 100%; } /* ═══════════════════════════════════════════════════════════════════════ SECTION TITLES — eyebrow + title pattern (shared across all sections) ═══════════════════════════════════════════════════════════════════════ */ .aur-section-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); text-align: center; margin: 0 auto 8px; padding: 4px 12px; background: rgba(201,169,110,0.10); border-radius: 12px; } .aur-desc-section .aur-section-eyebrow, .aur-vid-section .aur-section-eyebrow, .aur-social-section .aur-section-eyebrow, .aur-reviews-section .aur-section-eyebrow, .aur-faq-section .aur-section-eyebrow, .aur-bundle-section .aur-section-eyebrow, .aur-why-section .aur-section-eyebrow, .aur-recent-section .aur-section-eyebrow { display: block; width: max-content; margin: 0 auto 8px; } .aur-section-title { font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; text-align: center; margin: 0 0 8px; color: var(--ink); position: relative; letter-spacing: -0.4px; line-height: 1.2; } /* Gold divider under section titles was removed — it read as an unwanted underline on headings like "Recently Viewed" and looked gimmicky next to the eyebrow text above it. Cleaner without it. */ .aur-section-title::after { display: none; } .aur-section-sub { text-align: center; color: var(--muted); font-size: 15px; margin: 0 auto 32px; max-width: 560px; line-height: 1.55; } /* ═══════════════════════════════════════════════════════════════════════ DESCRIPTION SECTION ═══════════════════════════════════════════════════════════════════════ */ .aur-desc-section { max-width: 780px; margin: 72px auto 0; padding: 0 24px; text-align: center; } .aur-desc-short { font-size: 16px; line-height: 1.7; color: #555; margin-top: 14px; } .aur-desc-content { font-size: 15px; line-height: 1.85; color: #444; text-align: left; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); } .aur-desc-content p { margin: 0 0 16px; } .aur-desc-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 6px; } .aur-desc-content ul, .aur-desc-content ol { padding-left: 1.4em; margin: 0 0 16px; list-style-position: outside; } .aur-desc-content ul { list-style: disc; } .aur-desc-content ol { list-style: decimal; } .aur-desc-content li { margin: 0 0 8px; line-height: 1.7; padding-left: 0.2em; } .aur-desc-content li::marker { color: var(--gold); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════ WHY-CHOOSE-US CARDS ═══════════════════════════════════════════════════════════════════════ */ .aur-why-section { max-width: var(--content-w); margin: 72px auto 0; padding: 0 24px; } .aur-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } @media (max-width: 820px) { .aur-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .aur-why-grid { grid-template-columns: 1fr; } } .aur-why-card { background: var(--tint, #FFFBF0); border-radius: var(--radius); padding: 22px 20px; text-align: left; border: 1px solid rgba(0,0,0,0.04); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); min-width: 0; } .aur-why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .aur-why-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; } .aur-why-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .aur-why-sub { font-size: 13px; color: var(--muted-2); line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════════ CAROUSEL — shared base (videos, recent, etc.) ═══════════════════════════════════════════════════════════════════════ */ .aur-carousel-wrap { position: relative; max-width: var(--max-w); margin: 72px auto 0; padding: 0 24px; } .aur-carousel-track-outer { position: relative; } .aur-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s var(--ease-pop); color: var(--ink); font-size: 22px; font-family: inherit; } .aur-carousel-nav:hover { background: var(--ink); color: #fff; transform: translateY(-50%) scale(1.1); } .aur-carousel-nav:disabled { opacity: 0.35; cursor: not-allowed; } .aur-carousel-nav.prev { left: -10px; } .aur-carousel-nav.next { right: -10px; } @media (max-width: 700px) { .aur-carousel-nav { display: none; } } .aur-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; } .aur-carousel-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all 0.3s var(--ease); } .aur-carousel-dots span.is-active { background: var(--gold); width: 22px; border-radius: 4px; } /* ── Video carousel ────────────────────────────────────────────────────── */ /* ═══ VIDEO CAROUSEL — Hybrid (desktop horizontal / mobile TikTok-style) ═══ */ .aur-vid-track { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; /* touch-action: pan-y lets the user keep scrolling the page vertically while swiping horizontally on the carousel — exactly the TikTok Reels gesture. Without this the browser tries to decide between horizontal and vertical on its own and usually picks wrong. */ touch-action: pan-y; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; padding: 4px 2px 14px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .aur-vid-track.aur-dragging { cursor: grabbing; scroll-snap-type: none; } .aur-vid-track::-webkit-scrollbar { display: none; } .aur-vid-card { flex: 0 0 250px; scroll-snap-align: center; border-radius: 18px; overflow: hidden; background: #0A0A0A; aspect-ratio: 9/16; position: relative; /* Multi-layer shadow gives the card real depth — like TikTok/IG reels. */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), outline-color 0.4s var(--ease); cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; isolation: isolate; } .aur-vid-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.12), 0 24px 48px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } /* Active card — gold gradient ring + warm glow. This is the signature TikTok-style active state: a 2px gradient border + soft outer halo. */ .aur-vid-card.is-active { outline: 2px solid transparent; background-image: linear-gradient(#0A0A0A, #0A0A0A), linear-gradient(135deg, #f5e6d3 0%, #c9a96e 35%, #8b6f3f 65%, #c9a96e 100%); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 20px rgba(201, 169, 110, 0.35), 0 20px 50px rgba(201, 169, 110, 0.25), 0 4px 14px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } .aur-vid-card video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; border-radius: 16px; /* Loading-state background. Shown while the video's src has been removed by our lazy-loader (distance > 1 from the active card), so the user sees a soft warm gradient instead of a black void. When the card becomes active the gradient fades behind the first frame of video. */ background: linear-gradient(135deg, #1a1a1a 0%, #2a2520 40%, #3d3328 70%, #c9a96e 100%), #0a0a0a; background-size: cover; } /* While the video has no src (unloaded state), show a subtle shimmer so the card reads as 'loading' rather than broken. This is also the no-poster fallback — without a real video poster, the warm gradient is the only thing in the frame. */ .aur-vid-card video:not([src]) { background-image: linear-gradient(120deg, rgba(26, 26, 26, 0.9) 0%, rgba(61, 51, 40, 0.9) 50%, rgba(26, 26, 26, 0.9) 100%), linear-gradient(135deg, #1a1a1a 0%, #c9a96e 100%); background-size: 200% 100%, cover; animation: aur-card-shimmer 2.4s linear infinite; } @keyframes aur-card-shimmer { 0% { background-position: 100% 0, 0 0; } 100% { background-position: -100% 0, 0 0; } } .aur-vid-card__counter { position: absolute; top: 12px; left: 12px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; z-index: 4; border: 1px solid rgba(255, 255, 255, 0.12); font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.08em; display: inline-flex; align-items: center; gap: 2px; } .aur-vid-card__counter .num { color: #fff; } .aur-vid-card__counter .sep { color: rgba(255, 255, 255, 0.5); margin: 0 1px; } .aur-vid-card__counter .total { color: rgba(255, 255, 255, 0.65); font-weight: 500; } /* Slim auto-advance progress bar across the very top of the card. Visually subtle (1.5px tall) — just enough to show time remaining. */ .aur-vid-card__progress { position: absolute; top: 6px; left: 6px; right: 6px; height: 2px; background: rgba(255, 255, 255, 0.18); border-radius: 999px; overflow: hidden; z-index: 4; opacity: 0; transition: opacity 0.3s ease; } .aur-vid-card.is-active .aur-vid-card__progress { opacity: 1; } .aur-vid-card__progress::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #ffffff, #f5e6d3); border-radius: 999px; transition: none; box-shadow: 0 0 4px rgba(255, 255, 255, 0.5); } .aur-vid-card.is-counting .aur-vid-card__progress::after { width: 100%; transition: width 5s linear; } /* Removed the LIVE badge per merchant feedback — these are pre-recorded customer videos, not a livestream. Replaced with a clean counter (1/5, 2/5 etc.) that sits in the same top-left spot. */ /* Glassmorphism playback controls — bottom-right action rail. Mute toggle (always-on for now, but the structure allows audio toggle later). */ .aur-vid-card__rail { position: absolute; right: 10px; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 5; pointer-events: auto; } .aur-vid-card__icon-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .aur-vid-card__icon-btn:hover { background: rgba(0, 0, 0, 0.7); transform: scale(1.08); } .aur-vid-card__icon-btn svg { width: 16px; height: 16px; } /* Center play indicator — ONLY visible when paused, never when playing. Click target is the whole card (handled in JS). */ .aur-vid-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #0A0A0A; display: flex; align-items: center; justify-content: center; z-index: 6; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.15); } .aur-vid-card.is-paused .aur-vid-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); } .aur-vid-card__play svg { width: 26px; height: 26px; margin-left: 4px; } /* Mobile: full-bleed TikTok-style carousel. Each card takes calc(100vw - 32px), and scroll-padding-inline: 50% on the track means scroll-snap-align: center ALWAYS centers the active card — first card snaps into the middle of the screen, and the last card snaps back into the middle before looping to first. */ @media (max-width: 767px) { .aur-vid-section .aur-carousel-track-outer { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; } .aur-vid-track { flex-direction: row; overflow-x: auto; overflow-y: hidden; height: auto; min-height: 0; max-height: none; /* x mandatory + scroll-padding-inline: 50% → first and last card both snap to the centre of the visible area. */ scroll-snap-type: x mandatory; scroll-padding-inline: 50%; gap: 0; padding: 4px 0 18px; cursor: grab; } .aur-vid-card { flex: 0 0 calc(100vw - 32px); max-width: 420px; width: calc(100vw - 32px); height: auto; aspect-ratio: 9/16; border-radius: 20px; scroll-snap-align: center; scroll-snap-stop: always; margin: 0 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 18px 48px rgba(0, 0, 0, 0.14); } .aur-vid-card:hover { transform: none; } .aur-vid-card video { border-radius: 18px; } .aur-vid-track.aur-dragging { cursor: grabbing; } .aur-vid-card__play { width: 64px; height: 64px; } .aur-vid-card__counter { top: 10px; left: 10px; font-size: 10px; } } /* UGC video auto-swipe progress bar */ .aur-vid-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(0,0,0,0.06); border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); overflow: hidden; pointer-events: none; } .aur-vid-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-light), var(--gold)); transition: none; } /* ── Social proof screenshot grid ───────────────────────────────────────── */ .aur-social-grid { display: grid; /* auto-fit, NOT auto-fill. auto-fill keeps empty tracks, so with only two screenshots this grid held four 291.5px columns and both cards sat left-aligned in the first two, leaving a gap to the right. auto-fit collapses the empty tracks and justify-content centres the rest, so the row stays centred at any card count. The 480px cap stops two cards stretching the full 1232px row, while still making them 64% wider than the old 290px - these are 1254px screenshots, so card width is what decides whether the text inside is readable. */ grid-template-columns: repeat(auto-fit, minmax(260px, 480px)); justify-content: center; gap: 22px; margin-top: 16px; } /* Phones: the section sits inside two nested 24px paddings (site container + carousel wrap), which left the card only 294px of a 390px viewport. Pull the section's own padding back so the screenshot gets the width it needs. */ @media (max-width: 600px) { .aur-social-section { padding-left: 8px; padding-right: 8px; } } .aur-social-card { border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); transition: all 0.4s var(--ease); border: 1px solid var(--line-2); transform: rotate(var(--rot, 0deg)); } .aur-social-card:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--shadow-lg); } .aur-social-card img { width: 100%; height: auto; display: block; } /* ═══════════════════════════════════════════════════════════════════════ REVIEWS — distribution chart + review cards ═══════════════════════════════════════════════════════════════════════ */ .aur-reviews-section { max-width: 860px; margin: 72px auto 0; padding: 0 24px; } .aur-reviews-summary { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; margin: 24px auto 32px; padding: 28px; background: linear-gradient(135deg, #FFFBF0, #FFF6E1); border: 1px solid #F0E6CC; border-radius: var(--radius-lg); } .aur-reviews-summary-score { text-align: center; min-width: 160px; } .aur-reviews-summary-num { font-size: 56px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -1.5px; } .aur-reviews-summary-stars { color: var(--star); font-size: 18px; letter-spacing: 2px; margin: 6px 0 4px; } .aur-reviews-summary-count { font-size: 13px; color: var(--muted); } .aur-reviews-distribution { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1 1 260px; max-width: 360px; } .aur-dist-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); } .aur-dist-label { width: 30px; color: var(--muted-2); font-weight: 600; } .aur-dist-bar { flex: 1; height: 8px; background: rgba(0,0,0,0.06); border-radius: 4px; overflow: hidden; } .aur-dist-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--star), #FFD580); border-radius: 4px; transition: width 1.2s var(--ease); } .aur-dist-pct { width: 40px; text-align: right; color: var(--muted-2); font-variant-numeric: tabular-nums; } .aur-reviews-list { display: flex; flex-direction: column; gap: 16px; } .aur-review-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: var(--radius); background: var(--bg-warm); border: 1px solid var(--line-2); transition: box-shadow 0.3s, transform 0.3s; min-width: 0; } .aur-review-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .aur-review-avatar { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); flex-shrink: 0; align-self: flex-start; background: var(--gold); } .aur-review-body { flex: 1; min-width: 0; } .aur-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .aur-review-name { font-weight: 700; font-size: 14px; color: var(--ink); } .aur-review-verified { font-size: 10.5px; color: var(--success); font-weight: 700; background: #EAF7EE; padding: 3px 9px; border-radius: 10px; letter-spacing: 0.2px; white-space: nowrap; } .aur-review-stars { color: var(--star); font-size: 13px; margin: 6px 0 8px; letter-spacing: 1.5px; } .aur-review-text { font-size: 14px; color: #444; line-height: 1.7; margin: 0; word-wrap: break-word; } .aur-review-images { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .aur-review-images img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; cursor: pointer; transition: transform 0.3s var(--ease-pop); border: 1px solid var(--line); } .aur-review-images img:hover { transform: scale(1.08); } .aur-review-date { font-size: 12px; color: var(--muted); margin: 10px 0 0; } /* ═══════════════════════════════════════════════════════════════════════ BUNDLE / FREQUENTLY BOUGHT TOGETHER ═══════════════════════════════════════════════════════════════════════ */ .aur-bundle-section { max-width: 1000px; margin: 72px auto 0; padding: 0 24px; } .aur-bundle-wrap { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin-top: 24px; padding: 28px; background: linear-gradient(135deg, #F0FAF0, #E8F7EC); border: 1px solid #D4EDDA; border-radius: var(--radius-lg); } @media (max-width: 760px) { .aur-bundle-wrap { grid-template-columns: 1fr; padding: 22px 18px; } } .aur-bundle-grid { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; } .aur-bundle-card { background: #fff; border-radius: var(--radius); padding: 12px; text-align: center; width: 130px; flex: 0 0 auto; min-width: 130px; border: 1px solid var(--line); transition: transform 0.3s var(--ease-pop), box-shadow 0.3s; } .aur-bundle-card--main { border: 2px solid var(--gold); position: relative; } .aur-bundle-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .aur-bundle-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 10px; } .aur-bundle-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 12px; letter-spacing: 0.5px; white-space: nowrap; } .aur-bundle-name { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 4px; line-height: 1.3; min-height: 2.6em; } .aur-bundle-price { font-size: 13px; font-weight: 700; color: var(--danger); } .aur-bundle-plus { font-size: 22px; font-weight: 700; color: var(--gold); flex-shrink: 0; } .aur-bundle-action { text-align: center; min-width: 220px; } .aur-bundle-total { font-size: 14px; color: var(--muted-2); margin-bottom: 12px; } .aur-bundle-total strong { color: var(--ink); font-size: 22px; font-weight: 700; margin-left: 4px; } .aur-bundle-btn { background: var(--ink); color: #fff; border: none; border-radius: var(--radius-sm); padding: 14px 28px; font-size: 14px; font-weight: 600; letter-spacing: 0.4px; cursor: pointer; font-family: inherit; transition: all 0.3s var(--ease-pop); width: 100%; max-width: 260px; } .aur-bundle-btn:hover { background: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-gold); } .aur-bundle-note { font-size: 11px; color: var(--muted); margin-top: 8px; } /* ═══════════════════════════════════════════════════════════════════════ FAQ ACCORDION — every state color-locked (no inherited currentColor) ═══════════════════════════════════════════════════════════════════════ */ .aur-faq-section { max-width: 780px; margin: 72px auto 0; padding: 0 24px; } .aur-faq-title { font-size: clamp(24px, 3vw, 30px); font-weight: 700; text-align: center; margin: 0 0 28px; letter-spacing: -0.4px; color: var(--ink); } .aur-faq-list { border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-sm); } .aur-faq-item { border-bottom: 1px solid var(--line-2); } .aur-faq-item:last-child { border-bottom: none; } .aur-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; background: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink) !important; text-align: left; font-family: inherit; transition: background 0.25s ease; min-width: 0; gap: 16px; } .aur-faq-q:hover { background: var(--bg-warm) !important; } .aur-faq-q:hover .aur-faq-q-text { color: var(--gold) !important; } .aur-faq-q-text { color: var(--ink); transition: color 0.25s ease; flex: 1; min-width: 0; line-height: 1.4; } .aur-faq-q:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .aur-faq-arrow { font-size: 18px; color: var(--gold); width: 30px; height: 30px; border-radius: 50%; background: rgba(201,169,110,0.10); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.4s var(--ease-pop); font-family: Arial, sans-serif; line-height: 1; font-weight: 400; } .aur-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); } .aur-faq-a-inner { padding: 0 22px 0; } .aur-faq-a-inner p { font-size: 14px; color: var(--muted-2); line-height: 1.75; padding: 0 0 20px; margin: 0; } .aur-faq-open .aur-faq-a { max-height: 400px; } .aur-faq-open .aur-faq-arrow { transform: rotate(45deg); background: var(--gold); color: #fff; } .aur-faq-open .aur-faq-q { background: var(--bg-warm); } .aur-faq-open .aur-faq-q-text { color: var(--ink); } /* ═══════════════════════════════════════════════════════════════════════ RECENTLY VIEWED STRIP ═══════════════════════════════════════════════════════════════════════ */ .aur-recent-section { max-width: var(--max-w); margin: 72px auto 0; padding: 0 24px; } .aur-recent-section[hidden] { display: none; } .aur-recent-track { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 16px 2px 8px; margin-top: 16px; } .aur-recent-track::-webkit-scrollbar { display: none; } .aur-recent-card { flex: 0 0 200px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; transition: transform 0.3s var(--ease-pop), box-shadow 0.3s, border-color 0.3s; cursor: pointer; } .aur-recent-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); } .aur-recent-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 0.5s var(--ease-pop); } .aur-recent-card:hover img { transform: scale(1.04); } .aur-recent-card-name { font-size: 12px; font-weight: 600; color: var(--ink); padding: 10px 12px; line-height: 1.35; /* Break at word boundaries, not mid-word. Show 2 lines + ellipsis cleanly. */ word-break: normal; overflow-wrap: break-word; hyphens: manual; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.7em; } /* ═══════════════════════════════════════════════════════════════════════ PURCHASE POPUP — bottom-left, glassmorphism, dismissible ═══════════════════════════════════════════════════════════════════════ */ .aur-popup { position: fixed; bottom: 22px; left: 22px; z-index: 9998; background: rgba(255,255,255,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-lg); max-width: 320px; align-items: center; gap: 12px; font-size: 12px; color: var(--muted-2); display: flex; transform: translateY(20px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.5s ease; pointer-events: none; } .aur-popup.is-visible { transform: translateY(0); opacity: 1; } .aur-popup-icon { font-size: 22px; flex-shrink: 0; } .aur-popup-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-warm); border: 1px solid var(--line); display: none; } .aur-popup-body { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.45; } .aur-popup-loc, .aur-popup-time { color: var(--muted); } .aur-popup-action { color: var(--muted); margin-right: 4px; } .aur-popup-product { color: var(--ink); } .aur-popup-close { position: absolute; top: 6px; right: 8px; background: none; border: none; color: #bbb; cursor: pointer; font-size: 12px; padding: 4px; font-family: inherit; line-height: 1; } .aur-popup-close:hover { color: var(--ink); } @media (max-width: 768px) { .aur-popup { left: 12px; right: 12px; max-width: none; bottom: 86px; } } /* ═══════════════════════════════════════════════════════════════════════ STICKY MOBILE ADD-TO-CART — glassmorphism, only mobile ═══════════════════════════════════════════════════════════════════════ */ .aur-sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9997; background: rgba(255,255,255,0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); box-shadow: 0 -8px 28px rgba(0,0,0,0.10); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); align-items: center; justify-content: space-between; gap: 14px; transform: translateY(100%); transition: transform 0.4s var(--ease); } .aur-sticky-cta.aur-show { display: flex; transform: translateY(0); } .aur-sticky-info { min-width: 0; flex: 1; } .aur-sticky-title { display: block; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; } .aur-sticky-price { font-size: 16px; font-weight: 700; color: var(--danger); margin-top: 2px; } /* Inline tier badge inside the sticky price line — e.g. "Duo Deal $98.98". Lets mobile shoppers confirm the selected tier without scrolling up. */ .aur-sticky-tier { display: inline-block; font-size: 11px; font-weight: 600; color: #8a7340; background: #FBF3E1; border-radius: 4px; padding: 2px 6px; margin-right: 6px; vertical-align: 2px; letter-spacing: 0.01em; } .aur-sticky-btn { background: linear-gradient(135deg, var(--ink) 0%, #2A2A2A 100%); color: #fff; border: none; border-radius: var(--radius-sm); padding: 14px 24px; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; flex-shrink: 0; cursor: pointer; font-family: inherit; transition: all 0.3s var(--ease-pop); position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(26,26,26,0.25); } /* Shimmer sweep — matches the main ATC button */ .aur-sticky-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); animation: aurStickyShimmer 3s ease-in-out infinite; } @keyframes aurStickyShimmer { 0% { left: -100%; } 35%, 100% { left: 100%; } } .aur-sticky-btn:hover { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light, #E8D5A8) 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201,169,110,0.45); } .aur-sticky-btn:active { transform: translateY(0); } .aur-sticky-btn.is-added { background: linear-gradient(135deg, var(--success) 0%, #3D8B6F 100%); box-shadow: 0 4px 16px rgba(45,106,79,0.4); } @media (min-width: 769px) { .aur-sticky-cta { display: none !important; } } /* Ensure sticky CTA is visible on mobile */ @media (max-width: 768px) { .aur-sticky-cta { display: flex !important; } } /* ═══════════════════════════════════════════════════════════════════════ SCROLL-REVEAL SYSTEM — IntersectionObserver-driven, staggered ═══════════════════════════════════════════════════════════════════════ */ .aur-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); will-change: opacity, transform; } .aur-reveal.aur-visible { opacity: 1; transform: translateY(0); } .aur-reveal--left { transform: translateX(-32px); } .aur-reveal--left.aur-visible { transform: translateX(0); } .aur-reveal--right { transform: translateX(32px); } .aur-reveal--right.aur-visible { transform: translateX(0); } .aur-reveal--scale { transform: scale(0.94); } .aur-reveal--scale.aur-visible { transform: scale(1); } /* Counter pulse when revealing */ .aur-counter { font-variant-numeric: tabular-nums; transition: color 0.6s ease; } .aur-counter.is-counting { color: var(--gold); } /* Utility: hidden scrollable */ .aur-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════════════════════════════ WP / KADENCE / WOOCOMMERCE COMPATIBILITY LAYER — v3.1.0 ═══════════════════════════════════════════════════════════════════════════ WHY THIS EXISTS: demo.html renders .aur-product directly in with no WordPress stylesheets, so every measurement below matches the design. On the live site, Kadence's woocommerce.min.css STILL ships WooCommerce's legacy float layout and it fights our grid: div.product div.images { float:left; width:48% } ← squeezes gallery div.product div.summary { float:right; width:48%; clear:none } ← squeezes summary div.product div.images .flex-control-thumbs ← translate(-50%,0), max-width:94%, left:50% ← breaks thumb strip div.product div.images .flex-control-thumbs li { width:60px; height:65px; display:inline-flex } ← breaks thumb tiles button height / price font-size rules ← beat our cascade Measured impact before this layer (1440px viewport): summary col 273px instead of ~587px, gallery image 300×300 instead of full-width, title wrapping into 7 lines, bundle cards 320px tall instead of 98px. Every rule here is scoped under .aur-product / body.single-product so the homepage, shop archive, cart, and checkout are untouched. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Kill the legacy WooCommerce float layout inside our template ─────── */ .aur-product div.images, .aur-product div.summary { float: none !important; width: auto !important; max-width: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ── 2. Gallery: let WooCommerce Flexslider run natively ─────────────────── We previously tried to force every slide to position:absolute + display:none on non-active, which fights Flexslider's own transform-based slide animation. When Flexslider animates, it translates the whole wrapper; if the target slide is display:none at transition start, you get blank frames. Modern WooCommerce (8+) wraps slides in .woocommerce-product-gallery__wrapper rather than the legacy