/* ================================================================ QwikGlam — Services Page ✦ Mobile Master v4.0 DEFINITIVE ───────────────────────────────────────────────────────────────── v4.0 KEY CHANGE vs v3.0: All selectors use BODY-SCOPED maximum specificity to guarantee wins over every rule in the desktop CSS files. SPECIFICITY PATTERN: body.page-template-page-services .CLASS — 0,2,0 body:has(#qgHero) .CLASS — 0,2,0 Where desktop uses ".wrapper .CLASS" (0,2,0) we use: body.page-template-page-services .wrapper .CLASS — 0,3,0 REQUIRED: qg-services.css + qg-services-additions.css must be the @media-STRIPPED versions (all max-width ≤ 900px removed). The stripped files are delivered alongside this file. LOAD ORDER (functions.php — unchanged): 1. qg-global.css 2. qg-services.css (STRIPPED) 3. qg-services-additions.css (STRIPPED) 4. THIS FILE (always last) LITESPEED EXCLUDE (already configured): '/assets/css/qg-services-mobile-master.css' ================================================================ */ /* ================================================================ §0 DESIGN TOKENS ================================================================ */ @media (max-width: 768px) { body.page-template-page-services, body:has(#qgHero) { --qgm-bg: #FAF5F0; --qgm-white: #FFFFFF; --qgm-plum: #2A0E22; --qgm-rose: #D4547A; --qgm-rose-dk: #C05878; --qgm-gold: #C9A86C; --qgm-muted: #9A6080; --qgm-border: rgba(201,168,108,.15); --qgm-shadow: 0 2px 12px rgba(42,14,34,.07); } } /* ================================================================ §1 PAGE SCAFFOLD ================================================================ */ @media (max-width: 768px) { body.page-template-page-services, body:has(#qgHero) { background: #FAF5F0 !important; padding-top: 0 !important; overflow-x: hidden !important; font-family: "DM Sans", "Poppins", system-ui, sans-serif !important; -webkit-font-smoothing: antialiased !important; } body.page-template-page-services .wp-site-blocks, body.page-template-page-services main, body.page-template-page-services #page, body.page-template-page-services #content, body.page-template-page-services .wp-block-group, body.page-template-page-services .wp-block-post-content, body.page-template-page-services .entry-content, body.page-template-page-services .site-main, body:has(#qgHero) .wp-site-blocks, body:has(#qgHero) main, body:has(#qgHero) #page, body:has(#qgHero) #content { background: #FAF5F0 !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } body.page-template-page-services #qgServices, body.page-template-page-services .qg-services-wrapper, body:has(#qgHero) #qgServices, body:has(#qgHero) .qg-services-wrapper { background: #FAF5F0 !important; padding: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } body.page-template-page-services main, body.page-template-page-services #qgServices, body:has(#qgHero) main, body:has(#qgHero) #qgServices { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; } } /* ================================================================ §2 HEADER — Hide ================================================================ */ @media (max-width: 768px) { body.page-template-page-services #qgHeaderWrap, body.page-template-page-services .qg-header-wrap, body.page-template-page-services .qg-header, body.page-template-page-services .qg-ann, body:has(#qgHero) #qgHeaderWrap, body:has(#qgHero) .qg-header-wrap, body:has(#qgHero) .qg-header, body:has(#qgHero) .qg-ann { display: none !important; } } /* ================================================================ §3 HERO → NATIVE "SERVICES" TITLE BAR ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-hero, body:has(#qgHero) .qg-hero { min-height: 0 !important; height: auto !important; max-height: none !important; background: #FAF5F0 !important; background-image: none !important; padding: max(12px, env(safe-area-inset-top)) 16px 10px !important; border-bottom: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; place-items: unset !important; position: sticky !important; top: 0 !important; z-index: 901 !important; overflow: visible !important; isolation: auto !important; } body.page-template-page-services .qg-hero__video, body.page-template-page-services .qg-hero video, body.page-template-page-services .qg-hero__veil, body.page-template-page-services .qg-hero__particles, body.page-template-page-services .qg-hero__petals, body.page-template-page-services .qg-hero__overlay, body.page-template-page-services .qg-hero__ornament, body.page-template-page-services .qg-hero__urgency, body.page-template-page-services .qg-hero__proof, body.page-template-page-services .qg-hero__live-ticker, body.page-template-page-services .qg-scroll-cue, body.page-template-page-services .qg-hero__badge, body.page-template-page-services .qg-hero__subtitle, body.page-template-page-services .qg-hero__cta, body.page-template-page-services .qg-hero__cta-row, body.page-template-page-services .qg-hero__trust, body:has(#qgHero) .qg-hero__video, body:has(#qgHero) .qg-hero video, body:has(#qgHero) .qg-hero__veil, body:has(#qgHero) .qg-hero__particles, body:has(#qgHero) .qg-hero__petals, body:has(#qgHero) .qg-hero__overlay, body:has(#qgHero) .qg-hero__ornament, body:has(#qgHero) .qg-hero__urgency, body:has(#qgHero) .qg-hero__proof, body:has(#qgHero) .qg-hero__live-ticker, body:has(#qgHero) .qg-scroll-cue, body:has(#qgHero) .qg-hero__badge, body:has(#qgHero) .qg-hero__subtitle, body:has(#qgHero) .qg-hero__cta, body:has(#qgHero) .qg-hero__cta-row, body:has(#qgHero) .qg-hero__trust { display: none !important; height: 0 !important; overflow: hidden !important; } body.page-template-page-services .qg-hero::before, body.page-template-page-services .qg-hero::after, body:has(#qgHero) .qg-hero::before, body:has(#qgHero) .qg-hero::after { display: none !important; content: none !important; } body.page-template-page-services .qg-hero__content, body:has(#qgHero) .qg-hero__content { position: static !important; padding: 0 !important; margin: 0 !important; text-align: left !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; gap: 0 !important; z-index: auto !important; animation: none !important; transform: none !important; opacity: 1 !important; } body.page-template-page-services .qg-hero__title, body.page-template-page-services .qg-hero h1, body:has(#qgHero) .qg-hero__title, body:has(#qgHero) .qg-hero h1 { font-family: "Playfair Display", Georgia, serif !important; font-size: 2rem !important; font-weight: 800 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; text-shadow: none !important; line-height: 1.1 !important; margin: 0 !important; letter-spacing: -.02em !important; display: block !important; animation: none !important; transform: none !important; opacity: 1 !important; flex: 1 !important; } body.page-template-page-services .qg-hero__title em, body.page-template-page-services .qg-hero h1 em, body:has(#qgHero) .qg-hero__title em, body:has(#qgHero) .qg-hero h1 em { display: none !important; } body.page-template-page-services #qgViewToggle, body.page-template-page-services .qg-view-toggle, body:has(#qgHero) #qgViewToggle, body:has(#qgHero) .qg-view-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 14px !important; background: #ffffff !important; border: 1.5px solid rgba(212,84,122,.18) !important; cursor: pointer !important; box-shadow: 0 2px 12px rgba(42,14,34,.07) !important; flex-shrink: 0 !important; position: static !important; top: auto !important; right: auto !important; margin: 0 !important; } body.page-template-page-services #qgViewToggle svg, body:has(#qgHero) #qgViewToggle svg { width: 18px !important; height: 18px !important; stroke: #D4547A !important; fill: none !important; } body.page-template-page-services .qg-brand-partners, body:has(#qgHero) .qg-brand-partners { display: none !important; } } @media (max-width: 390px) { body.page-template-page-services .qg-hero__title, body:has(#qgHero) .qg-hero__title { font-size: 1.75rem !important; } } /* ================================================================ §4 FILTER HUB ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-filter-hub, body:has(#qgHero) .qg-filter-hub { position: sticky !important; top: 0 !important; z-index: 900 !important; background: rgba(250,245,240,.96) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; border-bottom: 1px solid rgba(212,84,122,.09) !important; box-shadow: 0 2px 10px rgba(42,14,34,.05) !important; padding: 0 !important; } body.page-template-page-services .qg-filter-row, body:has(#qgHero) .qg-filter-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; gap: 6px !important; padding: 5px 14px !important; background: transparent !important; -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%) !important; align-items: center !important; } body.page-template-page-services .qg-filter-row::-webkit-scrollbar, body:has(#qgHero) .qg-filter-row::-webkit-scrollbar { display: none !important; } body.page-template-page-services .qg-filter-row--cats, body:has(#qgHero) .qg-filter-row--cats { border-bottom: 1px solid rgba(212,84,122,.06) !important; } body.page-template-page-services .qg-filter-row-divider, body:has(#qgHero) .qg-filter-row-divider { display: none !important; } body.page-template-page-services .qg-occasion-label, body:has(#qgHero) .qg-occasion-label { display: none !important; } body.page-template-page-services .qg-category-btn, body.page-template-page-services .qg-occasion-btn, body:has(#qgHero) .qg-category-btn, body:has(#qgHero) .qg-occasion-btn { flex-shrink: 0 !important; scroll-snap-align: start !important; white-space: nowrap !important; height: 34px !important; min-height: 34px !important; padding: 0 14px !important; font-size: .78rem !important; font-family: "DM Sans", sans-serif !important; font-weight: 500 !important; border-radius: 999px !important; background: #ffffff !important; border: 1.5px solid rgba(42,14,34,.1) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; cursor: pointer !important; line-height: 1 !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; } body.page-template-page-services .qg-category-btn.active, body.page-template-page-services .qg-category-btn.is-active, body.page-template-page-services .qg-occasion-btn.active, body:has(#qgHero) .qg-category-btn.active, body:has(#qgHero) .qg-category-btn.is-active, body:has(#qgHero) .qg-occasion-btn.active { background: linear-gradient(135deg, #B03060, #D4547A) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(176,48,96,.28) !important; transform: none !important; } } /* ================================================================ §5 CONTROLS — 3-class specificity to beat additions CSS ================================================================ */ @media (max-width: 768px) { /* NUCLEAR: 3-class specificity beats any 2-class rule */ body.page-template-page-services .qg-services-wrapper .qg-controls, body.page-template-page-services #qgServices .qg-controls, body:has(#qgHero) .qg-services-wrapper .qg-controls, body:has(#qgHero) #qgServices .qg-controls { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 10px 14px 8px !important; background: #FAF5F0 !important; border-bottom: 1px solid rgba(212,84,122,.06) !important; flex-wrap: unset !important; align-items: unset !important; flex-direction: unset !important; flex: unset !important; /* Kill desktop nowrap/flex */ flex-wrap: unset !important; } body.page-template-page-services .qg-controls .qg-search-wrap, body:has(#qgHero) .qg-controls .qg-search-wrap { grid-column: 1 / -1 !important; order: 0 !important; position: relative !important; flex: unset !important; min-width: unset !important; max-width: unset !important; } body.page-template-page-services .qg-controls input[type="search"], body.page-template-page-services .qg-controls input[type="text"], body.page-template-page-services .qg-controls input, body:has(#qgHero) .qg-controls input[type="search"], body:has(#qgHero) .qg-controls input[type="text"], body:has(#qgHero) .qg-controls input { width: 100% !important; height: 46px !important; border-radius: 999px !important; background: #ffffff !important; border: 1.5px solid rgba(42,14,34,.1) !important; padding: 0 1rem 0 2.7rem !important; font-size: .88rem !important; font-family: "DM Sans", sans-serif !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; box-shadow: 0 2px 12px rgba(42,14,34,.07) !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; min-width: unset !important; max-width: unset !important; flex: unset !important; } body.page-template-page-services .qg-price-filter, body:has(#qgHero) .qg-price-filter { order: 1 !important; width: 100% !important; position: relative !important; display: block !important; flex-shrink: unset !important; } body.page-template-page-services .qg-price-btn, body:has(#qgHero) .qg-price-btn { width: 100% !important; height: 42px !important; border-radius: 14px !important; font-size: .82rem !important; font-weight: 600 !important; font-family: "DM Sans", sans-serif !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; background: #ffffff !important; border: 1.5px solid rgba(42,14,34,.1) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; cursor: pointer !important; box-shadow: 0 2px 12px rgba(42,14,34,.07) !important; padding: 0 12px !important; box-sizing: border-box !important; } body.page-template-page-services .qg-price-dropdown, body:has(#qgHero) .qg-price-dropdown { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; right: 0 !important; min-width: 0 !important; width: 100% !important; background: #ffffff !important; border: 1.5px solid rgba(201,168,108,.15) !important; border-radius: 16px !important; box-shadow: 0 8px 28px rgba(42,14,34,.14) !important; padding: 14px 14px 10px !important; z-index: 9500 !important; box-sizing: border-box !important; /* FIX: desktop CSS sets opacity:0 + pointer-events:none as default state. On mobile we use display:none / display:block via .is-open instead. Override the opacity-based pattern entirely. */ display: none !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition: none !important; } body.page-template-page-services .qg-price-dropdown.is-open, body:has(#qgHero) .qg-price-dropdown.is-open { display: block !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } body.page-template-page-services .qg-controls select, body.page-template-page-services .qg-sort-select, body:has(#qgHero) .qg-controls select, body:has(#qgHero) .qg-sort-select { order: 2 !important; width: 100% !important; height: 42px !important; border-radius: 14px !important; font-size: .82rem !important; font-weight: 600 !important; font-family: "DM Sans", sans-serif !important; background: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23D4547A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .8rem center !important; border: 1.5px solid rgba(42,14,34,.1) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; padding: 0 32px 0 12px !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer !important; box-shadow: 0 2px 12px rgba(42,14,34,.07) !important; box-sizing: border-box !important; min-width: unset !important; flex: unset !important; } /* My Bookings badge — 3-class specificity too */ body.page-template-page-services .qg-services-wrapper .qg-badge, body.page-template-page-services #qgServices .qg-badge, body.page-template-page-services .qg-controls .qg-badge, body.page-template-page-services #qgBadge, body:has(#qgHero) .qg-services-wrapper .qg-badge, body:has(#qgHero) #qgServices .qg-badge, body:has(#qgHero) .qg-controls .qg-badge, body:has(#qgHero) #qgBadge { order: 3 !important; grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 11px 16px !important; border-radius: 14px !important; background: linear-gradient(135deg, rgba(212,84,122,.06), rgba(201,168,108,.04)) !important; border: 1.5px solid rgba(212,84,122,.16) !important; font-size: .84rem !important; font-weight: 700 !important; font-family: "DM Sans", sans-serif !important; color: #B03060 !important; -webkit-text-fill-color: #B03060 !important; text-decoration: none !important; box-shadow: 0 2px 10px rgba(212,84,122,.07) !important; width: 100% !important; box-sizing: border-box !important; height: auto !important; align-self: unset !important; flex-shrink: unset !important; transform: none !important; min-width: unset !important; white-space: unset !important; } body.page-template-page-services .qg-badge:hover, body:has(#qgHero) .qg-badge:hover { transform: none !important; box-shadow: 0 2px 10px rgba(212,84,122,.07) !important; } body.page-template-page-services .qg-badge__count, body:has(#qgHero) .qg-badge__count { background: linear-gradient(135deg, #B03060, #D4547A) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: .72rem !important; font-weight: 800 !important; padding: 2px 7px !important; border-radius: 999px !important; min-width: 22px !important; text-align: center !important; height: auto !important; display: inline-block !important; box-shadow: none !important; place-items: unset !important; } body.page-template-page-services .qg-badge__label, body:has(#qgHero) .qg-badge__label { font-size: .84rem !important; font-weight: 700 !important; letter-spacing: 0 !important; color: #B03060 !important; -webkit-text-fill-color: #B03060 !important; } } /* ================================================================ §5B URGENCY + FIRST-BOOKING STRIP + PAYMENT TRUST ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-urgency-strip, body:has(#qgHero) .qg-urgency-strip { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; background: rgba(212,84,122,.04) !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; overflow-x: auto !important; scrollbar-width: none !important; flex-wrap: nowrap !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; } body.page-template-page-services .qg-urgency-strip::-webkit-scrollbar, body:has(#qgHero) .qg-urgency-strip::-webkit-scrollbar { display: none !important; } body.page-template-page-services .qg-urgency-dot, body:has(#qgHero) .qg-urgency-dot { width: 8px !important; height: 8px !important; min-width: 8px !important; border-radius: 50% !important; background: #22C55E !important; box-shadow: 0 0 0 3px rgba(34,197,94,.2) !important; display: inline-block !important; animation: qgmPulse 2s ease-in-out infinite !important; } @keyframes qgmPulse { 0%,100%{opacity:1} 50%{opacity:.55} } body.page-template-page-services .qg-urgency-text, body:has(#qgHero) .qg-urgency-text { font-family: "DM Sans", sans-serif !important; font-size: .76rem !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; white-space: nowrap !important; flex-shrink: 0 !important; } body.page-template-page-services .qg-urgency-badges, body:has(#qgHero) .qg-urgency-badges { display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; } body.page-template-page-services .qg-urgency-badge, body:has(#qgHero) .qg-urgency-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 3px 9px !important; border-radius: 999px !important; background: #ffffff !important; border: 1px solid rgba(42,14,34,.1) !important; font-family: "DM Sans", sans-serif !important; font-size: .7rem !important; font-weight: 600 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; white-space: nowrap !important; } body.page-template-page-services .qg-first-booking-strip, body:has(#qgHero) .qg-first-booking-strip { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 14px !important; background: rgba(212,84,122,.04) !important; border-bottom: 1px solid rgba(212,84,122,.1) !important; flex-wrap: nowrap !important; } body.page-template-page-services .qg-fbs-text, body:has(#qgHero) .qg-fbs-text { font-family: "DM Sans", sans-serif !important; font-size: .76rem !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; margin: 0 !important; flex: 1 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.page-template-page-services .qg-fbs-cta, body:has(#qgHero) .qg-fbs-cta { flex-shrink: 0 !important; padding: 6px 12px !important; border-radius: 999px !important; background: linear-gradient(135deg, #D4547A, #C05878) !important; border: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: .72rem !important; font-weight: 700 !important; font-family: "DM Sans", sans-serif !important; cursor: pointer !important; } body.page-template-page-services .qg-payment-trust, body:has(#qgHero) .qg-payment-trust { display: flex !important; align-items: center !important; gap: 6px !important; padding: 7px 14px !important; background: #FAF5F0 !important; border-bottom: 1px solid rgba(201,168,108,.1) !important; overflow-x: auto !important; scrollbar-width: none !important; white-space: nowrap !important; } body.page-template-page-services .qg-pt-method, body:has(#qgHero) .qg-pt-method { display: inline-block !important; padding: 2px 7px !important; border-radius: 5px !important; background: #ffffff !important; border: 1px solid rgba(42,14,34,.08) !important; font-size: .65rem !important; font-weight: 700 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; } } /* ================================================================ §5C SORT ROW + TRENDING NOW ================================================================ */ @media (max-width: 768px) { body.page-template-page-services #qgSortRow, body.page-template-page-services .qg-sort-row, body:has(#qgHero) #qgSortRow, body:has(#qgHero) .qg-sort-row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 14px 4px !important; background: #FAF5F0 !important; border-bottom: none !important; } body.page-template-page-services .qg-recently-viewed, body.page-template-page-services #qgTrendingRow, body:has(#qgHero) .qg-recently-viewed, body:has(#qgHero) #qgTrendingRow { display: block !important; padding: 10px 0 4px !important; background: #FAF5F0 !important; border-bottom: 1px solid rgba(201,168,108,.1) !important; } body.page-template-page-services .qg-rv-header, body:has(#qgHero) .qg-rv-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 14px 6px !important; } body.page-template-page-services .qg-rv-title, body:has(#qgHero) .qg-rv-title { font-family: "DM Sans", sans-serif !important; font-size: .78rem !important; font-weight: 700 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } body.page-template-page-services .qg-rv-chips, body:has(#qgHero) .qg-rv-chips { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; gap: 8px !important; padding: 0 14px 4px !important; scroll-snap-type: x mandatory !important; -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%) !important; } body.page-template-page-services .qg-rv-chips::-webkit-scrollbar, body:has(#qgHero) .qg-rv-chips::-webkit-scrollbar { display: none !important; } body.page-template-page-services .qg-rv-chip, body:has(#qgHero) .qg-rv-chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; height: 54px !important; padding: 0 12px 0 6px !important; border-radius: 14px !important; background: #ffffff !important; border: 1px solid rgba(201,168,108,.15) !important; box-shadow: 0 2px 12px rgba(42,14,34,.07) !important; cursor: pointer !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent !important; flex-direction: row !important; width: auto !important; scroll-snap-align: start !important; transform: none !important; } body.page-template-page-services .qg-rv-chip img, body:has(#qgHero) .qg-rv-chip img { width: 38px !important; height: 38px !important; border-radius: 9px !important; object-fit: cover !important; flex-shrink: 0 !important; display: block !important; } body.page-template-page-services .qg-rv-chip-name, body:has(#qgHero) .qg-rv-chip-name { font-family: "DM Sans", sans-serif !important; font-size: .74rem !important; font-weight: 600 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; white-space: nowrap !important; display: block !important; max-width: 120px !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: unset !important; text-align: left !important; padding: 0 !important; } body.page-template-page-services .qg-rv-chip-price, body:has(#qgHero) .qg-rv-chip-price { font-family: "DM Sans", sans-serif !important; font-size: .68rem !important; font-weight: 700 !important; color: #B03060 !important; -webkit-text-fill-color: #B03060 !important; display: block !important; text-align: left !important; padding: 0 !important; } } /* ================================================================ §6 SERVICE CARDS ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-services-grid, body.page-template-page-services #qgServicesGrid, body:has(#qgHero) .qg-services-grid, body:has(#qgHero) #qgServicesGrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 12px 12px calc(160px + env(safe-area-inset-bottom, 0px)) !important; background: #FAF5F0 !important; flex-direction: unset !important; width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } body.page-template-page-services .qg-ultra-card, body:has(#qgHero) .qg-ultra-card { display: flex !important; flex-direction: column !important; background: #ffffff !important; border-radius: 18px !important; border: 1px solid rgba(201,168,108,.15) !important; box-shadow: 0 2px 12px rgba(42,14,34,.07) !important; overflow: hidden !important; position: relative !important; cursor: pointer !important; margin: 0 !important; width: 100% !important; animation: none !important; transition: box-shadow .18s !important; -webkit-tap-highlight-color: transparent !important; } body.page-template-page-services .qg-ultra-card:hover, body:has(#qgHero) .qg-ultra-card:hover { transform: none !important; } body.page-template-page-services .qg-ultra-card::before, body.page-template-page-services .qg-ultra-card::after, body:has(#qgHero) .qg-ultra-card::before, body:has(#qgHero) .qg-ultra-card::after { display: none !important; } body.page-template-page-services .qg-ultra-media, body:has(#qgHero) .qg-ultra-media { position: relative !important; width: 100% !important; aspect-ratio: 3 / 4 !important; min-height: 140px !important; max-height: 200px !important; overflow: hidden !important; flex-shrink: 0 !important; background: rgba(250,200,216,.12) !important; border-radius: 0 !important; } body.page-template-page-services .qg-ultra-media img, body:has(#qgHero) .qg-ultra-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; display: block !important; border-radius: 0 !important; } body.page-template-page-services .qg-ultra-media::after, body:has(#qgHero) .qg-ultra-media::after { content: "" !important; display: block !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 40% !important; background: linear-gradient(to top, rgba(42,14,34,.25) 0%, transparent 100%) !important; pointer-events: none !important; z-index: 1 !important; } body.page-template-page-services .qg-ultra-duration, body:has(#qgHero) .qg-ultra-duration { position: absolute !important; bottom: 8px !important; right: 8px !important; z-index: 3 !important; background: rgba(0,0,0,.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: "DM Sans", sans-serif !important; font-size: .6rem !important; font-weight: 600 !important; padding: 3px 7px !important; border-radius: 999px !important; white-space: nowrap !important; border: none !important; } body.page-template-page-services .qg-ultra-offer, body:has(#qgHero) .qg-ultra-offer { position: absolute !important; bottom: 8px !important; left: 8px !important; z-index: 2 !important; margin-top: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 3px !important; } body.page-template-page-services .qg-ultra-offer span, body:has(#qgHero) .qg-ultra-offer span { background: rgba(176,48,96,.88) !important; backdrop-filter: blur(8px) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: "DM Sans", sans-serif !important; font-size: .62rem !important; font-weight: 700 !important; letter-spacing: .04em !important; padding: 3px 9px !important; border-radius: 999px !important; white-space: nowrap !important; max-width: calc(100% - 50px) !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.page-template-page-services .qg-card-wish-btn, body:has(#qgHero) .qg-card-wish-btn { position: absolute !important; top: 8px !important; right: 8px !important; z-index: 5 !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; background: rgba(255,255,255,.9) !important; backdrop-filter: blur(6px) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(42,14,34,.12) !important; } body.page-template-page-services .qg-card-wish-btn svg, body:has(#qgHero) .qg-card-wish-btn svg { width: 14px !important; height: 14px !important; stroke: rgba(42,14,34,.45) !important; fill: none !important; } body.page-template-page-services .qg-card-wish-btn.is-wished svg, body:has(#qgHero) .qg-card-wish-btn.is-wished svg { stroke: #D4547A !important; fill: #D4547A !important; } body.page-template-page-services .qg-ultra-body, body:has(#qgHero) .qg-ultra-body { padding: 10px 10px 12px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; flex: 1 !important; text-align: left !important; } body.page-template-page-services .qg-ultra-artist, body.page-template-page-services .qg-certified-row, body.page-template-page-services .qg-card-artist, body:has(#qgHero) .qg-ultra-artist, body:has(#qgHero) .qg-certified-row, body:has(#qgHero) .qg-card-artist { font-size: .6rem !important; margin-bottom: 4px !important; color: rgba(90,46,72,.6) !important; -webkit-text-fill-color: rgba(90,46,72,.6) !important; } body.page-template-page-services .qg-ultra-title, body:has(#qgHero) .qg-ultra-title { font-family: "Playfair Display", Georgia, serif !important; font-size: .88rem !important; font-weight: 700 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; line-height: 1.25 !important; margin: 0 0 4px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; background: none !important; -webkit-background-clip: unset !important; text-shadow: none !important; } body.page-template-page-services .qg-ultra-rating, body:has(#qgHero) .qg-ultra-rating { display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 3px !important; margin-bottom: 4px !important; } body.page-template-page-services .qg-ultra-stars, body:has(#qgHero) .qg-ultra-stars { font-size: .65rem !important; color: #C9A86C !important; } body.page-template-page-services .qg-ultra-rating-score, body:has(#qgHero) .qg-ultra-rating-score { font-size: .68rem !important; font-weight: 700 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; } body.page-template-page-services .qg-ultra-rating-count, body:has(#qgHero) .qg-ultra-rating-count { font-size: .62rem !important; color: #9A6080 !important; -webkit-text-fill-color: #9A6080 !important; } body.page-template-page-services .qg-ultra-desc, body:has(#qgHero) .qg-ultra-desc { font-size: .7rem !important; line-height: 1.4 !important; color: rgba(90,46,72,.65) !important; -webkit-text-fill-color: rgba(90,46,72,.65) !important; -webkit-line-clamp: 2 !important; margin-bottom: 4px !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; background: none !important; } body.page-template-page-services .qg-ultra-meta, body:has(#qgHero) .qg-ultra-meta { font-size: .82rem !important; font-weight: 700 !important; margin-bottom: 2px !important; text-align: left !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 3px !important; } body.page-template-page-services .qg-price-prefix, body.page-template-page-services .qg-from-label, body:has(#qgHero) .qg-price-prefix, body:has(#qgHero) .qg-from-label { font-size: .6rem !important; font-weight: 400 !important; color: rgba(90,46,72,.45) !important; -webkit-text-fill-color: rgba(90,46,72,.45) !important; margin-right: 0 !important; } body.page-template-page-services .qg-price-value, body:has(#qgHero) .qg-price-value { font-size: .92rem !important; font-weight: 800 !important; color: #B03060 !important; -webkit-text-fill-color: #B03060 !important; letter-spacing: -.02em !important; background: none !important; -webkit-background-clip: unset !important; } body.page-template-page-services .qg-ultra-dur-sep, body:has(#qgHero) .qg-ultra-dur-sep { font-size: .62rem !important; color: rgba(90,46,72,.4) !important; -webkit-text-fill-color: rgba(90,46,72,.4) !important; margin-left: 0 !important; } body.page-template-page-services .qg-points-badge, body:has(#qgHero) .qg-points-badge { font-size: .62rem !important; padding: 4px 8px !important; margin-top: 4px !important; border-radius: 7px !important; display: flex !important; align-items: center !important; gap: 4px !important; } body.page-template-page-services .qg-points-badge svg, body:has(#qgHero) .qg-points-badge svg { width: 11px !important; height: 11px !important; } body.page-template-page-services .qg-ultra-proof, body.page-template-page-services .qg-emi-tag, body.page-template-page-services .qg-salon-anchor, body.page-template-page-services .qg-ultra-artist-strip, body:has(#qgHero) .qg-ultra-proof, body:has(#qgHero) .qg-emi-tag, body:has(#qgHero) .qg-salon-anchor, body:has(#qgHero) .qg-ultra-artist-strip { display: none !important; } body.page-template-page-services .qg-ultra-cta, body:has(#qgHero) .qg-ultra-cta { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 34px !important; padding: 7px 10px !important; font-size: .72rem !important; font-weight: 700 !important; border-radius: 999px !important; background: linear-gradient(135deg, #D4547A, #C05878) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: none !important; border-color: transparent !important; cursor: pointer !important; box-shadow: 0 3px 12px rgba(192,88,120,.22) !important; margin-top: auto !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; } body.page-template-page-services .qg-ultra-cta::before, body.page-template-page-services .qg-ultra-cta::after, body:has(#qgHero) .qg-ultra-cta::before, body:has(#qgHero) .qg-ultra-cta::after { display: none !important; } body.page-template-page-services .qg-ultra-cta .label, body:has(#qgHero) .qg-ultra-cta .label { position: static !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } body.page-template-page-services .qg-ultra-cta:active, body:has(#qgHero) .qg-ultra-cta:active { transform: scale(.96) !important; } } @media (max-width: 390px) { body.page-template-page-services .qg-ultra-title, body:has(#qgHero) .qg-ultra-title { font-size: .8rem !important; } body.page-template-page-services .qg-ultra-cta, body:has(#qgHero) .qg-ultra-cta { font-size: .68rem !important; } body.page-template-page-services .qg-price-value, body:has(#qgHero) .qg-price-value { font-size: .84rem !important; } } /* ================================================================ §7 LIST VIEW ================================================================ */ @media (max-width: 768px) { body.page-template-page-services #qgServicesGrid.list-view, body:has(#qgHero) #qgServicesGrid.list-view { grid-template-columns: 1fr !important; gap: 10px !important; } body.page-template-page-services #qgServicesGrid.list-view .qg-ultra-card, body:has(#qgHero) #qgServicesGrid.list-view .qg-ultra-card { flex-direction: row !important; align-items: stretch !important; min-height: 120px !important; height: auto !important; } body.page-template-page-services #qgServicesGrid.list-view .qg-ultra-media, body:has(#qgHero) #qgServicesGrid.list-view .qg-ultra-media { width: 110px !important; min-width: 110px !important; max-width: 110px !important; height: auto !important; aspect-ratio: unset !important; min-height: unset !important; max-height: unset !important; flex-shrink: 0 !important; align-self: stretch !important; } body.page-template-page-services #qgServicesGrid.list-view .qg-ultra-body, body:has(#qgHero) #qgServicesGrid.list-view .qg-ultra-body { padding: 10px 12px 12px !important; flex: 1 !important; min-width: 0 !important; } body.page-template-page-services #qgServicesGrid.list-view .qg-ultra-cta, body:has(#qgHero) #qgServicesGrid.list-view .qg-ultra-cta { width: auto !important; padding: 8px 14px !important; font-size: .78rem !important; margin-top: 6px !important; } } /* ================================================================ §8 SKELETON CARDS ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-skeleton-card, body:has(#qgHero) .qg-skeleton-card { display: flex !important; flex-direction: column !important; border-radius: 18px !important; border: 1px solid rgba(201,168,108,.15) !important; background: #ffffff !important; overflow: hidden !important; min-height: 220px !important; } @keyframes qgmSkelShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } body.page-template-page-services .qg-skel-img, body:has(#qgHero) .qg-skel-img { width: 100% !important; flex: 1 !important; min-height: 140px !important; background: linear-gradient(90deg, rgba(250,200,216,.16) 25%, rgba(242,172,200,.28) 50%, rgba(250,200,216,.16) 75%) !important; background-size: 200% 100% !important; animation: qgmSkelShimmer 1.4s ease-in-out infinite !important; } } /* ================================================================ §9 CURATED COLLECTIONS — Horizontal scroll rail ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-collections, body:has(#qgHero) .qg-collections { padding: 16px 0 8px !important; background: #FAF5F0 !important; overflow: hidden !important; } body.page-template-page-services .qg-collections-header, body:has(#qgHero) .qg-collections-header { padding: 0 14px 10px !important; text-align: left !important; } body.page-template-page-services .qg-collections-title, body:has(#qgHero) .qg-collections-title { font-family: "Playfair Display", Georgia, serif !important; font-size: 1.4rem !important; font-weight: 800 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; margin: 0 0 2px !important; background: none !important; -webkit-background-clip: unset !important; } body.page-template-page-services .qg-collections-title em, body:has(#qgHero) .qg-collections-title em { color: #D4547A !important; -webkit-text-fill-color: #D4547A !important; background: none !important; -webkit-background-clip: unset !important; } body.page-template-page-services .qg-collections-scroll, body:has(#qgHero) .qg-collections-scroll { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; gap: 10px !important; padding: 4px 14px 10px !important; scroll-snap-type: x mandatory !important; -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%) !important; } body.page-template-page-services .qg-collections-scroll::-webkit-scrollbar, body:has(#qgHero) .qg-collections-scroll::-webkit-scrollbar { display: none !important; } body.page-template-page-services .qg-col-card, body:has(#qgHero) .qg-col-card { flex-shrink: 0 !important; width: 140px !important; height: 180px !important; border-radius: 18px !important; scroll-snap-align: start !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding: 12px !important; position: relative !important; text-decoration: none !important; cursor: pointer !important; } body.page-template-page-services .qg-col-icon, body:has(#qgHero) .qg-col-icon { display: none !important; } body.page-template-page-services .qg-col-title, body:has(#qgHero) .qg-col-title { font-family: "Playfair Display", Georgia, serif !important; font-size: .88rem !important; font-weight: 700 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; line-height: 1.2 !important; margin: 0 0 3px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-shadow: 0 1px 4px rgba(0,0,0,.3) !important; } body.page-template-page-services .qg-col-sub, body:has(#qgHero) .qg-col-sub { display: none !important; } body.page-template-page-services .qg-col-card--blush .qg-col-title, body:has(#qgHero) .qg-col-card--blush .qg-col-title { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; text-shadow: none !important; } } /* ================================================================ §10 HIDE DESKTOP SECTIONS ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-how-it-works, body.page-template-page-services .qg-transformation, body.page-template-page-services .qg-standard, body.page-template-page-services .qg-loyalty, body.page-template-page-services .qg-gift, body.page-template-page-services .qg-spotlight, body.page-template-page-services .qg-hygiene, body.page-template-page-services .qg-reels-experience, body.page-template-page-services .qg-testimonials, body.page-template-page-services .qg-city-coverage, body.page-template-page-services .qg-refer, body.page-template-page-services .qg-blog-teaser, body.page-template-page-services .qg-app-cta, body.page-template-page-services .qg-faq, body.page-template-page-services .qg-ugc, body.page-template-page-services .qg-artist-strip, body.page-template-page-services .qg-artist-spotlight, body:has(#qgHero) .qg-how-it-works, body:has(#qgHero) .qg-transformation, body:has(#qgHero) .qg-standard, body:has(#qgHero) .qg-loyalty, body:has(#qgHero) .qg-gift, body:has(#qgHero) .qg-spotlight, body:has(#qgHero) .qg-hygiene, body:has(#qgHero) .qg-reels-experience, body:has(#qgHero) .qg-testimonials, body:has(#qgHero) .qg-city-coverage, body:has(#qgHero) .qg-refer, body:has(#qgHero) .qg-blog-teaser, body:has(#qgHero) .qg-app-cta, body:has(#qgHero) .qg-faq, body:has(#qgHero) .qg-ugc, body:has(#qgHero) .qg-artist-strip, body:has(#qgHero) .qg-artist-spotlight { display: none !important; } } /* ================================================================ §11 CART FAB + TOAST ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-cart-fab, body.page-template-page-services #qgCartFab, body:has(#qgHero) .qg-cart-fab, body:has(#qgHero) #qgCartFab { position: fixed !important; bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; left: 14px !important; right: 14px !important; width: auto !important; height: auto !important; border-radius: 18px !important; background: linear-gradient(135deg, #2A0E22, #3B1F3A) !important; padding: 14px 18px !important; display: flex !important; align-items: center !important; gap: 10px !important; box-shadow: 0 8px 28px rgba(42,14,34,.42) !important; z-index: 9990 !important; text-decoration: none !important; border: none !important; cursor: pointer !important; } body.page-template-page-services .qg-cart-fab svg, body.page-template-page-services #qgCartFab svg, body:has(#qgHero) .qg-cart-fab svg, body:has(#qgHero) #qgCartFab svg { width: 20px !important; height: 20px !important; stroke: #fff !important; fill: none !important; flex-shrink: 0 !important; } body.page-template-page-services .qg-fab-count, body:has(#qgHero) .qg-fab-count { background: linear-gradient(135deg, #D4547A, #C05878) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: "DM Sans", sans-serif !important; font-size: .65rem !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 999px !important; min-width: 20px !important; text-align: center !important; position: static !important; order: 2 !important; } body.page-template-page-services .qg-toast, body:has(#qgHero) .qg-toast { left: 14px !important; right: 14px !important; bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 70px) !important; max-width: none !important; font-size: .84rem !important; z-index: 9993 !important; border-radius: 14px !important; } } /* ================================================================ §12 BOOKING MODAL — Bottom sheet + SVG Guard ───────────────────────────────────────────────────────────────── CRITICAL FIX: qg-bookings-additions.css (which contains the SVG size guard) is NOT loaded on the services page — it only loads on /my-bookings/. The booking modal (#qg2Modal) lives in page-services.php and is shown via JS. Without the guard, every SVG inside the modal renders at its natural viewBox size (often 300×150px or full-width). This causes the giant star ★, calendar 📅, checkmark ✓, shield, and cross icons seen in the screenshots. Fix: replicate the complete modal CSS here, scoped to mobile only. On desktop, qg-bookings-additions.css still applies via its own load. ================================================================ */ @media (max-width: 768px) { /* ── Bottom-sheet positioning ── */ .qg2-modal { align-items: flex-end !important; padding: 0 !important; z-index: 99000 !important; } .qg2-window { width: 100% !important; max-width: 100% !important; max-height: 94svh !important; max-height: 94vh !important; border-radius: 28px 28px 0 0 !important; margin: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; } .qg2-actions { flex-direction: column !important; gap: .65rem !important; } .qg2-actions .qg-btn { width: 100% !important; min-height: 52px !important; } /* ── GLOBAL SVG GUARD — root cause of giant icons ────────────── Any SVG inside .qg2-window with no explicit width/height in the element style will default to 300×150px (SVG spec) on Android Chrome WebView. The guard clamps every unsized SVG to 20px max. Individual exceptions are set below with higher specificity. ────────────────────────────────────────────────────────────────── */ .qg2-window svg { max-width: 20px !important; max-height: 20px !important; width: auto !important; height: auto !important; flex-shrink: 0 !important; display: inline-block !important; overflow: visible !important; } /* ── Explicit icon sizes per component ── */ /* Topbar close + wishlist: 16px */ .qg2-close-btn svg, .qg2-wishlist-btn svg { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; } /* Section labels (✓ What's Included, 📅 Choose Date, etc.): 14px */ .qg2-section-label svg { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; } /* QG Points earn star: 14px */ .qg2-points-earn svg { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; } /* Cancel policy shield: 14px */ .qg2-cancel-policy svg { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; } /* EMI card icon: 14px */ .qg2-emi svg { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; } /* Surge badge lightning bolt: 10px */ .qg-surge-badge svg, .qg-surge-badge--sm svg { width: 10px !important; height: 10px !important; max-width: 10px !important; max-height: 10px !important; } /* ── Service hero image: NOT an SVG — must NOT be constrained ── */ .qg2-window .qg2-service-img { width: 100% !important; max-width: 100% !important; max-height: none !important; height: auto !important; display: block !important; object-fit: cover !important; } /* ── What's Included list — checkmark bullets ───────────────── qg2-included-list li::before uses content:"✓" which also relies on qg-bookings-additions.css. Replicate it here. ────────────────────────────────────────────────────────────────── */ .qg2-included-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: .3rem !important; } .qg2-included-list li { font-size: .82rem !important; color: #5A2E48 !important; line-height: 1.5 !important; padding-left: 1.2rem !important; position: relative !important; } .qg2-included-list li::before { content: "✓" !important; position: absolute !important; left: 0 !important; color: #2ecc71 !important; font-size: .74rem !important; font-weight: 700 !important; } /* ── Date chips — ensure readable on cream background ── */ .qg2-date-chip { min-width: 70px !important; background: rgba(253,246,248,.8) !important; border: 1.5px solid rgba(212,84,122,.18) !important; } .qg2-date-chip.active { background: linear-gradient(135deg, rgba(176,48,96,.18), rgba(201,168,108,.14)) !important; border-color: rgba(212,84,122,.5) !important; color: #B03060 !important; } /* ── Time slots ── */ .qg2-time-slot { padding: .38rem .9rem !important; font-size: .78rem !important; font-weight: 600 !important; } .qg2-time-slot.active { background: linear-gradient(135deg, #B03060, #E07AA4) !important; border-color: transparent !important; color: #fff !important; } /* ── Drag handle ── */ .qg2-drag-handle { display: block !important; width: 40px !important; height: 4px !important; border-radius: 9999px !important; background: rgba(212,84,122,.22) !important; margin: 0 auto 1rem !important; flex-shrink: 0 !important; } } /* ================================================================ §13 EMPTY STATE ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-empty-state, body:has(#qgHero) .qg-empty-state { padding: 3rem 1.5rem !important; background: #FAF5F0 !important; text-align: center !important; grid-column: 1 / -1 !important; } } /* ================================================================ §14 FOOTER ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-footer, body.page-template-page-services footer#qgFooter, body:has(#qgHero) .qg-footer, body:has(#qgHero) footer#qgFooter { background: #FEF7F2 !important; color: #2A0E22 !important; } body.page-template-page-services .qg-footer__bottom, body:has(#qgHero) .qg-footer__bottom { background: #3B1F3A !important; } } /* ================================================================ §15 REDUCED MOTION ================================================================ */ @media (max-width: 768px) and (prefers-reduced-motion: reduce) { body.page-template-page-services .qg-ultra-card, body.page-template-page-services .qg-ultra-cta, body.page-template-page-services #qgCartFab, body:has(#qgHero) .qg-ultra-card, body:has(#qgHero) .qg-ultra-cta, body:has(#qgHero) #qgCartFab { transition: none !important; animation: none !important; } } /* ================================================================ §5D PRICE FILTER DROPDOWN — Missing mobile styles These selectors were absent in v4.0 causing the range input to render as a raw browser-default dark bar on Android. ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-price-label, body:has(#qgHero) .qg-price-label { display: block !important; font-size: .8rem !important; font-weight: 700 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; margin-bottom: 10px !important; font-family: "DM Sans", sans-serif !important; } /* Range slider — force rose accent; prevent controls input override */ body.page-template-page-services input[type="range"]#qgPriceRange, body:has(#qgHero) input[type="range"]#qgPriceRange { display: block !important; width: 100% !important; min-width: unset !important; max-width: 100% !important; height: 6px !important; min-height: unset !important; padding: 0 !important; margin: 8px 0 14px !important; border: none !important; border-radius: 3px !important; background: rgba(212,84,122,.15) !important; box-shadow: none !important; accent-color: #D4547A !important; cursor: pointer !important; -webkit-appearance: slider-horizontal !important; appearance: auto !important; flex: unset !important; order: unset !important; } body.page-template-page-services .qg-price-chips, body:has(#qgHero) .qg-price-chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 8px !important; } body.page-template-page-services .qg-price-chip, body:has(#qgHero) .qg-price-chip { flex: 1 1 auto !important; padding: 7px 10px !important; border-radius: 10px !important; font-size: .76rem !important; font-weight: 600 !important; font-family: "DM Sans", sans-serif !important; background: rgba(250,245,240,.9) !important; border: 1.5px solid rgba(212,84,122,.18) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; cursor: pointer !important; text-align: center !important; white-space: nowrap !important; line-height: 1 !important; } body.page-template-page-services .qg-price-chip.active, body:has(#qgHero) .qg-price-chip.active { background: linear-gradient(135deg, #B03060, #D4547A) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } } /* ================================================================ §16 NUCLEAR FALLBACK — body:has selector redundancy If body class is missing but #qgHero exists, this ensures all critical structural rules still apply via the :has() branch. ================================================================ */ @media (max-width: 768px) { /* Ensure the hero ALWAYS collapses on mobile regardless of body class */ body:has(#qgHero) .qg-hero { min-height: 0 !important; height: auto !important; max-height: none !important; background: #FAF5F0 !important; background-image: none !important; padding: max(12px, env(safe-area-inset-top)) 16px 10px !important; border-bottom: none !important; } /* Ensure the grid always uses 2-col layout */ body:has(#qgHero) .qg-services-grid, body:has(#qgHero) #qgServicesGrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 12px 12px calc(160px + env(safe-area-inset-bottom, 0px)) !important; background: #FAF5F0 !important; /* FIX: qg-services.js sets inline opacity:0 before jQuery .animate(). If animate fails (e.g. jQuery unavailable or interrupted), grid stays invisible. Force opacity:1 to guarantee visibility. The JS animation is cosmetic only — removing it here is safe. */ opacity: 1 !important; } /* FIX: JS also sets inline transform:translateY(12px) — reset that too */ body.page-template-page-services #qgServicesGrid, body:has(#qgHero) #qgServicesGrid { opacity: 1 !important; transform: none !important; } } /* ================================================================ §17 TARGETED FIXES — v4.1 patch Root-cause fixes identified from screenshot audit + file analysis. Added here (not in §5D) to preserve section numbering. ================================================================ */ @media (max-width: 768px) { /* FIX 1: .qg-sort-row count label invisible qg-services-additions.css has no .qg-sort-row styles for mobile. The sort row renders but text uses desktop colour on cream bg. */ body.page-template-page-services .qg-sort-row, body:has(#qgHero) .qg-sort-row { padding: 4px 14px 8px !important; background: #FAF5F0 !important; } body.page-template-page-services .qg-sort-count, body:has(#qgHero) .qg-sort-count { font-family: "DM Sans", sans-serif !important; font-size: .76rem !important; color: #9A6080 !important; -webkit-text-fill-color: #9A6080 !important; } /* FIX 2: .qg-ultra-media img — ensure image always visible. Some parent theme builds add lazy-load opacity:0 that is never removed if IntersectionObserver fails (e.g. in Chrome WebView). */ body.page-template-page-services .qg-ultra-media img, body:has(#qgHero) .qg-ultra-media img { opacity: 1 !important; visibility: visible !important; } /* FIX 3: .qg-price-filter must be position:relative so the absolute dropdown anchors to it, not the grid or viewport. Desktop CSS sets this correctly but some mobile resets clear it. */ body.page-template-page-services .qg-price-filter, body:has(#qgHero) .qg-price-filter { position: relative !important; } /* FIX 4: .qg-controls grid — Sort select was overlapping Price btn due to the grid auto-flow pushing them onto the same row. Explicit named areas prevent this. */ body.page-template-page-services .qg-services-wrapper .qg-controls, body.page-template-page-services #qgServices .qg-controls, body:has(#qgHero) .qg-services-wrapper .qg-controls, body:has(#qgHero) #qgServices .qg-controls { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto auto !important; } /* Search always full width on row 1 */ body.page-template-page-services .qg-controls .qg-search-wrap, body:has(#qgHero) .qg-controls .qg-search-wrap { grid-column: 1 / -1 !important; grid-row: 1 !important; } /* Price filter on row 2 left */ body.page-template-page-services .qg-price-filter, body:has(#qgHero) .qg-price-filter { grid-column: 1 !important; grid-row: 2 !important; } /* Sort select on row 2 right */ body.page-template-page-services .qg-controls select, body.page-template-page-services .qg-sort-select, body:has(#qgHero) .qg-controls select, body:has(#qgHero) .qg-sort-select { grid-column: 2 !important; grid-row: 2 !important; } /* My Bookings badge on row 3 full width */ body.page-template-page-services .qg-services-wrapper .qg-badge, body.page-template-page-services #qgServices .qg-badge, body.page-template-page-services #qgBadge, body:has(#qgHero) .qg-services-wrapper .qg-badge, body:has(#qgHero) #qgServices .qg-badge, body:has(#qgHero) #qgBadge { grid-column: 1 / -1 !important; grid-row: 3 !important; } /* Cart FAB stays outside grid flow — not a grid item */ body.page-template-page-services #qgCartFab, body:has(#qgHero) #qgCartFab { display: flex !important; /* already fixed in §11, ensure here too */ } /* FIX 5: qg-star colours — the JS renders ★ / ½ / ☆ spans with class qg-star--full / qg-star--half / qg-star--empty. Additions CSS v5.1 doesn't define colours for these; they inherit body text colour (#2A0E22) and appear dark purple instead of gold on mobile. */ body.page-template-page-services .qg-star--full, body.page-template-page-services .qg-star--half, body:has(#qgHero) .qg-star--full, body:has(#qgHero) .qg-star--half { color: #C9A86C !important; -webkit-text-fill-color: #C9A86C !important; } body.page-template-page-services .qg-star--empty, body:has(#qgHero) .qg-star--empty { color: rgba(201,168,108,.35) !important; -webkit-text-fill-color: rgba(201,168,108,.35) !important; } /* FIX 6: .qg-ultra-stars container — additions sets no font-size for the parent span on mobile, so inherited body size (1rem) makes stars huge. */ body.page-template-page-services .qg-ultra-stars, body:has(#qgHero) .qg-ultra-stars { font-size: .72rem !important; line-height: 1 !important; letter-spacing: .02em !important; } /* FIX 7: #qgPriceVal — init text reads "5000" in PHP template but currentMaxPrice=10000 in JS. After JS runs it corrects itself, but there's a flash of "₹5000" on page load. CSS can't fix this — it's fixed in page-services.php (value changed to "Any" to match JS). */ } /* ================================================================ §18 v4.4 LIGHT PREMIUM HERO + FINAL POLISH (14 May 2026) ───────────────────────────────────────────────────────────────── Addresses screenshot audit: A. Hero — restored but lighter & premium (less dark plum) B. Claim Offer / FIRST strip — compact one-line, smaller CTA C. Filter rows — clear visual distinction cats vs occasions D. Card wishlist heart — locked perfectly circular E. Pair-with cross-sell chips — premium styled F. Bottom nav — light cream with rose active accent G. Modal heart lock + back-button order swap from v4.3 H. Trust strip, brand partners, cart FAB, footer — kept All rules append-only; nothing above is modified. ================================================================ */ /* ── 18.A HERO — LIGHT PREMIUM CINEMATIC ───────────────────── */ @media (max-width: 768px) { /* RESTORE hero as a full cinematic section (un-do §3 collapse) */ body.page-template-page-services #qgHero.qg-hero, body:has(#qgHero) #qgHero.qg-hero { position: relative !important; top: auto !important; min-height: 88vh !important; height: auto !important; max-height: none !important; background: linear-gradient(180deg, #F8EDDF 0%, #F2DBC8 35%, #E8B8B4 70%, #D49AAA 100%) !important; padding: 0 !important; border-bottom: none !important; display: block !important; z-index: auto !important; overflow: hidden !important; isolation: isolate !important; margin: 0 !important; } body.page-template-page-services #qgHero .qg-hero__video, body.page-template-page-services #qgHero video, body.page-template-page-services #qgHero .qg-hero__veil, body.page-template-page-services #qgHero .qg-hero__particles, body.page-template-page-services #qgHero .qg-hero__badge, body.page-template-page-services #qgHero .qg-hero__subtitle, body.page-template-page-services #qgHero .qg-hero__cta, body:has(#qgHero) #qgHero .qg-hero__video, body:has(#qgHero) #qgHero video, body:has(#qgHero) #qgHero .qg-hero__veil, body:has(#qgHero) #qgHero .qg-hero__particles, body:has(#qgHero) #qgHero .qg-hero__badge, body:has(#qgHero) #qgHero .qg-hero__subtitle, body:has(#qgHero) #qgHero .qg-hero__cta { display: block !important; height: auto !important; overflow: visible !important; } /* Video — light tint, NOT darkened */ body.page-template-page-services #qgHero .qg-hero__video, body:has(#qgHero) #qgHero .qg-hero__video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; z-index: 0 !important; opacity: .75 !important; filter: saturate(1.1) brightness(1.05) contrast(1.02) !important; } /* Veil — LIGHT cream gradient, not dark */ body.page-template-page-services #qgHero .qg-hero__veil, body:has(#qgHero) #qgHero .qg-hero__veil { position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(180deg, rgba(254,247,242,.35) 0%, rgba(254,247,242,.08) 35%, rgba(254,247,242,.18) 65%, rgba(254,247,242,.55) 100%) !important; pointer-events: none !important; } body.page-template-page-services #qgHero .qg-hero__particles, body:has(#qgHero) #qgHero .qg-hero__particles { position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; opacity: .55 !important; mix-blend-mode: screen !important; } body.page-template-page-services #qgHero .qg-hero__content, body:has(#qgHero) #qgHero .qg-hero__content { position: relative !important; z-index: 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-height: 88vh !important; padding: calc(28px + env(safe-area-inset-top, 0px)) 22px 40px !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; gap: 0 !important; animation: none !important; transform: none !important; opacity: 1 !important; } /* Badge — premium gold pill, plum text for LIGHT bg */ body.page-template-page-services #qgHero .qg-hero__badge, body:has(#qgHero) #qgHero .qg-hero__badge { display: inline-flex !important; align-items: center !important; font-family: "DM Sans", sans-serif !important; font-size: .6rem !important; font-weight: 800 !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; background: rgba(255,255,255,.6) !important; border: 1px solid rgba(201,168,108,.42) !important; padding: 7px 18px !important; border-radius: 999px !important; margin: 0 0 20px !important; text-shadow: none !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; box-shadow: 0 2px 8px rgba(201,168,108,.12) !important; } /* H1 — dark plum on light bg + gradient em */ body.page-template-page-services #qgHero .qg-hero__title, body.page-template-page-services #qgHero h1, body:has(#qgHero) #qgHero .qg-hero__title, body:has(#qgHero) #qgHero h1 { font-family: "Playfair Display", Georgia, serif !important; font-size: clamp(2.3rem, 9vw, 3.1rem) !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.02em !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; text-shadow: 0 1px 18px rgba(255,255,255,.4) !important; margin: 0 0 16px !important; text-align: center !important; flex: unset !important; display: block !important; animation: none !important; transform: none !important; opacity: 1 !important; } body.page-template-page-services #qgHero .qg-hero__title em, body.page-template-page-services #qgHero h1 em, body:has(#qgHero) #qgHero .qg-hero__title em, body:has(#qgHero) #qgHero h1 em { display: block !important; font-style: italic !important; background: linear-gradient(95deg, #B8860B 0%, #D4AF6A 35%, #C9A86C 70%, #B8924A 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; margin-top: 2px !important; text-shadow: none !important; } /* Subtitle */ body.page-template-page-services #qgHero .qg-hero__subtitle, body:has(#qgHero) #qgHero .qg-hero__subtitle { font-family: "DM Sans", sans-serif !important; font-size: .92rem !important; line-height: 1.62 !important; font-style: italic !important; color: rgba(58,28,48,.78) !important; -webkit-text-fill-color: rgba(58,28,48,.78) !important; background: none !important; text-shadow: 0 1px 8px rgba(255,255,255,.35) !important; margin: 0 0 30px !important; max-width: 330px !important; padding: 0 !important; } body.page-template-page-services #qgHero .qg-hero__subtitle br, body:has(#qgHero) #qgHero .qg-hero__subtitle br { display: block !important; } /* CTA — premium gold pill */ body.page-template-page-services #qgHero .qg-hero__cta, body:has(#qgHero) #qgHero .qg-hero__cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 320px !important; min-height: 56px !important; padding: 0 26px !important; font-family: "DM Sans", sans-serif !important; font-size: .95rem !important; font-weight: 800 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; background: linear-gradient(135deg, #F0D898 0%, #D4AF6A 50%, #B8860B 100%) !important; border: none !important; border-radius: 999px !important; box-shadow: 0 10px 32px rgba(184,134,11,.42), 0 3px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.45) !important; cursor: pointer !important; text-decoration: none !important; height: auto !important; } body.page-template-page-services #qgHero .qg-hero__cta:active, body:has(#qgHero) #qgHero .qg-hero__cta:active { transform: scale(.97) !important; } body.page-template-page-services #qgHero .qg-scroll-cue, body.page-template-page-services #qgHero #qgViewToggle, body.page-template-page-services #qgHero .qg-view-toggle, body.page-template-page-services #qgHero .qg-hero__ornament, body:has(#qgHero) #qgHero .qg-scroll-cue, body:has(#qgHero) #qgHero #qgViewToggle, body:has(#qgHero) #qgHero .qg-view-toggle, body:has(#qgHero) #qgHero .qg-hero__ornament { display: none !important; } body.page-template-page-services #qgHero .qg-hero__urgency, body.page-template-page-services #qgHero .qg-hero__proof, body.page-template-page-services #qgHero .qg-hero__live-ticker, body.page-template-page-services #qgHero .qg-hero__trust, body:has(#qgHero) #qgHero .qg-hero__urgency, body:has(#qgHero) #qgHero .qg-hero__proof, body:has(#qgHero) #qgHero .qg-hero__live-ticker, body:has(#qgHero) #qgHero .qg-hero__trust { display: none !important; } } /* ── 18.B TRUST STAT MINI-STRIP — Premium 3-col ─────────────── */ @media (max-width: 768px) { body.page-template-page-services .qg-trust-strip, body:has(#qgHero) .qg-trust-strip { background: #FFFBFD !important; border-top: none !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; padding: 16px 14px 14px !important; margin: 0 !important; } body.page-template-page-services .qg-trust-strip-inner, body:has(#qgHero) .qg-trust-strip-inner { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 8px 6px !important; max-width: 100% !important; margin: 0 !important; align-items: stretch !important; justify-content: stretch !important; flex-wrap: unset !important; } body.page-template-page-services .qg-trust-strip-divider, body:has(#qgHero) .qg-trust-strip-divider { display: none !important; } body.page-template-page-services .qg-trust-stat, body:has(#qgHero) .qg-trust-stat { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 10px 6px !important; text-align: center !important; background: #ffffff !important; border: 1px solid rgba(201,168,108,.18) !important; border-radius: 12px !important; box-shadow: 0 1px 4px rgba(42,14,34,.04) !important; } body.page-template-page-services .qg-trust-strip-inner > .qg-trust-stat:nth-child(4), body:has(#qgHero) .qg-trust-strip-inner > .qg-trust-stat:nth-child(4) { grid-column: 1 / span 2 !important; flex-direction: row !important; gap: 8px !important; justify-content: center !important; } body.page-template-page-services .qg-trust-strip-inner > .qg-trust-stat:nth-child(5), body:has(#qgHero) .qg-trust-strip-inner > .qg-trust-stat:nth-child(5) { grid-column: 3 / span 1 !important; } body.page-template-page-services .qg-trust-stat-num, body:has(#qgHero) .qg-trust-stat-num { font-family: "Playfair Display", Georgia, serif !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1.05 !important; background: linear-gradient(135deg, #D4547A 0%, #C9A86C 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; letter-spacing: -.01em !important; } body.page-template-page-services .qg-trust-stat-label, body:has(#qgHero) .qg-trust-stat-label { font-family: "DM Sans", sans-serif !important; font-size: .55rem !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: rgba(90,46,72,.55) !important; -webkit-text-fill-color: rgba(90,46,72,.55) !important; line-height: 1.15 !important; } body.page-template-page-services .qg-trust-strip-inner > .qg-trust-stat:nth-child(4) .qg-trust-stat-num, body:has(#qgHero) .qg-trust-strip-inner > .qg-trust-stat:nth-child(4) .qg-trust-stat-num { font-size: .92rem !important; } } @media (max-width: 360px) { body.page-template-page-services .qg-trust-stat-num, body:has(#qgHero) .qg-trust-stat-num { font-size: .85rem !important; } body.page-template-page-services .qg-trust-stat-label, body:has(#qgHero) .qg-trust-stat-label { font-size: .5rem !important; } } /* ── 18.C BRAND PARTNERS — compact marquee ──────────────────── */ @media (max-width: 768px) { body.page-template-page-services .qg-brand-partners, body:has(#qgHero) .qg-brand-partners { display: block !important; background: #FAF5F0 !important; border-top: none !important; border-bottom: 1px solid rgba(212,84,122,.07) !important; padding: 10px 0 !important; overflow: hidden !important; position: relative !important; margin: 0 !important; } body.page-template-page-services .qg-brand-partners::before, body:has(#qgHero) .qg-brand-partners::before, body.page-template-page-services .qg-brand-partners::after, body:has(#qgHero) .qg-brand-partners::after { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 40px !important; z-index: 2 !important; pointer-events: none !important; display: block !important; } body.page-template-page-services .qg-brand-partners::before, body:has(#qgHero) .qg-brand-partners::before { left: 0 !important; background: linear-gradient(to right, #FAF5F0 0%, transparent 100%) !important; } body.page-template-page-services .qg-brand-partners::after, body:has(#qgHero) .qg-brand-partners::after { right: 0 !important; background: linear-gradient(to left, #FAF5F0 0%, transparent 100%) !important; } body.page-template-page-services .qg-brand-partners-inner, body:has(#qgHero) .qg-brand-partners-inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 5px !important; padding: 0 !important; max-width: 100% !important; } body.page-template-page-services .qg-bp-label, body:has(#qgHero) .qg-bp-label { display: block !important; text-align: center !important; font-family: "DM Sans", sans-serif !important; font-size: .56rem !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(90,46,72,.4) !important; -webkit-text-fill-color: rgba(90,46,72,.4) !important; padding: 0 14px !important; white-space: nowrap !important; flex-shrink: 0 !important; } body.page-template-page-services .qg-bp-track, body:has(#qgHero) .qg-bp-track { flex: unset !important; width: 100% !important; overflow: hidden !important; position: relative !important; } body.page-template-page-services .qg-bp-row, body:has(#qgHero) .qg-bp-row { display: flex !important; align-items: center !important; gap: 14px !important; width: max-content !important; animation: qgBpScroll 32s linear infinite !important; padding: 0 !important; } body.page-template-page-services .qg-bp-brand, body:has(#qgHero) .qg-bp-brand { font-family: "Playfair Display", Georgia, serif !important; font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .02em !important; color: rgba(42,14,34,.52) !important; -webkit-text-fill-color: rgba(42,14,34,.52) !important; white-space: nowrap !important; background: none !important; } body.page-template-page-services .qg-bp-dot, body:has(#qgHero) .qg-bp-dot { color: rgba(201,168,108,.55) !important; -webkit-text-fill-color: rgba(201,168,108,.55) !important; font-size: .56rem !important; flex-shrink: 0 !important; } } /* ── 18.D FILTER ROWS — DISTINCT CATS + OCCASIONS ──────────── */ @media (max-width: 768px) { body.page-template-page-services .qg-filter-hub, body:has(#qgHero) .qg-filter-hub { position: relative !important; top: auto !important; z-index: 50 !important; background: #FAF5F0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top: none !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } body.page-template-page-services .qg-filter-hub-inner, body:has(#qgHero) .qg-filter-hub-inner { padding: 0 !important; margin: 0 !important; max-width: 100% !important; display: block !important; } body.page-template-page-services .qg-filter-row, body:has(#qgHero) .qg-filter-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; gap: 6px !important; padding: 9px 14px !important; background: transparent !important; align-items: center !important; -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%) !important; } body.page-template-page-services .qg-filter-row::-webkit-scrollbar, body:has(#qgHero) .qg-filter-row::-webkit-scrollbar { display: none !important; } /* CATS row — primary white BG, larger pills */ body.page-template-page-services .qg-filter-row--cats, body:has(#qgHero) .qg-filter-row--cats { background: #ffffff !important; border-bottom: 1px solid rgba(212,84,122,.1) !important; padding: 10px 14px !important; } /* OCCASIONS row — subtle cream-rose tint, slightly smaller pills */ body.page-template-page-services .qg-filter-row--occasions, body:has(#qgHero) .qg-filter-row--occasions { background: linear-gradient(180deg, rgba(212,84,122,.04) 0%, rgba(212,84,122,.025) 100%) !important; padding: 8px 14px !important; border-bottom: 1px solid rgba(212,84,122,.06) !important; } body.page-template-page-services .qg-filter-row-divider, body:has(#qgHero) .qg-filter-row-divider { display: none !important; } /* Hide the occasion label on mobile — context is clear from icons */ body.page-template-page-services .qg-occasion-label, body:has(#qgHero) .qg-occasion-label { display: none !important; } /* Cats pills — primary larger */ body.page-template-page-services .qg-filter-row--cats .qg-category-btn, body:has(#qgHero) .qg-filter-row--cats .qg-category-btn { flex-shrink: 0 !important; scroll-snap-align: start !important; white-space: nowrap !important; height: 36px !important; min-height: 36px !important; padding: 0 14px !important; font-size: .78rem !important; font-family: "DM Sans", sans-serif !important; font-weight: 600 !important; border-radius: 999px !important; background: #FFFBF7 !important; border: 1.5px solid rgba(42,14,34,.1) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; line-height: 1 !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; } body.page-template-page-services .qg-filter-row--cats .qg-category-btn.active, body.page-template-page-services .qg-filter-row--cats .qg-category-btn.is-active, body:has(#qgHero) .qg-filter-row--cats .qg-category-btn.active, body:has(#qgHero) .qg-filter-row--cats .qg-category-btn.is-active { background: linear-gradient(135deg, #B03060, #D4547A) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700 !important; box-shadow: 0 3px 10px rgba(176,48,96,.24) !important; } /* Occasions pills — outlined, gold accent */ body.page-template-page-services .qg-filter-row--occasions .qg-occasion-btn, body:has(#qgHero) .qg-filter-row--occasions .qg-occasion-btn { flex-shrink: 0 !important; scroll-snap-align: start !important; white-space: nowrap !important; height: 32px !important; min-height: 32px !important; padding: 0 12px !important; font-size: .72rem !important; font-family: "DM Sans", sans-serif !important; font-weight: 600 !important; border-radius: 999px !important; background: #ffffff !important; border: 1px solid rgba(201,168,108,.3) !important; color: rgba(58,28,48,.78) !important; -webkit-text-fill-color: rgba(58,28,48,.78) !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; cursor: pointer !important; line-height: 1 !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; } body.page-template-page-services .qg-filter-row--occasions .qg-occasion-btn svg, body:has(#qgHero) .qg-filter-row--occasions .qg-occasion-btn svg { width: 12px !important; height: 12px !important; flex-shrink: 0 !important; stroke: currentColor !important; fill: none !important; } body.page-template-page-services .qg-filter-row--occasions .qg-occasion-btn.active, body.page-template-page-services .qg-filter-row--occasions .qg-occasion-btn.is-active, body:has(#qgHero) .qg-filter-row--occasions .qg-occasion-btn.active, body:has(#qgHero) .qg-filter-row--occasions .qg-occasion-btn.is-active { background: linear-gradient(135deg, #C9A86C, #B8924A) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700 !important; box-shadow: 0 3px 10px rgba(201,168,108,.32) !important; } } /* ── 18.E CLAIM OFFER STRIP — COMPACT ONE LINE ──────────────── */ @media (max-width: 768px) { body.page-template-page-services .qg-first-booking-strip, body:has(#qgHero) .qg-first-booking-strip { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 10px 14px !important; background: linear-gradient(135deg, rgba(212,84,122,.05) 0%, rgba(201,168,108,.05) 100%) !important; border-top: 1px solid rgba(212,84,122,.08) !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; overflow: hidden !important; position: relative !important; } body.page-template-page-services .qg-first-booking-strip::before, body:has(#qgHero) .qg-first-booking-strip::before { display: none !important; content: none !important; } body.page-template-page-services .qg-fbs-icon, body:has(#qgHero) .qg-fbs-icon { display: inline-flex !important; align-items: center !important; color: #C9A86C !important; -webkit-text-fill-color: #C9A86C !important; flex-shrink: 0 !important; background: rgba(201,168,108,.14) !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; justify-content: center !important; } body.page-template-page-services .qg-fbs-icon svg, body:has(#qgHero) .qg-fbs-icon svg { width: 13px !important; height: 13px !important; stroke: #C9A86C !important; fill: none !important; } body.page-template-page-services .qg-fbs-text, body:has(#qgHero) .qg-fbs-text { font-family: "DM Sans", sans-serif !important; font-size: .72rem !important; line-height: 1.3 !important; color: rgba(42,14,34,.85) !important; -webkit-text-fill-color: rgba(42,14,34,.85) !important; margin: 0 !important; flex: 1 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: left !important; background: none !important; } body.page-template-page-services .qg-fbs-text strong, body:has(#qgHero) .qg-fbs-text strong { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; font-weight: 800 !important; } body.page-template-page-services .qg-fbs-text em, body:has(#qgHero) .qg-fbs-text em { color: #B03060 !important; -webkit-text-fill-color: #B03060 !important; font-style: normal !important; font-weight: 800 !important; } body.page-template-page-services .qg-fbs-code, body:has(#qgHero) .qg-fbs-code { display: inline-block !important; background: rgba(201,168,108,.16) !important; border: 1px dashed rgba(201,168,108,.55) !important; color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; font-family: "DM Mono", "Courier New", monospace !important; font-size: .65rem !important; letter-spacing: .08em !important; padding: 2px 7px !important; border-radius: 5px !important; cursor: pointer !important; margin-left: 4px !important; font-weight: 700 !important; line-height: 1.4 !important; vertical-align: middle !important; flex-shrink: 0 !important; } body.page-template-page-services .qg-fbs-cta, body:has(#qgHero) .qg-fbs-cta { flex-shrink: 0 !important; padding: 6px 13px !important; height: 30px !important; min-height: 30px !important; border-radius: 999px !important; background: linear-gradient(135deg, #D4547A, #C05878) !important; border: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .02em !important; font-family: "DM Sans", sans-serif !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(212,84,122,.28) !important; white-space: nowrap !important; text-decoration: none !important; } body.page-template-page-services .qg-fbs-close, body:has(#qgHero) .qg-fbs-close { position: relative !important; top: auto !important; right: auto !important; transform: none !important; width: 22px !important; height: 22px !important; padding: 0 !important; background: rgba(42,14,34,.06) !important; border-radius: 50% !important; border: none !important; color: rgba(42,14,34,.5) !important; -webkit-text-fill-color: rgba(42,14,34,.5) !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } body.page-template-page-services .qg-fbs-close svg, body:has(#qgHero) .qg-fbs-close svg { width: 10px !important; height: 10px !important; stroke: currentColor !important; fill: none !important; } } @media (max-width: 360px) { body.page-template-page-services .qg-fbs-text, body:has(#qgHero) .qg-fbs-text { font-size: .66rem !important; } body.page-template-page-services .qg-fbs-code, body:has(#qgHero) .qg-fbs-code { font-size: .58rem !important; padding: 2px 6px !important; } body.page-template-page-services .qg-fbs-cta, body:has(#qgHero) .qg-fbs-cta { padding: 5px 10px !important; font-size: .64rem !important; height: 28px !important; } } /* ── 18.F SERVICE CARD — Wishlist heart LOCKED CIRCLE ──────── */ @media (max-width: 768px) { /* Re-affirm media is a positioning context */ body.page-template-page-services .qg-ultra-card .qg-ultra-media, body:has(#qgHero) .qg-ultra-card .qg-ultra-media { position: relative !important; display: block !important; overflow: hidden !important; } /* Heart button — locked perfect circle, cannot stretch */ body.page-template-page-services .qg-ultra-card .qg-ultra-media > .qg-card-wish-btn, body.page-template-page-services .qg-ultra-card .qg-card-wish-btn, body:has(#qgHero) .qg-ultra-card .qg-ultra-media > .qg-card-wish-btn, body:has(#qgHero) .qg-ultra-card .qg-card-wish-btn { position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.94) !important; border: none !important; backdrop-filter: blur(8px) saturate(160%) !important; -webkit-backdrop-filter: blur(8px) saturate(160%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 32px !important; flex-shrink: 0 !important; flex-grow: 0 !important; align-self: flex-start !important; cursor: pointer !important; opacity: 1 !important; z-index: 6 !important; box-shadow: 0 2px 8px rgba(42,14,34,.16), 0 1px 3px rgba(42,14,34,.08) !important; aspect-ratio: 1 / 1 !important; transform: none !important; transition: transform .2s ease !important; } body.page-template-page-services .qg-ultra-card .qg-card-wish-btn svg, body:has(#qgHero) .qg-ultra-card .qg-card-wish-btn svg { width: 15px !important; height: 15px !important; stroke: rgba(42,14,34,.55) !important; fill: none !important; flex-shrink: 0 !important; display: block !important; } body.page-template-page-services .qg-ultra-card .qg-card-wish-btn.is-wished, body:has(#qgHero) .qg-ultra-card .qg-card-wish-btn.is-wished { background: #fff !important; } body.page-template-page-services .qg-ultra-card .qg-card-wish-btn.is-wished svg, body:has(#qgHero) .qg-ultra-card .qg-card-wish-btn.is-wished svg { stroke: #D4547A !important; fill: #D4547A !important; } body.page-template-page-services .qg-ultra-card .qg-card-wish-btn:active, body:has(#qgHero) .qg-ultra-card .qg-card-wish-btn:active { transform: scale(.92) !important; } /* Duration pill — same as v4.3 */ body.page-template-page-services .qg-ultra-card .qg-ultra-media .qg-ultra-duration, body:has(#qgHero) .qg-ultra-card .qg-ultra-media .qg-ultra-duration { position: absolute !important; bottom: 8px !important; right: 8px !important; left: auto !important; top: auto !important; width: auto !important; max-width: max-content !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 3px 8px !important; font-family: "DM Sans", sans-serif !important; font-size: .56rem !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .03em !important; background: rgba(0,0,0,.55) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: none !important; border-radius: 999px !important; white-space: nowrap !important; box-shadow: 0 1px 4px rgba(0,0,0,.18) !important; } /* "+ add-ons available" / "All-inclusive price" caption */ body.page-template-page-services .qg-price-from-tag, body.page-template-page-services .qg-price-fixed-tag, body:has(#qgHero) .qg-price-from-tag, body:has(#qgHero) .qg-price-fixed-tag { display: block !important; margin: 1px 0 0 !important; font-family: "DM Sans", sans-serif !important; font-size: .56rem !important; font-weight: 600 !important; letter-spacing: .03em !important; line-height: 1.2 !important; color: rgba(90,46,72,.5) !important; -webkit-text-fill-color: rgba(90,46,72,.5) !important; background: none !important; border: none !important; padding: 0 !important; text-transform: none !important; } body.page-template-page-services .qg-price-fixed-tag, body:has(#qgHero) .qg-price-fixed-tag { color: rgba(201,168,108,.85) !important; -webkit-text-fill-color: rgba(201,168,108,.85) !important; font-weight: 700 !important; } } /* ── 18.G CART FAB — Compact right pill ─────────────────────── */ @media (max-width: 768px) { body.page-template-page-services .qg-cart-fab, body.page-template-page-services #qgCartFab, body:has(#qgHero) .qg-cart-fab, body:has(#qgHero) #qgCartFab { position: fixed !important; bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; left: auto !important; width: auto !important; height: auto !important; min-width: 0 !important; max-width: max-content !important; border-radius: 999px !important; background: linear-gradient(135deg, #2A0E22 0%, #3B1F3A 100%) !important; padding: 11px 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 6px 22px rgba(42,14,34,.42), 0 0 0 1.5px rgba(201,168,108,.35) inset !important; z-index: 9970 !important; text-decoration: none !important; border: none !important; cursor: pointer !important; font-family: "DM Sans", sans-serif !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: .76rem !important; font-weight: 700 !important; letter-spacing: .02em !important; } body.page-template-page-services .qg-cart-fab svg, body.page-template-page-services #qgCartFab svg, body:has(#qgHero) .qg-cart-fab svg, body:has(#qgHero) #qgCartFab svg { width: 18px !important; height: 18px !important; stroke: #fff !important; fill: none !important; flex-shrink: 0 !important; } body.page-template-page-services .qg-cart-fab::after, body.page-template-page-services #qgCartFab::after, body:has(#qgHero) .qg-cart-fab::after, body:has(#qgHero) #qgCartFab::after { content: "Cart" !important; order: 2 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: "DM Sans", sans-serif !important; font-size: .76rem !important; font-weight: 700 !important; letter-spacing: .02em !important; line-height: 1 !important; display: inline-block !important; } body.page-template-page-services .qg-fab-count, body:has(#qgHero) .qg-fab-count { background: linear-gradient(135deg, #D4547A, #C05878) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: "DM Sans", sans-serif !important; font-size: .62rem !important; font-weight: 800 !important; padding: 1px 6px !important; border-radius: 999px !important; min-width: 17px !important; height: 17px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; position: static !important; order: 3 !important; line-height: 1 !important; box-shadow: 0 1px 4px rgba(192,88,120,.4) !important; } body.page-template-page-services .qg-cart-fab:active, body.page-template-page-services #qgCartFab:active, body:has(#qgHero) .qg-cart-fab:active, body:has(#qgHero) #qgCartFab:active { transform: scale(.96) !important; } body.page-template-page-services .qg-toast, body:has(#qgHero) .qg-toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px) + 56px) !important; } body.page-template-page-services .qg-concierge, body:has(#qgHero) .qg-concierge { bottom: calc(78px + env(safe-area-inset-bottom, 0px) + 58px) !important; right: 14px !important; } } /* ── 18.H qg2 DETAIL MODAL — Premium bottom sheet ──────────── */ @media (max-width: 768px) { body.page-template-page-services .qg2-modal, body:has(#qgHero) .qg2-modal { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; } body.page-template-page-services .qg2-backdrop, body:has(#qgHero) .qg2-backdrop { background: rgba(42,14,34,.5) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } body.page-template-page-services .qg2-modal .qg2-window, body:has(#qgHero) .qg2-modal .qg2-window { width: 100% !important; max-width: 100% !important; height: 94dvh !important; max-height: 94dvh !important; border-radius: 24px 24px 0 0 !important; border: none !important; border-top: 1px solid rgba(212,84,122,.16) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 0 calc(120px + env(safe-area-inset-bottom, 0px)) !important; margin: 0 !important; box-shadow: 0 -8px 40px rgba(42,14,34,.32), 0 -2px 10px rgba(42,14,34,.18) !important; position: relative !important; } body.page-template-page-services .qg2-window .qg2-drag-handle, body:has(#qgHero) .qg2-window .qg2-drag-handle { display: block !important; width: 40px !important; height: 4px !important; border-radius: 999px !important; background: rgba(42,14,34,.18) !important; position: sticky !important; top: 8px !important; margin: 8px auto 0 !important; z-index: 10 !important; flex-shrink: 0 !important; } /* Topbar — float above the image with X (left) + heart (right) as circles */ body.page-template-page-services .qg2-window .qg2-modal-topbar, body:has(#qgHero) .qg2-window .qg2-modal-topbar { position: absolute !important; top: calc(16px + env(safe-area-inset-top, 0px)) !important; left: 0 !important; right: 0 !important; width: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 0 14px !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 12 !important; border: none !important; box-shadow: none !important; height: auto !important; } /* Modal X + heart — 40px perfect circles */ body.page-template-page-services .qg2-window .qg2-close-btn, body.page-template-page-services .qg2-window .qg2-wishlist-btn, body:has(#qgHero) .qg2-window .qg2-close-btn, body:has(#qgHero) .qg2-window .qg2-wishlist-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.92) !important; border: 1px solid rgba(255,255,255,.6) !important; box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1) !important; color: #2A0E22 !important; flex-shrink: 0 !important; flex-grow: 0 !important; align-self: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; backdrop-filter: blur(8px) saturate(150%) !important; -webkit-backdrop-filter: blur(8px) saturate(150%) !important; aspect-ratio: 1 / 1 !important; } body.page-template-page-services .qg2-window .qg2-close-btn svg, body.page-template-page-services .qg2-window .qg2-wishlist-btn svg, body:has(#qgHero) .qg2-window .qg2-close-btn svg, body:has(#qgHero) .qg2-window .qg2-wishlist-btn svg { width: 16px !important; height: 16px !important; stroke: #2A0E22 !important; fill: none !important; flex-shrink: 0 !important; } body.page-template-page-services .qg2-window .qg2-wishlist-btn.is-wished, body:has(#qgHero) .qg2-window .qg2-wishlist-btn.is-wished { background: rgba(212,84,122,.95) !important; border-color: rgba(212,84,122,1) !important; } body.page-template-page-services .qg2-window .qg2-wishlist-btn.is-wished svg, body:has(#qgHero) .qg2-window .qg2-wishlist-btn.is-wished svg { stroke: #fff !important; fill: #fff !important; } body.page-template-page-services .qg2-window .qg2-service-img, body:has(#qgHero) .qg2-window .qg2-service-img { width: 100% !important; height: 280px !important; object-fit: cover !important; object-position: center !important; display: block !important; margin: 0 !important; padding: 0 !important; border-radius: 24px 24px 0 0 !important; } body.page-template-page-services .qg2-window::before, body:has(#qgHero) .qg2-window::before { display: none !important; content: none !important; } body.page-template-page-services .qg2-window .qg2-avail-row, body:has(#qgHero) .qg2-window .qg2-avail-row { display: flex !important; align-items: center !important; gap: 8px !important; padding: 12px 18px !important; margin: 0 !important; font-size: .82rem !important; font-weight: 600 !important; font-family: "DM Sans", sans-serif !important; color: #2A6040 !important; -webkit-text-fill-color: #2A6040 !important; background: linear-gradient(180deg, rgba(40,200,114,.08) 0%, rgba(40,200,114,.04) 100%) !important; border-bottom: 1px solid rgba(40,200,114,.12) !important; } body.page-template-page-services .qg2-window .qg2-avail-dot, body:has(#qgHero) .qg2-window .qg2-avail-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #28C872 !important; box-shadow: 0 0 0 3px rgba(40,200,114,.18) !important; flex-shrink: 0 !important; } body.page-template-page-services .qg2-window .qg2-service-title, body:has(#qgHero) .qg2-window .qg2-service-title { font-family: "Playfair Display", Georgia, serif !important; font-size: 1.55rem !important; font-weight: 800 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; padding: 18px 18px 4px !important; margin: 0 !important; line-height: 1.18 !important; letter-spacing: -.015em !important; } body.page-template-page-services .qg2-window .qg2-service-desc, body:has(#qgHero) .qg2-window .qg2-service-desc { font-family: "DM Sans", sans-serif !important; font-size: .86rem !important; line-height: 1.6 !important; color: rgba(90,46,72,.72) !important; -webkit-text-fill-color: rgba(90,46,72,.72) !important; padding: 0 18px 12px !important; margin: 0 !important; } body.page-template-page-services .qg2-window .qg2-service-price-row, body:has(#qgHero) .qg2-window .qg2-service-price-row { padding: 0 18px 14px !important; display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; } body.page-template-page-services .qg2-window .qg2-service-price, body:has(#qgHero) .qg2-window .qg2-service-price { font-family: "Playfair Display", Georgia, serif !important; font-size: 1.25rem !important; font-weight: 800 !important; background: linear-gradient(135deg, #C9A86C, #D4547A) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } body.page-template-page-services .qg2-window .qg2-price-type, body:has(#qgHero) .qg2-window .qg2-price-type { font-size: .68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: rgba(201,168,108,.85) !important; -webkit-text-fill-color: rgba(201,168,108,.85) !important; } body.page-template-page-services .qg2-window .qg2-points-earn, body:has(#qgHero) .qg2-window .qg2-points-earn { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 18px 14px !important; padding: 10px 14px !important; background: linear-gradient(135deg, rgba(232,201,122,.16) 0%, rgba(212,175,106,.1) 100%) !important; border: 1px solid rgba(201,168,108,.28) !important; border-radius: 12px !important; font-family: "DM Sans", sans-serif !important; font-size: .8rem !important; color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; } body.page-template-page-services .qg2-window .qg2-points-earn svg, body:has(#qgHero) .qg2-window .qg2-points-earn svg { width: 16px !important; height: 16px !important; stroke: #C9A86C !important; fill: none !important; flex-shrink: 0 !important; } body.page-template-page-services .qg2-window .qg2-points-earn strong, body:has(#qgHero) .qg2-window .qg2-points-earn strong { color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; font-weight: 800 !important; } body.page-template-page-services .qg2-window .qg2-included, body:has(#qgHero) .qg2-window .qg2-included { padding: 16px 18px !important; margin: 0 !important; border-top: 1px solid rgba(212,84,122,.08) !important; } body.page-template-page-services .qg2-window .qg2-section-label, body:has(#qgHero) .qg2-window .qg2-section-label { display: flex !important; align-items: center !important; gap: 8px !important; font-family: "DM Sans", sans-serif !important; font-size: .8rem !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; margin: 0 0 12px !important; } body.page-template-page-services .qg2-window .qg2-section-label svg, body:has(#qgHero) .qg2-window .qg2-section-label svg { width: 16px !important; height: 16px !important; stroke: #D4547A !important; fill: none !important; flex-shrink: 0 !important; } body.page-template-page-services .qg2-window .qg2-included-list, body:has(#qgHero) .qg2-window .qg2-included-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; gap: 6px !important; } body.page-template-page-services .qg2-window .qg2-included-list li, body:has(#qgHero) .qg2-window .qg2-included-list li { font-family: "DM Sans", sans-serif !important; font-size: .85rem !important; color: rgba(90,46,72,.78) !important; -webkit-text-fill-color: rgba(90,46,72,.78) !important; padding-left: 22px !important; position: relative !important; line-height: 1.5 !important; } body.page-template-page-services .qg2-window .qg2-included-list li::before, body:has(#qgHero) .qg2-window .qg2-included-list li::before { content: "✓" !important; position: absolute !important; left: 0 !important; top: 0 !important; color: #28C872 !important; -webkit-text-fill-color: #28C872 !important; font-weight: 800 !important; font-size: .88rem !important; } body.page-template-page-services .qg2-window .qg2-datepick, body:has(#qgHero) .qg2-window .qg2-datepick { padding: 16px 18px !important; margin: 0 !important; border-top: 1px solid rgba(212,84,122,.08) !important; } body.page-template-page-services .qg2-window .qg2-date-chips, body:has(#qgHero) .qg2-window .qg2-date-chips { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin: 0 0 14px !important; } body.page-template-page-services .qg2-window .qg2-date-chip, body:has(#qgHero) .qg2-window .qg2-date-chip { padding: 10px 8px !important; font-family: "DM Sans", sans-serif !important; font-size: .8rem !important; font-weight: 600 !important; border-radius: 12px !important; background: #FFFBFD !important; border: 1.5px solid rgba(212,84,122,.14) !important; color: #5A2E48 !important; -webkit-text-fill-color: #5A2E48 !important; text-align: center !important; cursor: pointer !important; white-space: nowrap !important; line-height: 1.2 !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.page-template-page-services .qg2-window .qg2-date-chip.active, body.page-template-page-services .qg2-window .qg2-date-chip.is-selected, body:has(#qgHero) .qg2-window .qg2-date-chip.active, body:has(#qgHero) .qg2-window .qg2-date-chip.is-selected { background: linear-gradient(135deg, #B03060, #D4547A) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(176,48,96,.28) !important; } body.page-template-page-services .qg2-window .qg2-date-chip:disabled, body.page-template-page-services .qg2-window .qg2-date-chip[disabled], body:has(#qgHero) .qg2-window .qg2-date-chip:disabled, body:has(#qgHero) .qg2-window .qg2-date-chip[disabled] { background: rgba(240,230,235,.4) !important; opacity: .5 !important; color: rgba(90,46,72,.4) !important; -webkit-text-fill-color: rgba(90,46,72,.4) !important; } body.page-template-page-services .qg2-window .qg2-time-slots, body:has(#qgHero) .qg2-window .qg2-time-slots { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin: 8px 0 0 !important; } body.page-template-page-services .qg2-window .qg2-time-slot, body:has(#qgHero) .qg2-window .qg2-time-slot { padding: 10px 8px !important; font-family: "DM Sans", sans-serif !important; font-size: .78rem !important; font-weight: 600 !important; border-radius: 10px !important; background: #FFFBFD !important; border: 1.5px solid rgba(212,84,122,.14) !important; color: #5A2E48 !important; -webkit-text-fill-color: #5A2E48 !important; text-align: center !important; cursor: pointer !important; white-space: nowrap !important; min-height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.page-template-page-services .qg2-window .qg2-time-slot.active, body.page-template-page-services .qg2-window .qg2-time-slot.is-selected, body:has(#qgHero) .qg2-window .qg2-time-slot.active, body:has(#qgHero) .qg2-window .qg2-time-slot.is-selected { background: linear-gradient(135deg, #B03060, #D4547A) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700 !important; box-shadow: 0 3px 10px rgba(176,48,96,.24) !important; } body.page-template-page-services .qg2-window .qg2-time-slot:disabled, body.page-template-page-services .qg2-window .qg2-time-slot.is-unavailable, body:has(#qgHero) .qg2-window .qg2-time-slot:disabled, body:has(#qgHero) .qg2-window .qg2-time-slot.is-unavailable { background: rgba(240,230,235,.5) !important; opacity: .45 !important; color: rgba(90,46,72,.4) !important; -webkit-text-fill-color: rgba(90,46,72,.4) !important; pointer-events: none !important; } body.page-template-page-services .qg2-window .qg2-addons-section, body:has(#qgHero) .qg2-window .qg2-addons-section { padding: 16px 18px !important; margin: 0 !important; border-top: 1px solid rgba(212,84,122,.08) !important; } body.page-template-page-services .qg2-window .qg2-addons, body:has(#qgHero) .qg2-window .qg2-addons { background: linear-gradient(180deg, #FFFBFD 0%, #FDF6F8 100%) !important; border: 1px solid rgba(212,84,122,.12) !important; border-radius: 16px !important; padding: 4px 14px !important; margin: 0 !important; box-shadow: 0 1px 4px rgba(42,14,34,.03) !important; } body.page-template-page-services .qg2-window .qg2-addon, body:has(#qgHero) .qg2-window .qg2-addon { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 0 !important; font-family: "DM Sans", sans-serif !important; font-size: .88rem !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; border-bottom: 1px solid rgba(212,84,122,.08) !important; cursor: pointer !important; } body.page-template-page-services .qg2-window .qg2-addon:last-child, body:has(#qgHero) .qg2-window .qg2-addon:last-child { border-bottom: none !important; } body.page-template-page-services .qg2-window .qg2-addon input[type="checkbox"], body:has(#qgHero) .qg2-window .qg2-addon input[type="checkbox"] { width: 20px !important; height: 20px !important; accent-color: #D4547A !important; cursor: pointer !important; flex-shrink: 0 !important; border-radius: 6px !important; margin: 0 !important; } body.page-template-page-services .qg2-window .qg2-addon-price, body:has(#qgHero) .qg2-window .qg2-addon-price { margin-left: auto !important; font-size: .85rem !important; color: #C9A86C !important; -webkit-text-fill-color: #C9A86C !important; font-weight: 800 !important; white-space: nowrap !important; font-family: "DM Sans", sans-serif !important; } body.page-template-page-services .qg2-window .qg2-total-row, body:has(#qgHero) .qg2-window .qg2-total-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 18px 14px !important; padding: 14px 16px !important; background: linear-gradient(135deg, rgba(176,48,96,.06), rgba(212,84,122,.08)) !important; border: 1px solid rgba(212,84,122,.16) !important; border-radius: 14px !important; } body.page-template-page-services .qg2-window .qg2-total-label, body:has(#qgHero) .qg2-window .qg2-total-label { font-family: "DM Sans", sans-serif !important; font-size: .82rem !important; font-weight: 700 !important; color: rgba(90,46,72,.7) !important; -webkit-text-fill-color: rgba(90,46,72,.7) !important; text-transform: uppercase !important; letter-spacing: .08em !important; } body.page-template-page-services .qg2-window .qg2-total-price, body:has(#qgHero) .qg2-window .qg2-total-price { font-family: "Playfair Display", Georgia, serif !important; font-size: 1.4rem !important; font-weight: 800 !important; color: #B03060 !important; -webkit-text-fill-color: #B03060 !important; } body.page-template-page-services .qg2-window .qg2-emi, body:has(#qgHero) .qg2-window .qg2-emi { display: flex !important; align-items: flex-start !important; gap: 8px !important; padding: 10px 18px !important; margin: 0 !important; font-family: "DM Sans", sans-serif !important; font-size: .78rem !important; line-height: 1.5 !important; color: rgba(90,46,72,.78) !important; -webkit-text-fill-color: rgba(90,46,72,.78) !important; background: none !important; border: none !important; } body.page-template-page-services .qg2-window .qg2-emi svg, body:has(#qgHero) .qg2-window .qg2-emi svg { width: 16px !important; height: 16px !important; stroke: #C9A86C !important; fill: none !important; flex-shrink: 0 !important; margin-top: 2px !important; } body.page-template-page-services .qg2-window .qg2-emi strong, body:has(#qgHero) .qg2-window .qg2-emi strong { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; font-weight: 700 !important; } body.page-template-page-services .qg2-window .qg2-cancel-policy, body:has(#qgHero) .qg2-window .qg2-cancel-policy { display: flex !important; align-items: flex-start !important; gap: 8px !important; padding: 10px 18px 16px !important; margin: 0 !important; font-family: "DM Sans", sans-serif !important; font-size: .78rem !important; line-height: 1.5 !important; color: rgba(90,46,72,.7) !important; -webkit-text-fill-color: rgba(90,46,72,.7) !important; background: none !important; } body.page-template-page-services .qg2-window .qg2-cancel-policy svg, body:has(#qgHero) .qg2-window .qg2-cancel-policy svg { width: 14px !important; height: 14px !important; stroke: #28C872 !important; fill: none !important; flex-shrink: 0 !important; margin-top: 3px !important; } /* PAIR WITH — premium horizontal chips */ body.page-template-page-services .qg2-window .qg2-pairwith, body:has(#qgHero) .qg2-window .qg2-pairwith { padding: 16px 18px !important; margin: 0 !important; border-top: 1px solid rgba(212,84,122,.08) !important; background: linear-gradient(180deg, rgba(212,84,122,.025) 0%, transparent 100%) !important; } body.page-template-page-services .qg2-window .qg2-pair-list, body:has(#qgHero) .qg2-window .qg2-pair-list { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* Style BOTH .qg2-pair-chip (used by JS) and .qg2-pair-item */ body.page-template-page-services .qg2-window .qg2-pair-chip, body.page-template-page-services .qg2-window .qg2-pair-item, body:has(#qgHero) .qg2-window .qg2-pair-chip, body:has(#qgHero) .qg2-window .qg2-pair-item { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 12px 14px !important; width: 100% !important; background: #ffffff !important; border: 1.5px solid rgba(212,84,122,.14) !important; border-radius: 14px !important; cursor: pointer !important; box-shadow: 0 1px 4px rgba(42,14,34,.04) !important; font-family: "DM Sans", sans-serif !important; text-align: left !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; position: relative !important; } body.page-template-page-services .qg2-window .qg2-pair-chip::before, body:has(#qgHero) .qg2-window .qg2-pair-chip::before { content: "+" !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: linear-gradient(135deg, rgba(212,84,122,.12), rgba(201,168,108,.12)) !important; color: #D4547A !important; -webkit-text-fill-color: #D4547A !important; font-size: 1.1rem !important; font-weight: 700 !important; border: 1px solid rgba(212,84,122,.22) !important; line-height: 1 !important; } body.page-template-page-services .qg2-window .qg2-pair-chip .qg2-pair-name, body.page-template-page-services .qg2-window .qg2-pair-item .qg2-pair-name, body:has(#qgHero) .qg2-window .qg2-pair-chip .qg2-pair-name, body:has(#qgHero) .qg2-window .qg2-pair-item .qg2-pair-name { flex: 1 !important; min-width: 0 !important; font-size: .88rem !important; font-weight: 700 !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; background: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 1.3 !important; font-family: "DM Sans", sans-serif !important; } body.page-template-page-services .qg2-window .qg2-pair-chip .qg2-pair-price, body.page-template-page-services .qg2-window .qg2-pair-item .qg2-pair-price, body:has(#qgHero) .qg2-window .qg2-pair-chip .qg2-pair-price, body:has(#qgHero) .qg2-window .qg2-pair-item .qg2-pair-price { margin-left: auto !important; flex-shrink: 0 !important; font-family: "Playfair Display", Georgia, serif !important; font-size: .92rem !important; font-weight: 800 !important; background: linear-gradient(135deg, #C9A86C, #B8924A) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; white-space: nowrap !important; } body.page-template-page-services .qg2-window .qg2-pair-chip .qg2-pair-save, body:has(#qgHero) .qg2-window .qg2-pair-chip .qg2-pair-save { flex-shrink: 0 !important; margin-left: 8px !important; padding: 3px 8px !important; background: rgba(40,200,114,.14) !important; border: 1px solid rgba(40,200,114,.32) !important; border-radius: 999px !important; font-family: "DM Sans", sans-serif !important; font-size: .66rem !important; font-weight: 800 !important; color: #2A6040 !important; -webkit-text-fill-color: #2A6040 !important; letter-spacing: .02em !important; white-space: nowrap !important; } body.page-template-page-services .qg2-window .qg2-pair-chip:active, body:has(#qgHero) .qg2-window .qg2-pair-chip:active { transform: scale(.98) !important; border-color: rgba(212,84,122,.35) !important; box-shadow: 0 3px 12px rgba(212,84,122,.12) !important; } body.page-template-page-services .qg2-window .qg2-pair-chip.is-added, body:has(#qgHero) .qg2-window .qg2-pair-chip.is-added { background: rgba(40,200,114,.06) !important; border-color: rgba(40,200,114,.32) !important; color: #2A6040 !important; -webkit-text-fill-color: #2A6040 !important; } /* Hide images in pair items if JS renders any (image template existed) */ body.page-template-page-services .qg2-window .qg2-pair-item img, body:has(#qgHero) .qg2-window .qg2-pair-item img { width: 40px !important; height: 40px !important; border-radius: 10px !important; object-fit: cover !important; flex-shrink: 0 !important; } /* Action bar — sticky bottom */ body.page-template-page-services .qg2-window .qg2-actions, body:has(#qgHero) .qg2-window .qg2-actions { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important; background: linear-gradient(0deg, #ffffff 80%, rgba(255,255,255,.95)) !important; border-top: 1px solid rgba(212,84,122,.1) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; z-index: 20 !important; box-shadow: 0 -4px 18px rgba(42,14,34,.08) !important; margin: 0 !important; } body.page-template-page-services .qg2-window .qg2-actions .qg-btn--ghost, body:has(#qgHero) .qg2-window .qg2-actions .qg-btn--ghost { width: 100% !important; min-height: 50px !important; padding: 0 22px !important; font-family: "DM Sans", sans-serif !important; font-size: .92rem !important; font-weight: 700 !important; color: #B03060 !important; -webkit-text-fill-color: #B03060 !important; background: #ffffff !important; border: 1.5px solid rgba(212,84,122,.3) !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; margin: 0 !important; order: 2 !important; } body.page-template-page-services .qg2-window .qg2-actions .qg-btn-primary, body.page-template-page-services .qg2-window .qg2-actions .qg-confirm-booking, body:has(#qgHero) .qg2-window .qg2-actions .qg-btn-primary, body:has(#qgHero) .qg2-window .qg2-actions .qg-confirm-booking { width: 100% !important; min-height: 54px !important; padding: 0 22px !important; font-family: "DM Sans", sans-serif !important; font-size: .98rem !important; font-weight: 800 !important; letter-spacing: .03em !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient(135deg, #B03060 0%, #D4547A 50%, #E8A87C 100%) !important; border: none !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 8px 24px rgba(176,48,96,.42), 0 2px 8px rgba(42,14,34,.18), inset 0 1px 0 rgba(255,255,255,.25) !important; margin: 0 !important; order: 1 !important; } body.page-template-page-services .qg2-window .qg2-actions .qg-btn-primary:active, body.page-template-page-services .qg2-window .qg2-actions .qg-confirm-booking:active, body:has(#qgHero) .qg2-window .qg2-actions .qg-btn-primary:active, body:has(#qgHero) .qg2-window .qg2-actions .qg-confirm-booking:active { transform: scale(.98) !important; } } /* ── 18.I CONCIERGE BOTTOM SHEET — Readable Close ───────────── */ @media (max-width: 768px) { body .qg2-window--concierge .qg2-actions { flex-direction: column !important; gap: 10px !important; margin-top: 18px !important; padding: 0 !important; } body .qg2-window--concierge .qg2-actions button, body .qg2-window--concierge .qg2-actions a { width: 100% !important; min-height: 50px !important; padding: 14px 22px !important; font-family: "DM Sans", sans-serif !important; font-size: .92rem !important; font-weight: 700 !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; margin: 0 !important; } body .qg2-window--concierge .qg2-actions #qgConciergeSend, body .qg2-window--concierge .qg2-actions .qg-btn--gold { background: linear-gradient(135deg, #F0D898 0%, #D4AF6A 50%, #B8860B 100%) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; border: none !important; box-shadow: 0 6px 22px rgba(212,175,106,.42), 0 2px 8px rgba(0,0,0,.2) !important; font-weight: 800 !important; letter-spacing: .03em !important; order: 1 !important; } body .qg2-window--concierge .qg2-actions [data-close-modal], body .qg2-window--concierge .qg2-actions .qg-btn--outline-gold { background: rgba(28,10,46,.06) !important; color: rgba(28,10,46,.7) !important; -webkit-text-fill-color: rgba(28,10,46,.7) !important; border: 1.5px solid rgba(28,10,46,.2) !important; order: 2 !important; } body .qg2-window--concierge .qg2-actions [data-close-modal]:active, body .qg2-window--concierge .qg2-actions .qg-btn--outline-gold:active { background: rgba(28,10,46,.1) !important; } } /* ── 18.J Tiny phone refinements ───────────────────────────── */ @media (max-width: 360px) { body.page-template-page-services #qgHero .qg-hero__title, body:has(#qgHero) #qgHero .qg-hero__title { font-size: 2rem !important; } body.page-template-page-services #qgHero .qg-hero__subtitle, body:has(#qgHero) #qgHero .qg-hero__subtitle { font-size: .85rem !important; } body.page-template-page-services .qg2-window .qg2-service-title, body:has(#qgHero) .qg2-window .qg2-service-title { font-size: 1.35rem !important; } body.page-template-page-services .qg-cart-fab, body.page-template-page-services #qgCartFab, body:has(#qgHero) .qg-cart-fab, body:has(#qgHero) #qgCartFab { padding: 10px 14px !important; font-size: .72rem !important; } body.page-template-page-services .qg2-window .qg2-date-chips, body:has(#qgHero) .qg2-window .qg2-date-chips { grid-template-columns: 1fr 1fr !important; } body.page-template-page-services .qg-price-from-tag, body.page-template-page-services .qg-price-fixed-tag, body:has(#qgHero) .qg-price-from-tag, body:has(#qgHero) .qg-price-fixed-tag { font-size: .52rem !important; } body.page-template-page-services .qg-ultra-card .qg-ultra-media .qg-ultra-duration, body:has(#qgHero) .qg-ultra-card .qg-ultra-media .qg-ultra-duration { font-size: .52rem !important; padding: 2px 7px !important; } body.page-template-page-services .qg-ultra-card .qg-card-wish-btn, body:has(#qgHero) .qg-ultra-card .qg-card-wish-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; flex: 0 0 28px !important; } body.page-template-page-services .qg-ultra-card .qg-card-wish-btn svg, body:has(#qgHero) .qg-ultra-card .qg-card-wish-btn svg { width: 13px !important; height: 13px !important; } } /* ── 18.K FOOTER ON CREAM BG — same as v4.3 ─────────────────── */ @media (max-width: 768px) { body.page-template-page-services .qg-footer, body.page-template-page-services footer#qgFooter, body:has(#qgHero) .qg-footer, body:has(#qgHero) footer#qgFooter { background: #FEF7F2 !important; color: #2A0E22 !important; } body.page-template-page-services .qg-footer__orb, body:has(#qgHero) .qg-footer__orb { display: none !important; } body.page-template-page-services .qg-footer__membership-banner, body:has(#qgHero) .qg-footer__membership-banner { background: linear-gradient(135deg, #FFFBFD 0%, #FAF0E8 100%) !important; border-bottom: 1px solid rgba(201,168,108,.18) !important; padding: 22px 16px !important; } body.page-template-page-services .qg-membership-banner__eyebrow, body:has(#qgHero) .qg-membership-banner__eyebrow { color: #C9A86C !important; -webkit-text-fill-color: #C9A86C !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .62rem !important; font-weight: 800 !important; letter-spacing: .16em !important; text-transform: uppercase !important; } body.page-template-page-services .qg-membership-banner__text h3, body:has(#qgHero) .qg-membership-banner__text h3 { font-family: "Playfair Display", Georgia, serif !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; background: none !important; font-size: 1.5rem !important; font-weight: 800 !important; line-height: 1.18 !important; margin: 6px 0 !important; } body.page-template-page-services .qg-membership-banner__text h3 em, body:has(#qgHero) .qg-membership-banner__text h3 em { font-style: italic !important; background: linear-gradient(135deg, #D4547A, #C9A86C) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } body.page-template-page-services .qg-membership-banner__text p, body:has(#qgHero) .qg-membership-banner__text p { color: rgba(90,46,72,.7) !important; -webkit-text-fill-color: rgba(90,46,72,.7) !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .82rem !important; line-height: 1.55 !important; margin: 0 !important; } body.page-template-page-services .qg-mb-plan, body:has(#qgHero) .qg-mb-plan { background: #ffffff !important; border: 1.5px solid rgba(201,168,108,.22) !important; box-shadow: 0 2px 10px rgba(42,14,34,.05) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; } body.page-template-page-services .qg-mb-plan--featured, body:has(#qgHero) .qg-mb-plan--featured { background: linear-gradient(135deg, #FFF4D8, #FAEBC8) !important; border-color: rgba(201,168,108,.5) !important; } body.page-template-page-services .qg-mb-plan__label, body:has(#qgHero) .qg-mb-plan__label { color: rgba(90,46,72,.65) !important; -webkit-text-fill-color: rgba(90,46,72,.65) !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } body.page-template-page-services .qg-mb-plan--featured .qg-mb-plan__label, body:has(#qgHero) .qg-mb-plan--featured .qg-mb-plan__label { color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; } body.page-template-page-services .qg-mb-plan__price, body:has(#qgHero) .qg-mb-plan__price { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; background: none !important; font-family: "Playfair Display", Georgia, serif !important; font-size: 1.35rem !important; font-weight: 800 !important; } body.page-template-page-services .qg-mb-plan__price span, body:has(#qgHero) .qg-mb-plan__price span { color: rgba(90,46,72,.5) !important; -webkit-text-fill-color: rgba(90,46,72,.5) !important; font-size: .65rem !important; font-weight: 600 !important; } body.page-template-page-services .qg-mb-plan__perk, body:has(#qgHero) .qg-mb-plan__perk { color: rgba(90,46,72,.7) !important; -webkit-text-fill-color: rgba(90,46,72,.7) !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .68rem !important; line-height: 1.4 !important; } body.page-template-page-services .qg-membership-banner__cta a, body.page-template-page-services .qg-membership-banner__cta button, body.page-template-page-services .qg-membership-banner__cta .qg-btn--gold, body:has(#qgHero) .qg-membership-banner__cta a, body:has(#qgHero) .qg-membership-banner__cta button, body:has(#qgHero) .qg-membership-banner__cta .qg-btn--gold { background: linear-gradient(135deg, #D4B47A 0%, #C9A86C 50%, #B8860B 100%) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; border: none !important; box-shadow: 0 6px 20px rgba(201,168,108,.32) !important; font-weight: 800 !important; } body.page-template-page-services .qg-footer__promo-strip, body:has(#qgHero) .qg-footer__promo-strip { background: #FAF5F0 !important; padding: 18px 14px !important; } body.page-template-page-services .qg-promo-card, body:has(#qgHero) .qg-promo-card { background: #ffffff !important; border: 1px solid rgba(201,168,108,.22) !important; box-shadow: 0 2px 10px rgba(42,14,34,.05) !important; border-radius: 18px !important; } body.page-template-page-services .qg-promo-card::before, body:has(#qgHero) .qg-promo-card::before { display: none !important; } body.page-template-page-services .qg-promo-card__title, body:has(#qgHero) .qg-promo-card__title { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; background: none !important; font-family: "Playfair Display", Georgia, serif !important; font-size: .95rem !important; font-weight: 700 !important; display: block !important; } body.page-template-page-services .qg-promo-card__desc, body:has(#qgHero) .qg-promo-card__desc { color: rgba(90,46,72,.7) !important; -webkit-text-fill-color: rgba(90,46,72,.7) !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .74rem !important; line-height: 1.5 !important; display: block !important; margin-top: 2px !important; } body.page-template-page-services .qg-promo-card__btn, body:has(#qgHero) .qg-promo-card__btn { background: linear-gradient(135deg, #D4B47A 0%, #C9A86C 100%) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; border: none !important; font-family: "DM Sans", sans-serif !important; font-weight: 800 !important; box-shadow: 0 4px 12px rgba(201,168,108,.28) !important; } body.page-template-page-services .qg-promo-app-btn, body:has(#qgHero) .qg-promo-app-btn { background: #ffffff !important; border: 1.5px solid rgba(201,168,108,.3) !important; color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; font-family: "DM Sans", sans-serif !important; font-size: .72rem !important; font-weight: 700 !important; text-decoration: none !important; } body.page-template-page-services .qg-promo-app-btn svg, body:has(#qgHero) .qg-promo-app-btn svg { fill: #8A6B2A !important; } body.page-template-page-services .qg-footer__trust, body:has(#qgHero) .qg-footer__trust { background: #FFFBF7 !important; border-top: 1px solid rgba(201,168,108,.14) !important; border-bottom: 1px solid rgba(201,168,108,.14) !important; padding: 14px 14px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; } body.page-template-page-services .qg-trust__divider, body:has(#qgHero) .qg-trust__divider { display: none !important; } body.page-template-page-services .qg-trust__badge, body:has(#qgHero) .qg-trust__badge { flex: unset !important; padding: 12px 10px !important; min-width: unset !important; justify-content: flex-start !important; gap: 10px !important; border-bottom: 1px solid rgba(201,168,108,.1) !important; background: transparent !important; } body.page-template-page-services .qg-trust__badge:nth-last-child(-n+2), body:has(#qgHero) .qg-trust__badge:nth-last-child(-n+2) { border-bottom: none !important; } body.page-template-page-services .qg-trust__badge:nth-child(even), body:has(#qgHero) .qg-trust__badge:nth-child(even) { border-left: 1px solid rgba(201,168,108,.1) !important; } body.page-template-page-services .qg-trust__icon, body:has(#qgHero) .qg-trust__icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: rgba(201,168,108,.12) !important; border: 1px solid rgba(201,168,108,.28) !important; box-shadow: 0 2px 8px rgba(201,168,108,.1) !important; flex-shrink: 0 !important; display: grid !important; place-items: center !important; font-size: .95rem !important; } body.page-template-page-services .qg-trust__badge strong, body:has(#qgHero) .qg-trust__badge strong { display: block !important; color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .78rem !important; font-weight: 700 !important; line-height: 1.22 !important; margin-bottom: 2px !important; } body.page-template-page-services .qg-trust__badge span, body:has(#qgHero) .qg-trust__badge span { display: block !important; color: rgba(90,46,72,.62) !important; -webkit-text-fill-color: rgba(90,46,72,.62) !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .65rem !important; line-height: 1.32 !important; } body.page-template-page-services .qg-footer__top, body:has(#qgHero) .qg-footer__top { background: #FEF7F2 !important; padding: 26px 16px 22px !important; } body.page-template-page-services .qg-footer-logo, body:has(#qgHero) .qg-footer-logo { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; background: none !important; font-family: "Playfair Display", Georgia, serif !important; font-size: 1.7rem !important; font-weight: 800 !important; } body.page-template-page-services .qg-footer-logo em, body:has(#qgHero) .qg-footer-logo em { font-style: italic !important; background: linear-gradient(135deg, #D4547A, #C9A86C) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } body.page-template-page-services .qg-footer-logo__jewel, body:has(#qgHero) .qg-footer-logo__jewel { color: #C9A86C !important; -webkit-text-fill-color: #C9A86C !important; } body.page-template-page-services .qg-footer-brand__tagline, body:has(#qgHero) .qg-footer-brand__tagline { color: rgba(90,46,72,.7) !important; -webkit-text-fill-color: rgba(90,46,72,.7) !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .88rem !important; line-height: 1.62 !important; } body.page-template-page-services .qg-footer-brand__tagline em, body:has(#qgHero) .qg-footer-brand__tagline em { color: #C9A86C !important; -webkit-text-fill-color: #C9A86C !important; background: none !important; font-style: italic !important; } body.page-template-page-services .qg-social, body:has(#qgHero) .qg-social { background: rgba(201,168,108,.08) !important; border: 1px solid rgba(201,168,108,.25) !important; color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; width: 42px !important; height: 42px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.page-template-page-services .qg-social svg, body:has(#qgHero) .qg-social svg { stroke: #8A6B2A !important; } body.page-template-page-services .qg-footer__nav, body:has(#qgHero) .qg-footer__nav { background: transparent !important; } body.page-template-page-services .qg-footer-nav__group h4, body:has(#qgHero) .qg-footer-nav__group h4 { color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .7rem !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; margin: 0 0 10px !important; } body.page-template-page-services .qg-footer-nav__group ul li a, body:has(#qgHero) .qg-footer-nav__group ul li a { color: rgba(42,14,34,.72) !important; -webkit-text-fill-color: rgba(42,14,34,.72) !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .82rem !important; font-weight: 500 !important; text-decoration: none !important; line-height: 2 !important; } body.page-template-page-services .qg-footer__newsletter, body:has(#qgHero) .qg-footer__newsletter { background: #FAF5F0 !important; padding: 22px 14px !important; border-top: 1px solid rgba(201,168,108,.14) !important; border-bottom: 1px solid rgba(201,168,108,.14) !important; } body.page-template-page-services .qg-newsletter__inner, body:has(#qgHero) .qg-newsletter__inner { background: linear-gradient(135deg, #FFFBFD 0%, #FFF4E8 100%) !important; border: 1px solid rgba(201,168,108,.25) !important; border-radius: 22px !important; padding: 20px 18px !important; box-shadow: 0 4px 18px rgba(42,14,34,.06) !important; flex-direction: column !important; gap: 14px !important; max-width: 100% !important; margin: 0 !important; } body.page-template-page-services .qg-newsletter__inner::before, body:has(#qgHero) .qg-newsletter__inner::before { display: none !important; } body.page-template-page-services .qg-newsletter__copy, body:has(#qgHero) .qg-newsletter__copy { text-align: center !important; } body.page-template-page-services .qg-newsletter__eyebrow, body:has(#qgHero) .qg-newsletter__eyebrow { color: #C9A86C !important; -webkit-text-fill-color: #C9A86C !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .62rem !important; font-weight: 800 !important; letter-spacing: .18em !important; text-transform: uppercase !important; display: block !important; } body.page-template-page-services .qg-newsletter__copy h3, body:has(#qgHero) .qg-newsletter__copy h3 { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; background: none !important; font-family: "Playfair Display", Georgia, serif !important; font-size: 1.6rem !important; font-weight: 800 !important; line-height: 1.18 !important; margin: 6px 0 4px !important; font-style: italic !important; } body.page-template-page-services .qg-newsletter__copy p, body:has(#qgHero) .qg-newsletter__copy p { color: rgba(90,46,72,.7) !important; -webkit-text-fill-color: rgba(90,46,72,.7) !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .82rem !important; line-height: 1.55 !important; margin: 0 !important; } body.page-template-page-services .qg-newsletter__form, body:has(#qgHero) .qg-newsletter__form { width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.page-template-page-services .qg-newsletter__field, body:has(#qgHero) .qg-newsletter__field { display: flex !important; flex-direction: column !important; gap: 10px !important; background: transparent !important; border: none !important; padding: 0 !important; } body.page-template-page-services .qg-newsletter__field input[type="email"], body:has(#qgHero) .qg-newsletter__field input[type="email"] { width: 100% !important; height: 48px !important; background: #ffffff !important; border: 1.5px solid rgba(201,168,108,.28) !important; border-radius: 999px !important; padding: 0 18px !important; font-family: "DM Sans", sans-serif !important; font-size: .88rem !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: 0 2px 8px rgba(42,14,34,.04) !important; box-sizing: border-box !important; } body.page-template-page-services .qg-newsletter__field input[type="email"]::placeholder, body:has(#qgHero) .qg-newsletter__field input[type="email"]::placeholder { color: rgba(90,46,72,.45) !important; -webkit-text-fill-color: rgba(90,46,72,.45) !important; } body.page-template-page-services .qg-newsletter__field button, body:has(#qgHero) .qg-newsletter__field button { width: 100% !important; height: 50px !important; background: linear-gradient(135deg, #D4B47A 0%, #C9A86C 50%, #B8860B 100%) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; border: none !important; border-radius: 999px !important; font-family: "DM Sans", sans-serif !important; font-size: .92rem !important; font-weight: 800 !important; letter-spacing: .02em !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; cursor: pointer !important; box-shadow: 0 6px 18px rgba(201,168,108,.32) !important; } body.page-template-page-services .qg-newsletter__field button svg, body:has(#qgHero) .qg-newsletter__field button svg { width: 16px !important; height: 16px !important; stroke: #2A0E22 !important; } body.page-template-page-services .qg-newsletter__note, body:has(#qgHero) .qg-newsletter__note { color: rgba(90,46,72,.5) !important; -webkit-text-fill-color: rgba(90,46,72,.5) !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .7rem !important; text-align: center !important; margin: 6px 0 0 !important; } body.page-template-page-services .qg-footer__cities, body:has(#qgHero) .qg-footer__cities { background: #FAF5F0 !important; padding: 14px 14px !important; } body.page-template-page-services .qg-footer__cities-label, body:has(#qgHero) .qg-footer__cities-label { color: #C9A86C !important; -webkit-text-fill-color: #C9A86C !important; background: none !important; font-family: "DM Sans", sans-serif !important; font-size: .6rem !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } body.page-template-page-services .qg-footer__cities-label svg, body:has(#qgHero) .qg-footer__cities-label svg { stroke: #C9A86C !important; } body.page-template-page-services .qg-footer__city-pill, body:has(#qgHero) .qg-footer__city-pill { background: #ffffff !important; border: 1px solid rgba(201,168,108,.22) !important; color: rgba(42,14,34,.7) !important; -webkit-text-fill-color: rgba(42,14,34,.7) !important; font-family: "DM Sans", sans-serif !important; font-size: .68rem !important; font-weight: 600 !important; padding: 4px 11px !important; border-radius: 999px !important; } body.page-template-page-services .qg-footer__city-more, body:has(#qgHero) .qg-footer__city-more { background: rgba(201,168,108,.12) !important; border-color: rgba(201,168,108,.35) !important; color: #8A6B2A !important; -webkit-text-fill-color: #8A6B2A !important; } body.page-template-page-services .qg-footer__bottom, body:has(#qgHero) .qg-footer__bottom { background: #2A0E22 !important; color: rgba(255,255,255,.65) !important; padding: 18px 14px !important; } body.page-template-page-services .qg-footer__bottom *, body:has(#qgHero) .qg-footer__bottom * { color: rgba(255,255,255,.7) !important; -webkit-text-fill-color: rgba(255,255,255,.7) !important; } body.page-template-page-services .qg-footer__bottom a, body:has(#qgHero) .qg-footer__bottom a { color: #E8C97A !important; -webkit-text-fill-color: #E8C97A !important; text-decoration: none !important; } } /* ================================================================ §18 END — v4.4 LIGHT PREMIUM HERO + FINAL POLISH ================================================================ */ /* ================================================================ SERVICES PAGE PATCH — May 14 2026 File: qg-services-mobile-master.css (services page only) Fixes: 1. Bottom nav dark bg on services page (same specificity fix) 2. Filter section — 3-line hamburger icon too large / overlapping 3. Clear button — plain text link, no box/border 4. Service cards & page background — white/cream, not dark ================================================================ */ @media (max-width: 860px) { /* ── 1. BOTTOM NAV on services page — cream, matching Flutter app The dark initial rule `html body .qg-bottom-nav` also fires here. Must use the same 3-part selector to override it. */ html body .qg-bottom-nav { background: #FEF9F5 !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border-top: 1px solid rgba(59,31,58,0.09) !important; box-shadow: 0 -2px 16px rgba(59,31,58,0.06) !important; } html body .qg-bnav-item { color: rgba(59,31,58,0.40) !important; -webkit-text-fill-color: rgba(59,31,58,0.40) !important; font-size: 0.56rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } html body .qg-bnav-item svg { stroke: rgba(59,31,58,0.32) !important; } html body .qg-bnav-item.active { color: #C05878 !important; -webkit-text-fill-color: #C05878 !important; } html body .qg-bnav-item.active svg { stroke: #C05878 !important; } html body .qg-bnav-item.active::after { background: #C05878 !important; } html body .qg-bnav-item--book, html body .qg-bnav-item--book.active, html body .qg-bnav-item--book:hover { color: #2A1229 !important; -webkit-text-fill-color: #2A1229 !important; } html body .qg-bnav-item--book svg, html body .qg-bnav-item--book.active svg { stroke: #2A1229 !important; } /* ── 2. FILTER SECTION — 3-line icon size & hub height ────────── Android WebView ignores `width` alone on inline SVG; need explicit min/max caps. Also tighten the hub padding so the entire filter bar doesn't push into card content below it. */ /* Hub container height */ body.page-template-page-services .qg-filter-hub, body:has(#qgHero) .qg-filter-hub { padding: 0 !important; min-height: unset !important; } body.page-template-page-services .qg-filter-hub-inner, body:has(#qgHero) .qg-filter-hub-inner { padding: 0.35rem 0 0.3rem !important; } /* Price button — 3-line SVG hard-capped at 14×14 */ body.page-template-page-services .qg-price-btn svg, body:has(#qgHero) .qg-price-btn svg, body.page-template-page-services .qg-price-btn > svg, body:has(#qgHero) .qg-price-btn > svg { width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; max-width: 14px !important; max-height: 14px !important; flex-shrink: 0 !important; display: inline-block !important; vertical-align: middle !important; } /* Price button itself — tighter height so it doesn't crowd filter row */ body.page-template-page-services .qg-price-btn, body:has(#qgHero) .qg-price-btn { height: 36px !important; padding: 0 0.85rem !important; font-size: 0.82rem !important; } /* ── 3. CLEAR BUTTON — plain text link, no box/border ──────────── Generic mobile button resets add border + padding back. Force all box-model properties to zero. */ body.page-template-page-services .qg-rv-clear, body.page-template-page-services #qgRvClear, body:has(#qgHero) .qg-rv-clear, body:has(#qgHero) #qgRvClear { background: none !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; font-family: "DM Sans", sans-serif !important; font-size: 0.72rem !important; font-weight: 600 !important; color: rgba(90,46,72,0.50) !important; -webkit-text-fill-color: rgba(90,46,72,0.50) !important; cursor: pointer !important; text-decoration: none !important; -webkit-appearance: none !important; appearance: none !important; } body.page-template-page-services .qg-rv-clear:hover, body.page-template-page-services #qgRvClear:hover, body:has(#qgHero) .qg-rv-clear:hover, body:has(#qgHero) #qgRvClear:hover { color: #D4547A !important; -webkit-text-fill-color: #D4547A !important; background: none !important; border: none !important; box-shadow: none !important; } /* ── 4. SERVICE CARDS & PAGE BG — white/cream, not dark ───────── The page body and grid sections were inheriting a dark purple background from the global dark theme. Force light surfaces so cards read clearly on mobile, matching the Flutter card style. */ /* Page / section wrapper backgrounds */ body.page-template-page-services #qgHero, body:has(#qgHero) .qg-services-section, body.page-template-page-services .qg-services-wrap, body:has(#qgHero) .qg-services-wrap, body.page-template-page-services #qgServicesGrid, body:has(#qgHero) #qgServicesGrid { background: #FFFBFD !important; background-color: #FFFBFD !important; } /* Individual service card — white surface */ body.page-template-page-services .qg-ultra-card, body:has(#qgHero) .qg-ultra-card { background: #ffffff !important; background-color: #ffffff !important; } /* Card info panel */ body.page-template-page-services .qg-ultra-info, body:has(#qgHero) .qg-ultra-info { background: #ffffff !important; background-color: #ffffff !important; } /* Card title — dark plum on white */ body.page-template-page-services .qg-ultra-title, body:has(#qgHero) .qg-ultra-title { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; } /* Card price */ body.page-template-page-services .qg-ultra-price, body.page-template-page-services .qg-ultra-price strong, body:has(#qgHero) .qg-ultra-price, body:has(#qgHero) .qg-ultra-price strong { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; } /* Card meta (duration, category tag) */ body.page-template-page-services .qg-ultra-meta, body.page-template-page-services .qg-ultra-dur, body.page-template-page-services .qg-ultra-tag, body:has(#qgHero) .qg-ultra-meta, body:has(#qgHero) .qg-ultra-dur, body:has(#qgHero) .qg-ultra-tag { color: rgba(42,14,34,0.60) !important; -webkit-text-fill-color: rgba(42,14,34,0.60) !important; } } /* end @media (max-width: 860px) */ /* ================================================================ §19 END — Services page mobile patch May 14 2026 ================================================================ */ /* ================================================================ PATCH May 14 2026 — Cart FAB: dark plum → light gold Root cause: cart used background: linear-gradient(#2A0E22,#3B1F3A) (near-black), making it visually heavy and off-brand on mobile. Change to a warm gold gradient matching the Flutter app design. ================================================================ */ @media (max-width: 768px) { body.page-template-page-services .qg-cart-fab, body.page-template-page-services #qgCartFab, body:has(#qgHero) .qg-cart-fab, body:has(#qgHero) #qgCartFab { background: linear-gradient(135deg, #F0D898 0%, #D4AF6A 50%, #C9A86C 100%) !important; color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; box-shadow: 0 4px 18px rgba(201,168,108,0.50), 0 0 0 1.5px rgba(201,168,108,0.55) inset !important; } /* Cart icon — dark on gold */ body.page-template-page-services .qg-cart-fab svg, body.page-template-page-services #qgCartFab svg, body:has(#qgHero) .qg-cart-fab svg, body:has(#qgHero) #qgCartFab svg { stroke: #2A0E22 !important; fill: none !important; } body.page-template-page-services .qg-cart-fab svg path, body.page-template-page-services .qg-cart-fab svg circle, body.page-template-page-services .qg-cart-fab svg rect, body.page-template-page-services #qgCartFab svg path, body.page-template-page-services #qgCartFab svg circle, body.page-template-page-services #qgCartFab svg rect, body:has(#qgHero) .qg-cart-fab svg path, body:has(#qgHero) .qg-cart-fab svg circle, body:has(#qgHero) .qg-cart-fab svg rect, body:has(#qgHero) #qgCartFab svg path, body:has(#qgHero) #qgCartFab svg circle, body:has(#qgHero) #qgCartFab svg rect { stroke: #2A0E22 !important; } /* "Cart" text label — dark on gold */ body.page-template-page-services .qg-cart-fab::after, body.page-template-page-services #qgCartFab::after, body:has(#qgHero) .qg-cart-fab::after, body:has(#qgHero) #qgCartFab::after { color: #2A0E22 !important; -webkit-text-fill-color: #2A0E22 !important; } /* Count badge — keep rose pill, but dark text for legibility on gold bg */ body.page-template-page-services .qg-fab-count, body:has(#qgHero) .qg-fab-count { background: #C05878 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 1px 5px rgba(192,88,120,0.45) !important; } /* Active press state */ body.page-template-page-services .qg-cart-fab:active, body.page-template-page-services #qgCartFab:active, body:has(#qgHero) .qg-cart-fab:active, body:has(#qgHero) #qgCartFab:active { transform: scale(0.96) !important; box-shadow: 0 2px 10px rgba(201,168,108,0.40) !important; } } /* end @media (max-width: 768px) */ /* ================================================================ END PATCH May 14 2026 ================================================================ */