/* Fro Quantum Organics global component styles.
 * Tailwind utility patterns from the Lovable build, converted to clean, descriptive
 * classes. No Tailwind at runtime. Mobile-first; verified targets 360 / 768 / 1280.
 * Every value references a token from tokens.css.
 */

/* ------------------------------------------------------------------ Base */
body.fq-active {
  font-family: var(--fq-font-sans);
  color: var(--fq-foreground);
  background-color: var(--fq-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fq-active h1,
.fq-active h2,
.fq-active h3,
.fq-display {
  font-family: var(--fq-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fq-primary);
}

.fq-active h4,
.fq-active h5,
.fq-active h6 {
  font-family: var(--fq-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------- Layout */
.fq-container {
  width: 100%;
  max-width: var(--fq-container);
  margin-inline: auto;
  padding-inline: var(--fq-gutter);
}

.fq-section {
  padding-block: var(--fq-section-y);
}

.fq-muted { color: var(--fq-muted-foreground); }
.fq-center { text-align: center; }

@media (min-width: 768px) {
  .fq-container { padding-inline: var(--fq-gutter-lg); }
  .fq-section { padding-block: var(--fq-section-y-lg); }
}

/* --------------------------------------------------------------- Eyebrow */
.fq-eyebrow {
  display: inline-block;
  font-size: var(--fq-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fq-leaf);
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------- Buttons */
.fq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--fq-font-sans);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--fq-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--fq-transition), box-shadow var(--fq-transition),
    background-color var(--fq-transition), color var(--fq-transition), filter var(--fq-transition);
}
.fq-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--fq-background), 0 0 0 4px var(--fq-ring);
}
.fq-btn[disabled],
.fq-btn.is-disabled { opacity: 0.5; pointer-events: none; }

/* Sizes */
.fq-btn--sm { height: 2.25rem; padding-inline: 1rem; font-size: var(--fq-text-sm); }
.fq-btn--md { height: 2.75rem; padding-inline: 1.5rem; font-size: var(--fq-text-sm); }
.fq-btn--lg { height: 3rem; padding-inline: 1.75rem; font-size: var(--fq-text-base); }

/* Variants */
.fq-btn--primary { background-color: var(--fq-gold); color: var(--fq-gold-foreground); box-shadow: var(--fq-shadow-soft); }
.fq-btn--primary:hover { filter: brightness(0.95); }
.fq-btn--secondary { background-color: var(--fq-primary); color: var(--fq-primary-foreground); box-shadow: var(--fq-shadow-soft); }
.fq-btn--secondary:hover { filter: brightness(1.1); }
.fq-btn--outline { border-color: var(--fq-primary); color: var(--fq-primary); background-color: transparent; }
.fq-btn--outline:hover { background-color: var(--fq-primary); color: var(--fq-primary-foreground); }
.fq-btn--ghost { color: var(--fq-primary); background-color: transparent; }
.fq-btn--ghost:hover { background-color: var(--fq-primary-soft); }
.fq-btn--whatsapp { background-color: var(--fq-whatsapp); color: #ffffff; box-shadow: var(--fq-shadow-soft); }
.fq-btn--whatsapp:hover { filter: brightness(1.1); }

/* Buttons placed on a dark/green band */
.fq-on-dark .fq-btn--outline { border-color: var(--fq-primary-foreground); color: var(--fq-primary-foreground); }
.fq-on-dark .fq-btn--outline:hover { background-color: var(--fq-primary-foreground); color: var(--fq-primary); }

/* ----------------------------------------------------------------- Cards */
.fq-card {
  display: flex;
  flex-direction: column;
  background-color: var(--fq-card);
  border: 1px solid var(--fq-border);
  border-radius: var(--fq-radius-3xl);
  box-shadow: var(--fq-shadow-soft);
  overflow: hidden;
}
.fq-card--tight { border-radius: var(--fq-radius-2xl); }

/* --------------------------------------------------------------- Badges */
.fq-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem; /* 10px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.3rem 0.625rem;
  border-radius: var(--fq-radius-pill);
}
.fq-badge--gold { background-color: var(--fq-gold); color: var(--fq-gold-foreground); }
.fq-badge--primary { background-color: var(--fq-primary); color: var(--fq-primary-foreground); }
.fq-badge--save { background-color: var(--fq-destructive); color: var(--fq-destructive-foreground); }

/* Benefit tag pill */
.fq-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  border-radius: var(--fq-radius-pill);
  background-color: var(--fq-primary-soft);
  color: var(--fq-primary);
}

/* --------------------------------------------------------- Rating stars */
.fq-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--fq-gold);
}
.fq-stars svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }

/* ----------------------------------------------------------------- Links */
.fq-link {
  color: var(--fq-leaf);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--fq-transition);
}
.fq-link:hover { color: var(--fq-primary); }

/* ------------------------------------------------------------ Hover lift */
.fq-hover-lift { transition: transform var(--fq-transition), box-shadow var(--fq-transition); }
.fq-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--fq-shadow-premium); }

/* ------------------------------------------------------------- Shadows */
.fq-shadow-soft { box-shadow: var(--fq-shadow-soft); }
.fq-shadow-lift { box-shadow: var(--fq-shadow-lift); }
.fq-shadow-premium { box-shadow: var(--fq-shadow-premium); }

/* --------------------------------------------------- Background utilities */
.fq-bg-surface { background-color: var(--fq-surface); }
.fq-bg-primary { background-color: var(--fq-primary); color: var(--fq-primary-foreground); }
.fq-bg-soft-mesh {
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(141, 166, 63, 0.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(212, 160, 23, 0.16), transparent 60%);
  background-color: var(--fq-background);
}
.fq-bg-warm-cream { background-image: linear-gradient(160deg, #FEFBF2 0%, #FCFEFC 100%); }
.fq-bg-section-tint { background-image: linear-gradient(180deg, var(--fq-surface-tint) 0%, var(--fq-background) 100%); }
.fq-bg-section-leaf { background-image: linear-gradient(180deg, var(--fq-background) 0%, var(--fq-primary-soft) 100%); }

/* When a section background is the deep green, flip text to its foreground */
.fq-bg-primary :where(h1, h2, h3, h4, h5, h6) { color: var(--fq-primary-foreground); }

/* ------------------------------------------------------------- Motion */
.fq-fade-up { animation: fq-fade-up 0.7s ease both; }
@keyframes fq-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fq-fade-up { animation: none; }
  .fq-hover-lift { transition: none; }
}

/* ============================================ Parent reset overrides ====== */
/* Hello Elementor's reset.css paints every bare <button> and link with a rose
   accent (#c36) plus a pink hover fill. The brand uses no pink, so neutralize it
   once, globally. These selectors match the reset's specificity and load after
   it, so they win. Branded controls (.fq-btn, .woocommerce .button,
   .fq-catalog__chip, .fq-product-card__quick) use higher-specificity rules and
   keep their own look. */
a { color: inherit; }
[type="button"],
[type="submit"],
button {
  border-color: var(--fq-border);
  color: inherit;
}
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
button:hover,
button:focus {
  background-color: transparent;
  color: inherit;
}

/* ===================================================== WooCommerce ======== */
/* Shop / archive grid: FQ product cards in a clean responsive grid. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
}
@media (min-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product::before { content: none !important; }
/* WooCommerce adds a clearfix ::before/::after on ul.products; in a grid those
   become stray cells (the empty top-left slot). Remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

/* Buttons: brand gold pill. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--fq-gold);
  color: var(--fq-gold-foreground);
  border: 0;
  border-radius: var(--fq-radius-pill);
  padding: 0.75rem 1.5rem;
  font-family: var(--fq-font-sans);
  font-weight: 600;
  font-size: var(--fq-text-sm);
  line-height: 1;
  text-transform: none;
  transition: filter var(--fq-transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { filter: brightness(0.95); color: var(--fq-gold-foreground); }

/* Prices and product titles on brand. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--fq-primary);
  font-family: var(--fq-font-display);
  font-size: var(--fq-text-2xl);
}
.woocommerce div.product .product_title { font-family: var(--fq-font-display); color: var(--fq-primary); }
.woocommerce-tabs .panel h2,
.woocommerce #reviews h2,
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2,
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce form.checkout h3 { font-family: var(--fq-font-display); color: var(--fq-primary); }

/* Form fields (cart, checkout, account). */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  border-radius: var(--fq-radius-md);
  border: 1px solid var(--fq-border);
  padding: 0.6rem 0.9rem;
}

/* Cart + checkout tables. */
.woocommerce table.shop_table { border-radius: var(--fq-radius-lg); border-color: var(--fq-border); overflow: hidden; }

/* Notices on brand. */
.woocommerce-message,
.woocommerce-info { border-top-color: var(--fq-leaf); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--fq-leaf); }

/* Single product: rich Description content (About, benefits, ingredients, how to use). */
#tab-description h3 {
  font-family: var(--fq-font-display);
  color: var(--fq-primary);
  font-size: var(--fq-text-xl);
  margin: 1.75rem 0 0.6rem;
}
#tab-description h3:first-child { margin-top: 0; }
#tab-description p { color: var(--fq-foreground); }
#tab-description ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
#tab-description ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.45rem;
  color: var(--fq-foreground);
}
#tab-description ul li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--fq-leaf);
}
/* Benefits and kit contents read as a green checklist. */
#tab-description ul.fq-benefits li::before,
#tab-description ul.fq-kit-list li::before {
  content: "\2713";
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--fq-leaf);
  font-weight: 700;
}
#tab-description ol { margin: 0 0 1.1rem; padding-left: 1.25rem; }
#tab-description ol li { margin-bottom: 0.45rem; color: var(--fq-foreground); }

/* Buy on WhatsApp button. */
.fq-btn--whatsapp { background-color: #25D366; color: #fff; }
.fq-btn--whatsapp:hover,
.fq-btn--whatsapp:focus { background-color: #1FB855; color: #fff; }
.fq-single__whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }

/* Trust badges row. */
.fq-single__trust {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.fq-single__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fq-text-xs);
  color: var(--fq-muted-foreground);
}
.fq-single__trust li svg { flex: none; color: var(--fq-primary); }

/* What 8 to 12 weeks looks like. */
.fq-single__timeline {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--fq-border);
  border-radius: var(--fq-radius-xl);
  background-color: var(--fq-surface-tint);
}
.fq-single__timeline-title {
  font-family: var(--fq-font-display);
  color: var(--fq-primary);
  font-size: var(--fq-text-2xl);
  margin: 0 0 1rem;
}
.fq-single__timeline-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .fq-single__timeline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fq-single__phase { display: flex; flex-direction: column; gap: 0.25rem; }
.fq-single__phase-label { font-weight: 700; color: var(--fq-primary); font-size: var(--fq-text-sm); }
.fq-single__phase-text { font-size: var(--fq-text-sm); color: var(--fq-muted-foreground); }