/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here...Remember to change the Version number above! */

/* ---- Royally Frugal design tokens ---- */
:root {
  --rf-pink: #E6007E;
  --rf-pink-soft: #FDE7F1;
  --rf-pink-band: #FBE3EE;
  --rf-ink: #15110E;
  --rf-muted: #726E6A;
  --rf-black: #141414;
  --rf-bg-soft: #F8F6F4;
  --rf-line: #ECE8E4;
}
body {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--rf-ink);
}
.rf-script { font-family: "Dancing Script", cursive; color: var(--rf-pink); font-weight: 700; }

/* Design-system tokens + base classes mirrored globally so the site-wide Themer
   header/footer render on-brand on pages that don't carry the DS (archives, cart, etc.). */
:root {
  --ds-color-primary: #E6007E;
  --ds-color-primary-dark: #C70069;
  --ds-color-pink-soft: #FDE7F1;
  --ds-color-pink-band: #FBE3EE;
  --ds-color-ink: #15110E;
  --ds-color-muted: #726E6A;
  --ds-color-black: #141414;
  --ds-color-surface: #FFFFFF;
  --ds-color-surface-soft: #F8F6F4;
  --ds-color-line: #ECE8E4;
  --ds-font-heading: "Montserrat", system-ui, sans-serif;
  --ds-font-body: "Montserrat", system-ui, sans-serif;
  --ds-font-script: "Dancing Script", cursive;
  --ds-weight-light: 300; --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700;
  --ds-text-xs: 11px; --ds-text-sm: 13px; --ds-text-base: 15px; --ds-text-lg: 18px; --ds-text-xl: 24px; --ds-text-2xl: 36px;
  --ds-space-xs: 6px; --ds-space-sm: 12px; --ds-space-md: 20px; --ds-space-lg: 32px; --ds-space-xl: 56px; --ds-space-section: 64px;
  --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-pill: 999px;
  --ds-width-container: min(92vw, 1600px); --ds-shadow-card: 0 6px 24px rgba(0,0,0,.06);
  --ds-line-tight: 1.2; --ds-line-base: 1.5; --ds-letter-wide: .12em; --ds-letter-xwide: .2em;
}
.bb-container { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-md); }
.bb-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ds-color-primary); color: #fff; border: 0; border-radius: var(--ds-radius-pill); padding: 14px 32px; font-weight: 700; letter-spacing: var(--ds-letter-wide); text-transform: uppercase; font-size: var(--ds-text-xs); cursor: pointer; }
.bb-btn:hover { background: var(--ds-color-primary-dark); color: #fff; }
.bb-script { font-family: var(--ds-font-script); color: var(--ds-color-primary); font-weight: 700; }
.bb-eyebrow { font-size: var(--ds-text-xs); letter-spacing: var(--ds-letter-xwide); text-transform: uppercase; color: var(--ds-color-muted); }
.bb-section-title { font-family: var(--ds-font-script); color: var(--ds-color-ink); font-size: var(--ds-text-2xl); font-weight: 700; text-align: center; }
.rf-pink { color: var(--rf-pink); }
.rf-btn-primary { background: var(--rf-pink); color: #fff; border-radius: 999px; }
.rf-btn-primary:hover { background: #c70069; color: #fff; }

/* The BB Theme content container defaults to ~1020px; widen it to the 1280 brand
   width so archives, single product, cart and checkout line up with the
   (1280) header, footer and homepage. Homepage is unaffected (it's a BB page
   using .bb-container, not the theme .container). */
.fl-page-content .container { width: auto; max-width: var(--ds-width-container); }

/* BB core gives every .fl-module a 20px margin; it lands on an inner
   .fl-module-content on normal modules, but the Themer header/footer ds-blocks have
   no .fl-module-content, so the 20px sat on the element itself, insetting them and
   misaligning them with the archive content. Zero it on just those two modules;
   the inner .bb-container still supplies the side gutter. */
.fl-module-ds-block.site-header,
.fl-module-ds-block.site-footer { margin: 0; }

/* ---- Royally Frugal product archives (category pages) ---- */
.rf-archive-hero { background: linear-gradient(120deg, var(--rf-pink-soft), #fff); }
.rf-archive-hero .bb-container,
.rf-archive-hero > div { max-width: var(--ds-width-container); margin: 0 auto; padding: 40px 20px; }
.rf-archive-hero .bb-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--rf-muted); margin: 0 0 6px; }
.rf-archive-hero h1 { font-size: 40px; font-weight: 300; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.rf-archive-hero h1 b { font-weight: 700; }
.rf-archive-hero__sub { margin: 0; color: var(--rf-muted); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }

.rf-shop { display: grid; grid-template-columns: 250px 1fr; gap: 34px; align-items: start; max-width: var(--ds-width-container); margin: 30px auto; padding: 0 20px; }
.rf-filters h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; }
.rf-facet { border-top: 1px solid var(--rf-line); padding: 14px 0; }
.rf-facet h4 { font-size: 13px; font-weight: 600; letter-spacing: .04em; margin: 0 0 10px; }
.rf-filters .facetwp-facet { margin: 0; }
.rf-results { min-width: 0; }

/* Product grid (WooCommerce native loop, RF styling) */
/* Let WooCommerce/theme render the product grid natively (4 cols via loop_shop_columns);
   we only style the cards. */
.rf-results ul.products { margin: 0; overflow: visible; }
.rf-results ul.products li.product { position: relative; text-align: left; }
.rf-results ul.products li.product img { border-radius: var(--rf-radius, 10px); margin: 0 auto 12px; }
/* wishlist heart on each card */
.rf-results ul.products li.product::before { content: ""; position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%2315110E' stroke-width='1.6'%3E%3Cpath d='M12 20s-7-4.4-9.3-8.8A5 5 0 0 1 12 6.5a5 5 0 0 1 9.3 4.7C19 15.6 12 20 12 20z'/%3E%3C/svg%3E") center/17px no-repeat; pointer-events: none; }
.rf-card-brand { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-ink); }
.rf-results ul.products li.product .woocommerce-loop-product__title { font-size: 13px; color: var(--rf-muted); padding: 0; margin: 2px 0 6px; font-weight: 400; }
.rf-results ul.products li.product .price { color: var(--rf-ink); font-weight: 700; font-size: 14px; }
.rf-results ul.products li.product .price del { color: var(--rf-muted); font-weight: 400; margin-right: 6px; }
.rf-results ul.products li.product .price ins { color: var(--rf-pink); text-decoration: none; }
.rf-results ul.products li.product .button,
.woocommerce .rf-results ul.products li.product a.button.add_to_cart_button { background: var(--rf-pink) !important; color: #fff !important; border-radius: 999px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.rf-results ul.products li.product:hover .button { opacity: 1; transform: none; }
.woocommerce-result-count { color: var(--rf-muted); font-size: 13px; }
.woocommerce-ordering select { border: 1px solid var(--rf-line); border-radius: 999px; padding: 8px 14px; }

/* Trust bar below archives */
.rf-trust { background: var(--rf-black); color: #fff; margin-top: 10px; }
.rf-trust__row { max-width: var(--ds-width-container); margin: 0 auto; padding: 22px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rf-trust__item { text-align: center; }
.rf-trust__item strong { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.rf-trust__item span { font-size: 11px; color: #bdbdbd; letter-spacing: .06em; }

/* Mobile "Filter & Sort" toggle button (hidden on desktop; shown when sidebar collapses). */
.rf-filter-toggle { display: none; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 4px; padding: 13px 18px; border: 1px solid var(--rf-line); border-radius: 999px; background: #fff; color: var(--rf-ink); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.rf-filter-toggle svg { flex: 0 0 auto; }

/* ---- Archive responsiveness ----
   WooCommerce renders the loop with floats, so below desktop we take the grid over
   explicitly (resetting the float widths) to get predictable, evenly spaced columns. */
/* Tablet and below: collapse the filter sidebar into the "Filter & Sort" dropdown
   and give the products the full width. WooCommerce renders the loop with floats,
   and forcing display:grid collapses the items, so we use flexbox with explicit
   column widths (reliable with the float-based markup). */
@media (max-width: 1024px) {
  .rf-shop { grid-template-columns: 1fr; }
  .rf-filter-toggle { display: flex; }
  .rf-filters { display: none; border: 1px solid var(--rf-line); border-radius: 12px; padding: 16px; margin-bottom: 6px; }
  .rf-shop.filters-open .rf-filters { display: block; }
  .rf-shop.filters-open .rf-filter-toggle { background: var(--rf-pink); color: #fff; border-color: var(--rf-pink); }
  .rf-results ul.products { display: flex !important; flex-wrap: wrap !important; gap: 26px 16px !important; }
  .rf-results ul.products::before, .rf-results ul.products::after { content: none !important; display: none !important; }
  /* high-specificity selector to beat the theme skin's ".columns-4 ... {width:22.05%!important}" */
  .rf-shop .rf-results .facetwp-template ul.products.columns-4 li.product { float: none !important; margin: 0 !important; width: calc((100% - 32px) / 3) !important; }
  .rf-results ul.products li.product .button { opacity: 1; transform: none; }
}
@media (max-width: 768px) {
  .rf-shop .rf-results .facetwp-template ul.products.columns-4 li.product { width: calc((100% - 16px) / 2) !important; }
}
@media (max-width: 640px) { .rf-trust__row { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 480px) {
  .rf-results ul.products { gap: 16px 12px; }
  .rf-archive-hero { }
  .rf-archive-hero h1 { font-size: 30px; }
}

/* ---- WooCommerce buttons + badges on-brand (single product, cart, checkout) ---- */
/* The BB theme colours Woo buttons with its accent (blue); override to RF pink pills.
   Archive add-to-cart keeps its own !important rule, so it is unaffected. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .woocommerce-form-login__submit,
.woocommerce .woocommerce-form-register__submit {
  background: var(--rf-pink) !important;
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: 12px;
  padding: 13px 30px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--rf-pink-dark, #c70069);
  color: #fff;
}
/* ---- Replace the BB theme's blue link/accent (#2B7BB9) with RF brand colours ----
   On non-DS pages (archives, cart, account, etc.) links fall back to the theme's
   blue; this is why the archive nav was blue while the DS homepage nav is dark. */
.site-header .rf-nav a { color: var(--rf-ink); }
.rf-results ul.products li.product a { color: var(--rf-ink); }
.woocommerce-breadcrumb a { color: var(--rf-muted) !important; }
.woocommerce-breadcrumb a:hover { color: var(--rf-pink) !important; }
/* generic content links on theme/woo pages (excludes anything styled as a button) */
.fl-post-content a:not([class*="button"]),
.wc-block-components-product-name,
td.product-name a { color: var(--rf-ink); }
.fl-post-content a:not([class*="button"]):hover,
.wc-block-components-product-name:hover,
td.product-name a:hover { color: var(--rf-pink); }
/* FacetWP "see more" toggle + slider Reset button -> brand */
.facetwp-facet .facetwp-toggle { color: var(--rf-pink); }
.facetwp-facet .facetwp-toggle:hover { color: var(--rf-pink); text-decoration: underline; }
.facetwp-slider-reset { background: var(--rf-pink) !important; border: 0 !important; color: #fff !important; border-radius: 999px !important; }

/* Cart/checkout blocks render "alignwide" and break out to the left of the page
   title; pull them back into the content column so the heading lines up with the body. */
.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: auto !important;
}

/* Sale badge: pink pill instead of the theme's blue square (single + archives).
   Broadened to plain span.onsale because the custom archive loop has no .woocommerce ancestor. */
span.onsale,
.woocommerce span.onsale {
  background: var(--rf-pink) !important;
  color: #fff !important;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-height: 0;
  line-height: 1;
  padding: 7px 12px;
}
/* Quantity stepper + single price to match */
.woocommerce .quantity input.qty { border: 1px solid var(--rf-line); border-radius: 999px; padding: 10px 8px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--rf-ink); font-weight: 700; }
.woocommerce div.product p.price del,
.woocommerce div.product span.price del { color: var(--rf-muted); font-weight: 400; }
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { color: var(--rf-pink); text-decoration: none; }

/* ---- Homepage Featured Finds image fix ---- */
/* .ff-card__img is a <span> (inline), so its aspect-ratio was ignored and the
   placeholder image sized itself tall/oversized (worse once the layout widened).
   Make it a block so the ratio governs, giving a clean, consistent card image. */
.featured-finds .ff-card__img {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--ds-radius-md, 12px);
}
.featured-finds .ff-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================================
   RESPONSIVE / MOBILE
   Beaver Builder's AI build STRIPS every @media query out of page + Themer
   @section CSS and scopes the rest under ".fl-node-<id> ...", so all the
   breakpoints written inline are lost. We re-declare them here in the child
   theme (which BB never processes). !important is needed to beat BB's higher
   specificity node-scoped base rules (e.g. ".fl-node-x .site-header .rf-nav").
   ========================================================================= */

/* ---- Homepage: category grid ---- (base = 4 across) */
@media (max-width: 1024px) { .category-grid__grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px)  { .category-grid__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } }

/* ---- Homepage: Featured Finds ---- (base = 6 across) */
@media (max-width: 1200px) { .featured-finds__row { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 768px)  { .featured-finds__row { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 520px)  { .featured-finds__row { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } }

/* ---- Homepage: hero + community + trust ---- */
@media (max-width: 640px) {
  .hero__title { font-size: 34px !important; }
  .hero__title .bb-script { font-size: 38px !important; }
  .hero__kicker { font-size: 24px !important; }
  .community__inner { grid-template-columns: 1fr !important; text-align: center !important; gap: 20px !important; }
  .community__fields { margin: 0 auto !important; }
  .socials { justify-content: center !important; }
  .trust__row { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* Search button: kill the theme's inherited button padding so the (grid-centered)
   magnifying glass sits dead-centre in the circle. */
.site-header .rf-search button { padding: 0 !important; }

/* ---- Mobile hamburger toggle (hidden on desktop; animates to an X when open) ---- */
.site-header .rf-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 9px; border: 0; background: transparent; cursor: pointer; order: 2; }
.site-header .rf-nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ds-color-ink, #15110E); transition: transform .2s ease, opacity .2s ease; }
.site-header.nav-open .rf-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .rf-nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .rf-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Header: mobile layout ---- (desktop grid = logo | search | actions) */
@media (max-width: 900px) {
  /* logo takes the left, actions sit flush to the right gutter, search is its own row */
  .site-header .header-grid { grid-template-columns: 1fr auto !important; row-gap: 12px !important; column-gap: 12px !important; }
  .site-header .rf-search { grid-column: 1 / -1 !important; grid-row: 2 !important; max-width: none !important; }
  .site-header .rf-actions { gap: 14px !important; align-items: center !important; justify-self: end !important; justify-content: flex-end !important; }
  /* logo flush to the left gutter (its box stretches across the 1fr column) */
  .site-header .rf-logo { align-items: flex-start !important; justify-self: start !important; }
  /* nudge the hamburger flush to the content edge */
  .site-header .rf-nav-toggle { padding-right: 0 !important; margin-right: -2px; }
  .site-header .rf-nav-toggle { display: flex !important; }
  /* dept nav collapses behind the hamburger as a stacked dropdown */
  .site-header .rf-nav { display: none !important; border-top: 1px solid var(--rf-line) !important; }
  .site-header.nav-open .rf-nav { display: block !important; }
  .site-header .rf-nav ul { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 !important; overflow: visible !important; padding: 4px 0 !important; }
  .site-header .rf-nav li { width: 100% !important; }
  .site-header .rf-nav li + li { border-top: 1px solid var(--rf-line) !important; }
  .site-header .rf-nav a { display: block !important; padding: 14px 4px !important; white-space: nowrap; border-bottom: 0 !important; }
}
@media (max-width: 380px) {
  /* hide the icon captions on very small phones so the hamburger + icons fit one row */
  .site-header .rf-actions a { font-size: 0 !important; gap: 0 !important; }
}
@media (max-width: 600px) {
  .site-header .util__right { display: none !important; }
  .site-header .util__inner { justify-content: center !important; }
  .site-header .rf-logo__img { height: 42px !important; }
}

/* ---- Mobile side gutters: use the full width with a tidy 16px gutter ---- */
@media (max-width: 600px) {
  :root { --ds-width-container: 100%; }
  .bb-container { padding-left: 16px !important; padding-right: 16px !important; }
  .rf-archive-hero > div, .rf-shop, .rf-trust__row { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- Single product: compact spec under the price (replaces the Additional info tab) ---- */
.woocommerce div.product .rf-spec { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; align-items: baseline; max-width: 380px; margin: 14px 0 18px; padding: 12px 0; border-top: 1px solid var(--rf-line); border-bottom: 1px solid var(--rf-line); }
.woocommerce div.product .rf-spec dt { margin: 0; color: var(--rf-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.woocommerce div.product .rf-spec dd { margin: 0; color: var(--rf-ink); font-weight: 600; font-size: 13px; }