/*
 * High Q Cannabis — Main Stylesheet
 * Theme: highq
 * Tailwind config is loaded via wp_enqueue_scripts in functions.php
 */

/*
 * Reference Tailwind config (loaded separately via CDN in functions.php):
 *
 * tailwind.config = {
 *   theme: {
 *     extend: {
 *       colors: {
 *         'hq-night':          '#19202b',
 *         'hq-sky':            '#282a5d',
 *         'hq-cloud':          '#65367f',
 *         'hq-magenta':        '#873771',
 *         'hq-coral':          '#ad274c',
 *         'hq-rose':           '#dc6689',
 *         'hq-sunset':         '#de916c',
 *         'hq-mountain-teal':  '#358fa7',
 *         'hq-mountain-mint':  '#7fbdb6',
 *         'hq-gold':           '#ffa810',
 *         'hq-cream':          '#f5f0eb',
 *         'hq-gray':           '#7e7b85',
 *       },
 *       fontFamily: {
 *         display: ['Outfit', 'sans-serif'],
 *         body:    ['DM Sans', 'sans-serif'],
 *       },
 *     },
 *   },
 * };
 */

/* ── Reset ──────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: #282a5d;
  color: #f5f0eb;
  overflow-x: hidden;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #19202b; }
::-webkit-scrollbar-thumb { background: #dc6689; border-radius: 3px; }

/* ── Flyout menu spacing ─────────────────────────────────────── */
#shopFlyout .py-2\.5 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* ── Grain overlay ───────────────────────────────────────────── */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Section backgrounds ─────────────────────────────────────── */
.bg-sky          { background: linear-gradient(180deg, #282a5d 0%, #3a2d6a 100%); }
.bg-cloud        { background: linear-gradient(180deg, #4a3075 0%, #65367f 100%); }
.bg-magenta      { background: linear-gradient(180deg, #65367f 0%, #873771 100%); }
.bg-coral-section{ background: linear-gradient(180deg, #873771 0%, #ad274c 100%); }
.bg-night-footer { background: #19202b; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero-bg {
  background: linear-gradient(
    180deg,
    rgba(40,42,93,0.85) 0%,
    rgba(101,54,127,0.75) 60%,
    rgba(135,55,113,0.9) 100%
  );
}

/* ── Sunset accent line ──────────────────────────────────────── */
.sunset-line {
  height: 3px;
  background: linear-gradient(90deg, #358fa7, #7fbdb6, #de916c, #dc6689, #ad274c, #65367f);
}

/* ── Nav glass ───────────────────────────────────────────────── */
.nav-glass {
  background: rgba(40, 42, 93, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #dc6689 0%, #ad274c 100%);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  padding: 14px 32px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover        { transform: translateY(-2px); box-shadow: 0 8px 30px -5px rgba(220,102,137,0.5); }
.btn-primary:focus-visible{ outline: 2px solid #dc6689; outline-offset: 3px; }
.btn-primary:active       { transform: translateY(0px); }

.btn-secondary {
  background: linear-gradient(135deg, #358fa7 0%, #7fbdb6 100%);
  color: #0a2141;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  padding: 14px 32px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-secondary:hover        { transform: translateY(-2px); box-shadow: 0 8px 30px -5px rgba(53,143,167,0.5); }
.btn-secondary:focus-visible{ outline: 2px solid #7fbdb6; outline-offset: 3px; }
.btn-secondary:active       { transform: translateY(0px); }

.btn-gold {
  background: #ffa810;
  background-color: #ffa810;
  background-image: none;
  color: #0f0a1f;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  padding: 14px 32px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: background 0.2s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
  cursor: pointer;
  border: none;
  outline: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-gold:hover        { background: #ffbe45; transform: translateY(-1px); }
.btn-gold:focus        { outline: none; }
.btn-gold:focus-visible{ outline: 2px solid #7fbdb6; outline-offset: 2px; }
.btn-gold:active       { transform: translateY(0); }

.btn-outline {
  border: 2px solid rgba(220,102,137,0.5);
  color: #dc6689;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  padding: 12px 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline:hover        { background: rgba(220,102,137,0.1); border-color: #dc6689; transform: translateY(-2px); }
.btn-outline:focus-visible{ outline: 2px solid #dc6689; outline-offset: 3px; }
.btn-outline:active       { transform: translateY(0px); }

/* ── Ticker ──────────────────────────────────────────────────── */
/* NOTE: Auto-scroll is driven by JS in brands-ticker.php (rAF
 * scrollLeft increments) — NOT by a CSS keyframe animation. A leftover
 * `animation: ticker 30s linear infinite;` declaration here used to
 * fight the JS, producing way-too-fast scrolling regardless of the JS
 * PX_PER_SEC value. Removed. */

/* ─── Primary nav (admin-managed via Appearance → Menus) ────────
 * Top-level items: small uppercase pill links.
 * Sub-items:        hover-reveal dropdown panel under the parent.
 * The wp_nav_menu output gets light additions from our walker —
 * the layout/positioning rules below do the rest. */
.hq-primary-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hq-primary-menu > li {
  position: relative;
}
.hq-primary-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #19202b;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 200;
  pointer-events: none;
}
.hq-primary-menu > li.has-dropdown:hover > .sub-menu,
.hq-primary-menu > li.has-dropdown:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.hq-primary-menu .sub-menu a {
  display: block;
  padding: 8px 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.hq-primary-menu .sub-menu a:hover,
.hq-primary-menu .sub-menu a:focus {
  background: rgba(255,168,16,0.08);
  color: #ffa810;
}
/* Category dropdown items carry a flyout icon before the label */
.hq-primary-menu .sub-menu li.hq-cat-child > a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hq-primary-menu .sub-menu li.hq-cat-child .hq-cat-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}
.hq-primary-menu .sub-menu li.hq-cat-child > a:hover .hq-cat-icon,
.hq-primary-menu .sub-menu li.hq-cat-child > a:focus .hq-cat-icon {
  opacity: 1;
}
/* Indicate hover on the parent while dropdown is open */
.hq-primary-menu > li.has-dropdown:hover > a {
  color: #ffa810;
}
/* Right-edge alignment for the last few items so dropdowns don't
 * overflow the viewport on the right side of the nav. */
.hq-primary-menu > li:nth-last-child(-n+2) .sub-menu {
  left: auto;
  right: 0;
}

/* ── Entrance animations ─────────────────────────────────────── */
@keyframes fadeUp  { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95);       } to { opacity: 1; transform: scale(1);       } }

.animate-fade-up  { animation: fadeUp  0.8s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }
.animate-scale-in { animation: scaleIn 0.6s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Category cards ──────────────────────────────────────────── */
.category-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.category-card:hover        { transform: translateY(-6px); box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5); }
.category-card:focus-visible{ outline: 2px solid #dc6689; outline-offset: 2px; }
.category-card .card-image  { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.category-card:hover .card-image { transform: scale(1.08); }

/* Category colour tokens */
.cat-flower       { --cat-color: #7fbdb6; }
.cat-edibles      { --cat-color: #de916c; }
.cat-concentrates { --cat-color: #dc6689; }
.cat-vapes        { --cat-color: #358fa7; }
.cat-prerolls     { --cat-color: #ad274c; }
.cat-topicals     { --cat-color: #7fbdb6; }
.cat-tinctures    { --cat-color: #de916c; }
.cat-cbd          { --cat-color: #358fa7; }

/* Animated bottom bar */
.category-card .cat-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--cat-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.category-card:hover .cat-bar { transform: scaleX(1); }

/* ── Effect tags ─────────────────────────────────────────────── */
.effect-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(127,189,182,0.12);
  border: 1px solid rgba(127,189,182,0.25);
  color: #7fbdb6;
  padding: 8px 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.effect-tag svg            { width: 16px; height: 16px; flex-shrink: 0; }
.effect-tag:hover          { background: rgba(127,189,182,0.2); border-color: #7fbdb6; color: #fff; }
.effect-tag:focus-visible  { outline: 2px solid #7fbdb6; outline-offset: 2px; }

/* ── Deal cards ──────────────────────────────────────────────── */
.deal-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.4s ease;
}
.deal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(220,102,137,0.3);
  box-shadow: 0 20px 50px -15px rgba(220,102,137,0.15);
}

/* ── Age gate ────────────────────────────────────────────────── */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(25,32,43,0.97);
  backdrop-filter: blur(30px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.age-gate.hidden { display: none; }

/* ── Reduced-motion overrides ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .ticker-track { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE EVENTS CALENDAR — brand conformance (/events/ + single events)
   Scoped to tribe markup so it never affects the rest of the site.
   ══════════════════════════════════════════════════════════════════════════ */
/* Header clearance: push the calendar below the fixed site header */
body.tribe-events-page-template .tribe-common,
body.single-tribe_events .tribe-common,
body.tribe-events-pg-template .tribe-common {
  padding-top: 120px;
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  body.tribe-events-page-template .tribe-common,
  body.single-tribe_events .tribe-common,
  body.tribe-events-pg-template .tribe-common {
    padding-top: 280px;
  }
}
/* Typography + base text color on the dark theme */
.tribe-common,
.tribe-common .tribe-common-b1,
.tribe-common .tribe-common-b2,
.tribe-common .tribe-common-b3,
.tribe-events .tribe-events-calendar-list__event-description,
.tribe-events p {
  font-family: 'DM Sans', sans-serif !important;
  color: #e7ecea !important;
}
.tribe-common h1,.tribe-common h2,.tribe-common h3,.tribe-common h4,
.tribe-common .tribe-common-h1,.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,.tribe-common .tribe-common-h4,
.tribe-common .tribe-common-h5,.tribe-common .tribe-common-h6,
.tribe-events .tribe-events-calendar-list__event-title {
  font-family: 'Outfit', sans-serif !important;
  color: #f5f0eb !important;
  letter-spacing: -0.02em;
}
/* Links / anchors → gold */
.tribe-common a,
.tribe-common .tribe-common-anchor,
.tribe-common .tribe-common-anchor-thin,
.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events-c-view-selector__button-text {
  color: #ffa810 !important;
}
.tribe-common a:hover,
.tribe-events .tribe-events-calendar-list__event-title-link:hover {
  color: #ffbe45 !important;
}
/* Date / time / meta text → softened light */
.tribe-events .tribe-events-calendar-list__event-datetime,
.tribe-events .tribe-event-date-start,
.tribe-events time,
.tribe-common .tribe-common-b2--bold {
  color: #cfd6da !important;
}
/* Buttons (subscribe, view selector, nav, filters) → gold pill */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-events .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events-c-subscribe-dropdown__button {
  background-color: #ffa810 !important;
  color: #19202b !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.tribe-common .tribe-common-c-btn:hover,
.tribe-events-c-subscribe-dropdown__button:hover {
  background-color: #ffbe45 !important;
}
/* Nav arrows + view tabs */
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__list-item-text {
  color: #e7ecea !important;
}
.tribe-events .tribe-events-c-top-bar__datepicker-button,
.tribe-events .tribe-events-c-view-selector__list-item-text {
  color: #f5f0eb !important;
}
/* Surfaces: event list rows, top bar, dropdowns → translucent cards */
.tribe-events .tribe-events-calendar-list__event-row,
.tribe-events .tribe-events-calendar-month__day,
.tribe-events-c-subscribe-dropdown__content,
.tribe-events .tribe-events-c-search__input-control {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
/* "No events" notice */
.tribe-events .tribe-events-c-messages__message,
.tribe-events .tribe-events-header__messages {
  color: #cfd6da !important;
}
.tribe-events .tribe-events-c-messages__message-list-item {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
}
/* Datepicker popover */
.tribe-events .tribe-events-c-top-bar__datepicker .datepicker {
  background: #282a5d !important;
  color: #f5f0eb !important;
}
/* Month/calendar grid cells & today highlight */
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
  color: #ffa810 !important;
}

/* ── Define --nav-height to the real fixed-header height ─────────────────────
   Templates (index/single/archive/404/page) use
   `calc(var(--nav-height,160px) + 3rem)` for header clearance. The variable
   was never defined, so they fell back to 160px (→208px) and clipped behind
   the ~253px desktop header. Define it responsively so calc resolves to
   ~120px mobile / ~280px desktop. */
:root { --nav-height: 72px; }
@media (min-width: 1024px) { :root { --nav-height: 232px; } }

/* ── Events Calendar: darken the white search/events bar ──────────────────── */
.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-events-bar__search,
.tribe-events .tribe-events-c-search,
.tribe-events .tribe-events-c-search__input-group,
.tribe-events .tribe-events-c-search__input-control {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.tribe-events .tribe-events-c-search__input,
.tribe-events input.tribe-events-c-search__input {
  background: transparent !important;
  color: #f5f0eb !important;
}
.tribe-events .tribe-events-c-search__input::placeholder { color: rgba(255,255,255,0.45) !important; }
.tribe-events .tribe-events-c-events-bar__search-button-icon,
.tribe-events .tribe-events-c-search__icon { color: #ffa810 !important; }
.tribe-events .tribe-events-c-view-selector__list-item-link {
  color: #cfd6da !important;
}
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text,
.tribe-events .tribe-events-c-view-selector__list-item-link:hover { color: #ffa810 !important; }

/* Events bar inner container was still white — make it transparent so the
   darkened parent bar shows through (and the view-selector strip too). */
.tribe-events .tribe-events-c-events-bar__search-container,
.tribe-events .tribe-events-c-events-bar__views,
.tribe-events .tribe-events-c-view-selector,
.tribe-events .tribe-events-c-view-selector__content {
  background: transparent !important;
}

/* ── Events Calendar: no dark/black icons or arrows on the purple bg ──────── */
.tribe-events .tribe-common-svg-icon,
.tribe-events svg,
.tribe-events .tribe-events-c-nav__prev svg,
.tribe-events .tribe-events-c-nav__next svg,
.tribe-events .tribe-events-c-top-bar__nav-list-item-button svg,
.tribe-events .tribe-events-c-top-bar__datepicker-button svg {
  color: #e7ecea !important;
  fill: currentColor !important;
}
.tribe-events a:hover svg,
.tribe-events button:hover svg { color: #ffa810 !important; }
/* "Today" button + nav buttons → translucent dark, gold text, sharp corners */
.tribe-events .tribe-events-c-top-bar__today-button,
.tribe-events button.tribe-events-c-top-bar__today-button {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  color: #ffa810 !important;
}
.tribe-events .tribe-events-c-top-bar__today-button-text { color: #ffa810 !important; }
/* "No events" empty-state icon → soften to brand, not dark blue */
.tribe-events .tribe-events-c-messages__message-icon path,
.tribe-events .tribe-events-c-messages__message-icon svg { fill: #7fbdb6 !important; color: #7fbdb6 !important; }
/* Remove rounded corners on all tribe buttons/inputs/cards */
.tribe-events .tribe-common-c-btn,
.tribe-events .tribe-events-c-search__input,
.tribe-events .tribe-events-c-search__input-control,
.tribe-events .tribe-events-calendar-list__event-row,
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-events .tribe-events-c-subscribe-dropdown__content,
.tribe-events input,
.tribe-events button { border-radius: 0 !important; }

/* ── Events archive: branded full-bleed hero + remove the now-redundant
   top padding (the hero carries header clearance on the archive). ───────── */
body.tribe-events-page-template .tribe-common,
body.tribe-events-pg-template .tribe-common { padding-top: 0 !important; }
.hq-events-hero {
  position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw; width: 100vw;
  box-sizing: border-box;
  padding: 120px 24px 48px; margin-bottom: 48px;
  text-align: center;
  background: linear-gradient(165deg, #65367f 0%, #282a5d 100%);
}
@media (min-width: 1024px) { .hq-events-hero { padding-top: 280px; } }
.hq-events-hero__eyebrow {
  display: block; font-family: 'Outfit', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px;
  color: #ffa810; margin-bottom: 10px;
}
.hq-events-hero__title {
  font-family: 'Outfit', sans-serif; font-weight: 900; letter-spacing: -0.03em;
  color: #f5f0eb; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 14px; line-height: 1;
}
.hq-events-hero__sub {
  font-family: 'DM Sans', sans-serif; color: #e7ecea; font-size: 17px;
  max-width: 620px; margin: 0 auto; line-height: 1.6;
}

/* ── Events archive: constrain width + tighten spacing (no floating-in-void) ─ */
body.tribe-events-page-template .tribe-common {
  max-width: 1080px !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 24px !important; padding-right: 24px !important;
  padding-bottom: 72px !important;
}
.hq-events-hero { margin-bottom: 0 !important; }
/* kill the large gap between hero and the events bar */
body.tribe-events-page-template .tribe-events-header,
body.tribe-events-page-template .tribe-common__events-bar,
body.tribe-events-page-template .tribe-events-c-events-bar { margin-top: 28px !important; }
/* trim the empty-state vertical whitespace */
body.tribe-events-page-template .tribe-events-calendar-list,
body.tribe-events-page-template .tribe-events-c-messages { margin-top: 12px !important; }

/* Events archive: the tribe layout container ships with 96px top padding,
   which created a big gap under our hero. Tighten it. */
body.tribe-events-page-template .tribe-events-l-container,
body.tribe-events-page-template .tribe-common-l-container { padding-top: 24px !important; }

/* ── Equal-height cards across a row + bottom-aligned card buttons ────────── */
.elementor .hq-card { height: 100% !important; }
.elementor .hq-card .elementor-container,
.elementor .hq-card .elementor-row,
.elementor .hq-card .elementor-column,
.elementor .hq-card .elementor-widget-wrap { height: 100%; }
.elementor .hq-card .elementor-column .elementor-widget-wrap { display: flex; flex-direction: column; }
.elementor .hq-card .elementor-widget-button { margin-top: auto; }

/* ── CTA button row: 3 equal-width, equal-height buttons in one centered row ─ */
.elementor .hq-btn-row .elementor-widget-button { width: 100%; }
.elementor .hq-btn-row .elementor-widget-button .elementor-button { width: 100%; }
@media (min-width: 768px) {
  .elementor .hq-btn-row > .elementor-container { flex-wrap: nowrap !important; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HQ ELEMENTOR — authoritative card-grid + button layout (overrides earlier)
   ══════════════════════════════════════════════════════════════════════════ */
/* Stretch boxed bands with the viewport, with comfortable side margins */
.elementor .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: min(1500px, 92vw) !important;
}
/* Card grid: equal width + equal height + real gaps (CSS Grid) */
.elementor .hq-cardgrid > .elementor-container {
  display: grid !important;
  gap: 24px !important;
  align-items: stretch !important;
  max-width: min(1500px, 92vw) !important;
  margin-left: auto !important; margin-right: auto !important;
}
.elementor .hq-cardgrid-3 > .elementor-container { grid-template-columns: repeat(3, 1fr); }
.elementor .hq-cardgrid-4 > .elementor-container { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .elementor .hq-cardgrid-3 > .elementor-container,
  .elementor .hq-cardgrid-4 > .elementor-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .elementor [class*="hq-cardgrid"] > .elementor-container { grid-template-columns: 1fr; }
}
.elementor [class*="hq-cardgrid"] > .elementor-container > .elementor-column {
  width: auto !important; max-width: none !important; margin: 0 !important;
}
/* Card fills its (stretched) grid cell + bottom-align the card's button */
.elementor [class*="hq-cardgrid"] .elementor-column > .elementor-widget-wrap,
.elementor [class*="hq-cardgrid"] .elementor-column > .elementor-element-populated {
  height: 100% !important; display: flex; flex-direction: column;
}
.elementor [class*="hq-cardgrid"] .elementor-column .elementor-widget-button:last-child { margin-top: auto; }

/* All buttons: equal height regardless of border (box-sizing border-box) */
.elementor .elementor-button {
  box-sizing: border-box !important;
  min-height: 52px;
  display: inline-flex !important; align-items: center; justify-content: center;
}

/* CTA cluster: 3 buttons, one row, centered, evenly gapped (not spread wide) */
.elementor .hq-btn-cluster > .elementor-widget-wrap,
.elementor .hq-btn-cluster > .elementor-element-populated {
  display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px;
}
.elementor .hq-btn-cluster .elementor-widget-button { width: auto !important; max-width: none !important; margin: 0 !important; }
.elementor .hq-btn-cluster .elementor-widget-button .elementor-button { width: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   HQ ELEMENTOR — chunked-row cards (equal height per row) + CTA cluster
   Targets Elementor's OWN auto-classes (section _css_classes don't render on
   injected data); scoped to .elementor so only the new pages are affected.
   ══════════════════════════════════════════════════════════════════════════ */
/* Stretch boxed sections with the viewport, with comfortable side margins */
.elementor .elementor-section.elementor-section-boxed > .elementor-container { max-width: min(1500px, 92vw) !important; }
/* Columns stretch to equal height per row (native); make their content fill */
.elementor .elementor-column > .elementor-element-populated { display: flex; flex-direction: column; height: 100%; }
/* icon-box cards fill their equal-height column */
.elementor .hq-card { height: 100% !important; }
/* inner-section cards fill their equal-height column → equal cards per row */
.elementor .elementor-element-populated > .elementor-inner-section { flex: 1 0 auto; }
.elementor .elementor-inner-section > .elementor-container { height: 100%; }
.elementor .elementor-inner-section .elementor-column > .elementor-element-populated { height: 100%; }
/* push card buttons to the bottom (card inner-sections only, not the CTA) */
.elementor .elementor-inner-section:not(:has(.hq-cta-btn)) .elementor-widget-button { margin-top: auto; }
/* All buttons: equal height regardless of border */
.elementor .elementor-button { box-sizing: border-box !important; min-height: 52px; display: inline-flex !important; align-items: center; justify-content: center; }
/* CTA cluster: 3 buttons centered in one row, evenly gapped (not spread wide) */
.elementor .elementor-inner-section:has(.hq-cta-btn) > .elementor-container { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; }
.elementor .elementor-inner-section:has(.hq-cta-btn) > .elementor-container > .elementor-column { width: auto !important; max-width: none !important; margin: 0 !important; }
.elementor .hq-cta-btn .elementor-button { width: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   Homepage Google Reviews — horizontal scroll carousel (20 cards)
   ───────────────────────────────────────────────────────────────────────── */
.hq-reviews { position: relative; }

.hq-reviews-track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 4px 2px 18px;        /* room for hover-lift + focus ring */
	scrollbar-width: none;         /* Firefox */
}
.hq-reviews-track::-webkit-scrollbar { display: none; } /* WebKit */
.hq-reviews-track:focus-visible {
	outline: 2px solid rgba(127,189,182,0.6);
	outline-offset: 4px;
}

.hq-review-card {
	flex: 0 0 auto;
	width: 300px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	transition: transform 200ms cubic-bezier(.22,.61,.36,1), box-shadow 200ms cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.hq-review-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(220,102,137,0.55);
}
.hq-review-card .hq-review-text { flex: 1 0 auto; }

@media (min-width: 640px)  { .hq-review-card { width: 340px; } }
@media (min-width: 1024px) { .hq-review-card { width: 360px; } }

/* Prev / Next arrows */
.hq-reviews-arrow {
	position: absolute;
	top: calc(50% - 9px);          /* offset for the track's bottom padding */
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #f5f0eb;
	background: rgba(25,32,43,0.82);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 9999px;          /* circular control, not a card */
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 30px -12px rgba(0,0,0,0.7);
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.22,.61,.36,1), opacity 160ms ease;
}
.hq-reviews-prev { left: -6px; }
.hq-reviews-next { right: -6px; }
@media (min-width: 1280px) {
	.hq-reviews-prev { left: -22px; }
	.hq-reviews-next { right: -22px; }
}
.hq-reviews-arrow:hover {
	background: rgba(220,102,137,0.9);
	border-color: rgba(220,102,137,0.9);
	transform: translateY(-50%) scale(1.06);
}
.hq-reviews-arrow:focus-visible {
	outline: 2px solid #7fbdb6;
	outline-offset: 2px;
}
.hq-reviews-arrow:active { transform: translateY(-50%) scale(0.94); }
.hq-reviews-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}
/* On touch devices, drop the arrows and let users swipe natively. */
@media (hover: none) {
	.hq-reviews-arrow { display: none; }
	.hq-reviews-track { padding-left: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hq-reviews-track { scroll-behavior: auto; }
	.hq-review-card { transition: none; }
	.hq-review-card:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Customer Reviews page — skin TrustIndex (Google) + Site Reviews to brand
   First pass; scoped to .hq-ti-skin / .hq-sr-skin so nothing leaks sitewide.
   ───────────────────────────────────────────────────────────────────────── */

/* ── TrustIndex (Google reviews) ─────────────────────────────────────────── */
.hq-ti-skin .ti-widget,
.hq-ti-skin .ti-widget * {
	font-family: 'DM Sans', system-ui, sans-serif !important;
}
.hq-ti-skin .ti-widget { background: transparent !important; }
/* The visible review card is .ti-inner (white by default) → our dark surface,
   no radius. TrustIndex styles it as `.ti-widget.ti-goog .ti-review-item >
   .ti-inner { … !important }` and its stylesheet loads after ours, so every
   selector here includes `.ti-widget.ti-goog` to win on specificity
   regardless of load order. */
.hq-ti-skin .ti-widget.ti-goog .ti-review-item {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* Scoped to review cards ONLY — the "Verified by Trustindex" badge rows also
   use .ti-inner and must keep the plugin's own colors. */
.hq-ti-skin .ti-widget.ti-goog .ti-review-item > .ti-inner {
	background: rgba(255,255,255,0.06) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* Reviewer name → display font, cream. (TrustIndex's `.ti-disable-font …*
   { font: inherit !important }` is 0,4,0 — these are 0,5,0+.) */
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container .ti-name,
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container .ti-name * {
	color: #f5f0eb !important;
	font-family: 'Outfit', system-ui, sans-serif !important;
	font-weight: 700 !important;
}
/* Review body + read-more container */
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container .ti-review-content,
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container .ti-review-text-container {
	color: rgba(255,255,255,0.62) !important;
}
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container .ti-date {
	color: rgba(255,255,255,0.35) !important;
}
/* Header: EXCELLENT + "Based on 222 reviews" — the `*` matters: TrustIndex
   sets black on the inner .nowrap span, not just the container. */
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container .ti-rating-text,
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container .ti-rating-text * {
	color: #ffffff !important;
}
/* Prev/next slider controls → match our circular arrow style */
.hq-ti-skin .ti-widget.ti-goog .ti-controls .ti-next,
.hq-ti-skin .ti-widget.ti-goog .ti-controls .ti-prev {
	background: rgba(25,32,43,0.82) !important;
	border: 1px solid rgba(255,255,255,0.14) !important;
	color: #f5f0eb !important;
	border-radius: 9999px !important;
	box-shadow: 0 10px 30px -12px rgba(0,0,0,0.7) !important;
}
.hq-ti-skin .ti-widget.ti-goog .ti-controls .ti-next:hover,
.hq-ti-skin .ti-widget.ti-goog .ti-controls .ti-prev:hover {
	background: rgba(220,102,137,0.9) !important;
	border-color: rgba(220,102,137,0.9) !important;
}
/* Read-more / links → brand teal (covers the in-card "Read more" toggle the
   loader injects, whatever element it uses) */
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container a { color: #7fbdb6 !important; }
.hq-ti-skin .ti-widget.ti-goog .ti-review-text-container a,
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container [class*="read-more"] { color: #7fbdb6 !important; }
/* Verified-review badge text stays legible on dark */
.hq-ti-skin .ti-widget.ti-goog .ti-widget-container .ti-verified-review { color: rgba(255,255,255,0.45) !important; }

/* ── Site Reviews — submission form ──────────────────────────────────────── */
.hq-sr-skin { color: rgba(255,255,255,0.85); }
.hq-sr-skin .glsr-field label,
.hq-sr-skin label {
	color: rgba(255,255,255,0.7) !important;
	font-family: 'Outfit', system-ui, sans-serif !important;
	font-weight: 600 !important;
}
.hq-sr-skin input[type="text"],
.hq-sr-skin input[type="email"],
.hq-sr-skin input[type="url"],
.hq-sr-skin textarea,
.hq-sr-skin select {
	background: rgba(255,255,255,0.06) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 0 !important;
	color: #f5f0eb !important;
	box-shadow: none !important;
}
.hq-sr-skin input::placeholder,
.hq-sr-skin textarea::placeholder { color: rgba(255,255,255,0.35) !important; }
.hq-sr-skin input:focus,
.hq-sr-skin textarea:focus,
.hq-sr-skin select:focus {
	outline: none !important;
	border-color: #7fbdb6 !important;
	box-shadow: 0 0 0 2px rgba(127,189,182,0.25) !important;
}
/* Star rating control */
.hq-sr-skin .glsr-star-rating .glsr-star,
.hq-sr-skin [class*="glsr-star"] svg,
.hq-sr-skin [class*="glsr-star"]:before { color: #de916c !important; fill: #de916c !important; }
/* Submit button → brand */
.hq-sr-skin button[type="submit"],
.hq-sr-skin .glsr-button,
.hq-sr-skin input[type="submit"] {
	background: linear-gradient(135deg, #ad274c 0%, #dc6689 100%) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: 'Outfit', system-ui, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 14px 28px !important;
	cursor: pointer;
	transition: transform 160ms cubic-bezier(.22,.61,.36,1), box-shadow 160ms ease;
}
.hq-sr-skin button[type="submit"]:hover,
.hq-sr-skin .glsr-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -16px rgba(220,102,137,0.7);
}

/* ── Site Reviews — approved list ────────────────────────────────────────── */
.hq-sr-list .glsr-review,
.hq-sr-list [class*="glsr-review"] {
	background: rgba(255,255,255,0.06) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 0 !important;
	padding: 1.5rem !important;
}
.hq-sr-list .glsr-review-title,
.hq-sr-list [class*="review-title"] {
	color: #f5f0eb !important;
	font-family: 'Outfit', system-ui, sans-serif !important;
	font-weight: 700 !important;
}
.hq-sr-list .glsr-review-content,
.hq-sr-list [class*="review-content"] { color: rgba(255,255,255,0.62) !important; }
.hq-sr-list .glsr-review-author,
.hq-sr-list [class*="review-author"],
.hq-sr-list [class*="review-date"] { color: rgba(255,255,255,0.4) !important; }
.hq-sr-list [class*="glsr-star"] svg,
.hq-sr-list [class*="glsr-star"]:before { color: #de916c !important; fill: #de916c !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Hero promo slider — panel 1 is the original hero; published Hero Slides
   add crossfading promo panels. Backgrounds and content fade independently;
   the category row + info bar stay fixed. Only opacity/transform animate.
   ───────────────────────────────────────────────────────────────────────── */

/* Background layers */
.hq-hero-bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 700ms ease;
	pointer-events: none;
}
.hq-hero-bg.is-active { opacity: 1; }

/* Content stack: all panels share one grid cell; height = tallest panel */
.hq-hero-panels {
	position: relative;
	display: grid;
	grid-template-areas: "hq-stack";
}
.hq-hero-panel {
	grid-area: hq-stack;
	opacity: 0;
	transform: translateY(10px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 600ms;
}
.hq-hero-panel.is-active {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition: opacity 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1), visibility 0s;
}

/* Prev / Next — same circular dark style as the reviews carousel */
.hq-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #f5f0eb;
	background: rgba(25,32,43,0.82);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 9999px;
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 30px -12px rgba(0,0,0,0.7);
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.22,.61,.36,1);
}
.hq-hero-prev { left: -6px; }
.hq-hero-next { right: -6px; }
@media (min-width: 1280px) {
	.hq-hero-prev { left: 4px; }
	.hq-hero-next { right: 4px; }
}
.hq-hero-arrow:hover {
	background: rgba(220,102,137,0.9);
	border-color: rgba(220,102,137,0.9);
	transform: translateY(-50%) scale(1.06);
}
.hq-hero-arrow:focus-visible { outline: 2px solid #7fbdb6; outline-offset: 2px; }
.hq-hero-arrow:active { transform: translateY(-50%) scale(0.94); }
@media (max-width: 640px) {
	.hq-hero-arrow { width: 36px; height: 36px; }
}

/* Dots — short bars to match the square-cornered design language */
.hq-hero-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 0 0 22px;
}
.hq-hero-dot {
	width: 26px;
	height: 4px;
	padding: 0;
	border: none;
	background: rgba(255,255,255,0.22);
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms cubic-bezier(.22,.61,.36,1);
}
.hq-hero-dot:hover { background: rgba(255,255,255,0.45); }
.hq-hero-dot:focus-visible { outline: 2px solid #7fbdb6; outline-offset: 3px; }
.hq-hero-dot.is-active {
	background: linear-gradient(90deg, #de916c, #dc6689);
	transform: scaleY(1.5);
}

@media (prefers-reduced-motion: reduce) {
	.hq-hero-bg,
	.hq-hero-panel { transition: none; }
	.hq-hero-panel { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Rewards page — AlpineIQ "Join Q Club" embed. Heights measured against the
   live form so it ends right at the Powered-by mark: ~1601px at desktop
   embed width, ~1720px stacked on mobile. No inner scrolling either way.
   ───────────────────────────────────────────────────────────────────────── */
.hq-aiq-frame { height: 1640px; }
@media (max-width: 640px) {
	.hq-aiq-frame { height: 1760px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Long-form prose inside Elementor Text Editor widgets (Terms, policies,
   any rich-text content). The theme's global reset strips default heading/
   paragraph margins, so restore a readable rhythm here. Scoped to the text-
   editor widget only; explicit widget typography settings still win.
   ───────────────────────────────────────────────────────────────────────── */
.elementor .elementor-widget-text-editor h1,
.elementor .elementor-widget-text-editor h2,
.elementor .elementor-widget-text-editor h3,
.elementor .elementor-widget-text-editor h4 {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #f5f0eb;
	margin: 1.6em 0 0.6em;
	line-height: 1.25;
}
.elementor .elementor-widget-text-editor h1 { font-size: 2rem; }
.elementor .elementor-widget-text-editor h2 { font-size: 1.5rem; }
.elementor .elementor-widget-text-editor h3 { font-size: 1.25rem; }
.elementor .elementor-widget-text-editor h4 { font-size: 1.1rem; }
.elementor .elementor-widget-text-editor h1:first-child,
.elementor .elementor-widget-text-editor h2:first-child,
.elementor .elementor-widget-text-editor h3:first-child { margin-top: 0; }

.elementor .elementor-widget-text-editor p {
	margin: 0 0 1.1em;
	line-height: 1.7;
}
.elementor .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.elementor .elementor-widget-text-editor ul,
.elementor .elementor-widget-text-editor ol {
	margin: 0 0 1.1em;
	padding-left: 1.5em;
}
.elementor .elementor-widget-text-editor ul { list-style: disc; }
.elementor .elementor-widget-text-editor ol { list-style: decimal; }
.elementor .elementor-widget-text-editor li { margin-bottom: 0.45em; line-height: 1.65; }

.elementor .elementor-widget-text-editor strong { color: #ffffff; }
.elementor .elementor-widget-text-editor a {
	color: #7fbdb6;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.elementor .elementor-widget-text-editor a:hover { color: #ffffff; }
.elementor .elementor-widget-text-editor blockquote {
	border-left: 3px solid rgba(220,102,137,0.6);
	padding-left: 1.2em;
	margin: 1.4em 0;
	color: rgba(255,255,255,0.7);
	font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
   Brand logo strip ([hq_brand_strip]) — logo tiles linking to each brand's
   products. Square-cornered translucent cards per the design system.
   ───────────────────────────────────────────────────────────────────────── */
.hq-brand-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.hq-brand-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 92px;
	padding: 14px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	transition: transform 200ms cubic-bezier(.22,.61,.36,1), border-color 200ms ease, box-shadow 200ms cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.hq-brand-tile img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.hq-brand-tile:hover {
	transform: translateY(-4px);
	border-color: rgba(220,102,137,0.35);
	box-shadow: 0 18px 40px -24px rgba(220,102,137,0.55);
}
.hq-brand-tile:focus-visible { outline: 2px solid #7fbdb6; outline-offset: 3px; }
.hq-brand-tile:active { transform: translateY(-1px); }
@media (max-width: 640px) {
	.hq-brand-tile { width: calc(33.33% - 10px); height: 76px; padding: 10px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Brands ticker inside Elementor pages — Elementor's `.elementor img
   { height: auto }` overrides Tailwind's h-[60px] utility, blowing logos up
   to natural size. Restore the homepage marquee sizing with specificity.
   ───────────────────────────────────────────────────────────────────────── */
.elementor .ticker-track {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	white-space: nowrap;
}
.elementor .ticker-track img {
	height: 60px !important;
	width: auto !important;
	max-width: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   FAQ page polish — category chips + accordion refinement (the accordion
   rules also lift the landing-page FAQs for consistency).
   ───────────────────────────────────────────────────────────────────────── */

/* Anchored sections clear the fixed header when jumped to */
.elementor .elementor-section[id^="faq-"] {
	scroll-margin-top: calc(var(--nav-height, 160px) + 16px);
}

/* Category chips: compact pill-row version of the outline button */
.elementor .hq-faq-chip .elementor-button {
	padding: 10px 18px !important;
	font-size: 12px !important;
	min-height: 0 !important;
	letter-spacing: 0.08em !important;
}

/* Accordion refinement */
.elementor .elementor-accordion .elementor-accordion-item {
	margin-bottom: 10px;
	border: 1px solid rgba(255,255,255,0.10);
	transition: border-color 180ms ease;
}
.elementor .elementor-accordion .elementor-accordion-item:hover {
	border-color: rgba(220,102,137,0.35);
}
.elementor .elementor-accordion .elementor-tab-title {
	padding: 18px 22px;
	transition: color 150ms ease;
}
.elementor .elementor-accordion .elementor-tab-title.elementor-active {
	border-left: 3px solid #ffa810;
	background: rgba(255,255,255,0.08);
}
.elementor .elementor-accordion .elementor-accordion-icon {
	color: #7fbdb6;
}
.elementor .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
	color: #ffa810;
}
.elementor .elementor-accordion .elementor-tab-content {
	padding: 18px 22px;
	border-top: 1px solid rgba(255,255,255,0.08);
	line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────────────────────
   New Arrivals grid ([hq_new_arrivals]) — newest menu items as theme cards.
   ───────────────────────────────────────────────────────────────────────── */
.hq-na-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
}
.hq-na-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	text-decoration: none;
	transition: transform 200ms cubic-bezier(.22,.61,.36,1), border-color 200ms ease, box-shadow 200ms cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.hq-na-card:hover {
	transform: translateY(-4px);
	border-color: rgba(220,102,137,0.35);
	box-shadow: 0 18px 40px -24px rgba(220,102,137,0.55);
}
.hq-na-card:focus-visible { outline: 2px solid #7fbdb6; outline-offset: 3px; }
.hq-na-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: #ffa810;
	color: #19202b;
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 9px;
}
.hq-na-img {
	display: block;
	aspect-ratio: 1 / 1;
	background: #ffffff;
	overflow: hidden;
}
.hq-na-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	max-width: none;
}
.hq-na-title {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: #f5f0eb;
	padding: 14px 16px 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hq-na-cta {
	color: #7fbdb6;
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0 16px 16px;
	margin-top: auto;
}
.hq-na-card:hover .hq-na-cta { color: #ffffff; }

/* ─────────────────────────────────────────────────────────────────────────
   Specials page — daily-deal countdown pill
   ───────────────────────────────────────────────────────────────────────── */
.hq-deal-countdown {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding: 10px 18px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,168,16,0.35);
}
.hq-deal-countdown-label {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
}
.hq-deal-countdown-time {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: #ffa810;
	font-variant-numeric: tabular-nums;
	min-width: 86px;
}

/* New Arrivals card additions — brand, price/THC row, embedded cart form */
.hq-na-brand {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #dc6689;
	padding: 12px 16px 0;
}
.hq-na-card .hq-na-title { padding-top: 6px; }
.hq-na-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 16px 12px;
}
.hq-na-price {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 800;
	font-size: 18px;
	color: #f5f0eb;
}
.hq-na-thc {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.55);
	border: 1px solid rgba(255,255,255,0.15);
	padding: 3px 8px;
}
.hq-na-btn {
	display: block;
	margin: 0 16px 16px;
	padding: 12px;
	text-align: center;
	background: linear-gradient(135deg, #dc6689 0%, #ad274c 100%);
	color: #fff;
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 200ms cubic-bezier(.22,.61,.36,1), box-shadow 200ms ease;
}
.hq-na-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(220,102,137,0.6); }
.hq-na-btn:focus-visible { outline: 2px solid #7fbdb6; outline-offset: 2px; }
/* Embedded native cart form, restyled to the card */
.hq-na-cart { padding: 0 16px 16px; margin-top: auto; }
.hq-na-cart select,
.hq-na-cart input {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15);
	color: #f5f0eb;
	font-size: 13px;
	padding: 8px;
	margin-bottom: 8px;
	width: 100%;
}
.hq-na-cart button,
.hq-na-cart .leafbridge_add_to_cart_button {
	width: 100%;
	background: linear-gradient(135deg, #dc6689 0%, #ad274c 100%) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: 'Outfit', system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px !important;
	cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────────
   New Arrivals cards — white card treatment matching the Leafbridge product
   carousels (dark text on white), with Add to Cart pinned to the bottom of
   every card regardless of title length. Badge stays gold.
   ───────────────────────────────────────────────────────────────────────── */
.hq-na-card {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.08);
}
.hq-na-card:hover {
	border-color: rgba(220,102,137,0.55);
	box-shadow: 0 18px 40px -20px rgba(25,32,43,0.45);
}
.hq-na-img {
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hq-na-brand {
	color: #dc6689;
}
.hq-na-card .hq-na-title {
	color: #19202b;
}
.hq-na-card .hq-na-title:hover {
	color: #ad274c;
}
.hq-na-price {
	color: #19202b;
}
.hq-na-thc {
	color: #4b5563;
	border-color: rgba(0,0,0,0.18);
}
/* Pin price/THC row + button to the bottom, consistent across the row */
.hq-na-meta {
	margin-top: auto;
}
.hq-na-btn {
	margin: 0 16px 16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Compact product cards in CAROUSEL contexts (homepage/geo Today's Specials,
   Staff Picks, Top Sellers). Deli-style products otherwise bring their full
   busy card — weight chips, variation dropdown, qty, discount banners — into
   the sliders. Hide those there; the full UI still lives on /specials/,
   /shop/ and product pages. Add to Cart keeps working with the default
   (first) weight option.
   ───────────────────────────────────────────────────────────────────────── */
#specials .leafbridge_product_card .lb-product-weight-wrapper,
.lb-homepage-slider .leafbridge_product_card .lb-product-weight-wrapper,
#specials .leafbridge_product_card select.add_to_cart_variant,
.lb-homepage-slider .leafbridge_product_card select.add_to_cart_variant,
#specials .leafbridge_product_card input.add_to_cart_count,
.lb-homepage-slider .leafbridge_product_card input.add_to_cart_count,
#specials .leafbridge_product_card .disc_perc,
.lb-homepage-slider .leafbridge_product_card .disc_perc,
#specials .leafbridge_product_card .leafbridge_product_price del,
.lb-homepage-slider .leafbridge_product_card .leafbridge_product_price del {
	display: none !important;
}

/* Carousel Add to Cart = gold everywhere (the "You May Also Like" standard).
   Geo pages don't load the shop shell whose JS paints these gold, so bake it
   in as CSS for all carousel contexts. Specificity beats leafbridge.css's
   black wrapper rule. */
#specials .leafbridge_product_card .leafbridge_product_modal_add_to_cart button,
.lb-homepage-slider .lb_prod_box_add_to_cart_wrapper.leafbridge_product_modal_add_to_cart button,
.lb-homepage-slider .leafbridge_product_card .leafbridge_product_modal_add_to_cart button {
	background: #ffa810 !important;
	background-image: none !important;
	color: #0f0a1f !important;
	border: none !important;
	box-shadow: none !important;
}
#specials .leafbridge_product_card .leafbridge_product_modal_add_to_cart button:hover,
.lb-homepage-slider .leafbridge_product_card .leafbridge_product_modal_add_to_cart button:hover {
	background: #ffbe45 !important;
}
#specials .leafbridge_product_card .leafbridge_product_modal_add_to_cart button *,
.lb-homepage-slider .leafbridge_product_card .leafbridge_product_modal_add_to_cart button * {
	color: #0f0a1f !important;
	background: transparent !important;
}