/*
Theme Name: Free The Music
Theme URI: https://freethemusic.life
Author: Matteo Maclean
Author URI: https://freethemusic.life
Description: The official Free The Music theme — an Elementor-friendly classic WordPress theme with the FTM design system baked in. Navy + cream palette with rainbow accents from the FTM logo, Prequel display font for titles, Inter for body text, soft layered shadows, and a library of drop-in utility classes (rainbow dividers, pills, cards, hero kickers, rainbow-masked numbers, and more). Ships with full-width blank and canvas templates so Elementor drives your page design, while the theme carries the brand.
Version: 1.3.5
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: freethemusic
Tags: one-column, custom-menu, custom-logo, editor-style, featured-images, threaded-comments, translation-ready, wide-blocks, block-styles
*/

/* =========================================================================
   FREE THE MUSIC THEME — STYLESHEET
   Load order: (1) tokens, (2) base/reset, (3) typography, (4) layout,
   (5) FTM utility components, (6) WordPress core classes, (7) responsive.
   ========================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  --ftm-navy:        #1A2747;
  --ftm-navy-soft:   #2E3C63;
  --ftm-bg:          #EEF1F5;
  --ftm-bg-warm:     #F6F3EC;
  --ftm-card:        #FFFFFF;
  --ftm-muted:       #6B7280;
  --ftm-line:        #E4E8EE;
  --ftm-gold:        #F2B230;

  --ftm-rainbow: linear-gradient(90deg,
    #E94E3D 0%, #F2883A 16%, #F2C544 32%, #6FB24A 48%,
    #3DA3B5 64%, #3B6FB8 80%, #7E4BA8 100%);

  --shadow-sm: 0 1px 2px rgba(26,39,71,0.06), 0 2px 8px rgba(26,39,71,0.04);
  --shadow-md: 0 4px 12px rgba(26,39,71,0.08), 0 12px 32px rgba(26,39,71,0.06);
  --shadow-lg: 0 8px 24px rgba(26,39,71,0.14), 0 28px 60px rgba(26,39,71,0.12);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --container-wide:    1280px;
  --container-default: 1100px;
  --container-narrow:  760px;
}

/* ---------- 2. Base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--ftm-bg);
  color: var(--ftm-navy);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--ftm-navy);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
a:hover { opacity: .75; }

hr {
  border: none;
  height: 1px;
  background: var(--ftm-line);
  margin: 32px 0;
}

/* ---------- 3. Typography ---------- */
/* Prequel is declared via @font-face inside functions.php so the URL is
   correctly resolved to the theme's /assets/fonts/ directory. */

h1, h2, h3, h4, h5, h6,
.ftm-title {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  color: var(--ftm-navy);
  margin: 0 0 .5em;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

h1 { font-size: clamp(36px, 5.5vw, 56px); }
h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: clamp(24px, 3.2vw, 32px); }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ftm-muted); }

p, li, label, input, select, textarea, button, span, blockquote, figcaption {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

p { margin: 0 0 1em; color: var(--ftm-navy-soft); }

blockquote {
  border-left: 3px solid transparent;
  border-image: var(--ftm-rainbow) 1;
  padding: 8px 0 8px 24px;
  margin: 24px 0;
  font-style: italic;
  color: var(--ftm-navy-soft);
}

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--ftm-bg-warm);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.92em;
}
pre {
  padding: 16px 20px;
  overflow-x: auto;
  border: 1px solid var(--ftm-line);
}

::selection { background: rgba(26,39,71,0.12); }

/* ---------- 4. Layout ---------- */
.ftm-container {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: 0 24px;
}
.ftm-container--wide   { max-width: var(--container-wide); }
.ftm-container--narrow { max-width: var(--container-narrow); }

.ftm-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Prevent Elementor children with hard-coded pixel widths from
     stretching the site container past the viewport on mobile. Without
     these, any wide child (e.g. a hero with min-width: 1200px) causes
     the ENTIRE page to become that wide, and mobile users see their
     viewport showing only a slice of empty/off-screen layout. */
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
.ftm-site__main {
  flex: 1;
  padding: 48px 0 80px;
  /* Same protection at the main wrapper — flex children need min-width:0
     or they expand to fit their content's intrinsic width. */
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
/* Also prevent horizontal scroll at the document root on mobile */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* ----- Header ----- */
.ftm-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(238, 241, 245, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ftm-line);
}
.ftm-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  max-width: var(--container-wide);
  margin: 0 auto;
}
.ftm-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ftm-navy);
}
.ftm-header__brand img { max-height: 44px; width: auto; }
.ftm-header__brand-text {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-size: 22px;
  letter-spacing: 0.02em;
  /* Rainbow site name — uses the FTM logo gradient clipped to the text */
  background: var(--ftm-rainbow);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* Fallback navy for browsers that don't support background-clip: text */
  background-color: transparent;
}
/* Graceful fallback for ancient browsers */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ftm-header__brand-text {
    color: var(--ftm-navy);
    background: none;
  }
}
.ftm-header__nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ftm-header__nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ftm-navy);
}
.ftm-header__nav .current-menu-item > a,
.ftm-header__nav .current_page_item > a { color: var(--ftm-navy); position: relative; }
.ftm-header__nav .current-menu-item > a::after,
.ftm-header__nav .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--ftm-rainbow);
  border-radius: 2px;
}
.ftm-header__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ftm-line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}
.ftm-header__toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ftm-navy);
  margin: 4px 0;
  border-radius: 2px;
}

/* ----- Footer ----- */
.ftm-footer {
  background: var(--ftm-navy);
  color: #CFD5E3;
  padding: 56px 24px 32px;
  margin-top: 64px;
}
.ftm-footer a { color: #CFD5E3; }
.ftm-footer a:hover { color: #fff; opacity: 1; }
.ftm-footer__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
}
.ftm-footer h4 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 12px;
}
.ftm-footer__strip {
  height: 4px;
  background: var(--ftm-rainbow);
  border-radius: 2px;
  margin: 40px auto 24px;
  max-width: var(--container-wide);
}
.ftm-footer__meta {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #9AA3BA;
}

/* ----- Posts / content area ----- */
.ftm-post {
  background: var(--ftm-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 40px;
  margin-bottom: 32px;
}
.ftm-post__meta {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ftm-muted);
  margin-bottom: 12px;
}
.ftm-post__title { margin-top: 4px; }
.ftm-post__excerpt { color: var(--ftm-navy-soft); }
.ftm-post__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-weight: 600;
  color: var(--ftm-navy);
}
.ftm-post__more::after { content: "→"; transition: transform .2s ease; }
.ftm-post__more:hover::after { transform: translateX(4px); }

.ftm-post__thumb {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  aspect-ratio: 16 / 9;
  background: var(--ftm-bg-warm);
}
.ftm-post__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.ftm-post:hover .ftm-post__thumb img { transform: scale(1.03); }

/* ----- Pagination ----- */
.ftm-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 32px 0;
}
.ftm-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--ftm-card);
  border: 1px solid var(--ftm-line);
  color: var(--ftm-navy);
  font-weight: 500;
}
.ftm-pagination .page-numbers.current {
  background: var(--ftm-navy);
  color: #fff;
  border-color: var(--ftm-navy);
}

/* ---------- 5. FTM utility components ---------- */
/* Use these class names inside Elementor HTML blocks or anywhere on the site
   for a consistent on-brand look. */

/* Buttons */
.ftm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--ftm-navy);
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: var(--shadow-sm);
  text-decoration: none !important;
}
.ftm-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  opacity: 1;
  background: var(--ftm-navy-soft);
}
.ftm-btn--ghost {
  background: transparent;
  color: var(--ftm-navy) !important;
  border: 1px solid var(--ftm-navy);
}
.ftm-btn--ghost:hover { background: var(--ftm-navy); color: #fff !important; }
.ftm-btn--sm { padding: 8px 16px; font-size: 13px; }
.ftm-btn--lg { padding: 16px 32px; font-size: 16px; }

/* Cards */
.ftm-card {
  background: var(--ftm-card);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ftm-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ftm-card--featured {
  position: relative;
  overflow: hidden;
}
.ftm-card--featured::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ftm-rainbow);
}

/* Rainbow divider */
.ftm-divider {
  height: 3px;
  background: var(--ftm-rainbow);
  border-radius: 3px;
  border: none;
  margin: 40px 0;
  max-width: 120px;
}
.ftm-divider--full { max-width: none; }

/* Music-note divider */
.ftm-divider-note {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 48px 0;
  color: var(--ftm-muted);
}
.ftm-divider-note::before,
.ftm-divider-note::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ftm-line);
}
.ftm-divider-note__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ftm-card);
  border: 1px solid var(--ftm-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ftm-navy);
  box-shadow: var(--shadow-sm);
}

/* Eyebrow label */
.ftm-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ftm-muted);
  margin-bottom: 8px;
}

/* Hero kicker — small Prequel line above a title */
.ftm-kicker {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ftm-navy-soft);
  margin-bottom: 8px;
}

/* Pills */
.ftm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--ftm-bg-warm);
  font-size: 13px;
  font-weight: 500;
  color: var(--ftm-navy);
}

/* Rainbow bullet list */
.ftm-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ftm-bullets li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  color: var(--ftm-navy-soft);
}
.ftm-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background: var(--ftm-rainbow);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.3 5.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 0 1 1.4-1.4L9.6 15 18.9 5.7a1 1 0 0 1 1.4 0z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.3 5.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 0 1 1.4-1.4L9.6 15 18.9 5.7a1 1 0 0 1 1.4 0z'/></svg>") center/contain no-repeat;
}

/* Rainbow-masked number (big stat / discount) */
.ftm-rainbow-number {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400;
  font-size: clamp(72px, 12vw, 148px);
  line-height: 1;
  background: var(--ftm-rainbow);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Rainbow-glow CTA block */
.ftm-cta-glow {
  position: relative;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--ftm-card);
  border: 1px solid var(--ftm-line);
  text-align: center;
}
.ftm-cta-glow::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: var(--ftm-rainbow);
  border-radius: calc(var(--radius) + 4px);
  filter: blur(14px);
  opacity: .22;
  z-index: 0;
}
.ftm-cta-glow > * { position: relative; z-index: 1; }

/* Closing callout (navy block with rainbow strip) */
.ftm-callout {
  position: relative;
  background: var(--ftm-navy);
  color: #fff;
  padding: 40px 32px;
  border-radius: var(--radius);
  overflow: hidden;
}
.ftm-callout::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ftm-rainbow);
}
.ftm-callout h2, .ftm-callout h3, .ftm-callout p { color: #fff; }
.ftm-callout p { color: #CFD5E3; }

/* Section header w/ rainbow underline */
.ftm-section-header { text-align: center; margin-bottom: 40px; }
.ftm-section-header .ftm-divider { margin: 16px auto 0; }

/* Icon in a gradient tile */
.ftm-icon-tile {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--ftm-rainbow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
}

/* Italic note with circle-icon (disclaimer pattern) */
.ftm-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ftm-bg-warm);
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--ftm-navy-soft);
  font-size: 14px;
}
.ftm-note__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ftm-card);
  border: 1px solid var(--ftm-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-style: normal;
}

/* Grid helpers */
.ftm-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ftm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ftm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- 6. WordPress core classes ---------- */
.alignleft   { float: left; margin: 0 24px 16px 0; }
.alignright  { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 16px auto; }
.alignwide   { max-width: var(--container-wide); margin-left: auto; margin-right: auto; }
.alignfull   { max-width: 100%; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }

.wp-caption { max-width: 100%; margin: 0 0 24px; }
.wp-caption-text, .gallery-caption {
  font-size: 13px;
  color: var(--ftm-muted);
  text-align: center;
  margin-top: 8px;
}

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px; width: 1px;
  overflow: hidden;
  word-wrap: normal;
}
.screen-reader-text:focus {
  background: var(--ftm-card);
  clip: auto !important;
  color: var(--ftm-navy);
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 5px;
  line-height: 1.5;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

.sticky { position: relative; }
.bypostauthor { }

/* Comments */
.ftm-comments { margin-top: 48px; }
.ftm-comments__list { list-style: none; padding: 0; margin: 0; }
.ftm-comments .comment {
  padding: 24px;
  background: var(--ftm-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.ftm-comments .children {
  list-style: none;
  padding-left: 32px;
  margin-top: 16px;
  border-left: 2px solid var(--ftm-line);
}

/* Forms */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ftm-line);
  border-radius: var(--radius-sm);
  background: var(--ftm-card);
  color: var(--ftm-navy);
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ftm-navy);
  box-shadow: 0 0 0 3px rgba(26,39,71,0.12);
}

button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--ftm-navy);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
button:hover, input[type="submit"]:hover {
  transform: translateY(-2px);
  background: var(--ftm-navy-soft);
}

/* ---------- 7. Responsive ---------- */
@media (max-width: 960px) {
  .ftm-footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .ftm-post { padding: 28px; }
}

@media (max-width: 720px) {
  .ftm-header__nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ftm-bg);
    border-bottom: 1px solid var(--ftm-line);
    padding: 16px 24px;
  }
  .ftm-header__nav.is-open { display: block; }
  .ftm-header__nav ul { flex-direction: column; gap: 16px; }
  .ftm-header__toggle { display: block; }
  .ftm-post { padding: 24px; }
  .ftm-footer__meta { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 520px) {
  .ftm-site__main { padding: 24px 0 48px; }
  .ftm-card { padding: 24px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
 * 8. Site-specific overrides
 *
 * Hide the broken Royal Elementor Addons popup (ID 3020). This popup
 * auto-triggers on page load with empty content and locks page scrolling;
 * we hide it and restore scroll on html/body. Other popups are unaffected.
 *
 * If/when the popup is fixed or deleted in WP admin (Templates → Popups),
 * this block can be removed. Until then it keeps the site usable.
 * ------------------------------------------------------------------------- */
#wpr-popup-id-3020,
.wpr-popup-container {
  display: none !important;
  visibility: hidden !important;
}

html, body {
  overflow: auto !important;
  position: relative !important;
  /* Belt-and-braces: no matter what Elementor child is too wide, the
     browser never shows horizontal scroll and never lets content
     extend past the viewport edge on mobile. */
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* -------------------------------------------------------------------------
 * 9. Mobile-first hardening (MOBILE IS THE PRIMARY AUDIENCE)
 *
 * Most visitors arrive on phones, so these rules take priority over
 * Elementor's own mobile styling when the two conflict.
 * ------------------------------------------------------------------------- */

/* 9a. Bulletproof shop grid — overrides Elementor Kit's single-column
 *     WooCommerce catalog (which is what causes the shop to render as
 *     one stacked column on both desktop AND mobile). */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  list-style: none !important;
  /* Desktop: fit as many 220px+ products as will comfortably fit */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  /* Override Elementor's fixed widths/floats */
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* Tablets & large phones — 2 across */
@media (max-width: 720px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  /* Constrain product titles/prices so long lines don't blow the grid */
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
}

/* Very small phones (iPhone SE and smaller) — still 2 across, tighter gap */
@media (max-width: 380px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    gap: 10px !important;
  }
}

/* 9b. Mobile containment for any Elementor section with a hard-coded
 *     min-width or pixel width that overflows the viewport. Forces all
 *     direct children of the main content area to respect the viewport. */
@media (max-width: 720px) {
  .ftm-site__main > *,
  .ftm-site__main .elementor-section,
  .ftm-site__main .elementor-container,
  .ftm-site__main .elementor-column,
  .ftm-site__main .elementor-widget-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Allow images and videos to shrink without distortion */
  .ftm-site__main img,
  .ftm-site__main video,
  .ftm-site__main iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Prevent long strings (URLs, emails) from forcing horizontal scroll */
  .ftm-site__main p,
  .ftm-site__main h1,
  .ftm-site__main h2,
  .ftm-site__main h3 {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
}

/* 9c. Header brand + hamburger guaranteed visible on every phone width */
@media (max-width: 720px) {
  .ftm-header__inner {
    padding: 12px 16px !important;
    gap: 8px !important;
  }
  .ftm-header__brand-text {
    font-size: 18px !important; /* Smaller so "Free The Music Ministry" always fits */
    line-height: 1.1 !important;
  }
  .ftm-header__toggle { display: block !important; }
  .ftm-header__nav { display: none; }
  .ftm-header__nav.is-open { display: block !important; }
}

/* -------------------------------------------------------------------------
 * 10. v1.2.0 — Mobile proportion & Elementor heading fixes
 *
 * User feedback: "Mobile page is so squeezed" — large Elementor headings
 * (like "GATHERING") were overflowing the viewport on phones and the
 * overall layout felt cramped. These rules make all Elementor content
 * scale down gracefully on small screens instead of bursting out.
 * ------------------------------------------------------------------------- */

/* 10a. Elementor headings — clamp to viewport width so huge display text
 *      like "GATHERING" never overflows. Uses CSS clamp() so the heading
 *      grows with the viewport but never exceeds ~12vw on phones.
 *      Applies at any breakpoint below 980px. */
@media (max-width: 980px) {
  .ftm-site__main .elementor-heading-title,
  .ftm-site__main h1.elementor-heading-title,
  .ftm-site__main h2.elementor-heading-title,
  .ftm-site__main h3.elementor-heading-title {
    font-size: clamp(28px, 9vw, 72px) !important;
    line-height: 1.1 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
}

/* 10b. Stronger clamp on very small phones (≤420px) — "GATHERING" fits
 *      comfortably even on iPhone SE. */
@media (max-width: 420px) {
  .ftm-site__main .elementor-heading-title,
  .ftm-site__main h1.elementor-heading-title,
  .ftm-site__main h2.elementor-heading-title,
  .ftm-site__main h3.elementor-heading-title {
    font-size: clamp(22px, 10vw, 44px) !important;
    letter-spacing: 0 !important;
  }
}

/* 10c. Force ALL Elementor sections/columns/widgets to FULL width on mobile.
 *      The default Elementor behavior keeps columns at their desktop width
 *      ratios, which is what creates the "narrow squeezed column" feeling
 *      on phones. This flips every column to 100% width below 720px. */
@media (max-width: 720px) {
  .ftm-site__main .elementor-section,
  .ftm-site__main .elementor-container,
  .ftm-site__main .elementor-row,
  .ftm-site__main .elementor-column,
  .ftm-site__main .elementor-col-10,
  .ftm-site__main .elementor-col-16,
  .ftm-site__main .elementor-col-20,
  .ftm-site__main .elementor-col-25,
  .ftm-site__main .elementor-col-33,
  .ftm-site__main .elementor-col-40,
  .ftm-site__main .elementor-col-50,
  .ftm-site__main .elementor-col-60,
  .ftm-site__main .elementor-col-66,
  .ftm-site__main .elementor-col-75,
  .ftm-site__main .elementor-col-80,
  .ftm-site__main .elementor-col-83,
  .ftm-site__main .elementor-col-90,
  .ftm-site__main .elementor-col-100 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* Horizontal sections stack vertically on mobile */
  .ftm-site__main .elementor-section .elementor-container {
    flex-direction: column !important;
  }
  /* Kill any inline min-width from the page builder */
  .ftm-site__main .elementor-element {
    min-width: 0 !important;
  }
  /* Images inside Elementor widgets scale to column width */
  .ftm-site__main .elementor-widget-image img,
  .ftm-site__main .elementor-widget-image-box img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }
  /* Section padding: tighten horizontal padding so content has breathing room
     without feeling squeezed against the viewport edges */
  .ftm-site__main .elementor-section-boxed > .elementor-container,
  .ftm-site__main .elementor-top-section > .elementor-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Reduce over-generous vertical section padding from the desktop design */
  .ftm-site__main .elementor-top-section {
    padding-top: clamp(24px, 6vw, 48px) !important;
    padding-bottom: clamp(24px, 6vw, 48px) !important;
  }
}

/* 10d. Paragraph/body text scaling on mobile so long lines don't look
 *      cramped and tiny. */
@media (max-width: 720px) {
  .ftm-site__main .elementor-widget-text-editor,
  .ftm-site__main .elementor-widget-text-editor p,
  .ftm-site__main p.elementor-heading-title {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.55 !important;
  }
}

/* 10e. Shop page header brand — WooCommerce archive pages were computing
 *      font-family to Inter instead of Prequel. Higher-specificity selector
 *      with body scoping guarantees Prequel wins on every WC page too. */
body.woocommerce .ftm-header__brand-text,
body.woocommerce-page .ftm-header__brand-text,
body.woocommerce-shop .ftm-header__brand-text,
body.woocommerce-account .ftm-header__brand-text,
body.woocommerce-cart .ftm-header__brand-text,
body.woocommerce-checkout .ftm-header__brand-text,
body.single-product .ftm-header__brand-text,
body.archive .ftm-header__brand-text,
html body .ftm-header .ftm-header__brand-text,
html body .ftm-site a.ftm-header__brand .ftm-header__brand-text {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  background: var(--ftm-rainbow) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
          color: transparent !important;
  background-color: transparent !important;
}

/* 10f. Mobile nav drawer — when the hamburger opens it, make it readable
 *      on phones instead of cramped. */
@media (max-width: 720px) {
  .ftm-header__nav.is-open {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--ftm-card) !important;
    border-top: 1px solid var(--ftm-line) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 12px 16px !important;
    z-index: 999 !important;
  }
  .ftm-header__nav.is-open ul,
  .ftm-header__nav.is-open .menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ftm-header__nav.is-open li { display: block !important; }
  .ftm-header__nav.is-open a {
    display: block !important;
    padding: 12px 8px !important;
    font-size: 16px !important;
    color: var(--ftm-navy) !important;
    border-bottom: 1px solid var(--ftm-line) !important;
  }
  .ftm-header__nav.is-open li:last-child a { border-bottom: none !important; }
}

/* 10g. Site container horizontal padding on mobile — generous but not
 *      squeezed. */
@media (max-width: 720px) {
  .ftm-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 10h. Typography scaling for raw WordPress/theme headings on mobile
 *      (not just Elementor's). */
@media (max-width: 720px) {
  .ftm-site__main h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  .ftm-site__main h2 { font-size: clamp(24px, 6.5vw, 32px) !important; }
  .ftm-site__main h3 { font-size: clamp(20px, 5.5vw, 26px) !important; }
}

/* -------------------------------------------------------------------------
 * 11. v1.2.0 — Widget leak protection
 *
 * Several of the site's Elementor HTML widgets ship with a preview
 * wrapper that includes global rules like `body { padding: 64px 32px }`.
 * When rendered on the live page, those rules leak out of the widget
 * and squeeze every page to ~68% of the viewport width on mobile.
 * These overrides slam body/html padding back to 0 regardless of what
 * any widget-level inline <style> tries to set.
 * ------------------------------------------------------------------------- */

/* 11a. Absolute body/html reset — beats any inline <style> in widgets */
html,
html body {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
body.ftm-preview,
body.preview {
  /* Neutralize "preview-mode" body wrappers that leaked from builders */
  padding: 0 !important;
}

/* 11b. Custom info-card / details-grid patterns used in the spring26
 *      page widgets — the grid was hardcoded to minmax(280px, 420px)
 *      which can't shrink below 280px. Force single column + 100%
 *      width on mobile so cards never extend past the viewport. */
@media (max-width: 720px) {
  .ftm-details,
  .ftm-details__content,
  .ftm-details__grid,
  .ftm-details__aside,
  .ftm-info-card,
  .ftm-info-card__heading,
  .ftm-info-card__body,
  .ftm-info-card__title {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .ftm-details__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ftm-details {
    padding: 40px 16px !important;
  }
  .ftm-info-card {
    padding: 20px !important;
    border-radius: 16px !important;
  }
  .ftm-info-card__title {
    font-size: clamp(18px, 5.5vw, 22px) !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }
  /* Long bullet items inside cards should wrap, not clip */
  .ftm-info-card li,
  .ftm-info-card p,
  .ftm-info-card span {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* 11c. Catch-all: any user-built widget card class ending in "-card"
 *      that lives inside the main content area never exceeds 100% width
 *      and wraps its children gracefully on mobile. */
@media (max-width: 720px) {
  .ftm-site__main [class*="__card"],
  .ftm-site__main [class*="-card"],
  .ftm-site__main [class*="__grid"],
  .ftm-site__main [class*="-grid"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Single column for ALL grids on phones, unless explicitly opted out
     via a class like .ftm-grid--keep-mobile */
  .ftm-site__main [class*="__grid"]:not(.ftm-grid--keep-mobile),
  .ftm-site__main [class*="-grid"]:not(.ftm-grid--keep-mobile) {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================================
 * 12. v1.3.0 — WooCommerce single-product FTM theming
 *
 * The single-product template doesn't load Elementor's kit CSS, so this
 * is where we bring the product detail page in line with the FTM brand:
 * CSS-grid layout (replaces legacy float), Prequel navy pricing, pill
 * navy add-to-cart button, rounded qty input, styled tabs, styled
 * related-products grid, rainbow accent strip at the top of the card,
 * and a proper breadcrumb treatment.
 *
 * All selectors are scoped to `.single-product` / `body.single-product`
 * so archive / shop grid styling (section 9a) is untouched.
 * ========================================================================= */

/* 12a. Page container — center and breathe */
body.single-product .ftm-container.ftm-woocommerce {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 48px 24px 64px !important;
}

/* 12b. The product wrapper becomes a rainbow-topped card laid out as a
 *      two-column grid (gallery | summary). Kills the legacy float that
 *      pins gallery to float:left and summary to float:right. */
body.single-product div.product.type-product,
body.single-product .woocommerce div.product.type-product {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
  column-gap: 56px !important;
  row-gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto 48px !important;
  padding: 32px 32px 40px !important;
  float: none !important;
  background: var(--ftm-card) !important;
  border: 1px solid var(--ftm-line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}

/* Rainbow strip across the top of the product card */
body.single-product div.product.type-product::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--ftm-rainbow) !important;
  border-top-left-radius: var(--radius) !important;
  border-top-right-radius: var(--radius) !important;
}

/* 12c. Gallery — reset vendor float, let the grid own width */
body.single-product div.product .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
body.single-product div.product .woocommerce-product-gallery__wrapper,
body.single-product div.product .woocommerce-product-gallery__image {
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
}
body.single-product div.product .woocommerce-product-gallery__image img {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 12d. Summary column — fonts, spacing, brand colors */
body.single-product div.product .summary.entry-summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  color: var(--ftm-navy) !important;
}

body.single-product div.product .summary .product_title {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: var(--ftm-navy) !important;
  margin: 0 0 12px !important;
  letter-spacing: 0.01em !important;
}

/* Price — Prequel navy, the marquee detail on the page */
body.single-product div.product .summary .price,
body.single-product div.product .summary p.price,
body.single-product div.product .summary span.price,
body.single-product div.product .summary .price .woocommerce-Price-amount {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  line-height: 1.15 !important;
  color: var(--ftm-navy) !important;
  margin: 4px 0 20px !important;
  letter-spacing: 0.01em !important;
}
body.single-product div.product .summary del,
body.single-product div.product .summary del .woocommerce-Price-amount {
  color: var(--ftm-muted) !important;
  opacity: .7 !important;
  font-size: .7em !important;
  margin-right: 10px !important;
}
body.single-product div.product .summary ins,
body.single-product div.product .summary ins .woocommerce-Price-amount {
  text-decoration: none !important;
  color: var(--ftm-navy) !important;
}

body.single-product div.product .summary .woocommerce-product-details__short-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #374151 !important;
  margin: 0 0 24px !important;
}
body.single-product div.product .summary .woocommerce-product-details__short-description p {
  margin: 0 0 12px !important;
}

/* 12e. Quantity + Add to cart row */
body.single-product div.product form.cart {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 20px 0 24px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

body.single-product div.product .quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--ftm-bg) !important;
  border: 1px solid var(--ftm-line) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 10px !important;
  height: 52px !important;
}
body.single-product div.product .quantity label { display: none !important; }
body.single-product div.product input.qty,
body.single-product div.product .quantity input.qty {
  width: 56px !important;
  height: 44px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ftm-navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield !important;
}
body.single-product div.product input.qty::-webkit-outer-spin-button,
body.single-product div.product input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Add to cart pill — FTM navy */
body.single-product div.product button.single_add_to_cart_button,
body.single-product div.product .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 32px !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  background: var(--ftm-navy) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease !important;
  cursor: pointer !important;
}
body.single-product div.product button.single_add_to_cart_button:hover,
body.single-product div.product .single_add_to_cart_button:hover {
  background: var(--ftm-navy-soft) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
  opacity: 1 !important;
}
body.single-product div.product button.single_add_to_cart_button:active {
  transform: translateY(0) !important;
}

/* 12f. Variations table (variable products) */
body.single-product div.product table.variations {
  margin: 0 0 16px !important;
  border: none !important;
  background: transparent !important;
}
body.single-product div.product table.variations tr { display: block !important; margin-bottom: 12px !important; }
body.single-product div.product table.variations td {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
body.single-product div.product table.variations td.label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--ftm-muted) !important;
  margin-bottom: 6px !important;
}
body.single-product div.product table.variations td.value select {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--ftm-line) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  color: var(--ftm-navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
body.single-product div.product .woocommerce-variation-price {
  margin: 8px 0 14px !important;
}

/* 12g. Meta row (SKU, categories, tags) */
body.single-product div.product .product_meta {
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--ftm-line) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--ftm-muted) !important;
  letter-spacing: .02em !important;
}
body.single-product div.product .product_meta > span {
  display: block !important;
  margin-bottom: 4px !important;
}
body.single-product div.product .product_meta a {
  color: var(--ftm-navy) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(26,39,71,.25) !important;
  text-underline-offset: 3px !important;
}
body.single-product div.product .product_meta a:hover {
  text-decoration-color: var(--ftm-navy) !important;
}

/* 12h. Tabs (Description / Additional info / Reviews) */
body.single-product div.product .woocommerce-tabs {
  grid-column: 1 / -1 !important;
  margin: 24px 0 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--ftm-line) !important;
}
body.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  list-style: none !important;
}
body.single-product div.product .woocommerce-tabs ul.tabs li,
body.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.single-product div.product .woocommerce-tabs ul.tabs li::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}
body.single-product div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block !important;
  padding: 10px 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ftm-muted) !important;
  background: var(--ftm-bg) !important;
  border: 1px solid var(--ftm-line) !important;
  border-radius: var(--radius-pill) !important;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
body.single-product div.product .woocommerce-tabs ul.tabs li.active a,
body.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
  background: var(--ftm-navy) !important;
  color: #fff !important;
  border-color: var(--ftm-navy) !important;
}

body.single-product div.product .woocommerce-tabs .panel {
  padding: 20px 0 0 !important;
  background: transparent !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--ftm-navy) !important;
  line-height: 1.7 !important;
}
body.single-product div.product .woocommerce-tabs .panel h2 {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  margin: 0 0 12px !important;
  color: var(--ftm-navy) !important;
}

/* Reviews tab */
body.single-product #reviews .commentlist {
  list-style: none !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
}
body.single-product #reviews .commentlist li.comment .comment_container {
  display: flex !important;
  gap: 12px !important;
  padding: 16px !important;
  background: var(--ftm-bg) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--ftm-line) !important;
}
body.single-product #reviews .commentlist li.comment img.avatar {
  border-radius: 999px !important;
  width: 48px !important;
  height: 48px !important;
  border: 2px solid #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
body.single-product #review_form_wrapper input[type=text],
body.single-product #review_form_wrapper input[type=email],
body.single-product #review_form_wrapper textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ftm-line) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  color: var(--ftm-navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
}
body.single-product #review_form_wrapper .form-submit input {
  background: var(--ftm-navy) !important;
  color: #fff !important;
  padding: 12px 28px !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
}
body.single-product #review_form_wrapper .form-submit input:hover {
  background: var(--ftm-navy-soft) !important;
}

/* 12i. Related + upsell products — FTM grid and cards */
body.single-product .related.products,
body.single-product .upsells.products {
  margin: 48px auto 0 !important;
  max-width: 1240px !important;
  padding: 0 8px !important;
}
body.single-product .related.products > h2,
body.single-product .upsells.products > h2 {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  color: var(--ftm-navy) !important;
  margin: 0 0 24px !important;
  letter-spacing: 0.01em !important;
  position: relative !important;
  padding-bottom: 12px !important;
}
body.single-product .related.products > h2::after,
body.single-product .upsells.products > h2::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 120px !important;
  height: 3px !important;
  border-radius: 3px !important;
  background: var(--ftm-rainbow) !important;
}

/* 12j. WooCommerce breadcrumb — on single product the default breadcrumb
 *      sits at the top of the page; give it an FTM look. */
body.single-product .woocommerce-breadcrumb {
  max-width: 1240px !important;
  margin: 0 auto 16px !important;
  padding: 0 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--ftm-muted) !important;
  letter-spacing: .02em !important;
}
body.single-product .woocommerce-breadcrumb a {
  color: var(--ftm-navy) !important;
  text-decoration: none !important;
}
body.single-product .woocommerce-breadcrumb a:hover {
  text-decoration: underline !important;
}

/* 12k. WooCommerce notices on the product page — cart success, errors */
body.single-product .woocommerce-notices-wrapper .woocommerce-message,
body.single-product .woocommerce-notices-wrapper .woocommerce-error,
body.single-product .woocommerce-notices-wrapper .woocommerce-info {
  border: 1px solid var(--ftm-line) !important;
  border-left: 4px solid var(--ftm-navy) !important;
  background: #fff !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 18px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--ftm-navy) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 20px !important;
}
body.single-product .woocommerce-notices-wrapper .woocommerce-message a.button,
body.single-product .woocommerce-notices-wrapper .woocommerce-error a.button {
  background: var(--ftm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

/* 12l. Stock badge (in-stock / out-of-stock pill) */
body.single-product div.product .stock {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin: 0 0 12px !important;
  background: #EAF5EC !important;
  color: #1E6A3E !important;
}
body.single-product div.product .stock.out-of-stock {
  background: #FBEAEA !important;
  color: #9A2B2B !important;
}

/* 12m. Responsive — stack to single column on tablet/mobile */
@media (max-width: 900px) {
  body.single-product div.product.type-product,
  body.single-product .woocommerce div.product.type-product {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 24px !important;
    padding: 24px 20px 32px !important;
  }
}
@media (max-width: 720px) {
  body.single-product .ftm-container.ftm-woocommerce {
    padding: 24px 16px 48px !important;
  }
  body.single-product div.product .summary .product_title {
    font-size: clamp(26px, 7vw, 36px) !important;
  }
  body.single-product div.product form.cart {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.single-product div.product button.single_add_to_cart_button {
    width: 100% !important;
  }
}

/* 12n. Shop archive — while we're here, give archive cards the same
 *      FTM polish (pill button, rounded imagery) without touching the
 *      section 9a grid layout. */
body.woocommerce ul.products li.product a.button,
body.woocommerce-page ul.products li.product a.button,
body.woocommerce ul.products li.product .button.add_to_cart_button,
body.woocommerce-page ul.products li.product .button.add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  background: var(--ftm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background .2s ease, transform .1s ease !important;
}
body.woocommerce ul.products li.product a.button:hover,
body.woocommerce-page ul.products li.product a.button:hover {
  background: var(--ftm-navy-soft) !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}
body.woocommerce ul.products li.product img,
body.woocommerce-page ul.products li.product img {
  border-radius: var(--radius-sm) !important;
}
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  color: var(--ftm-navy) !important;
  font-size: 18px !important;
  padding: 12px 0 4px !important;
}
body.woocommerce ul.products li.product .price,
body.woocommerce-page ul.products li.product .price {
  color: var(--ftm-navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

/* =========================================================================
 * 13. v1.3.1 — Single / shop follow-up polish
 *
 * Post-1.3.0 issues caught on live site:
 *   - Default "Sale!" badge (olive circle) collides with rainbow strip
 *     and product image. Restyle as an FTM navy pill.
 *   - <ins>/<del> tags on sale prices weren't picking up Prequel on the
 *     single product page; and on the shop archive the <ins> price was
 *     showing the browser default underline.
 *   - The "Select Option" variation select stretched the full column —
 *     constrain its width.
 *   - A running-total / product add-ons block (Subtotal $ 245) was
 *     unstyled inside the summary. Wrap it in the FTM card idiom.
 * ========================================================================= */

/* 13a. FTM Sale badge — navy pill in the top-right, no overlap. */
body.single-product span.onsale,
body.single-product div.product .onsale,
body.woocommerce ul.products li.product .onsale,
body.woocommerce-page ul.products li.product .onsale,
body.woocommerce span.onsale,
body.woocommerce-page span.onsale {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  background: var(--ftm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  z-index: 10 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Kill any pseudo-elements WC uses to draw the circle */
body.single-product span.onsale::before,
body.woocommerce .onsale::before {
  display: none !important;
}

/* On shop tiles the onsale needs a positioning context */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
  position: relative !important;
}

/* 13b. Kill <ins> underline everywhere in WC contexts. <ins> is the
 *      element WooCommerce wraps sale prices in, and browsers underline
 *      it by default. Also pull <ins> back into Prequel navy so the
 *      sale price itself inherits the right typography. */
body.woocommerce ins,
body.woocommerce-page ins,
body.single-product ins,
body.woocommerce ins .woocommerce-Price-amount,
body.woocommerce-page ins .woocommerce-Price-amount,
body.single-product ins .woocommerce-Price-amount {
  text-decoration: none !important;
  background: transparent !important;
  color: var(--ftm-navy) !important;
}

/* <del> (regular price crossed out) — muted, smaller, in front */
body.woocommerce del,
body.woocommerce-page del,
body.single-product del,
body.woocommerce del .woocommerce-Price-amount,
body.woocommerce-page del .woocommerce-Price-amount,
body.single-product del .woocommerce-Price-amount {
  color: var(--ftm-muted) !important;
  opacity: .65 !important;
  font-weight: 400 !important;
  margin-right: 10px !important;
}

/* 13c. Force the FULL price string (including the $ and cents) into
 *      Prequel on the single product page, not just the outer wrapper.
 *      This fixes the case where $245.00 was rendering in the Playfair
 *      fallback because deeper spans didn't inherit the family. */
body.single-product div.product .summary .price,
body.single-product div.product .summary .price *,
body.single-product div.product .summary p.price,
body.single-product div.product .summary p.price *,
body.single-product div.product .summary .price .woocommerce-Price-amount,
body.single-product div.product .summary .price .woocommerce-Price-currencySymbol,
body.single-product div.product .summary .price ins,
body.single-product div.product .summary .price ins *,
body.single-product div.product .summary .price del,
body.single-product div.product .summary .price del * {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* 13d. Variation select — constrain width so the card doesn't feel
 *      lopsided on desktop. */
body.single-product div.product table.variations td.value select,
body.single-product div.product .variations_form select {
  max-width: 340px !important;
}

/* 13e. Running total / WC add-ons subtotal card.
 *      Target the common plugin class names (Advanced Product Fields,
 *      YITH Advanced Product Options, ELEX, TM Extra Product Options,
 *      WCPA, WPC Product Options) so whichever one is running gets
 *      wrapped in an FTM-styled summary card. */
body.single-product .wapf-wrapper,
body.single-product .wcpa_container,
body.single-product .wpcpo-container,
body.single-product .tm-extra-product-options,
body.single-product .ywapo_container,
body.single-product .wcboost-products-add-ons,
body.single-product .elementor-widget-woocommerce-product-add-to-cart .cart {
  font-family: 'Inter', sans-serif !important;
  color: var(--ftm-navy) !important;
}

body.single-product .wapf-subtotal,
body.single-product .tm-final-totals,
body.single-product .tm-epo-totals,
body.single-product .tm-epo-totals-form,
body.single-product .wcpa_totals,
body.single-product .wpcpo-totals-container,
body.single-product .ywapo_totals,
body.single-product .wcboost-products-add-ons__totals,
body.single-product div.product form.cart .cart_subtotal,
body.single-product div.product form.cart .total_price {
  display: block !important;
  padding: 14px 18px !important;
  margin: 12px 0 18px !important;
  background: var(--ftm-bg) !important;
  border: 1px solid var(--ftm-line) !important;
  border-left: 4px solid var(--ftm-navy) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ftm-navy) !important;
}

body.single-product .wapf-subtotal strong,
body.single-product .tm-final-totals strong,
body.single-product .wcpa_totals strong,
body.single-product .wpcpo-totals-container strong,
body.single-product .ywapo_totals strong,
body.single-product .wcboost-products-add-ons__totals strong {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  color: var(--ftm-navy) !important;
}

/* Generic: any per-line-item "1 X Product Name / price" row inside the
 *  summary that comes from a WC add-ons plugin gets a consistent, light
 *  row look instead of big hero-text. */
body.single-product .summary .wapf-price-summary-item,
body.single-product .summary .tm-epo-element,
body.single-product .summary .wcpa_totals_row,
body.single-product .summary .wpcpo-totals-row,
body.single-product .summary .ywapo_totals_row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--ftm-navy) !important;
  border-bottom: 1px solid rgba(26,39,71,.06) !important;
}

/* 13f. On very wide titles, allow "FTM TIER 3 TICKETS 2026" to breathe.
 *      Shrink the minimum font slightly so 2-word wrap feels intentional. */
body.single-product div.product .summary .product_title {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

/* =========================================================================
 * 14. v1.3.2 — ModernCart (floating cart + slide-out drawer) theming
 *
 * The site uses the ModernCart WooCommerce plugin for its hovering cart
 * button and slide-out mini-cart. Stock palette is sky-blue primary
 * (#0284C7) + emerald-green count badge (#10B981) — neither on-brand.
 *
 * The plugin is driven by CSS custom properties published at :root, so
 * the cleanest override is to remap those tokens to FTM equivalents.
 * This fixes colors everywhere (button, count, headings, footer, etc.)
 * without chasing individual selectors. Targeted rules below add
 * Prequel typography, rainbow accents, and layout polish that the
 * plugin's tokens don't expose.
 *
 * Empirically confirmed live: overriding --moderncart-primary-color and
 * --moderncart-floating-icon-bg-color at :root cascades into the
 * button (rule is `#moderncart-floating-cart button { background:
 * var(--moderncart-floating-icon-bg-color, var(--moderncart-primary-
 * color)); }` — so either variable flips it).
 * ========================================================================= */

/* 14a. Remap ModernCart design tokens to FTM palette.
 * !important ensures we beat the plugin's own inline :root block
 * (both rules live at :root, so specificity alone isn't enough). */
:root {
  /* Primary brand color — drives button, links, accents */
  --moderncart-primary-color: #1A2747 !important;
  --moderncart-primary-color-light: #1A274712 !important;

  /* Floating cart button background + icon */
  --moderncart-floating-icon-bg-color: #1A2747 !important;
  --moderncart-floating-icon-bg-color-light: #1A274712 !important;
  --moderncart-floating-icon-color: #FFFFFF !important;

  /* Item count badge — FTM gold pill with navy numerals */
  --moderncart-floating-count-bg-color: #F2B230 !important;
  --moderncart-floating-count-bg-color-light: #F2B23012 !important;
  --moderncart-floating-count-text-color: #1A2747 !important;

  /* Drawer header + body typography */
  --moderncart-body-color: #1A2747 !important;
  --moderncart-header-font-color: #1A2747 !important;
  --moderncart-header-background-color: #FFFFFF !important;

  /* Quantity pills inside drawer line items */
  --moderncart-quantity-background-color: #EEF1F5 !important;
  --moderncart-quantity-font-color: #1A2747 !important;

  /* Highlight / button colors */
  --moderncart-button-font-color: #FFFFFF !important;
}

/* 14b. Floating toggle button — layout polish on top of the token remap.
 * Token already sets navy bg + white icon; these rules add the pill
 * radius, FTM shadow, and rainbow halo hover that tokens don't control. */
#moderncart-floating-cart .moderncart-floating-cart-button,
.moderncart-floating-cart-button {
  background: var(--ftm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-md) !important;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
  cursor: pointer !important;
}
#moderncart-floating-cart .moderncart-floating-cart-button:hover,
.moderncart-floating-cart-button:hover {
  background: var(--ftm-navy-soft) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}
/* Rainbow halo ring on hover */
#moderncart-floating-cart .moderncart-floating-cart-button::after {
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 999px !important;
  background: var(--ftm-rainbow) !important;
  opacity: 0 !important;
  z-index: -1 !important;
  transition: opacity .25s ease !important;
}
#moderncart-floating-cart .moderncart-floating-cart-button:hover::after {
  opacity: .75 !important;
  filter: blur(4px) !important;
}
#moderncart-floating-cart .moderncart-floating-cart-button {
  position: relative !important;
  overflow: visible !important;
}

/* Cart icon inside the button */
#moderncart-floating-cart .moderncart-floating-cart-icon svg,
.moderncart-floating-cart-icon svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  width: 26px !important;
  height: 26px !important;
}

/* 14c. Item count badge — FTM gold pill on navy button (belt-and-suspenders
 * on top of the token remap, for plugins that bypass the custom prop). */
#moderncart-floating-cart .moderncart-floating-cart-count,
.moderncart-floating-cart-count {
  background: var(--ftm-gold) !important;
  color: var(--ftm-navy) !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  box-shadow: var(--shadow-sm) !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
}

/* 14d. Add-to-cart flyout notification ("Added to cart") */
#moderncart-floating-cart .moderncart-floating-cart-button-notification,
.moderncart-floating-cart-button-notification,
.moderncart-add-to-cart-notification {
  background: var(--ftm-navy) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  box-shadow: var(--shadow-md) !important;
}

/* 14e. Slide-out drawer panel */
#moderncart-slide-out,
#moderncart-slide-out .moderncart-panel {
  background: var(--ftm-card) !important;
  color: var(--ftm-navy) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Drawer overlay backdrop */
#moderncart-slide-out-modal {
  background: rgba(26, 39, 71, 0.45) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* Rainbow strip across the very top of the drawer */
#moderncart-slide-out::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--ftm-rainbow) !important;
  z-index: 2 !important;
}

/* Drawer header */
#moderncart-slide-out .moderncart-slide-out-header,
.moderncart-slide-out-header {
  padding: 24px 24px 16px !important;
  border-bottom: 1px solid var(--ftm-line) !important;
}
#moderncart-slide-out .moderncart-slide-out-header-heading,
.moderncart-slide-out-header-heading {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
#moderncart-slide-out .moderncart-slide-out-header-title,
.moderncart-slide-out-header-title {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  color: var(--ftm-navy) !important;
  letter-spacing: 0.01em !important;
}
#moderncart-slide-out .moderncart-slide-out-header-quantity,
.moderncart-slide-out-header-quantity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  background: var(--ftm-bg) !important;
  color: var(--ftm-navy) !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-left: 8px !important;
}

/* Close button (X) */
#moderncart-slide-out .moderncart-slide-out-header-close,
.moderncart-slide-out-header-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ftm-line) !important;
  background: #fff !important;
  color: var(--ftm-navy) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease !important;
  cursor: pointer !important;
}
#moderncart-slide-out .moderncart-slide-out-header-close:hover,
.moderncart-slide-out-header-close:hover {
  background: var(--ftm-navy) !important;
  color: #fff !important;
  border-color: var(--ftm-navy) !important;
}
#moderncart-slide-out .moderncart-slide-out-header-close svg,
.moderncart-slide-out-header-close svg {
  width: 16px !important;
  height: 16px !important;
}

/* 14f. Cart body — line items */
#moderncart-slide-out .moderncart-slide-out-cart,
.moderncart-slide-out-cart {
  padding: 16px 24px !important;
}
#moderncart-slide-out .moderncart-slide-out-cart-inner,
.moderncart-slide-out-cart-inner {
  padding: 0 !important;
}

/* Empty-cart state */
#moderncart-slide-out .moderncart-slide-out-cart-empty,
#moderncart-slide-out .moderncart-empty-cart,
.moderncart-slide-out-cart-empty,
.moderncart-empty-cart {
  padding: 48px 16px !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--ftm-navy) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Cart line item totals list (subtotal, discount, total) */
#moderncart-slide-out .moderncart-cart-line-items,
.moderncart-cart-line-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 12px 0 !important;
  list-style: none !important;
}
#moderncart-slide-out .moderncart-cart-line-items-item,
.moderncart-cart-line-items-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--ftm-navy) !important;
}
#moderncart-slide-out .moderncart-cart-line-items-label,
.moderncart-cart-line-items-label {
  color: var(--ftm-muted) !important;
}
#moderncart-slide-out .moderncart-cart-line-items-value,
.moderncart-cart-line-items-value {
  font-weight: 600 !important;
  color: var(--ftm-navy) !important;
}

/* Grand total row — pop it with Prequel navy */
#moderncart-slide-out .moderncart-cart-line-items__total,
.moderncart-cart-line-items__total {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--ftm-line) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
}
#moderncart-slide-out .moderncart-cart-line-items__total-label,
.moderncart-cart-line-items__total-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ftm-muted) !important;
}
#moderncart-slide-out .moderncart-cart-line-items__total-value,
.moderncart-cart-line-items__total-value,
#moderncart-slide-out .moderncart-cart-total,
.moderncart-cart-total {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  color: var(--ftm-navy) !important;
  letter-spacing: 0.01em !important;
}

/* 14g. Drawer footer — checkout area */
#moderncart-slide-out .moderncart-slide-out-footer,
.moderncart-slide-out-footer {
  padding: 20px 24px 24px !important;
  border-top: 1px solid var(--ftm-line) !important;
  background: var(--ftm-bg) !important;
}

/* Checkout / view-cart buttons — navy pills */
#moderncart-slide-out .moderncart-slide-out-footer a,
#moderncart-slide-out .moderncart-slide-out-footer button,
#moderncart-slide-out a[href*="checkout"],
#moderncart-slide-out .moderncart-checkout-btn,
#moderncart-slide-out [class*="checkout-button"],
#moderncart-slide-out [class*="cart-button"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  width: 100% !important;
  padding: 0 28px !important;
  background: var(--ftm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
  margin: 6px 0 !important;
  cursor: pointer !important;
}
#moderncart-slide-out .moderncart-slide-out-footer a:hover,
#moderncart-slide-out .moderncart-slide-out-footer button:hover,
#moderncart-slide-out a[href*="checkout"]:hover {
  background: var(--ftm-navy-soft) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
  opacity: 1 !important;
}

/* "Continue shopping" or secondary footer link — ghost pill */
#moderncart-slide-out .moderncart-slide-out-footer a.moderncart-continue-shopping,
#moderncart-slide-out .moderncart-slide-out-footer a[class*="continue"],
#moderncart-slide-out .moderncart-slide-out-footer a[class*="view-cart"] {
  background: transparent !important;
  color: var(--ftm-navy) !important;
  border: 1px solid var(--ftm-navy) !important;
  box-shadow: none !important;
}
#moderncart-slide-out .moderncart-slide-out-footer a.moderncart-continue-shopping:hover,
#moderncart-slide-out .moderncart-slide-out-footer a[class*="continue"]:hover {
  background: var(--ftm-navy) !important;
  color: #fff !important;
}

/* Mobile — make sure drawer doesn't feel squeezed */
@media (max-width: 480px) {
  #moderncart-slide-out {
    width: 100% !important;
    max-width: 100% !important;
  }
  #moderncart-slide-out .moderncart-slide-out-header-title {
    font-size: 22px !important;
  }
}

/* =========================================================================
 * 15. v1.3.3 — Royal Elementor Addons "Team Member" widget theming
 *
 * The Gathering page's "Headlining Artists and Facilitators" section
 * uses Royal Elementor Addons' wpr-team-member widget for each artist /
 * facilitator card. Out of the box it's transparent with Lato text and
 * a blue-ish job title that clashes with the FTM palette. This section
 * turns each card into an on-brand tile:
 *   - White card, 16px radius, soft navy-tinted shadow, lift on hover.
 *   - Rainbow strip across the top (echoes hero + drawer accents).
 *   - Image forced to 4:5 cover so all cards align regardless of source.
 *   - Prequel navy name, Inter small-caps navy-soft role, rainbow
 *     divider underline, Inter 15px body copy.
 *   - Social links become navy 36px pills with white icons.
 * ========================================================================= */

/* Card wrapper */
.wpr-team-member {
  background: var(--ftm-card) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 20px rgba(26, 39, 71, 0.08),
              0 2px 6px  rgba(26, 39, 71, 0.04) !important;
  overflow: hidden !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.wpr-team-member:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(26, 39, 71, 0.14),
              0 8px 16px  rgba(26, 39, 71, 0.08) !important;
}

/* Rainbow strip across the top of each card */
.wpr-team-member::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--ftm-rainbow) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Media / image — force 1:1 square crop so all cards line up AND the
 * photo doesn't tower over the bio. 4:5 portrait ran too tall relative
 * to the content block on wider viewports, creating a visible gap
 * between photo and text. */
.wpr-member-media {
  border-radius: 0 !important;
  overflow: hidden !important;
}
.wpr-member-image {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

/* Text content block — preserve the widget's text-align setting (center in the
 * Gathering cards), so we no longer force-left. */
.wpr-member-content {
  padding: 20px 24px 24px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Artist / facilitator name — Prequel navy */
.wpr-member-name {
  font-family: 'Prequel', 'Playfair Display', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--ftm-navy) !important;
  margin: 0 0 4px !important;
  letter-spacing: 0.01em !important;
}

/* Role / job title — Inter small caps eyebrow */
.wpr-member-job {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ftm-navy-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 14px !important;
}

/* Divider — short rainbow accent line (overrides plugin transparent bg).
 * margin: 0 auto centers the divider horizontally, which is what the
 * Gathering cards want (they use the "divider-center" modifier). */
.wpr-member-divider {
  width: 40px !important;
  height: 3px !important;
  background: var(--ftm-rainbow) !important;
  border-radius: 2px !important;
  margin: 0 auto 14px !important;
  display: block !important;
  padding: 0 !important;
}
/* Opt-out override: if a card uses the left/right divider modifier, honor it. */
.wpr-team-member-divider-left .wpr-member-divider {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.wpr-team-member-divider-right .wpr-member-divider {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Bio / description */
.wpr-member-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #374151 !important;
  margin: 0 0 16px !important;
}

/* Social icon row — centered by default (matches the Gathering cards'
 * "social-media-center" modifier). Sits right below the bio with a
 * small margin; we deliberately DON'T anchor it to the card bottom
 * with margin-top: auto, because that creates a large visible gap
 * between the bio and the socials on short-bio cards. */
.wpr-member-social-media {
  margin-top: 4px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
}
/* Opt-out overrides for left/right modifiers. */
.wpr-team-member-social-media-left .wpr-member-social-media {
  justify-content: flex-start !important;
}
.wpr-team-member-social-media-right .wpr-member-social-media {
  justify-content: flex-end !important;
}
.wpr-member-social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: var(--ftm-navy) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: background .2s ease, transform .15s ease !important;
}
.wpr-member-social:hover {
  background: var(--ftm-navy-soft) !important;
  transform: translateY(-2px) !important;
}
.wpr-member-social i,
.wpr-member-social svg {
  color: #fff !important;
  fill: currentColor !important;
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
}

/* Phone layout — tighten card padding */
@media (max-width: 600px) {
  .wpr-member-content {
    padding: 18px 18px 20px !important;
  }
  .wpr-member-name {
    font-size: 24px !important;
  }
}