/*
Theme Name: FamilyCrests
Theme URI: https://myheritagestories.com
Description: Brand theme for FamilyCrests / myheritagestories.com. Child of Astra. Premium heraldico europeo refinado.
Author: FamilyCrests Studio LLC
Author URI: https://myheritagestories.com
Template: astra
Version: 0.1.1
Text Domain: familycrests
*/

/* ============================================================
   Brand tokens — extraidos de Shopify Dawn (settings_data.json)
   ============================================================ */
:root {
  /* Color schemes — match Shopify color schemes activos */
  --fc-navy: #112b3d;          /* scheme-5 bg / scheme-52754825 button */
  --fc-navy-rgb: 17, 43, 61;
  --fc-cream: #f2ece3;         /* scheme-663a0190 bg */
  --fc-cream-rgb: 242, 236, 227;
  --fc-white: #ffffff;
  --fc-text: #121212;          /* scheme-52754825 text on white */
  --fc-text-soft: #54595f;     /* muted */
  --fc-gold: #c9a84c;          /* decorativo — dividers, icons, gold frame accents */
  --fc-red: #bd1700;           /* compare-at price strikethrough */
  --fc-border-soft: rgba(17, 43, 61, 0.1);

  /* Typography — Cardo (headings) + Besley (body, Shopify match) + Montserrat (UI) */
  --fc-font-heading: "Cardo", Georgia, "Times New Roman", serif;
  --fc-font-body: "Besley", Georgia, "Times New Roman", serif;
  --fc-font-ui: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout — Shopify page_width = 1500px */
  --fc-container-width: 1500px;
  --fc-container-padding: 24px;

  /* Border radii — Shopify Dawn settings */
  --fc-button-radius: 0px;     /* buttons_radius: 0 */
  --fc-input-radius: 4px;      /* inputs_radius: 4 */
  --fc-pill-radius: 40px;      /* variant_pills_radius: 40 */
  --fc-card-radius: 0px;       /* card_corner_radius: 0 */

  /* Spacing */
  --fc-section-padding: 80px;
  --fc-section-padding-mobile: 48px;
}

/* ============================================================
   Typography
   ============================================================ */
body,
.entry-content {
  font-family: var(--fc-font-body);
  color: var(--fc-text);
  background: var(--fc-white);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading,
.elementor-heading-title,
.ast-site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--fc-font-heading);
  color: var(--fc-navy);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Site title (logo placeholder) — Montserrat uppercase per brand */
.ast-site-title {
  font-family: var(--fc-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   Buttons — Montserrat uppercase, navy bg, white text (Shopify CTA style)
   ============================================================ */
.button,
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce-page input[type="submit"],
.ast-button,
button.ast-button,
.elementor-button {
  font-family: var(--fc-font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  border-radius: var(--fc-button-radius);
  background-color: var(--fc-navy);
  color: var(--fc-white);
  border: 1px solid var(--fc-navy);
  padding: 14px 32px;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.ast-button:hover,
.elementor-button:hover {
  background-color: var(--fc-navy);
  color: var(--fc-white);
  opacity: 0.9;
}

/* ============================================================
   Inputs (text fields, textarea, select)
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  border-radius: var(--fc-input-radius);
  border: 1px solid var(--fc-border-soft);
  font-family: var(--fc-font-body);
  padding: 12px 16px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--fc-navy);
  outline: none;
}

/* ============================================================
   WooCommerce prices — compare-at red strikethrough
   ============================================================ */
.woocommerce-Price-amount,
.wc-block-components-product-price {
  color: var(--fc-navy);
  font-weight: 600;
}

.price del,
.price del .woocommerce-Price-amount,
.wc-block-components-product-price--deleted .wc-block-components-product-price__value,
del .amount,
del.woocommerce-Price-amount {
  color: var(--fc-red);
  text-decoration: line-through;
  opacity: 1;
}

.price ins,
.price ins .woocommerce-Price-amount {
  color: var(--fc-navy);
  text-decoration: none;
  font-weight: 700;
}

/* ============================================================
   Single product page UX (match Shopify reference)
   ============================================================ */

/* Product title — exact Shopify h1 (Dawn rem-based: 30/40px, color #121212, regular weight) */
.woocommerce div.product .product_title {
  font-family: var(--fc-font-heading);
  color: var(--fc-text);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  margin-bottom: 8px;
  letter-spacing: 0.06rem;
}
@media (min-width: 750px) {
  .woocommerce div.product .product_title {
    font-size: 40px;
  }
}

/* Price block — Shopify product custom_css override:
   .price-item--regular { color: #bd1700; font-size: 1.2em; }  (strikethrough)
   .price-item--sale    { font-size: 1.5em; }                  (current price)
   Base price font-size in Dawn is 1.6rem (16px) so:
   - del (regular):  16 * 1.2 = ~19.2px, color red
   - ins (sale):     16 * 1.5 = ~24px,   default text color (#121212) */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 16px;
  margin: 12px 0;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  opacity: 1;
  font-size: 1.2em;
  text-decoration: line-through;
}
.woocommerce div.product p.price del .woocommerce-Price-amount,
.woocommerce div.product span.price del .woocommerce-Price-amount {
  color: #bd1700;
  font-weight: 400;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  color: var(--fc-text);
  font-size: 1.5em;
  font-weight: 700;
  text-decoration: none;
}

/* Sale badge inline next to price */
.fc-sale-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--fc-font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--fc-red);
  color: var(--fc-white);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Hide WC's auto-rendered "On sale!" badge on single page (we render inline) */
.woocommerce div.product span.onsale {
  display: none !important;
}

/* Hide WC product meta on single product page (SKU / Categories / Tags).
   Astra renders some of these as standalone spans outside .product_meta. */
.woocommerce div.product .product_meta,
.woocommerce div.product .posted_in,
.woocommerce div.product .tagged_as,
.woocommerce div.product .sku_wrapper,
.woocommerce div.product .single-product-category,
.single-product-category {
  display: none !important;
}

/* Hide quantity selector on single product page (Shopify-match: only Order Now full-width).
   WC defaults qty to 1 when the input is missing. */
.woocommerce div.product form.cart .quantity {
  display: none !important;
}

/* ORDER NOW button — Shopify product custom_css: "button {font-size: 18px; text-transform: uppercase;}"
   Plus full-width like Dawn add-to-cart button. bg #112B3D navy (match Shopify exact) */
.woocommerce div.product form.cart .single_add_to_cart_button {
  display: block !important;
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  margin-top: 8px;
  letter-spacing: 0.08em;
  font-weight: 700;
  background: var(--fc-navy) !important;
  color: #ffffff !important;
  border: 1px solid var(--fc-navy) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  opacity: 0.88;
  background: var(--fc-navy) !important;
  color: #ffffff !important;
}

/* Astra wraps the cart form differently — ensure form is full width too */
.woocommerce div.product form.cart {
  display: block;
  margin-bottom: 0;
}
.woocommerce div.product form.cart .button {
  float: none;
}

/* Hide WC "Clear" link that appears when a variation is selected */
.woocommerce div.product form.cart .reset_variations,
.reset_variations {
  display: none !important;
  visibility: hidden !important;
}

/* Hide the duplicated variation price block (we already show it at the top) */
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-price {
  display: none !important;
}
/* But KEEP the availability / out-of-stock message if it appears */
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-availability {
  margin: 8px 0;
}
/* ============================================================
   WC product card override — Shopify Dawn parity for collection grid
   ============================================================ */
.fc-collection-grid ul.products li.product,
.fc-collection-grid ul.products li.product,
.woocommerce-archive ul.products li.product {
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  position: relative;
}
/* Hide Astra-injected category label + Astra icon button on loop cards */
.fc-collection-grid ul.products li.product .ast-woo-product-category,
.fc-collection-grid ul.products li.product .ast-on-card-button {
  display: none !important;
}
/* Hide the secondary WC "Add to cart" / "Select options" text button that
   Astra renders BELOW the price block. Shopify Dawn cards never show a button. */
.fc-collection-grid ul.products li.product .button,
.fc-collection-grid ul.products li.product .add_to_cart_button,
.fc-collection-grid ul.products li.product .product_type_variable,
.fc-collection-grid ul.products li.product .product_type_simple,
.fc-collection-grid ul.products li.product .wp-block-button,
.fc-collection-grid ul.products li.product .added_to_cart {
  display: none !important;
}
/* Sale badge: HIDDEN — Shopify Dawn does not show this badge on cards */
.fc-collection-grid ul.products li.product .ast-onsale-card,
.fc-collection-grid ul.products li.product .ast-onsale-card,
.fc-collection-grid ul.products li.product .onsale,
.fc-collection-grid ul.products li.product .onsale,
.woocommerce ul.products li.product .ast-onsale-card,
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .ast-on-card-button {
  display: none !important;
}
/* Card image wrapper — portrait 4:5 (Shopify Dawn default), contain (no crop) */
.fc-collection-grid ul.products li.product .astra-shop-thumbnail-wrap,
.fc-collection-grid ul.products li.product .astra-shop-thumbnail-wrap,
.fc-collection-grid ul.products li.product .woocommerce-loop-product__link,
.fc-collection-grid ul.products li.product .woocommerce-loop-product__link {
  position: relative;
  display: block;
  background: #FFFFFF;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.fc-collection-grid ul.products li.product .astra-shop-thumbnail-wrap img,
.fc-collection-grid ul.products li.product .woocommerce-loop-product__link img,
.fc-collection-grid ul.products li.product img[class*="attachment-woocommerce"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  transition: transform 0.6s ease;
}
/* Hover zoom: subtle scale on the image when hovering the card */
.fc-collection-grid ul.products li.product:hover .astra-shop-thumbnail-wrap img,
.fc-collection-grid ul.products li.product:hover .woocommerce-loop-product__link img,
.fc-collection-grid ul.products li.product:hover img[class*="attachment-woocommerce"] {
  transform: scale(1.03);
}
/* Title — Cardo serif center, weight 400 — 13px tight to image */
.fc-collection-grid ul.products li.product .woocommerce-loop-product__title,
.fc-collection-grid ul.products li.product .woocommerce-loop-product__title {
  font-family: "Cardo", Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  text-align: center !important;
  margin: 4px 0 2px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  /* padding-bottom: 6px gives the underline room to draw inside the H2 box.
     Without this, the underline (drawn below text baseline) gets clipped by
     `overflow: hidden` which is needed for the ellipsis truncation. */
  padding: 0 0 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Force title link to BLACK in all states — kill Astra default blue */
.fc-collection-grid ul.products li.product a,
.fc-collection-grid ul.products li.product a,
.fc-collection-grid ul.products li.product a:link,
.fc-collection-grid ul.products li.product a:link,
.fc-collection-grid ul.products li.product a:visited,
.fc-collection-grid ul.products li.product a:visited,
.fc-collection-grid ul.products li.product a:hover,
.fc-collection-grid ul.products li.product a:hover,
.fc-collection-grid ul.products li.product a:focus,
.fc-collection-grid ul.products li.product a:focus {
  color: #121212 !important;
  text-decoration: none !important;
}
.fc-collection-grid ul.products li.product a .woocommerce-loop-product__title,
.fc-collection-grid ul.products li.product a .woocommerce-loop-product__title,
.fc-collection-grid ul.products li.product a:visited .woocommerce-loop-product__title,
.fc-collection-grid ul.products li.product a:visited .woocommerce-loop-product__title {
  color: #121212 !important;
}
/* Underline product title on hover — SOLO en devices con mouse real
   (`@media (hover: hover)`). En mobile/touch, `:hover` se queda "sticky"
   después del tap y produce un subrayado fantasma que confunde al user.
   Esta regla solo se evalúa en cursor-driven UAs. */
@media (hover: hover) {
  .fc-collection-grid ul.products li.product:hover .woocommerce-loop-product__title,
  .fc-collection-grid ul.products li.product:focus-within .woocommerce-loop-product__title,
  .fc-collection-grid ul.products li.product:hover a .woocommerce-loop-product__title,
  .fc-collection-grid ul.products li.product a:hover .woocommerce-loop-product__title,
  .fc-collection-grid ul.products li.product:hover .ast-loop-product__link .woocommerce-loop-product__title,
  .fc-collection-grid ul.products li.product:hover .woocommerce-LoopProduct-link .woocommerce-loop-product__title {
    color: #121212 !important;
    text-decoration-line: underline !important;
    text-decoration-color: #121212 !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
  }
}
/* Price block — center, sale price larger black, compare-at smaller RED strike */
.fc-collection-grid ul.products li.product .price,
.fc-collection-grid ul.products li.product .price {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 !important;
  text-align: center !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
}
.fc-collection-grid ul.products li.product .price del,
.fc-collection-grid ul.products li.product .price del,
.fc-collection-grid ul.products li.product .price del .amount,
.fc-collection-grid ul.products li.product .price del .amount {
  text-decoration: line-through !important;
  color: #BD1700 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.fc-collection-grid ul.products li.product .price ins,
.fc-collection-grid ul.products li.product .price ins,
.fc-collection-grid ul.products li.product .price ins .amount,
.fc-collection-grid ul.products li.product .price ins .amount,
.fc-collection-grid ul.products li.product .price ins .fc-from-prefix,
.fc-collection-grid ul.products li.product .price ins .fc-from-prefix {
  text-decoration: none !important;
  color: #121212 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  background: transparent !important;
}
.fc-collection-grid ul.products li.product .price > .amount,
.fc-collection-grid ul.products li.product .price > .amount {
  color: #121212 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
/* Hide WC star rating on loop (Shopify Dawn doesn't show stars per card) */
.fc-collection-grid ul.products li.product .star-rating,
.fc-collection-grid ul.products li.product .star-rating,
.fc-collection-grid ul.products li.product .woocommerce-product-rating,
.fc-collection-grid ul.products li.product .woocommerce-product-rating {
  display: none !important;
}

/* Material chips (replaces dropdown for Material attribute) */
.fc-hidden-select {
  display: none !important;
}
.fc-material-current {
  font-family: var(--fc-font-body);
  font-size: 14px;
  color: var(--fc-navy);
  margin: 0 0 6px;
}
.fc-material-current::before {
  content: "Material: ";
  color: var(--fc-text-soft);
  margin-right: 4px;
}
.fc-material-current-name {
  font-weight: 600;
}
.fc-material-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.fc-material-chip {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid transparent;
  padding: 3px;
  cursor: pointer;
  background: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fc-material-chip:hover { transform: scale(1.05); }
.fc-material-chip .fc-chip-circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}
.fc-material-chip.is-active {
  border-color: var(--fc-navy);
}

/* Spots urgency pill ("Only X family spots left today!") — Limited Edition only */
.fc-spots {
  text-align: center;
  margin-top: 14px;
}
.fc-spots-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 50px;
  padding: 5px 18px;
  background: rgba(17, 43, 61, 0.12);
  font-family: var(--fc-font-ui);
  font-size: 14px;
  color: #000;
}
.fc-spots-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #E74C3C;
  position: relative;
}
.fc-spots-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #E74C3C;
  animation: fc-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes fc-ping {
  0%        { transform: scale(1);   opacity: 0.75; }
  75%, 100% { transform: scale(2.5); opacity: 0; }
}

/* 90-Day Satisfaction Guarantee badge (Shopify image-based version) */
/* 90-Day guarantee badge — uses a pre-processed PNG with true alpha channel
   (white bg pixels were converted to alpha 0 with gradient anti-aliasing
   server-side). No blend modes, no stacking-context dependencies — the seal
   sits flush on whatever card bg is behind it. */
.fc-guarantee {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(17, 43, 61, 0.12);
  border: 1.5px solid var(--fc-navy);
  padding: 8px 12px;
  margin: 14px 0 36px;
  border-radius: 0;
}
.fc-guarantee-img {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  object-fit: contain;
  margin: -10px 0;
  /* Heritage-results uses the same approach: white-bg PNG + mix-blend-mode
     multiplies the white away against any background. */
  mix-blend-mode: multiply;
}
.fc-guarantee-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--fc-font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
}
.fc-guarantee-text .fc-guarantee-title {
  font-size: 13px;
  color: #000;
  display: block;
  margin-bottom: 2px;
}
.fc-guarantee-text strong {
  font-size: 13px;
  color: #000;
}

/* ============================================================
   Review badge (between title and price)
   ============================================================ */
.fc-review-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
}
.fc-review-stars {
  color: var(--fc-gold);
  font-size: 1.6rem;
  letter-spacing: 2px;
  line-height: 1;
}
.fc-review-count {
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  color: #333;
}
.fc-review-count:hover {
  color: var(--fc-navy);
}

/* ============================================================
   Accordion (product summary + FAQs)
   ============================================================ */
.fc-accordion {
  margin: 16px 0 24px;
}
.fc-accordion-item {
  border-bottom: 1px solid var(--fc-border-soft);
}
.fc-accordion-item:first-child {
  border-top: 1px solid var(--fc-border-soft);
}
.fc-accordion-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--fc-font-heading);
  font-size: 17px;
  color: var(--fc-navy);
  font-weight: 400;
}
.fc-accordion-summary::-webkit-details-marker { display: none; }
.fc-accordion-chevron {
  font-family: var(--fc-font-ui);
  font-weight: 300;
  font-size: 0; /* hide the inner "+" text */
  color: var(--fc-navy);
  transition: transform 0.2s ease;
  line-height: 1;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fc-accordion-chevron::before {
  content: '\203A'; /* › single right-pointing angle quotation */
  font-size: 22px;
  font-weight: 300;
  font-family: Arial, sans-serif;
  color: inherit;
  display: block;
  line-height: 1;
}
.fc-accordion-item[open] .fc-accordion-chevron {
  transform: rotate(90deg); /* › rotates down when open */
}
.fc-accordion-body {
  padding: 0 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fc-text);
}
.fc-accordion-body p { margin: 0 0 8px; }

/* ============================================================
   Marketing sections (between summary and related products)
   ============================================================ */
.fc-marketing-sections {
  max-width: 760px;
  margin: 48px auto;
  text-align: center;
  padding: 0 24px;
  /* Clear the gallery (float: left) + summary (float: right) above so this
     section lays out at full width below them. Without this, it tries to
     flow inline between the floats and gets squished to ~60px. */
  clear: both;
}
.fc-marketing-section {
  margin-bottom: 56px;
}

/* When the container has EXACTLY 2 marketing sections, lay them out side-by-side
   on desktop. Headings, bodies, and images each share a row so they align
   horizontally across columns even if text lengths differ. */
.fc-marketing-sections:has(> .fc-marketing-section:nth-child(2):last-child) {
  max-width: 1240px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 48px;
  row-gap: 16px;
  align-items: start;
}
/* `display: contents` makes each section's children (h2, p, img) participate
   directly in the parent grid. Combined with explicit grid-row assignments,
   all headings land on row 1, all bodies on row 2, all images on row 3 — so
   the images align horizontally even when the text above differs in length. */
.fc-marketing-sections:has(> .fc-marketing-section:nth-child(2):last-child) .fc-marketing-section {
  display: contents;
}
.fc-marketing-sections:has(> .fc-marketing-section:nth-child(2):last-child) .fc-marketing-heading {
  grid-row: 1;
}
.fc-marketing-sections:has(> .fc-marketing-section:nth-child(2):last-child) .fc-marketing-body {
  grid-row: 2;
}
.fc-marketing-sections:has(> .fc-marketing-section:nth-child(2):last-child) .fc-marketing-image {
  grid-row: 3;
}
@media (max-width: 749px) {
  .fc-marketing-sections:has(> .fc-marketing-section:nth-child(2):last-child) {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .fc-marketing-sections:has(> .fc-marketing-section:nth-child(2):last-child) .fc-marketing-heading,
  .fc-marketing-sections:has(> .fc-marketing-section:nth-child(2):last-child) .fc-marketing-body,
  .fc-marketing-sections:has(> .fc-marketing-section:nth-child(2):last-child) .fc-marketing-image {
    grid-row: auto;
  }
}
/* Shopify ref: title 32px Cardo serif #121212, body 15px Besley serif #333333 */
.fc-marketing-heading {
  font-family: "Cardo", Georgia, "Times New Roman", serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  margin: 0 0 16px;
  line-height: 1.2;
}
.fc-marketing-body {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #333333 !important;
  line-height: 1.7;
  margin: 0 0 24px;
}
.fc-marketing-image {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   FAQs section
   ============================================================ */
.fc-faqs {
  /* Section keeps full-width white background (forced by .entry-content breakout rule),
     inner content (heading + accordion) is constrained narrow + centered below. */
  padding: 39px 24px;
  background: #ffffff;
}
@media (min-width: 750px) {
  .fc-faqs {
    padding: 52px 24px;
  }
}
.fc-faqs-heading,
.fc-faqs .fc-accordion-faqs {
  /* Centered narrow column matching Shopify Dawn pattern */
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fc-faqs-heading {
  /* Match Shopify Dawn exact: 32px / #121212 / system serif stack (New York → Iowan Old Style fallback) */
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #121212 !important;
  margin-top: 0 !important;
  margin-bottom: 44.8px !important;
  text-align: center !important;
  letter-spacing: normal !important;
  line-height: 1.15 !important;
}
.fc-accordion-faqs .fc-accordion-summary {
  /* Shopify Dawn exact: 18px / system serif / #000 / weight normal */
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: #000000 !important;
  line-height: 1.3 !important;
  padding: 15px 0 !important;
}
/* FAQ accordion items: border top + bottom 1px (Shopify exact) */
.fc-accordion-faqs .fc-accordion-item {
  border-top: 1px solid rgba(18, 18, 18, 0.08);
  border-bottom: 1px solid rgba(18, 18, 18, 0.08);
  margin-top: 0;
  margin-bottom: 0;
}
.fc-accordion-faqs .fc-accordion-item + .fc-accordion-item {
  border-top: 0;
}
/* FAQ answers — Shopify Dawn exact: 14px Inter / #4D4D4D */
.fc-accordion-faqs .fc-accordion-body,
.fc-accordion-faqs .fc-accordion-body p {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  color: #4D4D4D !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}
/* <strong>/<b> inside FAQ answers: same font + color, only weight bumps to bold */
.fc-accordion-faqs .fc-accordion-body strong,
.fc-accordion-faqs .fc-accordion-body b {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  color: #4D4D4D !important;
  font-weight: 700 !important;
}

/* ============================================================
   Testimonials carousel
   ============================================================ */
.fc-testimonials {
  max-width: 900px;
  margin: 56px auto 80px;
  padding: 0 24px;
  text-align: center;
}
.fc-testimonials-heading {
  font-family: var(--fc-font-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--fc-navy);
  margin: 0 0 4px;
}
.fc-testimonials-sub {
  font-family: var(--fc-font-body);
  font-size: 14px;
  color: var(--fc-text-soft);
  font-weight: 400;
  margin: 0 0 32px;
}
.fc-testimonials-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 0;
}
.fc-testimonials-carousel::-webkit-scrollbar { display: none; }
.fc-testimonial {
  flex: 0 0 100%;
  scroll-snap-align: center;
  text-align: center;
  padding: 24px;
}
.fc-testimonial-stars {
  color: var(--fc-gold);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.fc-testimonial-quote {
  font-family: var(--fc-font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fc-text);
  margin: 0 0 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.fc-testimonial-author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.fc-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--fc-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fc-font-heading);
  color: var(--fc-navy);
  font-size: 20px;
}
.fc-testimonial-avatar-placeholder {
  border: 1px solid var(--fc-border-soft);
}
.fc-testimonial-author strong {
  display: block;
  font-family: var(--fc-font-ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--fc-navy);
  text-align: left;
}
.fc-testimonial-author span {
  display: block;
  font-size: 12px;
  color: var(--fc-text-soft);
  text-align: left;
}
.fc-testimonials-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.fc-testimonials-nav button {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--fc-border-soft);
  background: var(--fc-white);
  color: var(--fc-navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-family: var(--fc-font-ui);
}
.fc-testimonials-nav button:hover {
  background: var(--fc-navy);
  color: var(--fc-white);
}

/* ============================================================
   Family Legacy Reports custom layout (digital downloads)
   ============================================================ */
.flr-layout {
  max-width: 920px;
  margin: 16px auto;
  padding: 0 24px;
  font-family: var(--fc-font-body);
}

/* Digital Download ribbon badge */
.flr-badge {
  text-align: center;
  padding: 14px 0 6px;
}
.flr-badge span {
  display: inline-block;
  background: linear-gradient(135deg, #c9a84c, #f0d580, #c9a84c);
  color: var(--fc-navy);
  font-family: var(--fc-font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 7px 22px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.3);
}

/* Checklist */
.flr-checklist {
  background: #FBF8F2;
  border-left: 4px solid var(--fc-gold);
  border-radius: 4px;
  padding: 22px 26px;
  margin: 24px 0;
}
.flr-checklist h3 {
  font-family: var(--fc-font-heading);
  color: var(--fc-navy);
  margin: 0 0 14px;
  font-size: 1.12em;
  font-weight: 600;
}
.flr-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.flr-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--fc-font-ui);
  font-size: 0.95em;
  color: var(--fc-navy);
  line-height: 1.45;
}
.flr-check {
  color: var(--fc-gold);
  font-size: 1.15em;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Comparison table */
.flr-comparison {
  margin: 32px 0;
  overflow-x: auto;
}
.flr-comparison table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fc-font-ui);
  font-size: 14px;
}
.flr-comparison th,
.flr-comparison td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--fc-border-soft);
  text-align: center;
}
.flr-comparison th {
  background: var(--fc-navy);
  color: var(--fc-white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.flr-comparison th small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
}
.flr-comparison th:first-child,
.flr-comparison td:first-child {
  text-align: left;
  color: var(--fc-navy);
}
.flr-comparison th.flr-current,
.flr-comparison td.flr-current {
  background: rgba(201, 168, 76, 0.18);
  color: var(--fc-navy);
  font-weight: 700;
}
.flr-comparison th.flr-current { background: var(--fc-gold); color: var(--fc-navy); }

/* CTA */
.flr-cta {
  text-align: center;
  padding: 20px 0 10px;
  font-family: var(--fc-font-body);
  font-size: 16px;
  color: var(--fc-text);
  line-height: 1.6;
}
.flr-cta strong {
  color: var(--fc-navy);
}

/* Trust badges row */
.flr-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  background: #FBF8F2;
  border-top: 2px solid var(--fc-gold);
  border-bottom: 2px solid var(--fc-gold);
  padding: 20px 16px;
  margin: 24px 0;
}
.flr-trust-item {
  text-align: center;
  flex: 1;
  min-width: 110px;
  padding: 0 10px;
}
.flr-trust-icon {
  font-size: 1.7em;
  margin-bottom: 6px;
}
.flr-trust-title {
  font-family: var(--fc-font-ui);
  font-weight: 700;
  font-size: 12px;
  color: var(--fc-navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.flr-trust-sub {
  font-family: var(--fc-font-ui);
  font-size: 11px;
  color: #666;
  margin-top: 3px;
}

/* Tier-specific reviews (dark theme) */
.flr-reviews {
  background: var(--fc-navy);
  padding: 32px 20px;
  margin: 24px 0;
  border-radius: 0;
}
.flr-reviews h3 {
  font-family: var(--fc-font-heading);
  color: var(--fc-gold);
  text-align: center;
  margin: 0 0 22px;
  font-size: 1.25em;
}
.flr-reviews-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.flr-review-card {
  background: var(--fc-navy);
  border-radius: 6px;
  padding: 20px 22px;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
.flr-review-stars {
  color: var(--fc-gold);
  font-size: 1.05em;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.flr-review-quote {
  font-family: var(--fc-font-heading);
  color: #e8e2d6;
  font-size: 0.97em;
  margin: 0 0 12px;
  font-style: italic;
  line-height: 1.55;
}
.flr-review-name {
  font-family: var(--fc-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--fc-gold);
}
.flr-review-location {
  font-family: var(--fc-font-ui);
  font-size: 11px;
  color: #8BA5B8;
  margin-top: 2px;
}

/* FAQ section (re-uses fc-accordion) */
.flr-faq {
  margin: 32px 0 16px;
}
.flr-faq h3 {
  font-family: var(--fc-font-heading);
  color: var(--fc-navy);
  font-size: 1.25em;
  margin: 0 0 16px;
  font-weight: 400;
}

/* Disclaimer footnote */
.flr-disclaimer {
  padding: 14px 0 6px;
}
.flr-disclaimer p {
  font-family: var(--fc-font-ui);
  font-size: 12px;
  color: #888;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ============================================================
   HOME PAGE — matching Shopify reference (capturahomeshopify.pdf)
   ============================================================ */

/* Shared home page typography */
.fc-home-h1 {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Cardo, Georgia, "Times New Roman", serif;
  /* base */
  color: #121212;
  font-weight: 600;
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 20px;
  letter-spacing: -0.005em;
  max-width: 720px; /* enough for 2-line wrap at 38px (was 460 → was breaking to 3 lines) */
}
@media (max-width: 600px) {
  .fc-home-h1 { font-size: 30px; max-width: 100%; }
}
.fc-home-h2 {
  font-family: var(--fc-font-heading);
  color: var(--fc-navy);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  margin: 0 0 12px;
  text-align: center;
}

/* CTA button (Discover Now / Order Now) */
.fc-home-cta {
  text-align: center;
  margin: 24px 0;
}
.fc-home-cta__btn {
  display: inline-block;
  background: var(--fc-navy);
  color: var(--fc-white) !important;
  font-family: var(--fc-font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 32px;
  text-decoration: none;
  border: 1px solid var(--fc-navy);
}
.fc-home-cta__btn:hover {
  background: transparent;
  color: var(--fc-navy) !important;
}

/* Remove Astra's default 60px margin around #primary on the home page
   (it pushed the hero away from the header). Selector simplificado
   porque el container class real es .ast-container, no .ast-plain-container. */
body.home #primary,
body.page-id-29 #primary,
body.home #content,
body.page-id-29 #content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Home page sections: break out of Astra's .entry-content max-width
   to span the FULL viewport width like Shopify reference does. */
.home .entry-content[data-ast-blocks-layout] > .fc-home-hero,
.home .entry-content[data-ast-blocks-layout] > .fc-home-mobile-promo,
.home .entry-content[data-ast-blocks-layout] > .fc-home-rich-text,
.home .entry-content[data-ast-blocks-layout] > .fc-home-multirow,
.home .entry-content[data-ast-blocks-layout] > #fc-desktop-ring-promo,
.home .entry-content[data-ast-blocks-layout] > .fc-home-tutorial,
.home .entry-content[data-ast-blocks-layout] > .fc-home-featured,
.home .entry-content[data-ast-blocks-layout] > .fc-home-collection,
.home .entry-content[data-ast-blocks-layout] > .fc-home-icons-list,
.home .entry-content[data-ast-blocks-layout] > .fc-faqs,
.home .entry-content[data-ast-blocks-layout] > .fc-testimonials,
.home .entry-content[data-ast-blocks-layout] > .testimonial-section-apolo,
.home .entry-content[data-ast-blocks-layout] > #fc-trust-badges-desktop,
.home .entry-content[data-ast-blocks-layout] > .woocommerce,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-home-hero,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-home-mobile-promo,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-home-rich-text,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-home-multirow,
.page-id-29 .entry-content[data-ast-blocks-layout] > #fc-desktop-ring-promo,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-home-tutorial,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-home-featured,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-home-collection,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-home-icons-list,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-faqs,
.page-id-29 .entry-content[data-ast-blocks-layout] > .fc-testimonials,
.page-id-29 .entry-content[data-ast-blocks-layout] > .testimonial-section-apolo,
.page-id-29 .entry-content[data-ast-blocks-layout] > #fc-trust-badges-desktop,
.page-id-29 .entry-content[data-ast-blocks-layout] > .woocommerce {
  max-width: 100vw !important;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* === SECTION 1: Hero — Shopify image-with-text section ===
   - padding_top:4 → ~3-4px ; padding_bottom:0
   - desktop_image_width:"small" → 3-col grid: image=1col, text=2cols
   - text_first + reverse → text LEFT, image RIGHT en desktop
   - mobile (<750px): imagen desktop oculta + caption "Made by Skilled Artisans" oculto;
     se muestra .fc-home-hero__mobile-img (person-holding-family-crest) */
.fc-home-hero {
  padding: 0 16px;
  background: var(--fc-white);
}
@media (max-width: 749px) {
  /* Shopify spec: hero h1 a 8px del edge. Section padding 8px lateral,
     text panel padding lateral 0. */
  .fc-home-hero {
    padding-left: 8px;
    padding-right: 8px;
  }
  .fc-home-hero__text {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (min-width: 750px) {
  .fc-home-hero {
    padding: 0 50px;
  }
}
.fc-home-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  padding: 0;
}
@media (min-width: 750px) {
  .fc-home-hero__inner {
    /* Image column fixed at Shopify's exact 464px so the image renders full size; text gets the rest */
    grid-template-columns: 1fr 464px;
    gap: 0;
  }
}
/* Text panel padding — tight enough so 2-line heading fits next to 464px image */
.fc-home-hero__text {
  padding: 30px 24px;
  align-self: center;
}
@media (min-width: 750px) {
  .fc-home-hero__text {
    padding: 60px 30px 70px 50px !important;
  }
}
@media (max-width: 749px) {
  /* Mobile: ocultar caption "Made by Skilled Artisans" + imagen desktop */
  .fc-home-hero__sub {
    display: none !important;
  }
  .fc-home-hero__image {
    display: none !important;
  }
}
.fc-home-hero__sub {
  font-family: var(--fc-font-body);
  font-size: 20px;
  color: #000000;
  margin: 20px 0 20px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.fc-home-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fc-home-bullets li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #4D4D4D;
  display: flex;
  align-items: flex-start;
}
.fc-home-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fc-navy);
  color: #ffffff;
  text-align: center;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}
.fc-home-hero__image {
  display: flex;
  justify-content: center;
}
.fc-home-hero__image img {
  width: 100%;
  max-width: 464px; /* Shopify spec: 463.95 × 656.22 */
  height: auto;
  display: block;
}

/* === SECTION 2: The Arms Your Ancestors Bore === */
.fc-home-arms {
  padding: 64px 24px;
  background: var(--fc-white);
}
.fc-home-arms__heading {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.fc-home-arms__sub {
  font-size: 15px;
  color: var(--fc-text-soft);
  line-height: 1.6;
}
.fc-home-arms__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .fc-home-arms__grid { grid-template-columns: 1fr 1fr; }
}
.fc-home-arms__tile {
  aspect-ratio: 1.15 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-home-arms__tile--image {
  overflow: hidden;
  background: var(--fc-cream);
}
.fc-home-arms__tile--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fc-home-arms__tile--text {
  padding: 32px 28px;
  background: var(--fc-white);
  border: 1px solid var(--fc-border-soft);
  flex-direction: column;
  text-align: center;
}
.fc-home-arms__tile--text h3 {
  font-family: var(--fc-font-heading);
  color: var(--fc-navy);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 12px;
  line-height: 1.25;
}
.fc-home-arms__tile--text p {
  font-size: 14px;
  color: var(--fc-text);
  line-height: 1.6;
  margin: 0;
}

/* === SECTION 3 & 4: Forged / Shield (features list) === */
.fc-home-forged,
.fc-home-shield {
  padding: 64px 24px;
  background: var(--fc-white);
}
.fc-home-forged__heading,
.fc-home-shield__heading {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}
.fc-home-forged__sub,
.fc-home-shield__sub {
  font-size: 15px;
  color: var(--fc-text-soft);
  line-height: 1.6;
}
.fc-home-forged__body,
.fc-home-shield__body {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 800px) {
  .fc-home-forged__body { grid-template-columns: 1fr 1fr; }
  .fc-home-shield__body { grid-template-columns: 1fr 1fr; }
}
.fc-home-features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fc-home-features li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fc-text);
}
.fc-home-features li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--fc-gold);
  font-size: 16px;
}
.fc-home-features li strong {
  color: var(--fc-navy);
  font-size: 15px;
  display: inline-block;
  margin-bottom: 4px;
}
.fc-home-forged__image,
.fc-home-shield__image {
  display: flex;
  justify-content: center;
}
.fc-home-forged__image img,
.fc-home-shield__image img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

/* === SECTION 5: Velvet banner (3 products — grid 3 cols always) === */
.fc-home-velvet {
  padding: 60px 24px;
  background: var(--fc-white);
}
.fc-home-velvet__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .fc-home-velvet__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.fc-home-velvet__item {
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.fc-home-velvet__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  transition: transform 0.4s ease;
}
.fc-home-velvet__item:hover img {
  transform: scale(1.04);
}

/* === SECTION 6: Featured Product — Shopify exact: bg white, padding 60 70, image square 572 === */
.fc-home-featured {
  padding: 36px 24px;
  background: #f6f6f6; /* gray bg like the multirow / "Arms" section */
}
@media (min-width: 750px) {
  .fc-home-featured {
    padding: 60px 50px;
  }
}
.fc-home-featured__inner {
  /* Spec Shopify: 1400 × 978.88 white card, padding 60px 70px */
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start; /* image flush with title top, not vertically centered */
  background: #ffffff;
  padding: 24px;
}
@media (min-width: 750px) {
  .fc-home-featured__inner {
    grid-template-columns: 693px 1fr; /* gallery fixed at Shopify spec 693px */
    gap: 60px;
    padding: 60px 70px;
  }
}
/* Bundle image stack — silver + gold stacked, crossfade by toggling .is-active class.
   Both images always rendered in DOM → swap is instant, no white flash.
   Spec Shopify: 693×693 */
.fc-home-featured__bundle-stack {
  position: relative;
  width: 100%;
  max-width: 693px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.fc-home-featured__bundle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fc-home-featured__bundle-img.is-active {
  opacity: 1;
}
.fc-home-featured__image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fc-home-featured__image img {
  width: 100%;
  max-width: 572px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  display: block;
}
.fc-home-featured__sale-row {
  display: flex;
  align-items: baseline; /* Prices on baseline (compare + sale stay aligned) */
  gap: 10px;
  margin-bottom: 8px;
}
.fc-home-featured__compare {
  /* Spec Shopify inspector: #BD1700 strikethrough, 21.6px Besley, weight 400, margin-right 10px */
  color: #BD1700 !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  text-decoration: line-through !important;
  font-size: 21.6px !important;
  font-weight: 400 !important;
  margin: 0 10px 0 0 !important;
}
.fc-home-featured__price {
  /* Spec Shopify inspector: #121212 black, 27px Besley, weight 400 (no bold), margin-right 10px */
  color: #121212 !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  margin: 0 10px 0 0 !important;
}
.fc-home-featured__sale-pill {
  /* Spec Shopify inspector: 12px Besley, #FFFFFF on #112B3D, padding 5px 13px 6px, margin 0 0 5px
     Anchored to TOP of price row (not baseline) via align-self */
  background: #112B3D !important;
  background-color: #112B3D !important;
  color: #FFFFFF !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 5px 13px 6px !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  margin: 0 0 5px !important;
  display: inline-flex !important;
  align-items: center;
  line-height: 1;
  align-self: flex-start !important;
}
.fc-home-featured__content {
  /* Spec Shopify inspector: 16px Besley serif, color #121212BF (75% alpha) — applies to all child text */
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 16px;
  color: rgba(18, 18, 18, 0.75);
}
.fc-home-featured__title {
  /* Spec Shopify inspector: 40px "New York" serif, #121212, margin 0 0 15px */
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  color: #121212;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 15px;
  letter-spacing: 0;
}
@media (min-width: 750px) {
  .fc-home-featured__title {
    font-size: 40px;
  }
}
.fc-home-featured__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fc-text);
  margin-bottom: 16px;
}
.fc-home-featured__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.fc-home-featured__bullets li {
  font-size: 14px;
  color: var(--fc-text);
  margin-bottom: 6px;
  line-height: 1.5;
}
.fc-home-featured__btn {
  /* Shopify Dawn "Add to cart" — full-width within column, 16px font, navy bg */
  display: block;
  width: 100%;
  background: var(--fc-navy);
  color: var(--fc-white) !important;
  font-family: var(--fc-font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.6px;
  text-transform: none;
  padding: 12px 30px;
  text-decoration: none;
  border: 1px solid var(--fc-navy);
  margin-bottom: 12px;
  text-align: center;
  min-height: 47px;
  line-height: 1.4;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.fc-home-featured__btn:hover {
  opacity: 0.9;
  color: var(--fc-white) !important;
}
.fc-home-featured__shipping {
  font-size: 12px;
  color: var(--fc-text-soft);
  margin: 8px 0 0;
}

/* ============================================================
   Featured Product — interactive picker components (matching Shopify exact)
   Banner top + gallery thumbnails + material chips + framing radios + name inputs + ring select
   ============================================================ */
.fc-home-featured__gallery {
  position: relative;
}
.fc-home-featured__bonuses-banner {
  background: var(--fc-navy);
  color: #ffffff;
  text-align: center;
  padding: 12px 16px;
  font-family: var(--fc-font-body);
  font-size: 14px;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.fc-home-featured__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fc-text);
}
.fc-gallery-arrow--prev { left: 8px; }
.fc-gallery-arrow--next { right: 8px; }
.fc-gallery-arrow:hover { background: #ffffff; }
.fc-home-featured__thumbnails {
  display: flex;
  justify-content: space-around;
  margin-top: 14px;
  font-family: var(--fc-font-body);
  font-size: 13px;
  color: var(--fc-text-soft);
  letter-spacing: 0.02em;
}
.fc-fp-thumb {
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.fc-fp-thumb:hover, .fc-fp-thumb.active {
  color: var(--fc-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Sale pill — Shopify usa pill negro pequeño (no rojo grande) */
.fc-home-featured__sale-pill {
  display: inline-flex;
  align-items: center;
  background: var(--fc-text);
  color: #ffffff;
  font-family: var(--fc-font-body);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-left: 8px;
}
/* Compare-at price: solo red strikethrough */
.fc-home-featured__compare {
  color: var(--fc-red);
  text-decoration: line-through;
  font-size: 16px;
  font-weight: 400;
}
/* Sale price: bold, black (no navy) */
.fc-home-featured__price {
  color: var(--fc-text);
  font-size: 28px;
  font-weight: 700;
}

/* Reviews row */
.fc-home-featured__reviews {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
}
.fc-home-featured__stars {
  /* Spec Shopify inspector: #C9A84C gold, 18px Besley, letter-spacing 2px */
  color: #C9A84C !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
}
.fc-home-featured__reviews-count {
  /* Spec Shopify inspector: 11.5px Besley, weight 600, underline, #333333
     Click does nothing — reviews system not built yet */
  color: #333333 !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  pointer-events: none;
  cursor: default;
}

/* Form (interactive picker) */
.fc-home-featured__form {
  margin-top: 16px;
}
.fc-fp-material-label {
  /* Spec Shopify inspector: 16px Besley #000, margin 16px 0 6px */
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  margin: 16px 0 6px !important;
}
.fc-fp-material-label span {
  /* Spec: 16px Besley #121212BF (75% alpha) — applied to #fc-fp-mat-name */
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(18, 18, 18, 0.75) !important;
}
.fc-fp-material-options {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.fc-fp-swatch-btn,
.fc-fp-swatch-btn:hover,
.fc-fp-swatch-btn:focus,
.fc-fp-swatch-btn:active,
.fc-fp-swatch-btn:focus-visible {
  /* Spec: 41×41 button with image filling FULL inner area — identical to frame swatch */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(80, 80, 80, 0.44) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  cursor: pointer;
  background: #ffffff !important;
  background-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s;
  width: 41px !important;
  height: 41px !important;
  min-height: 41px !important;
  flex-shrink: 0;
  overflow: hidden;
}
.fc-fp-swatch-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  transform-origin: center;
}
/* Material swatch images (rings/pendants) have internal whitespace baked into
   the source — zoom in so the product fills the button. Colour swatches
   (Tee/Wallet) are already framed tightly, so they DON'T get the zoom. */
.fc-fp-swatch-btn[data-material] img {
  transform: scale(1.35);
}
.fc-fp-swatch-btn.active,
.fc-fp-swatch-btn.active:hover,
.fc-fp-swatch-btn.active:focus,
.fc-fp-swatch-btn.active:active {
  /* Spec: active border #ad0000 1px (red of the crest) — also red on hover when active */
  border-color: #ad0000 !important;
  border-width: 1px !important;
}

/* Section labels — spec: title 12px Besley #121212BF, asterisk 12px Besley #AD0000.
   Tight bottom margin so labels sit close to the controls below them. */
.fc-fp-section-label {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(18, 18, 18, 0.75) !important; /* #121212BF */
  margin: 16px 0 4px !important;
}
.fc-fp-section-label .fc-fp-section-title {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 12px;
  color: rgba(18, 18, 18, 0.75);
}
.fc-fp-required {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 12px;
  color: #AD0000;
  margin-left: 2px;
}

/* Framing options 2x2 grid — small square swatch + label OUTSIDE the button (same shape as ring)
   Right column packed closer using auto-content columns instead of 1fr 1fr */
.fc-fp-framing-grid {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 32px;
  row-gap: 12px;
  margin-bottom: 16px;
}
.fc-fp-frame-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fc-fp-frame-swatch,
.fc-fp-frame-swatch:hover,
.fc-fp-frame-swatch:focus,
.fc-fp-frame-swatch:active,
.fc-fp-frame-swatch:focus-visible {
  /* Same outer size as ring material swatch (41×41). Image fills the FULL inner area. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(80, 80, 80, 0.44) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  cursor: pointer;
  background: #ffffff !important;
  background-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s;
  flex-shrink: 0;
  min-height: 41px !important;
  height: 41px !important;
  width: 41px !important;
  overflow: hidden;
}
.fc-fp-frame-swatch.active,
.fc-fp-frame-swatch.active:hover,
.fc-fp-frame-swatch.active:focus {
  border-color: #AD0000 !important;
  border-width: 1px !important;
}
.fc-fp-frame-swatch img,
.fc-fp-frame-swatch .fc-fp-frame-swatch__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.fc-fp-frame-swatch__img--none {
  /* "No Frame" — empty white square */
  background: #ffffff;
}
.fc-fp-frame-option__label {
  /* Spec Shopify: 14px Besley #121212BF */
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(18, 18, 18, 0.75);
  line-height: 1;
}

/* Step 2 inputs */
.fc-fp-input,
.fc-fp-input:focus,
.fc-fp-input:hover {
  /* Spec Shopify inspector: padding 12px 8px, 53px tall, 16px Besley */
  display: block !important;
  width: 100% !important;
  padding: 12px 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  border-radius: 4px !important;
  font-size: 16px !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  background: #ffffff !important;
  color: rgba(18, 18, 18, 0.75) !important;
  margin-bottom: 10px !important;
  box-sizing: border-box;
  outline: none !important;
  min-height: 53px;
}
.fc-fp-input:focus {
  border-color: var(--fc-navy) !important;
}
/* Placeholder stays at the lighter default gray (~50% alpha) */
.fc-fp-input::placeholder {
  color: rgba(18, 18, 18, 0.5) !important;
  opacity: 1;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
}
.fc-fp-input::-webkit-input-placeholder {
  color: rgba(18, 18, 18, 0.5) !important;
}
.fc-fp-input::-moz-placeholder {
  color: rgba(18, 18, 18, 0.5) !important;
  opacity: 1;
}

/* Inline arms-choice radios */
.fc-fp-arms-radios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 16px;
}
.fc-fp-radio-inline {
  /* Spec Shopify: 14px Besley #121212BF for label text */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
  line-height: 1.4;
  cursor: pointer;
}
.fc-fp-radio-inline input[type="radio"] {
  /* Custom radio (appearance: none) — full control over states so hover/focus
     have ZERO visual change. */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 17px !important;
  height: 17px !important;
  margin: 1px 0 0 0 !important;
  flex-shrink: 0;
  border-radius: 50% !important;
  border: 1.5px solid rgba(18, 18, 18, 0.5) !important;
  background: #ffffff !important;
  background-image: none !important;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
  opacity: 1 !important;
  filter: none !important;
}
/* Checked: red border + red fill + white inner ring (bullet look). Locked across all states. */
.fc-fp-radio-inline input[type="radio"]:checked,
.fc-fp-radio-inline input[type="radio"]:checked:hover,
.fc-fp-radio-inline input[type="radio"]:checked:focus,
.fc-fp-radio-inline input[type="radio"]:checked:active,
.fc-fp-radio-inline input[type="radio"]:checked:focus-visible {
  border-color: #AD0000 !important;
  background: #AD0000 !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 2.5px #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  outline: none !important;
}
/* Unchecked hover/focus: lock to default appearance, no tint */
.fc-fp-radio-inline input[type="radio"]:hover,
.fc-fp-radio-inline input[type="radio"]:focus,
.fc-fp-radio-inline input[type="radio"]:active,
.fc-fp-radio-inline input[type="radio"]:focus-visible {
  border-color: rgba(18, 18, 18, 0.5) !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  outline: none !important;
}
.fc-fp-radio-inline__title {
  /* 14px Besley #121212BF, wraps to ~2 lines per user preference */
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
  line-height: 1.4;
  max-width: 220px;
  display: inline-block;
}
/* No hover state on the label wrapper (text). Radio styling is handled above
   and intentionally NOT touched here — touching `input[type="radio"]` from a
   parent :hover selector would override the checked red fill. */
.fc-fp-radio-inline:hover,
.fc-fp-radio-inline:hover .fc-fp-radio-inline__title {
  color: rgba(18, 18, 18, 0.75) !important;
  background: transparent !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Error message — Spec Shopify inspector: 13px Besley #AD0000.
   Equal vertical margin above/below so it sits centered between input fields. */
.fc-fp-error-msg {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  color: #AD0000 !important;
  margin: 10px 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}
.fc-fp-error-msg__asterisk {
  color: #AD0000;
  font-weight: 400;
}

/* Shake animation — subtle (6px input / 10px grid), 500ms */
@keyframes fcFpShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-6px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(6px, 0, 0); }
}
@keyframes fcFpShakeBig {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}
.fc-fp-shake,
.fc-fp-shake.fc-fp-input,
input.fc-fp-shake {
  animation: fcFpShake 1s ease-in-out both !important;
  transition: none !important;
  will-change: transform;
  position: relative;
  z-index: 1;
}
.fc-fp-framing-grid.fc-fp-shake {
  animation: fcFpShakeBig 1s ease-in-out both !important;
}
/* Flash all frame swatches red borders while error is active — extra visual cue */
.fc-fp-framing-grid.fc-fp-error .fc-fp-frame-swatch {
  border-color: #AD0000 !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .fc-fp-shake { animation: none !important; }
}

/* Ring size select */
.fc-fp-select {
  /* 45px tall, 16px Besley, padding 0 31px 0 20px, white bg, 1px border
     Color matches Step 2 placeholder gray (lighter) */
  display: block !important;
  width: 100% !important;
  padding: 0 31px 0 20px !important;
  height: 45px !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  border-radius: 4px !important;
  font-size: 16px !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  background: #ffffff !important;
  color: rgba(18, 18, 18, 0.5) !important;
  margin: 0 0 16px !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23121212' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  outline: none;
}
.fc-fp-select option {
  /* Match the Step 2 input placeholder gray */
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  color: rgba(18, 18, 18, 0.5) !important;
  background: #ffffff !important;
}

/* ORDER NOW button — Spec Shopify inspector: 47px tall, padding 0 30px, margin 0 0 10px,
   16px Besley uppercase white on #112B3D */
.fc-home-featured__btn,
.fc-home-featured__btn:hover,
.fc-home-featured__btn:focus,
.fc-home-featured__btn:active,
.fc-home-featured__btn:visited {
  display: block !important;
  width: 100% !important;
  background: #112B3D !important;
  background-color: #112B3D !important;
  color: #FFFFFF !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0 30px !important;
  height: 47px !important;
  line-height: 47px !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 0 10px !important;
  outline: none !important;
  box-shadow: none !important;
}
.fc-home-featured__btn:hover {
  opacity: 0.88;
}

/* View full details link — Spec: 14px Besley #112B3D, margin 15px 0, underline */
.fc-home-featured__view-full,
.fc-home-featured__view-full:hover,
.fc-home-featured__view-full:focus,
.fc-home-featured__view-full:focus-visible,
.fc-home-featured__view-full:active,
.fc-home-featured__view-full:visited {
  display: block !important;
  text-align: left;
  color: #112B3D !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  margin: 15px 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* === SECTION 7: Our Collection === */
.fc-home-collection {
  padding: 64px 24px 16px;
  background: var(--fc-white);
  text-align: center;
}
.fc-home-collection__sub {
  font-family: var(--fc-font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fc-text-soft);
  margin-top: 4px;
}

/* WC products grid (home + "Our Collection" archive) — all visual rules are
   defined ABOVE via `.fc-collection-grid ul.products li.product...`
   selectors, applied via body class added in functions.php to home + archive.
   This keeps the look 100% consistent (no duplicated rules drifting). */
.fc-collection-grid ul.products {
  max-width: 1240px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

/* Hide WC + Astra archive chrome on ANY page that has the fc-collection-grid
   body class: WC page title, breadcrumbs, result count, sort dropdown, term
   description, sale flash, Astra archive title bar. Keeps every grid page
   visually identical to the home section. */
.fc-collection-grid .woocommerce-products-header,
.fc-collection-grid .woocommerce-result-count,
.fc-collection-grid .woocommerce-ordering,
.fc-collection-grid .woocommerce-breadcrumb,
.fc-collection-grid .term-description,
.fc-collection-grid .ast-archive-description,
.fc-collection-grid ul.products li.product .onsale {
  display: none !important;
}
/* Page title visibility: hide on archives (handled by our-collection custom
   template), but DON'T touch single product pages (they need the H1 title) */
.fc-collection-grid.archive .page-title,
.fc-collection-grid.tax-product_cat .page-title,
.fc-collection-grid.tax-product_tag .page-title,
.fc-collection-grid.search .page-title {
  display: none !important;
}

/* "Our Collection" / All Products archive: tighten the gap between the
   header and the "Our collection" title. The archive page has no entry
   content above the section, so the home's larger top padding looks too airy. */
.tax-product_cat.fc-collection-grid .ast-woocommerce-container,
.tax-product_cat.fc-collection-grid .site-content > .ast-container {
  padding-top: 0 !important;
}
.tax-product_cat.fc-collection-grid .fc-home-collection {
  padding-top: 16px !important;
  padding-bottom: 0 !important;
}

/* "Our Collection" / All Products archive: wider grid container (1654px max)
   to match Shopify reference. Home stays at default 1240px. Only applies to
   the category archive body class.
   Astra ships with a 1240px ceiling on `.ast-woo-shop-archive .ast-container`
   that we need to lift first, otherwise the inner grid stays capped. */
.tax-product_cat.fc-collection-grid .site-content > .ast-container,
.tax-product_cat.fc-collection-grid .ast-woocommerce-container,
.tax-product_cat.fc-collection-grid .fc-our-collection-page {
  max-width: 1654px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.tax-product_cat.fc-collection-grid ul.products,
.tax-product_cat.fc-collection-grid .products {
  max-width: 1654px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Logo link: kill the dashed focus outline that appears after clicking.
   Keep :focus-visible (keyboard navigation) for accessibility — only the
   mouse-click :focus ring is removed. */
.custom-logo-link:focus,
.site-logo-img a:focus,
.site-branding a:focus {
  outline: none !important;
  box-shadow: none !important;
}
.custom-logo-link:focus:not(:focus-visible),
.site-logo-img a:focus:not(:focus-visible),
.site-branding a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Single product page: gallery main image + thumbnails (Shopify reference).
   - Main image: 739×739 square with a subtle gray border (Shopify Dawn look).
   - Thumbnails: 5 columns × 126×126 px with consistent gap. Overrides the
     inline `width: 20%; float: left` styles Flexslider applies at runtime. */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery,
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-viewport {
  max-width: 739px;
}
/* Thin border around the MAIN image only (not the thumbnails) — drawn via
   a `::after` pseudo-element overlay so it doesn't affect Flexslider's
   slide width calculation (a real border on .flex-viewport would subtract
   2px from inner width and expose the next slide's edge). */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-viewport {
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(18, 18, 18, 0.08);
  pointer-events: none;
  z-index: 2;
}

/* On the PDP the featured block has no outer "section" — it lives directly
   inside the WC summary column. Strip the gray section bg + padding so it
   sits flat in the column (the home featured uses these for the outer gray
   strip; we don't want them on a single product page). */
.fc-home-featured--pdp {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 580px !important;
}
.fc-home-featured--pdp .fc-home-featured__content {
  padding: 0 !important;
  max-width: 580px !important;
}

/* Quantity selector on PDPs — ✚/✖ buttons + number input, ~47px tall, matches
   the cart-drawer qty controls visually but lives inside the featured form. */
.fc-fp-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 4px;
  height: 47px;
  width: 140px;
  margin: 0 0 16px;
  background: #ffffff;
  overflow: hidden;
  font-family: "Besley", Georgia, "Times New Roman", serif;
}
.fc-fp-qty-btn {
  background: transparent;
  border: none;
  width: 40px;
  height: 100%;
  font-size: 18px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  color: #121212;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.fc-fp-qty-btn:hover { background: rgba(18, 18, 18, 0.04) !important; }
/* Kill Astra's default blue active/focus background on the qty +/- buttons */
.fc-fp-qty-btn:focus,
.fc-fp-qty-btn:focus-visible,
.fc-fp-qty-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  color: #121212 !important;
  outline: none !important;
  box-shadow: none !important;
}
.fc-fp-qty-btn:active:hover {
  background: rgba(18, 18, 18, 0.04) !important;
}
.fc-fp-qty-input {
  flex: 1;
  text-align: center;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  font-size: 16px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  color: #121212;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100%;
  -moz-appearance: textfield;
}
.fc-fp-qty-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.fc-fp-qty-input::-webkit-outer-spin-button,
.fc-fp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Image-less swatches (PDPs without bundled product imagery) — render the
   material/colour value with a CSS gradient/solid fill so the 41×41 swatch
   button is visible. The home Limited Edition swatches use <img> children
   that cover the bg, so these rules are inert there. */
.fc-fp-swatch-btn[data-material="silver"] {
  background: linear-gradient(135deg, #c8c8c8 0%, #8a8a8a 50%, #b8b8b8 100%) !important;
}
.fc-fp-swatch-btn[data-material="gold"] {
  background: linear-gradient(135deg, #e8c66b 0%, #b08d2a 50%, #d4a942 100%) !important;
}
.fc-fp-swatch-btn[data-material="brass"] {
  background: linear-gradient(135deg, #d2a96b 0%, #a07535 100%) !important;
}
.fc-fp-swatch-btn[data-colour="black"] {
  background: #0f0f0f !important;
}
.fc-fp-swatch-btn[data-colour="white"] {
  background: #f5f5f5 !important;
}
.fc-fp-swatch-btn[data-colour="brown"] {
  background: #5a3a22 !important;
}
/* When the swatch contains an <img>, neutralize the solid/gradient fallback so
   the colored background doesn't flash for a frame before the image decodes.
   Specificity bumped via [data-*] to beat the gradient rules above. */
.fc-fp-swatch-btn[data-material]:has(> img),
.fc-fp-swatch-btn[data-colour]:has(> img) {
  background: #fff !important;
  background-image: none !important;
}

/* CLS prevention: every common image context reserves its space with
   aspect-ratio BEFORE the <img> loads. This prevents the page from "growing"
   as images stream in, which is what makes refresh-with-scroll-restore land
   you in the wrong place (and tanks Core Web Vitals / CLS score). */

/* Framing option swatches (product page options form) — 41×41 square */
.fc-fp-frame-swatch img,
.fc-fp-swatch-btn img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Single product gallery THUMBNAILS — square */
:is(.single-product, .fc-funnel-product-wrap) .flex-control-thumbs li,
:is(.single-product, .fc-funnel-product-wrap) .flex-control-thumbs li img {
  aspect-ratio: 1 / 1;
}

/* Single product MAIN image slide — square */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery__image,
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery__image img {
  aspect-ratio: 1 / 1;
}

/* Single product page: minimal gap between header and the gallery.
   Brute-force zero ALL top spacing on the wrapper chain (Astra defaults add
   ~80px of stacked paddings + the .site-main inherits Astra's 3em padding
   from the WC container). Then the gallery itself controls the final gap. */
.single-product .content-area.primary,
.single-product .site-content > .ast-container,
.single-product .site-main,
.single-product .ast-woocommerce-container,
.single-product .ast-article-single,
.single-product .product.type-product {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Hide Astra's WC breadcrumb + page title strip */
.single-product .woocommerce-breadcrumb,
.single-product .woocommerce-products-header,
.single-product .ast-archive-description,
.single-product .ast-product-title {
  display: none !important;
}
/* Article wrapper sits BELOW the header with breathing room. Both the gallery
   column and the summary column shift together so the summary title aligns
   with the gallery top edge (float layout). Net: ~32px gap below the header. */
.single-product .ast-article-single,
.single-product .product.type-product {
  margin-top: 16px !important;
}
/* Center the gallery+summary block on the page. `.product.type-product` also
   contains the after-summary sections (related, marketing, FAQs, testimonials)
   so we DON'T touch its layout — we just narrow it and let WC's default float
   layout center inside. Gallery + summary stay floated. */
.single-product .product.type-product {
  max-width: 1370px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery {
  width: 730px !important;
  max-width: 730px !important;
}
.single-product .summary.entry-summary {
  width: 580px !important;
  max-width: 580px !important;
}

/* Direction nav arrows on the main product image — Shopify Dawn style.
   40×40 round buttons centered vertically on the main image only (not on
   the thumbnails row). The .flex-direction-nav UL is a SIBLING of the
   viewport, so we give it position: absolute + aspect-ratio: 1/1 so it
   matches the square viewport's geometry — then `top: 50%` on each arrow
   lands at the image center. */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery {
  position: relative;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  max-width: 739px;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 3;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav li {
  margin: 0;
  list-style: none;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.85); /* Shopify #FFFFFFD9 */
  border: 1px solid transparent;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-indent: -9999px;
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 1px 6px rgba(18, 18, 18, 0.12);
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav a:hover,
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav a:focus,
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav a:focus-visible {
  background: #ffffff !important;
  border-color: rgba(18, 18, 18, 0.18) !important;
  box-shadow: 0 2px 8px rgba(18, 18, 18, 0.16) !important;
  color: transparent !important;
  outline: none !important;
}
/* Kill Astra's blue active/focus background on the arrow link */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav a:active,
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav a:visited {
  background: rgba(255, 255, 255, 0.85) !important;
  color: transparent !important;
}
/* 1/4 of the 40px circle (10px) sticks out beyond the image frame on each
   side — matches Shopify Dawn reference. */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav .flex-prev {
  left: -10px;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav .flex-next {
  right: -10px;
}
/* Don't clip the protruding arrows — gallery wrapper allows overflow */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery {
  overflow: visible;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav a::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid #333333; /* Shopify chevron color */
  border-right: 1.5px solid #333333;
  text-indent: 0;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav .flex-next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}
/* Disable state (first/last slide) — Flexslider applies .flex-disabled.
   Keep the arrow visible and CLICKABLE so the click is captured (does nothing)
   instead of falling through to the image below it (which would open the
   lightbox / select the slide). Cursor stays default to signal "no action". */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
  opacity: 0.45 !important;
  pointer-events: auto;
  cursor: default;
}
/* Inner image fills its slide. Flexslider sets the slide width inline; we
   only ensure the <img> inside scales to slide width without overflow. */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
/* ── Mobile: deshabilitar el lightbox (tap-to-fullscreen) de la galería.
   En celular, tocar la imagen principal abría el zoom a pantalla completa de
   WooCommerce sin UI clara de salida. pointer-events:none sobre el <li> y su
   <a> wrapper + el trigger; el swipe del carrusel se conserva (el touch recae
   sobre .flexslider, que mantiene pointer-events) y las miniaturas
   (.flex-control-thumbs) no se tocan.
   Aplica a: producto Limited Edition (postid-136) + galería principal de ambos
   funnels (.fc-funnel-product-wrap) + los 4 upsells "Exclusive Offers" del
   funnel (.fc-funnel-upsell-wrap), que renderean cada uno un [product_page]
   completo con su propia galería+lightbox (heritage-upsells.php). La regla del
   funnel principal ya existía pero vivía dentro de un @media (min-width:750px)
   de page-heritage-funnel.php y NO cubría mobile — esto lo completa. Desktop
   del resto de productos conserva el lightbox. */
@media (max-width: 768px) {
  body.single-product.postid-136 .woocommerce-product-gallery__image,
  body.single-product.postid-136 .woocommerce-product-gallery__image > a,
  body.single-product.postid-136 .woocommerce-product-gallery__trigger,
  :is(.fc-funnel-product-wrap, .fc-funnel-upsell-wrap) .woocommerce-product-gallery__image,
  :is(.fc-funnel-product-wrap, .fc-funnel-upsell-wrap) .woocommerce-product-gallery__image > a,
  :is(.fc-funnel-product-wrap, .fc-funnel-upsell-wrap) .woocommerce-product-gallery__trigger {
    pointer-events: none !important;
    cursor: default !important;
  }
  body.single-product.postid-136 .woocommerce-product-gallery .flex-direction-nav,
  body.single-product.postid-136 .woocommerce-product-gallery .flex-direction-nav a,
  :is(.fc-funnel-product-wrap, .fc-funnel-upsell-wrap) .woocommerce-product-gallery .flex-direction-nav,
  :is(.fc-funnel-product-wrap, .fc-funnel-upsell-wrap) .woocommerce-product-gallery .flex-direction-nav a {
    pointer-events: auto !important;
  }
}
/* Thumbnails row: when ≤5 thumbs use the grid layout. With >5 thumbs the JS
   below adds a `has-overflow` class to switch to a single horizontally-
   scrollable row with prev/next arrows so it never wraps to a 2nd row. */
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(5, 126px) !important;
  justify-content: space-between !important;
  gap: 22px 0 !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-control-thumbs.has-overflow {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  gap: 22px !important;
  justify-content: flex-start !important;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-control-thumbs.has-overflow::-webkit-scrollbar {
  display: none !important;
}

/* Wrapper that hosts the prev/next arrows AROUND the thumbs row */
.fc-thumbs-scroller {
  position: relative;
}
/* Mini arrows for thumbnail scrolling — same style as the main image arrows
   but scaled to ~28×28 for the thumb row */
.fc-thumbs-arrow {
  position: absolute;
  top: calc(50% + 11px); /* +11px to offset the 22px margin-top on thumbs */
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  text-indent: -9999px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(18, 18, 18, 0.10);
  transition: background 0.2s ease, border-color 0.2s ease;
  padding: 0;
}
.fc-thumbs-arrow:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(18, 18, 18, 0.18) !important;
}
.fc-thumbs-arrow:focus,
.fc-thumbs-arrow:focus-visible,
.fc-thumbs-arrow:active,
.fc-thumbs-arrow:focus:hover,
.fc-thumbs-arrow:active:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(18, 18, 18, 0.18) !important;
  color: transparent !important;
  outline: none !important;
  box-shadow: 0 1px 4px rgba(18, 18, 18, 0.10) !important;
}
/* Lock chevron color in all states so Astra's `currentColor` link colour
   doesn't bleed into the pseudo-element borders. */
.fc-thumbs-arrow:hover::before,
.fc-thumbs-arrow:focus::before,
.fc-thumbs-arrow:active::before {
  border-top-color: #333333 !important;
  border-right-color: #333333 !important;
}
.fc-thumbs-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #333333;
  border-right: 1.5px solid #333333;
  text-indent: 0;
}
.fc-thumbs-arrow--prev {
  left: -10px; /* 1/4 of 28px sticks out — matches main image arrow style */
}
.fc-thumbs-arrow--next {
  right: -10px;
}
.fc-thumbs-arrow--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.fc-thumbs-arrow--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}
/* Dim (don't hide) arrows when at scroll boundaries — they stay visible so the
   user's mouse target doesn't suddenly become the last thumbnail (which would
   trigger an accidental main-image change). The clamping in `animScrollTo`
   makes a click at the boundary a no-op. */
.fc-thumbs-arrow.is-disabled {
  opacity: 0.45;
  cursor: default;
}
.fc-thumbs-arrow.is-disabled:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: transparent;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-control-thumbs li {
  width: 126px !important;
  height: 126px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 126px !important;
  height: 126px !important;
  object-fit: cover !important;
  cursor: pointer;
  border: 1px solid rgba(18, 18, 18, 0.05);
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
:is(.single-product, .fc-funnel-product-wrap) .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  border-color: rgba(18, 18, 18, 0.4);
}

/* "Related products" heading on single product page — match Shopify look */
.fc-collection-grid.single-product .related.products > h2,
.fc-collection-grid.single-product .upsells.products > h2,
.fc-collection-grid.woocommerce-cart .cross-sells > h2 {
  font-family: "New York", "Iowan Old Style", Baskerville, "Times New Roman", serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  text-align: center !important;
  margin: 60px 0 24px !important;
  letter-spacing: 0 !important;
}

/* "You may also like" carousel en PDP — full-bleed scroll-snap horizontal.
   El ul.products rompe el max-width centrado del container padre y ocupa
   100vw (viewport completo) usando margin trick. Así cuando deslizás en mobile
   los productos aparecen DESDE el borde de la pantalla, no desde el gap blanco
   del content area centrado. */
.fc-collection-grid.single-product .related.products,
.fc-collection-grid.single-product .upsells.products {
  display: block !important;
}
.fc-collection-grid.single-product .related.products ul.products,
.fc-collection-grid.single-product .upsells.products ul.products {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 8px 0 16px !important;
  /* Full-bleed: rompe el max-width del container padre, ocupa 100vw */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.fc-collection-grid.single-product .related.products ul.products::-webkit-scrollbar,
.fc-collection-grid.single-product .upsells.products ul.products::-webkit-scrollbar {
  display: none;
}
/* li.product: scroll-snap + flex-shrink siempre. Width SOLO en desktop
   (mobile tiene su propio width:220px ya seteado en @media max-width 749px).
   Sin width explícita en desktop, los items toman natural 25% del ul.products
   que es 100vw → ~400px por card en monitores grandes = enorme + no parece
   carrusel. Forzamos 280px que matchea spec Shopify (~4 cards visibles en 1280
   viewport con horizontal scroll para más). */
.fc-collection-grid.single-product .related.products ul.products li.product,
.fc-collection-grid.single-product .upsells.products ul.products li.product {
  flex-shrink: 0;
  scroll-snap-align: start;
}
@media (min-width: 750px) {
  /* `safe center` centra los items cuando entran todos en el viewport (caso 4
     productos) y cae a flex-start automáticamente cuando los items overflowean
     (caso 8 productos) para que el scroll funcione bien. Browser support
     Chrome 93+ / Firefox 63+ / Safari 16+ — fallback natural a flex-start
     en browsers viejos. */
  .fc-collection-grid.single-product .related.products ul.products,
  .fc-collection-grid.single-product .upsells.products ul.products {
    justify-content: safe center !important;
  }
  .fc-collection-grid.single-product .related.products ul.products li.product,
  .fc-collection-grid.single-product .upsells.products ul.products li.product {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    margin: 0 8px !important;
  }
}
/* "You may also like" inside the funnel: matches Shopify .hx-cust-title spec
   (34px "New York" / #121212 / margin 0 0 20px) so it pairs visually with the
   "Our Customers Reviews" title rendered below. */
.fc-funnel-related-wrap .related.products > h2 {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  text-align: center !important;
  margin: 0 0 20px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Funnel related products wrap — container only.
   The actual card styling (typography, hover, sale strike) comes from
   .fc-collection-grid rules above. We re-declare the grid layout here because
   the `.fc-collection-grid .products` rule applies but `.fc-collection-grid
   .related.products` has higher specificity in some WC contexts. */
.fc-funnel-related-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 36px;
}
/* WC + .fc-collection-grid both add display: grid to .related.products which
   then collapses its children (h2, ul.products) into auto-sized columns.
   Force block here so h2 stacks above the full-width ul.products grid. */
.fc-funnel-related-wrap .related.products {
  display: block !important;
}
.fc-funnel-related-wrap ul.products {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px;
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
@media (min-width: 750px) {
  .fc-funnel-related-wrap ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
.fc-funnel-related-wrap ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  /* min-width:0 lets the column shrink below intrinsic content width; without
     this, an oversized first-product image forces uneven 1fr columns. */
  min-width: 0 !important;
}

/* === SECTION 10: Trust icons === */
.fc-home-trust {
  max-width: var(--fc-container-width);
  margin: 0 auto;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: var(--fc-white);
}
@media (min-width: 700px) {
  .fc-home-trust { grid-template-columns: repeat(3, 1fr); }
}
.fc-home-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}
.fc-home-trust__icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.fc-home-trust__item strong {
  font-family: var(--fc-font-heading);
  font-weight: 400;
  color: var(--fc-navy);
  font-size: 18px;
  display: block;
  margin-bottom: 4px;
}
.fc-home-trust__item span {
  font-size: 13px;
  color: var(--fc-text-soft);
  line-height: 1.55;
}

/* ============================================================
   Container width override (Astra default ~1240, brand wants 1500)
   ============================================================ */
.ast-container,
.entry-content > .alignwide,
.site-content > .ast-container,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--fc-container-width);
}

/* ============================================================
   Header layout: ALWAYS show mobile-style (logo + hamburger).
   Matches Shopify reference where no horizontal nav exists on desktop.
   ============================================================ */
#ast-desktop-header {
  display: none !important;
}

/* === Header: replicar patron Shopify (menu_type_desktop:"drawer")
   El "ast-mobile-header" se muestra en TODOS los breakpoints — hamburger always visible.
   El "ast-desktop-header" se oculta completamente. */
#ast-mobile-header {
  display: block !important;
}
#ast-desktop-header {
  display: none !important;
}

.ast-mobile-header-wrap {
  width: 100%;
}

/* Hide the redundant site-title text (we use the logo image). */
.ast-site-title-wrap,
.ast-site-identity .ast-site-title-wrap,
#ast-mobile-header .ast-site-title-wrap,
#ast-desktop-header .ast-site-title-wrap {
  display: none !important;
}

/* Header bar — Shopify spec:
   - Desktop ≥750: 71px TOTAL height, padding 12px 32px
   - Mobile <750:  56px TOTAL height, padding 6px 16px  (DevTools mediciones reales) */
#ast-mobile-header .ast-primary-header-bar,
#ast-mobile-header .main-header-bar,
.main-header-bar {
  box-sizing: border-box !important;
  height: 71px !important;
  min-height: 71px !important;
  max-height: 71px !important;
  padding: 12px 32px !important;
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  box-shadow: none !important;
}
/* Grid-row interno alineado al 71px desktop */
#ast-mobile-header .ast-builder-grid-row {
  height: 47px;
  align-items: center;
}
@media (max-width: 749px) {
  /* Header bar: 56px alto, padding asimétrico — Shopify spec real:
     hamburger sale a 4px del left edge, cart deja 12px right gap. */
  #ast-mobile-header .ast-primary-header-bar,
  #ast-mobile-header .main-header-bar,
  .main-header-bar {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 6px 12px 6px 4px !important;
  }
  #ast-mobile-header .ast-builder-grid-row {
    height: 44px;
  }
}

/* Logo: Shopify spec
   - Desktop: 250 × 32px
   - Mobile:  164 × 21px (DevTools real measure) */
#ast-mobile-header .custom-logo {
  width: auto;
  max-width: 250px;
  height: 32px;
  max-height: 32px;
  object-fit: contain;
}
@media (max-width: 749px) {
  #ast-mobile-header .custom-logo {
    max-width: 164px !important;
    height: 21px !important;
    max-height: 21px !important;
  }
  /* Logo centrado al midpoint del viewport — Astra lo pone en la "left section"
     junto al hamburger. Posicionamos la IMG directamente (no el wrapper) usando
     left:50% + margin-left:-82px (mitad del width 164) sobre el header bar. */
  #ast-mobile-header .ast-primary-header-bar,
  #ast-mobile-header .main-header-bar {
    position: relative !important;
  }
  #ast-mobile-header .custom-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-left: -82px !important;  /* = width/2 = 164/2 */
    margin-top: -10.5px !important;  /* = height/2 = 21/2 */
    z-index: 5;
  }
}

/* Hamburger button: 44x44 clickable area, navy SVG. Shopify spec. */
.menu-toggle.main-header-menu-toggle,
.menu-toggle.main-header-menu-toggle .mobile-menu-toggle-icon,
.menu-toggle.main-header-menu-toggle .ahfb-svg-iconset,
.menu-toggle.main-header-menu-toggle svg {
  color: var(--fc-text) !important;
  fill: currentColor !important;
  background: transparent !important;
  border: none !important;
}

.menu-toggle.main-header-menu-toggle {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10001; /* above drawer (10000) so X is clickable */
}
.menu-toggle.main-header-menu-toggle svg {
  width: 22px !important;
  height: 22px !important;
}
@media (max-width: 749px) {
  .menu-toggle.main-header-menu-toggle svg {
    width: 20px !important;
    height: 20px !important;
  }
}

.menu-toggle.main-header-menu-toggle:hover {
  opacity: 1;
}
/* No focus outline / box on mouse click. Keep it for keyboard nav (:focus-visible). */
.menu-toggle.main-header-menu-toggle,
.menu-toggle.main-header-menu-toggle:focus,
.menu-toggle.main-header-menu-toggle:active,
.menu-toggle.main-header-menu-toggle.toggled {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}
.menu-toggle.main-header-menu-toggle:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
.menu-toggle.main-header-menu-toggle:focus-visible {
  outline: 2px solid var(--fc-navy);
  outline-offset: 2px;
}

/* Animated hamburger ↔ X (3 lines morph). Shopify Dawn / Apple-style micro-animation. */
.menu-toggle .fc-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 22px;
  position: relative;
  transition: transform 0.2s ease;
}
.menu-toggle .fc-hamburger-line {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center center;
  transition: transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1),
              opacity 0.2s ease;
  will-change: transform, opacity;
}
@media (max-width: 749px) {
  /* Shopify SVG path bounding box exact: 18.57 × 16.67px */
  .menu-toggle .fc-hamburger {
    width: 18.57px;
    height: 16.67px;
  }
  /* Líneas un poco más grises (no full black) — Shopify usa ~75% navy */
  .menu-toggle .fc-hamburger-line {
    width: 18.57px;
    background: rgba(18, 18, 18, 0.75) !important;
  }
  /* Re-calibrate X open-state translate distance for new 16.67px height
     (half of 16.67 = ~8.3, minus 1px for line thickness = 7.3) */
  .menu-toggle[aria-expanded="true"] .fc-hamburger-line:nth-child(1) {
    transform: translateY(7.3px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .fc-hamburger-line:nth-child(3) {
    transform: translateY(-7.3px) rotate(-45deg);
  }
}
/* Open state: line 1 ↓+rotate 45°, line 2 fades, line 3 ↑+rotate -45° → X */
.menu-toggle[aria-expanded="true"] .fc-hamburger-line:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .fc-hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-toggle[aria-expanded="true"] .fc-hamburger-line:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}
/* Hover zoom — mini scale on the icon inside the button */
.menu-toggle:hover .fc-hamburger {
  transform: scale(1.12);
}
/* Hide Astra's original SVG (we replace its innerHTML so this is a safety net) */
.menu-toggle .ahfb-svg-iconset:not(:has(.fc-hamburger)),
.menu-toggle .mobile-menu-toggle-icon:not(:has(.fc-hamburger)) {
  display: none;
}

/* Body lock when drawer is open — prevents background scroll */
body.fc-menu-open {
  overflow: hidden;
}

/* Hide Astra's default footer completely (we render fc-footer via wp_footer) */
footer.site-footer,
.site-footer,
#colophon,
.ast-small-footer,
.footer-sml-section-1,
.footer-sml-section-2,
.ast-builder-footer-grid-row {
  display: none !important;
}

/* Hide Astra's "scroll to top" floating arrow (bottom-right). */
#ast-scroll-top {
  display: none !important;
}

/* ============================================================
   Brand footer — fc-footer
   Matches Shopify Dawn scheme-5: navy bg + white text/buttons.
   ============================================================ */
.fc-footer {
  background: var(--fc-navy);
  color: var(--fc-white);
  padding: 0;
  margin-top: 0;
  font-family: var(--fc-font-body);
  font-size: 15px;
  line-height: 1.6;
}

.fc-footer a {
  color: var(--fc-white);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.fc-footer a:hover {
  opacity: 0.7;
  color: var(--fc-white);
}

.fc-footer__inner {
  max-width: var(--fc-container-width);
  margin: 0 auto;
  padding: 52px 24px 44px;
}

/* Top: 2-column layout (disclaimer left, newsletter right) on desktop;
   stacks vertically on mobile. Matches Shopify footer.liquid layout. */
.fc-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 36px;
}

@media (min-width: 769px) {
  .fc-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 64px;
    align-items: start;
  }
}

/* Disclaimer column (left on desktop) */
.fc-footer__disclaimer {
  padding: 0;
  border: 0;
  margin: 0;
}

.fc-footer__disclaimer-title {
  font-family: var(--fc-font-body);
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 8px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fc-white);
}

.fc-footer__disclaimer-body {
  font-size: 12px;
  opacity: 0.65;
  line-height: 1.65;
  margin: 0;
  font-family: var(--fc-font-body);
  max-width: 720px;
}

/* Newsletter column (right on desktop) */
.fc-footer__newsletter {
  text-align: left;
  margin: 0;
}

.fc-footer__newsletter-heading {
  font-family: var(--fc-font-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--fc-white);
  margin: 0 0 16px;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.fc-footer__newsletter-form {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 360px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--fc-input-radius);
  overflow: hidden;
  background: transparent;
}

.fc-footer__newsletter-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--fc-white);
  padding: 12px 16px;
  font-family: var(--fc-font-body);
  font-size: 15px;
  outline: none;
}

.fc-footer__newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.fc-footer__newsletter-form input[type="email"]:focus {
  border: none;
}

.fc-footer__newsletter-form button {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--fc-white);
  padding: 0 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  font-family: var(--fc-font-ui);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.fc-footer__newsletter-form button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fc-white);
  opacity: 1;
}

/* Bottom: payments centered above, legal line (copyright + bullet-separated
   policy links) centered below — matches Shopify footer layout. */
.fc-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.fc-footer__payments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fc-payment-icon {
  display: block;
  width: 38px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Mobile: 8 íconos × 38px + gaps = ~374px, no entra en una sola fila en
   viewports 320-390. Reducir tamaño + gap para forzar single row. */
@media (max-width: 749px) {
  .fc-footer__payments {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .fc-payment-icon {
    width: 30px;
    height: 19px;
    flex-shrink: 0;
  }
}

.fc-footer__legal {
  font-size: 13px;
  opacity: 0.85;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  font-family: var(--fc-font-body);
}

.fc-footer__legal a {
  color: var(--fc-white);
  text-decoration: none;
}

.fc-footer__legal a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.fc-footer__legal-sep {
  opacity: 0.55;
}

/* Off-canvas drawer: brand styling */
.ast-mobile-header-content {
  background: var(--fc-white);
}

.ast-mobile-header-content .menu-link {
  font-family: var(--fc-font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--fc-navy);
}

.ast-mobile-header-content .menu-item {
  border-bottom: 1px solid var(--fc-border-soft);
}

/* ============================================================
   Cart icon in header (injected via child theme)
   ============================================================ */
/* Cart icon area — Shopify spec: 44x44 clickable */
.fc-header-cart {
  display: inline-flex;
  align-items: center;
}

.fc-cart-link {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fc-text);
  text-decoration: none;
  position: relative;
  padding: 0;
}

.fc-cart-link:hover {
  color: var(--fc-text);
}

.fc-cart-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  transition: transform 0.2s ease;
}
/* Hover zoom — mini scale on cart icon (mirror hamburger) */
.fc-cart-link:hover .fc-cart-icon {
  transform: scale(1.12);
}

.fc-cart-count {
  font-family: var(--fc-font-body);
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  text-align: center;
  background: var(--fc-navy);
  color: var(--fc-white);
  border-radius: 999px;
  padding: 0 4px;
  line-height: 16px;
  position: absolute;
  /* Overlap the bag icon (lower-right) like Shopify: badge sits ON the bag,
     not floating outside it. SVG is 22×22 centered in a 44×44 link, so its
     bottom-right corner is at ~(33,33) → badge bottom-right at (~42,~42). */
  bottom: 4px;
  right: 4px;
  transform: none;
  display: none;
  box-shadow: 0 0 0 1.5px #ffffff;
}
.fc-cart-count--has-items {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Right section of mobile header: align items */
#ast-mobile-header .site-header-primary-section-right {
  display: flex !important;
  align-items: center;
  gap: 4px;
}

/* Left section: hamburger now lives here (moved via JS), then logo */
#ast-mobile-header .site-header-primary-section-left {
  display: flex !important;
  align-items: center;
  gap: 16px;
}
/* Hamburger sits to the left of the logo */
#ast-mobile-header .site-header-primary-section-left [data-section="section-header-mobile-trigger"] {
  order: -1;
  margin-right: 4px;
}

/* ============================================================
   Gold accent — decorative only (no CTAs)
   ============================================================ */
.fc-divider-gold {
  height: 1px;
  background: var(--fc-gold);
  border: none;
  margin: 24px auto;
  max-width: 80px;
}

.fc-star-accent::before {
  content: "✦";
  color: var(--fc-gold);
  margin: 0 8px;
}

/* ============================================================
   TANDA 1 — Shopify home page parity (pixel-perfect)
   Source: templates/index.json + custom_liquid blocks
   ============================================================ */

/* === Hero checklist — replaces .fc-home-bullets (Inter 13/15, navy circle ✓) === */
.fc-home-checklist {
  margin: 0;
  padding: 0;
}
/* Shopify mobile spec (DevTools 390 viewport, div.image-with-text__text):
   342.41 × 78 / Besley 15px / color #121212BF (75% alpha) / margin-top 20px */
@media (max-width: 749px) {
  .fc-home-checklist {
    max-width: 342px !important;
    font-family: "Besley", Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    color: rgba(18, 18, 18, 0.75) !important;
    margin: 20px 0 0 !important;
  }
}
.fc-home-checklist .fc-checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
/* Mobile: gap reducido para que span llegue a 320.41 (Shopify spec) +
   margin-bottom entre rows para que container total = 78 (Shopify spec). */
@media (max-width: 749px) {
  .fc-home-checklist .fc-checklist-row {
    gap: 6px;
    margin-bottom: 14px;
  }
  .fc-home-checklist .fc-checklist-row:last-child {
    margin-bottom: 0;
  }
}
.fc-home-checklist .fc-checklist-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: block;
}
@media (max-width: 749px) {
  .fc-home-checklist .fc-checklist-icon {
    width: 16px;
    height: 16px;
  }
}
.fc-home-checklist .fc-checklist-item {
  font-size: 13px;
  color: #4D4D4D;
  font-family: "Inter", sans-serif;
  line-height: 1.3;
  flex: 1;  /* span fills remaining row width — Shopify spec 320.41px en 342px container */
}
@media (min-width: 750px) {
  .fc-home-checklist .fc-checklist-item {
    font-size: 15px;
  }
}

/* Hero mobile-only image (appears below hero text on <750px) */
.fc-home-hero__mobile-img {
  display: none;
  margin: 24px -24px 0;
}
.fc-home-hero__mobile-img img {
  width: 100%;
  display: block;
}
@media (max-width: 749px) {
  .fc-home-hero__mobile-img {
    display: block;
  }
}

/* Hero heading — match Shopify EXACT computed values medidos en live:
   38px desktop / weight 400 (Shopify renderiza <strong> con weight 400 vía CSS reset). */
.fc-home-hero .fc-home-h1 {
  font-size: 38px; /* mobile: match Shopify h2.image-with-text__heading exact (DevTools 38px) */
  font-weight: 700; /* bold — Shopify usa <strong> wrap (weight 700). Aplicamos directo en h1. */
  line-height: 1.3; /* mobile: match Shopify box 374×148.17 = 3 lines × 49.4px ÷ 38px = 1.3 */
  margin: 0 0 12px;
}
.fc-home-hero .fc-home-h1 strong,
.fc-home-hero .fc-home-h1 b {
  font-weight: 700 !important;
}
@media (min-width: 750px) {
  .fc-home-hero .fc-home-h1 {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }
  .fc-home-hero__sub {
    font-size: 20px !important;
  }
}

/* === fc_mobile_ring_promo (visible <750px) === */
@media (min-width: 750px) {
  #fc-mobile-ring-promo { display: none !important; }
}
#fc-mobile-ring-promo {
  text-align: center;
  padding: 32px 20px 0;
  background: #ffffff;
}
#fc-mobile-ring-promo h2 {
  /* Spec: 'New York' serif #242424 bold (mobile keeps 30px for screen size) */
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  font-size: 30px;
  font-weight: 700;
  color: #242424;
  margin: 0 0 16px;
  line-height: 1.3;
}
#fc-mobile-ring-promo img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
  border: none;
  box-shadow: none;
}
#fc-mobile-ring-promo p {
  /* Spec: 16px Montserrat #424242 */
  font-family: "Montserrat", "Harmonia Sans", sans-serif;
  font-size: 16px;
  color: #424242;
  font-style: normal;
  line-height: 1.7;
  margin: 0 0 20px;
  padding: 0;
}
#fc-mobile-ring-promo .fc-promo-btn,
#fc-mobile-ring-promo .fc-promo-btn:hover,
#fc-mobile-ring-promo .fc-promo-btn:focus,
#fc-mobile-ring-promo .fc-promo-btn:active,
#fc-mobile-ring-promo .fc-promo-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-navy);
  color: #fff !important;
  font-family: var(--fc-font-body);
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 10px; /* rounded corners (kept) */
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
#fc-mobile-ring-promo .fc-promo-btn:hover {
  opacity: 0.85;
}
#fc-promo-features,
#fc-promo-features-2 {
  margin-top: 40px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
#fc-mobile-ring-promo .fc-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
#fc-mobile-ring-promo .fc-feat-icon {
  flex-shrink: 0;
  font-size: 32px;
  color: var(--fc-navy);
  width: 36px;
  text-align: center;
  line-height: 1;
}
#fc-mobile-ring-promo .fc-feat-icon svg {
  display: block;
  margin: 0 auto;
}
#fc-mobile-ring-promo .fc-feat-text h3 {
  font-family: var(--fc-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #121212;
  margin: 0 0 4px;
  line-height: 1.3;
}
#fc-mobile-ring-promo .fc-feat-text p {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #4D4D4D;
  margin: 0;
  line-height: 1.5;
  font-style: normal;
  padding: 0;
}

/* === Rich text headings (rich_text_jayJid / VnCJMn / VGEFCy) ===
   - full_width:true → wrapper full viewport
   - desktop_content_position:center + content_alignment:center
   - max-width inner: 50rem (≤989px) / 78rem (≥990px) — Shopify section-rich-text.css
   - padding 30px mobile / 40px desktop (×0.75 factor en mobile) */
.fc-home-rich-text {
  text-align: center;
  padding: 30px 24px;
  background: #ffffff;
}
@media (min-width: 750px) {
  .fc-home-rich-text {
    padding: 40px 24px;
  }
}
/* rich_text_jayJid usa scheme cream (#f6f6f6) — los otros 2 quedan blancos */
.fc-home-rich-text--arms {
  background: #f6f6f6;
}
.fc-home-rich-text > * {
  /* Shopify section-rich-text.css: 50rem (500px Dawn) / 78rem (780px desktop). Como home no usa 62.5% scope, traducimos a px absolutos. */
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 990px) {
  .fc-home-rich-text > * {
    max-width: 780px;
  }
}
/* Rich-text heading match Shopify EXACT: 40px desktop / weight 400 (no bold de <strong>) */
.fc-home-rich-text .fc-rich-heading {
  font-family: var(--fc-font-heading);
  font-size: 30px;
  font-weight: 400;
  color: var(--fc-text);
  margin: 0 auto 12px;
  line-height: 1.25;
  letter-spacing: 0.06rem;
}
.fc-home-rich-text .fc-rich-heading strong,
.fc-home-rich-text .fc-rich-heading b {
  font-weight: 700 !important;
}
.fc-home-rich-text .fc-rich-sub {
  /* Spec Shopify: 16px Inter sans-serif, #121212 */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #121212;
  font-weight: 400;
  margin: 0 auto;
  line-height: 1.6;
}
@media (min-width: 750px) {
  .fc-home-rich-text .fc-rich-heading {
    font-size: 40px;
  }
}
/* "What Arrives with Your Order" is mobile-only — hidden on desktop */
@media (min-width: 750px) {
  .fc-home-rich-text--arrives { display: none !important; }
}

/* "Trusted By More Than 8,200 Customers Globally" rich-text — Shopify Dawn exact:
   - Heading <strong>: 40px "New York" system serif / #121212 / weight 700 (bold)
   - Sub <h4>: 16px Inter sans / #4D4D4D */
.fc-home-rich-text--trusted .fc-rich-heading,
.fc-home-rich-text--trusted .fc-rich-heading strong,
.fc-home-rich-text--trusted .fc-rich-heading b {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  color: #121212 !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
}
.fc-home-rich-text--trusted .fc-rich-sub {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #4D4D4D !important;
  line-height: 1.6 !important;
}

/* === multirow_EdVBen — 3 alternating image/text rows ===
   - section_color_scheme: cream #f6f6f6
   - row_color_scheme: white #fff (per-row content bg, no aplicamos visualmente)
   - image_layout: "alternate-left" → row 1 normal, row 2 reverse, row 3 normal
   - desktop_image_width: "medium" → grid 2-col-tablet (50/50)
   - column_alignment: center mobile + center desktop
   - padding 36px desktop / 27px mobile (×0.75 factor) */
.fc-home-multirow {
  background: #f6f6f6;
  padding: 27px 24px;
}
/* Only the text quadrants get white bg (image quadrants stay with the section's gray).
   Stretch vertically so the white edges flush with the image edges (no gray strip showing). */
.fc-multirow-text {
  background: #ffffff;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fc-multirow-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 27px;
}
.fc-multirow-row:last-child {
  margin-bottom: 0;
}
.fc-multirow-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0; /* straight corners — matches Shopify spec */
}
.fc-multirow-text {
  text-align: center;
}
.fc-multirow-text h2 {
  /* Spec: 44px New York serif, #121212, weight 400 */
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  font-size: 26px;
  font-weight: 400;
  color: #121212;
  margin: 0 0 16px;
  line-height: 1.15;
  letter-spacing: 0;
  max-width: 560px;
}
.fc-multirow-text p {
  /* Spec: 16px Inter sans-serif, #121212BF (75% alpha) */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: rgba(18, 18, 18, 0.75);
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0;
  max-width: 560px;
}
.fc-multirow-image img {
  /* Shopify multirow image: 588x393 desktop */
  width: 100%;
  max-width: 588px;
  height: auto;
  object-fit: cover;
}
@media (min-width: 750px) {
  .fc-home-multirow {
    /* Shopify multirow: 36px padding, full width, bg #f6f6f6 */
    padding: 36px 0;
  }
  .fc-multirow-row {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
    /* Shopify spec: 698 × 466.66 per cell → 1396 total row */
    min-height: 466.66px;
    max-width: 1396px;
    margin-left: auto;
    margin-right: auto;
  }
  .fc-multirow-row--reverse .fc-multirow-image {
    order: 2;
  }
  .fc-multirow-row--reverse .fc-multirow-text {
    order: 1;
  }
  /* Shopify: heading 44px regular weight, max 450px width */
  .fc-multirow-text h2 {
    font-size: 44px !important;
    line-height: 1.15;
  }
  .fc-multirow-text {
    padding: 60px 70px;
  }
  .fc-multirow-image {
    align-self: stretch;
  }
  .fc-multirow-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
}

/* === fc-desktop-ring-promo (desktop only >=750px) === */
@media (max-width: 749px) {
  #fc-desktop-ring-promo { display: none !important; }
}
#fc-desktop-ring-promo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 50px;
  background: #ffffff;
}
.fc-dk-header {
  text-align: center;
  margin-bottom: 48px;
}
.fc-dk-header h2 {
  /* Spec: 38px 'New York' serif #242424 bold */
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  font-size: 38px;
  font-weight: 700;
  color: #242424;
  margin: 0 0 16px;
  line-height: 1.25;
}
.fc-dk-header p {
  font-family: "Montserrat", "Harmonia Sans", sans-serif;
  font-size: 16px;
  color: #424242;
  line-height: 1.7;
  margin: 0 auto 24px;
  max-width: 650px;
}
.fc-dk-header .fc-promo-btn,
.fc-dk-header .fc-promo-btn:hover,
.fc-dk-header .fc-promo-btn:focus,
.fc-dk-header .fc-promo-btn:active,
.fc-dk-header .fc-promo-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-navy);
  color: #fff !important;
  font-family: var(--fc-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 12px 28px;
  border-radius: 10px; /* rounded corners (kept) */
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.fc-dk-header .fc-promo-btn:hover {
  opacity: 0.85;
}
#fc-dk-bottom-grid,
#fc-dk-bottom-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  /* Spec Shopify: container 1100 × 530 centered */
  max-width: 1100px;
  margin: 0 auto;
}
#fc-dk-bottom-grid .fc-dk-right img,
#fc-dk-bottom-grid-2 .fc-dk-left-img img {
  /* Spec Shopify: 530 × 530 square */
  width: 100%;
  max-width: 530px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  height: auto;
  display: block;
  margin: 0 auto;
}
.fc-dk-features {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.fc-dk-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.fc-dk-feat-icon {
  flex-shrink: 0;
  font-size: 32px;
  color: var(--fc-navy);
  width: 36px;
  text-align: center;
  line-height: 1;
}
.fc-dk-feat-icon svg {
  display: block;
  margin: 0 auto;
}
.fc-dk-feat-text h3 {
  font-family: "Cardo", var(--fc-font-heading), serif;
  font-size: 21px;
  font-weight: 700;
  color: #242424;
  margin: 0 0 4px;
  line-height: 1.3;
}
.fc-dk-feat-text p {
  font-family: "Montserrat", "Harmonia Sans", sans-serif;
  font-size: 16px;
  color: #424242;
  margin: 0;
  line-height: 1.6;
}
.fc-dk-gallery {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 60px;
}
.fc-dk-gallery img {
  width: 390px;
  height: 390px;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

/* === multicolumn_wkNfCD — 3-step tutorial (mobile only) === */
@media (min-width: 750px) {
  .fc-home-tutorial { display: none !important; }
}
.fc-home-tutorial {
  background: #ffffff;
  padding: 36px 24px;
}
.fc-tutorial-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.fc-tutorial-col {
  text-align: center;
}
.fc-tutorial-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fc-navy);
  color: #fff;
  font-family: var(--fc-font-heading);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}
.fc-tutorial-col h3 {
  font-family: var(--fc-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--fc-text);
  margin: 0 0 10px;
  line-height: 1.3;
}
.fc-tutorial-col p {
  font-family: var(--fc-font-body);
  font-size: 14px;
  color: #4D4D4D;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 400px;
}

/* === Featured product review badge "1,247+ 5-star reviews" === */
.fc-home-featured__reviews {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 12px;
}
.fc-home-featured__stars {
  color: var(--fc-gold);
  font-size: 1.8rem;
  letter-spacing: 2px;
  line-height: 1;
}
.fc-home-featured__reviews-count {
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: underline;
  color: #333;
  font-family: var(--fc-font-body);
}

/* === fc-trust-badges-desktop (desktop only >=750px) === */
@media (max-width: 749px) {
  #fc-trust-badges-desktop { display: none !important; }
}
#fc-trust-badges-desktop {
  /* Section keeps full-width white bg (entry-content breakout); inner grid constrained narrower */
  padding: 60px 50px;
  background: #ffffff;
}
.fc-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  text-align: center;
  /* Narrow centered column matching Shopify Dawn reference (was full 1200px) */
  max-width: 960px;
  margin: 0 auto;
}
.fc-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fc-trust-icon {
  /* Shopify Dawn / PageFly: FA6 navy icons rendered from FA6 font (loaded via CDN in functions.php) */
  margin-bottom: 16px;
  line-height: 1;
  color: #112B3D;
  font-size: 48px;
}
.fc-trust-icon i.fa-solid,
.fc-trust-icon i.fa {
  display: block;
  line-height: 1;
}
.fc-trust-icon svg {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
  fill: currentColor;
}
.fc-trust-title {
  /* Shopify Dawn exact: 28px / New York system serif / #242424 / margin-bottom 12px */
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: #242424 !important;
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}
.fc-trust-desc {
  /* Shopify Dawn exact: 16px Montserrat / #424242 */
  font-family: "Montserrat", "Harmonia Sans", sans-serif !important;
  font-size: 16px !important;
  color: #424242 !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 320px;
}

/* ============================================================
   TANDA 4 — testimonial-section-apolo (reviews_full.liquid replica)
   Source: sections/reviews_full.liquid del theme export Shopify.
   Single card visible at a time, prev/next + dots + autoplay 5s + swipe.
   ============================================================ */
.testimonial-section-apolo * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.testimonial-section-apolo {
  /* Shopify exact: section is ~333px total. Compact padding. */
  padding: 20px 10px;
}
.testimonial-section-apolo .container {
  max-width: 1200px;
  margin: 0 auto;
}
.testimonial-section-apolo .testimonial-container {
  position: relative;
  padding: 0 1rem;
}
.testimonial-section-apolo .carousel {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.testimonial-section-apolo .carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.testimonial-section-apolo .testimonial-card {
  width: 100%;
  flex-shrink: 0;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.testimonial-section-apolo .card-content {
  padding: 1.25rem;
}
@media (min-width: 768px) {
  .testimonial-section-apolo .card-content { padding: 1.25rem 1.75rem; }
}
.testimonial-section-apolo .testimonial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .testimonial-section-apolo .testimonial-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
}
.testimonial-section-apolo .avatar-container { flex-shrink: 0; }
.testimonial-section-apolo .avatar,
.testimonial-section-apolo .placeholder-avatar {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}
.testimonial-section-apolo .placeholder-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  color: white;
}
.testimonial-section-apolo .testimonial-body {
  flex: 1;
  text-align: center;
}
@media (min-width: 768px) {
  .testimonial-section-apolo .testimonial-body { text-align: left; }
}
.testimonial-section-apolo .rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
  .testimonial-section-apolo .rating { justify-content: flex-start; }
}
/* Stars rating — Shopify exact: 17px Times serif, #121212BF (75% alpha navy) */
.testimonial-section-apolo .rating,
.testimonial-section-apolo .rv-stars,
.testimonial-section-apolo .stars {
  font-size: 17px !important;
  font-family: Times, "Times New Roman", serif !important;
  color: rgba(18, 18, 18, 0.75) !important;
  line-height: 1 !important;
}
/* Quote — Shopify exact: 12.5px Besley serif italic, #334155, margin-bottom 15px */
.testimonial-section-apolo .quote,
.testimonial-section-apolo blockquote.quote {
  font-style: italic !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 12.5px !important;
  color: #334155 !important;
  margin: 0 0 15px !important;
  line-height: 1.7 !important;
}
/* Author name h4 — Shopify exact: 11.25px New York, #1E293B, margin-bottom 2.5px */
.testimonial-section-apolo .author-name,
.testimonial-section-apolo h4.author-name {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 11.25px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  margin: 0 0 2.5px !important;
}
/* Location p.author-info — Shopify exact: 16px Besley serif, #64748B */
.testimonial-section-apolo .author-location,
.testimonial-section-apolo .author-info,
.testimonial-section-apolo p.author-info {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  color: #64748B !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}
.testimonial-section-apolo .carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}
/* Hide dots pagination on desktop — Shopify only shows prev/next arrows */
@media (min-width: 750px) {
  .testimonial-section-apolo .carousel-dots { display: none !important; }
}
.testimonial-section-apolo .carousel-button {
  /* Shopify exact: 25×25 round buttons, #FFF bg, #000 icon, 13.33px Arial */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px !important;
  height: 25px !important;
  padding: 0 !important;
  border-radius: 50%;
  background-color: #FFFFFF !important;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s;
  color: #000000 !important;
  font-family: Arial, sans-serif;
  font-size: 13.3333px;
  line-height: 1;
}
.testimonial-section-apolo .carousel-button svg {
  width: 14px;
  height: 14px;
}
.testimonial-section-apolo .carousel-button:hover { background-color: #f8fafc !important; }
.testimonial-section-apolo .carousel-button:focus,
.testimonial-section-apolo .carousel-button:focus-visible,
.testimonial-section-apolo .carousel-button:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: #FFFFFF !important;
}
.testimonial-section-apolo .carousel-dots {
  display: flex;
  gap: 0.5rem;
  margin: 0 1rem;
}
.testimonial-section-apolo .dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: #cbd5e1;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* === featured-collection wrapper (Our Collection) ===
   Source: sections/featured-collection.liquid + template-collection.css
   padding 52px desktop / 39px mobile (×0.75 factor)
   grid 4-col-desktop / 1-col-tablet-down — sin slider */
.fc-home-collection {
  padding: 39px 24px;
  background: #ffffff;
}
@media (min-width: 750px) {
  .fc-home-collection {
    padding: 52px 50px;
  }
}
.fc-home-collection__heading {
  /* Shopify Dawn exact: 40px New York system serif / #121212 / mb 10px */
  text-align: center;
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  margin: 0 0 10px !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
}
.fc-home-collection__sub {
  /* Shopify Dawn exact: 16px Besley serif / #121212BF (75% alpha navy) */
  text-align: center;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(18, 18, 18, 0.75) !important;
  margin: 0 0 12px !important;
  line-height: 1.8 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* WC [products] shortcode grid — Shopify Dawn: uniform gap ambos ejes (~10px) */
.fc-collection-grid .products,
.fc-collection-grid .products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1440px;
}
@media (min-width: 750px) {
  .fc-collection-grid .products,
  .fc-collection-grid .products {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}
/* Collection section padding match Shopify — tight side padding + small bottom to bring grid closer */
@media (min-width: 750px) {
  .fc-home-collection {
    padding: 52px 10px 8px;
  }
}
.fc-collection-grid .products .product,
.fc-collection-grid .products .product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* === WC Collection archive (Shopify main-collection-banner + main-collection-product-grid) ===
   Banner: navy bg + white text (scheme-5)
   Grid: 4-col desktop / 2-col mobile, padding 36px */
.woocommerce-archive .woocommerce-products-header,
body.archive.woocommerce .woocommerce-products-header {
  background: var(--fc-navy);
  color: #ffffff;
  padding: 60px 24px;
  text-align: center;
  margin-bottom: 36px;
}
.woocommerce-archive .woocommerce-products-header__title,
body.archive.woocommerce .woocommerce-products-header__title,
body.archive.woocommerce .page-title {
  color: #ffffff !important;
  font-family: var(--fc-font-heading);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.06rem;
  margin: 0 0 12px;
}
@media (min-width: 750px) {
  .woocommerce-archive .woocommerce-products-header__title,
  body.archive.woocommerce .woocommerce-products-header__title,
  body.archive.woocommerce .page-title {
    font-size: 52px;
  }
}
.woocommerce-archive .term-description,
body.archive.woocommerce .term-description {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--fc-font-body);
  font-size: 16px;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}
.woocommerce-archive .term-description p,
body.archive.woocommerce .term-description p {
  margin: 0;
}

/* Collection product grid: 4-col desktop / 2-col mobile (Shopify default) */
body.archive.woocommerce .site-content .products,
body.archive.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1500px;
  margin: 0 auto 36px;
  padding: 0 24px;
  list-style: none;
}
@media (min-width: 750px) {
  body.archive.woocommerce .site-content .products,
  body.archive.woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 0 50px;
  }
}
body.archive.woocommerce .products .product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* Sort dropdown styling (WC default form.woocommerce-ordering) */
body.archive.woocommerce .woocommerce-ordering {
  max-width: 1500px;
  margin: 0 auto 16px;
  padding: 0 24px;
}
@media (min-width: 750px) {
  body.archive.woocommerce .woocommerce-ordering {
    padding: 0 50px;
  }
}
body.archive.woocommerce .woocommerce-ordering select {
  font-family: var(--fc-font-body);
  font-size: 14px;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 4px;
  background-color: #fff;
}

/* Product card title in grid */
body.archive.woocommerce .products .woocommerce-loop-product__title {
  font-family: var(--fc-font-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--fc-text);
  padding: 12px 0 4px;
  margin: 0;
}
body.archive.woocommerce .products .price {
  font-family: var(--fc-font-body);
  font-size: 14px;
  color: var(--fc-text);
}
body.archive.woocommerce .products .price del {
  color: #bd1700;
  opacity: 1;
  margin-right: 6px;
}
body.archive.woocommerce .products .price ins {
  text-decoration: none;
  font-weight: 600;
}

/* === Generic pages (main-page) — Shopify custom_css:
   h1 {font-size: 40px; color: black;}
   p, li {font-size: 14px; font-family: "Inter", sans-serif;}
   padding 100px top/bottom === */
body.page:not(.home):not(.page-template-page-heritage-funnel) .entry-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}
/* Astra adds margin-top:60 on #primary for static pages — collapse it so the
   title sits closer to the header (Shopify Dawn pattern). */
body.page:not(.home):not(.page-template-page-heritage-funnel) #primary {
  margin-top: 0 !important;
}
/* Static info pages (contact, privacy, terms, shipping, refund, data-sharing, blog post)
   — Shopify Dawn verbatim typography. Title is LEFT aligned (not centered),
   body uses Besley 16px / lh 1.8 / rgba(18,18,18,0.75), headings are 18px New York. */
body.page:not(.home):not(.page-template-page-heritage-funnel) .entry-title {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  font-size: 40px;
  font-weight: 400;
  color: #000000;
  text-align: left;
  /* Constrain title to same max-width as .entry-content so it aligns visually with the body. */
  max-width: 800px;
  margin: 0 auto 40px;
  padding: 0 24px;
  line-height: 1.3;
  letter-spacing: 0;
}
body.page:not(.home):not(.page-template-page-heritage-funnel) .entry-content p,
body.page:not(.home):not(.page-template-page-heritage-funnel) .entry-content li {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(18, 18, 18, 0.75);
  letter-spacing: 0;
}
/* Inner h1 inside content (policy pages: Refund/Return, Terms, Privacy, Disclaimer
   each ship with their own H1 + custom wrapper). 40px New York to match Shopify. */
body.page:not(.home):not(.page-template-page-heritage-funnel) .entry-content h1 {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  font-size: 40px;
  font-weight: 400;
  color: #121212;
  line-height: 1.3;
  margin: 0 0 27px;
  text-align: left;
  letter-spacing: 0;
}
/* Hide the WC-auto-generated .entry-title + entry-header wrapper when the content
   has its own H1 (avoids duplicate "Refund policy" + "Refund & Return Policy"
   stack and the empty header padding gap above it). */
body.page:not(.home):not(.page-template-page-heritage-funnel):has(.entry-content h1) .entry-header,
body.page:not(.home):not(.page-template-page-heritage-funnel):has(.entry-content h1) .entry-title {
  display: none !important;
}
/* H2 = section headings: 24px New York (Shopify spec) */
body.page:not(.home):not(.page-template-page-heritage-funnel) .entry-content h2 {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  font-size: 24px;
  font-weight: 400;
  color: #121212;
  line-height: 1.3;
  margin: 20px 0;
  letter-spacing: 0;
}
/* H3 = numbered sub-headings: 18px New York */
body.page:not(.home):not(.page-template-page-heritage-funnel) .entry-content h3 {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  font-size: 18px;
  font-weight: 400;
  color: #121212;
  line-height: 1.3;
  margin: 18px 0;
  letter-spacing: 0;
}

/* === Cart page (WC) — match Shopify cart layout ===
   Shopify uses scheme-52754825 (white bg, navy buttons). */
body.woocommerce-cart .woocommerce {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 24px;
}
body.woocommerce-cart .entry-title,
body.woocommerce-cart .page-title {
  font-family: var(--fc-font-heading);
  font-size: 40px;
  font-weight: 400;
  color: var(--fc-text);
  margin-bottom: 32px;
  letter-spacing: 0.06rem;
  text-align: center;
}
@media (min-width: 750px) {
  body.woocommerce-cart .entry-title,
  body.woocommerce-cart .page-title {
    font-size: 52px;
  }
}
body.woocommerce-cart table.shop_table {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  border-collapse: collapse;
  font-family: var(--fc-font-body);
}
body.woocommerce-cart table.shop_table th {
  background: #f6f6f6;
  padding: 16px;
  font-family: var(--fc-font-heading);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fc-text);
}
body.woocommerce-cart table.shop_table td {
  padding: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: middle;
}
body.woocommerce-cart .cart_item .product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}
body.woocommerce-cart .cart_item .product-name a {
  color: var(--fc-text);
  font-family: var(--fc-font-heading);
  font-weight: 400;
  font-size: 16px;
  text-decoration: none;
}
body.woocommerce-cart .cart_totals h2 {
  font-family: var(--fc-font-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--fc-text);
  margin: 0 0 16px;
}
/* Hide Astra's broken mobile menu container — we use our own .fc-menu-drawer instead */
.main-header-bar-navigation { display: none !important; }

/* Heritage funnel pages: hide Astra's auto-generated Sale! badge from embedded product_page shortcode
   (the badge bleeds to top-left of viewport because product article is the funnel's first child) */
.page-template-page-heritage-funnel .ast-on-card-button.ast-onsale-card,
.page-template-page-heritage-funnel .ast-onsale-card,
.page-template-page-heritage-funnel .onsale {
  display: none !important;
}

/* === Custom mobile menu drawer (Shopify Dawn pattern) === */
.fc-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.3s;
}
.fc-menu-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.fc-menu-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fc-menu-drawer.is-open .fc-menu-drawer__backdrop { opacity: 1; }
.fc-menu-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px; /* same width as cart drawer */
  background: var(--fc-navy, #112B3D);
  color: #ffffff;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 16px rgba(0,0,0,0.25);
}
.fc-menu-drawer.is-open .fc-menu-drawer__panel { transform: translateX(0); }
/* Menu drawer: no pull-to-refresh, panel completamente inmóvil. Tap en links sigue funcionando — touch-action:none solo desactiva pan/zoom, no taps */
.fc-menu-drawer__panel {
  overscroll-behavior: none;
  touch-action: none;
  overflow: hidden;
  /* iPhone safe-area inferior pintada para que la URL bar matchee al header */
  padding-bottom: env(safe-area-inset-bottom);
}
.fc-menu-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-menu-drawer__close:hover { color: rgba(255, 255, 255, 0.7); }
.fc-menu-drawer__nav {
  padding: 64px 24px 24px;
  overflow-y: auto;
  flex: 1;
}
.fc-menu-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fc-menu-drawer__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fc-menu-drawer__list a {
  display: block;
  padding: 18px 12px;
  margin: 0 -12px;
  font-family: var(--fc-font-heading, Cardo), serif;
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.fc-menu-drawer__list a:hover,
.fc-menu-drawer__list a:focus {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
/* Quitar outline punteado al click (browser default focus ring). Solo lo
   mostramos en :focus-visible que es navegación por teclado — accesibilidad
   preservada, click con mouse limpio. */
.fc-menu-drawer__list a:focus { outline: none; }
.fc-menu-drawer__list a:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.fc-menu-drawer__list a::-moz-focus-inner { border: 0; }

/* Press + post-tap feedback — JS agrega .is-loading después del click, queda
   visible hasta que la navegación complete (página nueva = drawer cerrado).
   :active cubre el momento del press físico, .is-loading el post-tap. */
.fc-menu-drawer__list a:active,
.fc-menu-drawer__list a.is-loading {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* ============================================================
   Cart Drawer — Shopify Dawn exact pattern:
   The drawer IS the overlay (full viewport with semi-transparent bg).
   The panel is a flex-end child (right-aligned, white, 420px).
   Header stays untouched — drawer's dim bg covers it visually.
   ============================================================ */
.fc-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 10200; /* above site header (10100) so dim covers it */
  background-color: rgba(0, 0, 0, 0); /* dim color — transparent when closed */
  visibility: hidden;
  transition: visibility 0.3s ease, background-color 0.3s ease;
  pointer-events: none;
}
.fc-cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.5); /* dim activates on open */
}
/* The backdrop element is now redundant (drawer container itself is the dim);
   keep it as an invisible click target for accessibility. */
.fc-cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
}
/* Kill focus outline + lock cart link color to text/navy in every state (Astra default blue is killed) */
.fc-cart-link,
.fc-cart-link:link,
.fc-cart-link:visited,
.fc-cart-link:hover,
.fc-cart-link:focus,
.fc-cart-link:active,
.fc-cart-link:focus-visible,
.fc-cart-link:focus-within {
  outline: none !important;
  box-shadow: none !important;
  color: var(--fc-text, #121212) !important;
  text-decoration: none !important;
}
.fc-cart-link svg,
.fc-cart-link:link svg,
.fc-cart-link:visited svg,
.fc-cart-link:hover svg,
.fc-cart-link:focus svg,
.fc-cart-link:active svg,
.fc-cart-link:focus-visible svg {
  color: var(--fc-text, #121212) !important;
  stroke: currentColor !important;
  fill: none !important;
}
.fc-cart-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.fc-cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fc-cart-drawer.is-open .fc-cart-drawer__backdrop { opacity: 1; }
.fc-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: -400px; /* hidden off the right edge */
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  color: var(--fc-text, #121212);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  /* Crisp text — no transform = no GPU layer = subpixel anti-aliasing stays active */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.fc-cart-drawer.is-open .fc-cart-drawer__panel {
  right: 0;
}
@media (max-width: 640px) {
  .fc-cart-drawer__panel { right: -100vw; }
  .fc-cart-drawer.is-open .fc-cart-drawer__panel { right: 0; }
}
/* Close X — sits inside .fc-cart-drawer__header, aligned right */
.fc-cart-drawer__close,
.fc-cart-drawer__close:hover,
.fc-cart-drawer__close:focus,
.fc-cart-drawer__close:active,
.fc-cart-drawer .fc-cart-drawer__close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: 2;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  color: var(--fc-text) !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: auto;
  height: auto;
  width: auto;
  border-radius: 0;
}
.fc-cart-drawer__close:focus:not(:focus-visible) { outline: none !important; }
.fc-cart-drawer__close svg {
  transition: transform 0.2s ease;
  display: block;
}
.fc-cart-drawer__close:hover svg {
  transform: scale(1.12);
}
.fc-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Scroll del listado de items sí, pero no propaga a body → no pull-to-refresh */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Cart panel: no overscroll bounce a nivel container */
.fc-cart-drawer__panel {
  overscroll-behavior: contain;
  /* Safe-area bottom blanco — matchea el header (panel ya es bg: #fff) */
  padding-bottom: env(safe-area-inset-bottom);
}
.fc-cart-drawer__items {
  padding: 16px 15px; /* Spec Shopify: drawer__inner padding 0 15px */
}
/* Empty state — Shopify Dawn exact: full-height flex center, 24px New York heading, 216×45 button */
.fc-cart-drawer__empty {
  display: flex;
  align-items: center;          /* vertical center inside body */
  justify-content: center;
  flex: 1;
  width: 100%;
  padding: 24px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 16px;
  color: rgba(18, 18, 18, 0.75); /* #121212BF */
}
/* Honor the [hidden] attribute over the display:flex above */
.fc-cart-drawer__empty[hidden],
.fc-cart-drawer__items[hidden],
.fc-cart-drawer__footer[hidden] { display: none !important; }
.fc-cart-drawer__empty-content {
  text-align: center;
  width: 100%;
  max-width: 369px;
}
.fc-cart-drawer__empty-heading {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  margin: 0 0 30px !important;
  line-height: 1.3;
  letter-spacing: normal;
}
.fc-cart-drawer__continue,
.fc-cart-drawer__continue:hover,
.fc-cart-drawer__continue:focus,
.fc-cart-drawer__continue:active {
  /* Spec: matches hamburger drawer panel navy (--fc-navy = #112B3D) */
  background: var(--fc-navy, #112B3D) !important;
  background-color: var(--fc-navy, #112B3D) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 30px !important;
  min-width: 120px !important;
  min-height: 45px !important;
  width: auto !important;
  height: auto !important;
  font-family: 'Besley', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  cursor: pointer;
  border-radius: 0 !important;
  transition: opacity 0.2s;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-decoration: none;
}
.fc-cart-drawer__continue:hover { opacity: 0.85; }
.fc-cart-drawer__items { list-style: none; margin: 0; padding: 0; }

/* Cart drawer header — Spec Shopify: padding 15px 0, h2 24px "New York" #121212, margin 0 0 10px */
.fc-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  margin: 0 15px;
  flex-shrink: 0;
}
/* When cart is empty: no title text (X close stays right-aligned) */
.fc-cart-drawer__header--empty {
  justify-content: flex-end;
}
.fc-cart-drawer__title[hidden] { display: none !important; }
.fc-cart-drawer__title {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  margin: 0 0 10px !important;
  letter-spacing: 0 !important;
  line-height: 1.3;
}

/* PRODUCT / TOTAL column headers — placed BELOW header, ABOVE the gray separator */
.fc-cart-drawer__col-headers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 15px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(18, 18, 18, 0.1);
}
.fc-cart-drawer__col-headers[hidden] { display: none !important; }
.fc-cart-drawer__col-product,
.fc-cart-drawer__col-total {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 400;
  color: rgba(18, 18, 18, 0.75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Cart item row — Spec Shopify: margin 0 0 15px, 369 wide */
.fc-cart-drawer__item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 14px;
  padding: 20px 0;
  margin: 0 15px;
  align-items: start;
}
.fc-cart-drawer__item-imglink {
  display: block;
  width: 100px;
}
.fc-cart-drawer__item-img {
  width: 100%;
  height: auto;
  display: block;
  background: #f5f5f5;
}

.fc-cart-drawer__item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Title link — Spec Shopify: 15px "New York" #121212, NOT purple visited */
.fc-cart-drawer__item-title,
.fc-cart-drawer__item-title:link,
.fc-cart-drawer__item-title:visited,
.fc-cart-drawer__item-title:hover,
.fc-cart-drawer__item-title:focus,
.fc-cart-drawer__item-title:active {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  text-decoration: none !important;
  line-height: 1.3;
  margin: 0;
}

/* Unit price below title — 14px Besley #121212BF, margin 6px 0 0 */
.fc-cart-drawer__item-unitprice {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
  margin: 6px 0 0;
  font-weight: 400;
}

/* Options list — dt/dd 14px Besley #121212BF */
.fc-cart-drawer__item-options {
  margin: 6px 0 0;
  display: block;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
  line-height: 1.4;
}
.fc-cart-drawer__item-options dt {
  display: inline;
  margin: 0;
  font-weight: 400;
}
.fc-cart-drawer__item-options dd {
  display: inline;
  margin: 0 0 0 4px;
  font-weight: 400;
}
.fc-cart-drawer__item-options dd::after {
  content: '';
  display: block;
  height: 2px;
}

/* Quantity controls wrapper — Spec Shopify: 248×47, 16px Besley */
.fc-cart-drawer__item-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 4px;
  width: fit-content;
  margin-top: 12px;
  height: 47px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 16px;
}
.fc-cart-drawer__item-qty button {
  background: transparent;
  border: none;
  width: 40px;
  height: 100%;
  cursor: pointer;
  font-size: 18px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  color: #121212;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fc-cart-drawer__item-qty button:hover { background: rgba(18, 18, 18, 0.04); }
.fc-cart-drawer__item-qty span {
  min-width: 32px;
  text-align: center;
  font-size: 16px;
  font-family: "Besley", Georgia, "Times New Roman", serif;
  color: #121212;
}
/* Trash icon — Spec Shopify: span.svg-wrapper 20×20 color #112B3D navy */
.fc-cart-drawer__item-trash {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
  height: 100%;
  width: 47px !important;
  cursor: pointer;
  color: #112B3D !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  outline: none !important;
  box-shadow: none !important;
}
.fc-cart-drawer__item-trash:hover { background: rgba(18, 18, 18, 0.04) !important; }
.fc-cart-drawer__item-trash svg { color: #112B3D; }

/* Shopify-style "This item has a minimum of 1" notice */
.fc-cart-drawer__item-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(18, 18, 18, 0.12), 0 0 0 1px rgba(18, 18, 18, 0.06);
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 13px;
  color: #121212;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.fc-cart-drawer__item-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fc-cart-drawer__item-notice.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
}
.fc-cart-drawer__item-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #E5A02E;
  color: #ffffff;
  flex-shrink: 0;
}
.fc-cart-drawer__item-notice-text { display: inline-block; }

/* Right side (line total) */
.fc-cart-drawer__item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 0;
}
.fc-cart-drawer__item-price {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: #121212;
}
/* Footer (div.totals) — Spec Shopify: margin 10px 0 0, padding 20px 0 40px, 16px Besley #121212BF */
.fc-cart-drawer__footer {
  padding: 20px 0 40px;
  margin: 10px 0 0 !important;
  border-top: 1px solid rgba(18, 18, 18, 0.1);
  flex-shrink: 0;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 16px;
  color: rgba(18, 18, 18, 0.75);
}
/* Subtotal row — "Estimated total" h2 + value */
.fc-cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  margin: 0 0 16px !important;
}
/* h2.totals__total — Spec: 16px "New York" #121212, margin 5px 0 0 */
.fc-cart-drawer__subtotal > :first-child {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #121212 !important;
  margin: 5px 0 0 !important;
  line-height: 1;
}
/* p.totals__total-value — Spec: 18px Besley #121212BF, margin 0 0 0 20px */
.fc-cart-drawer__subtotal > :last-child {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgba(18, 18, 18, 0.75) !important;
  margin: 0 0 0 20px !important;
}
/* "Taxes, discounts and shipping calculated at checkout." disclaimer
   — Shopify spec: 13px Besley / rgba(18,18,18,0.6) / text-align center / margin 0 0 16px */
.fc-cart-drawer__disclaimer {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  color: rgba(18, 18, 18, 0.6) !important;
  text-align: center !important;
  margin: 0 15px 16px !important;
  line-height: 1.4 !important;
}
/* Checkout button — Spec: 367×45 navy */
.fc-cart-drawer__checkout,
.fc-cart-drawer__checkout:link,
.fc-cart-drawer__checkout:visited,
.fc-cart-drawer__checkout:hover,
.fc-cart-drawer__checkout:focus,
.fc-cart-drawer__checkout:active {
  display: block;
  width: calc(100% - 30px);
  margin: 0 15px;
  text-align: center;
  height: 45px;
  line-height: 45px;
  padding: 0;
  background: var(--fc-navy, #112B3D) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  transition: opacity 0.2s;
  border: none !important;
  border-radius: 0;
  cursor: pointer;
}
.fc-cart-drawer__checkout:hover { opacity: 0.88; }

/* Body lock + scrollbar compensation when cart drawer open */
body.fc-cart-open { overflow: hidden; }

@media (max-width: 640px) {
  .fc-cart-drawer__panel { max-width: 100vw; }
}

/* ============================================================
   Smart Sticky Header — slide on scroll direction (Shopify Dawn parity)
   - Always fixed at top
   - Scroll down past THRESHOLD: slide up & hide
   - Scroll up: slide back in
   - Top of page: always visible, no shadow
   - Mobile menu open: never hide
   ============================================================ */
.site-header,
#masthead.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10100; /* above menu drawer (10000), BELOW cart drawer (10200) — cart drawer dim covers header (Shopify Dawn pattern) */
  background: #ffffff;
  transform: translateY(0) !important;
  transition: transform 0.25s ease-out, box-shadow 0.2s ease-out;
  will-change: transform;
}
.site-header.fc-header--hidden,
#masthead.site-header.fc-header--hidden {
  transform: translateY(-100%) !important;
}
.site-header.fc-header--at-top,
#masthead.site-header.fc-header--at-top {
  box-shadow: none;
}
.site-header:not(.fc-header--at-top),
#masthead.site-header:not(.fc-header--at-top) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.site-header.fc-menu-open,
#masthead.site-header.fc-menu-open {
  transform: translateY(0) !important;
}
/* Push body content down so it isn't hidden under the fixed header */
body {
  padding-top: var(--fc-header-height, 71px);
}
@media (max-width: 749px) {
  body {
    padding-top: var(--fc-header-height-mobile, 56px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /track-order/ — order tracking page (Phase: pre-Track123-install)
   --------------------------------------------------------------------------
   Currently uses WC native [woocommerce_order_tracking] form. Styling matches
   Shopify (Track123) navy theme so the migration UX is identical from day 1.
   When Track123 WP plugin is installed, the .t123-* selectors will take effect
   automatically (Track123 ships its own markup into the same wrapper).
   ═══════════════════════════════════════════════════════════════════════════ */

.track-order-content { max-width: 500px; margin: 0 auto; text-align: center; }
.track-order-content h1 { text-align: center; }

/* Card wrapper around the form (Shopify Track123: ~350-500px wide, white bg, light border, rounded). */
.track-order-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 32px 28px;
  margin: 0 auto;
  text-align: left;
}

/* "Powered by Track123" footer */
.track-order-powered {
  margin-top: 16px;
  font-family: "Besley", Georgia, serif;
  font-size: 12px;
  color: rgba(18,18,18,0.45);
  font-style: italic;
  text-align: center;
}
.track-order-powered a { color: rgba(18,18,18,0.45) !important; text-decoration: none; }
.track-order-powered a:hover { color: rgba(18,18,18,0.7) !important; }

/* WC native order tracking form — matches Track123 visual spec:
   label 16px Besley #121212BF mar 0 0 4 / input 350x40 padding 12px / button navy */
.track-order-card form.track_order,
.track-order-card .woocommerce form.track_order {
  background: transparent;
  padding: 0;
  border: none;
  margin: 0;
}
.track-order-card form.track_order p.form-row {
  margin: 0 0 14px;
}
.track-order-card form.track_order label {
  display: block;
  font-family: "Besley", Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(18,18,18,0.75);
  margin: 0 0 4px;
}
.track-order-card form.track_order input[type="text"],
.track-order-card form.track_order input[type="email"] {
  width: 100%;
  min-height: 40px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 4px;
  font-size: 15px;
  font-family: "Besley", Georgia, serif;
  color: #121212;
  background: #FFFFFF;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.track-order-card form.track_order input[type="text"]:focus,
.track-order-card form.track_order input[type="email"]:focus {
  outline: none;
  border-color: #112B3D;
  box-shadow: 0 0 0 2px rgba(17,43,61,0.15);
}
.track-order-card form.track_order button[type="submit"],
.track-order-card form.track_order .button {
  width: 100%;
  min-height: 38px;
  padding: 10px 16px;
  background: #112B3D !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: "Besley", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
}
.track-order-card form.track_order button[type="submit"]:hover,
.track-order-card form.track_order button[type="submit"]:focus,
.track-order-card form.track_order .button:hover,
.track-order-card form.track_order .button:focus {
  background: #112B3D !important;
  color: #FFFFFF !important;
  opacity: 0.88;
  outline: none !important;
}

/* ─── Track123 plugin compatibility (selectors copied verbatim from Shopify config).
       Will activate automatically once Track123 renders its markup inside the page. ─── */
.track-order-content button,
.track-order-content .t123-btn,
.track-order-content [class*="track-btn"],
.track-order-content [class*="submit-btn"],
.track-order-content [class*="track123-btn"] {
  background-color: #112b3d !important;
  background: #112b3d !important;
  border-color: #112b3d !important;
  color: #fff !important;
  border-radius: 4px !important;
  transition: opacity 0.2s !important;
}
.track-order-content button:hover,
.track-order-content .t123-btn:hover,
.track-order-content [class*="track-btn"]:hover {
  background-color: #112b3d !important;
  opacity: 0.88 !important;
}
.track-order-content a { color: #112b3d !important; }
.track-order-content .t123-progress-active,
.track-order-content .t123-step-active,
.track-order-content [class*="progress-active"],
.track-order-content [class*="step-active"],
.track-order-content [class*="status-active"] {
  background-color: #112b3d !important;
  border-color: #112b3d !important;
  color: #112b3d !important;
}
.track-order-content .t123-tab-active,
.track-order-content [class*="tab-active"],
.track-order-content [class*="active-tab"] {
  border-bottom-color: #112b3d !important;
  color: #112b3d !important;
}

/* Heritage funnel email popup: hide site header so user can click the X.
   Works on heritage-results AND heritage-results-origins (both render .hr-popup-bg). */
body:has(.hr-popup-bg.active) #masthead,
body:has(.hr-popup-bg.active) .site-header,
body:has(.hr-popup-bg.active) #ast-mobile-header {
  display: none !important;
}

/* WC Checkout layout: widen sidebar so product name doesn't wrap awkwardly */
@media (min-width: 768px) {
  /* Astra .entry-content default max-width 800 constrains checkout — widen on /checkout/ + /cart/ */
  body.woocommerce-checkout .entry-content,
  body.woocommerce-cart .entry-content {
    max-width: 1100px !important;
  }
  body.woocommerce-checkout .wc-block-checkout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) !important;
    gap: 40px !important;
  }
  body.woocommerce-checkout .wc-block-checkout__main {
    max-width: 600px;
  }
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
  background: var(--fc-navy) !important;
  background-color: var(--fc-navy) !important;
  color: #fff !important;
  font-family: var(--fc-font-body);
  font-size: 18px !important;
  text-transform: uppercase;
  font-weight: 700;
  padding: 16px 24px !important;
  border-radius: 4px !important;
  display: block;
  width: 100%;
  text-align: center;
  border: none;
  margin-top: 16px;
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.wc-block-cart__submit-button:hover {
  opacity: 0.88;
  background-color: var(--fc-navy) !important;
}

/* === pagefly_section_R8zVPc — "Lista con iconos" (mobile only) ===
   Source: snippets/pf-7e1dc0fa.liquid + pf-7e1dc0fa-css.liquid
   Hidden on desktop (≥750px) — desktop usa fc-trust-badges-desktop en su lugar. */
.fc-home-icons-list {
  padding: 20px 15px;
  background: #ffffff;
}
@media (min-width: 750px) {
  .fc-home-icons-list { display: none !important; }
}
.fc-icons-list__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 16px;
}
.fc-icons-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.fc-icons-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  text-align: center;
}
.fc-icons-list__icon {
  flex-shrink: 0;
  color: #2e5271;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fc-icons-list__icon svg {
  width: 40px;
  height: 40px;
  display: block;
}
.fc-icons-list__body {
  text-align: left;
  flex: 1;
}
.fc-icons-list__title {
  color: #000;
  font-family: var(--fc-font-heading);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}
.fc-icons-list__desc {
  color: #4d4d4d;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.5;
}
.fc-icons-list__image {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   Scroll-reveal animation — Shopify Dawn parity
   Fade + slide-in when element enters viewport. IntersectionObserver-driven.
   ============================================================ */
/* Dawn parity: @keyframes-based animations with 600ms duration + cubic-bezier
   easing + 75ms stagger. State invertido — usa .scroll-trigger--offscreen como
   estado pre-reveal (more correct initial paint behavior). */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .scroll-trigger.animate--fade-in,
  .js .scroll-trigger.animate--slide-in { opacity: 0.01; }
  .js .scroll-trigger.animate--slide-in { transform: translateY(2rem); }

  .js .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: fcFadeIn 600ms cubic-bezier(0, 0, 0.3, 1);
  }
  .js .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: fcSlideIn 600ms cubic-bezier(0, 0, 0.3, 1) forwards;
    animation-delay: calc(var(--animation-order, 0) * 75ms);
  }
  @keyframes fcSlideIn {
    from { transform: translateY(2rem); opacity: 0.01; }
    to   { transform: translateY(0);     opacity: 1; }
  }
  @keyframes fcFadeIn {
    from { opacity: 0.01; }
    to   { opacity: 1; }
  }
}
/* .summary: opacity-only para preservar mix-blend-mode del guarantee badge */
.js .summary.scroll-trigger.animate--slide-in {
  transform: none !important;
  animation-name: fcFadeIn !important;
}
@media (prefers-reduced-motion: reduce) {
  .js .scroll-trigger.animate--fade-in,
  .js .scroll-trigger.animate--slide-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ============================================================
   "+ Add another customization" — solo PDP Limited Edition + Origins
   ============================================================ */
.fc-extra-slots-wrap {
  margin: 12px 0 0;
}
.fc-extra-slots {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fc-extra-slots:not(:empty) {
  margin: 8px 0 14px;
}

/* Botón "+ Add another customization" */
.fc-add-extra-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #1a1a1a;
  border: 1px dashed #b8b8b8;
  border-radius: 5px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: border-color 150ms, background 150ms, color 150ms;
}
.fc-add-extra-slot:hover,
.fc-add-extra-slot:hover span {
  color: #1a1a1a !important;
  border-color: #1a1a1a;
  background: #fafafa !important;
}
.fc-add-extra-slot:focus,
.fc-add-extra-slot:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #1a1a1a !important;
  border: 1px dashed #b8b8b8 !important;
}
.fc-add-extra-slot:focus-visible {
  outline: none !important;
  border-color: #1a1a1a !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}
.fc-add-extra-slot,
.fc-add-extra-slot span {
  color: #1a1a1a !important;
}
.fc-add-extra-slot__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
}
.fc-add-extra-slot__hint {
  margin: 8px 0 0;
  color: #6b6b6b;
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
}

/* Slot card */
.fc-extra-slot {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 14px 16px;
  background: #fafafa;
  position: relative;
}
.fc-extra-slot__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
}
.fc-extra-slot__title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.2px;
}
.fc-extra-slot__remove,
.fc-extra-slot__remove:hover,
.fc-extra-slot__remove:focus,
.fc-extra-slot__remove:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  font-size: 12px !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-family: inherit;
  padding: 4px 0 !important;
  line-height: 1.4;
}
.fc-extra-slot__remove {
  color: #6b6b6b !important;
  text-decoration-color: rgba(0,0,0,0.3) !important;
}
.fc-extra-slot__remove:hover {
  color: #BD1700 !important;
  text-decoration-color: currentColor !important;
}
.fc-extra-slot__remove:focus-visible {
  outline: 2px solid rgba(0,0,0,0.15) !important;
  outline-offset: 2px;
}
.fc-extra-slot .fc-fp-input {
  margin: 6px 0;
}
.fc-extra-slot .fc-fp-section-label {
  margin: 4px 0 6px;
}
.fc-extra-slot .fc-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.fc-extra-slot .fc-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
}
.fc-extra-slot .fc-radio input[type="radio"] {
  margin: 0;
}

/* ============================================================
   Cart page (WC override en woocommerce/cart/cart.php)
   ============================================================ */
body.woocommerce-cart .ast-container,
body.woocommerce-cart #primary,
body.woocommerce-cart .entry-content {
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #fff !important;
}
body.woocommerce-cart .entry-header,
body.woocommerce-cart .ast-page-title-wrap,
body.woocommerce-cart h1.entry-title {
  display: none !important;
}

.fc-cart-wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px 50px 80px;
  color: #1a1a1a;
  font-family: Besley, Georgia, "Times New Roman", serif;
}
.fc-cart-wrap--empty { min-height: 50vh; }

/* ─── Cart PAGE (réplica del drawer, fuera del drawer) ──────────────────── */
.fc-cart-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  color: var(--fc-text, #121212);
  font-family: Besley, Georgia, "Times New Roman", serif;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fc-cart-page--empty { min-height: 50vh; display: flex; flex-direction: column; }
.fc-cart-page__header { padding: 0 0 24px; }
.fc-cart-page__title {
  font-family: Cardo, Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: var(--fc-text, #121212);
}
/* La <ul> de items mantiene clases del drawer pero sobreescribimos padding
   horizontal (el drawer tenía 16px 15px porque el panel es estrecho). */
.fc-cart-page .fc-cart-drawer__items { padding: 8px 0 0; }
.fc-cart-page .fc-cart-drawer__col-headers { padding: 0 0 12px; }
/* Hide unit price debajo del título — tanto en cart page como en drawer.
   El line total a la derecha ya muestra el precio, no hace falta duplicarlo. */
.fc-cart-drawer__item-unitprice { display: none !important; }
/* Empty state full-width en cart page */
.fc-cart-page .fc-cart-drawer__empty { padding: 80px 24px; flex: 1; }
/* Footer en cart page — sin sticky, fluye con la página */
.fc-cart-page__footer { position: relative; margin-top: 24px; }
/* Express checkout container */
.fc-cart-page__express {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Botones de gateways express (Stripe PRB / PayPal) — full width como el Check out */
.fc-cart-page__express > * {
  width: 100% !important;
  max-width: 100% !important;
}
.fc-cart-page__express .wc-proceed-to-checkout,
.fc-cart-page__express .wc-block-components-button { width: 100% !important; }
/* Esconder cualquier "Update cart" o noscript fallback al final del form */
.fc-cart-page__update { display: none; }

@media (max-width: 749px) {
  .fc-cart-page {
    padding: 24px 12px 60px;
    max-width: 100%;
  }
  .fc-cart-page__title { font-size: 28px; }
}

/* ─── Cart item layout en mobile — SOLO cart PAGE (drawer queda como estaba)
   En 375-400px viewport con la cart page wrapper de 12px padding, queremos la
   imagen pegada al borde izquierdo y más ancho para título/opciones. */
@media (max-width: 749px) {
  .fc-cart-page .fc-cart-drawer__items { padding: 8px 0 !important; }
  .fc-cart-page .fc-cart-drawer__item {
    grid-template-columns: 72px 1fr auto;
    gap: 10px;
    margin: 0;
    padding: 16px 0;
  }
  .fc-cart-page .fc-cart-drawer__item-imglink { width: 72px; }
  .fc-cart-page .fc-cart-drawer__item-title,
  .fc-cart-page .fc-cart-drawer__item-title:link,
  .fc-cart-page .fc-cart-drawer__item-title:visited { font-size: 14px !important; line-height: 1.25; }
  .fc-cart-page .fc-cart-drawer__item-options { font-size: 13px; }
  .fc-cart-page .fc-cart-drawer__item-price { font-size: 14px; }
  .fc-cart-page .fc-cart-drawer__col-headers { padding-left: 0; padding-right: 0; }
}

/* Heading row */
.fc-cart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.fc-cart-title {
  font-family: Cardo, Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: #121212;
  margin: 0;
}
.fc-cart-continue {
  font-size: 16px;
  color: rgba(17, 43, 61, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fc-cart-continue:hover { color: #112B3D; }

/* Items table */
.fc-cart-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #e5e5e5;
  margin: 0 0 40px;
}
.fc-cart-table thead th {
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 500;
  color: #6b6b6b;
  text-transform: uppercase;
  padding: 14px 0;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
}
.fc-cart-table thead .fc-cart-col-qty { text-align: center; }
.fc-cart-table thead .fc-cart-col-total { text-align: right; }
.fc-cart-table tbody td {
  padding: 22px 0;
  vertical-align: top;
  border-bottom: 1px solid #e5e5e5;
}

/* Product cell */
.fc-cart-product {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.fc-cart-thumb {
  display: block;
  width: 130px;
  height: 130px;
  border-radius: 6px;
  overflow: hidden;
  background: #fafafa;
  flex-shrink: 0;
  border: 1px solid #e5e5e5;
}
.fc-cart-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.fc-cart-info { padding-top: 4px; }
.fc-cart-name,
body.woocommerce-cart .fc-cart-name,
body.woocommerce-cart a.fc-cart-name,
body.woocommerce-cart a.fc-cart-name:link,
body.woocommerce-cart a.fc-cart-name:visited {
  display: block !important;
  font-family: Cardo, Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  margin-bottom: 6px;
}
.fc-cart-name:hover { text-decoration: underline !important; text-underline-offset: 3px; color: #1a1a1a !important; }
.fc-cart-price {
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.fc-cart-meta {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin-top: 4px;
}
.fc-cart-meta dl.variation,
.fc-cart-meta .variation {
  display: grid !important;
  grid-template-columns: max-content 1fr;
  gap: 2px 8px;
  margin: 0 !important;
  padding: 0 !important;
}
.fc-cart-meta dt {
  font-weight: 400 !important;
  color: #555 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  white-space: nowrap;
}
.fc-cart-meta dt::after { content: ""; }
.fc-cart-meta dd {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #555 !important;
  font-weight: 400 !important;
}
.fc-cart-meta dd p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Qty stepper */
.fc-cart-col-qty { text-align: center; }
.fc-cart-qty-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fc-cart-qty-wrap > div,
.fc-cart-qty-wrap > .fc-cart-qty-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
  height: 36px;
}
.fc-cart-qty-btn {
  background: transparent !important;
  border: none !important;
  color: #1a1a1a !important;
  width: 34px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
}
.fc-cart-qty-btn:hover { background: #f4f4f4 !important; }
.fc-cart-qty-input {
  width: 38px;
  height: 36px;
  border: none !important;
  border-left: 1px solid #c8c8c8 !important;
  border-right: 1px solid #c8c8c8 !important;
  text-align: center !important;
  font-size: 14px !important;
  font-family: Besley, serif !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: #1a1a1a !important;
  -moz-appearance: textfield;
  appearance: textfield;
}
.fc-cart-qty-input::-webkit-outer-spin-button,
.fc-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fc-cart-qty-input:focus { outline: none !important; }
.fc-cart-trash {
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  text-decoration: none !important;
}
.fc-cart-trash:hover { color: #BD1700; background: #f7f7f7; }
.fc-cart-trash svg { display: block; }

/* Total cell */
.fc-cart-col-total {
  text-align: right;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  padding-top: 28px !important;
}

/* Bottom row: coupon left, summary right */
.fc-cart-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.fc-cart-coupon-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  flex: 0 1 auto;
}
.fc-coupon-input {
  height: 44px !important;
  border: 1px solid #c8c8c8 !important;
  border-radius: 4px !important;
  padding: 0 14px !important;
  font-family: Besley, serif !important;
  font-size: 14px !important;
  width: 240px;
  color: #1a1a1a !important;
  background: #fff !important;
}
.fc-coupon-input::placeholder { color: #999; }
.fc-coupon-apply {
  height: 44px !important;
  padding: 0 22px !important;
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  color: #1a1a1a !important;
  font-family: Besley, serif !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  cursor: pointer;
  font-weight: 500 !important;
}
.fc-coupon-apply:hover { background: #1a1a1a !important; color: #fff !important; }
.fc-cart-update {
  display: none; /* hidden — qty updates auto via WC fragments */
}

/* Summary card */
.fc-cart-summary {
  flex: 0 0 380px;
  max-width: 420px;
  text-align: right;
}
.fc-cart-subtotal-row {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 26px;
  margin-bottom: 12px;
}
.fc-cart-subtotal-label {
  font-family: Cardo, Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: #1a1a1a;
}
.fc-cart-subtotal-value {
  font-family: Cardo, Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
}
.fc-cart-currency {
  font-size: 16px;
  font-weight: 400;
  color: #6b6b6b;
  margin-left: 4px;
}
/* Disclaimer subtítulo debajo del Estimated total — color gris, font sans */
.fc-cart-disclaimer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #6b6b6b;
  margin: 0 0 20px;
  text-align: right;
  line-height: 1.5;
}
.fc-cart-checkout-btn {
  display: block;
  width: 100%;
  background: #112B3D;
  color: #fff !important;
  text-align: center;
  padding: 16px 24px;
  font-family: Besley, serif;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none !important;
  transition: opacity 150ms;
  letter-spacing: 0.2px;
}
.fc-cart-checkout-btn:hover { opacity: 0.92; color: #fff; }
.fc-cart-express {
  margin-top: 12px;
  min-height: 44px;
}
.fc-cart-express #wc-stripe-express-checkout-element {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
/* Hide WC default "Proceed to checkout" button (we have our own .fc-cart-checkout-btn).
   El do_action('woocommerce_proceed_to_checkout') que disparamos para que Stripe inyecte
   el G Pay también renderea por default el WC button standard — lo ocultamos. */
.fc-cart-express .checkout-button.wc-forward,
.fc-cart-express > .button.alt.checkout-button {
  display: none !important;
}

/* Safety net: hide "X removed. Undo?" notice si algún plugin lo sigue inyectando
   pese al filter PHP. Match el wrapper de WC notices con texto "removed" / "Undo". */
.woocommerce-notices-wrapper .woocommerce-message[role="alert"]:has(.restore-item),
.woocommerce-message:has(a.restore-item) {
  display: none !important;
}

/* Empty cart */
.fc-cart-title--empty { margin-bottom: 40px; }
.fc-cart-empty {
  text-align: center;
  padding: 60px 20px 80px;
}
.fc-cart-empty__icon {
  margin: 0 auto 24px;
  width: 80px;
}
.fc-cart-empty__msg {
  font-family: Cardo, Georgia, serif;
  font-size: 22px;
  color: #1a1a1a;
  margin: 0 0 28px;
}
.fc-cart-empty__cta {
  display: inline-block;
  background: #112B3D;
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 4px;
  font-size: 16px;
  text-decoration: none !important;
  font-family: Besley, serif;
}

/* Hide WC default cart sidebar/totals (we use our own summary) */
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cross-sells {
  display: none !important;
}

/* Responsive: mobile */
@media (max-width: 800px) {
  .fc-cart-wrap { padding: 24px 16px 60px; }
  .fc-cart-title { font-size: 30px; }
  .fc-cart-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fc-cart-table thead { display: none; }
  .fc-cart-table tbody td { display: block; border: none; padding: 8px 0; }
  .fc-cart-table tbody tr { border-bottom: 1px solid #e5e5e5; padding: 16px 0; display: block; }
  .fc-cart-col-total { text-align: left; }
  .fc-cart-product { gap: 14px; }
  .fc-cart-thumb { width: 90px; height: 90px; }
  .fc-cart-summary { max-width: 100%; text-align: center; }
  /* Order summary mobile — más grande para legibilidad y match con Shopify */
  .fc-cart-subtotal-row {
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
  }
  .fc-cart-subtotal-label,
  .fc-cart-subtotal-value {
    font-size: 22px;
  }
  .fc-cart-currency {
    font-size: 14px;
    font-weight: 500;
    color: #6b6b6b;
  }
  .fc-cart-disclaimer {
    text-align: center;
    font-size: 13px;
    margin: 0 0 16px;
  }
  .fc-cart-checkout-btn {
    padding: 18px 24px;
    font-size: 17px;
    border-radius: 999px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME MOBILE — pixel-match con Shopify (myheritagestories.com en 375px)
   --------------------------------------------------------------------------
   Shopify mobile oculta 7 secciones desktop y muestra solo:
     hero + mobile-ring-promo + our-collection + FAQs + trust-badges + footer.
   Replicamos ese comportamiento aquí.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Global overflow safety (defensive — evita scroll horizontal en cualquier sección).
   IMPORTANTE: usamos `overflow-x: clip` (no `hidden`) porque hidden en html+body
   simultáneamente es un bug conocido de iOS Safari — rompe momentum scrolling
   vertical: el touch funciona visualmente pero el browser NO commitea el scroll
   final al soltar el dedo. `clip` previene el horizontal scroll SIN crear un
   scroll context que rompa el flujo vertical. */
html, body { overflow-x: clip; max-width: 100vw; }

/* ────────────────────────────────────────────────────────────────────────────
   Drawer open — matar pull-to-refresh y "reveal Safari chrome" iOS.
   Cuando un drawer está abierto, html y body se vuelven completamente inertes
   ante gestos de pan. Solo se permite scroll vertical dentro del cart body. */
html.fc-scroll-locked,
html.fc-scroll-locked body {
  overscroll-behavior: none !important;
  touch-action: none !important;
}
/* Cart drawer: panel acepta pan vertical interno (para que se vea la lista de
   items si hay muchos). El body interno scrollea. */
html.fc-scroll-locked .fc-cart-drawer__panel { touch-action: pan-y !important; }
html.fc-scroll-locked .fc-cart-drawer__body { touch-action: pan-y !important; }
/* Menu drawer: nada se mueve, nada de pan. Tap en links sigue funcionando. */
html.fc-scroll-locked .fc-menu-drawer__panel { touch-action: none !important; }

/* ─── Testimonial carousel: clipping en el WRAPPER, no en el inner ──────
   IMPORTANTE: overflow-hidden tiene que estar en .carousel (el wrapper),
   NUNCA en .carousel-inner ni en #testimonialCarousel-* (el inner es flex
   container de 600% de ancho — overflow:hidden ahí clipea los cards 2-6
   antes de que el translateX los pueda traer a la vista). */
.testimonial-container {
  overflow-x: hidden;
}
.testimonial-section-apolo .carousel {
  overflow: hidden !important;
}

/* ─── Featured section (Limited Edition product en home desktop): grid debe
       comportarse a tablet (<990) como single column en vez de seguir intentando
       2-col que excede el viewport ─────────────────────────────────────────── */
@media (max-width: 989px) {
  body.home .fc-home-featured__inner {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  body.home .fc-home-featured,
  body.home .fc-home-featured__inner,
  body.home .fc-home-featured__content,
  body.home .fc-home-featured__form,
  body.home .fc-home-featured__gallery {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  body.home .fc-home-multirow,
  body.home .fc-home-multirow__inner,
  body.home .fc-home-multirow__row {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 749px) {

  /* ── A. Ocultar secciones desktop-only en mobile (mirror Shopify) ──────── */
  body.home .fc-home-rich-text--arms,
  body.home .fc-home-multirow,
  body.home .fc-home-tutorial,
  body.home .fc-home-featured,
  body.home .fc-home-rich-text--arrives,
  body.home .fc-home-icons-list,
  body.home .fc-home-rich-text--trusted,
  body.home .testimonial-section-apolo,
  body.home #fc-reviews {
    display: none !important;
  }

  /* ── B. Hero mobile img — 375×375 centrado en viewport, subido. */
  .fc-home-hero__mobile-img {
    width: 375px !important;
    max-width: 375px !important;
    height: 375px !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 8px 0 0 !important;
  }
  .fc-home-hero__mobile-img img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  /* ── C. Testimonial carousel — clipping en wrapper (NO en inner) ────── */
  .testimonial-container { overflow-x: hidden !important; }

  /* ── D. Astra header — fix 4px overflow ────────────────────────────────── */
  .ast-builder-grid-row,
  .ast-builder-grid-row-container,
  .site-header-primary-section-right {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ── E. WC products SINGLE COLUMN en mobile (apilados vertical, full-width).
         Aplica a: home, category archive (/product-category/), shop, etc. */
  body.home .woocommerce ul.products.columns-4,
  body.tax-product_cat ul.products,
  body.post-type-archive-product ul.products,
  body.woocommerce-shop ul.products,
  body.woocommerce-page ul.products,
  .fc-home-collection ul.products,
  ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.home .woocommerce ul.products.columns-4 > li,
  body.tax-product_cat ul.products > li,
  body.post-type-archive-product ul.products > li,
  body.woocommerce-shop ul.products > li,
  body.woocommerce-page ul.products > li,
  .fc-home-collection ul.products > li,
  ul.products.columns-4 > li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.home .woocommerce ul.products.columns-4 > li img,
  body.tax-product_cat ul.products > li img,
  body.post-type-archive-product ul.products > li img,
  body.woocommerce-shop ul.products > li img,
  body.woocommerce-page ul.products > li img,
  .fc-home-collection ul.products > li img,
  ul.products.columns-4 > li img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── M. "Our collection" archive page title — bold */
  body.tax-product_cat .fc-home-collection__heading,
  body.tax-product_cat .ast-archive-title,
  body.tax-product_cat h1.page-title,
  body.tax-product_cat h2.fc-home-h2 {
    font-weight: 700 !important;
  }

  /* ── O. Product page (PDP) en mobile — ocultar thumbnails del gallery carousel.
         Existing rule tiene `.flex-control-thumbs.has-overflow` (4 classes); usamos
         5 classes para ganarle. */
  html body.single-product .woocommerce-product-gallery .flex-control-nav,
  html body.single-product .woocommerce-product-gallery .flex-control-thumbs,
  html body.single-product .woocommerce-product-gallery .flex-control-thumbs.has-overflow,
  html body.fc-funnel-product-wrap .woocommerce-product-gallery .flex-control-thumbs,
  html body.fc-funnel-product-wrap .woocommerce-product-gallery .flex-control-thumbs.has-overflow,
  /* Hide ALSO main image carousel arrows (flex-direction-nav + flex-prev/next)
     AND the thumb-strip arrows (fc-thumbs-arrow) */
  html body.single-product .woocommerce-product-gallery .flex-direction-nav,
  html body.single-product .woocommerce-product-gallery .flex-prev,
  html body.single-product .woocommerce-product-gallery .flex-next,
  html body.single-product .fc-thumbs-arrow,
  html body.single-product .fc-thumbs-arrow--prev,
  html body.single-product .fc-thumbs-arrow--next {
    display: none !important;
  }

  /* ── P. Product page (PDP) en mobile — REEMPLAZAR FlexSlider con CSS scroll-snap
         nativo (igual que Shopify Dawn). FULL WIDTH viewport — gallery se extiende
         100vw breaking out del article container con margin-left negativo. */
  html body.single-product .woocommerce-product-gallery {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 8px !important;
    height: auto !important;
    box-sizing: border-box;
    overflow: visible !important;
    padding: 0 !important;
  }
  html body.single-product .woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    overflow: visible !important;
    padding: 0 !important;
  }
  /* UL wrapper = horizontal scroll container con snap.
     padding-left 18px centra el slide activo (390 viewport - 354 slide = 36 / 2 = 18) */
  html body.single-product .woocommerce-product-gallery__wrapper {
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 0 0 18px !important;
    box-sizing: border-box;
    margin: 0 !important;
  }
  html body.single-product .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }
  /* Cada slide LI: 354 (image 352 + border 2). Gap entre slides: 6px */
  html body.single-product .woocommerce-product-gallery__image {
    flex: 0 0 auto !important;
    width: 354px !important;
    height: 354px !important;
    float: none !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
    box-sizing: border-box;
    background: transparent !important;
    line-height: 0;
    font-size: 0;
    display: block !important;
    opacity: 1 !important;
    position: static !important;
  }
  html body.single-product .woocommerce-product-gallery__image:last-child {
    margin-right: 18px !important;
  }
  /* Link interno = frame de cada imagen, 354×354 con border 1px gris muy suave.
     Imagen 352×352 queda dentro del border. */
  html body.single-product .woocommerce-product-gallery__image > a {
    display: block;
    width: 354px !important;
    height: 354px !important;
    border: 1px solid rgba(18, 18, 18, 0.08) !important;
    box-sizing: border-box;
    background: transparent !important;
    line-height: 0;
    font-size: 0;
  }
  /* Imagen 352×352 (no más border, no más fondo blanco extra) */
  html body.single-product .woocommerce-product-gallery__image img {
    display: block !important;
    width: 352px !important;
    height: 352px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
  }
  /* Kill el ::after pseudo-border del flex-viewport (1px gris overlay) */
  html body.single-product .woocommerce-product-gallery .flex-viewport::after,
  html body.fc-funnel-product-wrap .woocommerce-product-gallery .flex-viewport::after {
    display: none !important;
    border: none !important;
    content: none !important;
  }

  /* ── Q. FUNNEL pages (.fc-funnel-product-wrap) — distinto del PDP standalone:
         - Main image: 273×273 centrado
         - Thumbnails: 54×54 row debajo */
  body .fc-funnel-product-wrap .woocommerce-product-gallery {
    width: 273px !important;
    max-width: 273px !important;
    margin: 4px auto 16px !important;
    padding: 0 !important;
    position: static !important;
    top: 0 !important;
  }
  /* page-heritage-funnel.php sets .product.type-product { padding: 24px } as
     the white card padding — but on mobile, the top 24px adds a visible gap
     between the reviews row (above .hpt-gallery-block) and the gallery image.
     Override to keep the lateral/bottom padding but reduce the top. */
  body .fc-funnel-product-wrap .product.type-product {
    padding: 4px 24px 24px !important;
  }
  body .fc-funnel-product-wrap .woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  /* UL wrapper — FlexSlider fade mode stacks all slides absolutely and
     crossfades opacity. Wrapper needs square aspect ratio so it doesn't
     collapse when children are positioned absolutely. */
  body .fc-funnel-product-wrap .woocommerce-product-gallery__wrapper {
    display: block !important;
    overflow: hidden !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
    width: 273px !important;
    aspect-ratio: 1 / 1;
    position: relative !important;
    transform: none !important;
  }
  /* FlexSlider fade mode applies inline:
       float: left; margin-right: -100%; position: relative; opacity: 0|1
     to stack all slides on top of each other and crossfade between them.
     We deliberately DO NOT override float / margin / position here — that
     would break the stacking and cause slides to appear vertically. */
  body .fc-funnel-product-wrap .woocommerce-product-gallery__image {
    max-width: 100% !important;
    scroll-snap-align: none !important;
  }
  /* Fallback for pre-init state: if FlexSlider hasn't set up the fade mode
     yet (no slide has .flex-active-slide), show the first slide only. */
  body .fc-funnel-product-wrap .woocommerce-product-gallery__wrapper:not(:has(.flex-active-slide)) > .woocommerce-product-gallery__image:not(:first-child) {
    display: none;
  }
  body .fc-funnel-product-wrap .woocommerce-product-gallery__image > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 1px solid rgba(18, 18, 18, 0.08) !important;
    border-radius: 5px !important;
    background: transparent !important;
    overflow: hidden;
  }
  body .fc-funnel-product-wrap .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
  /* SHOW thumbnails strip BELOW main image (was hidden on PDP mobile) */
  html body .fc-funnel-product-wrap .woocommerce-product-gallery .flex-control-nav,
  html body .fc-funnel-product-wrap .woocommerce-product-gallery .flex-control-thumbs,
  html body .fc-funnel-product-wrap .woocommerce-product-gallery .flex-control-thumbs.has-overflow {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 0 0;
    margin: 0;
    list-style: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body .fc-funnel-product-wrap .flex-control-thumbs::-webkit-scrollbar {
    display: none;
  }
  html body .fc-funnel-product-wrap .woocommerce-product-gallery .flex-control-thumbs li,
  html body.fc-funnel-with-header .fc-funnel-product-wrap .flex-control-thumbs li {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
  }
  html body .fc-funnel-product-wrap .woocommerce-product-gallery .flex-control-thumbs li img,
  html body.fc-funnel-with-header .fc-funnel-product-wrap .flex-control-thumbs li img {
    width: 54px !important;
    height: 54px !important;
    object-fit: cover !important;
    border: 2px solid #DDE2EA !important;
    border-radius: 5px !important;
    cursor: pointer;
    transition: border-color 0.2s;
    display: block;
  }
  body .fc-funnel-product-wrap .flex-control-thumbs li img.flex-active {
    border-color: #112B3D;
  }
  /* Hide navigation arrows on funnel gallery */
  body .fc-funnel-product-wrap .flex-direction-nav,
  body .fc-funnel-product-wrap .flex-prev,
  body .fc-funnel-product-wrap .flex-next,
  body .fc-funnel-product-wrap .fc-thumbs-arrow {
    display: none !important;
  }

  /* Custom title + stars row (injected ABOVE the product) */
  /* hpt-wrap (title + stars) and the product card below it must look like ONE
     white card. Two things were leaking the gray .fc-funnel-product-wrap bg:
       1) .hpt-stars-row margin-bottom: 8px collapses out of .hpt-wrap (which
          has padding-bottom: 0), creating an 8px gray strip below.
       2) .hpt-gallery-block had transparent bg, so the gap was gray.
     Fix: move the 8px from stars margin to hpt-wrap padding, and make the
     gallery block + funnel wrap (mobile) share the same white card surface. */
  body .fc-funnel-product-wrap .hpt-wrap {
    text-align: center;
    padding: 24px 18px 8px;
    background: #fff;
    margin: 0;
  }
  body .fc-funnel-product-wrap .hpt-gallery-block {
    background: #fff;
    margin-top: 0;
  }
  body .fc-funnel-product-wrap .hpt-title {
    font-family: "New York", "Iowan Old Style", "Apple Garamond", Cardo, Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 400;
    color: #121212;
    line-height: 1.2;
    margin: 0 0 10px;
  }
  /* heritage-results (Limited Edition / Coat of Arms funnel) uses 34px per
     Shopify mobile reference. Origins stays at 27px (already approved). */
  body.fc-funnel-with-header:not(.fc-funnel-origins) .fc-funnel-product-wrap .hpt-title {
    font-size: 34px !important;
  }
  body .fc-funnel-product-wrap .hpt-stars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0;
  }
  body .fc-funnel-product-wrap .hpt-stars {
    color: #C9A84C;
    font-size: 18px;
    letter-spacing: 1px;
  }
  body .fc-funnel-product-wrap .hpt-stars-label {
    font-family: "Besley", Georgia, "Times New Roman", serif;
    font-size: 14px;
    color: #121212;
    text-decoration: underline;
    cursor: pointer;
  }
  /* Hide the original WC product title AND the custom fc-home-featured__title
     + reviews block from the product mu-plugin (we render hpt-title + hpt-stars-row
     above the gallery instead — see .hpt-wrap). Also hide the .hg-badge (90-Day
     Satisfaction Guarantee) that lives inside the product card — the funnel page
     has its own guarantee section at the bottom, so the in-card one is redundant.
     Also hide section.related (WC's "You may also like" carousel) — funnels should
     not cross-sell other products. */
  body .fc-funnel-product-wrap .product_title,
  body .fc-funnel-product-wrap h1.entry-title,
  body .fc-funnel-product-wrap .product-title,
  body .fc-funnel-product-wrap .fc-home-featured__title,
  body .fc-funnel-product-wrap .fc-home-featured__reviews,
  body .fc-funnel-product-wrap .hg-badge,
  body .fc-funnel-product-wrap section.related,
  body .fc-funnel-product-wrap .related.products,
  /* In-card "Only X family spots left today!" pill from familycrests-product-
     content.php (only rendered for product 136). On the funnel we already
     show a top spots pill (.fc-funnel-spots) right below the price, so the
     in-card one is a duplicate. */
  body .fc-funnel-product-wrap .fc-spots,
  /* Section partial heritage-related-products.php renders a SECOND "You may
     also like" block OUTSIDE .fc-funnel-product-wrap. Hide it on funnel pages. */
  body.fc-funnel-with-header .fc-funnel-related-wrap,
  /* heritage-extra-content-origins.php / heritage-extra-content.php render a
     legacy .hx-faq-section that duplicates the .fc-faqs above (the .fc-faqs is
     the canonical one). Hide the legacy duplicate. */
  body.fc-funnel-with-header .hx-faq-section {
    display: none !important;
  }

  /* Sample note styling lives in page-heritage-funnel.php (::after pseudo on
     .woocommerce-product-gallery — origins variant via body.fc-funnel-origins). */

  /* ── Upsells (signet ring / banner / wood plaque) after the exclusive banner ──
     Render the 3 products on the same gray backdrop pattern as the main funnel
     product, but stripped of funnel-specific UI (frame selector, family-name
     inputs, sample note, spots/countdown, etc.) — these are just "add to cart"
     mini-PDPs, not the main commission product. */
  body.fc-funnel-with-header .fc-funnel-upsell-wrap {
    background: #f6f6f6;
    padding: 24px 24px;
    margin: 0 auto;
  }
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .product.type-product {
    background: #ffffff !important;
    padding: 24px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  /* Same gallery centering + thumbs strip as the main funnel product:
     273px square main image with FlexSlider fade crossfade + 54px thumbs row. */
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery {
    width: 273px !important;
    max-width: 273px !important;
    margin: 4px auto 16px !important;
    padding: 0 !important;
    position: static !important;
  }
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery__wrapper {
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 273px !important;
    aspect-ratio: 1 / 1;
    position: relative !important;
    transform: none !important;
  }
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery__image {
    max-width: 100% !important;
  }
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery__image > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 1px solid rgba(18, 18, 18, 0.08) !important;
    border-radius: 5px !important;
    background: transparent !important;
    overflow: hidden;
  }
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
  /* Thumbs row: 54×54 below the main image */
  html body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery .flex-control-nav,
  html body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 0 0;
    margin: 0;
    list-style: none;
    scrollbar-width: none;
  }
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .flex-control-thumbs::-webkit-scrollbar {
    display: none;
  }
  html body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
  }
  html body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 54px !important;
    height: 54px !important;
    object-fit: cover !important;
    border: 2px solid #DDE2EA !important;
    border-radius: 5px !important;
    cursor: pointer;
    transition: border-color 0.2s;
    display: block;
  }
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .flex-control-thumbs li img.flex-active {
    border-color: #112B3D;
  }
  /* Hide flex direction arrows */
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .flex-direction-nav,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .flex-prev,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .flex-next {
    display: none !important;
  }
  /* ADD TO CART button: same size + navy fill as ORDER NOW (the main funnel CTA).
     Inherits the base .fc-home-featured__btn style; we just need to ensure no
     accidental override is fighting it. */
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-home-featured__btn {
    background: #112B3D !important;
    color: #ffffff !important;
    border: 1.5px solid #112B3D !important;
  }
  /* Upsell title: keep the .fc-home-featured__title (no hpt-title override
     in this context) but center it. */
  html body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-home-featured__title {
    display: block !important;
    text-align: center !important;
  }
  /* Hide reviews row (★★★★★ + "1,089+ 5-star reviews") and the Sale pill
     on upsells per the funnel design. */
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-home-featured__reviews,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-home-featured__sale-pill {
    display: none !important;
  }
  /* Price row: match the main funnel product's spec — compare 28px Besley
     #BD1700 strikethrough, sale 36px Besley #121212, centered. */
  html body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-home-featured__compare {
    font-size: 28px !important;
  }
  html body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-home-featured__price {
    font-size: 36px !important;
  }
  html body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-home-featured__sale-row {
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* "View full details →" link below each ADD TO CART, linking to the upsell
     product's PDP. Injected by JS in functions.php right after the order btn. */
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-funnel-view-full {
    display: block;
    text-align: center;
    margin: 14px 0 0;
    font-family: 'Besley', Georgia, serif;
    font-size: 14px;
    color: #121212;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  /* Hide the funnel-specific UI bits that don't apply to upsells, plus the
     heavy marketing / FAQ / testimonial / rich-text content that ships with the
     standard product page render. Upsells stay slim: gallery + title + price +
     variants + ADD TO CART. */
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .hg-badge,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-spots,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-funnel-spots,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-funnel-cd,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-funnel-limited,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-extra-slots-wrap,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap section.related,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .related.products,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-marketing-sections,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-marketing-section,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-faqs,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-home-rich-text,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .testimonial-section-apolo,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-testimonials,
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .fc-accordion-product {
    display: none !important;
  }
  /* Upsell gallery: leave standard WC FlexSlider rendering. Use the same
     viewport breakout pattern so it stays consistent with the main product. */
  body.fc-funnel-with-header .fc-funnel-upsell-wrap .woocommerce-product-gallery {
    margin: 0 auto 16px !important;
  }
  /* Prices mobile — Shopify spec DevTools:
     - Compare (strikethrough rojo): 19.2px Besley #BD1700
     - Sale (negro): 24px Besley #121212 */
  html body.single-product .fc-home-featured__compare {
    font-size: 19.2px !important;
  }
  html body.single-product .fc-home-featured__price {
    font-size: 24px !important;
  }
  /* Funnel context: bigger prices per Shopify mobile reference DevTools
     (compare 28px Besley #BD1700, sale 36px Besley #121212) and hide the
     Sale pill — the strikethrough compare price already signals the discount. */
  html body .fc-funnel-product-wrap .fc-home-featured__compare {
    font-size: 28px !important;
  }
  html body .fc-funnel-product-wrap .fc-home-featured__price {
    font-size: 36px !important;
  }
  html body .fc-funnel-product-wrap .fc-home-featured__sale-pill {
    display: none !important;
  }
  /* Center the price row (parent flex was justify: normal = left-aligned,
     and width 580px was overflowing the 390px viewport). */
  html body .fc-funnel-product-wrap .fc-home-featured__sale-row {
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* The whole .summary / .fc-home-featured / .fc-home-featured__content is sized
     for the desktop 2-col layout (580px wide) — overflows the 390px mobile
     viewport. Force them to fit the funnel product card width. Also applies
     to the upsell cards (signet ring / banner / wood plaque). */
  html body .fc-funnel-product-wrap .summary,
  html body .fc-funnel-product-wrap .summary.entry-summary,
  html body .fc-funnel-product-wrap .fc-home-featured,
  html body .fc-funnel-product-wrap .fc-home-featured__content,
  html body .fc-funnel-upsell-wrap .summary,
  html body .fc-funnel-upsell-wrap .summary.entry-summary,
  html body .fc-funnel-upsell-wrap .fc-home-featured,
  html body .fc-funnel-upsell-wrap .fc-home-featured__content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Marketing sections (después de los 4 collapsibles) — left-aligned + full width */
  html body.single-product .fc-marketing-section,
  html body.single-product .fc-marketing-section *,
  html body.single-product .fc-marketing-heading,
  html body.fc-funnel-product-wrap .fc-marketing-section,
  html body.fc-funnel-product-wrap .fc-marketing-section *,
  html body.fc-funnel-product-wrap .fc-marketing-heading {
    text-align: left !important;
  }
  /* Wrapper padding lateral reducido para que el contenido ocupe más ancho.
     Break-out a full viewport (igual que la gallery). */
  html body.single-product .fc-marketing-sections,
  html body.fc-funnel-product-wrap .fc-marketing-sections {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* "You may also like" (related products) — horizontal scroll carousel en mobile,
     no grid single column. Misma técnica que home featured carousel. */
  html body.single-product .related.products ul.products,
  html body.single-product .related ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px !important;
    margin: 0 !important;
    gap: 0 !important;
    box-sizing: border-box;
  }
  html body.single-product .related.products ul.products::-webkit-scrollbar,
  html body.single-product .related ul.products::-webkit-scrollbar {
    display: none;
  }
  html body.single-product .related.products ul.products > li,
  html body.single-product .related ul.products > li {
    flex: 0 0 auto !important;
    width: 220px !important;
    max-width: 220px !important;
    margin: 0 12px 0 0 !important;
    scroll-snap-align: start;
  }
  html body.single-product .related.products ul.products > li:last-child,
  html body.single-product .related ul.products > li:last-child {
    margin-right: 16px !important;
  }

  /* "You may also like" heading — match Shopify spec mobile 32px Cardo */
  html body.single-product .related.products > h2,
  html body.single-product .related > h2 {
    font-family: Cardo, Georgia, serif !important;
    font-size: 32px !important;
    color: #121212 !important;
    margin: 32px 0 20px !important;
    padding: 0 16px !important;
    text-align: left !important;
  }

  /* "Our Customer Reviews" h2 — 30px serif #121212 weight 400, 318 wide.
     También override del <strong> interno que renderea 40px/700 por defecto. */
  html body.single-product .fc-rich-heading,
  html body.fc-funnel-product-wrap .fc-rich-heading,
  html body.single-product .fc-rich-heading strong,
  html body.single-product .fc-rich-heading b,
  html body.fc-funnel-product-wrap .fc-rich-heading strong,
  html body.fc-funnel-product-wrap .fc-rich-heading b {
    font-family: "New York", "Iowan Old Style", "Apple Garamond", Cardo, Georgia, "Times New Roman", serif !important;
    font-size: 30px !important;
    color: #121212 !important;
    font-weight: 400 !important;
  }
  html body.single-product .fc-rich-heading,
  html body.fc-funnel-product-wrap .fc-rich-heading {
    text-align: center !important;
    max-width: 318px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* "Listen To What Our Customers Are Saying:" h4 — 15px serif #121212 / line-height 19.5px */
  html body.single-product .fc-rich-sub,
  html body.fc-funnel-product-wrap .fc-rich-sub {
    font-family: "New York", "Iowan Old Style", "Apple Garamond", Cardo, Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    line-height: 19.5px !important;
    color: #121212 !important;
    font-weight: 400 !important;
    text-align: center !important;
    max-width: 318px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Container .fc-home-rich-text--trusted (parent del title + sub en reviews section)
     full viewport para que los 318px se centren con respecto al viewport completo.
     margin-top 0 para pegarlo al FAQs arriba. */
  html body.single-product .fc-home-rich-text--trusted,
  html body.fc-funnel-product-wrap .fc-home-rich-text--trusted {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    box-sizing: border-box;
  }

  /* Testimonial carousel reviews — match Shopify exact:
     - .carousel container con overflow: hidden
     - .carousel-inner con display: flex + transition: transform 0.5s
     - Cada .testimonial-card width: 100%; flex-shrink: 0
     - JS controla navigation via translateX(-index * 100%)
     - Swipe via touchstart/touchend events */
  html body.single-product .testimonial-section-apolo,
  html body.fc-funnel-product-wrap .testimonial-section-apolo {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 16px 16px 32px !important;
    box-sizing: border-box;
  }
  html body.single-product .testimonial-section-apolo .testimonial-container,
  html body.fc-funnel-product-wrap .testimonial-section-apolo .testimonial-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    height: auto !important;
    padding: 0 !important;
    position: relative;
  }
  html body.single-product .testimonial-section-apolo .carousel,
  html body.fc-funnel-product-wrap .testimonial-section-apolo .carousel {
    overflow: hidden !important;
    position: relative;
  }
  html body.single-product .testimonial-section-apolo .carousel-inner,
  html body.fc-funnel-product-wrap .testimonial-section-apolo .carousel-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    transition: transform 0.5s ease-in-out;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    scroll-snap-type: none !important;
  }
  html body.single-product .testimonial-section-apolo .testimonial-card,
  html body.fc-funnel-product-wrap .testimonial-section-apolo .testimonial-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    scroll-snap-align: none !important;
  }
  html body.single-product .woocommerce-product-gallery img,
  html body.single-product .woocommerce-product-gallery__image img,
  html body.single-product .woocommerce-product-gallery__image a img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  /* Product page main container — outer padding/width sane */
  html body.single-product .ast-container,
  html body.single-product .site-main,
  html body.single-product article.product,
  html body.single-product .product .summary,
  html body.single-product .product-summary-wrap,
  html body.single-product .fc-pdp-form,
  html body.single-product .fc-product-summary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Heading typography — no overflow */
  html body.single-product .product_title,
  html body.single-product .entry-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100% !important;
  }
  /* Form fields full width */
  html body.single-product input[type="text"],
  html body.single-product input[type="email"],
  html body.single-product textarea,
  html body.single-product select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ── N. Category archive (Our Collection) — match home width.
         Outer containers a 0 padding, ul a 16px (igual que home). */
  body.tax-product_cat.fc-collection-grid .site-content > .ast-container,
  body.tax-product_cat.fc-collection-grid .ast-woocommerce-container,
  body.tax-product_cat.fc-collection-grid .fc-our-collection-page,
  body.tax-product_cat.fc-collection-grid .site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.tax-product_cat.fc-collection-grid ul.products,
  body.tax-product_cat.fc-collection-grid .products {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.tax-product_cat .ast-article-single,
  body.post-type-archive-product .ast-article-single {
    padding: 0 !important;
  }
  /* Kill aspect-ratio 4/5 (Shopify Dawn portrait card) en mobile.
     Desktop sí usa 4:5, pero mobile single-col se ve mejor con imagen square natural.
     Override con specificity igual al rule original (body.fc-collection-grid). */
  body.fc-collection-grid ul.products li.product .astra-shop-thumbnail-wrap,
  body.fc-collection-grid ul.products li.product .woocommerce-loop-product__link,
  body.fc-collection-grid ul.products li.product .woocommerce-LoopProduct-link,
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
  body.woocommerce ul.products li.product .woocommerce-loop-product__link {
    aspect-ratio: auto !important;
    height: auto !important;
  }
  body.fc-collection-grid ul.products li.product .astra-shop-thumbnail-wrap img,
  body.fc-collection-grid ul.products li.product .woocommerce-loop-product__link img,
  body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
  body.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
  }
  /* Title pegado a la imagen — alta specificity para ganarle a Astra/fc-collection-grid */
  body.fc-collection-grid ul.products li.product .astra-shop-summary-wrap,
  body ul.products li.product .astra-shop-summary-wrap {
    margin-top: 4px !important;
    padding-top: 0 !important;
  }
  body.fc-collection-grid ul.products li.product .woocommerce-loop-product__title,
  body ul.products li.product .woocommerce-loop-product__title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  /* ── F. Astra header — kill doble padding (outer 16px + inner 16px = 32px desde edge).
         Shopify mobile: icons a 16px del edge, no a 32px. */
  .ast-builder-grid-row.ast-builder-grid-row-has-sides {
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: 0 !important;
    box-sizing: border-box;
  }

  /* ── G. "The Signet Ring" / "The Shield..." titles en mobile-promo — pushear
         hacia abajo para más espacio del top. Title + image + p quedan pegados (gap 0). */
  .fc-home-mobile-promo h2 {
    margin-top: 32px !important;
    margin-bottom: 0 !important;
  }
  .fc-home-mobile-promo img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* ── H. Body p de mobile-promo — Shopify spec: 350×62.39, Inter 13px #4D4D4D, margin 0 0 20px */
  .fc-home-mobile-promo p {
    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    color: #4D4D4D !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
  }

  /* ── I. "Our collection" wrapper + h2 + subtitle — Shopify spec:
         - wrapper: 390×76, margin 48px 0 25px (top push for breathing room from
           previous section), padding 0 16px
         - h2:       358×39, 30px serif #121212, margin 0 0 10px
         - p:        358×27, 15px Besley #121212BF */
  .fc-home-collection {
    margin: 48px 0 25px !important;
    padding: 0 16px !important;
  }
  .fc-home-collection__heading {
    font-size: 30px !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
  }
  .fc-home-collection__sub {
    font-size: 15px !important;
    line-height: 1.8 !important;  /* 15×1.8=27 (Shopify spec) */
  }

  /* ── J. FAQs section en mobile — full viewport width + title left-aligned */
  .fc-faqs {
    margin-top: 32px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
  }
  .fc-faqs-heading {
    text-align: left !important;
    font-weight: 400 !important;
    padding-left: 0 !important;
  }
  /* Funnel context (heritage-results / heritage-results-origins) overrides PDP:
     FAQs heading centered + bigger per Shopify mobile reference (50px New York). */
  html body.fc-funnel-with-header .fc-faqs-heading {
    text-align: center !important;
    font-size: 50px !important;
    font-weight: 400 !important;
    color: #121212 !important;
    margin: 0 0 24px !important;
    line-height: 1.15 !important;
  }
  /* Tighten the gap between .hg-section (90-Day) and .fc-faqs below it.
     Combined: kill the 32px margin-top on .fc-faqs, reduce its padding-top to
     12px, and trim the .hg-section padding-bottom from 36px to 12px on funnel
     mobile. End result: ~12px gap between the two sections. */
  html body.fc-funnel-with-header .fc-faqs {
    margin-top: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 16px !important;
  }
  html body.fc-funnel-with-header .hg-section {
    padding-bottom: 12px !important;
  }
  /* Tighten the gap between .fc-faqs (above) and the next .hx-cust-section
     containing "Join Thousands of Families" — was 28px top padding. */
  html body.fc-funnel-with-header .hx-cust-section {
    padding-top: 12px !important;
  }
  /* Funnel question (span inside summary): 13px New York #121212 */
  html body.fc-funnel-with-header .fc-accordion-faqs .fc-accordion-summary {
    font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", serif !important;
    font-size: 13px !important;
    color: #121212 !important;
    font-weight: 400 !important;
  }
  /* Funnel answer (open body): 13px Besley #121212 */
  html body.fc-funnel-with-header .fc-accordion-faqs .fc-accordion-body,
  html body.fc-funnel-with-header .fc-accordion-faqs .fc-accordion-body p {
    font-family: "Besley", Georgia, "Times New Roman", serif !important;
    font-size: 13px !important;
    color: #121212 !important;
    line-height: 1.5 !important;
  }
  /* FAQ accordion summary (question) — 15px serif #121212 (Shopify spec) */
  html body.single-product .fc-accordion-summary,
  html body.single-product .fc-accordion-product .fc-accordion-summary,
  html body.fc-funnel-product-wrap .fc-accordion-summary {
    font-family: "New York", "Iowan Old Style", "Apple Garamond", Cardo, Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    color: #121212 !important;
    font-weight: 400 !important;
  }
  /* FAQ accordion body (answer) — 15px Besley #121212BF (75% alpha) */
  html body.single-product .fc-accordion-body,
  html body.single-product .fc-accordion-body p,
  html body.single-product .fc-accordion-product .fc-accordion-body,
  html body.single-product .fc-accordion-product .fc-accordion-body p,
  html body.fc-funnel-product-wrap .fc-accordion-body,
  html body.fc-funnel-product-wrap .fc-accordion-body p {
    font-family: "Besley", Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    color: rgba(18, 18, 18, 0.75) !important;
    line-height: 1.6 !important;
  }

  /* ── L. Footer mobile — Shopify exact specs (DevTools 390 viewport).
         h2 "Sign up..." 24px serif center; input 45px navy bg; links 11px Besley alpha-75;
         disclaimer 15/12px Besley alpha-75 padding 20/18 */
  .fc-footer__newsletter-heading {
    text-align: center !important;
    margin: 0 0 20px !important;
    font-size: 24px !important;
  }
  .fc-footer__newsletter input,
  .fc-footer__newsletter input[type="email"],
  .fc-footer .fc-footer__newsletter-input {
    background: #112B3D !important;
    color: #FFFFFF !important;
    padding: 15px 50px 15px 15px !important;
    height: 45px !important;
    box-sizing: border-box;
  }
  /* Footer bottom (copyright + separators + links) — todo en alpha-75 */
  .fc-footer__bottom,
  .fc-footer__legal {
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: "Besley", Georgia, "Times New Roman", serif !important;
    font-size: 11px !important;
  }
  .fc-footer a[href*="privacy"],
  .fc-footer a[href*="refund"],
  .fc-footer a[href*="terms"],
  .fc-footer a[href*="contact"],
  .fc-footer .fc-footer__bottom a,
  .fc-footer__legal a,
  .fc-footer__bottom a {
    font-family: "Besley", Georgia, "Times New Roman", serif !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 6px 0 !important;
  }
  /* Disclaimer block */
  .fc-footer__disclaimer {
    padding: 20px 18px 0 !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }
  .fc-footer__disclaimer-title {
    font-family: "Besley", Georgia, serif !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }
  .fc-footer__disclaimer-body {
    font-family: "Besley", Georgia, serif !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 12px 0 !important;
    line-height: 1.5 !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   POLICY PAGES — typography specs Shopify (DevTools 390 viewport).
   Aplica a: /privacy-policy/, /refund-policy/, /terms-of-service/,
            /shipping-policy/, /data-sharing-opt-out/, /contact/
   --------------------------------------------------------------------------
   - h1 page-title:      30px serif #121212, margin 20px 0
   - h2 section:         20px serif #121212, margin 16.6px 0
   - h3/strong section:  17px serif #121212
   - p body:             15px Besley #121212BF, margin 15px 0
   - strong inline:      15px Besley #121212BF (match p)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pages target — usar body classes específicas */
body.page-id-3 .entry-content,         /* privacy-policy */
body.page-id-4 .entry-content,         /* refund-policy */
body.page-id-5 .entry-content,         /* terms-of-service */
body.page-id-6 .entry-content,         /* shipping-policy */
body.page-id-9 .entry-content,         /* data-sharing-opt-out */
body.page-template-page-track-order .entry-content,
body.page-id-2 .entry-content,         /* contact (track-order) */
body.page .entry-content[data-policy] {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 15px;
  color: rgba(18, 18, 18, 0.75);
  line-height: 1.6;
}

/* Pages with /policy/ or /service/ in URL — fallback target by URL via more general selector */
body[class*="privacy"] .entry-content p,
body[class*="refund"] .entry-content p,
body[class*="terms"] .entry-content p,
body[class*="shipping"] .entry-content p,
body[class*="data-sharing"] .entry-content p,
body[class*="contact"] .entry-content p,
body.privacy-policy .entry-content p,
body.refund-policy .entry-content p,
body.terms-of-service .entry-content p,
body.shipping-policy .entry-content p,
body.data-sharing-opt-out .entry-content p {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
  color: rgba(18, 18, 18, 0.75) !important;
  margin: 15px 0 !important;
  line-height: 1.6 !important;
}

/* Selector más general — todas las pages que no son home ni shop ni cart */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content {
  font-family: "Besley", Georgia, "Times New Roman", serif;
  font-size: 15px;
  color: rgba(18, 18, 18, 0.75);
}

/* Mobile: reducir padding lateral para que el texto ocupe más ancho */
@media (max-width: 749px) {
  body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .ast-container,
  body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .content-area,
  body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) #primary {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
}

html body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-header h1,
html body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-header .entry-title,
html body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) h1.entry-title,
html body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content h1 {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Cardo, Georgia, "Times New Roman", serif !important;
  font-size: 24px !important;
  color: #121212 !important;
  margin: 20px 0 !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content h2 {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Cardo, Georgia, "Times New Roman", serif !important;
  font-size: 17px !important;
  color: #121212 !important;
  margin: 16.6px 0 !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content h3,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content > strong:first-child,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content > p > strong:only-child {
  font-family: "New York", "Iowan Old Style", "Apple Garamond", Cardo, Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
  color: #121212 !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content p {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
  color: rgba(18, 18, 18, 0.75) !important;
  margin: 15px 0 !important;
  line-height: 1.6 !important;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content p strong {
  font-weight: 600;
  color: rgba(18, 18, 18, 0.75);
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content ul,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content ol {
  font-family: "Besley", Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
  color: rgba(18, 18, 18, 0.75) !important;
  line-height: 1.6 !important;
  padding-left: 1.5em;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.single-product) .entry-content li {
  margin: 6px 0;
}

/* ── Policy pages: mailto links inline en body text — match body text color
       en vez del azul default del browser. */
.entry-content a[href^="mailto:"] {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(18, 18, 18, 0.3);
  text-underline-offset: 2px;
}
.entry-content a[href^="mailto:"]:hover {
  text-decoration-color: rgba(18, 18, 18, 0.6);
}

/* ── Policy pages legal footer block (Business Name + Email)
       Wrapper sutil: gris, font 13px, border-top separator, padding-top espacio. */
.fc-policy-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 13px;
  color: rgba(18, 18, 18, 0.6);
  line-height: 1.6;
}
.fc-policy-legal p {
  margin: 0;
  font-size: 13px;
  color: rgba(18, 18, 18, 0.6);
}
.fc-policy-legal strong {
  font-weight: 600;
  color: rgba(18, 18, 18, 0.75);
}
.fc-policy-legal a {
  color: rgba(18, 18, 18, 0.75);
  text-decoration: underline;
}

/* ── Kill outline celeste punteado del browser default en TODOS los inputs/textareas
       al focus. Usar borde sólido navy/black en su lugar. Global. */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: 1px solid #112B3D !important;
  outline-offset: 0 !important;
  border-color: #112B3D !important;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0 !important;
}

/* ── Kill tap-highlight celeste en TODOS los botones / links cuando se aprietan
       en touch devices. Browsers mobile (iOS/Android) pintan un highlight celeste
       (rgba(0,0,255,0.4)) o gris (rgba(0,0,0,0.4)) por defecto al tap. Global. */
button,
a,
[role="button"],
input[type="submit"],
input[type="button"],
.button,
summary,
.fc-faqs button,
.fc-faqs summary {
  -webkit-tap-highlight-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT MOBILE — WFACP (WooFunnels Aero Checkout) responsive override.
   Defecto del plugin: .wfacp-left-panel display:grid con grid-template-columns
   hardcoded en "580px 480px" → forcing children 580px wide ignoring viewport.
   Forzamos single-column 1fr en mobile/tablet para fit dentro del viewport.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 989px) {
  /* CRITICAL: Kill el CSS Grid del plugin con display:block. WFACP usa grid con
     template-columns hardcoded en 580px+480px que no responsive a viewport.
     Convertir a block layout en mobile/tablet hace que children sean width:auto = 100% del parent. */
  html body.woocommerce-checkout .wfacp-left-panel,
  html body.woocommerce-checkout .wfacp-right-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
  html body.woocommerce-checkout .wfacp-section {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin-bottom: 24px;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Order-review + shipping tables — force fixed layout para que el contenido
     wrappee en lugar de empujar el width del table. */
  html body.woocommerce-checkout .wfacp_shipping_table,
  html body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table,
  html body.woocommerce-checkout .wfacp_order_summary table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box;
  }
  html body.woocommerce-checkout .wfacp_shipping_table td,
  html body.woocommerce-checkout .wfacp_shipping_table th,
  html body.woocommerce-checkout .shop_table td,
  html body.woocommerce-checkout .shop_table th {
    word-break: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }
  html body.woocommerce-checkout #shipping_method,
  html body.woocommerce-checkout .woocommerce-shipping-methods {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    margin: 0;
    list-style: none;
  }
  html body.woocommerce-checkout #shipping_method li,
  html body.woocommerce-checkout .wfacp_single_shipping_method {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  body.woocommerce-checkout .wfacp-main-container,
  body.woocommerce-checkout .wfacp-form-wrapper,
  body.woocommerce-checkout .wfacp-comm-form-detail,
  body.woocommerce-checkout .wfacp-section,
  body.woocommerce-checkout .wfacp-row,
  body.woocommerce-checkout .wfacp_order_summary,
  body.woocommerce-checkout .wfacp_order_summary_container,
  body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
  }
  body.woocommerce-checkout .wfacp-comm-form-detail {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
  }
  body.woocommerce-checkout .wfacp-row,
  body.woocommerce-checkout .wfacp-col-1,
  body.woocommerce-checkout .wfacp-col-2 {
    flex: 1 1 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.woocommerce-checkout .wfacp_order_summary {
    margin-top: 24px;
  }
  /* Tabla de order review — tabular fields force overflow */
  body.woocommerce-checkout .shop_table th,
  body.woocommerce-checkout .shop_table td {
    word-break: break-word;
  }
}

@media (max-width: 749px) {
  /* Prevent the page from horizontal-scrolling when the user swipes sideways.
     Stripe injects a hidden style-reference input (#wc-stripe-hidden-style-input)
     with position:absolute width:332px left:59px that extends 1px past the
     390px viewport. Direct fix: clip that single input to not contribute width. */
  html body.woocommerce-checkout #wc-stripe-hidden-style-input {
    left: 0 !important;
    width: 1px !important;
    max-width: 1px !important;
    pointer-events: none;
    visibility: hidden;
  }
  /* Mobile Safari/Chrome occasionally honor an inner element's overflow and
     allow horizontal swipe-pan even when body.scrollWidth equals viewport.
     Belt + braces: clip at html AND body so no future overflow leaks. */
  html.fc-checkout-no-h-scroll,
  body.woocommerce-checkout {
    overflow-x: clip !important;
    overflow-x: hidden !important;
  }
  body.woocommerce-checkout .wfacp-form-wrapper,
  body.woocommerce-checkout #wfacp-checkout-page,
  body.woocommerce-checkout .wfacp_main_form {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Inputs: full-width + 16px font-size para evitar zoom auto en iOS */
  body.woocommerce-checkout .wfacp-comm-form-detail input,
  body.woocommerce-checkout .wfacp-comm-form-detail select,
  body.woocommerce-checkout .wfacp-comm-form-detail textarea {
    width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }
  /* "Order summary" toggle — match Shopify mobile checkout spec.
     System font stack, 14px, #000. Text gets relabeled "Show Order
     Summary" → "Order summary" via JS (familycrests-checkout-mobile.js
     enqueued in functions.php). */
  html body.woocommerce-checkout .wfacp_show_icon_wrap,
  html body.woocommerce-checkout .wfacp_show_icon_wrap * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    color: #000000 !important;
  }
  /* Hide BOTH the shopping-cart SVG and the decorative IMG that WFACP injects
     by default. Shopify mobile uses just "Order summary ⌄" — text + chevron. */
  html body.woocommerce-checkout .wfacp_show_icon_wrap > svg,
  html body.woocommerce-checkout .wfacp_show_icon_wrap > img,
  html body.woocommerce-checkout .wfacp_hide_icon_wrap > svg,
  html body.woocommerce-checkout .wfacp_hide_icon_wrap > img {
    display: none !important;
  }
  /* Reset the wrap: kill the 25px left padding the plugin uses to make room
     for the now-hidden absolutely-positioned icon. */
  html body.woocommerce-checkout .wfacp_show_icon_wrap,
  html body.woocommerce-checkout .wfacp_hide_icon_wrap {
    padding-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body.woocommerce-checkout .wfacp_show_icon_wrap .wfacp_summary_link,
  html body.woocommerce-checkout .wfacp_hide_icon_wrap .wfacp_summary_link {
    padding-left: 0 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    gap: 6px !important;
  }
  /* Ensure the text span uses line-height 1 so the flex centering of img + text
     matches the text baseline center exactly (no 1-2px drift). */
  html body.woocommerce-checkout .wfacp_summary_link > span {
    line-height: 1 !important;
    display: inline-block;
  }
  /* WFACP injects the down-arrow chevron natively as an <img> inside the link
     (down-arrow.svg). Match Shopify spec: 10×10. Visual center of glyphs in
     a 14px line is ~1.5px above geometric center, so nudge the icon up to
     align with the optical baseline of the text. */
  html body.woocommerce-checkout .wfacp_summary_link > img {
    width: 10px !important;
    height: 10px !important;
    display: inline-block !important;
    align-self: center !important;
    transform: translateY(-3px);
    transition: transform .2s ease;
    flex-shrink: 0;
  }
  /* Accordion open → flip chevron upward (preserve the -3px Y offset). */
  html body.woocommerce-checkout .wfacp_mb_cart_accordian.wfacp_accordian_active .wfacp_summary_link > img {
    transform: translateY(-3px) rotate(180deg);
  }
  /* Reduce gaps + maximize input width to match Shopify mobile checkout spec.
     Per user-supplied DevTools (heritage-results checkout reference):
       - Order summary row: padding 7px 14px (390×63)
       - Each form section: padding 21px 14px (390×N)
     WFACP defaults to 38px lateral which wastes ~50px of input width. */
  html body.woocommerce-checkout .wfacp_mb_cart_accordian {
    /* Taller strip per Shopify mobile checkout reference (~58px tall, was 39px).
       Bumped vertical padding from 7px to 16px so the row sits at the same
       height as Shopify's. */
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    /* Center "Order summary ⌄" left and "$149.99" right both vertically and
       at row edges. */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* Flat full-width strip — kill curved corners and the redundant top border
       that stacked on top of the header's bottom-border. Header border-bottom
       is the dominant divider between header and the order summary row. */
    border-radius: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    /* Kill the mobile tap highlight (default is rgba(0,0,0,0.18) — celeste-ish
       flash when tapping). User reported that pressing the toggle painted it
       celeste. Transparent matches the rest of the site. */
    -webkit-tap-highlight-color: transparent !important;
  }
  html body.woocommerce-checkout .wfacp_mb_cart_accordian *,
  html body.woocommerce-checkout .wfacp_summary_link,
  html body.woocommerce-checkout .wfacp_summary_link * {
    -webkit-tap-highlight-color: transparent !important;
  }
  /* WFACP forces .wfacp_show_price_wrap to width: calc(100% - 195px) and adds
     padding-left: 25px — both push the price wrap away from the right edge.
     Reset so the price ($149.99) sits flush with the row's right padding. */
  html body.woocommerce-checkout .wfacp_show_price_wrap {
    width: auto !important;
    padding: 0 !important;
    text-align: right;
  }
  /* Price text "$149.99" — match Shopify mobile checkout spec:
     19px -apple-system / system stack, #000000. */
  html body.woocommerce-checkout .wfacp_show_price_wrap,
  html body.woocommerce-checkout .wfacp_show_price_wrap strong,
  html body.woocommerce-checkout .wfacp_show_price_wrap .woocommerce-Price-amount,
  html body.woocommerce-checkout .wfacp_show_price_wrap .woocommerce-Price-currencySymbol {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 19px !important;
    color: #000000 !important;
  }
  /* The accordion has class "clearfix" which injects ::before and ::after
     pseudos (display: table). When the parent is display: flex, those pseudos
     count as additional flex children — with justify-content: space-between
     they grab the edges and push wrap+price to the center. Hide them. */
  html body.woocommerce-checkout .wfacp_mb_cart_accordian::before,
  html body.woocommerce-checkout .wfacp_mb_cart_accordian::after {
    display: none !important;
  }
  /* Expanded mobile order summary cart items: hide redundant/editable UI.
     The quantity is already shown in the badge on top of the product image,
     so the "× N" suffix in the title, the qty stepper (- N +), and the X
     remove button are all redundant. The user instead opens "/cart/" via
     the "Edit cart" link (inserted via JS in familycrests-checkout-shopify). */
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .product-quantity,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .wfacp_qty_price_wrap,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .wfacp_product_quantity_number_field,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .wfacp_mini_cart_update_qty,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .wfacp_mini_cart_remove_item_from_cart,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content [class*="wfacp_qty"][class*="wrap"],
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .quantity {
    display: none !important;
  }
  /* Cart item TDs in the mobile summary have a default border-bottom: 1px
     solid #E5E5E5 — the gray dividing line between the product details and
     the Discount/Subtotal section. Remove it; the discount row pill provides
     enough visual separation. Same applies to the cart-subtotal TR which has
     a border-top creating a line right after the discount row. */
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .cart_item td,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content tr.cart-subtotal,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content tr.cart-subtotal td,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content tr.cart-subtotal th {
    border-bottom: 0 !important;
    border-top: 0 !important;
  }
  /* Cart item variation lines (Ring Size, Material, Framing, Family Name…)
     in the mobile order summary: match Shopify spec — 12px system font with
     color rgba(0,0,0,0.56). The default WFACP color (#666) was close but
     not exact; this matches the DevTools reference. */
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .variation,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .variation dt,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .variation dd,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .variation dd p,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .variation > * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.56) !important;
  }

  /* Mobile order summary totals (Subtotal / Shipping / Total labels + amounts)
     — WFACP has a generic "body #wfacp-e-form :not(i) { font-family: Montserrat }"
     rule that pisa todo dentro del form. Force system font with higher
     specificity (#wfacp-e-form .cart-subtotal *) + !important. */
  html body.woocommerce-checkout #wfacp-e-form .wfacp_mb_mini_cart_sec_accordion_content tr.cart-subtotal,
  html body.woocommerce-checkout #wfacp-e-form .wfacp_mb_mini_cart_sec_accordion_content tr.cart-subtotal *,
  html body.woocommerce-checkout #wfacp-e-form .wfacp_mb_mini_cart_sec_accordion_content tr.shipping,
  html body.woocommerce-checkout #wfacp-e-form .wfacp_mb_mini_cart_sec_accordion_content tr.shipping *,
  html body.woocommerce-checkout #wfacp-e-form .wfacp_mb_mini_cart_sec_accordion_content tr.order-total,
  html body.woocommerce-checkout #wfacp-e-form .wfacp_mb_mini_cart_sec_accordion_content tr.order-total * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  }

  /* "Enter shipping address" placeholder text per Shopify mobile spec:
     14px system font, color #0000008F (rgba(0,0,0,0.56)). Higher specificity
     than WFACP's "tr.shipping td *" rule (0,2,3) — chain extra classes.
     Also wrap the text — at 14px the string is 168px wide, but its parent TD
     is ~110px so it was overflowing past the viewport (causing horizontal
     scroll on swipe). Force display:block with normal wrapping. */
  html body.woocommerce-checkout tr.shipping td .fc-shipping-placeholder,
  html body.woocommerce-checkout tr.cart-shipping td .fc-shipping-placeholder,
  html body.woocommerce-checkout .wfacp_order_summary .fc-shipping-placeholder,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content .fc-shipping-placeholder,
  html body.woocommerce-checkout span.fc-shipping-placeholder {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    color: rgba(0, 0, 0, 0.56) !important;
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  /* Belt and braces — ensure the parent shipping TD itself clips */
  html body.woocommerce-checkout tr.shipping td,
  html body.woocommerce-checkout tr.shipping_total_fee td,
  html body.woocommerce-checkout tr.cart-shipping td {
    overflow-wrap: break-word !important;
    word-break: break-word;
  }
  /* The same flat-edge treatment for the expanded accordion content. The
     expanded panel uses a slightly LIGHTER gray (#FBFBFB) than the toggle
     strip (#F7F7F7) so the two regions feel related but distinct. */
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content,
  html body.woocommerce-checkout .wfacp_mb_mini_cart_wrap,
  html body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap {
    border-radius: 0 !important;
  }
  html body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion_content {
    background-color: #FBFBFB !important;
  }
  /* Higher specificity than WFACP's "body.woocommerce-checkout .wfacp-left-panel
     > .wfacp-section.step_0" rule (0,4,1) — adds html + extra class to win. */
  html body.woocommerce-checkout .wfacp-left-panel > .wfacp-section.step_0,
  html body.woocommerce-checkout .wfacp-left-panel > .wfacp-section.step_1,
  html body.woocommerce-checkout .wfacp-left-panel > .wfacp-section.wfacp_payment,
  html body.woocommerce-checkout .wfacp-section.wfacp-hg-by-box {
    padding-top: 21px !important;
    padding-bottom: 21px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* "Shipping method" heading lives in step_1, which sits below step_0 (the
     Contact + Delivery form). The default 21px+21px section paddings + extra
     internal margins make the gap above the heading ~86px — too much. Target
     ~32px (mirror Delivery→optin gap). Collapse step_0 bottom + step_1 top
     paddings + the .fc-save-info margin-bottom so only ~32px remain. */
  html body.woocommerce-checkout .wfacp-left-panel > .wfacp-section.step_0 {
    padding-bottom: 0 !important;
  }
  html body.woocommerce-checkout .wfacp-left-panel > .wfacp-section.step_1 {
    padding-top: 0 !important;
  }
  html body.woocommerce-checkout .fc-save-info {
    margin-bottom: 0 !important;
  }
  /* Neutralize the wfacp-row/form-row grid gutter on mobile — single-column
     layout doesn't need 8px gutters, and they were eating ~16px of input
     right-edge space (input ended at 360 instead of 376). */
  html body.woocommerce-checkout .wfacp-comm-form-detail .wfacp-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
  }
  html body.woocommerce-checkout .wfacp-comm-form-detail .form-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Tighten the gap between section title ("Contact" / "Delivery") and its
     first form-row. Default WFACP leaves ~48px of vertical space; Shopify
     mobile uses ~16px. We use a negative margin-top on .wfacp-comm-form-detail
     to compensate for the unaccounted internal padding (mix of flex pseudos
     + WFACP defaults that aren't easily zeroed). */
  html body.woocommerce-checkout .wfacp-comm-title {
    margin-bottom: 0 !important;
  }
  html body.woocommerce-checkout .wfacp-section .wfacp-comm-form-detail {
    margin-top: -34px !important;
    padding-top: 0 !important;
  }
  /* Neutralize first-row top spacing too — belt and braces. */
  html body.woocommerce-checkout .wfacp-comm-form-detail > .wfacp-row:first-child,
  html body.woocommerce-checkout .wfacp-comm-form-detail > .wfacp-row:first-child > .form-row:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Custom Shopify-style header: lateral padding 38px → 14px so logo + cart
     align with the form titles and form-input edges below. */
  html body.woocommerce-checkout .fc-shopify-header__inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Heritage funnel upsells — visibles SOLO en mobile.
   En desktop la pantalla es más amplia y los 4 productos extras distraen del
   CTA principal. En mobile aportan más browsing scroll = más conversión.
   Top-level (no anidado en otro @media) para evitar el bug de media query
   nesting que invalida la condición. */
@media (min-width: 750px) {
  body .fc-funnel-upsell-wrap { display: none !important; }
}