/** Shopify CDN: Minification failed Line 2822:20 Unexpected "{" Line 3154:19 Unexpected "*" Line 4473:8 Expected ":" **/ /* ===== 3.17 bundled source: assets/haze-custom.css ===== */ /* ============================================ THE HAZE CONNECT — Custom Theme Styles File: haze-custom.css Location: Assets/ folder in Shopify theme Brand Colors: Blue Dream: #204B57 (primary dark) Green Kush: #8FB479 (accent green) Acapulco Gold: #FFA637 (CTA / urgency) White Widow: #FFFFFF (white) Golden Goat: #9E5C1B (warm accent) Fonts: Headings: Big Shoulders Display (Google Fonts) Body: DM Sans (Google Fonts) Accent: Caveat (Google Fonts) SECTION RHYTHM: dark hero → white trust → light collections → dark best sellers → white brand story → dark how-it-works → white shop-by-effect → dark reviews → light education/blog → dark FAQ → dark newsletter → dark footer NOTE: This file is loaded via theme.liquid with: {{ 'haze-custom.css' | asset_url | stylesheet_tag }} GOOGLE FONTS LINK (in theme.liquid ): ============================================ */ /* ======================================== CSS CUSTOM PROPERTIES ======================================== */ :root { --blue-dream: #204B57; --blue-dream-dark: #162F38; --blue-dream-deeper: #0E1F26; --blue-dream-light: #2A6275; --green-kush: #8FB479; --green-kush-dark: #6E9A5A; --green-kush-light: #A8C896; --green-kush-dim: rgba(143, 180, 121, 0.15); --acapulco-gold: #FFA637; --acapulco-gold-light: #FFB85C; --white-widow: #FFFFFF; --golden-goat: #9E5C1B; --off-white: #F7F6F3; --warm-white: #FAFAF8; --light-sage: #F2F5EF; --text-primary: #FFFFFF; --text-secondary: rgba(255,255,255,0.7); --text-dim: rgba(255,255,255,0.45); /* Dark-on-light text */ --text-dark: #1A2E35; --text-dark-secondary: #3D5A63; --text-dark-dim: #7A9AA3; --border-light: rgba(32, 75, 87, 0.1); } /* ======================================== BASE RESET & BODY ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--blue-dream-deeper); color: var(--text-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ======================================== TYPOGRAPHY — Font Assignments ======================================== */ /* Headings → Big Shoulders Display */ h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .collection-name, .product-name, .blog-card-content h3, .step-card h3, .effect-card h3, .brand-story-text h2, .page-title, .collection-page-title, .blog-page-title, .article-cta-title { font-family: 'Big Shoulders Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Body / UI elements → DM Sans */ p, span, li, label, input, select, textarea, button, .section-subtitle, .hero-description, .trust-item span, .product-desc, .brand-story-text p, .step-card p, .effect-card p, .review-text, .blog-card-content p, .faq-answer p, .footer-brand p, .footer-col a, .nav-links a, .btn { font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Nav + Buttons: keep DM Sans but bold/tracked */ .nav-links a, .btn { font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Accent / Taglines → Caveat */ .caveat, .hero-tagline, .brand-story-text .caveat-line { font-family: 'Caveat', cursive; } /* ======================================== UTILITIES ======================================== */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .btn { display: inline-block; padding: 15px 38px; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; } .btn-primary { background: var(--green-kush); color: var(--blue-dream-dark); } .btn-primary:hover { background: var(--green-kush-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(143, 180, 121, 0.25); } .btn-outline { background: transparent; color: var(--white-widow); border: 2px solid var(--green-kush); } .btn-outline:hover { background: var(--green-kush); color: var(--blue-dream-dark); } .btn-outline-dark { background: transparent; color: var(--blue-dream); border: 2px solid var(--blue-dream); } .btn-outline-dark:hover { background: var(--blue-dream); color: var(--white-widow); } .btn-gold { background: var(--acapulco-gold); color: var(--blue-dream-dark); } .btn-gold:hover { background: var(--acapulco-gold-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 166, 55, 0.25); } .btn-dark { background: var(--blue-dream); color: var(--white-widow); } .btn-dark:hover { background: var(--blue-dream-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(32, 75, 87, 0.3); } .section-label { font-size: 11px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--green-kush); margin-bottom: 14px; display: block; } .section-label-dark { color: var(--green-kush-dark); } .section-title { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 20px; } .section-subtitle { font-size: 17px; font-weight: 300; color: var(--text-secondary); line-height: 1.7; max-width: 560px; } /* ======================================== SUBTLE GRAIN OVERLAY ======================================== */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: 0.35; } /* ======================================== ANNOUNCEMENT BAR ======================================== */ .announcement-bar { background: var(--green-kush); color: var(--blue-dream-dark); text-align: center; padding: 10px 24px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .announcement-bar a { color: var(--blue-dream-dark); text-decoration: underline; text-underline-offset: 2px; } /* ======================================== NAVIGATION ======================================== */ .nav { position: sticky; top: 0; z-index: 1000; background: rgba(14, 31, 38, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(143, 180, 121, 0.1); transition: all 0.3s ease; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white-widow); } .nav-logo-icon { width: 36px; height: 36px; } .nav-logo-text { font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; } .nav-logo-text span { display: block; } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: color 0.3s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--green-kush); transition: width 0.3s; } .nav-links a:hover { color: var(--white-widow); } .nav-links a:hover::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: 20px; } .nav-actions a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s; } .nav-actions a:hover { color: var(--white-widow); } .cart-icon { position: relative; } .cart-count { position: absolute; top: -8px; right: -10px; background: var(--acapulco-gold); color: var(--blue-dream-dark); font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Mobile menu toggle */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white-widow); transition: all 0.3s; } /* ======================================== MOBILE MENU — Left-aligned with arrows ======================================== */ .nav-links.open { text-align: left; } .nav-links.open li { text-align: left; } .haze-mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(14, 31, 38, 0.97); backdrop-filter: blur(30px); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; overflow-y: auto; padding: 100px 28px 40px; } .haze-mobile-menu.open { opacity: 1; pointer-events: all; } .mobile-menu-section { margin-bottom: 24px; opacity: 0; transform: translateY(16px); transition: all 0.35s ease; } .haze-mobile-menu.open .mobile-menu-section { opacity: 1; transform: translateY(0); } .haze-mobile-menu.open .mobile-menu-section:nth-child(1) { transition-delay: 0.08s; } .haze-mobile-menu.open .mobile-menu-section:nth-child(2) { transition-delay: 0.14s; } .haze-mobile-menu.open .mobile-menu-section:nth-child(3) { transition-delay: 0.20s; } .haze-mobile-menu.open .mobile-menu-section:nth-child(4) { transition-delay: 0.26s; } .haze-mobile-menu.open .mobile-menu-section:nth-child(5) { transition-delay: 0.32s; } .haze-mobile-menu.open .mobile-menu-section:nth-child(6) { transition-delay: 0.38s; } .haze-mobile-menu.open .mobile-menu-section:nth-child(7) { transition-delay: 0.44s; } .mobile-menu-heading { font-size: 10px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: #8FB479; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(143,180,121,0.15); } .mobile-menu-link { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.7); text-decoration: none; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.04); transition: all 0.2s ease; } .mobile-menu-link:hover, .mobile-menu-link:active { color: #8FB479; padding-left: 8px; } .mobile-menu-link .menu-arrow { font-size: 14px; opacity: 0; transform: translateX(-4px); transition: all 0.2s; color: #8FB479; } .mobile-menu-link:hover .menu-arrow { opacity: 1; transform: translateX(0); } .mobile-menu-standalone { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: #FFFFFF; text-decoration: none; padding: 14px 0; letter-spacing: 0.3px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: all 0.2s; } .mobile-menu-standalone:hover { color: #8FB479; padding-left: 8px; } .mobile-menu-standalone .menu-arrow { font-size: 14px; opacity: 0; transform: translateX(-4px); transition: all 0.2s; color: #8FB479; } .mobile-menu-standalone:hover .menu-arrow { opacity: 1; transform: translateX(0); } .mobile-menu-social { display: flex; gap: 14px; padding-top: 20px; justify-content: center; } .mobile-menu-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(143,180,121,0.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.45); text-decoration: none; transition: all 0.25s; } .mobile-menu-social a:hover { border-color: #8FB479; color: #8FB479; background: rgba(143,180,121,0.15); } /* ======================================== HERO (DARK) ======================================== */ .hero { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--blue-dream-deeper) 0%, var(--blue-dream) 50%, var(--blue-dream-dark) 100%); } .hero-bg::before { content: ''; position: absolute; top: -50%; right: -20%; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 180, 121, 0.08) 0%, transparent 70%); animation: pulse 8s ease-in-out infinite; } .hero-bg::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 166, 55, 0.05) 0%, transparent 70%); animation: pulse 10s ease-in-out infinite reverse; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.7; } } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(143, 180, 121, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 180, 121, 0.04) 1px, transparent 1px); background-size: 80px 80px; } .hero-content { position: relative; z-index: 2; padding: 80px 0; width: 100%; } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-tagline { font-family: 'Caveat', cursive; font-size: 22px; color: var(--acapulco-gold); margin-bottom: 16px; display: block; } .hero-title { font-size: clamp(64px, 10vw, 140px); font-weight: 900; line-height: 0.95; letter-spacing: -2px; margin-bottom: 28px; } .hero-title .highlight { color: var(--green-kush); } .hero-description { font-size: 18px; font-weight: 300; color: var(--text-secondary); line-height: 1.7; margin-bottom: 40px; max-width: 480px; } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; } /* Hero right — product showcase */ .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; } .hero-product-card { background: rgba(32, 75, 87, 0.5); border: 1px solid rgba(143, 180, 121, 0.15); border-radius: 16px; padding: 48px; width: 100%; max-width: 480px; position: relative; overflow: hidden; } .hero-product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--green-kush), var(--acapulco-gold)); } .hero-product-badge { display: inline-block; background: var(--acapulco-gold); color: var(--blue-dream-dark); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px; margin-bottom: 20px; } .hero-product-image { width: 100%; height: 280px; background: linear-gradient(135deg, rgba(143, 180, 121, 0.12), rgba(255, 166, 55, 0.08)); border-radius: 8px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; } .hero-product-image svg { opacity: 0.25; } .hero-product-name { font-size: 24px; font-weight: 700; margin-bottom: 8px; } .hero-product-strain { font-size: 13px; color: var(--green-kush); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; } .hero-product-price { font-size: 28px; font-weight: 700; color: var(--acapulco-gold); } .hero-product-price .original { font-size: 16px; color: var(--text-dim); text-decoration: line-through; margin-left: 8px; font-weight: 400; } /* Floating badges */ .hero-float { position: absolute; padding: 10px 18px; background: rgba(14, 31, 38, 0.85); border: 1px solid rgba(143, 180, 121, 0.2); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--text-secondary); backdrop-filter: blur(10px); animation: float 6s ease-in-out infinite; } .hero-float svg { vertical-align: middle; margin-right: 6px; } .hero-float-1 { top: 10%; right: -5%; animation-delay: 0s; } .hero-float-2 { bottom: 15%; right: 5%; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ======================================== TRUST BAR (soft green tint) ======================================== */ .trust-bar { background: #E4EDE6; padding: 36px 0; border-bottom: 1px solid var(--border-light); } .trust-bar-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .trust-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .trust-item svg { color: var(--green-kush-dark); margin-bottom: 4px; } .trust-item strong { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-dark); } .trust-item span { font-size: 12px; color: var(--text-dark-dim); font-weight: 300; } /* ======================================== FEATURED COLLECTIONS (LIGHT) ======================================== */ .collections { padding: 100px 0; background: var(--off-white); } .collections-header { text-align: center; margin-bottom: 60px; } .collections-header .section-title { color: var(--text-dark); } .collections-header .section-subtitle { color: var(--text-dark-secondary); } .collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .collection-card { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 3/4; background: var(--blue-dream); border: 1px solid rgba(143, 180, 121, 0.1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .collection-card:hover { transform: translateY(-6px); border-color: rgba(143, 180, 121, 0.3); box-shadow: 0 24px 64px rgba(32, 75, 87, 0.25); } .collection-card-bg { position: absolute; inset: 0; opacity: 0.15; transition: opacity 0.4s; } .collection-card:nth-child(1) .collection-card-bg { background: linear-gradient(135deg, var(--green-kush), transparent); } .collection-card:nth-child(2) .collection-card-bg { background: linear-gradient(135deg, var(--acapulco-gold), transparent); } .collection-card:nth-child(3) .collection-card-bg { background: linear-gradient(135deg, var(--golden-goat), transparent); } .collection-card:hover .collection-card-bg { opacity: 0.25; } .collection-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px; background: linear-gradient(to top, rgba(14, 31, 38, 0.95), transparent); z-index: 2; } .collection-card-icon { width: 100%; height: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .collection-card-icon svg { opacity: 0.12; width: 80px; height: 80px; } .collection-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green-kush); margin-bottom: 10px; } .collection-name { font-size: 26px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.3px; color: var(--white-widow); } .collection-count { font-size: 13px; color: var(--text-dim); font-weight: 300; } .collection-arrow { position: absolute; top: 32px; right: 32px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(143, 180, 121, 0.2); display: flex; align-items: center; justify-content: center; transition: all 0.3s; z-index: 2; color: var(--white-widow); } .collection-card:hover .collection-arrow { background: var(--green-kush); border-color: var(--green-kush); } .collection-card:hover .collection-arrow svg { color: var(--blue-dream-dark); } /* ======================================== BEST SELLERS (DARK) ======================================== */ .best-sellers { padding: 100px 0; background: var(--blue-dream-dark); } .best-sellers-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 50px; } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .product-card { background: rgba(32, 75, 87, 0.3); border: 1px solid rgba(143, 180, 121, 0.08); border-radius: 12px; overflow: hidden; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; } .product-card:hover { border-color: rgba(143, 180, 121, 0.25); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.25); } .product-image { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, rgba(143, 180, 121, 0.06), rgba(32, 75, 87, 0.3)); display: flex; align-items: center; justify-content: center; position: relative; } .product-image svg { opacity: 0.1; } .product-badge { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; } .badge-sale { background: var(--acapulco-gold); color: var(--blue-dream-dark); } .badge-new { background: var(--green-kush); color: var(--blue-dream-dark); } .badge-hot { background: #E85D4A; color: white; } .product-info { padding: 20px; } .product-category { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green-kush); margin-bottom: 6px; } .product-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.2px; } .product-desc { font-size: 13px; color: var(--text-dim); font-weight: 300; margin-bottom: 12px; line-height: 1.5; } .product-meta { display: flex; align-items: center; justify-content: space-between; } .product-price { font-size: 20px; font-weight: 700; color: var(--acapulco-gold); } .product-price .was { font-size: 13px; color: var(--text-dim); text-decoration: line-through; font-weight: 300; margin-left: 6px; } .product-rating { display: flex; gap: 2px; } .product-rating svg { color: var(--acapulco-gold); } .product-add { display: block; width: calc(100% - 40px); margin: 0 20px 20px; padding: 12px; background: transparent; border: 1px solid rgba(143, 180, 121, 0.2); color: var(--green-kush); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; border-radius: 6px; } .product-add:hover { background: var(--green-kush); color: var(--blue-dream-dark); border-color: var(--green-kush); } /* ======================================== TRUST BADGES (product page) ======================================== */ .product-trust-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .product-trust-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); padding: 6px 12px; background: rgba(32,75,87,0.3); border: 1px solid rgba(143,180,121,0.08); border-radius: 6px; } .product-trust-badge svg { color: #8FB479; min-width: 14px; } /* ======================================== FLAVOR PICKER ======================================== */ .flavor-picker { margin-bottom: 20px; } .flavor-picker-heading { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 10px; } .flavor-swatches { display: flex; gap: 8px; flex-wrap: wrap; } .flavor-swatch { width: 48px; height: 48px; border-radius: 10px; border: 2px solid rgba(143,180,121,0.12); overflow: hidden; cursor: pointer; transition: all 0.2s; text-decoration: none; } .flavor-swatch:hover { border-color: rgba(143,180,121,0.4); } .flavor-swatch-active { border-color: #8FB479; box-shadow: 0 0 0 2px rgba(143,180,121,0.3); } .flavor-swatch img { width: 100%; height: 100%; object-fit: cover; } /* ======================================== BRAND STORY (soft green tint) ======================================== */ .brand-story { padding: 120px 0; position: relative; overflow: hidden; background: #E4EDE6; } .brand-story-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 180, 121, 0.08) 0%, transparent 70%); right: -200px; top: 50%; transform: translateY(-50%); } .brand-story-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 2; } .brand-story-visual { position: relative; } .brand-story-box { width: 100%; aspect-ratio: 4/3; background: var(--blue-dream); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .brand-story-box::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(143, 180, 121, 0.1) 0%, transparent 50%, rgba(255, 166, 55, 0.05) 100%); } .brand-story-logo { opacity: 0.15; } .brand-story-accent { position: absolute; bottom: -20px; right: -20px; width: 180px; height: 180px; border: 2px solid var(--green-kush); border-radius: 12px; z-index: -1; opacity: 0.2; } .brand-story-text .caveat-line { font-family: 'Caveat', cursive; font-size: 20px; color: var(--acapulco-gold); margin-bottom: 8px; } .brand-story-text h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.5px; color: var(--text-dark); } .brand-story-text h2 .green { color: var(--green-kush-dark); } .brand-story-text p { font-size: 16px; font-weight: 300; color: var(--text-dark-secondary); line-height: 1.8; margin-bottom: 16px; } .brand-values { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; } .brand-value { display: flex; align-items: flex-start; gap: 12px; } .brand-value-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; background: var(--light-sage); display: flex; align-items: center; justify-content: center; } .brand-value-icon svg { color: var(--green-kush-dark); } .brand-value-text strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; color: var(--text-dark); } .brand-value-text span { font-size: 12px; color: var(--text-dark-dim); font-weight: 300; line-height: 1.5; } /* ======================================== HOW IT WORKS (DARK) ======================================== */ .how-it-works { padding: 100px 0; background: var(--blue-dream-dark); } .how-it-works-header { text-align: center; margin-bottom: 60px; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; } .steps-grid::before { content: ''; position: absolute; top: 40px; left: 15%; right: 15%; height: 2px; background: linear-gradient(90deg, transparent, var(--green-kush), var(--acapulco-gold), var(--green-kush), transparent); opacity: 0.2; } .step-card { text-align: center; position: relative; z-index: 2; } .step-number { width: 80px; height: 80px; border-radius: 50%; background: rgba(143, 180, 121, 0.1); border: 2px solid var(--green-kush); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 28px; font-weight: 700; color: var(--green-kush); } .step-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.3px; } .step-card p { font-size: 15px; color: var(--text-secondary); font-weight: 300; line-height: 1.6; max-width: 280px; margin: 0 auto; } /* ======================================== SHOP BY EFFECT (soft green tint) ======================================== */ .shop-by-effect { padding: 100px 0; background: #E4EDE6; } .shop-by-effect-header { text-align: center; margin-bottom: 60px; } .shop-by-effect-header .section-title { color: var(--text-dark); } .shop-by-effect-header .section-subtitle { color: var(--text-dark-secondary); margin: 0 auto; } .effects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .effect-card { padding: 32px 24px; border-radius: 12px; border: 1px solid rgba(32, 75, 87, 0.08); text-align: center; cursor: pointer; transition: all 0.35s; text-decoration: none; background: #F0F5EC; } .effect-card:hover { border-color: var(--green-kush); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(32, 75, 87, 0.1); } .effect-icon { font-size: 36px; margin-bottom: 16px; display: block; } .effect-card h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; } .effect-card p { font-size: 13px; color: var(--text-dark-dim); font-weight: 300; line-height: 1.5; } .effect-card .effect-cta { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green-kush-dark); text-decoration: none; } /* Polish additions */ .effect-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .effect-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); } /* ======================================== REVIEWS / SOCIAL PROOF (DARK) ======================================== */ .reviews { padding: 100px 0; background: var(--blue-dream-deeper); position: relative; overflow: hidden; } .reviews::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 180, 121, 0.04) 0%, transparent 70%); } .reviews-header { text-align: center; margin-bottom: 60px; position: relative; z-index: 2; } .reviews-stats { display: flex; justify-content: center; gap: 48px; margin-bottom: 48px; position: relative; z-index: 2; } .review-stat { text-align: center; } .review-stat .stat-number { font-size: 42px; font-weight: 700; color: var(--acapulco-gold); line-height: 1; } .review-stat .stat-label { font-size: 13px; color: var(--text-dim); font-weight: 300; margin-top: 6px; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 2; } .review-card { background: rgba(32, 75, 87, 0.3); border: 1px solid rgba(143, 180, 121, 0.08); border-radius: 12px; padding: 32px; } .review-stars { color: var(--acapulco-gold); font-size: 14px; margin-bottom: 16px; letter-spacing: 2px; } .review-text { font-size: 15px; font-weight: 300; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; font-style: italic; } .review-author { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .review-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green-kush); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--blue-dream-dark); } .review-author-info strong { display: block; font-size: 14px; font-weight: 700; } .review-author-info span { font-size: 12px; color: var(--text-dim); font-weight: 300; } /* ======================================== BLOG / EDUCATION (soft green tint) ======================================== */ .education { padding: 100px 0; background: #E4EDE6; } .education-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 50px; } .education-header .section-title { color: var(--text-dark); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .blog-card { background: var(--white-widow); border-radius: 12px; overflow: hidden; text-decoration: none; transition: all 0.35s; border: 1px solid rgba(32, 75, 87, 0.06); } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(32, 75, 87, 0.1); } .blog-card-image { width: 100%; aspect-ratio: 16/9; background: var(--blue-dream); display: flex; align-items: center; justify-content: center; position: relative; } .blog-card-image svg { opacity: 0.15; } .blog-card-tag { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; background: var(--green-kush); color: #ffffff; } .blog-card-content { padding: 24px; } .blog-card-date { font-size: 12px; color: var(--text-dark-dim); font-weight: 300; margin-bottom: 8px; } .blog-card-content h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; line-height: 1.3; letter-spacing: -0.2px; } .blog-card-content p { font-size: 14px; color: var(--text-dark-secondary); font-weight: 300; line-height: 1.6; } .blog-card-link { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green-kush-dark); } /* ======================================== FAQ (DARK) ======================================== */ .faq { padding: 100px 0; background: var(--blue-dream-dark); } .faq-header { text-align: center; margin-bottom: 60px; } .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid rgba(143, 180, 121, 0.1); } .faq-question { width: 100%; background: none; border: none; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: inherit; font-size: 17px; font-weight: 600; color: var(--white-widow); text-align: left; transition: color 0.3s; } .faq-question:hover { color: var(--green-kush); } .faq-question svg { min-width: 20px; transition: transform 0.3s; color: var(--green-kush); } .faq-item.open .faq-question svg { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0; } .faq-item.open .faq-answer { max-height: 500px; padding: 0 0 24px 0; } .faq-answer p { font-size: 15px; font-weight: 300; color: var(--text-secondary); line-height: 1.7; } /* ======================================== NEWSLETTER (DARK) ======================================== */ .newsletter { padding: 80px 0; background: var(--blue-dream); position: relative; overflow: hidden; } .newsletter::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(143, 180, 121, 0.08) 0%, transparent 50%), linear-gradient(315deg, rgba(255, 166, 55, 0.05) 0%, transparent 50%); } .newsletter-inner { position: relative; z-index: 2; text-align: center; max-width: 600px; margin: 0 auto; } .newsletter-inner .section-title { font-size: clamp(28px, 4vw, 40px); } .newsletter-form { display: flex; gap: 0; max-width: 520px; margin: 32px auto 0; } .newsletter-input { flex: 1; background: rgba(14, 31, 38, 0.5); border: 1px solid rgba(143, 180, 121, 0.2); border-right: none; color: var(--white-widow); font-family: inherit; font-size: 14px; font-weight: 300; padding: 16px 20px; border-radius: 4px 0 0 4px; outline: none; transition: border-color 0.3s; } .newsletter-input::placeholder { color: rgba(255,255,255,0.4); } .newsletter-input:focus { border-color: var(--green-kush); } .newsletter-form .btn-gold { border-radius: 0 4px 4px 0; white-space: nowrap; padding: 16px 24px; } .newsletter-disclaimer { font-size: 12px; color: var(--text-dim); margin-top: 16px; font-weight: 300; } /* ======================================== FOOTER (DARK) ======================================== */ .footer { padding: 80px 0 40px; background: var(--blue-dream-deeper); border-top: 1px solid rgba(143, 180, 121, 0.08); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; } .footer-brand p { font-size: 14px; color: var(--text-dim); font-weight: 300; line-height: 1.7; margin-top: 16px; max-width: 280px; } .footer-socials { display: flex; gap: 12px; margin-top: 20px; } .footer-socials a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(143, 180, 121, 0.2); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); text-decoration: none; transition: all 0.3s; font-size: 14px; } .footer-socials a:hover { background: var(--green-kush); color: var(--blue-dream-dark); border-color: var(--green-kush); } .footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green-kush); margin-bottom: 20px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 12px; } .footer-col a { color: var(--text-dim); text-decoration: none; font-size: 14px; font-weight: 300; transition: color 0.3s; } .footer-col a:hover { color: var(--white-widow); } .footer-bottom { border-top: 1px solid rgba(143, 180, 121, 0.08); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 12px; color: var(--text-dim); font-weight: 300; } .footer-legal { display: flex; gap: 24px; } .footer-legal a { font-size: 12px; color: var(--text-dim); text-decoration: none; font-weight: 300; transition: color 0.3s; } .footer-legal a:hover { color: var(--white-widow); } /* ======================================== AGE GATE OVERLAY ======================================== */ .age-gate { position: fixed; inset: 0; background: rgba(14, 31, 38, 0.97); backdrop-filter: blur(20px); z-index: 10000; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s, visibility 0.5s; } .age-gate.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .age-gate-box { text-align: center; max-width: 440px; padding: 48px; background: var(--white-widow); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); } .age-gate-box h2 { font-size: 28px; font-weight: 700; margin: 20px 0 8px; color: var(--text-dark); } .age-gate-box p { font-size: 15px; color: var(--text-dark-secondary); font-weight: 300; margin-bottom: 28px; line-height: 1.6; } .age-gate-buttons { display: flex; gap: 12px; justify-content: center; } .age-gate-buttons .btn { flex: 1; text-align: center; } .age-deny { background: var(--off-white); color: var(--text-dark-dim); } .age-deny:hover { background: #E8E6E1; } /* ======================================== PRODUCT PAGE — Strain Stats Bar ======================================== */ .strain-stats-bar { display: flex; gap: 20px; margin-bottom: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .strain-stat { display: flex; flex-direction: column; gap: 2px; } .strain-stat-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.4); } .strain-stat-value { font-size: 15px; font-weight: 700; color: #FFFFFF; } .strain-stat-highlight { color: #FFA637; } .product-strain-type { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 500; margin-bottom: 8px; } /* ======================================== PRODUCT PAGE — 2x2 Variant Grid ======================================== */ .variant-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0; } .variant-grid-btn { padding: 14px 12px; background: transparent; border: 1.5px solid rgba(143,180,121,0.15); border-radius: 10px; color: rgba(255,255,255,0.7); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; } .variant-grid-btn:hover { border-color: rgba(143,180,121,0.5); color: #FFFFFF; } .variant-grid-btn-active { border-color: #8FB479; background: #8FB479; color: #162F38; font-weight: 700; box-shadow: 0 4px 16px rgba(143,180,121,0.2); } .variant-grid-btn-active .variant-grid-price { color: #162F38; opacity: 0.8; } .variant-grid-btn:disabled { opacity: 0.4; cursor: not-allowed; } .variant-grid-title { font-size: 14px; font-weight: 600; } .variant-grid-price { font-size: 11px; font-weight: 500; opacity: 0.6; } .variant-grid-sold-out { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.35); position: absolute; bottom: 4px; } /* ======================================== PRODUCT PAGE — Subscribe & Save ======================================== */ .subscribe-save-option { margin-bottom: 20px; padding: 16px; border: 1.5px solid rgba(255,166,55,0.2); border-radius: 10px; background: rgba(255,166,55,0.03); cursor: pointer; transition: all 0.2s; } .subscribe-save-option:hover { border-color: rgba(255,166,55,0.4); background: rgba(255,166,55,0.06); } .subscribe-save-active { border-color: #FFA637; background: rgba(255,166,55,0.08); } .subscribe-save-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .subscribe-save-left { display: flex; align-items: center; gap: 8px; } .subscribe-save-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #FFA637; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .subscribe-save-dot { width: 8px; height: 8px; border-radius: 50%; background: #FFA637; opacity: 0; transition: opacity 0.2s; } .subscribe-save-active .subscribe-save-dot { opacity: 1; } .subscribe-save-label { font-size: 14px; font-weight: 700; color: #FFFFFF; } .subscribe-save-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 4px; background: #FFA637; color: #162F38; } .subscribe-save-desc { font-size: 12px; color: rgba(255,255,255,0.45); padding-left: 26px; line-height: 1.5; } .subscribe-save-frequency { display: none; margin-top: 12px; padding-left: 26px; } .subscribe-save-active .subscribe-save-frequency { display: block; } .subscribe-save-frequency select { width: 100%; padding: 10px 12px; background: #1A3D49; border: 1px solid rgba(143,180,121,0.15); border-radius: 8px; color: #FFFFFF; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .subscribe-save-frequency select:focus { outline: none; border-color: #FFA637; } /* ======================================== PRODUCT PAGE — Terpene Profile Tags ======================================== */ .terpene-profile { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.05); } .terpene-heading { font-size: 13px; font-weight: 700; color: #FFFFFF; margin-bottom: 10px; } .terpene-tag-list { display: flex; flex-wrap: wrap; gap: 6px; } .terpene-tag { padding: 4px 10px; background: rgba(143,180,121,0.15); border: 1px solid rgba(143,180,121,0.2); border-radius: 20px; font-size: 11px; font-weight: 600; color: #8FB479; } /* ======================================== PRODUCT PAGE — Image Thumbnails ======================================== */ .product-thumbnails { display: flex; gap: 8px; margin-top: 12px; justify-content: center; } .product-thumb { width: 56px; height: 56px; border-radius: 8px; border: 2px solid transparent; overflow: hidden; cursor: pointer; transition: all 0.2s; background: #1A3D49; flex-shrink: 0; } .product-thumb-active { border-color: #8FB479; } .product-thumb:hover { border-color: rgba(143,180,121,0.4); } /* ======================================== PRODUCT PAGE — Tabs ======================================== */ .product-tabs-wrapper { padding: 0 0 32px; border-top: 1px solid rgba(255,255,255,0.04); margin-top: 24px; } .product-tab-nav { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .product-tab-btn { padding: 14px 20px; background: none; border: none; border-bottom: 2px solid transparent; color: rgba(255,255,255,0.4); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .product-tab-btn:hover { color: rgba(255,255,255,0.7); } .product-tab-active { color: #8FB479; border-bottom-color: #8FB479; } .product-tab-content { display: none; } .product-tab-visible { display: block; } .product-tab-content p { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.7; } .tab-section-heading { font-size: 14px; font-weight: 700; color: #FFFFFF; margin-bottom: 8px; } .tab-section-heading + .tab-section-heading, p + .tab-section-heading { margin-top: 16px; } .coa-link { display: inline-block; margin-top: 12px; color: #8FB479; font-weight: 600; text-decoration: underline; font-size: 14px; } .coa-link:hover { color: #A8C896; } /* ======================================== PRODUCT PAGE — Related Products Scroll ======================================== */ .product-related-section { padding: 32px 0 40px; border-top: 1px solid rgba(255,255,255,0.04); } .related-products-heading { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #8FB479; margin-bottom: 16px; } .related-products-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .related-products-scroll::-webkit-scrollbar { height: 3px; } .related-products-scroll::-webkit-scrollbar-thumb { background: rgba(143,180,121,0.15); border-radius: 2px; } .related-product-card { flex: 0 0 160px; background: rgba(32,75,87,0.3); border: 1px solid rgba(143,180,121,0.08); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: all 0.2s; } .related-product-card:hover { border-color: rgba(143,180,121,0.2); transform: translateY(-2px); } .related-product-image { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #1A3D49, #204B57); display: flex; align-items: center; justify-content: center; } .related-product-info { padding: 10px 12px; } .related-product-name { font-size: 12px; font-weight: 600; color: #FFFFFF; display: block; margin-bottom: 4px; } .related-product-price { font-size: 14px; font-weight: 700; color: #FFA637; } /* ======================================== QUANTITY DISCOUNT TIERS ======================================== */ .qty-tiers { margin-bottom: 20px; } .qty-tiers-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .qty-tier { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 18px; margin-bottom: 8px; border: 1px solid rgba(143,180,121,0.15); background: transparent; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-family: 'DM Sans', sans-serif; text-align: left; } .qty-tier:hover { border-color: rgba(143,180,121,0.4); background: rgba(143,180,121,0.05); } .qty-tier-active { border-color: #8FB479; background: rgba(143,180,121,0.1); } .qty-tier-top { display: flex; align-items: center; gap: 10px; } .qty-tier-amount { font-size: 16px; font-weight: 700; color: #FFFFFF; } .qty-tier-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; background: #FFA637; color: #162F38; } .qty-tier-badge-default { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); } .qty-tier-label { font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 400; } .qty-tier-savings-msg { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #8FB479; margin-bottom: 16px; } .qty-tier-savings-msg svg { color: #8FB479; min-width: 14px; } /* ======================================== CART DRAWER ======================================== */ .cart-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .cart-drawer-overlay.open { opacity: 1; visibility: visible; } .cart-drawer { position: fixed; top: 0; right: 0; width: 420px; max-width: 90vw; height: 100vh; background: #0E1F26; z-index: 9999; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; flex-direction: column; border-left: 1px solid rgba(143,180,121,0.1); } .cart-drawer.open { transform: translateX(0); } .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(143,180,121,0.1); } .cart-drawer-header h3 { font-size: 18px; font-weight: 700; color: #FFFFFF; } .cart-drawer-count { color: rgba(255,255,255,0.45); font-weight: 400; } .cart-drawer-close { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; padding: 4px; } .cart-drawer-close:hover { color: #FFFFFF; } .cart-drawer-shipping { padding: 16px 24px; background: rgba(32,75,87,0.3); } .shipping-bar-text { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 8px; } .shipping-bar-text strong { color: #FFA637; } .shipping-bar-track { width: 100%; height: 4px; background: rgba(143,180,121,0.15); border-radius: 2px; overflow: hidden; } .shipping-bar-fill { height: 100%; background: #8FB479; border-radius: 2px; transition: width 0.5s ease; max-width: 100%; } .cart-drawer-items { flex: 1; overflow-y: auto; padding: 16px 24px; } .cart-drawer-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(143,180,121,0.08); } .cart-item-image { width: 72px; min-width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: rgba(32,75,87,0.3); } .cart-item-image img { width: 100%; height: 100%; object-fit: cover; } .cart-item-details { flex: 1; } .cart-item-title { font-size: 14px; font-weight: 600; color: #FFFFFF; text-decoration: none; display: block; margin-bottom: 2px; } .cart-item-variant { font-size: 12px; color: #8FB479; margin-bottom: 4px; } .cart-item-price { font-size: 14px; font-weight: 700; color: #FFA637; margin-bottom: 8px; } .cart-item-qty-row { display: flex; align-items: center; justify-content: space-between; } .cart-item-qty { display: flex; align-items: center; border: 1px solid rgba(143,180,121,0.15); border-radius: 4px; } .cart-qty-btn { width: 28px; height: 28px; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; } .cart-qty-btn:hover { color: #FFFFFF; } .cart-qty-val { font-size: 13px; font-weight: 600; color: #FFFFFF; padding: 0 8px; } .cart-item-remove { background: none; border: none; color: rgba(255,255,255,0.3); font-size: 11px; cursor: pointer; text-decoration: underline; font-family: 'DM Sans', sans-serif; } .cart-item-remove:hover { color: #FFA637; } .cart-drawer-empty { text-align: center; padding: 60px 20px; } .cart-drawer-empty p { color: rgba(255,255,255,0.45); font-size: 16px; margin-bottom: 20px; } .cart-drawer-upsells { padding: 16px 24px; border-top: 1px solid rgba(143,180,121,0.1); } .upsell-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; } .upsell-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .upsell-card { min-width: 100px; background: rgba(32,75,87,0.3); border-radius: 8px; overflow: hidden; text-decoration: none; border: 1px solid rgba(143,180,121,0.08); transition: border-color 0.2s ease; } .upsell-card:hover { border-color: rgba(143,180,121,0.25); } .upsell-card img { width: 100px; height: 100px; object-fit: cover; } .upsell-info { padding: 8px; } .upsell-name { font-size: 11px; color: #FFFFFF; display: block; line-height: 1.3; } .upsell-price { font-size: 12px; font-weight: 700; color: #FFA637; } .cart-drawer-footer { padding: 20px 24px; border-top: 1px solid rgba(143,180,121,0.15); background: rgba(14,31,38,0.95); } .cart-drawer-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .cart-drawer-subtotal span:first-child { font-size: 14px; color: rgba(255,255,255,0.7); } .cart-drawer-total { font-size: 22px; font-weight: 700; color: #FFFFFF; } .cart-drawer-tax-note { font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 16px; } .cart-drawer-checkout-btn { display: block; width: 100%; padding: 16px; background: #8FB479; color: #162F38; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; text-decoration: none; border-radius: 6px; border: none; cursor: pointer; transition: background 0.2s ease; } .cart-drawer-checkout-btn:hover { background: #7DA368; } .cart-drawer-viewcart { display: block; text-align: center; margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.45); text-decoration: underline; } .cart-drawer-viewcart:hover { color: #FFFFFF; } /* ======================================== COA PAGE STYLES ======================================== */ .coa-preview-card { position: relative; cursor: pointer; overflow: hidden; border-radius: 8px; } .coa-preview-overlay { position: absolute; inset: 0; background: rgba(14, 31, 38, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; font-size: 13px; font-weight: 600; } .coa-preview-card:hover .coa-preview-overlay { opacity: 1; } .coa-preview-overlay svg { color: #8FB479; } .coa-actions { display: flex; gap: 10px; margin-top: 14px; } .coa-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; border: none; } .coa-action-primary { background: #8FB479; color: #162F38; } .coa-action-primary:hover { background: #A8C896; } .coa-action-outline { background: transparent; color: #8FB479; border: 1.5px solid rgba(143,180,121,0.3); } .coa-action-outline:hover { border-color: #8FB479; background: rgba(143,180,121,0.08); } .coa-popup-overlay { position: fixed; inset: 0; background: rgba(14, 31, 38, 0.85); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .coa-popup-overlay.coa-popup-visible { opacity: 1; pointer-events: all; } .coa-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 90vw; max-width: 900px; height: 85vh; background: #162F38; border: 1px solid rgba(143,180,121,0.2); border-radius: 14px; z-index: 1000; display: flex; flex-direction: column; overflow: hidden; opacity: 0; pointer-events: none; transition: all 0.3s ease; } .coa-popup.coa-popup-visible { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); } .coa-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(143,180,121,0.1); flex-shrink: 0; } /* ======================================== SCROLL ANIMATIONS ======================================== */ .fade-up { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ======================================== RESPONSIVE — 1024px ======================================== */ @media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; gap: 40px; } .hero-visual { display: none; } .hero { min-height: 70vh; } .collections-grid { grid-template-columns: repeat(2, 1fr); } .products-grid { grid-template-columns: repeat(2, 1fr); } .brand-story-inner { grid-template-columns: 1fr; gap: 48px; } .brand-story-visual { order: -1; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } /* ======================================== RESPONSIVE — 768px (mobile) ======================================== */ @media (max-width: 768px) { .announcement-bar { font-size: 11px; padding: 8px 16px; } .nav-links { display: none; } .nav-toggle { display: flex; } /* Mobile menu */ .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: rgba(14, 31, 38, 0.98); backdrop-filter: blur(20px); padding: 24px; gap: 0; border-bottom: 1px solid rgba(143, 180, 121, 0.1); text-align: left; } .nav-links.open li { border-bottom: 1px solid rgba(143, 180, 121, 0.06); text-align: left; } .nav-links.open a { display: block; padding: 16px 0; font-size: 15px; } .hero { min-height: auto; padding-top: 20px; } .hero-content { padding: 40px 0 60px; } .hero-title { font-size: 52px; } .hero-description { font-size: 16px; } .hero-ctas { flex-direction: column; } .hero-ctas .btn { text-align: center; } .trust-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; } .collections { padding: 60px 0; } .collections-grid { grid-template-columns: 1fr; gap: 16px; } .collection-card { aspect-ratio: 16/9; } .best-sellers { padding: 60px 0; } .best-sellers-header { flex-direction: column; align-items: flex-start; gap: 16px; } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .product-info { padding: 14px; } .product-name { font-size: 14px; } .product-desc { display: none; } .product-add { width: calc(100% - 28px); margin: 0 14px 14px; padding: 10px; font-size: 11px; } .brand-story { padding: 60px 0; } .brand-values { grid-template-columns: 1fr; } .brand-story-accent { display: none; } .steps-grid { grid-template-columns: 1fr; gap: 32px; } .steps-grid::before { display: none; } .effects-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .effect-card { padding: 24px 16px; } .reviews-stats { gap: 24px; } .review-stat .stat-number { font-size: 32px; } .reviews-grid { grid-template-columns: 1fr; } .education { padding: 60px 0; } .education-header { flex-direction: column; align-items: flex-start; gap: 16px; } .blog-grid { grid-template-columns: 1fr; } .faq { padding: 60px 0; } .faq-question { font-size: 15px; } .newsletter { padding: 60px 0; } .newsletter-form { flex-direction: column; gap: 0; } .newsletter-input { border-right: 1px solid rgba(143, 180, 121, 0.2); border-radius: 4px 4px 0 0; border-bottom: none; } .newsletter-form .btn-gold { border-radius: 0 0 4px 4px; } .footer { padding: 48px 0 24px; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } .footer-legal { justify-content: center; } /* Product v2 mobile */ .strain-stats-bar { gap: 16px; flex-wrap: wrap; } .variant-grid-2x2 { grid-template-columns: 1fr 1fr; } .product-thumbnails { gap: 6px; } .product-thumb { width: 48px; height: 48px; } /* Cart drawer mobile */ .cart-drawer { width: 100vw; max-width: 100vw; } } /* ======================================== RESPONSIVE — 420px (small mobile) ======================================== */ @media (max-width: 420px) { .hero-title { font-size: 42px; } .products-grid { grid-template-columns: 1fr; } .trust-bar-inner { grid-template-columns: 1fr; } .strain-stats-bar { gap: 12px; } .strain-stat-value { font-size: 14px; } } /* ======================================== FINAL FONT SIZE OVERRIDES — MUST BE LAST These ensure Big Shoulders Display sizes are correct and nothing overrides them. ======================================== */ .hero-title { font-size: clamp(64px, 10vw, 140px); font-weight: 900; letter-spacing: -2px; line-height: 0.95; } .section-title, .article-cta-title, { font-size: clamp(48px, 8vw, 90px); font-weight: 800; } .page-title, .collection-page-title, .blog-page-title { font-size: clamp(56px, 10vw, 120px); font-weight: 900; letter-spacing: -2px; } .hero-description { font-size: 20px; } .section-subtitle, .page-subtitle, .blog-page-desc { font-size: 18px; } .product-name { font-size: 18px; } .product-price { font-size: 22px; } .faq-question { font-size: 18px; } .step-card h3 { font-size: 24px; } @media (max-width: 768px) { .hero-title { font-size: clamp(42px, 12vw, 72px); } .section-title, .article-cta-title, .page-title, .collection-page-title, .blog-page-title { font-size: clamp(38px, 10vw, 64px); } } @media (max-width: 420px) { .hero-title { font-size: 42px; } } /* ── Fulfillment Delay Notice ──────────────────────────── */ .cart-fulfillment-notice { display: flex; align-items: flex-start; gap: 8px; background: #FFF8EC; border: 1px solid #FFA637; border-left: 4px solid #FFA637; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.5; color: #9E5C1B; } .cart-fulfillment-notice svg { flex-shrink: 0; margin-top: 2px; color: #FFA637; } /* ============================================= COA Direct Links & List Styles (2026-04-02) ============================================= */ /* --- Direct COA button (above tabs) --- */ .coa-direct-links { display: flex; gap: 10px; margin-bottom: 8px; } a.coa-direct-btn, main a.coa-direct-btn, a[href].coa-direct-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; text-decoration: none; border: none; background: #8FB479; color: #162F38; -webkit-text-fill-color: #162F38; } a.coa-direct-btn:hover, main a.coa-direct-btn:hover, a[href].coa-direct-btn:hover { background: #A8C896; color: #162F38; -webkit-text-fill-color: #162F38; } a.coa-direct-btn svg, a[href].coa-direct-btn svg { flex-shrink: 0; color: #162F38; -webkit-text-fill-color: #162F38; } /* --- COA List in Lab Results tab --- */ .coa-list-container { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .coa-list-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: rgba(143, 180, 121, 0.06); border: 1px solid rgba(143, 180, 121, 0.15); border-radius: 10px; transition: border-color 0.2s ease; } .coa-list-item:hover { border-color: rgba(143, 180, 121, 0.35); } .coa-list-item-header { display: flex; align-items: center; gap: 12px; } .coa-list-item-icon { display: flex; align-items: center; justify-content: center; color: #8FB479; flex-shrink: 0; } .coa-list-item-icon svg { color: #8FB479; } .coa-list-item-info { display: flex; flex-direction: column; gap: 2px; } .coa-list-item-label { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: #D4E7C5; } .coa-list-item-subtitle { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(212, 231, 197, 0.55); } .coa-list-item-actions { display: flex; gap: 8px; align-items: center; } a.coa-list-view-btn, main a.coa-list-view-btn, a[href].coa-list-view-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-decoration: none; border: 1.5px solid rgba(143, 180, 121, 0.3); background: transparent; color: #8FB479; } a.coa-list-view-btn:hover, main a.coa-list-view-btn:hover, a[href].coa-list-view-btn:hover { border-color: #8FB479; background: rgba(143, 180, 121, 0.08); color: #8FB479; } /* --- View All COAs link --- */ a.coa-view-all-link, main a.coa-view-all-link, a[href].coa-view-all-link { display: inline-block; margin-top: 14px; color: #8FB479; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; text-decoration: underline; transition: color 0.2s ease; } a.coa-view-all-link:hover, main a.coa-view-all-link:hover { color: #A8C896; } /* --- No results state --- */ .coa-no-results { padding: 20px; text-align: center; color: rgba(212, 231, 197, 0.5); font-family: 'DM Sans', sans-serif; font-size: 14px; } /* --- Responsive --- */ @media (max-width: 480px) { .coa-list-item { flex-direction: column; align-items: flex-start; gap: 10px; } .coa-list-item-actions { width: 100%; } a.coa-list-view-btn { width: 100%; justify-content: center; } .coa-direct-links { flex-direction: column; } a.coa-direct-btn { width: 100%; justify-content: center; } } /* ===== 3.17 bundled source: assets/haze-dawn-overrides.css ===== */ /* ============================================ THE HAZE CONNECT — Dawn Override Fixes File: haze-dawn-overrides.css Location: Assets/ folder in Shopify theme PURPOSE: Override Dawn's base.css to enforce Haze Connect brand styles. FONTS: - Headings: Big Shoulders Display (condensed, bold) - Body: DM Sans (clean, readable) - Accent: Caveat (handwritten taglines) LOAD ORDER: After haze-custom.css {{ 'haze-dawn-overrides.css' | asset_url | stylesheet_tag }} ============================================ */ /* === CRITICAL MOBILE LAYOUT FIX === */ html, body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; } body { display: block !important; min-height: 100vh !important; } *, *::before, *::after { max-width: 100vw; } /* === RESET DAWN'S CSS VARIABLES === */ :root { --color-foreground: 255, 255, 255 !important; --color-background: 14, 31, 38 !important; --font-heading-family: 'Big Shoulders Display', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; --font-body-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; --font-body-weight: 400 !important; --font-heading-weight: 700 !important; --page-width: 1280px !important; } /* === BODY RESET === */ body { font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; background: #0E1F26 !important; color: #FFFFFF !important; display: block !important; grid-template-rows: none !important; grid-template-columns: none !important; min-height: auto !important; font-size: 16px !important; letter-spacing: 0 !important; line-height: 1.7 !important; } /* === GLOBAL HEADING OVERRIDES === */ h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5 { font-family: 'Big Shoulders Display', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; color: inherit !important; letter-spacing: -0.5px !important; line-height: 1.05 !important; font-style: normal !important; } /* === GLOBAL BODY TEXT OVERRIDES === */ p, span, a, li, div, button, input, textarea, select { font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } /* === DAWN SECTION WRAPPER RESET === */ .shopify-section { margin: 0 !important; padding: 0 !important; } .section-template--* { margin: 0 !important; padding: 0 !important; } /* === SECTION LABELS === */ .section-label { font-family: 'DM Sans', 'Helvetica Neue', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 4px !important; text-transform: uppercase !important; display: block !important; margin-bottom: 14px !important; } .section-title { font-family: 'Big Shoulders Display', 'Helvetica Neue', sans-serif !important; font-weight: 800 !important; line-height: 1.05 !important; margin-bottom: 20px !important; } .section-subtitle { font-family: 'DM Sans', 'Helvetica Neue', sans-serif !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.7 !important; } /* === AGE GATE === */ .age-gate-box { background: #FFFFFF !important; } .age-gate-box h2 { color: #1A2E35 !important; } .age-gate-box p { color: #3D5A63 !important; } /* === FADE ANIMATIONS === */ .fade-up { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-up.visible { opacity: 1 !important; transform: translateY(0) !important; } /* === ANNOUNCEMENT BAR === */ .announcement-bar { font-family: 'Big Shoulders Display', sans-serif !important; background: #8FB479 !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 10px 24px !important; } .announcement-bar a { color: #162F38 !important; } /* === NAVIGATION === */ .nav { position: sticky !important; top: 0 !important; z-index: 1000 !important; background: rgba(14, 31, 38, 0.92) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } .nav-inner { display: flex !important; height: 72px !important; } .nav-logo-text { color: #FFFFFF !important; font-family: 'Big Shoulders Display', sans-serif !important; font-size: 20px !important; font-weight: 700 !important; } .nav-links a { font-family: 'Big Shoulders Display', sans-serif !important; color: rgba(255,255,255,0.7) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; } .nav-links a:hover { color: #FFFFFF !important; } /* === NAV DROPDOWN (Shop hover menu) === */ .nav-links li { position: relative !important; list-style: none !important; } .nav-dropdown { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; background: rgba(14, 31, 38, 0.97) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(143, 180, 121, 0.12) !important; border-radius: 10px !important; padding: 12px 0 !important; min-width: 200px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: all 0.25s ease !important; z-index: 100 !important; margin-top: 8px !important; } .nav-links li:hover > .nav-dropdown { opacity: 1 !important; visibility: visible !important; pointer-events: all !important; } .nav-dropdown a { display: block !important; padding: 10px 24px !important; font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.7) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap !important; transition: all 0.2s !important; } .nav-dropdown a:hover { color: #FFFFFF !important; background: rgba(143, 180, 121, 0.1) !important; padding-left: 28px !important; } .nav-dropdown a::after { display: none !important; } .nav-actions a { color: rgba(255,255,255,0.7) !important; } .nav-actions a:hover { color: #FFFFFF !important; } /* Change the margin-top from 8px to 0 */ .nav-dropdown { margin-top: 0 !important; padding-top: 8px !important; } /* Add a hover bridge using ::before on the dropdown */ .nav-dropdown::before { content: '' !important; position: absolute !important; top: -12px !important; left: 0 !important; right: 0 !important; height: 12px !important; background: transparent !important; } /* === HERO SECTION === */ .hero { position: relative !important; min-height: 90vh !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: transparent !important; } /* === HERO BACKGROUND IMAGE === */ .hero-bg { position: absolute !important; inset: 0 !important; z-index: 0 !important; overflow: hidden !important; } .hero { position: relative !important; } .hero-bg img { opacity: 0.45 !important; } .hero-content { position: relative !important; z-index: 2 !important; } .hero-grid { position: relative !important; z-index: 1 !important; } .hero-bg { position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, #0E1F26 0%, #204B57 50%, #162F38 100%) !important; } .hero-content { position: relative !important; z-index: 2 !important; } .hero-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 60px !important; align-items: center !important; } .hero-tagline { font-family: 'Caveat', cursive !important; font-size: 26px !important; color: #FFA637 !important; } .hero-title { font-family: 'Big Shoulders Display', sans-serif !important; font-size: clamp(38px, 7vw, 96px) !important; font-weight: 800 !important; line-height: 0.95 !important; letter-spacing: -1px !important; color: #FFFFFF !important; margin-bottom: 28px !important; } .hero-title .highlight { color: #8FB479 !important; font-family: inherit !important; font-weight: inherit !important; font-style: normal !important; letter-spacing: inherit !important; } .hero-description { font-family: 'DM Sans', sans-serif !important; font-size: 18px !important; font-weight: 300 !important; color: rgba(255,255,255,0.7) !important; line-height: 1.7 !important; margin-bottom: 40px !important; } .hero-ctas { display: flex !important; gap: 16px !important; } .hero-product-card { background: rgba(32, 75, 87, 0.5) !important; border: 1px solid rgba(143, 180, 121, 0.15) !important; border-radius: 16px !important; padding: 48px !important; } .hero-product-badge { background: #FFA637 !important; color: #162F38 !important; } .hero-product-name { font-family: 'Big Shoulders Display', sans-serif !important; color: #FFFFFF !important; font-size: 28px !important; font-weight: 700 !important; } .hero-product-strain { color: #8FB479 !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; } .hero-product-price { color: #FFA637 !important; font-size: 32px !important; font-weight: 700 !important; } .hero-float { color: rgba(255,255,255,0.7) !important; background: rgba(14, 31, 38, 0.85) !important; } /* === TRUST BAR === */ .trust-bar { background: #FFFFFF !important; padding: 36px 0 !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; } .trust-bar-inner { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; text-align: center !important; } .trust-item { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } .trust-item svg { color: #6E9A5A !important; } .trust-item strong { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #1A2E35 !important; } .trust-item span { font-size: 15px !important; color: #7A9AA3 !important; font-weight: 400 !important; } /* === FEATURED COLLECTIONS === */ .collections { padding: 80px 0 100px !important; background: #F7F6F3 !important; } .collections-header .section-label { color: #6E9A5A !important; } .collections-header .section-title { color: #1A2E35 !important; } .collections-header .section-subtitle { color: #3D5A63 !important; } .collections-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } .collection-card { position: relative !important; border-radius: 12px !important; overflow: hidden !important; aspect-ratio: 3/4 !important; background: #204B57 !important; min-height: 320px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding: 24px !important; } .collection-card img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 0 !important; } .collection-card::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to top, rgba(14,31,38,0.85) 0%, rgba(14,31,38,0.3) 50%, transparent 100%) !important; z-index: 1 !important; pointer-events: none !important; } .collection-card .collection-tag, .collection-card .collection-name, .collection-card .collection-count, .collection-card .collection-arrow { position: relative !important; z-index: 2 !important; } .collection-name { font-family: 'Big Shoulders Display', sans-serif !important; color: #FFFFFF !important; font-size: 30px !important; font-weight: 700 !important; } .collection-tag { color: #8FB479 !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } .collection-count { color: rgba(255,255,255,0.45) !important; } .collection-arrow { color: #FFFFFF !important; } /* === BEST SELLERS === */ .best-sellers { padding: 100px 0 !important; background: #162F38 !important; } .best-sellers-header .section-label { color: #8FB479 !important; } .best-sellers-header .section-title { color: #FFFFFF !important; } .products-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; } .product-card { background: rgba(32, 75, 87, 0.3) !important; border: 1px solid rgba(143, 180, 121, 0.08) !important; border-radius: 12px !important; overflow: hidden !important; text-decoration: none !important; transition: transform 0.3s ease, border-color 0.3s ease !important; } .product-card:hover { transform: translateY(-4px) !important; border-color: rgba(143,180,121,0.25) !important; } .product-image { width: 100% !important; aspect-ratio: 1 !important; background: linear-gradient(135deg, rgba(143, 180, 121, 0.06), rgba(32, 75, 87, 0.3)) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .product-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .product-category { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: #8FB479 !important; } .product-name { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: #FFFFFF !important; } .product-desc { font-size: 14px !important; color: rgba(255,255,255,0.45) !important; font-weight: 300 !important; } .product-price { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 26px !important; font-weight: 700 !important; color: #FFA637 !important; } .product-price .was { font-size: 14px !important; color: rgba(255,255,255,0.45) !important; text-decoration: line-through !important; } .product-add { display: block !important; width: calc(100% - 40px) !important; margin: 0 20px 20px !important; padding: 14px !important; background: transparent !important; border: 1px solid rgba(143, 180, 121, 0.2) !important; color: #8FB479 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; text-align: center !important; border-radius: 6px !important; cursor: pointer !important; } .product-add:hover { background: #8FB479 !important; color: #162F38 !important; } /* === BRAND STORY === */ .brand-story { padding: 120px 0 !important; background: #FFFFFF !important; } .brand-story-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; align-items: center !important; } .brand-story-box { background: #204B57 !important; border-radius: 12px !important; aspect-ratio: 4/3 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .brand-story-text .caveat-line { font-family: 'Caveat', cursive !important; color: #FFA637 !important; font-size: 24px !important; } .brand-story-text h2 { font-family: 'Big Shoulders Display', sans-serif !important; color: #1A2E35 !important; font-size: clamp(36px, 5vw, 60px) !important; font-weight: 800 !important; line-height: 1.05 !important; } .brand-story-text h2 .green { color: #6E9A5A !important; } .brand-story-text p { font-family: 'DM Sans', sans-serif !important; color: #3D5A63 !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.8 !important; } .brand-values { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; } .brand-value { display: flex !important; align-items: flex-start !important; gap: 12px !important; } .brand-value-icon { background: #F2F5EF !important; border-radius: 10px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .brand-value-icon svg { color: #6E9A5A !important; } .brand-value-text strong { font-family: 'Big Shoulders Display', sans-serif !important; color: #1A2E35 !important; font-size: 18px !important; font-weight: 700 !important; display: block !important; } .brand-value-text span { color: #7A9AA3 !important; font-size: 14px !important; font-weight: 300 !important; } /* === HOW IT WORKS === */ .how-it-works { padding: 100px 0 !important; background: #162F38 !important; } .how-it-works-header .section-label { color: #8FB479 !important; } .how-it-works-header .section-title { color: #FFFFFF !important; } .how-it-works-header .section-subtitle { color: rgba(255,255,255,0.7) !important; } .steps-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 40px !important; } .step-number { width: 80px !important; height: 80px !important; border-radius: 50% !important; background: rgba(143, 180, 121, 0.1) !important; border: 2px solid #8FB479 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 24px !important; font-family: 'Big Shoulders Display', sans-serif !important; font-size: 32px !important; font-weight: 700 !important; color: #8FB479 !important; } .step-card { text-align: center !important; } .step-card h3 { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 26px !important; font-weight: 700 !important; color: #FFFFFF !important; margin-bottom: 10px !important; } .step-card p { font-family: 'DM Sans', sans-serif !important; font-size: 18px !important; color: rgba(255,255,255,0.7) !important; font-weight: 300 !important; line-height: 1.7 !important; } /* === SHOP BY EFFECT === */ .shop-by-effect { padding: 100px 0 !important; background: #FFFFFF !important; } .shop-by-effect-header .section-label { color: #6E9A5A !important; } .shop-by-effect-header .section-title { color: #1A2E35 !important; } .shop-by-effect-header .section-subtitle { color: #3D5A63 !important; } .effects-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; } .effect-card { background: #F7F6F3 !important; border: 1px solid rgba(32, 75, 87, 0.08) !important; border-radius: 12px !important; padding: 28px 20px !important; text-align: center !important; text-decoration: none !important; transition: all 0.3s !important; } .effect-card:hover { transform: translateY(-4px) !important; border-color: #8FB479 !important; } .effect-card h3 { font-family: 'Big Shoulders Display', sans-serif !important; color: #1A2E35 !important; font-size: 22px !important; font-weight: 700 !important; } .effect-card p { font-family: 'DM Sans', sans-serif !important; color: #7A9AA3 !important; font-size: 15px !important; } /* === REVIEWS === */ .reviews { padding: 100px 0 !important; background: #162F38 !important; } .reviews-header .section-label { color: #8FB479 !important; } .reviews-header .section-title { color: #FFFFFF !important; } .reviews-stats { gap: 40px !important; } .review-stat .stat-number { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 48px !important; font-weight: 800 !important; color: #FFA637 !important; } .review-stat .stat-label { font-size: 14px !important; color: rgba(255,255,255,0.45) !important; } .reviews-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } .review-card { background: rgba(32, 75, 87, 0.3) !important; border: 1px solid rgba(143, 180, 121, 0.08) !important; border-radius: 12px !important; padding: 28px !important; } .review-text { font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; color: rgba(255,255,255,0.7) !important; font-weight: 300 !important; line-height: 1.7 !important; } .review-author { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #FFFFFF !important; } /* === BLOG / EDUCATION === */ .education { padding: 100px 0 !important; background: #F7F6F3 !important; } .education-header .section-label { color: #6E9A5A !important; } .education-header .section-title { color: #1A2E35 !important; } .blog-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } .blog-card-content h3 { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; } .blog-card-content p { font-family: 'DM Sans', sans-serif !important; font-size: 15px !important; } /* === FAQ === */ .faq { padding: 100px 0 !important; background: #162F38 !important; } .faq-header .section-label { color: #8FB479 !important; } .faq-header .section-title { color: #FFFFFF !important; } .faq-question { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 20px !important; font-weight: 700 !important; } .faq-answer p { font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.8 !important; } /* === NEWSLETTER === */ .newsletter { padding: 100px 0 !important; background: #204B57 !important; } .newsletter-inner .section-title { color: #FFFFFF !important; } .newsletter-input { font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; } /* === FOOTER === */ .footer-col h4 { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 2px !important; } .footer-col a { font-family: 'DM Sans', sans-serif !important; font-size: 15px !important; } /* === BUTTONS === */ .btn { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 2px !important; padding: 15px 44px !important; } /* Fix btn-primary text overridden by global link color rules */ .btn-primary, .btn-primary:visited, .article-cta-section .btn, .mid-article-cta-btn, .mid-article-cta-btn:visited { color: #162F38 !important; -webkit-text-fill-color: #162F38 !important; } /* === PRODUCT PAGE LAYOUT === */ .haze-product { background: #0E1F26 !important; padding-bottom: 40px !important; } .product-page-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 48px !important; align-items: start !important; padding: 40px 0 !important; } .product-gallery { position: sticky !important; top: 100px !important; } .product-main-image { width: 100% !important; aspect-ratio: 1 !important; background: rgba(32, 75, 87, 0.2) !important; border-radius: 12px !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; } .product-main-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .product-info { padding: 0 !important; } .product-category-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #8FB479 !important; margin-bottom: 8px !important; } .product-title { font-family: 'Big Shoulders Display', sans-serif !important; font-size: clamp(28px, 4vw, 42px) !important; font-weight: 800 !important; color: #FFFFFF !important; line-height: 1.1 !important; margin-bottom: 8px !important; } .product-price-display { font-size: 28px !important; font-weight: 700 !important; color: #FFA637 !important; margin-bottom: 16px !important; } /* === PRODUCT PAGE RELATED PRODUCTS === */ .product-related-section { max-width: 100% !important; } .related-product-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr !important; } .hero-visual { display: none !important; } .hero { min-height: 70vh !important; } .collections-grid { grid-template-columns: repeat(2, 1fr) !important; } .products-grid { grid-template-columns: repeat(2, 1fr) !important; } .brand-story-inner { grid-template-columns: 1fr !important; } .footer-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 768px) { .nav-links { display: none !important; } .nav-toggle { display: flex !important; } .nav-links.open { display: flex !important; } .hero { min-height: auto !important; } .hero-title { font-size: clamp(48px, 10vw, 100px) !important; } .hero-description { font-size: 18px !important; } .trust-bar-inner { grid-template-columns: repeat(2, 1fr) !important; } .collections-grid { grid-template-columns: 1fr !important; } .products-grid { grid-template-columns: repeat(2, 1fr) !important; } .steps-grid { grid-template-columns: 1fr !important; } .effects-grid { grid-template-columns: repeat(2, 1fr) !important; } .reviews-grid { grid-template-columns: 1fr !important; } .blog-grid { grid-template-columns: 1fr !important; } .footer-grid { grid-template-columns: 1fr !important; } .newsletter-form { flex-direction: column !important; } .best-sellers-header { flex-direction: column !important; align-items: flex-start !important; } .education-header { flex-direction: column !important; align-items: flex-start !important; } .brand-story { padding: 60px 0 !important; } .brand-story-text p { font-size: 17px !important; } .brand-values { grid-template-columns: 1fr !important; } .brand-story-accent { display: none !important; } .product-name { font-size: 18px !important; } .product-price { font-size: 22px !important; } .product-desc { display: none !important; } .product-add { width: calc(100% - 28px) !important; margin: 0 14px 14px !important; padding: 10px !important; font-size: 12px !important; } .product-page-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .product-gallery { position: static !important; } /* === RELATED PRODUCTS FIX === */ .product-related-section { padding: 32px 0 40px !important; border-top: 1px solid rgba(255,255,255,0.04) !important; max-width: 100% !important; overflow: hidden !important; } .related-products-scroll { display: flex !important; gap: 12px !important; overflow-x: auto !important; padding-bottom: 8px !important; } .related-product-card { flex: 0 0 160px !important; max-width: 160px !important; background: rgba(32,75,87,0.3) !important; border: 1px solid rgba(143,180,121,0.08) !important; border-radius: 10px !important; overflow: hidden !important; text-decoration: none !important; } .related-product-card img { width: 160px !important; height: 160px !important; object-fit: cover !important; display: block !important; } .related-product-info { padding: 10px 12px !important; } .related-product-name { font-size: 12px !important; font-weight: 600 !important; color: #FFFFFF !important; display: block !important; } .related-product-price { font-size: 14px !important; font-weight: 700 !important; color: #FFA637 !important; } .faq-question { font-size: 20px !important; } .step-card h3 { font-size: 22px !important; } .step-card p { font-size: 16px !important; } .review-stat .stat-number { font-size: 36px !important; } } @media (max-width: 420px) { .hero-title { font-size: clamp(40px, 10vw, 80px) !important; } .products-grid { grid-template-columns: 1fr !important; } .trust-bar-inner { grid-template-columns: 1fr !important; } } /* === CART DRAWER POSITION FIX === */ .cart-drawer, #cart-drawer { position: fixed !important; top: 0 !important; right: 0 !important; height: 100vh !important; height: 100dvh !important; z-index: 9999 !important; transform: translateX(100%) !important; } .cart-drawer.open, #cart-drawer.open { transform: translateX(0) !important; } .cart-drawer-overlay, #cart-drawer-overlay { position: fixed !important; inset: 0 !important; z-index: 9998 !important; } /* === QTY TIERS — STACKED LIST === */ div.qty-tiers, .product-info .qty-tiers, .haze-product .qty-tiers { display: flex !important; flex-direction: column !important; gap: 0 !important; margin-top: 24px !important; margin-bottom: 20px !important; width: 100% !important; } div.qty-tiers .qty-tiers-label, .qty-tiers p.qty-tiers-label { font-size: 11px !important; font-weight: 700 !important; color: rgba(255,255,255,0.45) !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; margin-bottom: 10px !important; } button.qty-tier, .qty-tiers .qty-tier { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 14px 18px !important; margin-bottom: 8px !important; border: 1px solid rgba(143,180,121,0.15) !important; background: transparent !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; font-family: 'DM Sans', sans-serif !important; text-align: left !important; min-height: auto !important; gap: 0 !important; flex: none !important; } button.qty-tier:hover, .qty-tiers .qty-tier:hover { border-color: rgba(143,180,121,0.4) !important; background: rgba(143,180,121,0.05) !important; } button.qty-tier.qty-tier-active, .qty-tiers .qty-tier-active { border-color: #8FB479 !important; background: rgba(143,180,121,0.1) !important; } .qty-tier .qty-tier-top { display: flex !important; align-items: center !important; gap: 10px !important; } .qty-tier .qty-tier-amount { font-size: 16px !important; font-weight: 700 !important; color: #FFFFFF !important; } .qty-tier .qty-tier-badge { font-size: 10px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 4px !important; background: #FFA637 !important; color: #162F38 !important; } .qty-tier .qty-tier-badge-default { background: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.5) !important; } .qty-tier .qty-tier-label { font-size: 13px !important; color: rgba(255,255,255,0.5) !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } /* === VARIANT GRID ACTIVE FIX === */ .variant-grid-btn-active { border-color: #8FB479 !important; background: rgba(143,180,121,0.12) !important; color: #FFFFFF !important; font-weight: 700 !important; box-shadow: 0 0 0 1px #8FB479 !important; } .variant-grid-btn-active .variant-grid-price { color: #8FB479 !important; opacity: 1 !important; } /* === QTY TIER LAYOUT FIX === */ .qty-tier { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 14px 8px !important; min-height: 70px !important; } .qty-tier .qty-tier-qty, .qty-tier .qty-tier-badge { display: inline !important; } .qty-tier .qty-tier-label { display: block !important; width: 100% !important; margin-top: 4px !important; } /* === COLLECTION SEO COLLAPSIBLE === */ .collection-seo-wrapper { margin-top: 16px !important; } .collection-seo-content { position: relative !important; max-height: 180px !important; overflow: hidden !important; transition: max-height 0.5s ease !important; } .collection-seo-content.expanded { max-height: 5000px !important; } .collection-seo-fade { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 100px !important; background: linear-gradient(to bottom, transparent, #0E1F26) !important; pointer-events: none !important; transition: opacity 0.3s ease !important; } .collection-seo-content.expanded .collection-seo-fade { opacity: 0 !important; } .seo-toggle-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: none !important; border: 1px solid rgba(143,180,121,0.2) !important; color: #8FB479 !important; font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; padding: 8px 16px !important; border-radius: 6px !important; cursor: pointer !important; margin-top: 12px !important; transition: all 0.2s !important; } .seo-toggle-btn:hover { background: rgba(143,180,121,0.1) !important; border-color: rgba(143,180,121,0.4) !important; } .seo-toggle-btn svg { transition: transform 0.3s ease !important; } .collection-seo-content.expanded + .seo-toggle-btn svg { transform: rotate(180deg) !important; } /* === MOBILE HERO FIX === */ @media (max-width: 768px) { .hero, .hero-bg, .hero-content, .haze-hero-section { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } .hero-inner { flex-direction: column !important; padding: 0 20px !important; } .hero-product-card { display: none !important; } .hero-float { display: none !important; } } /* === MOBILE AGE GATE FIX === */ @media (max-width: 768px) { .age-gate-overlay { display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; } .age-gate-modal, .age-gate-box { position: relative !important; width: 90% !important; max-width: 360px !important; margin: auto !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; } } /* === COLLECTION CARD IMAGES === */ .collection-card-bg { opacity: 0.6 !important; } .collection-card:hover .collection-card-bg { opacity: 0.8 !important; transition: opacity 0.3s ease !important; } /* === BLOG ARTICLES GRID === */ .blog-articles-section { background: #162F38 !important; padding: 60px 0 80px !important; } .blog-articles-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } .blog-article-card { background: rgba(32,75,87,0.3) !important; border: 1px solid rgba(143,180,121,0.08) !important; border-radius: 12px !important; overflow: hidden !important; text-decoration: none !important; color: inherit !important; display: block !important; transition: transform 0.3s ease, border-color 0.3s ease !important; } .blog-article-card:hover { transform: translateY(-4px) !important; border-color: rgba(143,180,121,0.25) !important; } .blog-article-image { aspect-ratio: 16/10 !important; background: rgba(32,75,87,0.5) !important; overflow: hidden !important; position: relative !important; } .blog-article-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.3s ease !important; } .blog-article-card:hover .blog-article-image img { transform: scale(1.03) !important; } .blog-article-image-placeholder { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(32,75,87,0.5) !important; } .blog-article-tag { position: absolute !important; top: 12px !important; left: 12px !important; background: #8FB479 !important; color: #ffffff !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; padding: 5px 10px !important; border-radius: 4px !important; } .blog-article-content { padding: 24px !important; } .blog-article-date { font-size: 12px !important; color: rgba(255,255,255,0.4) !important; margin-bottom: 8px !important; } .blog-article-title { font-family: 'Big Shoulders Display', sans-serif !important; font-size: 20px !important; font-weight: 700 !important; color: #FFFFFF !important; margin-bottom: 8px !important; line-height: 1.3 !important; } .blog-article-excerpt { font-size: 14px !important; color: rgba(255,255,255,0.55) !important; font-weight: 300 !important; line-height: 1.6 !important; margin-bottom: 12px !important; } .blog-article-link { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #8FB479 !important; } /* === BLOG HEADER === */ .blog-header-section { background: linear-gradient(135deg, #0E1F26 0%, #204B57 50%, #162F38 100%) !important; padding: 60px 0 !important; text-align: center !important; } .blog-page-title { font-family: 'Big Shoulders Display', sans-serif !important; font-size: clamp(36px, 5vw, 56px) !important; font-weight: 800 !important; color: #FFFFFF !important; margin-bottom: 12px !important; } .blog-page-desc { font-size: 17px !important; color: rgba(255,255,255,0.6) !important; font-weight: 300 !important; max-width: 560px !important; margin: 0 auto !important; } /* === BLOG PAGINATION === */ .blog-pagination { padding: 40px 0 !important; text-a } /* === ARTICLE PAGE === */ ← PASTE STARTS HERE .article-header-section { background: #0E1F26 !important; padding: 56px 0 48px !important; text-align: center !important; } .article-header-inner { max-width: 760px !important; margin: 0 auto !important; padding: 0 24px !important; } .article-tags-top { display: flex !important; justify-content: center !important; gap: 8px !important; margin-bottom: 14px !important; } .article-tag { background: rgba(143,180,121,0.15) !important; color: #8FB479 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; padding: 4px 12px !important; border-radius: 4px !important; } .article-page-title { font-family: 'Big Shoulders Display', sans-serif !important; font-size: clamp(28px, 4vw, 44px) !important; font-weight: 800 !important; color: #FFFFFF !important; line-height: 1.15 !important; margin-bottom: 16px !important; letter-spacing: -0.5px !important; } .article-author-card { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin-top: 20px !important; } .article-author-avatar { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(143,180,121,0.2) !important; border: 1px solid rgba(143,180,121,0.35) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'Big Shoulders Display', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #8FB479 !important; -webkit-text-fill-color: #8FB479 !important; flex-shrink: 0 !important; text-transform: uppercase !important; } .article-author-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; } .article-author-name { font-size: 14px !important; font-weight: 600 !important; color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; line-height: 1 !important; } .article-meta { font-size: 12px !important; color: rgba(255,255,255,0.35) !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 0 !important; } .article-meta-sep { margin: 0 6px !important; } /* === ARTICLE FEATURED IMAGE === */ .article-featured-image { background: #0E1F26 !important; padding: 0 0 48px !important; } .article-featured-image .container { max-width: 960px !important; margin: 0 auto !important; padding: 0 24px !important; } /* === ARTICLE CONTENT === */ .article-content-section { background: #162F38 !important; padding: 60px 0 !important; } .article-content-section .container { max-width: 100% !important; } .article-content-inner { max-width: 720px !important; width: 100% !important; margin: 0 auto !important; padding: 0 24px !important; box-sizing: border-box !important; } .article-content-inner p { font-size: 16px !important; color: rgba(255,255,255,0.82) !important; line-height: 1.85 !important; font-weight: 400 !important; margin-bottom: 22px !important; } .article-content-inner > p:first-of-type { font-size: 18px !important; font-weight: 500 !important; color: rgba(255,255,255,0.92) !important; line-height: 1.7 !important; border-left: 3px solid #8FB479 !important; padding-left: 18px !important; margin-bottom: 28px !important; } .article-content-inner h2 { font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: #8FB479 !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin: 48px 0 14px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(143,180,121,0.15) !important; } .article-content-inner h3 { font-family: 'DM Sans', sans-serif !important; font-size: 19px !important; font-weight: 700 !important; color: #FFFFFF !important; margin: 36px 0 10px !important; } .article-content-inner h4 { font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: rgba(255,255,255,0.85) !important; margin: 24px 0 8px !important; } .article-content-inner ul, .article-content-inner ol { color: rgba(255,255,255,0.82) !important; padding-left: 24px !important; margin: 16px 0 22px !important; font-weight: 400 !important; } .article-content-inner li { margin-bottom: 10px !important; line-height: 1.75 !important; } .article-content-inner blockquote { border-left: 3px solid #8FB479 !important; padding: 16px 24px !important; margin: 28px 0 !important; background: rgba(143,180,121,0.05) !important; border-radius: 0 8px 8px 0 !important; } .article-content-inner blockquote p { font-style: italic !important; color: rgba(255,255,255,0.65) !important; font-size: 15px !important; } .article-content-inner img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; margin: 28px 0 !important; } .article-content-inner table { width: 100% !important; border-collapse: collapse !important; margin: 28px 0 !important; } .article-content-inner th, .article-content-inner td { padding: 12px 16px !important; border: 1px solid rgba(143,180,121,0.15) !important; text-align: left !important; font-size: 14px !important; color: rgba(255,255,255,0.75) !important; } .article-content-inner th { background: rgba(32,75,87,0.4) !important; font-weight: 700 !important; color: #FFFFFF !important; } /* === ARTICLE TAGS BOTTOM === */ .article-tags-bottom { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 40px !important; padding-top: 24px !important; border-top: 1px solid rgba(143,180,121,0.1) !important; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; } .article-tag-link { background: rgba(143,180,121,0.1) !important; color: #8FB479 !important; font-size: 12px !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 20px !important; text-decoration: none !important; } .article-tag-link:hover { background: rgba(143,180,121,0.2) !important; } /* === BACK TO BLOG === */ .article-back-link { max-width: 720px !important; margin: 32px auto 0 !important; } .article-back-link a { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #8FB479 !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; } .article-back-link a:hover { color: #FFFFFF !important; } /* === ARTICLE BOTTOM BAR === */ .article-bottom-bar { max-width: 720px !important; margin: 32px auto 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 16px !important; } .article-bottom-bar .article-back-link { max-width: none !important; margin: 0 !important; } .article-share { display: flex !important; align-items: center !important; gap: 8px !important; } .article-share-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.35) !important; margin-right: 4px !important; } .article-share-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.5) !important; text-decoration: none !important; cursor: pointer !important; transition: background 0.2s, color 0.2s, border-color 0.2s !important; -webkit-text-fill-color: currentColor !important; } .article-share-btn:hover { background: rgba(143,180,121,0.15) !important; border-color: rgba(143,180,121,0.4) !important; color: #8FB479 !important; -webkit-text-fill-color: #8FB479 !important; } .article-share-copy { background: rgba(255,255,255,0.06) !important; padding: 0 !important; } .article-share-copy .icon-check { display: none !important; } .article-share-copy.copied .icon-copy { display: none !important; } .article-share-copy.copied .icon-check { display: block !important; color: #8FB479 !important; -webkit-text-fill-color: #8FB479 !important; } /* === ARTICLE CTA BANNER === */ .article-cta-section { background: #204B57 !important; padding: 60px 0 !important; } .article-cta-inner { text-align: center !important; max-width: 560px !important; margin: 0 auto !important; } .article-cta-title { font-size: 32px !important; font-weight: 700 !important; color: #FFFFFF !important; margin-bottom: 12px !important; } .article-cta-desc { font-size: 16px !important; color: rgba(255,255,255,0.6) !important; font-weight: 300 !important; margin-bottom: 24px !important; } /* === RELATED ARTICLES === */ .article-related-section { background: #0E1F26 !important; padding: 60px 0 80px !important; } .article-related-section .container { max-width: 1100px !important; margin: 0 auto !important; } .article-related-title { font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; color: #8FB479 !important; text-transform: uppercase !important; letter-spacing: 3px !important; margin-bottom: 28px !important; } .article-related-section .blog-article-title { font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #FFFFFF !important; line-height: 1.4 !important; } .article-related-section .blog-article-date { font-size: 11px !important; color: rgba(255,255,255,0.35) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .article-related-section .blog-article-read { font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; color: #8FB479 !important; } .article-related-section .blog-article-title, .article-related-section .blog-article-title a { font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; line-height: 1.4 !important; text-decoration: none !important; } .article-related-section .blog-article-date { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } /* === BLOG ARTICLE RESPONSIVE === */ @media (max-width: 768px) { .blog-articles-grid { grid-template-columns: 1fr !important; } .article-content-inner { padding: 0 16px !important; } } /* === LINK COLORS === */ a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link) { color: #8FB479 !important; } a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link):visited { color: #8FB479 !important; } a:hover { color: #A8C896 !important; } /* Keep nav, buttons, and cards from being affected */ .btn, .btn-primary, .btn-outline, nav a, .nav-link, .nav-dropdown a, .product-card, .blog-card, .blog-article-card, .collection-card, .store-card-directions, .footer-col a, .footer-bottom a, .breadcrumbs a, .pagination-btn, .pagination-num { color: inherit !important; } /* === ARTICLE CONTENT LINKS === */ .article-content-section a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), .article-content-inner a, .article-content-inner p a, .article-content-section p a[href] { color: #8FB479 !important; text-decoration: underline !important; -webkit-text-fill-color: #8FB479 !important; } /* === ARTICLE/PAGE BODY LINK COLORS === */ .rte a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), .article-content-section a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), .article-body a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), .page-content a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), .haze-article a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), .haze-page a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), main a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link) { color: #8FB479 !important; text-decoration: underline !important; } .rte a:visited, .article-content-section a:visited, main a:visited { color: #8FB479 !important; } .rte a:hover, .article-content-section a:hover, main a:hover { color: #A8C896 !important; } /* === FORCE ALL LINK COLORS === */ :root { --color-foreground: 255, 255, 255; } a[href]:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link) { color: #8FB479 !important; } a[href]:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link):visited { color: #8FB479 !important; } a[href]:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link):hover { color: #A8C896 !important; } /* === GLOBAL LINK COLORS === */ .article-content-section a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), .article-content-inner a, .article-content-inner p a, .rte a:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), main a[href]:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link), a[href]:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link):not(.coa-list-view-btn):not(.coa-view-all-link) { color: #8FB479 !important; -webkit-text-fill-color: #8FB479 !important; } a[href]:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link):hover { color: #A8C896 !important; -webkit-text-fill-color: #A8C896 !important; } /* === CART CHECKOUT BUTTON TEXT FIX === */ .cart-drawer .cart-drawer-footer a.cart-drawer-checkout-btn { color: #162F38 !important; -webkit-text-fill-color: #162F38 !important; } /* ============================================= COA Button Color Overrides (2026-04-02) ============================================= */ .coa-direct-btn { color: #162F38 !important; -webkit-text-fill-color: #162F38 !important; text-decoration: none !important; background: #8FB479 !important; } .coa-direct-btn:hover { color: #162F38 !important; -webkit-text-fill-color: #162F38 !important; background: #A8C896 !important; } .coa-direct-btn svg { color: #162F38 !important; -webkit-text-fill-color: #162F38 !important; } .coa-list-view-btn { color: #8FB479 !important; text-decoration: none !important; } .coa-list-view-btn:hover { color: #8FB479 !important; } .coa-view-all-link { color: #8FB479 !important; } .coa-view-all-link:hover { color: #A8C896 !important; } /* === BLOG TAG CONTRAST FIX (May 25, 2026) === */ .blog-article-tag, .blog-card-tag { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* === Readable text on green-filled CTA buttons (fixes invisible green-on-green) === The global "a { color / -webkit-text-fill-color: green !important }" link rules outrank the theme's own .btn-primary color rule, so these filled buttons were painting their text the same green as their background (invisible). :not(#_hz) adds id-level specificity so these win reliably; it matches every element because nothing has id="_hz". Targets only green-FILLED button classes, so green outline/secondary links keep their color. */ .btn-primary:not(#_hz), a.btn-primary:not(#_hz), .mid-article-cta-btn:not(#_hz), .article-cta-section .btn:not(#_hz), .cart-drawer-empty .btn:not(#_hz){ color:#162F38 !important; -webkit-text-fill-color:#162F38 !important; } /* ============================================================ Dark-theme restyle for native cart & search pages These native Shopify (Dawn) pages shipped with a light color scheme that clashed with the dark storefront. Dawn builds these pages from CSS variables, so we remap the color-scheme variables to the brand dark palette. Scoped to cart-only (cart-items, .cart__footer-wrapper) and search-only (.template-search) selectors so no other template is affected. ============================================================ */ cart-items:not(#_hz), .cart__footer-wrapper:not(#_hz), .cart__footer-wrapper [class*="color-scheme"]:not(#_hz), .cart__contents [class*="color-scheme"]:not(#_hz), .template-search:not(#_hz), .template-search [class*="color-scheme"]:not(#_hz) { --color-background: 14,31,38; --gradient-background: #0E1F26; --color-foreground: 236,240,238; --color-button: 143,180,121; --color-button-text: 22,47,56; --color-shadow: 0,0,0; } cart-items, .cart__footer-wrapper [class*="color-scheme"], .template-search [class*="color-scheme"] { background: #0E1F26 !important; } /* Key text forced to readable white */ cart-items .cart-item__name, cart-items .cart-item__price, cart-items .cart-item__totals, cart-items .cart-item__details, .cart__footer .totals__total-value, .cart__footer .totals__total, .template-search .card__heading a, .template-search .card__information .price, .template-search .price, .template-search h1, .template-search .results-count { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Checkout button: brand green with dark readable label */ .cart__checkout-button, button[name="checkout"] { color: #162F38 !important; -webkit-text-fill-color: #162F38 !important; } /* ===== 3.17 bundled source: assets/product-v2-css.css ===== */ /* ============================================ HAZE CONNECT — Product Page v2 CSS File: product-v2-css.css Location: Assets/ folder in Shopify theme LOAD ORDER: After haze-dawn-overrides.css {{ 'product-v2-css.css' | asset_url | stylesheet_tag }} STYLES FOR: - Strain stats bar - 2x2 variant grid - Subscribe & Save option - Terpene profile tags - Image thumbnails - Product tabs - Related products scroll - Mobile menu (left-aligned with arrows) ============================================ */ /* === STRAIN STATS BAR === */ .strain-stats-bar { display: flex !important; gap: 20px !important; margin-bottom: 16px !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } .strain-stat { display: flex !important; flex-direction: column !important; gap: 2px !important; } .strain-stat-label { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.4) !important; } .strain-stat-value { font-size: 15px !important; font-weight: 700 !important; color: #FFFFFF !important; } .strain-stat-highlight { color: #FFA637 !important; } /* === PRODUCT STRAIN TYPE === */ .product-strain-type { font-size: 13px !important; color: rgba(255,255,255,0.45) !important; font-weight: 500 !important; margin-bottom: 8px !important; } /* === 2x2 VARIANT GRID === */ .variant-grid-2x2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 0 !important; } .variant-grid-btn { padding: 14px 12px !important; background: transparent !important; border: 1.5px solid rgba(143,180,121,0.15) !important; border-radius: 10px !important; color: rgba(255,255,255,0.7) !important; font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; position: relative !important; } .variant-grid-btn:hover { border-color: rgba(143,180,121,0.5) !important; color: #FFFFFF !important; } .variant-grid-btn-active { border-color: #8FB479 !important; background: #8FB479 !important; color: #162F38 !important; font-weight: 700 !important; box-shadow: 0 4px 16px rgba(143,180,121,0.2) !important; } .variant-grid-btn-active .variant-grid-price { color: #162F38 !important; opacity: 0.8 !important; } .variant-grid-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } .variant-grid-title { font-size: 14px !important; font-weight: 600 !important; } .variant-grid-price { font-size: 11px !important; font-weight: 500 !important; opacity: 0.6 !important; } .variant-grid-sold-out { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.35) !important; position: absolute !important; bottom: 4px !important; } /* === SUBSCRIBE & SAVE === */ .subscribe-save-option { margin-bottom: 20px !important; padding: 16px !important; border: 1.5px solid rgba(255,166,55,0.2) !important; border-radius: 10px !important; background: rgba(255,166,55,0.03) !important; cursor: pointer !important; transition: all 0.2s !important; } .subscribe-save-option:hover { border-color: rgba(255,166,55,0.4) !important; background: rgba(255,166,55,0.06) !important; } .subscribe-save-active { border-color: #FFA637 !important; background: rgba(255,166,55,0.08) !important; } .subscribe-save-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 6px !important; } .subscribe-save-left { display: flex !important; align-items: center !important; gap: 8px !important; } .subscribe-save-radio { width: 18px !important; height: 18px !important; border-radius: 50% !important; border: 2px solid #FFA637 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .subscribe-save-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #FFA637 !important; opacity: 0 !important; transition: opacity 0.2s !important; } .subscribe-save-active .subscribe-save-dot { opacity: 1 !important; } .subscribe-save-label { font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; } .subscribe-save-badge { font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; padding: 3px 10px !important; border-radius: 4px !important; background: #FFA637 !important; color: #162F38 !important; } .subscribe-save-desc { font-size: 12px !important; color: rgba(255,255,255,0.45) !important; padding-left: 26px !important; line-height: 1.5 !important; } .subscribe-save-frequency { display: none !important; margin-top: 12px !important; padding-left: 26px !important; } .subscribe-save-active .subscribe-save-frequency { display: block !important; } .subscribe-save-frequency select { width: 100% !important; padding: 10px 12px !important; background: #1A3D49 !important; border: 1px solid rgba(143,180,121,0.15) !important; border-radius: 8px !important; color: #FFFFFF !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; appearance: none !important; cursor: pointer !important; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; } .subscribe-save-frequency select:focus { outline: none !important; border-color: #FFA637 !important; } /* === TERPENE PROFILE TAGS === */ .terpene-profile { margin-top: 20px !important; padding-top: 16px !important; border-top: 1px solid rgba(255,255,255,0.05) !important; } .terpene-heading { font-size: 13px !important; font-weight: 700 !important; color: #FFFFFF !important; margin-bottom: 10px !important; } .terpene-tag-list { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .terpene-tag { padding: 4px 10px !important; background: rgba(143,180,121,0.15) !important; border: 1px solid rgba(143,180,121,0.2) !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 600 !important; color: #8FB479 !important; } /* === IMAGE THUMBNAILS === */ .product-thumbnails { display: flex !important; gap: 8px !important; margin-top: 12px !important; justify-content: center !important; } .product-thumb { width: 56px !important; height: 56px !important; border-radius: 8px !important; border: 2px solid transparent !important; overflow: hidden !important; cursor: pointer !important; transition: all 0.2s !important; background: #1A3D49 !important; flex-shrink: 0 !important; } .product-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .product-thumb-active { border-color: #8FB479 !important; } .product-thumb:hover { border-color: rgba(143,180,121,0.4) !important; } /* === PRODUCT TABS === */ .product-tabs-wrapper { padding: 0 0 32px !important; border-top: 1px solid rgba(255,255,255,0.04) !important; margin-top: 24px !important; } .product-tab-nav { display: flex !important; gap: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; margin-bottom: 20px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .product-tab-btn { padding: 12px 16px !important; background: none !important; border: none !important; border-bottom: 2px solid transparent !important; color: rgba(255,255,255,0.4) !important; font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.2s !important; white-space: nowrap !important; } .product-tab-btn:hover { color: rgba(255,255,255,0.7) !important; } .product-tab-active { color: #8FB479 !important; border-bottom-color: #8FB479 !important; } .product-tab-content { display: none !important; } .product-tab-visible { display: block !important; } .product-tab-content p { font-size: 14px !important; color: rgba(255,255,255,0.7) !important; line-height: 1.7 !important; } .tab-section-heading { font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; margin-bottom: 8px !important; } .tab-section-heading + .tab-section-heading, p + .tab-section-heading { margin-top: 16px !important; } .coa-link { display: inline-block !important; margin-top: 12px !important; color: #8FB479 !important; font-weight: 600 !important; text-decoration: underline !important; font-size: 14px !important; } .coa-link:hover { color: #A8C896 !important; } /* === COA MODAL === */ .coa-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.7) !important; z-index: 10000 !important; display: none !important; align-items: center !important; justify-content: center !important; } .coa-modal-overlay.open { display: flex !important; } .coa-modal { background: #0E1F26 !important; border: 1px solid rgba(143,180,121,0.15) !important; border-radius: 12px !important; padding: 24px !important; max-width: 90vw !important; max-height: 90vh !important; overflow: auto !important; } .coa-modal-close { background: none !important; border: none !important; color: rgba(255,255,255,0.5) !important; cursor: pointer !important; float: right !important; } /* === RELATED PRODUCTS SCROLL === */ .product-related-section { padding: 32px 0 40px !important; border-top: 1px solid rgba(255,255,255,0.04) !important; max-width: 100% !important; overflow: hidden !important; } .related-products-heading { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: #8FB479 !important; margin-bottom: 16px !important; } .related-products-scroll { display: flex !important; gap: 12px !important; overflow-x: auto !important; padding-bottom: 8px !important; -webkit-overflow-scrolling: touch !important; } .related-products-scroll::-webkit-scrollbar { height: 3px !important; } .related-products-scroll::-webkit-scrollbar-thumb { background: rgba(143,180,121,0.15) !important; border-radius: 2px !important; } .related-product-card { flex: 0 0 160px !important; max-width: 160px !important; background: rgba(32,75,87,0.3) !important; border: 1px solid rgba(143,180,121,0.08) !important; border-radius: 10px !important; overflow: hidden !important; text-decoration: none !important; color: inherit !important; transition: all 0.2s !important; } .related-product-card:hover { border-color: rgba(143,180,121,0.2) !important; transform: translateY(-2px) !important; } .related-product-image { width: 100% !important; aspect-ratio: 1 !important; background: linear-gradient(135deg, #1A3D49, #204B57) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } .related-product-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .related-product-info { padding: 10px 12px !important; } .related-product-name { font-size: 12px !important; font-weight: 600 !important; color: #FFFFFF !important; display: block !important; margin-bottom: 4px !important; } .related-product-price { font-size: 14px !important; font-weight: 700 !important; color: #FFA637 !important; } /* === QUANTITY TIERS (Buy More, Save More) === */ .qty-tiers-wrapper { margin-bottom: 20px !important; } .qty-tiers-heading { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.45) !important; margin-bottom: 8px !important; } .qty-tiers { display: flex !important; gap: 6px !important; } .qty-tier { flex: 1 !important; padding: 10px 8px !important; background: transparent !important; border: 1.5px solid rgba(143,180,121,0.12) !important; border-radius: 8px !important; text-align: center !important; cursor: pointer !important; transition: all 0.2s !important; color: rgba(255,255,255,0.6) !important; font-family: 'DM Sans', sans-serif !important; } .qty-tier:hover { border-color: rgba(143,180,121,0.4) !important; } .qty-tier-active { border-color: #8FB479 !important; background: rgba(143,180,121,0.08) !important; color: #FFFFFF !important; } .qty-tier-qty { font-size: 14px !important; font-weight: 700 !important; display: block !important; } .qty-tier-label { font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; display: block !important; margin-top: 2px !important; } .qty-tier-savings-msg { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; font-weight: 600 !important; color: #8FB479 !important; margin-bottom: 16px !important; } .qty-tier-savings-msg svg { color: #8FB479 !important; min-width: 14px !important; } /* === ADD TO CART BUTTON === */ .product-atc-btn { display: block !important; width: 100% !important; padding: 18px !important; background: #8FB479 !important; color: #162F38 !important; font-family: 'Big Shoulders Display', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; transition: background 0.2s ease !important; text-align: center !important; } .product-atc-btn:hover { background: #7DA368 !important; } .product-atc-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; } /* === TRUST BADGES (product page) === */ .product-trust-badges { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 20px !important; } .product-trust-badge { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; font-weight: 600 !important; color: rgba(255,255,255,0.5) !important; padding: 6px 12px !important; background: rgba(32,75,87,0.3) !important; border: 1px solid rgba(143,180,121,0.08) !important; border-radius: 6px !important; } .product-trust-badge svg { color: #8FB479 !important; min-width: 14px !important; } /* === FLAVOR PICKER === */ .flavor-picker { margin-bottom: 20px !important; } .flavor-picker-heading { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.45) !important; margin-bottom: 10px !important; } .flavor-swatches { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; } .flavor-swatch { width: 48px !important; height: 48px !important; border-radius: 10px !important; border: 2px solid rgba(143,180,121,0.12) !important; overflow: hidden !important; cursor: pointer !important; transition: all 0.2s !important; text-decoration: none !important; } .flavor-swatch:hover { border-color: rgba(143,180,121,0.4) !important; } .flavor-swatch-active { border-color: #8FB479 !important; box-shadow: 0 0 0 2px rgba(143,180,121,0.3) !important; } .flavor-swatch img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ============================================ MOBILE MENU — Left-aligned with arrows ============================================ */ .nav-links.open { text-align: left !important; } .nav-links.open li { text-align: left !important; } .haze-mobile-menu { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(14, 31, 38, 0.97) !important; backdrop-filter: blur(30px) !important; z-index: 150 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease !important; overflow-y: auto !important; padding: 100px 28px 40px !important; } .haze-mobile-menu.open { opacity: 1 !important; pointer-events: all !important; } .mobile-menu-section { margin-bottom: 24px !important; opacity: 0 !important; transform: translateY(16px) !important; transition: all 0.35s ease !important; } .haze-mobile-menu.open .mobile-menu-section { opacity: 1 !important; transform: translateY(0) !important; } .haze-mobile-menu.open .mobile-menu-section:nth-child(1) { transition-delay: 0.08s !important; } .haze-mobile-menu.open .mobile-menu-section:nth-child(2) { transition-delay: 0.14s !important; } .haze-mobile-menu.open .mobile-menu-section:nth-child(3) { transition-delay: 0.20s !important; } .haze-mobile-menu.open .mobile-menu-section:nth-child(4) { transition-delay: 0.26s !important; } .haze-mobile-menu.open .mobile-menu-section:nth-child(5) { transition-delay: 0.32s !important; } .haze-mobile-menu.open .mobile-menu-section:nth-child(6) { transition-delay: 0.38s !important; } .haze-mobile-menu.open .mobile-menu-section:nth-child(7) { transition-delay: 0.44s !important; } .mobile-menu-heading { font-size: 10px !important; font-weight: 800 !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: #8FB479 !important; margin-bottom: 12px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(143,180,121,0.15) !important; } .mobile-menu-link { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 16px !important; font-weight: 500 !important; color: rgba(255,255,255,0.7) !important; text-decoration: none !important; padding: 13px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; transition: all 0.2s ease !important; } .mobile-menu-link:hover, .mobile-menu-link:active { color: #8FB479 !important; padding-left: 8px !important; } .mobile-menu-link .menu-arrow { font-size: 14px !important; opacity: 0 !important; transform: translateX(-4px) !important; transition: all 0.2s !important; color: #8FB479 !important; } .mobile-menu-link:hover .menu-arrow { opacity: 1 !important; transform: translateX(0) !important; } .mobile-menu-standalone { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 15px !important; font-weight: 600 !important; color: #FFFFFF !important; text-decoration: none !important; padding: 14px 0 !important; letter-spacing: 0.3px !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; transition: all 0.2s !important; } .mobile-menu-standalone:hover { color: #8FB479 !important; padding-left: 8px !important; } .mobile-menu-standalone .menu-arrow { font-size: 14px !important; opacity: 0 !important; transform: translateX(-4px) !important; transition: all 0.2s !important; color: #8FB479 !important; } .mobile-menu-standalone:hover .menu-arrow { opacity: 1 !important; transform: translateX(0) !important; } /* Menu Social Icons */ .mobile-menu-social { display: flex !important; gap: 14px !important; padding-top: 20px !important; justify-content: center !important; } .mobile-menu-social a { width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 1px solid rgba(143,180,121,0.15) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(255,255,255,0.45) !important; text-decoration: none !important; transition: all 0.25s !important; } .mobile-menu-social a:hover { border-color: #8FB479 !important; color: #8FB479 !important; background: rgba(143,180,121,0.15) !important; } /* ============================================ COLLECTION PAGE STYLES ============================================ */ /* === COLLECTION BREADCRUMBS === */ .collection-breadcrumbs { background: #0E1F26 !important; padding: 16px 0 !important; } .breadcrumbs { font-size: 13px !important; color: rgba(255,255,255,0.45) !important; } .breadcrumbs a { color: rgba(255,255,255,0.45) !important; text-decoration: none !important; } .breadcrumbs a:hover { color: #8FB479 !important; } .breadcrumb-sep { margin: 0 8px !important; color: rgba(255,255,255,0.2) !important; } .breadcrumb-current { color: #FFFFFF !important; } /* === COLLECTION BANNER === */ .collection-banner { position: relative !important; min-height: 280px !important; display: flex !important; align-items: flex-end !important; padding: 48px 0 !important; background: linear-gradient(135deg, #0E1F26 0%, #204B57 50%, #162F38 100%) !important; overflow: hidden !important; } .collection-banner-bg { position: absolute !important; inset: 0 !important; z-index: 0 !important; } .collection-banner-bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 0.25 !important; } .collection-banner-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(to top, rgba(14,31,38,0.9) 0%, rgba(14,31,38,0.4) 100%) !important; z-index: 1 !important; } .collection-banner .container { position: relative !important; z-index: 2 !important; } .collection-banner-content { max-width: 1050px !important; } .collection-page-title { font-family: 'Big Shoulders Display', sans-serif !important; font-size: clamp(32px, 5vw, 52px) !important; font-weight: 700 !important; color: #FFFFFF !important; line-height: 1.1 !important; margin-bottom: 12px !important; } .collection-page-description { font-size: 16px !important; color: rgba(255,255,255,0.7) !important; font-weight: 300 !important; line-height: 1.7 !important; margin-bottom: 12px !important; } .collection-page-description p { color: rgba(255,255,255,0.7) !important; } .collection-product-count { font-size: 13px !important; color: #8FB479 !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; } /* === COLLECTION TOOLBAR === */ .collection-toolbar { background: #162F38 !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(143,180,121,0.1) !important; } .collection-toolbar-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; } .collection-results-count { font-size: 13px !important; color: rgba(255,255,255,0.45) !important; font-weight: 300 !important; } .collection-sort { display: flex !important; align-items: center !important; gap: 8px !important; } .sort-label { font-size: 13px !important; color: rgba(255,255,255,0.45) !important; font-weight: 400 !important; } .sort-select { background: rgba(32,75,87,0.4) !important; border: 1px solid rgba(143,180,121,0.15) !important; color: #FFFFFF !important; font-size: 13px !important; padding: 8px 32px 8px 12px !important; border-radius: 6px !important; cursor: pointer !important; font-family: 'DM Sans', sans-serif !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238FB479' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; } .sort-select option { background: #162F38 !important; color: #FFFFFF !important; } /* === COLLECTION PRODUCT GRID === */ .collection-products { background: #162F38 !important; padding: 48px 0 80px !important; } .collection-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; } /* === COLLECTION EMPTY STATE === */ .collection-empty { text-align: center !important; padding: 80px 0 !important; } .collection-empty p { color: rgba(255,255,255,0.7) !important; font-size: 18px !important; margin-bottom: 24px !important; } /* === PAGINATION === */ .collection-pagination { margin-top: 48px !important; padding-top: 32px !important; border-top: 1px solid rgba(143,180,121,0.1) !important; } .pagination { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .pagination-numbers { display: flex !important; gap: 4px !important; } .pagination-num { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 600 !important; color: rgba(255,255,255,0.45) !important; text-decoration: none !important; } .pagination-num:hover { background: rgba(32,75,87,0.4) !important; color: #FFFFFF !important; } .pagination-current { background: #8FB479 !important; color: #162F38 !important; } .pagination-btn { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 600 !important; color: #8FB479 !important; text-decoration: none !important; padding: 8px 16px !important; border-radius: 6px !important; } .pagination-btn:hover { background: rgba(143,180,121,0.1) !important; } .pagination-btn svg { color: #8FB479 !important; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .collection-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .strain-stats-bar { gap: 16px !important; flex-wrap: wrap !important; } .variant-grid-2x2 { grid-template-columns: 1fr 1fr !important; } .product-thumbnails { gap: 6px !important; } .product-thumb { width: 48px !important; height: 48px !important; } .collection-grid { grid-template-columns: repeat(2, 1fr) !important; } .collection-toolbar-inner { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; } .collection-banner { min-height: 200px !important; } .collection-page-title { font-size: 32px !important; } } @media (max-width: 420px) { .strain-stats-bar { gap: 12px !important; } .strain-stat-value { font-size: 14px !important; } .collection-grid { grid-template-columns: 1fr !important; } } /* ===== 3.17 bundled source: assets/haze-cart-drawer.css ===== */ /* ============================================ QUANTITY TIERS + CART DRAWER STYLES Paste into haze-dawn-overrides.css BEFORE the @media responsive rules ============================================ */ /* === QUANTITY DISCOUNT TIERS === */ .qty-tiers { margin-bottom: 20px !important; } .qty-tiers-label { font-size: 13px !important; font-weight: 600 !important; color: rgba(255,255,255,0.7) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 10px !important; } .qty-tier { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 14px 18px !important; margin-bottom: 8px !important; border: 1px solid rgba(143,180,121,0.15) !important; background: transparent !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; font-family: 'Inter', sans-serif !important; text-align: left !important; } .qty-tier:hover { border-color: rgba(143,180,121,0.4) !important; background: rgba(143,180,121,0.05) !important; } .qty-tier-active { border-color: #8FB479 !important; background: rgba(143,180,121,0.1) !important; } .qty-tier-top { display: flex !important; align-items: center !important; gap: 10px !important; } .qty-tier-amount { font-size: 16px !important; font-weight: 700 !important; color: #FFFFFF !important; } .qty-tier-badge { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; padding: 3px 8px !important; border-radius: 4px !important; background: #FFA637 !important; color: #162F38 !important; } .qty-tier-badge-default { background: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.5) !important; } .qty-tier-label { font-size: 13px !important; color: rgba(255,255,255,0.5) !important; font-weight: 400 !important; } .qty-tier-savings-msg { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; color: #8FB479 !important; margin-bottom: 16px !important; } .qty-tier-savings-msg svg { color: #8FB479 !important; min-width: 14px !important; } /* === CART DRAWER OVERLAY === */ .cart-drawer-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.5) !important; z-index: 9998 !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } .cart-drawer-overlay.open { opacity: 1 !important; visibility: visible !important; } /* === CART DRAWER === */ .cart-drawer { position: fixed !important; top: 0 !important; right: 0 !important; width: 420px !important; max-width: 90vw !important; height: 100vh !important; background: #0E1F26 !important; z-index: 9999 !important; transform: translateX(100%) !important; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; display: flex !important; flex-direction: column !important; border-left: 1px solid rgba(143,180,121,0.1) !important; } .cart-drawer.open { transform: translateX(0) !important; } /* === CART DRAWER HEADER === */ .cart-drawer-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 20px 24px !important; border-bottom: 1px solid rgba(143,180,121,0.1) !important; } .cart-drawer-header h3 { font-size: 18px !important; font-weight: 700 !important; color: #FFFFFF !important; } .cart-drawer-count { color: rgba(255,255,255,0.45) !important; font-weight: 400 !important; } .cart-drawer-close { background: none !important; border: none !important; color: rgba(255,255,255,0.5) !important; cursor: pointer !important; padding: 4px !important; } .cart-drawer-close:hover { color: #FFFFFF !important; } /* === FREE SHIPPING BAR === */ .cart-drawer-shipping { padding: 16px 24px !important; background: rgba(32,75,87,0.3) !important; } .shipping-bar-text { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; color: rgba(255,255,255,0.7) !important; margin-bottom: 8px !important; } .shipping-bar-text strong { color: #FFA637 !important; } .shipping-bar-track { width: 100% !important; height: 4px !important; background: rgba(143,180,121,0.15) !important; border-radius: 2px !important; overflow: hidden !important; } .shipping-bar-fill { height: 100% !important; background: #8FB479 !important; border-radius: 2px !important; transition: width 0.5s ease !important; max-width: 100% !important; } /* === CART ITEMS === */ .cart-drawer-items { flex: 1 !important; overflow-y: auto !important; padding: 16px 24px !important; } .cart-drawer-item { display: flex !important; gap: 14px !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(143,180,121,0.08) !important; } .cart-item-image { width: 72px !important; min-width: 72px !important; height: 72px !important; border-radius: 8px !important; overflow: hidden !important; background: rgba(32,75,87,0.3) !important; } .cart-item-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .cart-item-details { flex: 1 !important; } .cart-item-title { font-size: 14px !important; font-weight: 600 !important; color: #FFFFFF !important; text-decoration: none !important; display: block !important; margin-bottom: 2px !important; } .cart-item-variant { font-size: 12px !important; color: #8FB479 !important; margin-bottom: 4px !important; } .cart-item-price { font-size: 14px !important; font-weight: 700 !important; color: #FFA637 !important; margin-bottom: 8px !important; } .cart-item-qty-row { display: flex !important; align-items: center !important; justify-content: space-between !important; } .cart-item-qty { display: flex !important; align-items: center !important; border: 1px solid rgba(143,180,121,0.15) !important; border-radius: 4px !important; } .cart-qty-btn { width: 28px !important; height: 28px !important; background: none !important; border: none !important; color: rgba(255,255,255,0.6) !important; font-size: 14px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'Inter', sans-serif !important; } .cart-qty-btn:hover { color: #FFFFFF !important; } .cart-qty-val { font-size: 13px !important; font-weight: 600 !important; color: #FFFFFF !important; padding: 0 8px !important; } .cart-item-remove { background: none !important; border: none !important; color: rgba(255,255,255,0.3) !important; font-size: 11px !important; cursor: pointer !important; text-decoration: underline !important; font-family: 'Inter', sans-serif !important; } .cart-item-remove:hover { color: #FFA637 !important; } /* === CART EMPTY STATE === */ .cart-drawer-empty { text-align: center !important; padding: 60px 20px !important; } .cart-drawer-empty p { color: rgba(255,255,255,0.45) !important; font-size: 16px !important; margin-bottom: 20px !important; } /* === UPSELL SECTION === */ .cart-drawer-upsells { padding: 16px 24px !important; border-top: 1px solid rgba(143,180,121,0.1) !important; } .upsell-title { font-size: 12px !important; font-weight: 700 !important; color: rgba(255,255,255,0.5) !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-bottom: 12px !important; } .upsell-scroll { display: flex !important; gap: 10px !important; overflow-x: auto !important; padding-bottom: 8px !important; -webkit-overflow-scrolling: touch !important; } .upsell-card { min-width: 100px !important; background: rgba(32,75,87,0.3) !important; border-radius: 8px !important; overflow: hidden !important; text-decoration: none !important; border: 1px solid rgba(143,180,121,0.08) !important; transition: border-color 0.2s ease !important; } .upsell-card:hover { border-color: rgba(143,180,121,0.25) !important; } .upsell-card img { width: 100px !important; height: 100px !important; object-fit: cover !important; } .upsell-info { padding: 8px !important; } .upsell-name { font-size: 11px !important; color: #FFFFFF !important; display: block !important; line-height: 1.3 !important; } .upsell-price { font-size: 12px !important; font-weight: 700 !important; color: #FFA637 !important; } /* === CART DRAWER FOOTER === */ .cart-drawer-footer { padding: 20px 24px !important; border-top: 1px solid rgba(143,180,121,0.15) !important; background: rgba(14,31,38,0.95) !important; } .cart-drawer-subtotal { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 4px !important; } .cart-drawer-subtotal span:first-child { font-size: 14px !important; color: rgba(255,255,255,0.7) !important; } .cart-drawer-total { font-size: 22px !important; font-weight: 700 !important; color: #FFFFFF !important; } .cart-drawer-tax-note { font-size: 11px !important; color: rgba(255,255,255,0.35) !important; margin-bottom: 16px !important; } .cart-drawer-checkout-btn { display: block !important; width: 100% !important; padding: 16px !important; background: #8FB479 !important; color: #162F38 !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; border-radius: 6px !important; border: none !important; cursor: pointer !important; transition: background 0.2s ease !important; } .cart-drawer-checkout-btn:hover { background: #7DA368 !important; } .cart-drawer-viewcart { display: block !important; text-align: center !important; margin-top: 10px !important; font-size: 12px !important; color: rgba(255,255,255,0.45) !important; text-decoration: underline !important; } .cart-drawer-viewcart:hover { color: #FFFFFF !important; } /* === CART DRAWER RESPONSIVE === */ @media (max-width: 480px) { .cart-drawer { width: 100vw !important; max-width: 100vw !important; } } /* === Cart drawer footer link colors === The global "a[href] { color: green !important }" rule (haze-dawn-overrides.css) is more specific than the button's own rule and turns the Checkout text green-on-green. These id-scoped rules win and restore readable text. */ #cart-drawer-footer a.cart-drawer-checkout-btn { color: #162F38 !important; -webkit-text-fill-color: #162F38 !important; } #cart-drawer-footer a.cart-drawer-viewcart { color: rgba(255,255,255,0.5) !important; -webkit-text-fill-color: rgba(255,255,255,0.5) !important; } #cart-drawer-footer a.cart-drawer-viewcart:hover { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* ===== 3.17 bundled source: assets/haze-v2-premium.css ===== */ /* ============================================================ THE HAZE CONNECT — HAZE 2.0 PREVIEW LAYER Additive redesign layer. Loaded LAST and scoped to body.haze-v2. Existing Liquid, app hooks, product logic and analytics remain intact. ============================================================ */ body.haze-v2 { --v2-ink: #10211d; --v2-forest: #0d2a21; --v2-forest-2: #163b2f; --v2-sage: #9fc888; --v2-sage-soft: #dfead8; --v2-cream: #f7f4ed; --v2-paper: #fffdf8; --v2-gold: #d5a548; --v2-line: rgba(16,33,29,.12); --v2-shadow: 0 22px 70px rgba(12,31,25,.12); --v2-serif: Georgia, 'Times New Roman', serif; background: var(--v2-cream); } body.haze-v2 .container { max-width: 1360px; padding-left: clamp(20px,3vw,42px); padding-right: clamp(20px,3vw,42px); } body.haze-v2 .section-label { font-size: 11px !important; letter-spacing: .18em !important; font-weight: 800 !important; } body.haze-v2 .section-title { letter-spacing: -.035em !important; } /* Header: quieter, more premium, more retail-like. */ body.haze-v2 .haze-header-section { box-shadow: 0 1px 0 rgba(255,255,255,.08); } body.haze-v2 .announcement-bar { background: #9fc888 !important; min-height: 31px !important; color: #10211d !important; } body.haze-v2 .announcement-bar, body.haze-v2 .announcement-bar * { font-size: 11px !important; letter-spacing: .08em !important; } body.haze-v2 .nav { background: rgba(8,27,21,.96) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.07) !important; } body.haze-v2 .nav-inner { min-height: 72px !important; } body.haze-v2 .nav-logo-img { max-height: 35px !important; } body.haze-v2 .nav-links a { font-size: 12px !important; letter-spacing: .08em !important; font-weight: 700 !important; opacity: .86; } body.haze-v2 .nav-links a:hover { opacity: 1; color: #cfe8c2 !important; -webkit-text-fill-color: #cfe8c2 !important; } /* Hero: premium editorial composition without replacing the existing Liquid. */ body.haze-v2 .hero { min-height: min(810px,82vh) !important; background: #071a14 !important; } body.haze-v2 .hero-bg img { opacity: .67 !important; filter: saturate(.9) contrast(1.05); } body.haze-v2 .hero-bg::before { background: linear-gradient(90deg,rgba(5,22,16,.98) 0%,rgba(5,22,16,.82) 42%,rgba(5,22,16,.27) 76%,rgba(5,22,16,.16) 100%) !important; inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; animation: none !important; } body.haze-v2 .hero-bg::after { background: linear-gradient(180deg,rgba(5,22,16,.08) 52%,rgba(5,22,16,.88) 100%) !important; inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; animation: none !important; } body.haze-v2 .hero-grid { opacity: .12 !important; background-size: 110px 110px !important; } body.haze-v2 .hero-content { padding-top: clamp(78px,8vw,128px) !important; padding-bottom: clamp(72px,7vw,112px) !important; } body.haze-v2 .hero-inner { grid-template-columns: minmax(0,1.08fr) minmax(320px,.72fr) !important; gap: clamp(40px,6vw,100px) !important; } body.haze-v2 .hero-tagline { font-family: 'DM Sans',sans-serif !important; text-transform: uppercase; letter-spacing: .22em !important; font-size: 11px !important; font-weight: 800 !important; color: #cfe8c2 !important; margin-bottom: 22px !important; } body.haze-v2 .hero-title { font-family: var(--v2-serif) !important; font-size: clamp(48px,6.3vw,92px) !important; font-weight: 500 !important; line-height: .99 !important; letter-spacing: -.055em !important; max-width: 920px; text-wrap: balance; } body.haze-v2 .hero-title .highlight { font-family: inherit !important; color: #b8daaa !important; } body.haze-v2 .hero-description { font-size: clamp(15px,1.4vw,18px) !important; line-height: 1.65 !important; max-width: 650px !important; color: rgba(255,255,255,.78) !important; margin-bottom: 32px !important; } body.haze-v2 .hero-ctas { gap: 12px !important; } body.haze-v2 .hero-ctas .btn { border-radius: 999px !important; padding: 14px 24px !important; letter-spacing: .08em !important; font-family: 'DM Sans',sans-serif !important; font-size: 11px !important; } body.haze-v2 .hero-ctas .btn-primary { background: #b8daaa !important; color: #10211d !important; -webkit-text-fill-color: #10211d !important; box-shadow: 0 12px 34px rgba(184,218,170,.16); } body.haze-v2 .hero-ctas .btn-outline { border: 1px solid rgba(255,255,255,.34) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .hero-product-card { max-width: 410px !important; padding: 18px !important; background: rgba(7,26,20,.72) !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 24px !important; box-shadow: 0 28px 90px rgba(0,0,0,.36) !important; backdrop-filter: blur(16px); } body.haze-v2 .hero-product-card::before { display:none; } body.haze-v2 .hero-product-image { height: min(35vh,320px) !important; border-radius: 16px !important; overflow: hidden; margin-bottom: 16px !important; background: #fff !important; } body.haze-v2 .hero-product-badge { border-radius: 999px !important; margin: 0 0 12px !important; padding: 5px 10px !important; font-family:'DM Sans',sans-serif !important; font-size: 9px !important; letter-spacing: .12em !important; background:#d5a548 !important; } body.haze-v2 .hero-product-name { font-family: var(--v2-serif) !important; font-size: 25px !important; font-weight: 500 !important; letter-spacing: -.025em !important; } body.haze-v2 .hero-product-strain { font-size: 10px !important; letter-spacing: .12em !important; } body.haze-v2 .hero-product-price { font-family:'DM Sans',sans-serif !important; color:#fff !important; font-size: 21px !important; } body.haze-v2 .hero-float { display:none !important; } /* Trust strip: compact proof immediately after desire. */ body.haze-v2 .trust-bar { background: #fffdf8 !important; padding: 22px 0 !important; border-bottom: 1px solid var(--v2-line) !important; } body.haze-v2 .trust-bar-inner { grid-template-columns: repeat(4,1fr) !important; gap: 0 !important; } body.haze-v2 .trust-item { position:relative; display:grid !important; grid-template-columns: 32px 1fr !important; grid-template-rows:auto auto !important; column-gap:10px !important; row-gap:1px !important; text-align:left !important; align-items:center !important; padding:4px clamp(12px,2vw,28px) !important; } body.haze-v2 .trust-item:not(:last-child)::after { content:''; position:absolute; right:0; top:10%; bottom:10%; width:1px; background:var(--v2-line); } body.haze-v2 .trust-item svg { grid-row:1/3; width:22px !important; height:22px !important; color:#587d62 !important; } body.haze-v2 .trust-item strong { font-family:'DM Sans',sans-serif !important; font-size:12px !important; letter-spacing:.02em !important; color:#10211d !important; } body.haze-v2 .trust-item span { font-size:11px !important; color:#718079 !important; } /* Effect-first discovery moves high and reads like guided shopping. */ body.haze-v2 .shop-by-effect { padding: clamp(68px,8vw,110px) 0 !important; background: #0d2a21 !important; } body.haze-v2 .shop-by-effect-header { text-align:left !important; margin-bottom:36px !important; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); align-items:end; gap:30px; } body.haze-v2 .shop-by-effect-header .section-label { grid-column:1/-1; color:#9fc888 !important; } body.haze-v2 .shop-by-effect-header .section-title { font-family:var(--v2-serif) !important; font-size:clamp(38px,5vw,68px) !important; font-weight:500 !important; color:#fff !important; line-height:1 !important; } body.haze-v2 .shop-by-effect-header .section-subtitle { color:rgba(255,255,255,.66) !important; margin:0 !important; max-width:52ch; font-size:14px !important; } body.haze-v2 .effects-grid { gap:12px !important; } body.haze-v2 .effect-card { min-height:240px; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-end !important; text-align:left !important; padding:28px !important; border-radius:18px !important; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035)) !important; border:1px solid rgba(255,255,255,.11) !important; } body.haze-v2 .effect-card:hover { border-color:rgba(159,200,136,.58) !important; transform:translateY(-5px) !important; box-shadow:0 24px 58px rgba(0,0,0,.18) !important; } body.haze-v2 .effect-icon { font-size:28px !important; margin-bottom:auto !important; min-height:34px; } body.haze-v2 .effect-card h3 { font-family:var(--v2-serif) !important; color:#fff !important; font-size:30px !important; font-weight:500 !important; letter-spacing:-.03em !important; } body.haze-v2 .effect-card p { color:rgba(255,255,255,.6) !important; font-size:12px !important; line-height:1.55 !important; margin-top:7px !important; } body.haze-v2 .effect-card .effect-cta { color:#b8daaa !important; -webkit-text-fill-color:#b8daaa !important; font-size:10px !important; letter-spacing:.12em !important; margin-top:18px !important; } /* Category cards: shorter, more editorial, less 'template'. */ body.haze-v2 .collections { padding: clamp(68px,8vw,108px) 0 !important; background: #f7f4ed !important; } body.haze-v2 .collections-header { text-align:left !important; max-width:760px; margin:0 0 34px !important; } body.haze-v2 .collections-header .section-title { font-family:var(--v2-serif) !important; font-size:clamp(38px,5vw,66px) !important; font-weight:500 !important; color:#10211d !important; } body.haze-v2 .collections-header .section-subtitle { margin:10px 0 0 !important; max-width:58ch; font-size:14px !important; } body.haze-v2 .collections-grid { gap:14px !important; } body.haze-v2 .collection-card { aspect-ratio:1.05/1 !important; min-height:300px !important; border-radius:22px !important; padding:26px !important; box-shadow:0 12px 40px rgba(16,33,29,.08); } body.haze-v2 .collection-card::after { background:linear-gradient(to top,rgba(5,24,18,.9),rgba(5,24,18,.16) 66%,rgba(5,24,18,.04)) !important; } body.haze-v2 .collection-name { font-family:var(--v2-serif) !important; font-size:clamp(28px,3vw,40px) !important; font-weight:500 !important; letter-spacing:-.035em !important; } body.haze-v2 .collection-tag { color:#cfe8c2 !important; font-size:9px !important; letter-spacing:.15em !important; } /* Best sellers: deliberately light and transactional after emotional discovery. */ body.haze-v2 .best-sellers { padding:clamp(72px,8vw,112px) 0 !important; background:#fffdf8 !important; } body.haze-v2 .best-sellers-header { align-items:end !important; margin-bottom:30px !important; } body.haze-v2 .best-sellers-header .section-label { color:#587d62 !important; } body.haze-v2 .best-sellers-header .section-title { font-family:var(--v2-serif) !important; color:#10211d !important; font-size:clamp(40px,5vw,68px) !important; font-weight:500 !important; } body.haze-v2 .best-sellers-header .btn-outline { border-color:#10211d !important; color:#10211d !important; -webkit-text-fill-color:#10211d !important; border-radius:999px !important; font-family:'DM Sans',sans-serif !important; font-size:10px !important; padding:11px 18px !important; } body.haze-v2 .products-grid { gap:14px !important; } body.haze-v2 .best-sellers .product-card { background:#fff !important; border:1px solid rgba(16,33,29,.1) !important; border-radius:18px !important; box-shadow:0 8px 30px rgba(16,33,29,.055); } body.haze-v2 .best-sellers .product-card:hover { border-color:rgba(88,125,98,.35) !important; box-shadow:0 18px 48px rgba(16,33,29,.11); } body.haze-v2 .best-sellers .product-image { background:#f3f1eb !important; } body.haze-v2 .best-sellers .product-info { padding:17px 18px 13px !important; } body.haze-v2 .best-sellers .product-category { color:#587d62 !important; font-size:9px !important; } body.haze-v2 .best-sellers .product-name { font-family:var(--v2-serif) !important; color:#10211d !important; -webkit-text-fill-color:#10211d !important; font-size:21px !important; font-weight:500 !important; letter-spacing:-.025em !important; } body.haze-v2 .best-sellers .product-desc { color:#77837e !important; -webkit-text-fill-color:#77837e !important; font-size:11px !important; } body.haze-v2 .best-sellers .product-price { font-family:'DM Sans',sans-serif !important; color:#10211d !important; -webkit-text-fill-color:#10211d !important; font-size:17px !important; } body.haze-v2 .best-sellers .product-add { width:calc(100% - 36px) !important; margin:0 18px 18px !important; border:0 !important; background:#10211d !important; color:#fff !important; -webkit-text-fill-color:#fff !important; border-radius:999px !important; font-family:'DM Sans',sans-serif !important; font-size:10px !important; padding:11px 14px !important; letter-spacing:.1em !important; } body.haze-v2 .best-sellers .product-add:hover { background:#214b3c !important; color:#fff !important; -webkit-text-fill-color:#fff !important; } /* Brand story: less generic, more editorial. */ body.haze-v2 .brand-story { background:#f7f4ed !important; padding:clamp(72px,8vw,118px) 0 !important; } body.haze-v2 .brand-story-inner { gap:clamp(42px,7vw,100px) !important; } body.haze-v2 .brand-story-box { border-radius:24px !important; background:#0d2a21 !important; box-shadow:var(--v2-shadow); } body.haze-v2 .brand-story-text .caveat-line { font-family:'DM Sans',sans-serif !important; text-transform:uppercase; letter-spacing:.16em; font-size:10px !important; color:#587d62 !important; } body.haze-v2 .brand-story-text h2 { font-family:var(--v2-serif) !important; font-size:clamp(40px,5vw,68px) !important; font-weight:500 !important; color:#10211d !important; letter-spacing:-.04em !important; } body.haze-v2 .brand-story-text p { font-size:14px !important; color:#53625c !important; } body.haze-v2 .brand-values { gap:12px !important; } body.haze-v2 .brand-value { padding:14px; border:1px solid var(--v2-line); border-radius:14px; background:#fffdf8; } body.haze-v2 .brand-value-icon { background:#e9efe5 !important; border-radius:999px !important; } body.haze-v2 .brand-value-text strong { font-family:'DM Sans',sans-serif !important; font-size:12px !important; } body.haze-v2 .brand-value-text span { font-size:11px !important; } /* Reviews: social proof as clean cards, not a long legal-looking block. */ body.haze-v2 .haze-reviews { background:#fffdf8; padding:clamp(72px,8vw,108px) 0 !important; color:#10211d; } body.haze-v2 .haze-reviews .container { max-width:1180px !important; } body.haze-v2 .haze-reviews__summary { border-top:0 !important; background:#0d2a21; color:#fff; padding:28px 30px !important; border-radius:20px; box-shadow:0 18px 50px rgba(16,33,29,.14); } body.haze-v2 .haze-reviews__score-num { font-family:var(--v2-serif); font-weight:500 !important; } body.haze-v2 .haze-reviews__stars { color:#d5a548 !important; } body.haze-v2 .haze-reviews__heading { font-family:var(--v2-serif); font-weight:500; font-size:clamp(32px,4vw,50px); letter-spacing:-.035em; color:#10211d; } body.haze-v2 .haze-reviews__item { background:#fff; border:1px solid var(--v2-line) !important; border-radius:16px; padding:22px !important; margin:12px 0; box-shadow:0 6px 24px rgba(16,33,29,.045); } body.haze-v2 .haze-reviews__all, body.haze-v2 .haze-reviews__how { color:#53625c; font-size:13px; } /* Utility/education lower in the journey. */ body.haze-v2 .how-it-works { background:#0d2a21 !important; padding:80px 0 !important; } body.haze-v2 .how-it-works-header .section-title { font-family:var(--v2-serif) !important; font-weight:500 !important; font-size:clamp(38px,5vw,62px) !important; } body.haze-v2 .step-number { width:56px !important; height:56px !important; font-size:20px !important; background:rgba(159,200,136,.08) !important; border:1px solid rgba(159,200,136,.5) !important; } body.haze-v2 .step-card h3 { font-family:var(--v2-serif) !important; font-size:25px !important; font-weight:500 !important; } body.haze-v2 .step-card p { font-size:13px !important; max-width:340px !important; } body.haze-v2 .education { background:#f7f4ed !important; padding:80px 0 !important; } body.haze-v2 .education-header .section-title { font-family:var(--v2-serif) !important; font-weight:500 !important; font-size:clamp(38px,5vw,62px) !important; } body.haze-v2 .blog-card { border-radius:18px !important; overflow:hidden; } body.haze-v2 .faq { background:#10211d !important; padding:82px 0 !important; } body.haze-v2 .faq-header .section-title { font-family:var(--v2-serif) !important; font-weight:500 !important; font-size:clamp(38px,5vw,60px) !important; } body.haze-v2 .newsletter { background:#163b2f !important; padding:82px 0 !important; } body.haze-v2 .newsletter-inner .section-title { font-family:var(--v2-serif) !important; font-weight:500 !important; font-size:clamp(38px,5vw,62px) !important; } /* Product pages: preserve all existing Liquid/JS, upgrade only presentation. */ body.haze-v2 .haze-product { background:#0a221a !important; } body.haze-v2 .haze-product .product-page-grid { gap:clamp(32px,5vw,72px) !important; max-width:1320px; margin-inline:auto; } body.haze-v2 .haze-product .product-main-image { border-radius:24px !important; overflow:hidden !important; background:#f2f0e9 !important; border:1px solid rgba(255,255,255,.09) !important; } body.haze-v2 .haze-product .product-details { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.095); border-radius:22px; padding:clamp(20px,3vw,34px); box-shadow:0 24px 80px rgba(0,0,0,.18); } body.haze-v2 .haze-product .product-page-title { font-family:var(--v2-serif) !important; font-weight:500 !important; letter-spacing:-.045em !important; line-height:1.02 !important; } body.haze-v2 .haze-product .product-page-price { font-family:'DM Sans',sans-serif !important; letter-spacing:-.03em; } body.haze-v2 .haze-product .variant-grid-btn { border-radius:12px !important; } body.haze-v2 .haze-product .product-atc-btn { border-radius:999px !important; min-height:52px !important; font-family:'DM Sans',sans-serif !important; letter-spacing:.09em !important; } body.haze-v2 .haze-product .product-trust-badge { border-radius:999px !important; } body.haze-v2 .haze-product .product-tabs-wrapper { max-width:1320px; margin-inline:auto; } body.haze-v2 .haze-product .coa-direct-btn { border-radius:999px !important; } /* Custom Haze cart: more focused checkout hierarchy. */ body.haze-v2 #cart-drawer.cart-drawer { background:#fffdf8 !important; color:#10211d !important; } body.haze-v2 #cart-drawer .cart-drawer-header { border-bottom:1px solid var(--v2-line) !important; } body.haze-v2 #cart-drawer .cart-drawer-header h3, body.haze-v2 #cart-drawer .cart-item-title, body.haze-v2 #cart-drawer .cart-drawer-total { color:#10211d !important; -webkit-text-fill-color:#10211d !important; } body.haze-v2 #cart-drawer .cart-drawer-checkout-btn { background:#10211d !important; color:#fff !important; -webkit-text-fill-color:#fff !important; border-radius:999px !important; } body.haze-v2 #cart-drawer .shipping-bar-fill { background:#79a768 !important; } /* New V2 conversion sections. */ .haze-v2-value { background:#10211d; color:#fff; padding:clamp(70px,8vw,116px) 0; overflow:hidden; } .haze-v2-value__grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(320px,.75fr); gap:clamp(40px,7vw,100px); align-items:center; } .haze-v2-value__eyebrow,.haze-v2-proof__eyebrow,.haze-v2-diff__eyebrow { display:block; font:800 10px/1.2 'DM Sans',sans-serif; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; } .haze-v2-value__eyebrow { color:#b8daaa; } .haze-v2-value__title { margin:0 0 18px; font:500 clamp(46px,6vw,82px)/.98 var(--v2-serif); letter-spacing:-.05em; color:#fff; } .haze-v2-value__copy { max-width:58ch; color:rgba(255,255,255,.68); font-size:15px; line-height:1.7; } .haze-v2-value__facts { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 30px; padding:0; list-style:none; } .haze-v2-value__fact { min-width:120px; padding:13px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.045); } .haze-v2-value__fact strong { display:block; font:600 21px/1 var(--v2-serif); margin-bottom:5px; } .haze-v2-value__fact span { font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.48); } .haze-v2-value__cta,.haze-v2-proof__cta { display:inline-flex; align-items:center; gap:8px; padding:13px 20px; border-radius:999px; background:#b8daaa; color:#10211d !important; -webkit-text-fill-color:#10211d !important; text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .haze-v2-value__visual { position:relative; } .haze-v2-value__image { aspect-ratio:1/1; border-radius:28px; overflow:hidden; background:#f4f1e9; box-shadow:0 34px 100px rgba(0,0,0,.33); transform:rotate(1.4deg); } .haze-v2-value__image img { width:100%; height:100%; object-fit:cover; display:block; } .haze-v2-value__price { position:absolute; left:-20px; bottom:24px; background:#d5a548; color:#10211d; border-radius:999px; padding:12px 17px; font:800 12px/1 'DM Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 10px 30px rgba(0,0,0,.2); } .haze-v2-diff { background:#f7f4ed; color:#10211d; padding:clamp(72px,8vw,112px) 0; } .haze-v2-diff__header { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); gap:34px; align-items:end; margin-bottom:34px; } .haze-v2-diff__eyebrow { grid-column:1/-1; color:#587d62; margin:0; } .haze-v2-diff__title { margin:0; font:500 clamp(42px,5.5vw,72px)/1 var(--v2-serif); letter-spacing:-.05em; } .haze-v2-diff__intro { margin:0; color:#5f6d67; font-size:14px; line-height:1.7; } .haze-v2-diff__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .haze-v2-diff__card { min-height:230px; border:1px solid var(--v2-line); border-radius:18px; padding:24px; background:#fffdf8; display:flex; flex-direction:column; } .haze-v2-diff__num { color:#6e9476; font:800 10px/1 'DM Sans',sans-serif; letter-spacing:.13em; margin-bottom:auto; } .haze-v2-diff__card h3 { margin:34px 0 8px; font:500 28px/1.02 var(--v2-serif); letter-spacing:-.035em; color:#10211d; } .haze-v2-diff__card p { margin:0; color:#6b7772; font-size:12px; line-height:1.6; } .haze-v2-proof { background:#fffdf8; color:#10211d; padding:clamp(72px,8vw,112px) 0; } .haze-v2-proof__panel { display:grid; grid-template-columns:minmax(0,.85fr) minmax(320px,1fr); gap:clamp(36px,7vw,90px); align-items:center; border:1px solid var(--v2-line); border-radius:28px; padding:clamp(28px,5vw,64px); background:linear-gradient(135deg,#f4f8f0,#fffdf8); box-shadow:var(--v2-shadow); } .haze-v2-proof__eyebrow { color:#587d62; } .haze-v2-proof__title { margin:0 0 16px; font:500 clamp(42px,5.2vw,70px)/.98 var(--v2-serif); letter-spacing:-.05em; } .haze-v2-proof__copy { margin:0 0 24px; max-width:55ch; color:#5d6b65; font-size:14px; line-height:1.7; } .haze-v2-proof__cta { background:#10211d; color:#fff !important; -webkit-text-fill-color:#fff !important; } .haze-v2-proof__receipt { background:#fff; border:1px solid rgba(16,33,29,.12); border-radius:20px; padding:26px; transform:rotate(-1deg); box-shadow:0 20px 55px rgba(16,33,29,.12); } .haze-v2-proof__receipt-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; margin-bottom:18px; border-bottom:1px dashed rgba(16,33,29,.2); } .haze-v2-proof__receipt-top strong { font:600 22px/1 var(--v2-serif); } .haze-v2-proof__pass { font:800 9px/1 'DM Sans',sans-serif; letter-spacing:.12em; background:#dfead8; color:#31543d; border-radius:999px; padding:7px 10px; } .haze-v2-proof__row { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid rgba(16,33,29,.07); font-size:12px; color:#60706a; } .haze-v2-proof__row b { color:#10211d; font-weight:700; } .haze-v2-proof__foot { margin-top:16px; font-size:10px; line-height:1.55; color:#7b8782; } @media (max-width: 990px) { body.haze-v2 .hero { min-height:auto !important; } body.haze-v2 .hero-inner { grid-template-columns:1fr !important; } body.haze-v2 .hero-visual { justify-content:flex-start !important; } body.haze-v2 .hero-product-card { max-width:520px !important; } body.haze-v2 .shop-by-effect-header, .haze-v2-diff__header { grid-template-columns:1fr; } body.haze-v2 .effects-grid { grid-template-columns:repeat(2,1fr) !important; } body.haze-v2 .products-grid { grid-template-columns:repeat(2,1fr) !important; } .haze-v2-value__grid,.haze-v2-proof__panel { grid-template-columns:1fr; } .haze-v2-value__visual { max-width:560px; } .haze-v2-diff__grid { grid-template-columns:repeat(2,1fr); } } @media (max-width: 749px) { body.haze-v2 .container { padding-left:18px; padding-right:18px; } body.haze-v2 .announcement-bar { padding:7px 12px !important; line-height:1.35 !important; } body.haze-v2 .hero-content { padding-top:56px !important; padding-bottom:58px !important; } body.haze-v2 .hero-title { font-size:clamp(43px,13vw,62px) !important; } body.haze-v2 .hero-description { font-size:14px !important; } body.haze-v2 .hero-ctas { display:grid !important; grid-template-columns:1fr; } body.haze-v2 .hero-ctas .btn { text-align:center; } body.haze-v2 .hero-product-card { width:100% !important; padding:14px !important; } body.haze-v2 .hero-product-image { height:auto !important; aspect-ratio:1/1; } body.haze-v2 .trust-bar-inner { grid-template-columns:repeat(2,1fr) !important; row-gap:18px !important; } body.haze-v2 .trust-item { padding:4px 10px !important; } body.haze-v2 .trust-item:nth-child(2)::after { display:none; } body.haze-v2 .shop-by-effect-header { display:block; } body.haze-v2 .shop-by-effect-header .section-subtitle { margin-top:14px !important; } body.haze-v2 .effects-grid { grid-template-columns:1fr 1fr !important; gap:9px !important; } body.haze-v2 .effect-card { min-height:205px; padding:18px !important; } body.haze-v2 .effect-card h3 { font-size:24px !important; } body.haze-v2 .effect-card p { font-size:11px !important; } body.haze-v2 .collections-grid { grid-template-columns:1fr !important; } body.haze-v2 .collection-card { aspect-ratio:1.45/1 !important; min-height:250px !important; } body.haze-v2 .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; } body.haze-v2 .best-sellers .product-info { padding:12px 12px 9px !important; } body.haze-v2 .best-sellers .product-name { font-size:18px !important; } body.haze-v2 .best-sellers .product-add { width:calc(100% - 24px) !important; margin:0 12px 12px !important; } body.haze-v2 .brand-story-inner { grid-template-columns:1fr !important; } body.haze-v2 .brand-values { grid-template-columns:1fr !important; } .haze-v2-value__grid { gap:36px; } .haze-v2-value__image { border-radius:20px; } .haze-v2-value__price { left:12px; bottom:12px; } .haze-v2-diff__grid { grid-template-columns:1fr 1fr; gap:9px; } .haze-v2-diff__card { min-height:195px; padding:18px; } .haze-v2-diff__card h3 { font-size:23px; } .haze-v2-proof__panel { padding:22px; border-radius:20px; } body.haze-v2 .haze-product .product-details { border-radius:18px; padding:18px; } } @media (prefers-reduced-motion: reduce) { body.haze-v2 *, body.haze-v2 *::before, body.haze-v2 *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } body.haze-v2 #cart-drawer .cro-c2-nudge{display:block;margin-top:6px;color:#31543d !important;-webkit-text-fill-color:#31543d !important;font-weight:700;font-size:11px;text-decoration:underline;text-underline-offset:3px;} /* ===== 3.17 bundled source: assets/haze-merchandising-v2.css ===== */ /* The Haze Connect — collection, product tile, and PDP merchandising pass */ .haze-merch-card { --hm-ink: #0e1f26; --hm-deep: #132830; --hm-mid: #204b57; --hm-green: #8fb479; --hm-gold: #ffa637; display: flex; min-width: 0; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid rgba(143, 180, 121, .16); border-radius: 14px; background: linear-gradient(180deg, #17333d 0%, var(--hm-deep) 100%); box-shadow: 0 10px 30px rgba(0, 0, 0, .16); color: #fff; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .haze-merch-card:hover { transform: translateY(-4px); border-color: rgba(143, 180, 121, .42); box-shadow: 0 18px 42px rgba(0, 0, 0, .26); } .haze-merch-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; background: #fff; } .haze-merch-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .32s ease, transform .5s ease; } .haze-merch-card__image--secondary { opacity: 0; } .haze-merch-card:hover .haze-merch-card__image--primary { transform: scale(1.025); } .haze-merch-card:hover .haze-merch-card__image--secondary { opacity: 1; transform: scale(1.025); } .haze-merch-card__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--hm-green); } .haze-merch-card__placeholder svg { width: 54px; opacity: .35; } .haze-merch-card__badges { position: absolute; z-index: 2; top: 12px; right: 12px; left: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; } .haze-merch-card__badge { display: inline-flex; min-height: 25px; align-items: center; border-radius: 999px; padding: 5px 10px; background: var(--hm-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; line-height: 1; text-transform: uppercase; } .haze-merch-card__badge--sale, .haze-merch-card__badge--value { background: var(--hm-gold); color: var(--hm-ink); } .haze-merch-card__badge--new { background: var(--hm-green); color: var(--hm-ink); } .haze-merch-card__badge--bestseller { background: #e85d4a; } .haze-merch-card__badge--soldout { background: #61696c; } .haze-merch-card__badge--strain { margin-left: auto; background: rgba(14, 31, 38, .9); backdrop-filter: blur(8px); } .haze-merch-card__body { display: flex; flex: 1; flex-direction: column; padding: 17px 18px 18px; } .haze-merch-card__eyebrow { display: flex; min-height: 18px; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--hm-green); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; line-height: 1.2; text-transform: uppercase; } .haze-merch-card__verified { display: inline-flex; align-items: center; gap: 3px; color: rgba(255, 255, 255, .65); letter-spacing: .6px; } .haze-merch-card__verified svg { width: 14px; height: 14px; fill: none; stroke: var(--hm-green); stroke-width: 2.2; } .haze-merch-card__title { min-height: 2.5em; margin: 0; font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px; } .haze-merch-card__title a, body.haze-v2 .haze-merch-card .haze-merch-card__title a:not(#_hz) { border: 0 !important; background-image: none !important; box-shadow: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; } .haze-merch-card__title a::after { content: none !important; } .haze-merch-card__reviews { display: flex; min-height: 20px; align-items: center; gap: 4px; margin-top: 7px; color: rgba(255, 255, 255, .62); font-size: 11px; } .haze-merch-card__reviews strong { color: #fff; font-size: 11px; } .haze-merch-card__star { color: var(--hm-gold); font-size: 13px; } .haze-merch-card__facts { display: flex; flex-wrap: wrap; gap: 6px; min-height: 27px; margin-top: 11px; } .haze-merch-card__fact { display: inline-flex; align-items: center; gap: 3px; border: 1px solid rgba(143, 180, 121, .16); border-radius: 999px; padding: 5px 8px; background: rgba(143, 180, 121, .07); color: rgba(255, 255, 255, .68); font-size: 10px; line-height: 1.15; } .haze-merch-card__fact b { color: #fff; font-weight: 700; } .haze-merch-card__stock { margin: 8px 0 0; color: #ffba67; font-size: 10px; font-weight: 700; } .haze-merch-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; } .haze-merch-card__price { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 5px; } .haze-merch-card__price strong { color: var(--hm-gold); font-size: 20px; line-height: 1; } .haze-merch-card__price s { color: rgba(255, 255, 255, .42); font-size: 11px; } .haze-merch-card__from { flex-basis: 100%; color: rgba(255, 255, 255, .48); font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; } .haze-merch-card__cta, a.haze-merch-card__cta:not(#_hz) { display: inline-flex !important; min-height: 38px; align-items: center; justify-content: center; border: 1px solid var(--hm-green) !important; border-radius: 7px !important; padding: 9px 13px !important; background: var(--hm-green) !important; color: var(--hm-ink) !important; -webkit-text-fill-color: var(--hm-ink) !important; font-family: 'DM Sans', sans-serif !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .8px !important; line-height: 1.1 !important; text-align: center !important; text-decoration: none !important; text-transform: uppercase !important; cursor: pointer; transition: background .2s ease, transform .2s ease; } .haze-merch-card__cta:hover, a.haze-merch-card__cta:not(#_hz):hover { background: #a8c896 !important; transform: translateY(-1px); } .haze-merch-card__cta[disabled] { border-color: rgba(255, 255, 255, .16) !important; background: rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .45) !important; -webkit-text-fill-color: rgba(255, 255, 255, .45) !important; cursor: not-allowed; } .haze-merch-card__status { min-height: 0; margin: 0; color: var(--hm-green); font-size: 10px; text-align: right; } .haze-merch-card__status:not(:empty) { min-height: 14px; margin-top: 6px; } /* Enrich Dawn cards used by search, recommendations, and optional sections. */ .haze-card--enhanced .card__inner { overflow: hidden; border-radius: 12px; } .haze-card--enhanced .haze-card__media-meta { position: absolute; z-index: 3; top: 10px; right: 10px; left: 10px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; } .haze-card--enhanced .haze-card__merch-badge { border-radius: 999px; padding: 5px 8px; background: #0e1f26; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; } .haze-card--enhanced .haze-card__merch-badge--sale { background: #ffa637; color: #0e1f26; } .haze-card--enhanced .haze-card__merch-badge--hot { background: #e85d4a; } .haze-card--enhanced .haze-card__merch-badge--strain { margin-left: auto; } .haze-card--enhanced .haze-card__proof-line { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 3px; } .haze-card--enhanced .haze-card__proof-line > span { border: 1px solid rgba(var(--color-foreground),.14); border-radius: 999px; padding: 4px 7px; color: rgba(var(--color-foreground),.68); font-size: 9px; line-height: 1.2; } .haze-card--enhanced .haze-card__proof-line b, .haze-card--enhanced .haze-card__verified { color: #8fb479 !important; } .products-grid > .fade-up { height: 100%; } /* Collection page hierarchy */ .haze-collection .collection-banner { min-height: 330px; } .haze-collection .collection-banner-content { max-width: 760px; } .haze-collection .hc-shop-nav { border-top: 1px solid rgba(143,180,121,.11); border-bottom: 1px solid rgba(143,180,121,.11); background: #10252d; } .haze-collection .hc-shop-nav__inner { display: flex; overflow-x: auto; gap: 7px; padding-top: 13px; padding-bottom: 13px; scrollbar-width: none; } .haze-collection .hc-shop-nav__inner::-webkit-scrollbar { display: none; } .haze-collection .hc-shop-nav a { flex: 0 0 auto; border: 1px solid rgba(143,180,121,.18); border-radius: 999px; padding: 8px 13px; color: rgba(255,255,255,.72) !important; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-decoration: none; } .haze-collection .hc-shop-nav a:hover, .haze-collection .hc-shop-nav a.is-active { border-color: #8fb479; background: #8fb479; color: #0e1f26 !important; -webkit-text-fill-color: #0e1f26 !important; } .haze-collection .hc-proof-strip { background: #8fb479; color: #0e1f26; } .haze-collection .hc-proof-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 11px 0; } .haze-collection .hc-proof-item { display: flex; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid rgba(14,31,38,.16); font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; } .haze-collection .hc-proof-item:last-child { border-right: 0; } .haze-collection .hc-proof-item svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; } .haze-collection .collection-toolbar { border-bottom: 1px solid rgba(143,180,121,.1); } .haze-collection .collection-grid { align-items: stretch; gap: 22px !important; } .haze-collection .collection-grid > * { min-width: 0; height: 100%; } .haze-collection .hc-count-text { color: rgba(255,255,255,.64); } .haze-collection .sort-select { min-width: 190px; } /* PDP decision hierarchy */ .haze-product .product-page-grid { align-items: start; } .haze-product .product-details { position: relative; } .haze-product .pdp-proof-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 13px; } .haze-product .pdp-rating-proof { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.64); font-size: 12px; } .haze-product a.pdp-rating-proof { text-decoration: none !important; } .haze-product .pdp-rating-proof strong { color: #fff; } .haze-product .pdp-rating-star { color: #ffa637; font-size: 15px; } .haze-product .pdp-batch-proof { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 0; background: none; color: #8fb479; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; } .haze-product .pdp-batch-proof svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } .haze-product .strain-stats-bar { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(98px,1fr)) !important; gap: 0 !important; overflow: hidden; border: 1px solid rgba(143,180,121,.14) !important; border-radius: 10px; padding: 0 !important; background: rgba(32,75,87,.24); } .haze-product .strain-stat { min-width: 0; padding: 11px 12px; border-right: 1px solid rgba(143,180,121,.12); } .haze-product .strain-stat:last-child { border-right: 0; } .haze-product .strain-stat-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .haze-product .pdp-price-caption { margin-left: 8px; color: rgba(255,255,255,.46); font-size: 11px; font-weight: 500; } .haze-product .pdp-option-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .haze-product .pdp-option-help { color: rgba(255,255,255,.45); font-size: 10px; font-weight: 500; } .haze-product .pdp-buy-promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; } .haze-product .pdp-buy-promise { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 43px; border: 1px solid rgba(143,180,121,.12); border-radius: 8px; background: rgba(32,75,87,.2); color: rgba(255,255,255,.65); font-size: 10px; font-weight: 600; line-height: 1.25; text-align: center; } .haze-product .pdp-buy-promise svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: #8fb479; stroke-width: 2; } .haze-product .pdp-lab-jump { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; border: 0; background: none; color: #8fb479; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .haze-product .pdp-lab-jump svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } .haze-product .sticky-atc-variant { color: rgba(255,255,255,.55); font-size: 10px; } .haze-product .related-products-scroll--tiles { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible !important; gap: 18px !important; } @media (max-width: 989px) { .haze-product .related-products-scroll--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 749px) { .haze-merch-card { border-radius: 10px; } .haze-merch-card__body { padding: 12px; } .haze-merch-card__badges { top: 8px; right: 8px; left: 8px; } .haze-merch-card__badge { min-height: 21px; padding: 4px 7px; font-size: 8px; letter-spacing: .7px; } .haze-merch-card__eyebrow { font-size: 8px; letter-spacing: .8px; } .haze-merch-card__verified { display: none; } .haze-merch-card__title { min-height: 2.55em; font-size: 14px; } .haze-merch-card__facts { min-height: 24px; margin-top: 8px; } .haze-merch-card__fact { padding: 4px 6px; font-size: 8.5px; } .haze-merch-card__footer { display: block; padding-top: 12px; } .haze-merch-card__price strong { font-size: 18px; } .haze-merch-card__cta, a.haze-merch-card__cta:not(#_hz) { width: 100%; margin-top: 10px; padding: 8px 6px !important; font-size: 9px !important; } .haze-collection .collection-banner { min-height: 250px; } .haze-collection .hc-proof-strip__inner { grid-template-columns: repeat(2, 1fr); row-gap: 9px; } .haze-collection .hc-proof-item:nth-child(2) { border-right: 0; } .haze-collection .collection-grid { gap: 11px !important; } .haze-product .strain-stats-bar { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .haze-product .strain-stat:nth-child(2) { border-right: 0; } .haze-product .strain-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(143,180,121,.12); } .haze-product .pdp-buy-promises { grid-template-columns: 1fr; } .haze-product .pdp-buy-promise { justify-content: flex-start; min-height: 36px; padding: 0 11px; text-align: left; } .haze-product .related-products-scroll--tiles { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; padding-bottom: 12px; } .haze-product .related-products-scroll--tiles .haze-merch-card { flex: 0 0 74%; scroll-snap-align: start; } } @media (prefers-reduced-motion: reduce) { .haze-merch-card, .haze-merch-card__image { transition: none; } .haze-merch-card:hover { transform: none; } } /* ===== 3.17 bundled source: assets/haze-conversion-v3.css ===== */ /* The Haze Connect 3.0 — conversion system Loaded after all legacy styles. Scope new work through body.haze-v2. */ body.haze-v2 { --hz3-ink: #0b1b21; --hz3-deep: #10262e; --hz3-slate: #204b57; --hz3-cream: #f5f0e7; --hz3-paper: #fffdf8; --hz3-sage: #8fb479; --hz3-sage-light: #b7d2a6; --hz3-gold: #f4a33b; --hz3-coral: #dc715d; --hz3-blue: #78aebe; --hz3-line-dark: rgba(255,255,255,.11); --hz3-line-light: rgba(11,27,33,.13); --hz3-shadow: 0 18px 50px rgba(5,18,23,.15); --hz3-radius: 18px; background: var(--hz3-cream); } body.haze-v2 .section-title { letter-spacing: -.035em; text-wrap: balance; } body.haze-v2 .footer-disclaimer p { color: rgba(255,255,255,.66) !important; -webkit-text-fill-color: rgba(255,255,255,.66) !important; } body.haze-v2 .newsletter-disclaimer { color: rgba(255,255,255,.62) !important; -webkit-text-fill-color: rgba(255,255,255,.62) !important; } body.haze-v2 .btn, body.haze-v2 a.btn:not(#_hz) { min-height: 48px; border-radius: 999px !important; padding: 13px 23px !important; letter-spacing: .075em !important; } /* Hero: product-forward editorial stage with clearer reading order. */ body.haze-v2 .hero { min-height: min(790px, calc(100vh - 110px)); background: var(--hz3-ink); } body.haze-v2 .hero::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0; height: 110px; background: linear-gradient(transparent, rgba(11,27,33,.54)); pointer-events: none; } body.haze-v2 .hero-bg::after { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(70% 70% at 72% 45%, rgba(143,180,121,.12), transparent 72%), linear-gradient(90deg, rgba(7,19,24,.94) 0%, rgba(7,19,24,.76) 43%, rgba(7,19,24,.24) 100%); } body.haze-v2 .hero-inner { gap: clamp(38px, 7vw, 110px); } body.haze-v2 .hero-title { max-width: 780px; font-size: clamp(54px, 7.5vw, 106px); line-height: .85; } body.haze-v2 .hero-description { max-width: 650px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; } body.haze-v2 .hero-product-card { border-radius: 22px !important; border-color: rgba(255,255,255,.18) !important; background: rgba(255,253,248,.96) !important; box-shadow: 0 30px 80px rgba(0,0,0,.35) !important; transform: rotate(1.4deg); } body.haze-v2 .hero-product-card:hover { transform: rotate(0) translateY(-6px); } body.haze-v2 .hero-product-name, body.haze-v2 .hero-product-strain { color: var(--hz3-ink) !important; -webkit-text-fill-color: var(--hz3-ink) !important; } body.haze-v2 .hero-product-price { color: #9e5c1b !important; -webkit-text-fill-color: #9e5c1b !important; } /* Guided shopping: desire first, taxonomy second. */ .haze-guide-v3 { overflow: hidden; padding: clamp(72px, 9vw, 128px) 0; background: var(--hz3-cream); color: var(--hz3-ink); } .haze-guide-v3__header { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: end; gap: 44px; margin-bottom: 34px; } .haze-guide-v3 .section-label { color: #507548; } .haze-guide-v3 .section-title { max-width: 720px; margin: 8px 0 0; color: var(--hz3-ink); font-size: clamp(40px, 6vw, 74px); line-height: .92; } .haze-guide-v3__header > p { max-width: 520px; margin: 0; color: rgba(11,27,33,.68); font-size: 16px; line-height: 1.7; } .haze-guide-v3__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .haze-guide-v3__card, body.haze-v2 a.haze-guide-v3__card:not(#_hz) { --guide-tone: var(--hz3-sage); position: relative; display: flex !important; min-height: 390px; flex-direction: column; overflow: hidden; border: 1px solid var(--hz3-line-light) !important; border-radius: var(--hz3-radius) !important; padding: 24px !important; background: var(--hz3-paper) !important; box-shadow: 0 8px 26px rgba(11,27,33,.08) !important; color: var(--hz3-ink) !important; -webkit-text-fill-color: var(--hz3-ink) !important; text-decoration: none !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; } .haze-guide-v3__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--guide-tone); } .haze-guide-v3__card::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: color-mix(in srgb, var(--guide-tone) 20%, transparent); } .haze-guide-v3__card--gold { --guide-tone: var(--hz3-gold); } .haze-guide-v3__card--coral { --guide-tone: var(--hz3-coral); } .haze-guide-v3__card--blue { --guide-tone: var(--hz3-blue); } .haze-guide-v3__card:hover { z-index: 2; transform: translateY(-8px) rotate(-.35deg); border-color: var(--guide-tone) !important; box-shadow: var(--hz3-shadow) !important; } .haze-guide-v3__number { align-self: flex-end; color: color-mix(in srgb, var(--guide-tone) 80%, var(--hz3-ink)); font-family: 'Big Shoulders Display', sans-serif; font-size: 33px; font-weight: 800; line-height: 1; } .haze-guide-v3__moment { margin-top: 54px; color: rgba(11,27,33,.48); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .haze-guide-v3__card h3 { max-width: 260px; margin: 8px 0 11px; color: var(--hz3-ink); font-family: 'Big Shoulders Display', sans-serif; font-size: clamp(30px, 3vw, 42px); font-weight: 800; letter-spacing: -.02em; line-height: .96; text-transform: uppercase; } .haze-guide-v3__card p { margin: 0; color: rgba(11,27,33,.64); font-size: 13px; line-height: 1.55; } .haze-guide-v3__recommendation { display: flex; flex-direction: column; margin-top: auto; padding-top: 28px; } .haze-guide-v3__recommendation span { color: rgba(11,27,33,.42); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .haze-guide-v3__recommendation strong { color: var(--hz3-ink); font-size: 13px; } .haze-guide-v3__cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; border-top: 1px solid var(--hz3-line-light); padding-top: 15px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .haze-guide-v3__cta span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--guide-tone); font-size: 17px; } .haze-guide-v3__helper { display: flex; align-items: center; gap: 12px; margin-top: 20px; border: 1px solid rgba(11,27,33,.09); border-radius: 999px; padding: 10px 14px; background: rgba(255,255,255,.48); } .haze-guide-v3__helper-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; background: var(--hz3-ink); color: #fff; font-weight: 800; } .haze-guide-v3__helper p { flex: 1; margin: 0; color: rgba(11,27,33,.65); font-size: 12px; } .haze-guide-v3__helper a { color: var(--hz3-ink) !important; font-size: 11px; font-weight: 800; text-decoration: underline !important; text-underline-offset: 3px; } /* Tabbed best sellers and product cards: rich product stories against ink. */ body.haze-v2 .haze-best-sellers-section .best-sellers { padding: clamp(72px, 9vw, 120px) 0; background: var(--hz3-ink); } .haze-best-sellers-v3__tabs { display: flex; overflow-x: auto; gap: 7px; margin: 20px 0 28px; padding: 3px; scrollbar-width: none; } .haze-best-sellers-v3__tabs::-webkit-scrollbar { display: none; } .haze-best-sellers-v3__tab { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 9px 15px; background: transparent; color: rgba(255,255,255,.66); font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; } .haze-best-sellers-v3__tab:hover, .haze-best-sellers-v3__tab.is-active { border-color: var(--hz3-sage); background: var(--hz3-sage); color: var(--hz3-ink); } .haze-best-sellers-v3__panel[hidden] { display: none !important; } .haze-best-sellers-v3__panel .products-grid { animation: hz3-panel-in .28s ease both; } .haze-best-sellers-v3__lazy-slot { min-height: 420px; display: grid; place-items: center; } .haze-best-sellers-v3__loading, .haze-best-sellers-v3__fallback { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 11px 18px; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 700; letter-spacing: .04em; } .haze-best-sellers-v3__loading[hidden], .haze-best-sellers-v3__fallback[hidden] { display: none !important; } .haze-best-sellers-v3__loading span { width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.24); border-top-color: var(--hz3-sage); border-radius: 50%; animation: hz3-panel-spin .7s linear infinite; } .haze-best-sellers-v3__fallback { color: var(--hz3-sage-light); text-decoration: none; } @keyframes hz3-panel-spin { to { transform: rotate(360deg); } } @keyframes hz3-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } body.haze-v2 .haze-merch-card { --hz3-card-accent: var(--hz3-sage); position: relative; border: 1px solid rgba(143,180,121,.24) !important; border-radius: var(--hz3-radius) !important; background: linear-gradient(155deg, #173641 0%, #0d222a 76%) !important; box-shadow: 0 10px 34px rgba(0,0,0,.18) !important; color: #fff !important; } body.haze-v2 .haze-merch-card--preroll { --hz3-card-accent: var(--hz3-gold); } body.haze-v2 .haze-merch-card--vape { --hz3-card-accent: var(--hz3-blue); } body.haze-v2 .haze-merch-card--edible { --hz3-card-accent: var(--hz3-coral); } body.haze-v2 .haze-merch-card--concentrate { --hz3-card-accent: #b79bda; } body.haze-v2 .haze-merch-card:hover { border-color: var(--hz3-card-accent) !important; box-shadow: 0 20px 54px rgba(0,0,0,.3) !important; } body.haze-v2 .haze-merch-card__media { isolation: isolate; border-bottom: 1px solid rgba(143,180,121,.18); background: radial-gradient(circle at 50% 44%, #fffdf8 0%, #eee7da 76%, #dcd5c8 100%); } body.haze-v2 .haze-merch-card__media::after { content: ""; position: absolute; z-index: 1; inset: 0; box-shadow: inset 0 -22px 35px rgba(11,27,33,.08); pointer-events: none; } body.haze-v2 .haze-merch-card__image { mix-blend-mode: multiply; } body.haze-v2 .haze-merch-card__body { position: relative; min-height: 276px; padding: 20px 18px 18px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--hz3-card-accent) 12%, transparent), transparent 42%), linear-gradient(155deg, #173641 0%, #0d222a 76%); } body.haze-v2 .haze-merch-card__body::before { content: ""; position: absolute; top: 0; right: 18px; left: 18px; height: 2px; background: linear-gradient(90deg, var(--hz3-card-accent), transparent 82%); } body.haze-v2 .haze-merch-card__eyebrow { color: var(--hz3-card-accent); } body.haze-v2 .haze-merch-card__verified { color: rgba(255,255,255,.58); } body.haze-v2 .haze-merch-card .haze-merch-card__title a:not(#_hz) { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-merch-card__reviews { color: rgba(255,255,255,.58); } body.haze-v2 .haze-merch-card__reviews strong { color: #fff; } body.haze-v2 .haze-merch-card__summary { display: -webkit-box; min-height: 38px; overflow: hidden; margin: 8px 0 0; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.haze-v2 .haze-merch-card__fact { border-color: color-mix(in srgb, var(--hz3-card-accent) 30%, transparent); background: color-mix(in srgb, var(--hz3-card-accent) 10%, transparent); color: rgba(255,255,255,.68); } body.haze-v2 .haze-merch-card__fact b { color: #fff; } body.haze-v2 .haze-profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } body.haze-v2 .haze-profile-badges__item { display: inline-flex; min-height: 31px; align-items: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--hz3-card-accent, var(--hz3-sage)) 38%, transparent); border-radius: 999px; padding: 6px 10px; background: color-mix(in srgb, var(--hz3-card-accent, var(--hz3-sage)) 11%, transparent); color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.15; } body.haze-v2 .haze-profile-badges__item b { color: #fff; font-weight: 850; } body.haze-v2 .haze-profile-badges__item--mood { border-color: rgba(143,180,121,.42); background: rgba(143,180,121,.12); } body.haze-v2 .haze-profile-badges__item--flavor { border-color: rgba(244,163,59,.38); background: rgba(244,163,59,.1); } body.haze-v2 .haze-profile-badges__item--terpene { border-color: rgba(120,174,190,.4); background: rgba(120,174,190,.1); } body.haze-v2 .haze-profile-badges--dawn { margin: 9px 0 4px; } body.haze-v2 .haze-profile-badges--dawn .haze-profile-badges__item { border-color: rgba(11,27,33,.13); background: rgba(143,180,121,.1); color: rgba(11,27,33,.68); } body.haze-v2 .haze-profile-badges--dawn .haze-profile-badges__item b { color: var(--hz3-ink); } body.haze-v2 .haze-profile-badges--dawn .haze-profile-badges__item--flavor { background: rgba(244,163,59,.11); } body.haze-v2 .haze-merch-card__stock { color: #ffbf73; } body.haze-v2 .haze-merch-card__price strong { color: var(--hz3-gold); } body.haze-v2 .haze-merch-card__price s, body.haze-v2 .haze-merch-card__from { color: rgba(255,255,255,.46); } body.haze-v2 .haze-merch-card__cta, body.haze-v2 a.haze-merch-card__cta:not(#_hz) { min-height: 42px; border-color: var(--hz3-card-accent) !important; border-radius: 999px !important; padding-right: 16px !important; padding-left: 16px !important; background: var(--hz3-card-accent) !important; } body.haze-v2 .haze-merch-card__status { color: var(--hz3-sage-light); } body.haze-v2 .haze-merch-card__badge--custom { background: var(--hz3-coral); color: #fff; } body.haze-v2 .haze-merch-card__variant-picker { margin-top: 12px; } body.haze-v2 .haze-merch-card__variant-picker label { display: block; margin-bottom: 6px; color: rgba(255,255,255,.62) !important; -webkit-text-fill-color: rgba(255,255,255,.62) !important; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } body.haze-v2 .haze-merch-card__variant-picker select { width: 100%; min-height: 42px; border: 1px solid color-mix(in srgb, var(--hz3-card-accent) 38%, transparent) !important; border-radius: 9px; padding: 8px 34px 8px 11px; background-color: rgba(255,255,255,.07) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; } body.haze-v2 .haze-merch-card__variant-picker select:focus { outline: 2px solid var(--hz3-card-accent); outline-offset: 2px; } body.haze-v2 .haze-merch-card__variant-picker option { background: var(--hz3-deep); color: #fff; } body.haze-v2 .haze-merch-card__cta[disabled] { border-color: rgba(255,255,255,.13) !important; background: rgba(255,255,255,.09) !important; color: rgba(255,255,255,.46) !important; -webkit-text-fill-color: rgba(255,255,255,.46) !important; box-shadow: none !important; } /* Site-wide buying controls for Dawn cards (search, featured collections, collage and Shopify recommendation surfaces). */ body.haze-v2 .haze-card__sitewide-quick-add { position: relative; z-index: 2; display: grid; grid-row-start: 4; gap: 9px; margin: 4px 0 10px; border: 1px solid rgba(11,27,33,.11); border-radius: 13px; padding: 11px; background: radial-gradient(circle at 100% 0, rgba(143,180,121,.18), transparent 46%), rgba(255,253,248,.82); box-shadow: 0 8px 20px rgba(11,27,33,.06); } body.haze-v2 .card--card .haze-card__sitewide-quick-add { margin: 4px 13px 13px; } body.haze-v2 .haze-card__variant-picker label { display: block; margin-bottom: 5px; color: rgba(11,27,33,.58); font-size: 9px; font-weight: 800; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; } body.haze-v2 .haze-card__variant-picker select { width: 100%; min-height: 42px; border: 1px solid rgba(11,27,33,.18); border-radius: 9px; padding: 8px 34px 8px 11px; background-color: #fff; color: var(--hz3-ink); font: inherit; font-size: 11px; font-weight: 700; line-height: 1.25; cursor: pointer; } body.haze-v2 .haze-card__variant-picker select:focus { outline: 2px solid var(--hz3-sage); outline-offset: 2px; } body.haze-v2 .haze-card__sitewide-action { display: grid; grid-template-columns: minmax(70px, auto) minmax(118px, 1fr); align-items: center; gap: 8px; } body.haze-v2 .haze-card__sitewide-quick-add:not(.haze-card__sitewide-quick-add--variants) .haze-card__sitewide-action { grid-template-columns: 1fr; } body.haze-v2 .haze-card__selected-price { color: #9e5c1b; font-size: 11px; font-weight: 800; line-height: 1.2; } body.haze-v2 .haze-card__sitewide-cta { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid var(--hz3-sage); border-radius: 999px; padding: 9px 14px; background: var(--hz3-sage); color: var(--hz3-ink); font: inherit; font-size: 10px; font-weight: 900; letter-spacing: .08em; line-height: 1; text-align: center; text-transform: uppercase; box-shadow: 0 7px 16px rgba(80,117,72,.18); cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; } body.haze-v2 .haze-card__sitewide-cta:hover:not([disabled]) { transform: translateY(-1px); background: var(--hz3-sage-light); box-shadow: 0 10px 20px rgba(80,117,72,.24); } body.haze-v2 .haze-card__sitewide-cta[disabled] { border-color: rgba(11,27,33,.1); background: rgba(11,27,33,.07); color: rgba(11,27,33,.42); box-shadow: none; cursor: not-allowed; } body.haze-v2 .haze-card__quick-status { min-height: 0; margin: 0; color: #507548; font-size: 10px; font-weight: 700; line-height: 1.3; } body.haze-v2 .haze-card__quick-status:empty { display: none; } body.haze-v2 .card--horizontal .haze-card__sitewide-quick-add { gap: 7px; margin: 6px 0 0; padding: 8px; } body.haze-v2 .card--horizontal .haze-card__sitewide-action { grid-template-columns: 1fr; } body.haze-v2 .card--horizontal .haze-card__selected-price { display: none; } @media (max-width: 749px) { body.haze-v2 .haze-card__sitewide-action { grid-template-columns: 1fr; } body.haze-v2 .haze-card__selected-price { min-height: 13px; } } /* Review proof: make real orders feel like evidence, not a feed. */ body.haze-v2 .haze-reviews-section { background: var(--hz3-cream); } body.haze-v2 .haze-reviews { padding: clamp(70px,9vw,120px) 0 !important; color: var(--hz3-ink); } body.haze-v2 .haze-reviews .container { max-width: 1240px; } body.haze-v2 .haze-reviews__summary { grid-template-columns: .7fr 1.3fr; overflow: hidden; border: 1px solid var(--hz3-line-light); border-radius: var(--hz3-radius); padding: 25px 28px; background: var(--hz3-paper); box-shadow: 0 12px 40px rgba(11,27,33,.08); } body.haze-v2 .haze-reviews__score-num { color: var(--hz3-ink); font-family: 'Big Shoulders Display',sans-serif; font-size: 62px; font-weight: 800; } body.haze-v2 .haze-reviews__stars { color: var(--hz3-gold); } body.haze-v2 .haze-reviews__heading { color: var(--hz3-ink); font-family: 'Big Shoulders Display',sans-serif; font-size: clamp(36px,5vw,60px); font-weight: 800; letter-spacing: -.025em; line-height: .95; text-transform: uppercase; } body.haze-v2 .haze-reviews__items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } body.haze-v2 .haze-reviews__item { min-width: 0; border: 1px solid var(--hz3-line-light); border-radius: 16px; padding: 22px; background: var(--hz3-paper); } body.haze-v2 .haze-reviews__meta { align-items: flex-start; flex-direction: column; gap: 3px; } body.haze-v2 .haze-reviews__product { min-height: 36px; } body.haze-v2 .haze-reviews__body { color: rgba(11,27,33,.72); font-size: 14px; line-height: 1.55; } body.haze-v2 .haze-reviews__all { color: rgba(11,27,33,.62); font-size: 12px; text-align: center; } body.haze-v2 .haze-reviews__all a { color: var(--hz3-ink) !important; text-underline-offset: 3px; } /* Collection: remove legacy green-card takeover and make tools subordinate. */ body.haze-v2 .haze-collection { background: var(--hz3-cream); color: var(--hz3-ink); } body.haze-v2 .haze-collection .collection-breadcrumbs { background: var(--hz3-ink); } body.haze-v2 .haze-collection .collection-banner { min-height: 290px; background: var(--hz3-ink); } body.haze-v2 .haze-collection .collection-banner-overlay { background: linear-gradient(90deg, rgba(5,17,22,.92), rgba(5,17,22,.52)); } body.haze-v2 .haze-collection .collection-page-title { max-width: 830px; font-size: clamp(48px, 7vw, 82px); line-height: .9; } body.haze-v2 .haze-collection .collection-banner-kicker { display: inline-block; margin-bottom: 9px; color: var(--hz3-sage-light); font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; } body.haze-v2 .haze-collection .collection-decision-prompt { max-width: 670px; margin: 13px 0 0; color: rgba(255,255,255,.76); font-size: clamp(14px,1.5vw,17px); line-height: 1.55; } body.haze-v2 .haze-collection .hc-shop-nav { position: sticky; z-index: 12; top: var(--header-height, 0px); border-color: rgba(11,27,33,.1); background: rgba(245,240,231,.94); backdrop-filter: blur(16px); } body.haze-v2 .haze-collection .hc-shop-nav__inner { justify-content: center; } body.haze-v2 .haze-collection .hc-shop-nav a { border-color: rgba(11,27,33,.14); color: rgba(11,27,33,.68) !important; -webkit-text-fill-color: rgba(11,27,33,.68) !important; background: rgba(255,255,255,.52); } body.haze-v2 .haze-collection .hc-proof-strip { background: var(--hz3-sage); } body.haze-v2 .haze-collection .collection-toolbar { background: var(--hz3-paper); border-color: rgba(11,27,33,.1); } body.haze-v2 .haze-collection .hc-count-text, body.haze-v2 .haze-collection .sort-label { color: rgba(11,27,33,.59); } body.haze-v2 .haze-collection .sort-select { border-color: rgba(11,27,33,.15); background: #fff; color: var(--hz3-ink); } body.haze-v2 .haze-collection .collection-products { padding-top: 34px; background: var(--hz3-cream); } body.haze-v2 .haze-collection .hc-filters { border-color: rgba(11,27,33,.12); background: rgba(255,253,248,.88); box-shadow: 0 12px 36px rgba(11,27,33,.08); } body.haze-v2 .haze-collection .hc-filter-intro { margin: 14px 0 7px; border-radius: 12px; padding: 13px; background: linear-gradient(145deg, rgba(143,180,121,.18), rgba(120,174,190,.09)); } body.haze-v2 .haze-collection .hc-filter-intro__eyebrow { color: #507548; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } body.haze-v2 .haze-collection .hc-filter-intro p { margin: 4px 0 10px; color: rgba(11,27,33,.72); font-size: 12px; line-height: 1.4; } body.haze-v2 .haze-collection .hc-product-search { display: grid; grid-template-columns: 16px minmax(0,1fr) 30px; min-height: 42px; align-items: center; gap: 7px; border: 1px solid rgba(11,27,33,.15); border-radius: 10px; padding: 0 5px 0 11px; background: #fff; } body.haze-v2 .haze-collection .hc-product-search:focus-within { border-color: #6e9b60; box-shadow: 0 0 0 2px rgba(143,180,121,.18); } body.haze-v2 .haze-collection .hc-product-search > svg { width: 15px; fill: none; stroke: #507548; stroke-width: 1.8; } body.haze-v2 .haze-collection .hc-product-search input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 9px 0; background: transparent; color: var(--hz3-ink); font: inherit; font-size: 12px; } body.haze-v2 .haze-collection .hc-product-search input::placeholder { color: rgba(11,27,33,.46); } body.haze-v2 .haze-collection .hc-product-search button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; padding: 0; background: var(--hz3-ink); color: #fff; cursor: pointer; } body.haze-v2 .haze-collection .hc-product-search button svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 2; } body.haze-v2 .haze-collection .hc-product-search__caption { display: block; margin: 5px 2px 0; color: rgba(11,27,33,.48); font-size: 9px; line-height: 1.25; } body.haze-v2 .haze-collection .hc-editor-note { margin-top: 9px; border-left: 2px solid #a95f00; padding: 6px 8px; background: rgba(255,166,55,.12); color: rgba(11,27,33,.7); font-size: 10px; line-height: 1.35; } body.haze-v2 .haze-collection .hc-option-finder { margin: 14px 0 2px; } body.haze-v2 .haze-collection .hc-option-finder > span { display: block; margin: 0 0 6px 2px; color: rgba(11,27,33,.54); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } body.haze-v2 .haze-collection .hc-filter-search { display: flex; min-height: 39px; align-items: center; gap: 8px; border: 1px solid rgba(11,27,33,.13); border-radius: 999px; padding: 0 11px; background: rgba(255,255,255,.78); } body.haze-v2 .haze-collection .hc-filter-search:focus-within { border-color: #6e9b60; box-shadow: 0 0 0 2px rgba(143,180,121,.18); } body.haze-v2 .haze-collection .hc-filter-search svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: #507548; stroke-width: 1.8; } body.haze-v2 .haze-collection .hc-filter-search input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 8px 0; background: transparent; color: var(--hz3-ink); font: inherit; font-size: 12px; } body.haze-v2 .haze-collection .hc-filter-search input::placeholder { color: rgba(11,27,33,.45); } body.haze-v2 .haze-collection .hc-filter-search button { flex: 0 0 auto; border: 0; padding: 2px 0 2px 6px; background: transparent; color: rgba(11,27,33,.48); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; } body.haze-v2 .haze-collection .hc-filter-search__empty { margin: 7px 2px 0; color: #8b4b17; font-size: 10px; line-height: 1.35; } body.haze-v2 .haze-collection .hc-filter-groups { display: flex; flex-direction: column; } body.haze-v2 .haze-collection .hc-fgroup { order: var(--hc-filter-order, 10); padding: 0; } body.haze-v2 .haze-collection .hc-fgroup > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 14px 0 12px; list-style: none; cursor: pointer; } body.haze-v2 .haze-collection .hc-fgroup > summary::-webkit-details-marker { display: none; } body.haze-v2 .haze-collection .hc-fgroup > summary svg { width: 14px; flex: 0 0 14px; fill: none; stroke: rgba(11,27,33,.5); stroke-width: 1.8; transition: transform .18s ease; } body.haze-v2 .haze-collection .hc-fgroup[open] > summary svg { transform: rotate(180deg); } body.haze-v2 .haze-collection .hc-fgroup-content { padding: 0 0 13px; } body.haze-v2 .haze-collection .hc-fgroup--mood { margin: 7px -8px 0; border: 1px solid rgba(143,180,121,.22); border-radius: 12px; padding: 14px 8px; background: rgba(143,180,121,.08); } body.haze-v2 .haze-collection .hc-fgroup--mood .hc-fgroup-title span::before { content: "How do you want to feel?"; display: block; margin-bottom: 4px; color: var(--hz3-ink); font-family: 'Big Shoulders Display',sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1; text-transform: none; } body.haze-v2 .haze-collection .hc-fgroup[hidden] { display: none !important; } body.haze-v2 .haze-collection .hc-filters-head span, body.haze-v2 .haze-collection .hc-fgroup-title, body.haze-v2 .haze-collection .hc-fopt.active { color: var(--hz3-ink); } body.haze-v2 .haze-collection .hc-fgroup { border-color: rgba(11,27,33,.09); } body.haze-v2 .haze-collection .hc-fopt { color: rgba(11,27,33,.64); } body.haze-v2 .haze-collection .hc-fopt:hover { background: rgba(143,180,121,.13); color: var(--hz3-ink); } body.haze-v2 .haze-collection .hc-fcount { color: rgba(11,27,33,.39); } body.haze-v2 .haze-collection .hc-filter-more { margin: 8px 0 0 6px; border: 0; border-bottom: 1px solid rgba(80,117,72,.38); padding: 1px 0; background: transparent; color: #507548; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; } body.haze-v2 .haze-collection .hc-price input { border-color: rgba(11,27,33,.14); background: #fff; color: var(--hz3-ink); } body.haze-v2 .haze-collection .haze-heat-notice { background: linear-gradient(90deg, #fff0cf, #fff8e8, #fff0cf) !important; } body.haze-v2 .haze-collection .heat-notice-text { color: #263b43 !important; -webkit-text-fill-color: #263b43 !important; } body.haze-v2 .haze-collection .heat-notice-text strong { color: #a95f00 !important; -webkit-text-fill-color: #a95f00 !important; } body.haze-v2 .haze-collection .heat-notice-icon { color: #b76600 !important; } body.haze-v2 .haze-collection .product-card { background: var(--hz3-paper) !important; } body.haze-v2 .haze-collection .product-name, body.haze-v2 .haze-collection .product-category, body.haze-v2 .haze-collection .product-price { color: var(--hz3-ink) !important; -webkit-text-fill-color: var(--hz3-ink) !important; } .hc-conversion-break { grid-column: 1 / -1; } .hc-conversion-break__inner { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(240px,.8fr); align-items: center; gap: 34px; overflow: hidden; border-radius: var(--hz3-radius); padding: 30px 34px; background: var(--hz3-ink); color: #fff; } .hc-conversion-break__eyebrow { color: var(--hz3-sage); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .hc-conversion-break h2 { margin: 7px 0 8px; color: #fff; font-family: 'Big Shoulders Display', sans-serif; font-size: clamp(32px,4vw,54px); font-weight: 800; line-height: .92; text-transform: uppercase; } .hc-conversion-break p { margin: 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.55; } .hc-conversion-break__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; } .hc-conversion-break__actions a { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 10px 15px; color: #fff !important; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-decoration: none !important; text-transform: uppercase; } .hc-conversion-break__actions a:first-child { border-color: var(--hz3-sage); background: var(--hz3-sage); color: var(--hz3-ink) !important; -webkit-text-fill-color: var(--hz3-ink) !important; } /* PDP: sticky, high-contrast decision card; descriptions remain editorial below. */ body.haze-v2 .haze-product { background: var(--hz3-cream); color: var(--hz3-ink); } body.haze-v2 .haze-product .collection-breadcrumbs { background: var(--hz3-ink); } body.haze-v2 .haze-product .product-page-grid { gap: clamp(30px,5vw,76px); padding-top: 34px; } body.haze-v2 .haze-product .product-main-image { border: 1px solid rgba(11,27,33,.1); border-radius: 24px; background: var(--hz3-paper); box-shadow: 0 18px 50px rgba(11,27,33,.09); } body.haze-v2 .haze-product .product-details { border: 1px solid rgba(11,27,33,.11); border-radius: 24px; padding: clamp(22px,3.4vw,38px); background: var(--hz3-paper); box-shadow: var(--hz3-shadow); } body.haze-v2 .haze-product .product-page-title { color: var(--hz3-ink); font-size: clamp(42px,5vw,66px); line-height: .9; } body.haze-v2 .haze-product .product-type-label { color: #557e4b; } body.haze-v2 .haze-product .pdp-rating-proof { color: rgba(11,27,33,.59); } body.haze-v2 .haze-product .pdp-rating-proof strong { color: var(--hz3-ink); } body.haze-v2 .haze-product .strain-stats-bar { border-color: rgba(11,27,33,.12) !important; background: rgba(143,180,121,.09); } body.haze-v2 .haze-product .strain-stat { border-color: rgba(11,27,33,.09); } body.haze-v2 .haze-product .strain-stat-label { color: rgba(11,27,33,.45); } body.haze-v2 .haze-product .strain-stat-value { color: var(--hz3-ink); } body.haze-v2 .haze-product .product-page-price { color: #9d5b13; } body.haze-v2 .haze-product .pdp-price-caption { color: rgba(11,27,33,.48); } body.haze-v2 .haze-product .product-option-label, body.haze-v2 .haze-product .qty-tier-heading { color: var(--hz3-ink); } body.haze-v2 .haze-product .product-cart-row { margin-top: 16px; } body.haze-v2 .haze-product .product-atc-btn { min-height: 58px; border-radius: 999px !important; box-shadow: 0 12px 28px rgba(85,126,75,.23); } body.haze-v2 .haze-product .pdp-buy-promises { border-color: rgba(11,27,33,.1); background: rgba(143,180,121,.08); } body.haze-v2 .haze-product .pdp-buy-promise { color: rgba(11,27,33,.66); } body.haze-v2 .haze-product .pdp-decision-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; border-left: 3px solid var(--hz3-sage); padding: 11px 13px; background: rgba(143,180,121,.08); color: rgba(11,27,33,.68); font-size: 12px; line-height: 1.5; } body.haze-v2 .haze-product .pdp-decision-note strong { color: var(--hz3-ink); } body.haze-v2 .haze-product .pdp-state-notice { margin: -7px 0 18px; border: 1px solid rgba(220,113,93,.28); border-radius: 10px; padding: 10px 12px; background: rgba(220,113,93,.08); color: rgba(11,27,33,.68); font-size: 11px; line-height: 1.45; } body.haze-v2 .haze-product .pdp-state-notice strong { color: #9c4637; } /* 3.2 PDP contrast repair: legacy product controls were authored for a dark panel and use !important white text. These scoped rules translate the full buy box to the new paper surface without changing its business logic. */ body.haze-v2 .haze-product .product-details { color: var(--hz3-ink) !important; -webkit-text-fill-color: initial; } body.haze-v2 .haze-product .product-page-title, body.haze-v2 .haze-product .strain-stat-value, body.haze-v2 .haze-product .product-option-label, body.haze-v2 .haze-product .qty-tiers-label, body.haze-v2 .haze-product .qty-tier-amount, body.haze-v2 .haze-product .qty-tier-label, body.haze-v2 .haze-product .variant-grid-title, body.haze-v2 .haze-product .variant-grid-price, body.haze-v2 .haze-product .subscribe-save-label, body.haze-v2 .haze-product .terpene-heading { color: var(--hz3-ink) !important; -webkit-text-fill-color: var(--hz3-ink) !important; } body.haze-v2 .haze-product .product-type-label, body.haze-v2 .haze-product .product-strain-type { color: #557e4b !important; -webkit-text-fill-color: #557e4b !important; } body.haze-v2 .haze-product .strain-stat-label, body.haze-v2 .haze-product .pdp-option-help, body.haze-v2 .haze-product .pdp-price-caption, body.haze-v2 .haze-product .subscribe-save-desc { color: rgba(11,27,33,.64) !important; -webkit-text-fill-color: rgba(11,27,33,.64) !important; } body.haze-v2 .haze-product .strain-stat-highlight { color: #9d5b13 !important; -webkit-text-fill-color: #9d5b13 !important; } body.haze-v2 .haze-product .strain-stats-bar { border-color: rgba(11,27,33,.13) !important; background: linear-gradient(135deg, rgba(143,180,121,.12), rgba(120,174,190,.08)) !important; } body.haze-v2 .haze-product .strain-stat { border-color: rgba(11,27,33,.1) !important; } body.haze-v2 .haze-product .variant-grid-btn { border-color: rgba(11,27,33,.14) !important; background: #fffdf8 !important; color: var(--hz3-ink) !important; -webkit-text-fill-color: var(--hz3-ink) !important; } body.haze-v2 .haze-product .variant-grid-btn:hover { border-color: #7ba369 !important; background: rgba(143,180,121,.1) !important; color: var(--hz3-ink) !important; } body.haze-v2 .haze-product .variant-grid-btn-active { border-color: #79a966 !important; background: linear-gradient(135deg, #9bce7e, #7fbd69) !important; color: var(--hz3-ink) !important; -webkit-text-fill-color: var(--hz3-ink) !important; box-shadow: 0 8px 24px rgba(85,126,75,.2) !important; } body.haze-v2 .haze-product .variant-grid-btn-active .variant-grid-price { color: rgba(11,27,33,.74) !important; -webkit-text-fill-color: rgba(11,27,33,.74) !important; } body.haze-v2 .haze-product .variant-grid-btn:disabled { border-color: rgba(11,27,33,.08) !important; background: rgba(11,27,33,.035) !important; color: rgba(11,27,33,.38) !important; -webkit-text-fill-color: rgba(11,27,33,.38) !important; } body.haze-v2 .haze-product .variant-grid-btn:disabled .variant-grid-title, body.haze-v2 .haze-product .variant-grid-btn:disabled .variant-grid-price, body.haze-v2 .haze-product .variant-grid-sold-out { color: rgba(11,27,33,.38) !important; -webkit-text-fill-color: rgba(11,27,33,.38) !important; } body.haze-v2 .haze-product .qty-tier { border-color: rgba(11,27,33,.12) !important; background: #fffdf8 !important; color: var(--hz3-ink) !important; -webkit-text-fill-color: var(--hz3-ink) !important; } body.haze-v2 .haze-product .qty-tier:hover { border-color: rgba(85,126,75,.5) !important; background: rgba(143,180,121,.08) !important; } body.haze-v2 .haze-product .qty-tier-active { border-color: #79a966 !important; background: rgba(143,180,121,.14) !important; box-shadow: inset 3px 0 0 #79a966 !important; } body.haze-v2 .haze-product .qty-tier-badge-default { background: rgba(11,27,33,.08) !important; color: rgba(11,27,33,.62) !important; -webkit-text-fill-color: rgba(11,27,33,.62) !important; } body.haze-v2 .haze-product .qty-tier-savings-msg { color: #557e4b !important; -webkit-text-fill-color: #557e4b !important; } body.haze-v2 .haze-product .subscribe-save-option { border-color: rgba(157,91,19,.22) !important; background: rgba(244,163,59,.06) !important; } body.haze-v2 .haze-product .subscribe-save-active { border-color: var(--hz3-gold) !important; background: rgba(244,163,59,.12) !important; } body.haze-v2 .haze-product .subscribe-save-frequency select { border-color: rgba(11,27,33,.16) !important; background-color: #fff !important; color: var(--hz3-ink) !important; -webkit-text-fill-color: var(--hz3-ink) !important; } body.haze-v2 .haze-product .product-trust-badge { border-color: rgba(11,27,33,.1) !important; background: rgba(143,180,121,.08) !important; color: rgba(11,27,33,.66) !important; -webkit-text-fill-color: rgba(11,27,33,.66) !important; } body.haze-v2 .haze-product .pdp-buy-promise { color: rgba(11,27,33,.66) !important; -webkit-text-fill-color: rgba(11,27,33,.66) !important; } body.haze-v2 .haze-product .pdp-lab-jump, body.haze-v2 .haze-product .pdp-batch-proof { color: #557e4b !important; -webkit-text-fill-color: #557e4b !important; } body.haze-v2 .haze-product .product-compare-price { color: rgba(11,27,33,.4) !important; -webkit-text-fill-color: rgba(11,27,33,.4) !important; } /* Preserve the lower PDP content as an intentional dark editorial band. */ body.haze-v2 .haze-product .product-tabs-wrapper { margin-top: 52px !important; border-top: 1px solid rgba(255,255,255,.08) !important; padding: 38px 0 46px !important; background: var(--hz3-ink) !important; color: #fff !important; } body.haze-v2 .haze-product .product-tab-nav { border-color: rgba(255,255,255,.12) !important; } body.haze-v2 .haze-product .product-tab-btn { color: rgba(255,255,255,.55) !important; -webkit-text-fill-color: rgba(255,255,255,.55) !important; } body.haze-v2 .haze-product .product-tab-btn:hover { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-product .product-tab-active { color: var(--hz3-sage-light) !important; -webkit-text-fill-color: var(--hz3-sage-light) !important; border-bottom-color: var(--hz3-sage) !important; } body.haze-v2 .haze-product .product-tab-content, body.haze-v2 .haze-product .product-description-content, body.haze-v2 .haze-product .product-tab-content p { color: rgba(255,255,255,.74) !important; -webkit-text-fill-color: rgba(255,255,255,.74) !important; } body.haze-v2 .haze-product .product-tab-content h1, body.haze-v2 .haze-product .product-tab-content h2, body.haze-v2 .haze-product .product-tab-content h3, body.haze-v2 .haze-product .product-tab-content h4, body.haze-v2 .haze-product .product-tab-content h5, body.haze-v2 .haze-product .product-tab-content strong, body.haze-v2 .haze-product .tab-section-heading, body.haze-v2 .haze-product .terpene-heading { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-product .coa-list-item-label { color: #d4e7c5 !important; -webkit-text-fill-color: #d4e7c5 !important; } body.haze-v2 .haze-product .coa-list-item-subtitle, body.haze-v2 .haze-product .coa-no-results { color: rgba(212,231,197,.58) !important; -webkit-text-fill-color: rgba(212,231,197,.58) !important; } @media (min-width: 990px) { body.haze-v2 .haze-product .product-details { position: sticky; top: 110px; } } @media (max-width: 989px) { .haze-guide-v3__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .haze-guide-v3__card { min-height: 330px; } body.haze-v2 .haze-reviews__items { grid-template-columns: 1fr; } body.haze-v2 .haze-collection .hc-shop-nav { top: 0; } body.haze-v2 .haze-collection .hc-shop-nav__inner { justify-content: flex-start; } } @media (max-width: 749px) { body.haze-v2 .hero { min-height: 720px; } body.haze-v2 .hero-bg::after { background: linear-gradient(180deg, rgba(7,19,24,.5), rgba(7,19,24,.94) 60%); } body.haze-v2 .hero-title { font-size: clamp(47px,15vw,68px); } body.haze-v2 .hero-product-card { transform: none; } .haze-guide-v3 { padding: 64px 0; } .haze-guide-v3__header { grid-template-columns: 1fr; gap: 16px; } .haze-guide-v3__grid { display: flex; overflow-x: auto; margin-right: -20px; padding: 0 20px 18px 0; scroll-snap-type: x mandatory; scrollbar-width: none; } .haze-guide-v3__grid::-webkit-scrollbar { display: none; } .haze-guide-v3__card { min-width: min(82vw, 320px); min-height: 350px; scroll-snap-align: start; } .haze-guide-v3__helper { align-items: flex-start; border-radius: 16px; } .haze-guide-v3__helper p { line-height: 1.45; } .haze-guide-v3__helper a { display: none; } body.haze-v2 .haze-merch-card__body { min-height: 258px; padding: 16px 14px 14px; } body.haze-v2 .haze-merch-card__eyebrow { font-size: 8px; } body.haze-v2 .haze-merch-card__verified { display: none; } body.haze-v2 .haze-merch-card__title { min-height: 2.4em; font-size: 15px; } body.haze-v2 .haze-merch-card__summary { min-height: 34px; margin-top: 6px; font-size: 10px; line-height: 1.45; } body.haze-v2 .haze-merch-card__facts { gap: 4px; margin-top: 8px; } body.haze-v2 .haze-merch-card__fact { padding: 4px 6px; font-size: 9px; } body.haze-v2 .haze-merch-card__footer { align-items: stretch; flex-direction: column; gap: 10px; padding-top: 12px; } body.haze-v2 .haze-merch-card__price strong { font-size: 18px; } body.haze-v2 .haze-merch-card__cta, body.haze-v2 a.haze-merch-card__cta:not(#_hz) { width: 100%; } body.haze-v2 .haze-collection .hc-proof-strip__inner { grid-template-columns: repeat(2,1fr); row-gap: 8px; } body.haze-v2 .haze-collection .hc-proof-item:nth-child(2) { border-right: 0; } body.haze-v2 .haze-collection .collection-toolbar-inner { align-items: stretch; } body.haze-v2 .haze-collection .collection-results-count { justify-content: space-between; } .hc-conversion-break__inner { grid-template-columns: 1fr; gap: 18px; padding: 25px 20px; } .hc-conversion-break__actions { justify-content: flex-start; } body.haze-v2 .haze-product .product-details { border-radius: 20px; padding: 22px 17px; } } @media (prefers-reduced-motion: reduce) { .haze-guide-v3__card, body.haze-v2 .hero-product-card, body.haze-v2 .haze-merch-card { transition: none !important; } } /* ===== 3.17 bundled source: assets/haze-typography-v5.css ===== */ /* The Haze Connect — typography system v5.1 Story voice: Funnel Display Packaging signature: Pressio X-Compressed (Adobe Fonts project wgb3rzk) Commerce interface: DM Sans Loaded last so this intentional system wins over the legacy Big Shoulders, Caveat and theme-editor font declarations without changing their mechanics. */ body.haze-v2 { --haze-font-display: "Funnel Display", "DM Sans", "Helvetica Neue", Arial, sans-serif; --haze-font-packaging: "pressio-x-compressed", "pressio-condensed", "Big Shoulders Display", "Arial Narrow", sans-serif; --haze-font-interface: "DM Sans", "Helvetica Neue", Arial, sans-serif; --font-heading-family: var(--haze-font-display) !important; --font-heading-weight: 700 !important; font-size: 16px !important; line-height: 1.6; } body.haze-v2 h1, body.haze-v2 h2, body.haze-v2 h3, body.haze-v2 h4, body.haze-v2 h5, body.haze-v2 h6, body.haze-v2 .h0, body.haze-v2 .h1, body.haze-v2 .h2, body.haze-v2 .h3, body.haze-v2 .h4, body.haze-v2 .h5 { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none; } /* ================================================================ STORY VOICE Open, non-condensed headlines create attention without sacrificing fluency. ================================================================ */ body.haze-v2 .hero-title, body.haze-v2 .collection-page-title, body.haze-v2 .blog-page-title, body.haze-v2 .article-page-title, body.haze-v2 .locator-title, body.haze-v2 .page-title, body.haze-v2 .main-page-title, body.haze-v2 .collection-hero__title, body.haze-v2 .title--primary, body.haze-v2 .product-page-title, body.haze-v2 .product__title h1, body.haze-v2 .h0 { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none; font-weight: 700 !important; letter-spacing: -.026em !important; line-height: .98 !important; text-transform: none !important; text-wrap: balance; } body.haze-v2 .hero-title { max-width: 940px; font-size: clamp(50px, 6.2vw, 88px) !important; font-weight: 700 !important; line-height: .95 !important; } body.haze-v2 .hero-title .highlight { font-family: inherit !important; font-style: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; } body.haze-v2 .collection-page-title, body.haze-v2 .blog-page-title, body.haze-v2 .article-page-title, body.haze-v2 .locator-title, body.haze-v2 .page-title, body.haze-v2 .main-page-title, body.haze-v2 .collection-hero__title, body.haze-v2 .title--primary { font-size: clamp(42px, 5.4vw, 74px) !important; } body.haze-v2 .product-page-title, body.haze-v2 .product__title h1 { font-size: clamp(40px, 4.6vw, 66px) !important; font-weight: 700 !important; line-height: 1 !important; } body.haze-v2 .section-title, body.haze-v2 .haze-v2-value__title, body.haze-v2 .haze-v2-diff__title, body.haze-v2 .haze-v2-proof__title, body.haze-v2 .haze-reviews__heading, body.haze-v2 .prl-title, body.haze-v2 .article-cta-title, body.haze-v2 .article-related-title, body.haze-v2 .collections-list-name, body.haze-v2 .hv-title, body.haze-v2 .hc-conversion-break h2, body.haze-v2 .haze-brand-story h2, body.haze-v2 .collection-list-title, body.haze-v2 .blog__title, body.haze-v2 .featured-collection .title, body.haze-v2 .rich-text__heading, body.haze-v2 .banner__heading { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none; font-weight: 700 !important; letter-spacing: -.022em !important; line-height: 1 !important; text-transform: none !important; text-wrap: balance; } body.haze-v2 .hv-title em, body.haze-v2 .section-title span, body.haze-v2 .haze-v2-value__title span, body.haze-v2 .haze-v2-diff__title span, body.haze-v2 .haze-v2-proof__title span { font-family: inherit !important; font-weight: inherit !important; } body.haze-v2 .haze-guide-v3__card h3, body.haze-v2 .effect-card h3, body.haze-v2 .haze-how-it-works h3, body.haze-v2 .haze-v2-diff__item h3, body.haze-v2 .page-trust-title, body.haze-v2 .blog-article-title, body.haze-v2 .related-products-heading, body.haze-v2 .wholesale-benefit-title, body.haze-v2 .wholesale-form-title { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none; font-weight: 600 !important; letter-spacing: -.014em !important; line-height: 1.08 !important; text-transform: none !important; } /* Product names are part of the brand story, not interface chrome. */ body.haze-v2 .haze-merch-card__title, body.haze-v2 .haze-merch-card__title a, body.haze-v2 .card__heading, body.haze-v2 .card__heading a, body.haze-v2 .product-name, body.haze-v2 .hero-product-name { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none; font-weight: 600 !important; letter-spacing: -.016em !important; line-height: 1.16 !important; } body.haze-v2 .haze-merch-card__title { min-height: 2.32em; font-size: 18px !important; } /* Prices get display confidence while their surrounding controls stay neutral. */ body.haze-v2 .haze-merch-card__price strong, body.haze-v2 .hero-product-price, body.haze-v2 .product-page-price, body.haze-v2 .haze-v2-value__price, body.haze-v2 .product-price, body.haze-v2 .haze-reviews__score-num, body.haze-v2 .haze-v2-value__fact strong, body.haze-v2 .hv-fact b, body.haze-v2 .haze-guide-v3__number { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none; font-weight: 700 !important; letter-spacing: -.025em !important; } body.haze-v2 .collection-name, body.haze-v2 .trust-item strong, body.haze-v2 .brand-value-text strong, body.haze-v2 .step-number, body.haze-v2 .review-stat .stat-number, body.haze-v2 .prl-tier-n, body.haze-v2 .product-title, body.haze-v2 .haze-collection .hc-fgroup--mood .hc-fgroup-title span::before { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none; } body.haze-v2 .haze-merch-card__price strong { font-size: 22px !important; } /* ================================================================ PACKAGING SIGNATURE Pressio appears only in compact labels—the same role it plays on-pack. ================================================================ */ body.haze-v2 .section-label, body.haze-v2 .hero-tagline, body.haze-v2 .brand-story-text .caveat-line, body.haze-v2 .hero-product-badge, body.haze-v2 .product-category, body.haze-v2 .product-category-label, body.haze-v2 .haze-merch-card__eyebrow, body.haze-v2 .haze-merch-card__badge, body.haze-v2 .haze-card__merch-badge, body.haze-v2 .haze-v2-value__eyebrow, body.haze-v2 .haze-v2-proof__eyebrow, body.haze-v2 .haze-v2-diff__eyebrow, body.haze-v2 .prl-kicker, body.haze-v2 .collection-banner-kicker, body.haze-v2 .hc-filter-intro__eyebrow, body.haze-v2 .hc-conversion-break__eyebrow, body.haze-v2 .hc-fgroup-title, body.haze-v2 .hc-proof-item, body.haze-v2 .sort-label, body.haze-v2 .product-type-label, body.haze-v2 .strain-stat-label, body.haze-v2 .product-option-label, body.haze-v2 .qty-tiers-label, body.haze-v2 .qty-tier-badge, body.haze-v2 .subscribe-save-label, body.haze-v2 .subscribe-save-badge, body.haze-v2 .coa-list-item-label, body.haze-v2 .mid-article-cta-label, body.haze-v2 .article-share-label, body.haze-v2 .prm-badge { font-family: var(--haze-font-packaging) !important; font-style: normal !important; font-synthesis: none; font-weight: 400 !important; } body.haze-v2 .announcement-bar, body.haze-v2 .nav-logo-text, body.haze-v2 .collection-tag, body.haze-v2 .review-author, body.haze-v2 .footer-col h4, body.haze-v2 .article-author-avatar, body.haze-v2 .haze-collection .heat-notice-text strong { font-family: var(--haze-font-packaging) !important; font-style: normal !important; font-synthesis: none; font-weight: 400 !important; } body.haze-v2 .hero-tagline, body.haze-v2 .brand-story-text .caveat-line, body.haze-v2 .section-label { letter-spacing: .14em !important; text-transform: uppercase !important; } body.haze-v2 .nav-links > li > a, body.haze-v2 .mobile-menu-heading, body.haze-v2 .mobile-menu-standalone { font-family: var(--haze-font-packaging) !important; font-style: normal !important; font-synthesis: none; font-weight: 400 !important; letter-spacing: .075em !important; } /* ================================================================ COMMERCE VOICE Familiar, highly legible forms reduce friction around decisions. ================================================================ */ body.haze-v2, body.haze-v2 button, body.haze-v2 input, body.haze-v2 select, body.haze-v2 textarea, body.haze-v2 .hc-filters, body.haze-v2 .hero-ctas, body.haze-v2 .product-form, body.haze-v2 .haze-merch-card__buy, body.haze-v2 .haze-merch-card__variant-picker, body.haze-v2 .haze-merch-card__summary, body.haze-v2 .haze-merch-card__reviews, body.haze-v2 .haze-merch-card__stock, body.haze-v2 .haze-merch-card__status, body.haze-v2 .product-description, body.haze-v2 .product-tabs-content, body.haze-v2 .facets-container, body.haze-v2 .predictive-search { font-family: var(--haze-font-interface) !important; } /* Restore packaging/display roles nested inside broadly-scoped commerce blocks. */ body.haze-v2 .hc-filters .hc-filter-intro__eyebrow, body.haze-v2 .hc-filters .hc-fgroup-title, body.haze-v2 .haze-merch-card__buy .haze-merch-card__from, body.haze-v2 .haze-merch-card__variant-picker label, body.haze-v2 .product-form .product-option-label, body.haze-v2 .product-form .qty-tiers-label, body.haze-v2 .product-form .qty-tier-badge, body.haze-v2 .product-form .subscribe-save-label, body.haze-v2 .product-form .subscribe-save-badge { font-family: var(--haze-font-packaging) !important; font-style: normal !important; font-synthesis: none; font-weight: 400 !important; } /* Maintain strong scanning and accessible touch targets in buying controls. */ body.haze-v2 .haze-merch-card__cta, body.haze-v2 a.haze-merch-card__cta, body.haze-v2 .btn, body.haze-v2 .button, body.haze-v2 .product-form__submit, body.haze-v2 .hc-price-apply { font-family: var(--haze-font-interface) !important; font-weight: 700 !important; letter-spacing: .055em !important; } body.haze-v2 .product-atc-btn, body.haze-v2 .mid-article-cta-btn { font-family: var(--haze-font-interface) !important; font-weight: 700 !important; letter-spacing: .055em !important; } /* ================================================================ LEGIBILITY SCALE The compressed face grows in size and gets lighter; dense shopping details use DM Sans so labels never compete with their values. ================================================================ */ body.haze-v2 .announcement-bar *, body.haze-v2 .announcement-bar a { font-size: 14px !important; font-weight: 500 !important; letter-spacing: .07em !important; } body.haze-v2 .nav-inner { min-height: 78px !important; } body.haze-v2 .nav-logo-img { max-height: 41px !important; } body.haze-v2 .nav-links > li > a { font-size: 16px !important; line-height: 1.2 !important; } body.haze-v2 .nav-dropdown a { font-family: var(--haze-font-interface) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important; } body.haze-v2 .mobile-menu-heading, body.haze-v2 .mobile-menu-standalone { font-size: 21px !important; line-height: 1.2 !important; } body.haze-v2 .mobile-menu-link { font-family: var(--haze-font-interface) !important; font-size: 16px !important; line-height: 1.4 !important; } body.haze-v2 .section-label, body.haze-v2 .hero-tagline, body.haze-v2 .brand-story-text .caveat-line { font-size: 13px !important; font-weight: 400 !important; line-height: 1.2 !important; } body.haze-v2 .hero-description { font-size: clamp(17px, 1.35vw, 20px) !important; line-height: 1.62 !important; } body.haze-v2 .section-subtitle, body.haze-v2 .page-subtitle, body.haze-v2 .collection-banner-description, body.haze-v2 .locator-subtitle { font-size: 17px !important; line-height: 1.6 !important; } /* Homepage and storytelling modules: remove the legacy 9–12px microtype. */ body.haze-v2 .hero-ctas .btn, body.haze-v2 .haze-v2-value__cta, body.haze-v2 .haze-v2-proof__cta, body.haze-v2 .best-sellers-header .btn-outline, body.haze-v2 .best-sellers .product-add { min-height: 48px !important; padding: 12px 20px !important; font-size: 13px !important; line-height: 1.2 !important; } body.haze-v2 .hero-product-badge, body.haze-v2 .collection-tag { font-size: 12px !important; font-weight: 400 !important; } body.haze-v2 .hero-product-name { font-size: 28px !important; } body.haze-v2 .hero-product-strain, body.haze-v2 .haze-v2-value__fact span, body.haze-v2 .haze-v2-proof__pass { font-size: 12px !important; } body.haze-v2 .hero-product-price { font-size: 24px !important; } body.haze-v2 .trust-item strong, body.haze-v2 .brand-value-text strong { font-size: 14px !important; } body.haze-v2 .trust-item span, body.haze-v2 .brand-value-text span { font-size: 13px !important; line-height: 1.45 !important; } body.haze-v2 .shop-by-effect-header .section-subtitle, body.haze-v2 .collections-header .section-subtitle { font-size: 17px !important; } body.haze-v2 .effect-card p, body.haze-v2 .haze-guide-v3__card p, body.haze-v2 .haze-v2-diff__card p, body.haze-v2 .haze-reviews__body { font-size: 15px !important; line-height: 1.6 !important; } body.haze-v2 .effect-card .effect-cta, body.haze-v2 .haze-guide-v3__moment, body.haze-v2 .haze-guide-v3__recommendation span, body.haze-v2 .haze-v2-value__eyebrow, body.haze-v2 .haze-v2-diff__eyebrow, body.haze-v2 .haze-v2-proof__eyebrow { font-size: 12px !important; } body.haze-v2 .haze-guide-v3__recommendation strong { font-size: 15px !important; } body.haze-v2 .haze-guide-v3__cta, body.haze-v2 .haze-guide-v3__helper a, body.haze-v2 .haze-best-sellers-v3__tab { font-size: 13px !important; } body.haze-v2 .haze-best-sellers-v3__tab { min-height: 44px; padding: 10px 17px !important; } body.haze-v2 .haze-guide-v3__helper p, body.haze-v2 .haze-reviews__all, body.haze-v2 .haze-reviews__how { font-size: 14px !important; line-height: 1.5 !important; } body.haze-v2 .best-sellers .product-category { font-size: 12px !important; font-weight: 400 !important; } body.haze-v2 .best-sellers .product-desc { font-size: 14px !important; line-height: 1.55 !important; } body.haze-v2 .best-sellers .product-price { font-size: 20px !important; } body.haze-v2 .brand-story-text p, body.haze-v2 .haze-v2-value__copy, body.haze-v2 .haze-v2-diff__intro, body.haze-v2 .haze-v2-proof__copy { font-size: 16px !important; line-height: 1.68 !important; } body.haze-v2 .haze-v2-value__price { font-size: 14px !important; } body.haze-v2 .haze-v2-diff__num { font-size: 11px !important; } body.haze-v2 .haze-v2-proof__row { font-size: 14px !important; } body.haze-v2 .haze-v2-proof__foot { font-size: 12px !important; line-height: 1.6 !important; } /* Product tiles */ body.haze-v2 .haze-merch-card__body { padding: 21px 21px 22px !important; } body.haze-v2 .haze-merch-card__badge { min-height: 31px !important; padding: 6px 11px !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: .09em !important; } body.haze-v2 .haze-merch-card__eyebrow { min-height: 22px !important; margin-bottom: 8px !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .08em !important; } body.haze-v2 .haze-merch-card__title { min-height: 2.3em; font-size: 21px !important; line-height: 1.15 !important; } body.haze-v2 .haze-merch-card__reviews, body.haze-v2 .haze-merch-card__reviews strong { font-size: 14px !important; } body.haze-v2 .haze-merch-card__star { font-size: 16px !important; } body.haze-v2 .haze-merch-card__summary { min-height: 44px !important; font-size: 14px !important; line-height: 1.55 !important; } body.haze-v2 .haze-profile-badges { gap: 8px !important; margin-top: 13px !important; } body.haze-v2 .haze-profile-badges__item { min-height: 38px !important; max-width: 100%; gap: 6px !important; box-sizing: border-box; padding: 8px 11px !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.2 !important; white-space: nowrap; } body.haze-v2 .haze-profile-badges__label { flex: 0 0 auto; color: rgba(255,255,255,.62) !important; font-family: var(--haze-font-interface) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .045em !important; line-height: 1.2 !important; text-transform: uppercase; } body.haze-v2 .haze-profile-badges__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #fff !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; } body.haze-v2 .haze-profile-badges--dawn .haze-profile-badges__label { color: rgba(11,27,33,.52) !important; } body.haze-v2 .haze-profile-badges--dawn .haze-profile-badges__value { color: var(--hz3-ink, #0b1b21) !important; } body.haze-v2 .haze-merch-card__stock, body.haze-v2 .haze-merch-card__status { font-size: 13px !important; line-height: 1.35 !important; } body.haze-v2 .haze-merch-card__variant-picker label { margin-bottom: 7px !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .08em !important; } body.haze-v2 .haze-merch-card__variant-picker select { min-height: 50px !important; padding: 10px 40px 10px 13px !important; font-size: 15px !important; line-height: 1.3 !important; } body.haze-v2 .haze-merch-card__from { font-size: 12px !important; letter-spacing: .08em !important; } body.haze-v2 .haze-merch-card__price strong { font-size: 28px !important; } body.haze-v2 .haze-merch-card__price s { font-size: 13px !important; } body.haze-v2 .haze-merch-card__cta, body.haze-v2 a.haze-merch-card__cta:not(#_hz) { min-height: 48px !important; padding: 11px 17px !important; font-size: 13px !important; line-height: 1.2 !important; } body.haze-v2 .haze-card--enhanced .haze-card__merch-badge { padding: 6px 9px !important; font-size: 11px !important; } body.haze-v2 .haze-card--enhanced .haze-card__proof-line > span { padding: 6px 9px !important; font-size: 13px !important; } body.haze-v2 .haze-card--enhanced .card__heading, body.haze-v2 .haze-card--enhanced .card__heading a { font-size: 19px !important; line-height: 1.2 !important; } body.haze-v2 .haze-card--enhanced .price, body.haze-v2 .haze-card--enhanced .price-item { font-size: 18px !important; } body.haze-v2 .haze-card__sitewide-quick-add { gap: 11px !important; padding: 14px !important; } body.haze-v2 .haze-card__variant-picker label { margin-bottom: 7px !important; font-family: var(--haze-font-packaging) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .08em !important; } body.haze-v2 .haze-card__variant-picker select { min-height: 50px !important; padding: 10px 40px 10px 13px !important; font-size: 15px !important; } body.haze-v2 .haze-card__selected-price, body.haze-v2 .haze-card__quick-status { font-size: 13px !important; } body.haze-v2 .haze-card__sitewide-cta { min-height: 48px !important; padding: 11px 15px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; } /* Collection navigation and filters */ body.haze-v2 .haze-collection .hc-shop-nav a { padding: 10px 16px !important; font-size: 14px !important; } body.haze-v2 .haze-collection .hc-proof-item { font-size: 12px !important; font-weight: 400 !important; letter-spacing: .07em !important; } body.haze-v2 .haze-collection .sort-label, body.haze-v2 .haze-collection .sort-select { font-size: 15px !important; } body.haze-v2 .haze-collection .hc-filters { flex-basis: 280px !important; width: 280px !important; padding: 21px 21px 12px !important; } body.haze-v2 .haze-collection .hc-filters-head span { font-size: 16px !important; } body.haze-v2 .haze-collection .hc-clear, body.haze-v2 .haze-collection .hc-fcount { font-size: 13px !important; } body.haze-v2 .haze-collection .hc-filter-intro__eyebrow { font-size: 12px !important; font-weight: 400 !important; } body.haze-v2 .haze-collection .hc-filter-intro p { font-size: 15px !important; line-height: 1.5 !important; } body.haze-v2 .haze-collection .hc-product-search, body.haze-v2 .haze-collection .hc-filter-search { min-height: 46px !important; } body.haze-v2 .haze-collection .hc-product-search input, body.haze-v2 .haze-collection .hc-filter-search input, body.haze-v2 .haze-collection .hc-price input { font-size: 15px !important; } body.haze-v2 .haze-collection .hc-product-search__caption, body.haze-v2 .haze-collection .hc-filter-search__empty, body.haze-v2 .haze-collection .hc-editor-note, body.haze-v2 .haze-collection .hc-option-finder > span, body.haze-v2 .haze-collection .hc-filter-more { font-size: 12px !important; line-height: 1.4 !important; } body.haze-v2 .haze-collection .hc-fgroup-title { font-size: 15px !important; font-weight: 400 !important; letter-spacing: .08em !important; } body.haze-v2 .haze-collection .hc-fopt { min-height: 42px; padding: 9px 7px !important; font-size: 15px !important; } body.haze-v2 .haze-collection .hc-check { flex-basis: 19px !important; width: 19px !important; height: 19px !important; } body.haze-v2 .haze-collection .hc-price-apply { min-height: 43px; font-size: 14px !important; } /* Product page */ body.haze-v2 .haze-product .product-type-label { font-size: 14px !important; font-weight: 400 !important; } body.haze-v2 .haze-product .pdp-rating-proof { font-size: 14px !important; } body.haze-v2 .haze-product .pdp-batch-proof { font-size: 13px !important; } body.haze-v2 .haze-product .pdp-decision-note { font-size: 15px !important; line-height: 1.55 !important; } body.haze-v2 .haze-product .pdp-state-notice { font-size: 14px !important; line-height: 1.5 !important; } body.haze-v2 .haze-product .strain-stat-label { font-size: 12px !important; font-weight: 400 !important; letter-spacing: .07em !important; } body.haze-v2 .haze-product .strain-stat-value { font-size: 16px !important; line-height: 1.3 !important; } body.haze-v2 .haze-product .pdp-price-caption, body.haze-v2 .haze-product .pdp-option-help { font-size: 13px !important; } body.haze-v2 .haze-product .product-option-label, body.haze-v2 .haze-product .qty-tiers-label { font-size: 16px !important; font-weight: 400 !important; } body.haze-v2 .haze-product .variant-grid-title, body.haze-v2 .haze-product .qty-tier-amount, body.haze-v2 .haze-product .qty-tier-label { font-size: 15px !important; } body.haze-v2 .haze-product .variant-grid-price, body.haze-v2 .haze-product .qty-tier-badge { font-size: 13px !important; } body.haze-v2 .haze-product .pdp-buy-promise, body.haze-v2 .haze-product .pdp-lab-jump, body.haze-v2 .haze-product .product-trust-badge { font-size: 13px !important; line-height: 1.35 !important; } body.haze-v2 .haze-product .product-tab-btn { min-height: 50px; font-size: 15px !important; } body.haze-v2 .haze-product .product-tab-content, body.haze-v2 .haze-product .product-tab-content p, body.haze-v2 .article-content, body.haze-v2 .article-content p { font-size: 17px !important; line-height: 1.72 !important; } body.haze-v2 .sticky-atc-title { font-size: 15px !important; } body.haze-v2 .sticky-atc-variant { font-size: 12px !important; } /* Fine print remains subordinate, but never illegible. */ body.haze-v2 .footer-col a { font-size: 15px !important; } body.haze-v2 .footer-disclaimer p, body.haze-v2 .newsletter-disclaimer, body.haze-v2 .age-gate-disclaimer, body.haze-v2 .footer-bottom p, body.haze-v2 .footer-legal a { font-size: 13px !important; line-height: 1.65 !important; } body.haze-v2 .haze-age-notice, body.haze-v2 .haze-age-notice--compact { font-size: 14px !important; line-height: 1.5 !important; } body.haze-v2 .haze-age-notice__title { font-size: 13px !important; } @media (min-width: 990px) and (max-width: 1199px) { body.haze-v2 .nav-links > li > a { font-size: 15px !important; } body.haze-v2 .haze-collection .hc-filters { flex-basis: 244px !important; width: 244px !important; } } @media (max-width: 749px) { body.haze-v2 .hero-title { font-size: clamp(43px, 12.5vw, 61px) !important; letter-spacing: -.03em !important; line-height: .96 !important; } body.haze-v2 .collection-page-title, body.haze-v2 .blog-page-title, body.haze-v2 .article-page-title, body.haze-v2 .locator-title, body.haze-v2 .page-title, body.haze-v2 .main-page-title, body.haze-v2 .collection-hero__title, body.haze-v2 .title--primary { font-size: clamp(38px, 10vw, 54px) !important; line-height: 1 !important; } body.haze-v2 .product-page-title, body.haze-v2 .product__title h1 { font-size: clamp(36px, 9.6vw, 50px) !important; } body.haze-v2 .haze-merch-card__body { padding: 18px 17px 19px !important; } body.haze-v2 .haze-merch-card__title { font-size: 19px !important; } body.haze-v2 .haze-profile-badges__item { min-height: 38px !important; padding: 8px 10px !important; font-size: 13px !important; } body.haze-v2 .haze-profile-badges__label { font-size: 10px !important; } body.haze-v2 .haze-profile-badges__value { font-size: 13px !important; } body.haze-v2 .haze-collection .hc-filters { width: min(92vw, 360px) !important; max-width: 360px !important; } } /* ===== 3.17 bundled source: assets/haze-brand-guide-v6.css ===== */ /* The Haze Connect — brand-guide alignment v6 Reference: 022226-TheHazeConnect-Branding-Guide Type roles - Pressio Condensed: large headlines - Pressio X-Compressed: packaging accents at readable sizes only - Industry: navigation, commerce and body copy - DM Sans: resilient fallback until Industry is added to Adobe kit wgb3rzk Loaded after the prior conversion and typography layers so this file is a reversible brand-alignment pass; no product, cart, app or tracking logic is changed here. */ body.haze-v2 { --haze-brand-forest: #1c503c; --haze-brand-teal: #1b3c35; --haze-brand-lime: #8db73f; --haze-brand-cyan: #b3e5e6; --haze-brand-ink: #1e1010; --haze-brand-lavender: #b9a8c0; --haze-brand-paper: #fffdf8; --haze-brand-cream: #f6f4ee; --haze-brand-orange: #f9a33a; --haze-brand-coral: #e4624e; --haze-font-display: "pressio-condensed", "pressio", "Arial Narrow", sans-serif; --haze-font-packaging: "pressio-x-compressed", "pressio-condensed", "Arial Narrow", sans-serif; --haze-font-interface: "industry", "DM Sans", "Helvetica Neue", Arial, sans-serif; --hz3-ink: var(--haze-brand-teal); --hz3-deep: #15362f; --hz3-slate: var(--haze-brand-forest); --hz3-cream: var(--haze-brand-cream); --hz3-paper: var(--haze-brand-paper); --hz3-sage: var(--haze-brand-lime); --hz3-sage-light: var(--haze-brand-cyan); --hz3-gold: var(--haze-brand-orange); --hz3-coral: var(--haze-brand-coral); --hz3-blue: var(--haze-brand-cyan); --hz3-line-light: rgba(27, 60, 53, .15); --v2-ink: var(--haze-brand-teal); --v2-forest: var(--haze-brand-forest); --v2-forest-2: #285d48; --v2-sage: var(--haze-brand-lime); --v2-sage-soft: #e8f0d5; --v2-cream: var(--haze-brand-cream); --v2-paper: var(--haze-brand-paper); --v2-gold: var(--haze-brand-orange); --v2-line: rgba(27, 60, 53, .14); --font-heading-family: var(--haze-font-display) !important; --font-heading-weight: 500 !important; --font-body-family: var(--haze-font-interface) !important; background: var(--haze-brand-cream); color: var(--haze-brand-teal); font-family: var(--haze-font-interface) !important; font-size: 17px !important; } body.haze-v2 button, body.haze-v2 input, body.haze-v2 select, body.haze-v2 textarea { font-family: var(--haze-font-interface) !important; } /* The guide uses Pressio as a large headline face, not as utility microtype. */ body.haze-v2 .hero-title, body.haze-v2 .collection-page-title, body.haze-v2 .blog-page-title, body.haze-v2 .article-page-title, body.haze-v2 .locator-title, body.haze-v2 .page-title, body.haze-v2 .main-page-title, body.haze-v2 .collection-hero__title, body.haze-v2 .title--primary, body.haze-v2 .product-page-title, body.haze-v2 .product__title h1, body.haze-v2 .h0, body.haze-v2 .section-title, body.haze-v2 .haze-v2-value__title, body.haze-v2 .haze-v2-diff__title, body.haze-v2 .haze-v2-proof__title, body.haze-v2 .haze-reviews__heading, body.haze-v2 .prl-title, body.haze-v2 .article-cta-title, body.haze-v2 .article-related-title, body.haze-v2 .collections-list-name, body.haze-v2 .hv-title, body.haze-v2 .hc-conversion-break h2, body.haze-v2 .haze-brand-story h2, body.haze-v2 .collection-list-title, body.haze-v2 .blog__title, body.haze-v2 .featured-collection .title, body.haze-v2 .rich-text__heading, body.haze-v2 .banner__heading { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none; font-weight: 500 !important; letter-spacing: -.018em !important; line-height: .98 !important; text-transform: none !important; } body.haze-v2 .hero-title { max-width: 940px; font-size: clamp(72px, 7.5vw, 112px) !important; line-height: .88 !important; } body.haze-v2 .collection-page-title, body.haze-v2 .blog-page-title, body.haze-v2 .article-page-title, body.haze-v2 .locator-title, body.haze-v2 .page-title, body.haze-v2 .main-page-title, body.haze-v2 .collection-hero__title, body.haze-v2 .title--primary { font-size: clamp(56px, 6.25vw, 90px) !important; } body.haze-v2 .product-page-title, body.haze-v2 .product__title h1 { font-size: clamp(54px, 5.7vw, 82px) !important; line-height: .94 !important; } body.haze-v2 .section-title, body.haze-v2 .haze-v2-value__title, body.haze-v2 .haze-v2-diff__title, body.haze-v2 .haze-v2-proof__title, body.haze-v2 .haze-reviews__heading, body.haze-v2 .prl-title { font-size: clamp(50px, 5.6vw, 80px) !important; } /* Industry is the guide's readable counterweight to Pressio. */ body.haze-v2 h3, body.haze-v2 h4, body.haze-v2 h5, body.haze-v2 h6, body.haze-v2 .haze-guide-v3__card h3, body.haze-v2 .effect-card h3, body.haze-v2 .haze-how-it-works h3, body.haze-v2 .haze-v2-diff__item h3, body.haze-v2 .haze-v2-diff__card h3, body.haze-v2 .page-trust-title, body.haze-v2 .blog-article-title, body.haze-v2 .related-products-heading, body.haze-v2 .wholesale-benefit-title, body.haze-v2 .wholesale-form-title, body.haze-v2 .haze-merch-card__title, body.haze-v2 .haze-merch-card__title a, body.haze-v2 .card__heading, body.haze-v2 .card__heading a, body.haze-v2 .product-name, body.haze-v2 .hero-product-name { font-family: var(--haze-font-interface) !important; font-style: normal !important; font-synthesis: none; font-weight: 700 !important; letter-spacing: -.018em !important; line-height: 1.14 !important; text-transform: none !important; } body.haze-v2 .haze-merch-card__price strong, body.haze-v2 .hero-product-price, body.haze-v2 .product-page-price, body.haze-v2 .product-price, body.haze-v2 .haze-card__selected-price { font-family: var(--haze-font-interface) !important; font-weight: 700 !important; letter-spacing: -.02em !important; } /* Pressio packaging accents are kept large enough for their narrow counters. */ body.haze-v2 .section-label, body.haze-v2 .hero-tagline, body.haze-v2 .brand-story-text .caveat-line, body.haze-v2 .hero-product-badge, body.haze-v2 .product-category, body.haze-v2 .product-category-label, body.haze-v2 .haze-merch-card__eyebrow, body.haze-v2 .haze-merch-card__badge, body.haze-v2 .haze-card__merch-badge, body.haze-v2 .haze-v2-value__eyebrow, body.haze-v2 .haze-v2-proof__eyebrow, body.haze-v2 .haze-v2-diff__eyebrow, body.haze-v2 .prl-kicker, body.haze-v2 .collection-banner-kicker, body.haze-v2 .hc-filter-intro__eyebrow, body.haze-v2 .hc-conversion-break__eyebrow { font-family: var(--haze-font-packaging) !important; font-style: normal !important; font-synthesis: none; font-size: 15px !important; font-weight: 400 !important; letter-spacing: .12em !important; line-height: 1.1 !important; text-transform: uppercase !important; } /* Header: full-size readable words, using the guide's supporting face. */ body.haze-v2 .announcement-bar, body.haze-v2 .announcement-bar *, body.haze-v2 .announcement-bar a { font-family: var(--haze-font-interface) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .065em !important; line-height: 1.3 !important; } body.haze-v2 .announcement-bar { min-height: 47px !important; padding: 11px 24px !important; background: var(--haze-brand-cyan) !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .announcement-bar *, body.haze-v2 .announcement-bar a { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .announcement-bar .haze-ann-new { background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 12px !important; } body.haze-v2 .nav { background: rgba(27, 60, 53, .98) !important; border-bottom-color: rgba(179, 229, 230, .16) !important; } body.haze-v2 .nav-inner { min-height: 76px !important; height: 76px !important; } body.haze-v2 .nav-logo-img { max-height: 40px !important; } body.haze-v2 .nav-links { flex-wrap: nowrap !important; gap: clamp(15px, 1.25vw, 24px) !important; } body.haze-v2 .nav-links > li > a:not(#_hz) { color: rgba(255,255,255,.9) !important; -webkit-text-fill-color: rgba(255,255,255,.9) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .04em !important; line-height: 1.25 !important; opacity: 1 !important; white-space: nowrap !important; } body.haze-v2 .nav-links > li > a:not(#_hz):hover { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .nav-dropdown a { font-family: var(--haze-font-interface) !important; font-size: 15px !important; font-weight: 600 !important; } body.haze-v2 .nav-logo, body.haze-v2 .nav-actions { flex: 0 0 auto; } body.haze-v2 .nav-actions { gap: 16px !important; } body.haze-v2 .nav-actions svg { width: 21px !important; height: 21px !important; } body.haze-v2 .mobile-menu-heading, body.haze-v2 .mobile-menu-standalone { font-family: var(--haze-font-interface) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: .035em !important; } body.haze-v2 .mobile-menu-link { font-size: 17px !important; } /* Brand palette: primary system from the guide. */ body.haze-v2 .hero { background: var(--haze-brand-teal) !important; } body.haze-v2 .hero-bg::before { background: linear-gradient(90deg, rgba(27,60,53,.98) 0%, rgba(27,60,53,.82) 43%, rgba(27,60,53,.28) 78%, rgba(27,60,53,.16) 100%) !important; } body.haze-v2 .hero-bg::after { background: linear-gradient(180deg, rgba(27,60,53,.06) 48%, rgba(27,60,53,.91) 100%) !important; } body.haze-v2 .hero-title .highlight { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .hero-tagline, body.haze-v2 .shop-by-effect-header .section-label, body.haze-v2 .collection-tag { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .btn-primary, body.haze-v2 .hero-ctas .btn-primary, body.haze-v2 .haze-v2-value__cta { border-color: var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .shop-by-effect, body.haze-v2 .how-it-works, body.haze-v2 .haze-v2-value, body.haze-v2 .haze-best-sellers-section .best-sellers { background: var(--haze-brand-forest) !important; } body.haze-v2 .trust-bar, body.haze-v2 .best-sellers, body.haze-v2 .haze-v2-proof { background: var(--haze-brand-paper) !important; } body.haze-v2 .trust-item svg { color: var(--haze-brand-lime) !important; } /* Product tiles: readable decision hierarchy from profile to purchase. */ body.haze-v2 .haze-merch-card { --hz3-card-accent: var(--haze-brand-lime); border-color: rgba(141,183,63,.45) !important; background: linear-gradient(150deg, #245346 0%, var(--haze-brand-teal) 70%) !important; } body.haze-v2 .haze-merch-card--preroll { --hz3-card-accent: #ea9e22; } body.haze-v2 .haze-merch-card--vape { --hz3-card-accent: var(--haze-brand-cyan); } body.haze-v2 .haze-merch-card--edible { --hz3-card-accent: var(--haze-brand-coral); } body.haze-v2 .haze-merch-card--concentrate { --hz3-card-accent: var(--haze-brand-lavender); } body.haze-v2 .haze-merch-card__body { min-height: 328px; padding: 23px 22px 24px !important; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--hz3-card-accent) 13%, transparent), transparent 43%), linear-gradient(150deg, #245346 0%, var(--haze-brand-teal) 72%) !important; } body.haze-v2 .haze-merch-card__eyebrow { min-height: 24px !important; margin-bottom: 8px !important; } body.haze-v2 .haze-merch-card__title { min-height: 2.32em; font-size: 22px !important; line-height: 1.16 !important; } body.haze-v2 .haze-merch-card__reviews, body.haze-v2 .haze-merch-card__reviews strong { font-size: 15px !important; } body.haze-v2 .haze-merch-card__summary { min-height: 48px !important; color: rgba(255,255,255,.8) !important; -webkit-text-fill-color: rgba(255,255,255,.8) !important; font-size: 15px !important; line-height: 1.55 !important; } body.haze-v2 .haze-profile-badges { gap: 9px !important; margin-top: 14px !important; } body.haze-v2 .haze-profile-badges__item { min-height: 41px !important; max-width: 100%; gap: 7px !important; border-color: color-mix(in srgb, var(--hz3-card-accent) 52%, transparent) !important; padding: 9px 12px !important; background: color-mix(in srgb, var(--hz3-card-accent) 12%, transparent) !important; font-family: var(--haze-font-interface) !important; white-space: nowrap; } body.haze-v2 .haze-profile-badges__label { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-family: var(--haze-font-interface) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .055em !important; } body.haze-v2 .haze-profile-badges__value { font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 600 !important; } body.haze-v2 .haze-profile-badges--dawn .haze-profile-badges__label { color: rgba(27,60,53,.64) !important; -webkit-text-fill-color: rgba(27,60,53,.64) !important; } body.haze-v2 .haze-profile-badges--dawn .haze-profile-badges__value { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-merch-card__variant-picker { margin-top: 17px !important; } body.haze-v2 .haze-merch-card__variant-picker label { margin-bottom: 8px !important; color: rgba(255,255,255,.82) !important; -webkit-text-fill-color: rgba(255,255,255,.82) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .055em !important; line-height: 1.35 !important; text-transform: uppercase !important; } body.haze-v2 .haze-card__variant-picker label { margin-bottom: 8px !important; color: rgba(27,60,53,.72) !important; -webkit-text-fill-color: rgba(27,60,53,.72) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .055em !important; line-height: 1.35 !important; text-transform: uppercase !important; } body.haze-v2 .haze-merch-card__variant-picker select, body.haze-v2 .haze-card__variant-picker select { min-height: 52px !important; padding: 11px 42px 11px 15px !important; font-family: var(--haze-font-interface) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; } body.haze-v2 .haze-merch-card__footer { gap: 12px !important; padding-top: 19px !important; } body.haze-v2 .haze-merch-card__from { color: rgba(255,255,255,.72) !important; -webkit-text-fill-color: rgba(255,255,255,.72) !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .07em !important; } body.haze-v2 .haze-merch-card__price strong { color: var(--haze-brand-orange) !important; -webkit-text-fill-color: var(--haze-brand-orange) !important; font-size: 30px !important; } body.haze-v2 .haze-merch-card__cta, body.haze-v2 a.haze-merch-card__cta:not(#_hz) { min-width: 132px; min-height: 50px !important; padding: 12px 17px !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .035em !important; line-height: 1.2 !important; white-space: nowrap; } body.haze-v2 .haze-merch-card__cta[disabled] { border-color: rgba(179,229,230,.3) !important; background: rgba(179,229,230,.1) !important; color: rgba(255,255,255,.78) !important; -webkit-text-fill-color: rgba(255,255,255,.78) !important; } body.haze-v2 .haze-merch-card__cta:not([disabled]), body.haze-v2 a.haze-merch-card__cta:not(#_hz) { border-color: var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } /* Dawn cards used outside the custom collection template. */ body.haze-v2 .haze-card--enhanced .haze-card__proof-line > span, body.haze-v2 .haze-card__selected-price, body.haze-v2 .haze-card__quick-status { font-family: var(--haze-font-interface) !important; font-size: 14px !important; } body.haze-v2 .haze-card__sitewide-cta { min-height: 50px !important; padding: 12px 16px !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap; } /* Collection and PDP utility copy follows Industry, never compressed Pressio. */ body.haze-v2 .haze-collection .hc-fgroup-title, body.haze-v2 .haze-collection .hc-proof-item, body.haze-v2 .haze-collection .sort-label, body.haze-v2 .haze-product .product-type-label, body.haze-v2 .haze-product .strain-stat-label, body.haze-v2 .haze-product .product-option-label, body.haze-v2 .haze-product .qty-tiers-label, body.haze-v2 .haze-product .qty-tier-badge, body.haze-v2 .product-form .subscribe-save-label, body.haze-v2 .product-form .subscribe-save-badge { font-family: var(--haze-font-interface) !important; font-weight: 700 !important; letter-spacing: .045em !important; } body.haze-v2 .haze-collection .hc-fgroup-title, body.haze-v2 .haze-collection .sort-label, body.haze-v2 .haze-product .product-option-label, body.haze-v2 .haze-product .qty-tiers-label { font-size: 16px !important; } body.haze-v2 .haze-collection .hc-proof-strip { background: var(--haze-brand-lime) !important; } body.haze-v2 .haze-collection .hc-shop-nav { background: rgba(246,244,238,.96) !important; } body.haze-v2 .haze-collection .hc-shop-nav a, body.haze-v2 .haze-collection .hc-fopt, body.haze-v2 .haze-collection .hc-product-search input, body.haze-v2 .haze-collection .hc-filter-search input, body.haze-v2 .haze-collection .hc-price input, body.haze-v2 .haze-collection .sort-select { font-family: var(--haze-font-interface) !important; font-size: 16px !important; } body.haze-v2 .haze-collection .hc-filter-intro p, body.haze-v2 .haze-product .pdp-decision-note, body.haze-v2 .haze-product .pdp-state-notice, body.haze-v2 .haze-product .pdp-buy-promise, body.haze-v2 .haze-product .pdp-lab-jump, body.haze-v2 .haze-product .product-trust-badge { font-family: var(--haze-font-interface) !important; font-size: 15px !important; } body.haze-v2 :focus-visible { outline-color: var(--haze-brand-lime) !important; } @media (min-width: 990px) and (max-width: 1260px) { body.haze-v2 .nav-links { gap: 12px !important; } body.haze-v2 .nav-links > li > a:not(#_hz) { font-size: 13px !important; } } @media (max-width: 749px) { body.haze-v2 { font-size: 16px !important; } body.haze-v2 .announcement-bar, body.haze-v2 .announcement-bar *, body.haze-v2 .announcement-bar a { font-size: 13px !important; } body.haze-v2 .hero-title { font-size: clamp(60px, 18vw, 86px) !important; line-height: .9 !important; } body.haze-v2 .collection-page-title, body.haze-v2 .blog-page-title, body.haze-v2 .article-page-title, body.haze-v2 .locator-title, body.haze-v2 .page-title, body.haze-v2 .main-page-title, body.haze-v2 .collection-hero__title, body.haze-v2 .title--primary, body.haze-v2 .product-page-title, body.haze-v2 .product__title h1 { font-size: clamp(50px, 14vw, 70px) !important; } body.haze-v2 .section-title, body.haze-v2 .haze-v2-value__title, body.haze-v2 .haze-v2-diff__title, body.haze-v2 .haze-v2-proof__title, body.haze-v2 .haze-reviews__heading, body.haze-v2 .prl-title { font-size: clamp(44px, 12vw, 62px) !important; } body.haze-v2 .haze-merch-card__body { padding: 21px 19px 22px !important; } body.haze-v2 .haze-merch-card__title { font-size: 21px !important; } body.haze-v2 .haze-profile-badges__item { min-height: 40px !important; padding: 9px 11px !important; } body.haze-v2 .haze-profile-badges__label { font-size: 11px !important; } body.haze-v2 .haze-profile-badges__value { font-size: 14px !important; } body.haze-v2 .haze-merch-card__variant-picker label, body.haze-v2 .haze-card__variant-picker label { font-size: 14px !important; } body.haze-v2 .haze-merch-card__from { font-size: 13px !important; } body.haze-v2 .haze-merch-card__cta, body.haze-v2 a.haze-merch-card__cta:not(#_hz) { min-width: 128px; font-size: 13px !important; } } /* ============================================================ PAGE SYSTEM ALIGNMENT — COLLECTIONS, PDP, COA + CONTACT Brand-guide palette applied as one final, page-scoped layer. This changes presentation only; product forms, filtering, COA search, cart events, app hooks and tracking markup remain untouched. ============================================================ */ /* Shared page chrome */ body.haze-v2 .haze-collection, body.haze-v2 .haze-product, body.haze-v2 .haze-contact-section, body.haze-v2 .haze-coa-section, body.haze-v2 .haze-prl-section { color: var(--haze-brand-teal) !important; background: var(--haze-brand-cream) !important; } body.haze-v2 .haze-collection .collection-breadcrumbs, body.haze-v2 .haze-product .collection-breadcrumbs, body.haze-v2 .haze-contact-section .collection-breadcrumbs { border-bottom: 1px solid rgba(179, 229, 230, .13) !important; background: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .breadcrumbs, body.haze-v2 .haze-product .breadcrumbs, body.haze-v2 .haze-contact-section .breadcrumbs { color: rgba(255, 255, 255, .62) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; } body.haze-v2 .haze-collection .breadcrumbs a:not(#_hz), body.haze-v2 .haze-product .breadcrumbs a:not(#_hz), body.haze-v2 .haze-contact-section .breadcrumbs a:not(#_hz) { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-collection .breadcrumb-current, body.haze-v2 .haze-product .breadcrumb-current, body.haze-v2 .haze-contact-section .breadcrumb-current { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Collections: brand-led discovery with a legible utility layer. */ body.haze-v2 .haze-collection .collection-banner { border-bottom: 1px solid rgba(179, 229, 230, .16) !important; background: linear-gradient(135deg, var(--haze-brand-teal), var(--haze-brand-forest)) !important; } body.haze-v2 .haze-collection .collection-banner-bg img { opacity: .31 !important; filter: saturate(.9) contrast(1.04); } body.haze-v2 .haze-collection .collection-banner-overlay { background: linear-gradient(90deg, rgba(27, 60, 53, .96) 0%, rgba(27, 60, 53, .73) 56%, rgba(28, 80, 60, .35) 100%) !important; } body.haze-v2 .haze-collection .collection-banner-kicker { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-collection .collection-page-title { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-collection .collection-page-description, body.haze-v2 .haze-collection .collection-page-description p, body.haze-v2 .haze-collection .collection-decision-prompt { color: rgba(255, 255, 255, .82) !important; -webkit-text-fill-color: rgba(255, 255, 255, .82) !important; } body.haze-v2 .haze-collection .hc-shop-nav { border-bottom-color: rgba(27, 60, 53, .14) !important; background: rgba(246, 244, 238, .96) !important; } body.haze-v2 .haze-collection .hc-shop-nav a:not(#_hz) { border-color: rgba(27, 60, 53, .18) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; text-decoration-color: rgba(28, 80, 60, .35) !important; } body.haze-v2 .haze-collection .hc-shop-nav a:not(#_hz):hover, body.haze-v2 .haze-collection .hc-shop-nav a:not(#_hz)[aria-current="page"] { border-color: var(--haze-brand-forest) !important; background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-collection .hc-proof-strip { border-bottom: 1px solid rgba(27, 60, 53, .18) !important; background: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-collection .hc-proof-item { border-color: rgba(27, 60, 53, .2) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .collection-toolbar { border-color: rgba(27, 60, 53, .13) !important; background: var(--haze-brand-paper) !important; } body.haze-v2 .haze-collection .hc-count-text, body.haze-v2 .haze-collection .sort-label { color: rgba(27, 60, 53, .68) !important; -webkit-text-fill-color: rgba(27, 60, 53, .68) !important; } body.haze-v2 .haze-collection .sort-select { border-color: rgba(27, 60, 53, .24) !important; background-color: #fff !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .collection-products, body.haze-v2 .haze-collection .collection-seo-wrapper { background: var(--haze-brand-cream) !important; } /* Collection filters: cool pale-cyan surface, dark text, lime selection. Green now communicates action/state instead of carrying paragraphs. */ body.haze-v2 .haze-collection .hc-filters { border: 1px solid rgba(27, 60, 53, .22) !important; border-radius: 18px !important; background: linear-gradient(155deg, #f8fbf8 0%, #e7f3ef 100%) !important; box-shadow: 0 18px 44px rgba(27, 60, 53, .12) !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .hc-filters-head { border-bottom-color: rgba(27, 60, 53, .16) !important; } body.haze-v2 .haze-collection .hc-filters-head span, body.haze-v2 .haze-collection .hc-drawer-head b, body.haze-v2 .haze-collection .hc-fgroup-title, body.haze-v2 .haze-collection .hc-option-finder > span { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .hc-clear, body.haze-v2 .haze-collection a.hc-clear:not(#_hz), body.haze-v2 .haze-collection .hc-filter-more { border-color: rgba(28, 80, 60, .38) !important; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-collection .hc-filter-intro { border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 14px !important; background: rgba(179, 229, 230, .48) !important; } body.haze-v2 .haze-collection .hc-filter-intro__eyebrow { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-collection .hc-filter-intro p, body.haze-v2 .haze-collection .hc-product-search__caption { color: rgba(27, 60, 53, .76) !important; -webkit-text-fill-color: rgba(27, 60, 53, .76) !important; } body.haze-v2 .haze-collection .hc-product-search, body.haze-v2 .haze-collection .hc-filter-search, body.haze-v2 .haze-collection .hc-price input { border-color: rgba(27, 60, 53, .24) !important; background: #fff !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; } body.haze-v2 .haze-collection .hc-product-search:focus-within, body.haze-v2 .haze-collection .hc-filter-search:focus-within, body.haze-v2 .haze-collection .hc-price input:focus { border-color: var(--haze-brand-forest) !important; box-shadow: 0 0 0 3px rgba(179, 229, 230, .6) !important; } body.haze-v2 .haze-collection .hc-product-search > svg, body.haze-v2 .haze-collection .hc-filter-search svg { stroke: var(--haze-brand-forest) !important; } body.haze-v2 .haze-collection .hc-product-search button { background: var(--haze-brand-forest) !important; color: #fff !important; } body.haze-v2 .haze-collection .hc-product-search input, body.haze-v2 .haze-collection .hc-filter-search input, body.haze-v2 .haze-collection .hc-price input { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .hc-product-search input::placeholder, body.haze-v2 .haze-collection .hc-filter-search input::placeholder, body.haze-v2 .haze-collection .hc-price input::placeholder { color: rgba(27, 60, 53, .5) !important; -webkit-text-fill-color: rgba(27, 60, 53, .5) !important; } body.haze-v2 .haze-collection .hc-fgroup { border-bottom-color: rgba(27, 60, 53, .13) !important; } body.haze-v2 .haze-collection .hc-fgroup > summary svg { stroke: var(--haze-brand-forest) !important; } body.haze-v2 .haze-collection .hc-fgroup--mood { border-color: rgba(28, 80, 60, .2) !important; background: rgba(179, 229, 230, .34) !important; } body.haze-v2 .haze-collection .hc-fgroup--mood .hc-fgroup-title span::before { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-interface) !important; font-size: 19px !important; font-weight: 700 !important; } body.haze-v2 .haze-collection .hc-fopt, body.haze-v2 .haze-collection a.hc-fopt:not(#_hz) { color: rgba(27, 60, 53, .84) !important; -webkit-text-fill-color: rgba(27, 60, 53, .84) !important; } body.haze-v2 .haze-collection .hc-fopt:hover, body.haze-v2 .haze-collection a.hc-fopt:not(#_hz):hover { background: rgba(179, 229, 230, .55) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .hc-check { border-color: rgba(28, 80, 60, .48) !important; background: #fff !important; } body.haze-v2 .haze-collection .hc-fopt.active, body.haze-v2 .haze-collection a.hc-fopt.active:not(#_hz) { background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-collection .hc-fopt.active .hc-check { border-color: var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; } body.haze-v2 .haze-collection .hc-fopt.active .hc-check::after { border-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .hc-fcount { color: rgba(27, 60, 53, .56) !important; -webkit-text-fill-color: rgba(27, 60, 53, .56) !important; } body.haze-v2 .haze-collection .hc-fopt.active .hc-fcount { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-collection .hc-price span { color: rgba(27, 60, 53, .48) !important; -webkit-text-fill-color: rgba(27, 60, 53, .48) !important; } body.haze-v2 .haze-collection .hc-price-apply { border-color: var(--haze-brand-forest) !important; background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-collection .hc-price-apply:hover { border-color: var(--haze-brand-teal) !important; background: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .hc-chip, body.haze-v2 .haze-collection a.hc-chip:not(#_hz) { border-color: rgba(28, 80, 60, .28) !important; background: rgba(179, 229, 230, .5) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .hc-chip svg { stroke: var(--haze-brand-forest) !important; } body.haze-v2 .haze-collection .hc-filter-toggle { border-color: var(--haze-brand-forest) !important; background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-collection .hc-filter-toggle .hc-badge { background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .hc-drawer-close { color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .hc-editor-note { border-left-color: var(--haze-brand-orange) !important; background: rgba(249, 163, 58, .13) !important; color: rgba(27, 60, 53, .78) !important; -webkit-text-fill-color: rgba(27, 60, 53, .78) !important; } body.haze-v2 .haze-collection .collection-pagination .pagination-btn, body.haze-v2 .haze-collection .collection-pagination .pagination-num { border-color: rgba(27, 60, 53, .2) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .collection-pagination .pagination-current { border-color: var(--haze-brand-forest) !important; background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-collection .hc-conversion-break__inner { border: 1px solid rgba(179, 229, 230, .2) !important; background: linear-gradient(130deg, var(--haze-brand-teal), var(--haze-brand-forest)) !important; } body.haze-v2 .haze-collection .hc-conversion-break__eyebrow { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } /* Dedicated pre-roll collection/ladder uses the same shelf colors. */ body.haze-v2 .haze-prl-section .prl { border-color: rgba(179, 229, 230, .16) !important; background: linear-gradient(135deg, var(--haze-brand-teal), var(--haze-brand-forest)) !important; } body.haze-v2 .haze-prl-section .prl-kicker, body.haze-v2 .haze-prl-section .prl-tier-plus { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-prl-section .prl-tier { border-color: rgba(179, 229, 230, .2) !important; background: rgba(255, 255, 255, .06) !important; } body.haze-v2 .haze-prl-section .prl-tier:last-child { border-color: rgba(141, 183, 63, .65) !important; background: rgba(141, 183, 63, .13) !important; } /* Product detail pages: a calm paper buy box followed by a proof-rich dark band. */ body.haze-v2 .haze-product .product-main-image { border-color: rgba(27, 60, 53, .14) !important; background: var(--haze-brand-paper) !important; box-shadow: 0 20px 54px rgba(27, 60, 53, .1) !important; } body.haze-v2 .haze-product .product-thumb { border-color: rgba(27, 60, 53, .18) !important; background: var(--haze-brand-paper) !important; } body.haze-v2 .haze-product .product-thumb:hover, body.haze-v2 .haze-product .product-thumb-active { border-color: var(--haze-brand-lime) !important; } body.haze-v2 .haze-product .product-details { border-color: rgba(27, 60, 53, .16) !important; background: linear-gradient(145deg, var(--haze-brand-paper) 0%, #eff7f3 100%) !important; box-shadow: 0 20px 54px rgba(27, 60, 53, .12) !important; } body.haze-v2 .haze-product .product-page-title, body.haze-v2 .haze-product .strain-stat-value, body.haze-v2 .haze-product .product-option-label, body.haze-v2 .haze-product .qty-tiers-label, body.haze-v2 .haze-product .qty-tier-amount, body.haze-v2 .haze-product .qty-tier-label, body.haze-v2 .haze-product .variant-grid-title, body.haze-v2 .haze-product .variant-grid-price, body.haze-v2 .haze-product .subscribe-save-label, body.haze-v2 .haze-product .terpene-heading { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-product .product-type-label, body.haze-v2 .haze-product .product-strain-type, body.haze-v2 .haze-product .pdp-batch-proof, body.haze-v2 .haze-product .pdp-lab-jump { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-product .pdp-rating-star, body.haze-v2 .haze-product .product-page-price, body.haze-v2 .haze-product .strain-stat-highlight, body.haze-v2 .haze-product .qty-tier-savings-msg { color: var(--haze-brand-orange) !important; -webkit-text-fill-color: var(--haze-brand-orange) !important; } body.haze-v2 .haze-product .strain-stats-bar, body.haze-v2 .haze-product .pdp-decision-note, body.haze-v2 .haze-product .pdp-buy-promises, body.haze-v2 .haze-product .product-trust-badge { border-color: rgba(27, 60, 53, .15) !important; background: rgba(179, 229, 230, .31) !important; } body.haze-v2 .haze-product .pdp-decision-note { border-left-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-product .variant-grid-btn, body.haze-v2 .haze-product .qty-tier, body.haze-v2 .haze-product .subscribe-save-frequency select { border-color: rgba(27, 60, 53, .21) !important; background: #fff !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-product .variant-grid-btn:hover, body.haze-v2 .haze-product .qty-tier:hover { border-color: var(--haze-brand-forest) !important; background: rgba(179, 229, 230, .35) !important; } body.haze-v2 .haze-product .variant-grid-btn-active, body.haze-v2 .haze-product .qty-tier-active { border-color: var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; box-shadow: 0 9px 22px rgba(28, 80, 60, .17) !important; } body.haze-v2 .haze-product .variant-grid-btn-active .variant-grid-price, body.haze-v2 .haze-product .qty-tier-active .qty-tier-label, body.haze-v2 .haze-product .qty-tier-active .qty-tier-amount { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-product .subscribe-save-option { border-color: rgba(27, 60, 53, .18) !important; background: rgba(179, 229, 230, .22) !important; } body.haze-v2 .haze-product .subscribe-save-active { border-color: var(--haze-brand-orange) !important; background: rgba(249, 163, 58, .13) !important; } body.haze-v2 .haze-product .product-atc-btn, body.haze-v2 .haze-product .sticky-atc-btn { border-color: var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; box-shadow: 0 12px 28px rgba(28, 80, 60, .2) !important; } body.haze-v2 .haze-product .product-atc-btn:hover, body.haze-v2 .haze-product .sticky-atc-btn:hover { background: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-product .product-tabs-wrapper { border-color: rgba(179, 229, 230, .15) !important; background: linear-gradient(140deg, var(--haze-brand-teal), #15362f) !important; } body.haze-v2 .haze-product .product-tab-nav { border-color: rgba(179, 229, 230, .18) !important; } body.haze-v2 .haze-product .product-tab-active { border-bottom-color: var(--haze-brand-lime) !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-product .coa-list-item { border-color: rgba(179, 229, 230, .2) !important; background: rgba(255, 255, 255, .065) !important; } body.haze-v2 .haze-product .coa-direct-btn, body.haze-v2 .haze-product a.coa-direct-btn:not(#_hz), body.haze-v2 .haze-product .coa-list-view-btn, body.haze-v2 .haze-product a.coa-list-view-btn:not(#_hz) { border-color: var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-product .sticky-atc-bar { border-top-color: rgba(179, 229, 230, .18) !important; background: rgba(27, 60, 53, .96) !important; color: #fff !important; } body.haze-v2 .haze-product .product-related-section, body.haze-v2 .haze-product .product-reviews-section { background: var(--haze-brand-cream) !important; } body.haze-v2 .haze-product .related-products-heading { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } /* COA directory: high-trust dark hero, paper documents, readable search. */ body.haze-v2 .haze-coa-section { padding-bottom: 72px; } body.haze-v2 .haze-coa-section .page-hero { border-bottom: 1px solid rgba(179, 229, 230, .16) !important; background: linear-gradient(135deg, var(--haze-brand-teal), var(--haze-brand-forest)) !important; } body.haze-v2 .haze-coa-section .page-hero::before { background: radial-gradient(ellipse 60% 65% at 50% 0%, rgba(179, 229, 230, .18) 0%, transparent 70%), radial-gradient(ellipse 42% 50% at 18% 86%, rgba(141, 183, 63, .12) 0%, transparent 65%) !important; } body.haze-v2 .haze-coa-section .hero-badge { border-color: rgba(179, 229, 230, .42) !important; background: rgba(179, 229, 230, .13) !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; } body.haze-v2 .haze-coa-section .page-hero h1 { color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: var(--haze-font-display) !important; font-size: clamp(60px, 7vw, 96px) !important; font-weight: 500 !important; letter-spacing: -.018em !important; line-height: .94 !important; } body.haze-v2 .haze-coa-section .page-hero p { color: rgba(255, 255, 255, .78) !important; -webkit-text-fill-color: rgba(255, 255, 255, .78) !important; font-size: 17px !important; line-height: 1.6 !important; } body.haze-v2 .haze-coa-section #coa-search { min-height: 54px; border-color: rgba(179, 229, 230, .38) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-interface) !important; font-size: 16px !important; box-shadow: 0 14px 35px rgba(5, 25, 20, .16); } body.haze-v2 .haze-coa-section #coa-search::placeholder { color: rgba(27, 60, 53, .5) !important; -webkit-text-fill-color: rgba(27, 60, 53, .5) !important; } body.haze-v2 .haze-coa-section .search-wrap svg, body.haze-v2 .haze-coa-section .search-count { color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-coa-section .seo-block { border-color: rgba(27, 60, 53, .17) !important; background: var(--haze-brand-paper) !important; box-shadow: 0 16px 42px rgba(27, 60, 53, .08); } body.haze-v2 .haze-coa-section .seo-fade { background: linear-gradient(to bottom, transparent, var(--haze-brand-paper)) !important; } body.haze-v2 .haze-coa-section .seo-inner h2 { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-interface) !important; font-size: 20px !important; } body.haze-v2 .haze-coa-section .seo-inner h3 { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-family: var(--haze-font-interface) !important; font-size: 17px !important; } body.haze-v2 .haze-coa-section .seo-inner p, body.haze-v2 .haze-coa-section .seo-inner li { color: rgba(27, 60, 53, .78) !important; -webkit-text-fill-color: rgba(27, 60, 53, .78) !important; font-size: 15px !important; } body.haze-v2 .haze-coa-section .seo-inner li { border-color: rgba(27, 60, 53, .14) !important; background: rgba(179, 229, 230, .24) !important; } body.haze-v2 .haze-coa-section .seo-inner strong, body.haze-v2 .haze-coa-section .seo-inner a:not(#_hz) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-coa-section .seo-toggle { border-color: rgba(27, 60, 53, .14) !important; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; } body.haze-v2 .haze-coa-section .page-container { padding-top: 44px !important; } body.haze-v2 .haze-coa-section .tab-nav { border-bottom-color: rgba(27, 60, 53, .18) !important; } body.haze-v2 .haze-coa-section .tab-btn { color: rgba(27, 60, 53, .68) !important; -webkit-text-fill-color: rgba(27, 60, 53, .68) !important; font-family: var(--haze-font-interface) !important; font-size: 15px !important; } body.haze-v2 .haze-coa-section .tab-btn:hover { background: rgba(179, 229, 230, .36) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-coa-section .tab-btn.active { border-bottom-color: var(--haze-brand-lime) !important; background: rgba(179, 229, 230, .44) !important; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-coa-section .tab-count { background: rgba(27, 60, 53, .08) !important; color: rgba(27, 60, 53, .64) !important; -webkit-text-fill-color: rgba(27, 60, 53, .64) !important; } body.haze-v2 .haze-coa-section .tab-btn.active .tab-count { background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-coa-section .sub-label { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; font-weight: 700 !important; } body.haze-v2 .haze-coa-section .sub-line { background: rgba(27, 60, 53, .17) !important; } body.haze-v2 .haze-coa-section .sub-count { color: rgba(27, 60, 53, .56) !important; -webkit-text-fill-color: rgba(27, 60, 53, .56) !important; } body.haze-v2 .haze-coa-section .coa-card, body.haze-v2 .haze-coa-section a.coa-card:not(#_hz) { min-height: 48px; border-color: rgba(27, 60, 53, .17) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-interface) !important; font-size: 15px !important; } body.haze-v2 .haze-coa-section .coa-card:hover, body.haze-v2 .haze-coa-section a.coa-card:not(#_hz):hover { border-color: var(--haze-brand-forest) !important; background: rgba(179, 229, 230, .34) !important; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; box-shadow: 0 8px 20px rgba(27, 60, 53, .1) !important; } body.haze-v2 .haze-coa-section .coa-card .card-name { font-size: 15px !important; } body.haze-v2 .haze-coa-section .coa-card .card-icon { color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-coa-section .past-note { border-color: rgba(249, 163, 58, .32) !important; background: rgba(249, 163, 58, .13) !important; } body.haze-v2 .haze-coa-section .past-note p { color: rgba(27, 60, 53, .76) !important; -webkit-text-fill-color: rgba(27, 60, 53, .76) !important; } body.haze-v2 .haze-coa-section .past-note svg, body.haze-v2 .haze-coa-section .past-note strong { color: #a96000 !important; -webkit-text-fill-color: #a96000 !important; } body.haze-v2 .haze-coa-section .no-results, body.haze-v2 .haze-coa-section .no-results h3 { color: rgba(27, 60, 53, .64) !important; -webkit-text-fill-color: rgba(27, 60, 53, .64) !important; } /* Contact: approachable, high-clarity support rather than a dark utility form. */ body.haze-v2 .haze-contact-section .haze-page, body.haze-v2 .haze-contact-section .page-content-section { background: var(--haze-brand-cream) !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-contact-section .page-header-section { border-bottom: 1px solid rgba(179, 229, 230, .16) !important; background: radial-gradient(circle at 80% 25%, rgba(179, 229, 230, .14), transparent 34%), linear-gradient(135deg, var(--haze-brand-teal), var(--haze-brand-forest)) !important; } body.haze-v2 .haze-contact-section .section-label { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-contact-section .page-title { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-contact-section .page-subtitle { color: rgba(255, 255, 255, .8) !important; -webkit-text-fill-color: rgba(255, 255, 255, .8) !important; } body.haze-v2 .haze-contact-section .haze-contact-grid { max-width: 1120px; gap: clamp(28px, 5vw, 64px); padding-top: 62px; } body.haze-v2 .haze-contact-section .contact-form-wrap, body.haze-v2 .haze-contact-section .contact-info-section { border: 1px solid rgba(27, 60, 53, .16); border-radius: 20px; padding: clamp(24px, 3.5vw, 40px); background: var(--haze-brand-paper); box-shadow: 0 18px 44px rgba(27, 60, 53, .09); } body.haze-v2 .haze-contact-section .contact-info-section { background: linear-gradient(145deg, rgba(179, 229, 230, .4), rgba(255, 253, 248, .9)); } body.haze-v2 .haze-contact-section .contact-form-wrap label, body.haze-v2 .haze-contact-section .contact-info-label { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .07em !important; } body.haze-v2 .haze-contact-section .contact-form-wrap input, body.haze-v2 .haze-contact-section .contact-form-wrap textarea, body.haze-v2 .haze-contact-section .contact-form-wrap select { min-height: 52px; border-color: rgba(27, 60, 53, .22) !important; background-color: #fff !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-interface) !important; font-size: 16px !important; } body.haze-v2 .haze-contact-section .contact-form-wrap textarea { min-height: 170px; } body.haze-v2 .haze-contact-section .contact-form-wrap input::placeholder, body.haze-v2 .haze-contact-section .contact-form-wrap textarea::placeholder { color: rgba(27, 60, 53, .5) !important; -webkit-text-fill-color: rgba(27, 60, 53, .5) !important; } body.haze-v2 .haze-contact-section .contact-form-wrap input:focus, body.haze-v2 .haze-contact-section .contact-form-wrap textarea:focus, body.haze-v2 .haze-contact-section .contact-form-wrap select:focus { border-color: var(--haze-brand-forest) !important; box-shadow: 0 0 0 3px rgba(179, 229, 230, .55) !important; } body.haze-v2 .haze-contact-section .contact-form-wrap select option { background: #fff !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-contact-section .contact-submit-btn { min-height: 56px; border: 1px solid var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-interface) !important; font-size: 16px !important; box-shadow: 0 12px 28px rgba(28, 80, 60, .17); } body.haze-v2 .haze-contact-section .contact-submit-btn:hover { background: var(--haze-brand-cyan) !important; box-shadow: 0 16px 32px rgba(28, 80, 60, .2) !important; } body.haze-v2 .haze-contact-section .contact-info-value, body.haze-v2 .haze-contact-section .contact-info-value a:not(#_hz) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 20px !important; } body.haze-v2 .haze-contact-section .contact-info-note { color: rgba(27, 60, 53, .7) !important; -webkit-text-fill-color: rgba(27, 60, 53, .7) !important; font-size: 15px !important; } body.haze-v2 .haze-contact-section .contact-divider { background: rgba(27, 60, 53, .16) !important; } body.haze-v2 .haze-contact-section .contact-social-links a:not(#_hz) { border-color: rgba(27, 60, 53, .22) !important; background: #fff !important; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-contact-section .contact-social-links a:not(#_hz):hover { border-color: var(--haze-brand-forest) !important; background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } @media (max-width: 749px) { body.haze-v2 .haze-collection .hc-filters { border-radius: 0 18px 18px 0 !important; padding: 24px 20px 20px !important; } body.haze-v2 .haze-coa-section .page-hero h1 { font-size: clamp(50px, 14vw, 70px) !important; } body.haze-v2 .haze-coa-section .page-container { padding-top: 30px !important; } body.haze-v2 .haze-coa-section .tab-nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 0 20px; scrollbar-width: none; } body.haze-v2 .haze-coa-section .tab-nav::-webkit-scrollbar { display: none; } body.haze-v2 .haze-coa-section .coa-grid { grid-template-columns: 1fr !important; } body.haze-v2 .haze-contact-section .haze-contact-grid { padding-top: 36px; } } /* Collection SEO guide — deliberately placed after the product shelf. The first portion remains visible; longer copy can expand in place. */ body.haze-v2 .haze-collection .collection-seo-bottom { border-top: 1px solid rgba(27, 60, 53, .11) !important; padding: clamp(64px, 8vw, 104px) 0 !important; background: linear-gradient(180deg, var(--haze-brand-cream) 0%, #eaf4ef 100%) !important; } body.haze-v2 .haze-collection .collection-seo-bottom__panel { max-width: 1120px; overflow: hidden; margin: 0 auto; border: 1px solid rgba(27, 60, 53, .16); border-radius: 24px; background: var(--haze-brand-paper); box-shadow: 0 20px 56px rgba(27, 60, 53, .1); } body.haze-v2 .haze-collection .collection-seo-bottom__header { border-bottom: 1px solid rgba(27, 60, 53, .13); padding: clamp(28px, 4vw, 42px) clamp(24px, 5vw, 52px) clamp(23px, 3.5vw, 34px); background: radial-gradient(circle at 88% 20%, rgba(141, 183, 63, .12), transparent 34%), rgba(179, 229, 230, .34); } body.haze-v2 .haze-collection .collection-seo-bottom__eyebrow { display: block; margin-bottom: 8px; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .1em !important; line-height: 1.2; text-transform: uppercase; } body.haze-v2 .haze-collection .collection-seo-bottom__header h2 { max-width: 820px; margin: 0; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-size: clamp(44px, 5vw, 68px) !important; font-style: normal !important; font-weight: 500 !important; letter-spacing: -.018em !important; line-height: .98 !important; text-transform: none !important; } body.haze-v2 .haze-collection .collection-seo-content { position: relative !important; max-height: 350px !important; overflow: hidden !important; padding: clamp(26px, 4vw, 40px) clamp(24px, 5vw, 52px) 20px !important; background: var(--haze-brand-paper) !important; transition: max-height .55s cubic-bezier(.4, 0, .2, 1) !important; } body.haze-v2 .haze-collection .collection-seo-content.expanded { max-height: 6000px !important; padding-bottom: 34px !important; } body.haze-v2 .haze-collection .collection-page-description, body.haze-v2 .haze-collection .collection-page-description p, body.haze-v2 .haze-collection .collection-page-description li { color: rgba(27, 60, 53, .82) !important; -webkit-text-fill-color: rgba(27, 60, 53, .82) !important; font-family: var(--haze-font-interface) !important; font-size: 17px !important; line-height: 1.75 !important; } body.haze-v2 .haze-collection .collection-page-description p { margin: 0 0 1.15em !important; } body.haze-v2 .haze-collection .collection-page-description h2, body.haze-v2 .haze-collection .collection-page-description h3, body.haze-v2 .haze-collection .collection-page-description h4, body.haze-v2 .haze-collection .collection-page-description strong { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .collection-page-description h2 { margin: 1.25em 0 .45em !important; font-family: var(--haze-font-display) !important; font-size: clamp(34px, 4vw, 48px) !important; font-weight: 500 !important; letter-spacing: -.012em !important; line-height: 1 !important; } body.haze-v2 .haze-collection .collection-page-description h3, body.haze-v2 .haze-collection .collection-page-description h4 { margin: 1.2em 0 .4em !important; font-family: var(--haze-font-interface) !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.25 !important; } body.haze-v2 .haze-collection .collection-page-description a:not(#_hz) { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-weight: 700; text-decoration: underline !important; text-decoration-color: rgba(28, 80, 60, .38) !important; text-underline-offset: 3px; } body.haze-v2 .haze-collection .collection-seo-fade { position: absolute !important; right: 0 !important; bottom: 0 !important; left: 0 !important; height: 116px !important; background: linear-gradient(to bottom, rgba(255, 253, 248, 0), var(--haze-brand-paper) 78%) !important; pointer-events: none !important; } body.haze-v2 .haze-collection .collection-seo-content.expanded .collection-seo-fade { opacity: 0 !important; } body.haze-v2 .haze-collection .seo-toggle-btn { display: flex !important; min-height: 56px; align-items: center !important; justify-content: center !important; gap: 9px !important; width: calc(100% - clamp(48px, 10vw, 104px)); margin: 0 clamp(24px, 5vw, 52px) clamp(26px, 4vw, 40px) !important; border: 1px solid var(--haze-brand-forest) !important; border-radius: 999px !important; padding: 13px 22px !important; background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: var(--haze-font-interface) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .02em; } body.haze-v2 .haze-collection .seo-toggle-btn:hover { border-color: var(--haze-brand-teal) !important; background: var(--haze-brand-teal) !important; } body.haze-v2 .haze-collection .seo-toggle-btn svg { transition: transform .25s ease !important; } body.haze-v2 .haze-collection .seo-toggle-btn[aria-expanded="true"] svg { transform: rotate(180deg) !important; } @media (max-width: 749px) { body.haze-v2 .haze-collection .collection-seo-bottom { padding: 52px 0 !important; } body.haze-v2 .haze-collection .collection-seo-bottom__panel { border-radius: 18px; } body.haze-v2 .haze-collection .collection-seo-content { max-height: 390px !important; } body.haze-v2 .haze-collection .collection-page-description, body.haze-v2 .haze-collection .collection-page-description p, body.haze-v2 .haze-collection .collection-page-description li { font-size: 16px !important; line-height: 1.68 !important; } } /* ===== 3.17 bundled source: assets/haze-site-pages-v7.css ===== */ /* The Haze Connect — complete storefront page alignment v7 Extends the approved brand-guide system beyond home, collections, PDP, COA and contact. This layer is intentionally page-scoped and loaded last. It changes presentation only; forms, customer actions, cart behavior, app blocks, maps, search, structured data and tracking remain intact. */ /* ============================================================ SHARED CONTENT-PAGE CHROME ============================================================ */ body.haze-v2.template-blog, body.haze-v2.template-article, body.haze-v2.template-page, body.haze-v2.template-list-collections, body.haze-v2.template-search, body.haze-v2.template-cart, body.haze-v2.template-404, body.haze-v2.template-customers-account, body.haze-v2.template-customers-login, body.haze-v2.template-customers-register, body.haze-v2.template-customers-addresses, body.haze-v2.template-customers-order, body.haze-v2.template-customers-activate-account, body.haze-v2.template-customers-reset-password { background: var(--haze-brand-cream) !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-blog .collection-breadcrumbs, body.haze-v2 .haze-article .collection-breadcrumbs, body.haze-v2 .haze-page-section .collection-breadcrumbs, body.haze-v2 .haze-wholesale-section .collection-breadcrumbs, body.haze-v2 .haze-collections-list .collection-breadcrumbs, body.haze-v2 .city-landing .collection-breadcrumbs { border-bottom: 1px solid rgba(179, 229, 230, .13) !important; background: var(--haze-brand-teal) !important; } body.haze-v2 .haze-blog .breadcrumbs, body.haze-v2 .haze-article .breadcrumbs, body.haze-v2 .haze-page-section .breadcrumbs, body.haze-v2 .haze-wholesale-section .breadcrumbs, body.haze-v2 .haze-collections-list .breadcrumbs, body.haze-v2 .city-landing .breadcrumbs { color: rgba(255, 255, 255, .62) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; } body.haze-v2 .haze-blog .breadcrumbs a:not(#_hz), body.haze-v2 .haze-article .breadcrumbs a:not(#_hz), body.haze-v2 .haze-page-section .breadcrumbs a:not(#_hz), body.haze-v2 .haze-wholesale-section .breadcrumbs a:not(#_hz), body.haze-v2 .haze-collections-list .breadcrumbs a:not(#_hz), body.haze-v2 .city-landing .breadcrumbs a:not(#_hz) { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-blog .breadcrumb-current, body.haze-v2 .haze-article .breadcrumb-current, body.haze-v2 .haze-page-section .breadcrumb-current, body.haze-v2 .haze-wholesale-section .breadcrumb-current, body.haze-v2 .haze-collections-list .breadcrumb-current, body.haze-v2 .city-landing .breadcrumb-current { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-blog .blog-header-section, body.haze-v2 .haze-article .article-header-section, body.haze-v2 .haze-page-section .page-header-section, body.haze-v2 .haze-wholesale-section .page-header-section, body.haze-v2 .haze-collections-list .page-header-section, body.haze-v2 .city-landing .article-header-section { border-bottom: 1px solid rgba(179, 229, 230, .15) !important; padding: clamp(62px, 8vw, 104px) 0 !important; background: radial-gradient(circle at 82% 20%, rgba(179, 229, 230, .15), transparent 33%), radial-gradient(circle at 14% 88%, rgba(141, 183, 63, .1), transparent 30%), linear-gradient(135deg, var(--haze-brand-teal), var(--haze-brand-forest)) !important; } body.haze-v2 .haze-blog .section-label, body.haze-v2 .haze-article .section-label, body.haze-v2 .haze-page-section .section-label, body.haze-v2 .haze-wholesale-section .section-label, body.haze-v2 .haze-collections-list .section-label, body.haze-v2 .city-landing .section-label { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-blog .blog-page-title, body.haze-v2 .haze-article .article-page-title, body.haze-v2 .haze-page-section .page-title, body.haze-v2 .haze-wholesale-section .page-title, body.haze-v2 .haze-collections-list .page-title, body.haze-v2 .city-landing .article-page-title { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-blog .blog-page-desc, body.haze-v2 .haze-page-section .page-subtitle, body.haze-v2 .haze-wholesale-section .page-subtitle, body.haze-v2 .haze-collections-list .page-subtitle { color: rgba(255, 255, 255, .8) !important; -webkit-text-fill-color: rgba(255, 255, 255, .8) !important; font-family: var(--haze-font-interface) !important; font-size: 18px !important; line-height: 1.6 !important; } /* ============================================================ BLOG INDEX / LEARN LIBRARY ============================================================ */ body.haze-v2 .haze-blog { background: var(--haze-brand-cream) !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-blog .blog-articles-section { padding: clamp(58px, 8vw, 96px) 0 !important; background: linear-gradient(180deg, var(--haze-brand-cream), #eaf4ef) !important; } body.haze-v2 .haze-blog .blog-articles-grid { gap: clamp(18px, 2.4vw, 30px) !important; } body.haze-v2 .haze-blog .blog-article-card, body.haze-v2 .haze-blog a.blog-article-card:not(#_hz) { overflow: hidden !important; border: 1px solid rgba(27, 60, 53, .16) !important; border-radius: 20px !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; box-shadow: 0 12px 34px rgba(27, 60, 53, .08) !important; } body.haze-v2 .haze-blog .blog-article-card:hover { border-color: rgba(28, 80, 60, .42) !important; box-shadow: 0 22px 48px rgba(27, 60, 53, .14) !important; } body.haze-v2 .haze-blog .blog-article-image, body.haze-v2 .haze-blog .blog-article-image-placeholder { background: rgba(179, 229, 230, .32) !important; } body.haze-v2 .haze-blog .blog-article-tag { border-radius: 999px !important; background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: var(--haze-font-interface) !important; font-size: 12px !important; } body.haze-v2 .haze-blog .blog-article-content { padding: clamp(22px, 2.8vw, 30px) !important; } body.haze-v2 .haze-blog .blog-article-date { color: rgba(27, 60, 53, .58) !important; -webkit-text-fill-color: rgba(27, 60, 53, .58) !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; } body.haze-v2 .haze-blog .blog-article-title { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-size: clamp(30px, 3vw, 40px) !important; font-weight: 500 !important; letter-spacing: -.012em !important; line-height: 1 !important; } body.haze-v2 .haze-blog .blog-article-excerpt { color: rgba(27, 60, 53, .75) !important; -webkit-text-fill-color: rgba(27, 60, 53, .75) !important; font-family: var(--haze-font-interface) !important; font-size: 16px !important; line-height: 1.62 !important; } body.haze-v2 .haze-blog .blog-article-read { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 700 !important; } body.haze-v2 .haze-blog .collection-pagination .pagination-btn, body.haze-v2 .haze-blog .collection-pagination .pagination-num { border-color: rgba(27, 60, 53, .2) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-blog .collection-pagination .pagination-current { border-color: var(--haze-brand-forest) !important; background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ============================================================ ARTICLE / CITY EDUCATION PAGES ============================================================ */ body.haze-v2 .haze-article, body.haze-v2 .city-landing { background: var(--haze-brand-cream) !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-article .article-header-inner, body.haze-v2 .city-landing .article-header-inner { max-width: 920px !important; } body.haze-v2 .haze-article .article-tag, body.haze-v2 .city-landing .article-tag { border: 1px solid rgba(179, 229, 230, .34) !important; border-radius: 999px !important; background: rgba(179, 229, 230, .12) !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-family: var(--haze-font-interface) !important; font-size: 12px !important; } body.haze-v2 .haze-article .article-author-avatar { border-color: rgba(179, 229, 230, .36) !important; background: rgba(179, 229, 230, .15) !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-family: var(--haze-font-interface) !important; } body.haze-v2 .haze-article .article-author-name { color: rgba(255, 255, 255, .9) !important; -webkit-text-fill-color: rgba(255, 255, 255, .9) !important; } body.haze-v2 .haze-article .article-meta { color: rgba(255, 255, 255, .62) !important; -webkit-text-fill-color: rgba(255, 255, 255, .62) !important; } body.haze-v2 .haze-article .article-featured-image { padding-bottom: clamp(36px, 6vw, 64px) !important; background: var(--haze-brand-teal) !important; } body.haze-v2 .haze-article .article-featured-image img { border-radius: 22px !important; box-shadow: 0 20px 54px rgba(5, 24, 20, .28) !important; } body.haze-v2 .haze-article .article-content-section, body.haze-v2 .city-landing .article-content-section { padding: clamp(58px, 8vw, 94px) 0 !important; background: var(--haze-brand-cream) !important; } body.haze-v2 .haze-article .article-content-inner, body.haze-v2 .city-landing .article-content-inner { max-width: 820px !important; border: 1px solid rgba(27, 60, 53, .13); border-radius: 24px; padding: clamp(30px, 5vw, 58px) !important; background: var(--haze-brand-paper); box-shadow: 0 18px 48px rgba(27, 60, 53, .08); } body.haze-v2 .haze-article .article-content-inner p, body.haze-v2 .haze-article .article-content-inner li, body.haze-v2 .city-landing .article-content-inner p, body.haze-v2 .city-landing .article-content-inner li, body.haze-v2 .city-landing .rte { color: rgba(27, 60, 53, .84) !important; -webkit-text-fill-color: rgba(27, 60, 53, .84) !important; font-family: var(--haze-font-interface) !important; font-size: 17px !important; line-height: 1.78 !important; } body.haze-v2 .haze-article .article-content-inner > p:first-of-type, body.haze-v2 .city-landing .article-content-inner > p:first-of-type { border-left-color: var(--haze-brand-lime) !important; background: rgba(179, 229, 230, .22) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 19px !important; } body.haze-v2 .haze-article .article-content-inner h2, body.haze-v2 .city-landing .article-content-inner h2, body.haze-v2 .city-landing .rte h2 { border-bottom-color: rgba(27, 60, 53, .16) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-size: clamp(38px, 4.5vw, 54px) !important; font-weight: 500 !important; letter-spacing: -.012em !important; line-height: 1 !important; text-transform: none !important; } body.haze-v2 .haze-article .article-content-inner h3, body.haze-v2 .haze-article .article-content-inner h4, body.haze-v2 .city-landing .article-content-inner h3, body.haze-v2 .city-landing .article-content-inner h4, body.haze-v2 .city-landing .rte h3, body.haze-v2 .city-landing .rte h4 { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-family: var(--haze-font-interface) !important; font-size: 22px !important; font-weight: 700 !important; } body.haze-v2 .haze-article .article-content-inner strong, body.haze-v2 .city-landing .article-content-inner strong, body.haze-v2 .city-landing .rte strong { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-article .article-content-inner a:not(#_hz), body.haze-v2 .city-landing .article-content-inner a:not(#_hz), body.haze-v2 .city-landing .rte a:not(#_hz) { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-weight: 700; text-decoration-color: rgba(28, 80, 60, .4) !important; } body.haze-v2 .haze-article .article-content-inner blockquote, body.haze-v2 .city-landing .article-content-inner blockquote { border-left-color: var(--haze-brand-lime) !important; background: rgba(179, 229, 230, .27) !important; } body.haze-v2 .haze-article .article-content-inner blockquote p, body.haze-v2 .city-landing .article-content-inner blockquote p { color: rgba(27, 60, 53, .76) !important; -webkit-text-fill-color: rgba(27, 60, 53, .76) !important; } body.haze-v2 .haze-article .article-content-inner th, body.haze-v2 .haze-article .article-content-inner td, body.haze-v2 .city-landing .article-content-inner th, body.haze-v2 .city-landing .article-content-inner td { border-color: rgba(27, 60, 53, .17) !important; color: rgba(27, 60, 53, .82) !important; -webkit-text-fill-color: rgba(27, 60, 53, .82) !important; } body.haze-v2 .haze-article .article-content-inner th, body.haze-v2 .city-landing .article-content-inner th { background: rgba(179, 229, 230, .35) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-article .article-tags-bottom { border-top-color: rgba(27, 60, 53, .14) !important; } body.haze-v2 .haze-article .article-tag-link, body.haze-v2 .haze-article a.article-tag-link:not(#_hz) { border: 1px solid rgba(28, 80, 60, .2) !important; background: rgba(179, 229, 230, .36) !important; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-article .article-back-link a:not(#_hz) { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-article .article-share-label { color: rgba(27, 60, 53, .58) !important; -webkit-text-fill-color: rgba(27, 60, 53, .58) !important; } body.haze-v2 .haze-article .article-share-btn { border-color: rgba(27, 60, 53, .2) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-article .article-cta-section, body.haze-v2 .haze-page-section .article-cta-section, body.haze-v2 .city-landing .article-cta-section { border-block: 1px solid rgba(179, 229, 230, .15) !important; background: linear-gradient(130deg, var(--haze-brand-teal), var(--haze-brand-forest)) !important; } body.haze-v2 .haze-article .article-cta-title, body.haze-v2 .haze-page-section .article-cta-title, body.haze-v2 .city-landing .article-cta-title { color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: var(--haze-font-display) !important; font-weight: 500 !important; } body.haze-v2 .haze-article .article-cta-desc, body.haze-v2 .haze-page-section .article-cta-desc, body.haze-v2 .city-landing .article-cta-desc { color: rgba(255, 255, 255, .78) !important; -webkit-text-fill-color: rgba(255, 255, 255, .78) !important; } body.haze-v2 .haze-article .article-related-section { background: #eaf4ef !important; } body.haze-v2 .haze-article .article-related-title { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; } body.haze-v2 .haze-article .article-related-section .blog-article-card, body.haze-v2 .haze-article .article-related-section a.blog-article-card:not(#_hz) { border-color: rgba(27, 60, 53, .15) !important; background: var(--haze-brand-paper) !important; } body.haze-v2 .haze-article .article-related-section .blog-article-title, body.haze-v2 .haze-article .article-related-section .blog-article-title a:not(#_hz) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 19px !important; } body.haze-v2 .haze-article .article-related-section .blog-article-date { color: rgba(27, 60, 53, .56) !important; -webkit-text-fill-color: rgba(27, 60, 53, .56) !important; } body.haze-v2 .haze-article .article-related-section .blog-article-read { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } /* City landing extras */ body.haze-v2 .city-landing .city-intro, body.haze-v2 .city-landing .city-faq-section { border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 20px !important; background: var(--haze-brand-paper) !important; box-shadow: 0 14px 38px rgba(27, 60, 53, .07); } body.haze-v2 .city-landing .city-faq-item { border-color: rgba(27, 60, 53, .14) !important; } body.haze-v2 .city-landing .city-product-card, body.haze-v2 .city-landing a.city-product-card:not(#_hz) { border-color: rgba(27, 60, 53, .16) !important; background: rgba(179, 229, 230, .28) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .city-landing .city-product-label, body.haze-v2 .city-landing .city-product-arrow { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } /* ============================================================ STANDARD PAGES, FAQ, REVIEWS AND POLICIES ============================================================ */ body.haze-v2 .haze-page-section .page-content-section { padding: clamp(44px, 6vw, 84px) 0 !important; background: var(--haze-brand-cream) !important; } body.haze-v2 .haze-page-section .page-content-inner { max-width: 920px !important; margin: 0 auto !important; border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 22px !important; padding: clamp(28px, 5vw, 64px) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; box-shadow: 0 20px 52px rgba(27, 60, 53, .07) !important; font-size: 17px !important; line-height: 1.78 !important; } body.haze-v2 .haze-page-section .page-content-inner :is(p, li, td, dd) { color: rgba(27, 60, 53, .84) !important; -webkit-text-fill-color: rgba(27, 60, 53, .84) !important; } body.haze-v2 .haze-page-section .page-content-inner :is(h2, h3, h4) { margin-top: 1.55em !important; margin-bottom: .55em !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-page-section .page-content-inner h2 { font-family: var(--haze-font-display) !important; font-size: clamp(34px, 4vw, 52px) !important; font-weight: 500 !important; line-height: 1 !important; } body.haze-v2 .haze-page-section .page-content-inner :is(h3, h4) { font-family: var(--haze-font-interface) !important; font-weight: 700 !important; line-height: 1.25 !important; } body.haze-v2 .haze-page-section .page-content-inner a:not(.btn):not(.button) { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; text-decoration-color: var(--haze-brand-lime) !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } body.haze-v2 .haze-page-section .page-content-inner :is(blockquote, table) { border-color: rgba(27, 60, 53, .16) !important; background: rgba(179, 229, 230, .24) !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-page-section .page-trust-section { border-block: 1px solid rgba(27, 60, 53, .12) !important; background: rgba(179, 229, 230, .32) !important; } body.haze-v2 .haze-page-section .page-trust-item { border: 1px solid rgba(27, 60, 53, .13) !important; border-radius: 16px !important; background: rgba(255, 253, 248, .78) !important; } body.haze-v2 .haze-page-section .page-trust-icon, body.haze-v2 .haze-page-section .page-trust-title { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-page-section .page-trust-title { font-family: var(--haze-font-interface) !important; font-size: 17px !important; font-weight: 700 !important; } body.haze-v2 .haze-page-section .page-trust-desc { color: rgba(27, 60, 53, .72) !important; -webkit-text-fill-color: rgba(27, 60, 53, .72) !important; font-size: 15px !important; line-height: 1.55 !important; } /* ============================================================ WHOLESALE APPLICATION ============================================================ */ body.haze-v2 .haze-wholesale-section .page-content-section { padding: clamp(48px, 7vw, 88px) 0 !important; background: var(--haze-brand-cream) !important; } body.haze-v2 .haze-wholesale-section .wholesale-benefit-card { border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 18px !important; background: var(--haze-brand-paper) !important; box-shadow: 0 14px 34px rgba(27, 60, 53, .06) !important; } body.haze-v2 .haze-wholesale-section .wholesale-benefit-card:hover { border-color: rgba(141, 183, 63, .58) !important; box-shadow: 0 18px 42px rgba(27, 60, 53, .1) !important; } body.haze-v2 .haze-wholesale-section .wholesale-benefit-icon { width: 48px !important; height: 48px !important; background: rgba(179, 229, 230, .4) !important; color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-wholesale-section .wholesale-benefit-title { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 18px !important; } body.haze-v2 .haze-wholesale-section .wholesale-benefit-desc { color: rgba(27, 60, 53, .72) !important; -webkit-text-fill-color: rgba(27, 60, 53, .72) !important; font-size: 15px !important; } body.haze-v2 .haze-wholesale-section .wholesale-form-section { border: 1px solid rgba(27, 60, 53, .15) !important; border-radius: 22px !important; background: linear-gradient(145deg, rgba(179, 229, 230, .3), var(--haze-brand-paper) 52%) !important; box-shadow: 0 22px 56px rgba(27, 60, 53, .08) !important; } body.haze-v2 .haze-wholesale-section .wholesale-form-title { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-size: clamp(32px, 4vw, 46px) !important; font-weight: 500 !important; line-height: 1 !important; } body.haze-v2 .haze-wholesale-section .wholesale-form-subtitle { color: rgba(27, 60, 53, .72) !important; -webkit-text-fill-color: rgba(27, 60, 53, .72) !important; font-size: 16px !important; } body.haze-v2 .haze-wholesale-section .wholesale-form-grid label { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-size: 12px !important; letter-spacing: .12em !important; } body.haze-v2 .haze-wholesale-section .wholesale-form-grid :is(input, textarea, select) { min-height: 52px !important; border: 1px solid rgba(27, 60, 53, .22) !important; border-radius: 12px !important; background-color: #fff !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 16px !important; } body.haze-v2 .haze-wholesale-section .wholesale-form-grid :is(input, textarea)::placeholder { color: rgba(27, 60, 53, .48) !important; -webkit-text-fill-color: rgba(27, 60, 53, .48) !important; } body.haze-v2 .haze-wholesale-section .wholesale-form-grid :is(input, textarea, select):focus { border-color: var(--haze-brand-forest) !important; box-shadow: 0 0 0 4px rgba(179, 229, 230, .58) !important; } body.haze-v2 .haze-wholesale-section .wholesale-form-grid select option { background: #fff !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-wholesale-section .wholesale-submit-btn { min-height: 52px !important; border-radius: 999px !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 15px !important; } /* ============================================================ COLLECTION DIRECTORY ============================================================ */ body.haze-v2 .haze-collections-list .collections-list-grid-section { padding: clamp(48px, 7vw, 90px) 0 !important; background: var(--haze-brand-cream) !important; } body.haze-v2 .haze-collections-list .collections-list-card { overflow: hidden !important; border: 1px solid rgba(27, 60, 53, .16) !important; border-radius: 22px !important; background: var(--haze-brand-paper) !important; box-shadow: 0 16px 40px rgba(27, 60, 53, .07) !important; } body.haze-v2 .haze-collections-list .collections-list-card:hover { border-color: rgba(141, 183, 63, .68) !important; box-shadow: 0 22px 50px rgba(27, 60, 53, .12) !important; } body.haze-v2 .haze-collections-list .collections-list-image { background: rgba(179, 229, 230, .24) !important; } body.haze-v2 .haze-collections-list .collections-list-overlay { background: linear-gradient(to top, rgba(27, 60, 53, .32), transparent 48%) !important; } body.haze-v2 .haze-collections-list .collections-list-info { background: var(--haze-brand-paper) !important; } body.haze-v2 .haze-collections-list .collections-list-name { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: clamp(30px, 3.2vw, 44px) !important; } body.haze-v2 .haze-collections-list .collections-list-desc, body.haze-v2 .haze-collections-list .collections-list-count { color: rgba(27, 60, 53, .7) !important; -webkit-text-fill-color: rgba(27, 60, 53, .7) !important; font-size: 15px !important; } body.haze-v2 .haze-collections-list .collections-list-link { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-size: 14px !important; text-decoration-color: var(--haze-brand-lime) !important; } /* ============================================================ STORE LOCATOR ============================================================ */ body.haze-v2 .haze-store-locator { background: var(--haze-brand-cream) !important; } body.haze-v2 .haze-store-locator .locator-hero { padding: clamp(62px, 8vw, 104px) 0 48px !important; background: radial-gradient(circle at 82% 20%, rgba(179, 229, 230, .15), transparent 33%), linear-gradient(135deg, var(--haze-brand-teal), var(--haze-brand-forest)) !important; } body.haze-v2 .haze-store-locator .locator-title { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-store-locator .locator-subtitle { color: rgba(255, 255, 255, .78) !important; -webkit-text-fill-color: rgba(255, 255, 255, .78) !important; font-size: 17px !important; } body.haze-v2 .haze-store-locator .locator-seo-wrapper { margin-top: 34px !important; border: 1px solid rgba(179, 229, 230, .22) !important; border-radius: 18px !important; padding: 24px clamp(20px, 4vw, 42px) 18px !important; background: rgba(255, 255, 255, .07) !important; } body.haze-v2 .haze-store-locator .locator-seo-text, body.haze-v2 .haze-store-locator .locator-seo-text :is(p, li) { color: rgba(255, 255, 255, .78) !important; -webkit-text-fill-color: rgba(255, 255, 255, .78) !important; font-size: 16px !important; } body.haze-v2 .haze-store-locator .locator-seo-text :is(h2, h3, strong) { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-store-locator .locator-seo-text :is(h2, h3) { font-family: var(--haze-font-display) !important; font-weight: 500 !important; } body.haze-v2 .haze-store-locator .locator-seo-fade { background: linear-gradient(to bottom, transparent, #214d40) !important; } body.haze-v2 .haze-store-locator .seo-toggle-btn { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-size: 14px !important; } body.haze-v2 .haze-store-locator .locator-body { padding: 54px 0 72px !important; background: var(--haze-brand-cream) !important; } body.haze-v2 .haze-store-locator .locator-list-panel, body.haze-v2 .haze-store-locator .locator-map-panel { border: 1px solid rgba(27, 60, 53, .15) !important; border-radius: 20px !important; padding: 18px !important; background: var(--haze-brand-paper) !important; box-shadow: 0 16px 40px rgba(27, 60, 53, .07) !important; } body.haze-v2 .haze-store-locator .locator-search { border: 1px solid rgba(27, 60, 53, .2) !important; background: rgba(179, 229, 230, .25) !important; } body.haze-v2 .haze-store-locator .locator-search input { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 16px !important; } body.haze-v2 .haze-store-locator .locator-search input::placeholder { color: rgba(27, 60, 53, .48) !important; -webkit-text-fill-color: rgba(27, 60, 53, .48) !important; } body.haze-v2 .haze-store-locator .store-card { border-color: rgba(27, 60, 53, .12) !important; } body.haze-v2 .haze-store-locator .store-card-name { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 18px !important; } body.haze-v2 .haze-store-locator :is(.store-card-address, .store-card-phone) { color: rgba(27, 60, 53, .7) !important; -webkit-text-fill-color: rgba(27, 60, 53, .7) !important; font-size: 15px !important; } body.haze-v2 .haze-store-locator .store-card-directions { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 .haze-store-locator .locator-map { overflow: hidden !important; border-radius: 14px !important; } body.haze-v2 .haze-store-locator .locator-cta { border-block: 1px solid rgba(179, 229, 230, .15) !important; background: linear-gradient(135deg, var(--haze-brand-teal), var(--haze-brand-forest)) !important; } body.haze-v2 .haze-store-locator .locator-cta h2 { color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: var(--haze-font-display) !important; font-size: clamp(38px, 5vw, 60px) !important; font-weight: 500 !important; } body.haze-v2 .haze-store-locator .locator-cta p { color: rgba(255, 255, 255, .78) !important; -webkit-text-fill-color: rgba(255, 255, 255, .78) !important; font-size: 17px !important; } /* ============================================================ SEARCH RESULTS ============================================================ */ body.haze-v2.template-search .template-search, body.haze-v2.template-search .template-search__results, body.haze-v2.template-search .product-grid-container, body.haze-v2.template-search .gradient { background: var(--haze-brand-cream) !important; } body.haze-v2.template-search .template-search__header { padding-top: clamp(50px, 7vw, 86px) !important; } body.haze-v2.template-search .template-search__header .h2, body.haze-v2.template-search .template-search__results .title { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-size: clamp(48px, 6vw, 76px) !important; font-weight: 500 !important; } body.haze-v2.template-search .template-search__search .field { overflow: hidden !important; border: 1px solid rgba(27, 60, 53, .2) !important; border-radius: 999px !important; background: #fff !important; box-shadow: 0 12px 30px rgba(27, 60, 53, .07) !important; } body.haze-v2.template-search .template-search__search :is(.field__input, .field__label) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 16px !important; } body.haze-v2.template-search .template-search__search .search__button { width: 58px !important; background: var(--haze-brand-forest) !important; color: #fff !important; } body.haze-v2.template-search :is(.facets-wrapper, .facets-vertical-form) { color: var(--haze-brand-teal) !important; } body.haze-v2.template-search .facets-wrapper { border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 18px !important; background: rgba(179, 229, 230, .24) !important; } body.haze-v2.template-search :is(.facet-filters__label, .product-count__text, .facets__heading, .facets__summary) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 15px !important; } body.haze-v2.template-search :is(.facet-filters__sort, .mobile-facets__sort .select__select) { border-color: rgba(27, 60, 53, .2) !important; background-color: #fff !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 15px !important; } /* ============================================================ FULL CART PAGE ============================================================ */ body.haze-v2.template-cart :is(cart-items, .cart__footer-wrapper, .gradient) { background: var(--haze-brand-cream) !important; } body.haze-v2.template-cart .title--primary, body.haze-v2.template-cart .cart__empty-text { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2.template-cart .cart__items, body.haze-v2.template-cart .cart__footer { border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 22px !important; padding: clamp(20px, 4vw, 42px) !important; background: var(--haze-brand-paper) !important; box-shadow: 0 18px 44px rgba(27, 60, 53, .07) !important; } body.haze-v2.template-cart .cart-item, body.haze-v2.template-cart .cart-items thead tr { border-color: rgba(27, 60, 53, .13) !important; } body.haze-v2.template-cart :is(.cart-item__name, .cart-item__final-price, .price--end, .totals__total, .totals__total-value) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2.template-cart .cart-item__name { font-size: 18px !important; font-weight: 700 !important; } body.haze-v2.template-cart :is(.product-option, .caption-with-letter-spacing, .tax-note) { color: rgba(27, 60, 53, .68) !important; -webkit-text-fill-color: rgba(27, 60, 53, .68) !important; font-size: 14px !important; } body.haze-v2.template-cart .quantity, body.haze-v2.template-cart .cart__note .field { border: 1px solid rgba(27, 60, 53, .2) !important; background: #fff !important; color: var(--haze-brand-teal) !important; } body.haze-v2.template-cart .cart__checkout-button, body.haze-v2.template-cart .cart__warnings .button { min-height: 54px !important; border-radius: 999px !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 16px !important; font-weight: 700 !important; } body.haze-v2.template-cart .underlined-link, body.haze-v2.template-cart cart-remove-button a { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } /* ============================================================ 404 AND CUSTOMER ACCOUNT PAGES ============================================================ */ body.haze-v2.template-404 .template-404 { max-width: 780px !important; margin-block: clamp(50px, 9vw, 120px) !important; border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 24px !important; padding: clamp(40px, 7vw, 86px) !important; background: var(--haze-brand-paper) !important; box-shadow: 0 20px 50px rgba(27, 60, 53, .07) !important; } body.haze-v2.template-404 .template-404 .title { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-size: clamp(50px, 8vw, 84px) !important; } body.haze-v2.template-404 .template-404 .button { border-radius: 999px !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2[class*="template-customers-"] main > .customer { max-width: 980px !important; margin-block: clamp(44px, 7vw, 90px) !important; border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 24px !important; padding: clamp(28px, 5vw, 62px) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; box-shadow: 0 20px 50px rgba(27, 60, 53, .07) !important; } body.haze-v2[class*="template-customers-"] .customer h1, body.haze-v2[class*="template-customers-"] .customer h2 { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-weight: 500 !important; } body.haze-v2[class*="template-customers-"] .customer h1 { font-size: clamp(46px, 6vw, 72px) !important; } body.haze-v2[class*="template-customers-"] .customer :is(p, td, th, label) { color: rgba(27, 60, 53, .78) !important; -webkit-text-fill-color: rgba(27, 60, 53, .78) !important; } body.haze-v2[class*="template-customers-"] .customer .field { border-color: rgba(27, 60, 53, .2) !important; border-radius: 12px !important; background: #fff !important; } body.haze-v2[class*="template-customers-"] .customer :is(.field__input, .field__label) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 16px !important; } body.haze-v2[class*="template-customers-"] .customer button:not(.quantity__button) { min-height: 52px !important; border-radius: 999px !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2[class*="template-customers-"] .customer a { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2[class*="template-customers-"] .customer table, body.haze-v2[class*="template-customers-"] .customer :is(th, td) { border-color: rgba(27, 60, 53, .14) !important; } /* ============================================================ RESEARCH, ACCESS AND LEGALITY TOOLS ============================================================ */ body.haze-v2.template-suffix-hemp-access-index #hzw, body.haze-v2.template-suffix-hemp-index #haze-index, body.haze-v2.template-suffix-legality-tracker #haze-tracker { --green: var(--haze-brand-lime); --red: var(--haze-brand-coral); --amber: var(--haze-brand-orange); --blue: #448d96; --bg: var(--haze-brand-cream); --card: var(--haze-brand-paper); --txt: var(--haze-brand-teal); --muted: #506b64; --line: rgba(27, 60, 53, .15); --chip: rgba(179, 229, 230, .3); background: var(--haze-brand-cream) !important; color: var(--haze-brand-teal) !important; font-family: var(--haze-font-interface) !important; font-size: 16px !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) h1 { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-size: clamp(52px, 7vw, 88px) !important; font-weight: 500 !important; line-height: .98 !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) :is(h2, h3, .nm, .n) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) .eyebrow { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) :is(.lede, .dek, .meta, .updated, .src, .note, .foot, .disc, .l) { color: #506b64 !important; -webkit-text-fill-color: #506b64 !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) :is(.stat, .c, .callout, .cite) { border-color: rgba(27, 60, 53, .15) !important; background: var(--haze-brand-paper) !important; box-shadow: 0 12px 30px rgba(27, 60, 53, .055) !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) .controls { border-color: rgba(27, 60, 53, .14) !important; border-radius: 16px !important; background: rgba(179, 229, 230, .26) !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) input[type="search"] { border-color: rgba(27, 60, 53, .2) !important; background: #fff !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 16px !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) .chip { border-color: rgba(27, 60, 53, .2) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) .chip[aria-pressed="true"] { border-color: var(--haze-brand-forest) !important; background: var(--haze-brand-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 :is(#hzw, #haze-index, #haze-tracker) a:not(#_hz) { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; } body.haze-v2.template-suffix-hemp-index #haze-index :is(table, th, td) { border-color: rgba(27, 60, 53, .14) !important; } body.haze-v2.template-suffix-hemp-index #haze-index th { background: var(--haze-brand-teal) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2.template-suffix-hemp-index #haze-index tbody tr:nth-child(even) { background: rgba(179, 229, 230, .16) !important; } /* State guides contain legacy inline colors, so this block intentionally uses strong scoped overrides while preserving the legal copy verbatim. */ body.haze-v2.template-suffix-state-legality .state-legality-page { max-width: 960px !important; margin-block: clamp(40px, 6vw, 80px) !important; border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 22px !important; padding: clamp(28px, 5vw, 62px) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; box-shadow: 0 20px 52px rgba(27, 60, 53, .07) !important; font-family: var(--haze-font-interface) !important; } body.haze-v2.template-suffix-state-legality .state-legality-page :is(h1, h2) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-weight: 500 !important; line-height: 1 !important; } body.haze-v2.template-suffix-state-legality .state-legality-page h1 { font-size: clamp(48px, 6vw, 76px) !important; } body.haze-v2.template-suffix-state-legality .state-legality-page h2 { font-size: clamp(32px, 4vw, 46px) !important; } body.haze-v2.template-suffix-state-legality .state-legality-page :is(h3, h4, p, li, strong) { color: rgba(27, 60, 53, .84) !important; -webkit-text-fill-color: rgba(27, 60, 53, .84) !important; } body.haze-v2.template-suffix-state-legality .state-legality-page > div:not([class]), body.haze-v2.template-suffix-state-legality .state-legality-page [style*="background:#f9f9f9"], body.haze-v2.template-suffix-state-legality .state-legality-page [style*="background: #f9f9f9"] { border-color: rgba(27, 60, 53, .14) !important; border-radius: 16px !important; background: rgba(179, 229, 230, .2) !important; } body.haze-v2.template-suffix-state-legality .state-legality-page [style*="background:#D4EDDA"] { border-color: rgba(141, 183, 63, .42) !important; background: rgba(141, 183, 63, .14) !important; } body.haze-v2.template-suffix-state-legality .state-legality-page [style*="background:#F8D7DA"] { border-color: rgba(228, 98, 78, .4) !important; background: rgba(228, 98, 78, .12) !important; } body.haze-v2.template-suffix-state-legality .state-legality-page a:not(.button):not(#_hz) { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; text-decoration-color: var(--haze-brand-lime) !important; } body.haze-v2.template-suffix-state-legality .state-legality-page a[style*="background"] { border-radius: 999px !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } /* ============================================================ RESPONSIVE POLISH FOR THE NEW PAGE FAMILIES ============================================================ */ @media screen and (max-width: 989px) { body.haze-v2 .haze-store-locator .locator-grid { grid-template-columns: 1fr !important; min-height: 0 !important; } body.haze-v2 .haze-store-locator .locator-map-panel { min-height: 430px !important; } body.haze-v2.template-cart .cart__footer { margin-top: 24px !important; } } @media screen and (max-width: 749px) { body.haze-v2 .haze-page-section .page-content-inner, body.haze-v2 .haze-wholesale-section .wholesale-form-section, body.haze-v2.template-cart .cart__items, body.haze-v2.template-cart .cart__footer { border-radius: 16px !important; } body.haze-v2 .haze-store-locator .locator-map-panel { min-height: 340px !important; } body.haze-v2[class*="template-customers-"] main > .customer, body.haze-v2.template-404 .template-404 { width: calc(100% - 30px) !important; border-radius: 18px !important; } body.haze-v2.template-suffix-state-legality .state-legality-page { width: calc(100% - 30px) !important; border-radius: 16px !important; } } /* ============================================================ PASSWORD GATE AND GIFT CARD (STANDALONE LAYOUTS) ============================================================ */ body.password, body.gift-card { --haze-brand-forest: #1c503c; --haze-brand-teal: #1b3c35; --haze-brand-lime: #8db73f; --haze-brand-cyan: #b3e5e6; --haze-brand-paper: #fffdf8; --haze-brand-cream: #f6f4ee; --haze-font-display: "pressio-condensed", "pressio", "Arial Narrow", sans-serif; --haze-font-interface: "industry", "DM Sans", "Helvetica Neue", Arial, sans-serif; background: var(--haze-brand-cream) !important; color: var(--haze-brand-teal) !important; font-family: var(--haze-font-interface) !important; } body.password :is(h1, h2), body.gift-card h1 { color: var(--haze-brand-teal) !important; font-family: var(--haze-font-display) !important; font-weight: 500 !important; } body.password .password-header, body.password footer { border-color: rgba(179, 229, 230, .16) !important; background: var(--haze-brand-teal) !important; color: #fff !important; } body.password .password-main > *, body.password .password-modal__content { border-color: rgba(27, 60, 53, .14) !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; } body.password :is(.field, .password-field), body.gift-card .gift-card__number { border-color: rgba(27, 60, 53, .2) !important; background: #fff !important; color: var(--haze-brand-teal) !important; } body.password .button, body.gift-card .button { border-radius: 999px !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; } body.gift-card .gift-card__price, body.gift-card .gift-card__text-wrapper, body.gift-card .gift-card__buttons { color: var(--haze-brand-teal) !important; } body.gift-card .gift-card__image-wrapper, body.gift-card .gift-card__number { border-radius: 18px !important; box-shadow: 0 18px 42px rgba(27, 60, 53, .09) !important; } /* ===== 3.17 bundled source: assets/haze-cart-popular-contrast-v8.css ===== */ /* The Haze Connect — cart and Popular Items contrast pass v8 Loaded last so it can safely resolve the older overlapping cart layers. Presentation and dialog semantics only: cart AJAX, quantities, discount meter, recommendations, checkout routing and product-tile logic are intact. */ /* ============================================================ CUSTOM CART DRAWER — STRONGER HIERARCHY + MORE USABLE HEIGHT ============================================================ */ body.haze-v2 #cart-drawer-overlay.cart-drawer-overlay { background: rgba(8, 27, 23, .66) !important; backdrop-filter: blur(3px); } body.haze-v2 #cart-drawer.cart-drawer { width: 440px !important; max-width: min(94vw, 440px) !important; overflow: hidden !important; border-left: 1px solid rgba(179, 229, 230, .28) !important; background: var(--haze-brand-cream) !important; color: var(--haze-brand-teal) !important; box-shadow: -24px 0 72px rgba(8, 27, 23, .26) !important; } body.haze-v2 #cart-drawer .cart-drawer-header { flex: 0 0 auto !important; min-height: 68px !important; border-bottom: 1px solid rgba(179, 229, 230, .18) !important; padding: 17px 22px !important; background: var(--haze-brand-teal) !important; } body.haze-v2 #cart-drawer .cart-drawer-header h3 { margin: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: var(--haze-font-interface) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.015em !important; } body.haze-v2 #cart-drawer .cart-drawer-count { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-weight: 600 !important; } body.haze-v2 #cart-drawer .cart-drawer-close { display: grid !important; width: 42px !important; height: 42px !important; place-items: center !important; border: 1px solid rgba(179, 229, 230, .32) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .06) !important; color: var(--haze-brand-cyan) !important; } body.haze-v2 #cart-drawer .cart-drawer-close:hover, body.haze-v2 #cart-drawer .cart-drawer-close:focus-visible { border-color: var(--haze-brand-cyan) !important; background: rgba(179, 229, 230, .14) !important; color: #fff !important; } /* Free-shipping progress is a high-attention cyan panel. */ body.haze-v2 #cart-drawer .cart-drawer-shipping { flex: 0 0 auto !important; border-bottom: 1px solid rgba(27, 60, 53, .14) !important; padding: 14px 22px 15px !important; background: var(--haze-brand-cyan) !important; } body.haze-v2 #cart-drawer .shipping-bar-text, body.haze-v2 #cart-drawer .shipping-bar-text span { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.45 !important; } body.haze-v2 #cart-drawer .shipping-bar-text strong { color: #7b3600 !important; -webkit-text-fill-color: #7b3600 !important; font-weight: 800 !important; } body.haze-v2 #cart-drawer .shipping-bar-track { height: 7px !important; border-radius: 999px !important; background: rgba(27, 60, 53, .18) !important; } body.haze-v2 #cart-drawer .shipping-bar-fill { border-radius: 999px !important; background: linear-gradient(90deg, var(--haze-brand-forest), var(--haze-brand-lime)) !important; } body.haze-v2 #cart-drawer a.cro-c2-nudge:not(#_hz) { margin-top: 5px !important; color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-size: 13px !important; font-weight: 800 !important; text-decoration-color: rgba(28, 80, 60, .46) !important; } /* Pre-roll incentive: warm brand accent with dark copy, never white on cream. */ body.haze-v2 #cart-drawer .prm { flex: 0 0 auto !important; border-bottom: 1px solid rgba(249, 163, 58, .4) !important; padding: 12px 22px 13px !important; background: #fff2df !important; } body.haze-v2 #cart-drawer .prm-row { margin-bottom: 8px !important; } body.haze-v2 #cart-drawer .prm-badge { border: 1px solid rgba(27, 60, 53, .2) !important; border-radius: 999px !important; padding: 5px 9px !important; background: var(--haze-brand-teal) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 11px !important; } body.haze-v2 #cart-drawer .prm-badge.is-on { border-color: var(--haze-brand-orange) !important; background: var(--haze-brand-orange) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 #cart-drawer .prm-msg, body.haze-v2 #cart-drawer .prm-msg span { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; } body.haze-v2 #cart-drawer .prm-msg strong { color: #7b3600 !important; -webkit-text-fill-color: #7b3600 !important; } body.haze-v2 #cart-drawer .prm-track { height: 7px !important; margin-bottom: 7px !important; background: rgba(27, 60, 53, .16) !important; } body.haze-v2 #cart-drawer .prm-fill { background: linear-gradient(90deg, var(--haze-brand-forest), var(--haze-brand-orange)) !important; } body.haze-v2 #cart-drawer .prm-notch { width: 8px !important; height: 8px !important; margin: -4px 0 0 -4px !important; border-color: rgba(27, 60, 53, .38) !important; background: var(--haze-brand-paper) !important; } body.haze-v2 #cart-drawer .prm-notch.is-hit { border-color: var(--haze-brand-orange) !important; background: var(--haze-brand-orange) !important; } body.haze-v2 #cart-drawer a.prm-link:not(#_hz) { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; border-bottom-color: rgba(28, 80, 60, .42) !important; font-size: 13px !important; font-weight: 800 !important; } /* Line items get a real editing area instead of collapsing behind upsells. */ body.haze-v2 #cart-drawer .cart-drawer-items { flex: 1 1 190px !important; min-height: 128px !important; padding: 7px 16px 10px !important; background: var(--haze-brand-cream) !important; scrollbar-color: rgba(28, 80, 60, .48) transparent; scrollbar-width: thin; } body.haze-v2 #cart-drawer .cart-drawer-item { gap: 13px !important; margin: 8px 0 !important; border: 1px solid rgba(27, 60, 53, .14) !important; border-radius: 13px !important; padding: 11px !important; background: var(--haze-brand-paper) !important; box-shadow: 0 6px 18px rgba(27, 60, 53, .055) !important; } body.haze-v2 #cart-drawer .cart-item-image { width: 76px !important; min-width: 76px !important; height: 76px !important; border: 1px solid rgba(27, 60, 53, .1) !important; border-radius: 10px !important; background: #edf1ee !important; } body.haze-v2 #cart-drawer a.cart-item-title:not(#_hz) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 14px !important; font-weight: 750 !important; line-height: 1.3 !important; } body.haze-v2 #cart-drawer .cart-item-variant { color: var(--haze-brand-forest) !important; -webkit-text-fill-color: var(--haze-brand-forest) !important; font-size: 13px !important; font-weight: 650 !important; } body.haze-v2 #cart-drawer .cart-item-price { color: #7b3600 !important; -webkit-text-fill-color: #7b3600 !important; font-size: 15px !important; } body.haze-v2 #cart-drawer .cart-item-qty { min-height: 34px !important; border-color: rgba(27, 60, 53, .22) !important; border-radius: 999px !important; background: rgba(179, 229, 230, .28) !important; } body.haze-v2 #cart-drawer .cart-qty-btn, body.haze-v2 #cart-drawer .cart-qty-val { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 #cart-drawer .cart-qty-btn { width: 32px !important; height: 32px !important; font-family: var(--haze-font-interface) !important; font-size: 17px !important; } body.haze-v2 #cart-drawer .cart-item-remove { color: #7b3600 !important; -webkit-text-fill-color: #7b3600 !important; font-family: var(--haze-font-interface) !important; font-size: 12px !important; font-weight: 700 !important; } body.haze-v2 #cart-drawer .cart-drawer-empty p { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } /* Compact horizontal recommendation cards return height to cart contents. */ body.haze-v2 #cart-drawer .cart-drawer-upsells { flex: 0 0 auto !important; border-top: 1px solid rgba(179, 229, 230, .22) !important; padding: 12px 16px 13px !important; background: var(--haze-brand-forest) !important; } body.haze-v2 #cart-drawer .upsell-title { margin: 0 0 9px !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-size: 13px !important; letter-spacing: .09em !important; } body.haze-v2 #cart-drawer .upsell-scroll { gap: 9px !important; padding: 0 0 5px !important; scrollbar-color: rgba(179, 229, 230, .54) transparent; scrollbar-width: thin; } body.haze-v2 #cart-drawer a.upsell-card:not(#_hz) { display: grid !important; grid-template-columns: 74px minmax(0, 1fr) !important; min-width: 210px !important; min-height: 82px !important; overflow: hidden !important; border: 1px solid rgba(179, 229, 230, .42) !important; border-radius: 12px !important; background: var(--haze-brand-paper) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; box-shadow: 0 6px 16px rgba(8, 27, 23, .15) !important; } body.haze-v2 #cart-drawer a.upsell-card:not(#_hz):hover, body.haze-v2 #cart-drawer a.upsell-card:not(#_hz):focus-visible { border-color: var(--haze-brand-lime) !important; box-shadow: 0 8px 20px rgba(8, 27, 23, .22) !important; } body.haze-v2 #cart-drawer .upsell-card img { width: 74px !important; height: 100% !important; min-height: 82px !important; object-fit: cover !important; background: #edf1ee !important; } body.haze-v2 #cart-drawer .upsell-info { min-width: 0 !important; padding: 9px 10px 8px !important; } body.haze-v2 #cart-drawer .upsell-name { display: -webkit-box !important; overflow: hidden !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.haze-v2 #cart-drawer .upsell-price { display: block !important; margin-top: 5px !important; color: #7b3600 !important; -webkit-text-fill-color: #7b3600 !important; font-size: 14px !important; font-weight: 800 !important; } /* The footer is the dark conversion anchor. */ body.haze-v2 #cart-drawer .cart-drawer-footer { flex: 0 0 auto !important; border-top: 1px solid rgba(179, 229, 230, .2) !important; padding: 15px 22px 17px !important; background: var(--haze-brand-teal) !important; } body.haze-v2 #cart-drawer .cart-drawer-subtotal span:first-child { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 15px !important; font-weight: 650 !important; } body.haze-v2 #cart-drawer .cart-drawer-total { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-size: 23px !important; } body.haze-v2 #cart-drawer .cart-drawer-tax-note { color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; font-size: 12px !important; line-height: 1.45 !important; } body.haze-v2 #cart-drawer .haze-age-notice--compact { gap: 9px !important; margin: 10px 0 12px !important; border-color: var(--haze-brand-orange) !important; border-left-width: 4px !important; border-radius: 10px !important; padding: 10px 11px !important; background: #fff2df !important; color: var(--haze-brand-teal) !important; font-size: 13px !important; line-height: 1.42 !important; } body.haze-v2 #cart-drawer .haze-age-notice__title { color: #7b3600 !important; -webkit-text-fill-color: #7b3600 !important; font-size: 12px !important; } body.haze-v2 #cart-drawer a.cart-drawer-checkout-btn:not(#_hz) { min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--haze-brand-lime) !important; border-radius: 999px !important; padding: 13px 18px !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; font-size: 15px !important; font-weight: 800 !important; } body.haze-v2 #cart-drawer a.cart-drawer-checkout-btn:not(#_hz):hover, body.haze-v2 #cart-drawer a.cart-drawer-checkout-btn:not(#_hz):focus-visible { background: var(--haze-brand-cyan) !important; border-color: var(--haze-brand-cyan) !important; } body.haze-v2 #cart-drawer a.cart-drawer-viewcart:not(#_hz) { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-size: 13px !important; font-weight: 700 !important; text-underline-offset: 3px !important; } body.haze-v2 #cart-drawer :is(a, button, input):focus-visible { outline: 3px solid var(--haze-brand-cyan) !important; outline-offset: 2px !important; } /* Very short screens prioritize editable cart items over merchandising. */ @media (max-height: 720px) { body.haze-v2 #cart-drawer .cart-drawer-upsells { display: none !important; } body.haze-v2 #cart-drawer .cart-drawer-items { min-height: 150px !important; } } @media (max-width: 480px) { body.haze-v2 #cart-drawer.cart-drawer { width: 100vw !important; max-width: 100vw !important; } body.haze-v2 #cart-drawer .cart-drawer-header, body.haze-v2 #cart-drawer .cart-drawer-shipping, body.haze-v2 #cart-drawer .prm, body.haze-v2 #cart-drawer .cart-drawer-footer { padding-inline: 18px !important; } } /* ============================================================ FULL CART PAGE — KEEP CONTENT LIGHT, ANCHOR THE DECISION DARK ============================================================ */ body.haze-v2.template-cart .cart__footer { border-color: rgba(179, 229, 230, .2) !important; background: var(--haze-brand-teal) !important; color: #fff !important; box-shadow: 0 20px 52px rgba(8, 27, 23, .16) !important; } body.haze-v2.template-cart .cart__footer :is(.totals__total, .totals__total-value) { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2.template-cart .cart__footer .totals__total-value { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2.template-cart .cart__footer :is(.tax-note, .cart__note label) { color: rgba(255, 255, 255, .76) !important; -webkit-text-fill-color: rgba(255, 255, 255, .76) !important; } body.haze-v2.template-cart .cart__footer .cart__note .field { border-color: rgba(179, 229, 230, .38) !important; background: rgba(255, 255, 255, .08) !important; } body.haze-v2.template-cart .cart__footer .cart__note :is(textarea, .field__label) { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ============================================================ HOMEPAGE POPULAR ITEMS — LIGHT TYPE ON THE FOREST STAGE ============================================================ */ body.haze-v2 .haze-best-sellers-section .best-sellers { position: relative !important; isolation: isolate; overflow: hidden !important; border-block: 1px solid rgba(179, 229, 230, .16) !important; background: radial-gradient(circle at 88% 6%, rgba(179, 229, 230, .13), transparent 34%), radial-gradient(circle at 8% 96%, rgba(141, 183, 63, .1), transparent 30%), linear-gradient(135deg, var(--haze-brand-forest), #164635) !important; } body.haze-v2 .haze-best-sellers-section .best-sellers-header { gap: 34px !important; align-items: end !important; margin-bottom: 8px !important; } body.haze-v2 .haze-best-sellers-section .best-sellers-header .section-label { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-best-sellers-section .best-sellers-header .section-title { max-width: 870px !important; margin-bottom: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-wrap: balance; text-shadow: 0 2px 22px rgba(8, 27, 23, .18); } body.haze-v2 .haze-best-sellers-section .best-sellers-header a.btn-outline:not(#_hz) { min-height: 50px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(179, 229, 230, .68) !important; border-radius: 999px !important; padding: 12px 22px !important; background: rgba(255, 255, 255, .05) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 14px !important; font-weight: 750 !important; } body.haze-v2 .haze-best-sellers-section .best-sellers-header a.btn-outline:not(#_hz):hover, body.haze-v2 .haze-best-sellers-section .best-sellers-header a.btn-outline:not(#_hz):focus-visible { border-color: var(--haze-brand-cyan) !important; background: var(--haze-brand-cyan) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-best-sellers-section .haze-best-sellers-v3__tabs { gap: 9px !important; margin: 26px 0 32px !important; padding: 2px !important; } body.haze-v2 .haze-best-sellers-section .haze-best-sellers-v3__tab { min-height: 46px !important; border-color: rgba(179, 229, 230, .34) !important; padding: 11px 20px !important; background: rgba(255, 255, 255, .045) !important; color: rgba(255, 255, 255, .9) !important; -webkit-text-fill-color: rgba(255, 255, 255, .9) !important; font-size: 14px !important; font-weight: 750 !important; } body.haze-v2 .haze-best-sellers-section .haze-best-sellers-v3__tab:hover, body.haze-v2 .haze-best-sellers-section .haze-best-sellers-v3__tab:focus-visible { border-color: var(--haze-brand-cyan) !important; background: rgba(179, 229, 230, .12) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-best-sellers-section .haze-best-sellers-v3__tab.is-active { border-color: var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; box-shadow: 0 8px 24px rgba(8, 27, 23, .18) !important; } body.haze-v2 .haze-best-sellers-section .haze-merch-card { box-shadow: 0 14px 36px rgba(8, 27, 23, .2) !important; } body.haze-v2 .haze-best-sellers-section .haze-merch-card:hover { border-color: var(--hz3-card-accent) !important; box-shadow: 0 20px 46px rgba(8, 27, 23, .3) !important; } @media (max-width: 749px) { body.haze-v2 .haze-best-sellers-section .best-sellers-header { align-items: flex-start !important; } body.haze-v2 .haze-best-sellers-section .best-sellers-header a.btn-outline:not(#_hz) { width: auto !important; } } @media (prefers-reduced-motion: reduce) { body.haze-v2 #cart-drawer *, body.haze-v2 .haze-best-sellers-section * { scroll-behavior: auto !important; } } /* ===== 3.17 bundled source: assets/haze-buttons-footer-v9.css ===== */ /* The Haze Connect — CTA contrast safeguards + footer redesign v9 Loaded last to neutralize the legacy global green anchor override. The footer continues to use the existing Shopify menus, social settings, logo, description and disclaimer text; this layer improves presentation. */ /* ============================================================ FILLED CTA SAFEGUARDS ============================================================ */ body.haze-v2 a.btn-primary:not(#_hz), body.haze-v2 a.haze-v2-value__cta:not(#_hz), body.haze-v2 .hc-conversion-break__actions a:first-child:not(#_hz), body.haze-v2 a.prl-cta:not(#_hz), body.haze-v2 a.haze-merch-card__cta:not(#_hz), body.haze-v2 a.haze-card__sitewide-cta:not(#_hz), body.haze-v2 a.mid-article-cta-btn:not(#_hz), body.haze-v2 a.cart-drawer-checkout-btn:not(#_hz), body.haze-v2 a.footer-brand__primary:not(#_hz) { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; text-decoration: none !important; } body.haze-v2 a.haze-v2-value__cta:not(#_hz), body.haze-v2 .hc-conversion-break__actions a:first-child:not(#_hz) { min-height: 50px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--haze-brand-lime) !important; border-radius: 999px !important; padding: 12px 21px !important; background: var(--haze-brand-lime) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .055em !important; line-height: 1.2 !important; } body.haze-v2 a.haze-v2-value__cta:not(#_hz):hover, body.haze-v2 a.haze-v2-value__cta:not(#_hz):focus-visible, body.haze-v2 .hc-conversion-break__actions a:first-child:not(#_hz):hover, body.haze-v2 .hc-conversion-break__actions a:first-child:not(#_hz):focus-visible { border-color: var(--haze-brand-cyan) !important; background: var(--haze-brand-cyan) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .hc-conversion-break__actions a:not(:first-child):not(#_hz) { min-height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-color: rgba(179, 229, 230, .52) !important; padding: 11px 17px !important; background: rgba(255, 255, 255, .045) !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; font-weight: 750 !important; letter-spacing: .045em !important; } body.haze-v2 .hc-conversion-break__actions a:not(:first-child):not(#_hz):hover, body.haze-v2 .hc-conversion-break__actions a:not(:first-child):not(#_hz):focus-visible { border-color: var(--haze-brand-cyan) !important; background: var(--haze-brand-cyan) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 a.haze-v2-proof__cta:not(#_hz) { color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; } body.haze-v2 .hero-ctas a.btn-outline:not(#_hz), body.haze-v2 .article-cta-section a.btn:not(.btn-primary):not(#_hz) { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 a.btn-primary:not(#_hz):hover, body.haze-v2 a.btn-primary:not(#_hz):focus-visible, body.haze-v2 a.prl-cta:not(#_hz):hover, body.haze-v2 a.haze-merch-card__cta:not(#_hz):hover, body.haze-v2 a.haze-card__sitewide-cta:not(#_hz):hover, body.haze-v2 a.mid-article-cta-btn:not(#_hz):hover { color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 :is( a.btn-primary, a.haze-v2-value__cta, a.haze-v2-proof__cta, a.prl-cta, a.haze-merch-card__cta, a.haze-card__sitewide-cta, a.mid-article-cta-btn ):focus-visible { outline: 3px solid var(--haze-brand-cyan) !important; outline-offset: 3px !important; } /* ============================================================ SITE FOOTER ============================================================ */ body.haze-v2 .haze-footer-section .footer { position: relative !important; overflow: hidden !important; border-top: 0 !important; padding: 0 0 34px !important; background: radial-gradient(circle at 8% 2%, rgba(179, 229, 230, .1), transparent 30%), radial-gradient(circle at 92% 82%, rgba(141, 183, 63, .08), transparent 28%), linear-gradient(145deg, #102f2a, #0d2428 78%) !important; color: #fff !important; } body.haze-v2 .haze-footer-section .footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--haze-brand-lime), var(--haze-brand-cyan), var(--haze-brand-orange)); } body.haze-v2 .haze-footer-section .footer > .container { max-width: 1320px !important; } /* A practical confidence strip turns the footer into a final reassurance. */ body.haze-v2 .haze-footer-section .footer-trust { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin: 0 0 clamp(48px, 6vw, 72px) !important; border-bottom: 1px solid rgba(179, 229, 230, .18) !important; padding: 30px 0 28px !important; } body.haze-v2 .haze-footer-section a.footer-trust__item:not(#_hz) { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; border-right: 1px solid rgba(179, 229, 230, .16) !important; padding: 0 22px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; } body.haze-v2 .haze-footer-section a.footer-trust__item:first-child:not(#_hz) { padding-left: 0 !important; } body.haze-v2 .haze-footer-section a.footer-trust__item:last-child:not(#_hz) { border-right: 0 !important; padding-right: 0 !important; } body.haze-v2 .haze-footer-section .footer-trust__icon { width: 42px !important; height: 42px !important; display: grid !important; flex: 0 0 42px !important; place-items: center !important; border: 1px solid rgba(179, 229, 230, .3) !important; border-radius: 50% !important; background: rgba(179, 229, 230, .08) !important; color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-footer-section .footer-trust__icon svg { width: 21px !important; height: 21px !important; } body.haze-v2 .haze-footer-section .footer-trust__item strong, body.haze-v2 .haze-footer-section .footer-trust__item small { display: block !important; font-family: var(--haze-font-interface) !important; line-height: 1.35 !important; } body.haze-v2 .haze-footer-section .footer-trust__item strong { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 15px !important; font-weight: 700 !important; } body.haze-v2 .haze-footer-section .footer-trust__item small { margin-top: 2px !important; color: rgba(255, 255, 255, .63) !important; -webkit-text-fill-color: rgba(255, 255, 255, .63) !important; font-size: 12px !important; font-weight: 500 !important; } body.haze-v2 .haze-footer-section a.footer-trust__item:not(#_hz):hover .footer-trust__icon, body.haze-v2 .haze-footer-section a.footer-trust__item:not(#_hz):focus-visible .footer-trust__icon { border-color: var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-footer-section .footer-grid { display: grid !important; grid-template-columns: minmax(290px, 1.42fr) repeat(3, minmax(150px, .72fr)) !important; gap: clamp(34px, 5vw, 72px) !important; align-items: start !important; margin-bottom: clamp(46px, 6vw, 70px) !important; } body.haze-v2 .haze-footer-section .footer-brand__kicker { margin: 0 0 15px !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-family: var(--haze-font-packaging) !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: .13em !important; line-height: 1.1 !important; text-transform: uppercase !important; } body.haze-v2 .haze-footer-section .footer-brand .nav-logo { width: fit-content !important; min-height: 54px !important; display: inline-flex !important; align-items: center !important; margin: 0 0 14px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; } body.haze-v2 .haze-footer-section .footer-brand .nav-logo img { width: auto !important; max-width: 190px !important; max-height: 52px !important; } body.haze-v2 .haze-footer-section .footer-brand .nav-logo-text, body.haze-v2 .haze-footer-section .footer-brand .nav-logo-text span { color: #fff !important; -webkit-text-fill-color: #fff !important; } body.haze-v2 .haze-footer-section .footer-brand > p:not(.footer-brand__kicker) { max-width: 39ch !important; margin: 0 !important; color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; font-family: var(--haze-font-interface) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.65 !important; } body.haze-v2 .haze-footer-section .footer-brand__actions { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; margin-top: 22px !important; } body.haze-v2 .haze-footer-section a.footer-brand__primary:not(#_hz), body.haze-v2 .haze-footer-section a.footer-brand__secondary:not(#_hz) { min-height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; padding: 10px 16px !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; font-weight: 750 !important; letter-spacing: .035em !important; text-decoration: none !important; } body.haze-v2 .haze-footer-section a.footer-brand__primary:not(#_hz) { border: 1px solid var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-footer-section a.footer-brand__secondary:not(#_hz) { border: 1px solid rgba(179, 229, 230, .5) !important; background: rgba(255, 255, 255, .04) !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-footer-section a.footer-brand__primary:not(#_hz):hover, body.haze-v2 .haze-footer-section a.footer-brand__primary:not(#_hz):focus-visible, body.haze-v2 .haze-footer-section a.footer-brand__secondary:not(#_hz):hover, body.haze-v2 .haze-footer-section a.footer-brand__secondary:not(#_hz):focus-visible { border-color: var(--haze-brand-cyan) !important; background: var(--haze-brand-cyan) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } body.haze-v2 .haze-footer-section .footer-socials { gap: 9px !important; margin-top: 20px !important; } body.haze-v2 .haze-footer-section .footer-socials a:not(#_hz) { width: 44px !important; height: 44px !important; border-color: rgba(179, 229, 230, .34) !important; background: rgba(255, 255, 255, .045) !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-footer-section .footer-socials a:not(#_hz):hover, body.haze-v2 .haze-footer-section .footer-socials a:not(#_hz):focus-visible { border-color: var(--haze-brand-lime) !important; background: var(--haze-brand-lime) !important; color: var(--haze-brand-teal) !important; -webkit-text-fill-color: var(--haze-brand-teal) !important; } /* Footer navigation uses the readable interface face, never X-Compressed. */ body.haze-v2 .haze-footer-section .footer-col__title { position: relative !important; margin: 7px 0 18px !important; padding-bottom: 13px !important; color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .11em !important; line-height: 1.3 !important; text-transform: uppercase !important; } body.haze-v2 .haze-footer-section .footer-col__title::after { content: ""; position: absolute; inset: auto auto 0 0; width: 34px; height: 3px; border-radius: 999px; background: var(--haze-brand-lime); } body.haze-v2 .haze-footer-section .footer-col__title a:not(#_hz) { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; text-decoration: none !important; } body.haze-v2 .haze-footer-section .footer-col ul { margin: 0 !important; padding: 0 !important; } body.haze-v2 .haze-footer-section .footer-col li { margin: 0 !important; } body.haze-v2 .haze-footer-section .footer-col li + li { margin-top: 4px !important; } body.haze-v2 .haze-footer-section .footer-col li > a:not(#_hz) { min-height: 38px !important; display: inline-flex !important; align-items: center !important; color: rgba(255, 255, 255, .78) !important; -webkit-text-fill-color: rgba(255, 255, 255, .78) !important; font-family: var(--haze-font-interface) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.35 !important; text-decoration: none !important; transition: color .2s ease, transform .2s ease !important; } body.haze-v2 .haze-footer-section .footer-col li > a:not(#_hz):hover, body.haze-v2 .haze-footer-section .footer-col li > a:not(#_hz):focus-visible { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; transform: translateX(3px); } body.haze-v2 .haze-footer-section .footer-disclaimer { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 17px !important; align-items: start !important; margin: 0 0 28px !important; border: 1px solid rgba(179, 229, 230, .18) !important; border-radius: 16px !important; padding: 20px 22px !important; background: rgba(179, 229, 230, .055) !important; } body.haze-v2 .haze-footer-section .footer-disclaimer__badge { width: 48px !important; height: 48px !important; display: grid !important; place-items: center !important; border: 1px solid rgba(249, 163, 58, .55) !important; border-radius: 50% !important; background: rgba(249, 163, 58, .12) !important; color: var(--haze-brand-orange) !important; -webkit-text-fill-color: var(--haze-brand-orange) !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 800 !important; } body.haze-v2 .haze-footer-section .footer-disclaimer h2 { margin: 1px 0 6px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: var(--haze-font-interface) !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .075em !important; line-height: 1.3 !important; text-transform: uppercase !important; } body.haze-v2 .haze-footer-section .footer-disclaimer p { max-width: 1080px !important; margin: 0 !important; color: rgba(255, 255, 255, .68) !important; -webkit-text-fill-color: rgba(255, 255, 255, .68) !important; font-family: var(--haze-font-interface) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.65 !important; } body.haze-v2 .haze-footer-section .footer-bottom { gap: 24px !important; border-top: 1px solid rgba(179, 229, 230, .16) !important; padding-top: 25px !important; } body.haze-v2 .haze-footer-section .footer-bottom p { margin: 0 !important; color: rgba(255, 255, 255, .6) !important; -webkit-text-fill-color: rgba(255, 255, 255, .6) !important; font-size: 13px !important; } body.haze-v2 .haze-footer-section .footer-legal { flex-wrap: wrap !important; justify-content: flex-end !important; gap: 8px 22px !important; } body.haze-v2 .haze-footer-section .footer-legal a:not(#_hz) { min-height: 32px !important; display: inline-flex !important; align-items: center !important; color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: rgba(179, 229, 230, .34) !important; text-underline-offset: 4px !important; } body.haze-v2 .haze-footer-section .footer-legal a:not(#_hz):hover, body.haze-v2 .haze-footer-section .footer-legal a:not(#_hz):focus-visible { color: var(--haze-brand-cyan) !important; -webkit-text-fill-color: var(--haze-brand-cyan) !important; text-decoration-color: var(--haze-brand-cyan) !important; } body.haze-v2 .haze-footer-section :is(a, button):focus-visible { outline: 3px solid var(--haze-brand-cyan) !important; outline-offset: 3px !important; } @media (max-width: 989px) { body.haze-v2 .haze-footer-section .footer-trust { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.haze-v2 .haze-footer-section a.footer-trust__item:not(#_hz) { border-bottom: 1px solid rgba(179, 229, 230, .14) !important; padding: 18px !important; } body.haze-v2 .haze-footer-section a.footer-trust__item:nth-child(2n):not(#_hz) { border-right: 0 !important; } body.haze-v2 .haze-footer-section a.footer-trust__item:nth-last-child(-n+2):not(#_hz) { border-bottom: 0 !important; } body.haze-v2 .haze-footer-section .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.haze-v2 .haze-footer-section .footer-brand { grid-column: 1 / -1 !important; padding-bottom: 12px !important; } } @media (max-width: 599px) { body.haze-v2 .haze-footer-section .footer-trust { grid-template-columns: 1fr !important; padding-top: 18px !important; } body.haze-v2 .haze-footer-section a.footer-trust__item:not(#_hz), body.haze-v2 .haze-footer-section a.footer-trust__item:first-child:not(#_hz), body.haze-v2 .haze-footer-section a.footer-trust__item:last-child:not(#_hz), body.haze-v2 .haze-footer-section a.footer-trust__item:nth-last-child(-n+2):not(#_hz) { border-right: 0 !important; border-bottom: 1px solid rgba(179, 229, 230, .14) !important; padding: 16px 0 !important; } body.haze-v2 .haze-footer-section a.footer-trust__item:last-child:not(#_hz) { border-bottom: 0 !important; } body.haze-v2 .haze-footer-section .footer-grid { grid-template-columns: 1fr !important; gap: 0 !important; } body.haze-v2 .haze-footer-section .footer-brand { grid-column: auto !important; padding-bottom: 38px !important; } body.haze-v2 .haze-footer-section .footer-col { border-top: 1px solid rgba(179, 229, 230, .14) !important; padding: 24px 0 18px !important; } body.haze-v2 .haze-footer-section .footer-col__title { margin-top: 0 !important; } body.haze-v2 .haze-footer-section .footer-disclaimer { grid-template-columns: 1fr !important; padding: 18px !important; } body.haze-v2 .haze-footer-section .footer-disclaimer__badge { width: 44px !important; height: 44px !important; } body.haze-v2 .haze-footer-section .footer-bottom { align-items: flex-start !important; text-align: left !important; } body.haze-v2 .haze-footer-section .footer-legal { justify-content: flex-start !important; } } @media (prefers-reduced-motion: reduce) { body.haze-v2 .haze-footer-section .footer-col li > a:not(#_hz) { transition: none !important; } } /* ===== 3.17 bundled source: assets/haze-homepage-typography-v10.css ===== */ /* The Haze Connect — homepage typography unification v10 Major story headlines: Pressio Condensed Readable supporting copy and commerce: Industry Short packaging accents only: Pressio X-Compressed This late, homepage-scoped layer retires the legacy Georgia-based --v2-serif token without changing section content or behavior. */ body.haze-v2.template-index { --v2-serif: var(--haze-font-display); } /* Major headlines share one voice. The MainContent ID intentionally wins over old section-specific serif declarations while leaving the footer alone. */ body.haze-v2.template-index #MainContent h1:not(#_hz), body.haze-v2.template-index #MainContent h2:not(#_hz) { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none !important; font-weight: 500 !important; letter-spacing: -.018em !important; line-height: .98 !important; text-transform: none !important; text-wrap: balance; } /* Preserve the hero's stronger scale and tighter packaging-led rhythm. */ body.haze-v2.template-index #MainContent .hero-title:not(#_hz) { font-family: var(--haze-font-display) !important; font-weight: 500 !important; letter-spacing: -.016em !important; line-height: .9 !important; } body.haze-v2.template-index #MainContent .hero-title .highlight { font-family: inherit !important; font-style: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; } /* All section headlines now resolve to the same Pressio cut, including the legacy modules that previously retained Georgia through stronger selectors. */ body.haze-v2.template-index #MainContent :is( .shop-by-effect-header .section-title, .collections-header .section-title, .best-sellers-header .section-title, .haze-guide-v3__header .section-title, .brand-story-text h2, .how-it-works-header .section-title, .education-header .section-title, .faq-header .section-title, .newsletter-inner .section-title, .haze-v2-value__title, .haze-v2-diff__title, .haze-v2-proof__title, .haze-reviews__heading, .prl-title ):not(#_hz) { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none !important; font-weight: 500 !important; letter-spacing: -.018em !important; line-height: .98 !important; text-transform: none !important; } /* Supporting headings are deliberately not condensed. Industry provides faster scanning for cards, steps, FAQs and product decision points. */ body.haze-v2.template-index #MainContent h3:not(#_hz), body.haze-v2.template-index #MainContent h4:not(#_hz), body.haze-v2.template-index #MainContent :is( .hero-product-name, .collection-name, .effect-card h3, .haze-guide-v3__card h3, .step-card h3, .blog-card-content h3, .haze-v2-diff__card h3, .haze-v2-diff__item h3, .haze-reviews__title, .faq-question, .brand-value-text strong, .haze-v2-value__fact strong, .haze-v2-proof__receipt-top strong ):not(#_hz) { font-family: var(--haze-font-interface) !important; font-style: normal !important; font-synthesis: none !important; font-weight: 700 !important; letter-spacing: -.014em !important; line-height: 1.16 !important; text-transform: none !important; } /* Editorial and conversion copy uses the same readable face as navigation. */ body.haze-v2.template-index #MainContent :is( p, li, button, input, select, textarea, .btn, .product-desc, .review-author, .review-meta, .blog-card-date, .blog-card-link, .haze-v2-proof__row, .haze-v2-proof__foot, .prl-sub ) { font-family: var(--haze-font-interface) !important; } /* Pressio X-Compressed remains a recognizable packaging signature, but only for short labels where its narrow proportions stay deliberate and legible. */ body.haze-v2.template-index #MainContent :is( .section-label, .hero-tagline, .hero-product-badge, .product-category, .brand-story-text .caveat-line, .haze-guide-v3__eyebrow, .haze-guide-v3__moment, .haze-v2-value__eyebrow, .haze-v2-diff__eyebrow, .haze-v2-proof__eyebrow, .prl-kicker, .haze-merch-card__eyebrow, .haze-merch-card__badge ):not(#_hz) { font-family: var(--haze-font-packaging) !important; font-style: normal !important; font-synthesis: none !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: .11em !important; line-height: 1.12 !important; text-transform: uppercase !important; } /* Numbers and prices need clarity more than novelty. The large review score stays in the display family as a controlled brand moment. */ body.haze-v2.template-index #MainContent :is( .step-number, .haze-guide-v3__number, .haze-v2-value__fact strong, .haze-v2-proof__receipt-top strong, .hero-product-price, .product-price, .haze-merch-card__price strong ):not(#_hz) { font-family: var(--haze-font-interface) !important; font-style: normal !important; font-synthesis: none !important; } body.haze-v2.template-index #MainContent .haze-reviews__score-num:not(#_hz) { font-family: var(--haze-font-display) !important; font-style: normal !important; font-synthesis: none !important; font-weight: 500 !important; } /* Keep highlighted words in the same typeface as the sentence around them. */ body.haze-v2.template-index #MainContent :is( .section-title, .brand-story-text h2, .haze-v2-value__title, .haze-v2-diff__title, .haze-v2-proof__title ) :is(span, em, strong) { font-family: inherit !important; font-style: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; } @media (max-width: 749px) { body.haze-v2.template-index #MainContent h1:not(#_hz), body.haze-v2.template-index #MainContent h2:not(#_hz) { line-height: .96 !important; } body.haze-v2.template-index #MainContent .hero-title:not(#_hz) { line-height: .91 !important; } body.haze-v2.template-index #MainContent :is( .section-label, .hero-tagline, .brand-story-text .caveat-line, .haze-v2-value__eyebrow, .haze-v2-diff__eyebrow, .haze-v2-proof__eyebrow, .prl-kicker ):not(#_hz) { font-size: 15px !important; } }