/* ============================================================
   gobuy custom premium styles (loaded after the Phoenix theme)
   ============================================================ */

/* ---------- Design tokens ----------
   Single source of truth for rhythm, motion, display type and
   elevation. Every gb-* component reads these — change a token,
   change the whole storefront consistently. */
:root {
  /* Vertical rhythm between merchandising sections */
  --gb-section-gap: clamp(2.75rem, 6vw, 4.5rem);

  /* Motion */
  --gb-motion-fast: 0.18s;
  --gb-motion-slow: 0.5s;
  --gb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Fluid display type scale (banner / hero headlines) */
  --gb-display-sm: clamp(1.1rem, 2.6vw, 1.6rem);
  --gb-display-md: clamp(1.35rem, 3.6vw, 2.25rem);
  --gb-display-lg: clamp(1.6rem, 5vw, 3rem);

  /* Banner height scale */
  --gb-hero-h-sm: clamp(140px, 22vw, 220px);
  --gb-hero-h-md: clamp(190px, 30vw, 340px);
  --gb-hero-h-lg: clamp(240px, 40vw, 460px);

  /* Elevation */
  --gb-shadow-lift: 0 14px 30px rgba(0, 0, 0, 0.1);
  --gb-shadow-pop: 0 12px 26px rgba(0, 0, 0, 0.14);
}

/* ---------- Category strip ---------- */
.gb-category-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.75rem;
  scrollbar-width: thin;
}
.gb-category-item {
  flex: 0 0 auto;
  width: 6.5rem;
  text-align: center;
  text-decoration: none;
}
.gb-category-tile {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 0.6rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--phoenix-primary);
  background: var(--phoenix-primary-bg-subtle);
  border: 1px solid var(--phoenix-border-color-translucent);
  transition: transform var(--gb-motion-fast) var(--gb-ease), box-shadow var(--gb-motion-fast) var(--gb-ease), background var(--gb-motion-fast) var(--gb-ease);
}
.gb-category-item:hover .gb-category-tile {
  transform: translateY(-4px);
  box-shadow: var(--gb-shadow-pop);
  background: var(--phoenix-primary);
  color: #fff;
}
.gb-category-label {
  color: var(--phoenix-secondary-color);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- Banners: consistent heights + cover ---------- */
/* ---------- Premium admin-managed banner (x-banner) ---------- */
.gb-banner {
  isolation: isolate;
}
.gb-banner--sm { min-height: var(--gb-hero-h-sm); }
.gb-banner--md { min-height: var(--gb-hero-h-md); }
.gb-banner--lg { min-height: var(--gb-hero-h-lg); }
.gb-banner__title--sm { font-size: var(--gb-display-sm); }
.gb-banner__title--md { font-size: var(--gb-display-md); }
.gb-banner__title--lg { font-size: var(--gb-display-lg); }
.gb-banner__img,
.gb-banner__img img,
.gb-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.gb-banner__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gb-banner__content {
  position: relative;
  z-index: 1;
  width: 100%;
}
.gb-banner__content h2 {
  line-height: 1.1;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}
.gb-banner__ribbon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background: #e63757;
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.3rem 1.4rem;
  transform: translate(28%, 55%) rotate(45deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.gb-countdown {
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
}

/* Banner text legibility is fixed to the banner's own text_theme (light artwork
   vs dark artwork), NOT the app's data-bs-theme. Bootstrap's theme-aware tokens
   flipped subtitle colours in app dark mode and washed them out over the banner
   image; these self-contained values read correctly in both app themes. */
.gb-banner__text--light { color: #fff; }
.gb-banner__text--dark { color: #1b1d21; }
.gb-banner__subtext--light { color: rgba(255, 255, 255, 0.72); }
.gb-banner__subtext--dark { color: rgba(27, 29, 33, 0.72); }
.gb-banner__badge {
  backdrop-filter: blur(2px);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.gb-banner__badge--light {
  background: rgba(17, 19, 23, 0.55);
  color: #fff;
}
.gb-banner__badge--dark {
  background: rgba(255, 255, 255, 0.78);
  color: #1b1d21;
}

/* ---------- MX1: Marketing-creative banners ----------
   The uploaded artwork IS the banner. aspect-ratio reserves the exact box
   before the image arrives (zero CLS); a shimmer fills the wait. On phones the
   box tightens and object-fit/focal-point crops the sides — the same centre-
   safe-zone behaviour used by the big marketplaces. */
.gb-banner--creative {
  display: block;
  width: 100%;
  background: linear-gradient(100deg, var(--phoenix-body-highlight-bg, #eef0f3) 40%, rgba(255, 255, 255, 0.35) 50%, var(--phoenix-body-highlight-bg, #eef0f3) 60%) 0 0 / 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .gb-banner--creative { animation: gbShimmer 1.4s linear infinite; }
}
@keyframes gbShimmer {
  to { background-position: -200% 0; }
}
.gb-banner--creative-sm { aspect-ratio: 4 / 1; }
.gb-banner--creative-md { aspect-ratio: 3 / 1; }
.gb-banner--creative-lg { aspect-ratio: 21 / 9; }
@media (max-width: 575.98px) {
  .gb-banner--creative-sm { aspect-ratio: 21 / 9; }
  .gb-banner--creative-md,
  .gb-banner--creative-lg { aspect-ratio: 16 / 9; }
}
.gb-banner--creative .gb-banner__img,
.gb-banner--creative .gb-banner__img img {
  z-index: 0; /* creative sits above the shimmer, not behind content */
}
/* Optional HTML CTA over the creative — decorative (pe-none): the whole
   surface is one stretched-link click target and one analytics event. */
.gb-banner__cta-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
}

/* ---------- MX1: hero banner carousel ---------- */
.gb-hero-carousel .swiper-slide { height: auto; }
.gb-hero-carousel .gb-banner { height: 100%; }
.gb-hero-carousel .swiper-pagination-bullet {
  background: var(--phoenix-body-bg);
  opacity: 0.6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.gb-hero-carousel .swiper-pagination-bullet-active {
  background: var(--phoenix-primary);
  opacity: 1;
}

/* ---------- MX5: landing-page hero opener ---------- */
.gb-page-hero__lead {
  max-width: 620px;
}
.gb-page-hero--branded {
  --gb-page-accent: var(--phoenix-primary);
  border-radius: 1rem;
  padding: 2.75rem 1.5rem;
  margin-top: 0.25rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gb-page-accent) 13%, transparent), transparent 85%);
}
.gb-page-hero__badge {
  display: inline-block;
  background: var(--gb-page-accent, var(--phoenix-primary));
  color: #fff;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.95rem;
  border-radius: 2rem;
  margin-bottom: 0.9rem;
}

/* ---------- Draft preview ribbon ---------- */
.gb-preview-ribbon {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: repeating-linear-gradient(45deg, #f5803e, #f5803e 12px, #e8722f 12px, #e8722f 24px);
  color: #fff;
  letter-spacing: 0.01em;
}

/* ---------- Flash-sale (countdown deal) section ---------- */
.gb-flash-bar {
  background: linear-gradient(90deg, #e63757 0%, #f5803e 100%);
  color: #fff;
}
.gb-flash-bar .fa-bolt { color: #ffe066; }
.gb-flash-countdown {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.gb-urgency .progress { background: rgba(230, 55, 87, 0.15); }

/* ---------- Phase 5 polish: image category tiles + micro-interactions ---------- */
.gb-category-tile--image {
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  overflow: hidden;
  background: var(--phoenix-body-highlight-bg, #fff);
}
.gb-category-tile--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gb-category-item:hover .gb-category-tile--image {
  background: var(--phoenix-body-highlight-bg, #fff);
  color: inherit;
}

/* Product-card hover lift (subtle, GPU-friendly). */
.product-card-container {
  transition: transform var(--gb-motion-fast) var(--gb-ease), box-shadow var(--gb-motion-fast) var(--gb-ease);
  background-color: transparent;
}
.product-card-container .product-card {
  background-color: transparent !important;
}
.product-card-container:hover {
  transform: translateY(-4px);
  /* box-shadow: var(--gb-shadow-lift); */
  /* background-color: transparent; */
}
.product-card-container:hover .product-card {
  background-color: transparent !important;
}

/* Section rhythm + gentle fade/rise on first paint. */
.gb-merch-section {
  margin-bottom: var(--gb-section-gap);
}

/* ---------- Scroll reveal (M7 motion) ----------
   Blocks ease in as they enter the viewport. Guarded by html.js so no-JS users
   always see content, and by prefers-reduced-motion so it respects the OS. */
@media (prefers-reduced-motion: no-preference) {
  html.js .gb-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--gb-motion-slow) var(--gb-ease), transform var(--gb-motion-slow) var(--gb-ease);
    will-change: opacity, transform;
  }
  html.js .gb-reveal.gb-reveal--in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Editorial (story) blocks ---------- */
.gb-editorial {
  background: var(--phoenix-body-highlight-bg, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--phoenix-border-color-translucent);
}
.gb-editorial--accent {
  background: var(--phoenix-primary);
  border: 0;
  color: #fff;
}
.gb-editorial--accent .gb-editorial__eyebrow,
.gb-editorial--accent .gb-editorial__body { color: rgba(255, 255, 255, 0.9) !important; }
.gb-editorial--accent .btn-primary { background: #fff; border-color: #fff; color: var(--phoenix-primary); }
.gb-editorial__eyebrow { letter-spacing: 0.12em; color: var(--phoenix-primary); }

.gb-editorial-media {
  border: 1px solid var(--phoenix-border-color-translucent);
  background: var(--phoenix-body-bg);
  box-shadow: var(--gb-shadow-lift);
}
.gb-editorial-media__figure {
  min-height: 240px;
  background-size: cover;
  background-position: center;
  background-color: var(--phoenix-body-highlight-bg, #eef0f3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--phoenix-quaternary-color);
  font-size: 2rem;
}
@media (min-width: 768px) {
  .gb-editorial-media__figure { min-height: 340px; }
}

/* Horizontal-scroll affordance: fade the trailing edge on viewports where the
   carousel arrows are hidden, hinting there is more content to swipe. */
@media (max-width: 991.98px) {
  .gb-category-strip,
  .gb-merch-section .swiper {
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
  }
}

/* ---------- Product carousel arrows ---------- */
.products-slider { position: relative; }
.products-slider .swiper-button-next,
.products-slider .swiper-button-prev {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--phoenix-body-bg);
  border: 1px solid var(--phoenix-border-color-translucent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  color: var(--phoenix-primary);
}
.products-slider .swiper-button-next::after,
.products-slider .swiper-button-prev::after {
  font-size: 0.85rem;
  font-weight: 700;
}
.products-slider .swiper-button-disabled { opacity: 0; }
.products-slider .swiper-slide { height: auto; }

.related-products-slider {
  overflow: hidden;
  padding: 0.25rem 2.75rem 0.35rem;
}

.related-products-slider .swiper {
  overflow: visible;
}

.related-products-slider .swiper-slide {
  height: auto;
}

.related-products-slider .product-card-container {
  justify-content: stretch;
}

.related-products-slider .product-card {
  width: 100%;
}

.related-products-slider .related-products-nav [class*=swiper-] {
  top: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--phoenix-border-color-translucent);
  border-radius: 50%;
  color: var(--phoenix-primary);
  background: var(--phoenix-emphasis-bg);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  transition:
    transform 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

.related-products-slider .related-products-nav [class*=swiper-]:hover,
.related-products-slider .related-products-nav [class*=swiper-]:focus {
  color: #fff;
  background: var(--phoenix-primary);
  border-color: var(--phoenix-primary);
  transform: translateY(-50%) scale(1.04);
}

.related-products-slider .related-products-nav .swiper-button-prev {
  left: 0.25rem;
}

.related-products-slider .related-products-nav .swiper-button-next {
  right: 0.25rem;
}

.related-products-slider .related-products-nav .swiper-button-disabled {
  opacity: 0.35;
}

.related-products-slider .related-products-nav .fas {
  font-size: 0.95rem;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .related-products-slider {
    padding-inline: 0;
  }

  .related-products-slider .related-products-nav {
    display: none;
  }
}

/* ---------- Product filter page: Phoenix template glue ---------- */
.gb-template-product-media {
  /* Uniform 1:1 aspect-ratio box — all product images occupy identical space
     regardless of whether the source is landscape, portrait, or square.
     object-fit:contain keeps the full image visible with no cropping. */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow: hidden;
  background: var(--phoenix-body-highlight-bg, rgba(0,0,0,0.02));
}

.gb-template-product-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gb-template-cart-button {
  min-height: 2.25rem;
}

.product-card form {
  pointer-events: auto;
}

.product-card .stretched-link::after {
  z-index: 1;
}

/* ---------- MX2: fluid product grid ----------
   Replaces rigid Bootstrap column tiers (col-6 / md-4 / lg-3 / xxl-2) with a
   grid that fills the available width — ~2 cards on phones scaling smoothly to
   6 on wide desktops, with no breakpoint cliffs. auto-fill derives the count
   from the space available; the Bootstrap container caps the width so it never
   over-multiplies on ultra-wide screens. min(100%, …) keeps a single card from
   overflowing a very narrow column. Cards stretch to equal heights for free. */
.gb-product-grid {
  --gb-card-min: clamp(10rem, 8rem + 8vw, 12.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--gb-card-min)), 1fr));
  gap: 1.75rem 0.85rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .gb-product-grid {
    gap: 2.25rem 1rem;
  }
}

/* =============================================================
   GoBuy Premium Wizard Stepper
   ============================================================= */

/* ---- Vertical Wizard: body LEFT, steps RIGHT ---- */
.gb-wizard {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  width: 100%;
}

/* Form content (left, grows) */
.gb-wizard-body {
  flex: 1;
  min-width: 0;
  order: 1;
}

/* Stepper sidebar (right, fixed width, sticky) */
.gb-wizard-steps {
  flex: 0 0 190px;
  max-width: 190px;
  list-style: none;
  padding: 1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  order: 2;
  position: sticky;
  top: 1.5rem;
  border: 1px solid var(--phoenix-border-color-translucent);
  border-radius: 0.75rem;
  background: var(--phoenix-body-tertiary-bg);
}

/* Nav footer sits below form body */
.gb-wizard-nav-wrap {
  order: 3;
  width: 100%;
}

/* ---- Step Item ---- */
.gb-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  position: relative;
  padding-bottom: 1.75rem;
  cursor: pointer;
}

/* Vertical connector line */
.gb-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.0625rem;  /* half of 2.125rem circle */
  top: 2.4rem;
  bottom: 0;
  width: 2px;
  background: var(--phoenix-border-color-translucent);
  transition: background 0.3s ease;
  transform: translateX(-50%);
}

.gb-step.is-done:not(:last-child)::after {
  background: var(--phoenix-primary);
}

/* ---- Circle ---- */
.gb-step-circle {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8rem;
  border: 2px solid var(--phoenix-border-color-translucent);
  background: var(--phoenix-body-bg);
  color: var(--phoenix-secondary-color);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 1;
}

.gb-step.is-done .gb-step-circle {
  background: var(--phoenix-primary);
  border-color: var(--phoenix-primary);
  color: #fff;
}

.gb-step.is-active .gb-step-circle {
  background: var(--phoenix-primary-bg-subtle);
  border-color: var(--phoenix-primary);
  color: var(--phoenix-primary);
  box-shadow: 0 0 0 4px rgba(var(--phoenix-primary-rgb, 94, 95, 213), 0.18);
}

/* Done: show checkmark, hide icon */
.gb-step.is-done .gb-step-circle::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.7rem;
}

.gb-step.is-done .gb-step-circle i { display: none; }

/* ---- Label ---- */
.gb-step-label {
  display: flex;
  flex-direction: column;
  padding-top: 0.25rem;
  min-width: 0;
}

.gb-step-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--phoenix-secondary-color);
  transition: color 0.2s ease;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gb-step.is-active .gb-step-title  { color: var(--phoenix-primary); }
.gb-step.is-done   .gb-step-title  { color: var(--phoenix-body-emphasis-color); }

.gb-step-subtitle {
  font-size: 0.7rem;
  color: var(--phoenix-tertiary-color);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Pane ---- */
.gb-step-pane {
  display: none;
  animation: gbPaneFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.gb-step-pane.is-active { display: block; }

@keyframes gbPaneFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Nav footer ---- */
.gb-wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--phoenix-border-color-translucent);
}

.gb-wizard-nav .btn-prev {
  font-size: 0.8125rem;
  color: var(--phoenix-secondary-color);
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.gb-wizard-nav .btn-prev:hover { color: var(--phoenix-body-emphasis-color); }

/* ---- Mobile: steps collapse to horizontal bar at TOP ---- */
@media (max-width: 767.98px) {
  .gb-wizard {
    flex-direction: column;
    gap: 1.25rem;
  }

  .gb-wizard-body  { order: 2; width: 100%; }

  .gb-wizard-steps {
    order: 1;
    flex: none;
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    position: static;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    justify-content: space-between;
    gap: 0;
  }

  .gb-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
    padding-inline: 0.25rem;
    flex: 1;
    min-width: 64px;
  }

  /* Horizontal connector on mobile */
  .gb-step:not(:last-child)::after {
    left: 50%;
    top: 1.0625rem;
    bottom: auto;
    width: calc(100% - 2rem);
    height: 2px;
    transform: none;
  }

  .gb-step-label { align-items: center; padding-top: 0.4rem; }

  .gb-step-subtitle { display: none; }
}

/* ---- Form group polish ---- */
.gb-form-section {
  border: 1px solid var(--phoenix-border-color-translucent);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.gb-form-section-header {
  background: var(--phoenix-body-tertiary-bg);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--phoenix-border-color-translucent);
}

.gb-form-section-header h5 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
  color: var(--phoenix-body-emphasis-color);
}

.gb-form-section-body {
  padding: 1.25rem;
}

.gb-form-section-footer {
  background: var(--phoenix-body-tertiary-bg);
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--phoenix-border-color-translucent);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ---- Form label polish ---- */
.gb-form-section .form-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--phoenix-secondary-color);
  margin-bottom: 0.4rem;
}

.gb-form-section .form-control,
.gb-form-section .form-select {
  border-radius: 0.5rem;
  border: 1.5px solid var(--phoenix-border-color-translucent);
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: var(--phoenix-body-bg);
}

.gb-form-section .form-control:focus,
.gb-form-section .form-select:focus {
  border-color: var(--phoenix-primary);
  box-shadow: 0 0 0 3px rgba(var(--phoenix-primary-rgb, 94, 95, 213), 0.15);
}

.gb-form-section .form-control.is-valid {
  border-color: var(--phoenix-success);
}

.gb-form-section .form-control.is-invalid {
  border-color: var(--phoenix-danger);
}

/* =============================================================
   Theme Preference Picker (Account Settings — Preferences step)
   ============================================================= */

.gb-theme-option {
  cursor: pointer;
  display: block;
}

.gb-theme-card {
  padding: 0.875rem 1rem;
  border: 2px solid var(--phoenix-border-color-translucent);
  border-radius: 0.625rem;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  background: var(--phoenix-body-bg);
}

.gb-theme-card:hover {
  border-color: var(--phoenix-primary-bg-subtle);
  background: var(--phoenix-primary-bg-subtle);
}

.gb-theme-card.active {
  border-color: var(--phoenix-primary);
  background: var(--phoenix-primary-bg-subtle);
  box-shadow: 0 0 0 3px rgba(var(--phoenix-primary-rgb, 94, 95, 213), 0.12);
}

.gb-theme-check {
  opacity: 0;
  transition: opacity 0.18s ease;
  font-size: 1.1rem;
}

/* ---- Mini theme preview swatch ---- */
.gb-theme-preview {
  width: 3rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  border: 1px solid var(--phoenix-border-color-translucent);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.gb-theme-preview-header {
  flex: 0 0 0.6rem;
  background: #e9ecef;
}

.gb-theme-preview-body {
  flex: 1;
  background: #fff;
}

.gb-theme-preview-dark .gb-theme-preview-header {
  background: #1e2130;
}

.gb-theme-preview-dark .gb-theme-preview-body {
  background: #13151f;
}

/* System: split half-light / half-dark */
.gb-theme-preview-system {
  flex-direction: row;
}

.gb-theme-preview-half {
  flex: 1;
  height: 100%;
}

.gb-theme-preview-half-light { background: #fff; }
.gb-theme-preview-half-dark  { background: #13151f; }

/* =============================================================
   Storefront Nav — Mobile fixes
   ============================================================= */

/* Prevent secondary nav from wrapping awkwardly */
.navbar-responsive-navitems,
nav[aria-label="Category and page links"] {
  overflow-x: clip;
}

nav[aria-label="Category and page links"] .container-small > div {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
}

nav[aria-label="Category and page links"] .container-small > div::-webkit-scrollbar {
  display: none;
}

/* Ensure mega-menu panel doesn't overflow viewport on mobile */
@media (max-width: 767.98px) {
  #desktopMegaMenu {
    width: calc(100vw - 1.5rem) !important;
    max-width: 100vw !important;
    left: 0 !important;
  }

  /* Hide cart link from secondary bar on very small screens (already in top icons) */
  nav[aria-label="Category and page links"] .d-none.d-sm-block {
    display: none !important;
  }
}

/* Logo sizing */
.logo-text {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Dropdown profile min-width guard */
.dropdown-profile {
  min-width: 260px;
  max-width: 320px;
}


/* ---------- Wishlist (unified DB + guest) ---------- */
.wishlist-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--phoenix-danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* Persistent "saved" state for any wishlist heart button (cards + PDP button) */
.is-wished .far.fa-heart,
.is-wished .fa-heart.d-none-hover { display: none !important; }
.is-wished .fas.fa-heart,
.is-wished .fa-heart.d-block-hover { display: inline-block !important; color: var(--phoenix-danger) !important; }
.is-wished .wishlist-icon { color: var(--phoenix-danger) !important; }
/* Ensure the card heart is always clickable above the stretched-link overlay. */
.product-card .btn-wish { z-index: 5; }

/* ---------- Predictive search ---------- */
.gb-search { }
.gb-search-input { padding-left: 2.4rem; border-radius: 999px; }
.gb-search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--phoenix-tertiary-color);
  pointer-events: none;
  font-size: 0.85rem;
}
.gb-search-panel {
  position: absolute !important;
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 0.75rem;
}
.gb-search-panel .dropdown-item.active,
.gb-search-panel .dropdown-item:hover { background: var(--phoenix-primary-bg-subtle); }
.gb-search-panel mark { color: inherit; border-radius: 2px; }

/* Progressive enhancement: hide no-JS-only controls when JS is available. */
.js [data-js-hidden] { display: none !important; }

/* =====================================================================
   Skeleton Loaders — CLS-free loading states for product carousels.
   Dimensions match the final card so there is zero layout shift.
   ===================================================================== */
@keyframes gbShimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.gb-skeleton {
  background: linear-gradient(
    90deg,
    var(--phoenix-body-highlight-bg, #eef0f3) 25%,
    var(--phoenix-body-bg, #f8f9fa) 37%,
    var(--phoenix-body-highlight-bg, #eef0f3) 63%
  );
  background-size: 1200px 100%;
  animation: gbShimmer 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

.gb-skeleton-card {
  border: 1px solid var(--phoenix-border-color-translucent);
  border-radius: 0.75rem;
  overflow: hidden;
  padding: 0.5rem;
  height: 100%;
}

.gb-skeleton-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}

.gb-skeleton-line {
  height: 0.85rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.gb-skeleton-line--short { width: 55%; }
.gb-skeleton-line--medium { width: 75%; }
.gb-skeleton-line--long { width: 100%; }

.gb-skeleton-btn {
  height: 2.25rem;
  border-radius: 0.375rem;
  width: 100%;
  margin-top: 0.75rem;
}

/* Swiper skeleton wrapper — pre-occupies carousel space before Swiper init */
.gb-swiper-skeleton {
  display: flex;
  gap: 12px;
  overflow: hidden;
}

.gb-swiper-skeleton > .gb-skeleton-card {
  flex: 0 0 calc(50% - 6px);
}

@media (min-width: 576px) {
  .gb-swiper-skeleton > .gb-skeleton-card { flex: 0 0 calc(44% - 6px); }
}
@media (min-width: 768px) {
  .gb-swiper-skeleton > .gb-skeleton-card { flex: 0 0 calc(32% - 6px); }
}
@media (min-width: 992px) {
  .gb-swiper-skeleton > .gb-skeleton-card { flex: 0 0 calc(25% - 6px); }
}
@media (min-width: 1200px) {
  .gb-swiper-skeleton > .gb-skeleton-card { flex: 0 0 calc(19.5% - 6px); }
}

/* Hide skeleton once Swiper has initialised */
.swiper-initialized + .gb-swiper-skeleton,
.gb-swiper-skeleton[data-swiper-done] {
  display: none;
}

/* MX3: predictive-search loading — a top progress shimmer shown while a
   suggestion request is in flight over already-visible results (no flicker). */
.gb-search-loading {
  position: relative;
}
.gb-search-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--phoenix-primary, #3874ff), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: gbSearchBar 0.9s linear infinite;
}
@keyframes gbSearchBar {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-search-loading::after { animation: none; opacity: 0.6; background-position: 50% 0; }
}

/* ---------- ProductGrid equal-height cards in grid sections ---------- */
.gb-merch-section .row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.gb-merch-section .row > [class*='col-'] > * {
  flex: 1;
}

/* ---------- Section type visual differentiation ---------- */
/* ProductRail gets a subtle bolt icon styling via the header — no
   background change, just a colour accent on the title already present */

/* ---------- CategoryGrid — desktop scroll affordance ---------- */
.gb-category-strip-wrap {
  position: relative;
}

/* =====================================================================
   EditorialMedia — proper <img> rendering (replacing background-image)
   ===================================================================== */
.gb-editorial-media__figure {
  position: relative;
  overflow: hidden;
  min-height: 250px;
}
@media (min-width: 768px) {
  .gb-editorial-media__figure {
    min-height: 250px;
  }
}
@media (min-width: 1200px) {
  .gb-editorial-media__figure {
    min-height: 300px;
  }
}

.gb-editorial-media__figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placeholder when no image is uploaded */
.gb-editorial-media__figure--empty {
  background: var(--phoenix-body-highlight-bg, #eef0f3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--phoenix-quaternary-color);
  font-size: 2.5rem;
}

/* =====================================================================
   Flash Sale — product badge overlay
   ===================================================================== */
.gb-sale-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  background: linear-gradient(90deg, #e63757, #f5803e);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  pointer-events: none;
}

/* =====================================================================
   Lazy images — reserve the box with a neutral tint so lazy/async
   decoding never flashes empty and never shifts layout (CLS = 0).
   Dimensions are set inline (width/height) on each <img>.
   ===================================================================== */
.gb-lazy-img {
  background-color: var(--phoenix-gray-200, #eff2f6);
  object-fit: cover;
}

/* =====================================================================
   Brand Rail — premium treatment
   ===================================================================== */
.gb-brand-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.gb-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--phoenix-border-color-translucent);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--phoenix-secondary-color);
  text-decoration: none;
  background: var(--phoenix-body-bg);
  transition: border-color var(--gb-motion-fast) var(--gb-ease),
              background var(--gb-motion-fast) var(--gb-ease),
              color var(--gb-motion-fast) var(--gb-ease),
              box-shadow var(--gb-motion-fast) var(--gb-ease);
}

.gb-brand-pill:hover,
.gb-brand-pill:focus {
  border-color: var(--phoenix-primary);
  color: var(--phoenix-primary);
  background: var(--phoenix-primary-bg-subtle);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* =====================================================================
   Section Vertical Rhythm
   Standardised spacing between merchandising sections.
   Overrides the default theme <section> padding to prevent huge gaps.
   ===================================================================== */
.gb-merch-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .gb-merch-section {
    margin-bottom: 3rem;
  }
}
@media (min-width: 1200px) {
  .gb-merch-section {
    margin-bottom: 4rem;
  }
}

.gb-merch-section:last-child {
  margin-bottom: 0;
}



/* =====================================================================
   Quintessential Mart — brand lockup (<x-brand-logo>)
   ===================================================================== */
.gb-brand { line-height: 0; text-decoration: none; }
.gb-brand-lockup { width: auto; max-width: 100%; display: block; }
.gb-brand--dark { display: none; }
.gb-brand-icon { display: none; flex: 0 0 auto; }

/* Dark theme → show the dark lockup (white wordmark) */
[data-bs-theme="dark"] .gb-brand--light { display: none; }
[data-bs-theme="dark"] .gb-brand--dark { display: block; }

/* Phones: the compact variant collapses to the icon mark only */
/* @media (max-width: 575.98px) 
{
  .gb-brand--compact .gb-brand-lockup,
  [data-bs-theme="dark"] .gb-brand--compact .gb-brand-lockup { display: none !important; }
  .gb-brand--compact .gb-brand-icon { display: inline-block; }
} */

/* ---------- Footer polish ---------- */
.gb-footer-brand {
  max-width: 220px;
}
.gb-footer-brand-copy {
  max-width: 22rem;
}
.gb-footer-categories {
  margin-bottom: 0;
  display: grid;
  gap: 0.35rem;
}
.gb-footer-categories li {
  margin-bottom: 0;
}
.gb-footer-subscribe__group {
  display: flex;
  gap: 0.75rem;
}
.gb-footer-subscribe .form-control,
.gb-footer-subscribe .btn {
  min-height: 2.875rem;
}
/* Make the storefront brand read stronger on mobile once the theme toggle is removed. */
@media (max-width: 767.98px) {
  .gb-brand--nav .gb-brand-lockup {
    height: 30px !important;
  }
}

/* Ultra-compact phones: collapse the wordmark to the icon mark only. */
@media (max-width: 359.98px) {
  .gb-brand--nav .gb-brand--light,
  .gb-brand--nav .gb-brand--dark {
    display: none !important;
  }

  .gb-brand--nav .gb-brand-icon {
    display: block !important;
  }
}
@media (max-width: 575.98px) {
  .gb-footer-brand {
    max-width: 240px;
  }
  .gb-footer-subscribe__group {
    flex-direction: column;
  }
  .gb-footer-subscribe .form-control,
  .gb-footer-subscribe .btn {
    width: 100%;
    min-height: 3rem;
  }
}


/* ==========================================================================
   Cart drawer + product-card stepper
   ========================================================================== */

/* Slide-over cart. The panel is always in the DOM and slides on `transform`;
   `.gb-drawer-opened` is the single flag Alpine toggles. Visibility (not display)
   hides it, so the transform can animate and it stays out of the a11y tree and
   untabbable while closed. */
.gb-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 1045;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.gb-drawer-scrim-shown {
  opacity: 1;
  visibility: visible;
}

.gb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1046;
  width: 100%;
  max-width: 25rem;
  display: flex;
  flex-direction: column;
  background: var(--phoenix-body-bg);
  border-left: 1px solid var(--phoenix-border-color-translucent);
  box-shadow: -0.5rem 0 2rem rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease-out, visibility 0.25s;
}

.gb-drawer-opened {
  transform: translateX(0);
  visibility: visible;
}

/* The body is the only scrolling region, so the header and checkout footer stay
   put — the shopper can always reach Checkout without scrolling back. */
.gb-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Don't let the page scroll behind the open drawer. */
body.gb-drawer-open {
  overflow: hidden;
}

/* Full-width sheet on phones, where 25rem would leave a useless sliver. */
@media (max-width: 575.98px) {
  .gb-drawer {
    max-width: 100%;
  }
}

/* Keep the stepper exactly the height of the button it replaces, so a card does
   not resize when the first unit is added. */
.gb-stepper-slot .btn {
  min-height: 2rem;
}

.gb-stepper [data-cart-qty] {
  /* The count is a label, not a control: it must not look pressable. */
  opacity: 1;
  pointer-events: none;
}

/* A cart with items in it nudges occasionally — a reminder, never a demand.
   Long gap, tiny movement, and it stops entirely for anyone who has asked for
   reduced motion. */
@keyframes gb-cart-nudge {
  0%, 92%, 100% { transform: translateY(0) rotate(0); }
  94% { transform: translateY(-2px) rotate(-7deg); }
  96% { transform: translateY(-2px) rotate(6deg); }
  98% { transform: translateY(0) rotate(-3deg); }
}

[data-gb-cart-nudge] .fa-cart-shopping {
  animation: gb-cart-nudge 9s ease-in-out infinite;
  transform-origin: 50% 60%;
}

@media (prefers-reduced-motion: reduce) {
  [data-gb-cart-nudge] .fa-cart-shopping {
    animation: none;
  }
  .gb-drawer,
  .gb-drawer-scrim {
    transition: none;
  }
}

/* ==========================================================================
   Product listing: list view
   ==========================================================================
   Grid and list render the SAME card. The container class pivots the layout on
   the card's gb-card-* joints, so there is exactly one card markup to maintain. */

/* The card's own layout — deliberately NOT Bootstrap's d-flex/flex-column
   utilities, which are !important and so cannot be re-pointed by the list view.
   This is the grid arrangement, identical to what those utilities produced. */
.gb-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* The description only earns its space in list view. */
.gb-card-desc {
  display: none;
}

.gb-product-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gb-product-list .product-card-container {
  border: 1px solid var(--phoenix-border-color-translucent);
  border-radius: 0.5rem;
  padding: 0.75rem;
  /* The grid centres a card and caps it at 350px, which is right for a grid cell
     and wrong for a full-width row — a row must span the listing. */
  justify-content: stretch;
}

/* !important is not laziness here: theme.min.css ships
   `.product-card-container .product-card { max-width: 350px !important }`, and a
   vendor !important can only be answered in kind. */
.gb-product-list .product-card-container .product-card {
  max-width: none !important;
  width: 100%;
}

.gb-product-list .gb-card {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.gb-product-list .gb-card-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex: 1 1 auto;
  /* Without this a long product name refuses to clamp and blows out the row. */
  min-width: 0;
}

.gb-product-list .gb-card-media {
  flex: 0 0 6.5rem;
  width: 6.5rem;
  margin-bottom: 0 !important;
}

.gb-product-list .gb-card-body {
  min-width: 0;
}

.gb-product-list .gb-card-desc {
  display: -webkit-box;
}

.gb-product-list .gb-card-footer {
  flex: 0 0 12rem;
}

/* Phones: the two-column row would squeeze both halves, so stack image beside
   the text but drop the price/action block onto its own line. */
@media (max-width: 575.98px) {
  .gb-product-list .gb-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .gb-product-list .gb-card-footer {
    flex: 1 1 auto;
  }
  .gb-product-list .gb-card-media {
    flex-basis: 5rem;
    width: 5rem;
  }
}

/* The layout switch itself. */
.gb-view-toggle .btn.active {
  background-color: var(--phoenix-primary);
  border-color: var(--phoenix-primary);
  color: #fff;
}

/* Alpine's x-cloak: hide until Alpine initialises. Defined here because the
   storefront does not load the admin picker stylesheet that also declares it. */
[x-cloak] {
  display: none !important;
}

/* Four-line clamp for the product description's "Show more". Applied by Alpine
   rather than by default, so with JS off the full copy is simply visible. */
.gb-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================================================
   Announcement bar
   -----------------------------------------------------------------------------
   The site-wide strip above the nav. Not sticky: it is an announcement, not a
   control, and a permanently pinned bar steals vertical space on the phones most
   of this shop's customers browse on.
   ============================================================================= */
.gb-announce {
    position: relative;
    z-index: 1030; /* above the nav's own stacking context, below modals */
    color: #fff;
}

.gb-announce__inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 1540px;
    margin: 0 auto;
    padding: .5rem 1rem;
}

.gb-announce__text {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: .8125rem;
    line-height: 1.4;
}

.gb-announce__sub {
    opacity: .85;
    margin-left: .375rem;
}

.gb-announce__cta {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: .5rem;
    white-space: nowrap;
}

.gb-announce__cta:hover {
    color: #fff;
    opacity: .85;
}

.gb-announce__close {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: #fff;
    opacity: .7;
    padding: .25rem .375rem;
    line-height: 1;
    border-radius: .25rem;
    cursor: pointer;
}

.gb-announce__close:hover { opacity: 1; }

/* Keyboard users must be able to see what they are about to dismiss. */
.gb-announce__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    opacity: 1;
}

@media (max-width: 575.98px) {
    .gb-announce__text { font-size: .75rem; text-align: left; }
    .gb-announce__sub { display: none; } /* the headline is the message on a phone */
}