/* =========================================================
   Falcon Offers — front end
   Layout only. Every colour and text size comes from a
   variable set by the styling tab, which defaults to the
   theme palette. Nothing here restates a value the theme
   already decides.
   ========================================================= */

/* ---------------------------------------------------------
   Badges and labels
   --------------------------------------------------------- */

.woocommerce ul.products li.product,
.woocommerce div.product div.images,
.woocommerce-product-gallery {
  position: relative;
}

.fo-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Above hover-swap second images, which themes commonly stack at 1-9:
     the badge showing for a second and then sliding under the hover image
     was exactly this number being too low. */
  z-index: 20;
}

/* Wrapper used when badges ride along with the image markup itself
   (page-builder cards that skip the WooCommerce loop hooks). */
.fo-thumb-wrap {
  position: relative;
  display: block;
  line-height: 0;
}
.fo-thumb-wrap img { line-height: normal; }

/* Applied by the painter to an image's existing container when it has no
   positioning of its own — the image itself is never moved. */
.fo-badge-holder { position: relative; }

/* The sale circle delivered through the wrapper positions against the badge
   layer, so it sits on the image whatever markup the theme's cards use. */
.fo-badges .fo-sale-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

.fo-stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 70%;
}

.fo-stack--tl { top: 10px; left: 10px; align-items: flex-start; }
.fo-stack--tr { top: 10px; right: 10px; align-items: flex-end; }
.fo-stack--bl { bottom: 10px; left: 10px; align-items: flex-start; flex-direction: column-reverse; }
.fo-stack--br { bottom: 10px; right: 10px; align-items: flex-end; flex-direction: column-reverse; }

.fo-badge {
  display: inline-block;
  padding: var(--fo-badge-pad-y, 5px) var(--fo-badge-pad-x, 10px);
  /* Solid fallbacks, never currentColor: a palette slot that fails to
     resolve must degrade to a readable badge, not a white-on-white box. */
  background: var(--fo-badge-bg, #b3122e);
  color: var(--fo-badge-color, #fff);
  border-radius: var(--fo-badge-radius, 3px);
  font-size: var(--fo-badge-size, 12px);
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  pointer-events: auto;
}

.fo-label { white-space: normal; }

/* The migrated sale badge. Size, colour and the two font sizes come from the
   styling tab (with the original values as fallbacks); geometry is unchanged. */
.falcon-badge.fo-sale-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--fo-sale-size, 78px);
  height: var(--fo-sale-size, 78px);
  padding: 0;
  line-height: 1.05;
  border-radius: 50%;
  box-sizing: border-box;
  transform: rotate(-15deg);
}

.fo-sale-badge .falcon-badge-num {
  display: block;
  font-size: var(--fo-sale-num, 24px);
  font-weight: 800;
  line-height: 1.05;
}

.fo-sale-badge .falcon-badge-off {
  display: block;
  font-size: var(--fo-sale-off, 15px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.05;
}

/* Archive cards use a smaller circle on desktop. */
.fusion-post-cards .falcon-badge.fo-sale-badge,
.woocommerce ul.products li.product .falcon-badge.fo-sale-badge {
  width: 48px;
  height: 48px;
}

.fusion-post-cards .fo-sale-badge .falcon-badge-num,
.woocommerce ul.products li.product .fo-sale-badge .falcon-badge-num { font-size: 15px; }

.fusion-post-cards .fo-sale-badge .falcon-badge-off,
.woocommerce ul.products li.product .fo-sale-badge .falcon-badge-off { font-size: 9px; letter-spacing: .04em; }

/* Category tile. */
.fo-cat-sale {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.fo-cat-sale .falcon-badge-num { font-size: 20px; }
.fo-cat-sale .falcon-badge-off { font-size: 13px; }

/* ---------------------------------------------------------
   Offer box on the product page
   --------------------------------------------------------- */

.fo-box {
  margin: 14px 0 20px;
  padding: 14px 16px;
  background: var(--fo-box-bg, transparent);
  border: 1px solid var(--fo-box-border, currentColor);
  color: var(--fo-box-text, inherit);
  text-align: center;
}

.fo-box__msg {
  margin: 0;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   Category banner
   --------------------------------------------------------- */

.fo-banner {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: var(--fo-banner-bg, transparent);
  color: var(--fo-banner-text, inherit);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}

.fo-banner__msg { margin: 0; }


/* Type C heading below the banner. */
.fo-cheading {
  margin: 0 0 18px;
  text-align: center;
}

.fo-cheading__msg { margin: 0 0 4px; }
.fo-cheading__cats { margin: 0; }

/* ---------------------------------------------------------
   Basket and checkout
   --------------------------------------------------------- */

.fo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--fo-box-bg, transparent);
  border: 1px solid var(--fo-box-border, currentColor);
  color: var(--fo-box-text, inherit);
  text-align: center;
}


.fo-line-note {
  display: block;
  margin-top: 4px;
  font-size: .85em;
  opacity: .85;
}

/* ---------------------------------------------------------
   Free gift cards at the bottom of the basket
   --------------------------------------------------------- */

.fo-gifts { margin: 28px 0; }

.fo-gifts__title {
  margin: 0 0 14px;
  text-align: center;
}

.fo-gifts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-gifts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--fo-box-border, currentColor);
  text-align: center;
}

.fo-gifts__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.fo-gifts__name { font-weight: 500; }

.fo-gifts__choose[disabled] { opacity: .6; cursor: default; }

/* ---------------------------------------------------------
   Phones
   --------------------------------------------------------- */

@media only screen and (max-width: 800px) {

  /* Flat on phones — the rotation is desktop only. The phone sizes apply
     everywhere the badge appears, product page included, so "Sale badge
     size on phones" is a single lever. Blank inherits the desktop size. */
  .falcon-badge.fo-sale-badge {
    transform: none;
    width: var(--fo-sale-size-m, var(--fo-sale-size, 78px));
    height: var(--fo-sale-size-m, var(--fo-sale-size, 78px));
  }

  .fo-sale-badge .falcon-badge-num { font-size: var(--fo-sale-num-m, var(--fo-sale-num, 24px)); }
  .fo-sale-badge .falcon-badge-off { font-size: var(--fo-sale-off-m, var(--fo-sale-off, 15px)); }

  /* Archive cards use the Styling tab's diameter on phones, same as the
     product page. The defensive !important values here existed only to
     survive falcon.css's legacy badge rules; that stylesheet is pruned
     now, so the size lives in one place — Styling → "Sale badge size".
     1.6.22. */
  .fusion-post-cards .falcon-badge.fo-sale-badge,
  .woocommerce ul.products li.product .falcon-badge.fo-sale-badge {
    width: var(--fo-sale-size-m, var(--fo-sale-size, 78px));
    height: var(--fo-sale-size-m, var(--fo-sale-size, 78px));
  }

  .fusion-post-cards .fo-sale-badge .falcon-badge-num,
  .woocommerce ul.products li.product .fo-sale-badge .falcon-badge-num { font-size: var(--fo-sale-num-m, var(--fo-sale-num, 24px)); }

  .fusion-post-cards .fo-sale-badge .falcon-badge-off,
  .woocommerce ul.products li.product .fo-sale-badge .falcon-badge-off { font-size: var(--fo-sale-off-m, var(--fo-sale-off, 15px)); }

  .fo-badge {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* A stack never grows tall enough to cover the design: past the
     third label the rest drop rather than the stack shrinking. */
  .fo-stack > .fo-badge:nth-child(n + 4) { display: none; }

  .fo-banner {
    flex-direction: column;
    gap: 12px;
  }

  .fo-strip {
    flex-direction: column;
    gap: 10px;
  }


  .fo-gifts__list { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Category tiles — offer badge
   Works with the [product_categories] shortcode as well as
   ordinary category listings.
   --------------------------------------------------------- */

.woocommerce ul.products li.product-category a { position: relative; }

.fo-cat-offer {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  max-width: 70%;
  text-align: right;
  pointer-events: none;
}

.fo-cat-offer .fo-badge { white-space: normal; }

@media only screen and (max-width: 800px) {
  .fo-cat-offer {
    top: 8px;
    right: 8px;
    max-width: 78%;
  }
}

/* ---------- per-type badge colours (v1.6.1) ---------- */

/* The percentage circle (Type A) — palette slot with hard fallback. */
.falcon-badge.fo-sale-badge {
  background: var(--fo-sale-bg, var(--fo-badge-bg, #ec3013));
  color: var(--fo-sale-color, var(--fo-badge-color, #ffffff));
}

/* Basket-computed offer badges take their type's colour. */
.fo-badge--type-b { background: var(--fo-badge-bg-b, #ffa42d); }
.fo-badge--type-c { background: var(--fo-badge-bg-c, #04142b); }
.fo-badge--type-d { background: var(--fo-badge-bg-d, #003984); }

/* Labels: own colour set and per-context sizes. */
.fo-label {
  background: var(--fo-label-bg, #003984);
  color: var(--fo-label-color, #ffffff);
  font-size: var(--fo-label-size, 16px);
}
.single-product .fo-label,
.woocommerce-product-gallery .fo-label {
  font-size: var(--fo-label-size-p, 18px);
}

@media (max-width: 800px) {
  .fo-badge { font-size: var(--fo-badge-size-m, 12px); }
  .fo-label { font-size: var(--fo-label-size-m, 12px); }
}

/* ---------- 1.6.4 ---------- */

/* Product-page badges anchor to the gallery frame; match the sale circle's
   breathing room so labels never sit flush on the image edge. */
.woocommerce-product-gallery .fo-stack--tl { top: 15px; left: 15px; }
.woocommerce-product-gallery .fo-stack--tr { top: 15px; right: 15px; }
.woocommerce-product-gallery .fo-stack--bl { bottom: 15px; left: 15px; }
.woocommerce-product-gallery .fo-stack--br { bottom: 15px; right: 15px; }

/* Belt-and-braces: nothing of ours inside header carts and drawers, ever. */
.widget_shopping_cart .fo-badges,
.widget_shopping_cart .fo-sale-badge,
.fusion-menu-cart-items .fo-badges,
.fusion-menu-cart-items .fo-sale-badge,
.fusion-flyout-cart-wrapper .fo-badges,
.awb-off-canvas .fo-badges,
.awb-off-canvas .fo-sale-badge {
  display: none !important;
}

/* ---------- 1.6.5 : Avada grid placement ----------
   Avada draws its own sale badge (Global Options) and leaves an empty
   `.onsale` slot on each card, bypassing `woocommerce_sale_flash`, so the
   plugin paints its own badge on the card. The overlay is placed INSIDE
   Avada's crossfade image box, above the hover-swap image: the hover image
   is white-backed and rides a stacking layer above the outer image frame,
   so a frame-level overlay renders but is hidden behind it. Anchoring inside
   the image box, with a z-index above the crossfade, keeps the badge on top.
   Nothing here changes a colour or size the theme already decides. */
.crossfade-images,
.featured-image,
.flex-viewport,
.fusion-classic-product-image-wrapper,
.fusion-woo-product-image,
.fusion-post-card-image {
  position: relative;
}

/* The overlay spans the image box and sits above Avada's crossfade layer.
   The high z-index matches the layer Avada's own badge rides on, so ours is
   never covered by the hover image. On the product page the flexslider
   viewport is a fixed box sized to the main image, so the badge sits in the
   image corners and never rides the sliding track. */
.crossfade-images > .fo-badges,
.featured-image > .fo-badges,
.flex-viewport > .fo-badges,
.woocommerce-product-gallery__image > .fo-badges,
.fusion-classic-product-image-wrapper > .fo-badges,
.fusion-woo-product-image > .fo-badges,
.fusion-post-card-image > .fo-badges {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* Once our badge is on the card, Avada's empty `.onsale` marker goes, so a
   bare coloured dot never shows through beside it. */
.fusion-classic-product-image-wrapper .onsale:not(.fo-sale-badge),
.fusion-woo-product-image .onsale:not(.fo-sale-badge),
.fusion-post-card-image .onsale:not(.fo-sale-badge) {
  display: none !important;
}


/* ---------------------------------------------------------
   Deal box — [fo_deal_box]
   The complete offer box for a page layout: icon, lead value
   and sentence, in one element that renders only when an
   offer covers the design. Colours follow the styling tab;
   the accent falls back to each type's badge colour so the
   box and its badge match. 1.6.22.
   --------------------------------------------------------- */

.fo-deal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 16px;
  border: 1px solid var(--fo-box-border, #e8ddc7);
  border-radius: 4px;
  background: var(--fo-box-bg, #fdf8ee);
  color: var(--fo-box-text, #6b5432);
}

.fo-deal__icon {
  flex: 0 0 auto;
  width: var(--fo-deal-icon, 26px);
  height: var(--fo-deal-icon, 26px);
  color: var(--fo-deal-accent, var(--fo-box-accent, #c98a1b));
}

.fo-deal__lead {
  font-size: var(--fo-deal-lead, 30px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--fo-deal-accent, var(--fo-box-accent, #c98a1b));
}

.fo-deal__text { font-size: var(--fo-deal-text, 18px); line-height: 1.35; }
.fo-deal__text strong { color: var(--fo-box-text, #4a3a1f); }

/* Per-type accent: the box picks up its own badge colour. */
.fo-deal--b      { --fo-deal-accent: var(--fo-badge-bg-b, #003984); }
.fo-deal--c,
.fo-deal--c-free { --fo-deal-accent: var(--fo-badge-bg-c, #003984); }
.fo-deal--d      { --fo-deal-accent: var(--fo-badge-bg-d, #b3122e); }
.fo-deal--f      { --fo-deal-accent: var(--fo-badge-bg-f, var(--fo-f-accent, #8b3fd6)); }

/* Category links inside the sentence. */
.fo-deal .fo-sc__cat {
  color: var(--fo-deal-accent, var(--fo-box-accent, #c98a1b));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

@media only screen and (max-width: 800px) {
  .fo-deal { padding: 10px 12px; gap: 8px; flex-wrap: wrap; text-align: center; }
  .fo-deal__icon { width: var(--fo-deal-icon-m, 17px); height: var(--fo-deal-icon-m, 17px); }
  .fo-deal__lead { font-size: var(--fo-deal-lead-m, 21px); }
  .fo-deal__text { font-size: var(--fo-deal-text-m, 12.5px); }
}

/* =========================================================
   My Account is a badge-free zone (1.6.17). Order rows, the
   downloads table and the dashboard show designs the customer
   already owns; any badge or label that reaches them — cached
   markup included — is hidden here as a final backstop. The
   body class only exists on My Account pages, so grids and
   product pages are untouched.
   ========================================================= */
.woocommerce-account .fo-badges,
.woocommerce-account .fo-sale-badge,
.woocommerce-account .fo-thumb-wrap .fo-badges { display: none !important; }

/* =========================================================
   Type F — spend & save (1.7.0)
   One accent themes the card badge, the product message, the
   banner and the cart bar. It follows an Avada palette slot
   with a hard fallback, like the other type colours.
   ========================================================= */
:root {
  --fo-f-accent: var(--fo-badge-bg-f, #1f7a4d);
}

/* Card badge: the "up to X% off" ceiling flag. Colours come from the Styling
   tab (Spend & save badge background / text); the accent themes the banner and
   the cart bar. */
.fo-badge--type-f,
.fo-badge--spend-save { background: var(--fo-badge-bg-f, var(--fo-f-accent)); color: var(--fo-badge-color-f, #fff); }

/* Product-page spend & save message. */
.fo-sc--spend-save {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  color: var(--fo-box-text, inherit);
}
.fo-sc--spend-save .fo-deal__icon {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  color: var(--fo-f-accent);
}
.fo-sc--spend-save .fo-sc__msg { line-height: 1.4; }

/* Cart applied line + progress bar. */
.fo-strip--spend {
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  border-color: var(--fo-f-accent);
}
.fo-spend-row td { padding: 12px 0; }
.fo-spend-bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .12);
  overflow: hidden;
}
.fo-spend-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: inherit;
  background: var(--fo-f-accent);
  transition: width .3s ease;
}

/* Docs tab token table spacing. */
.fo-docs__example {
  border-left: 3px solid var(--fo-f-accent, #1f7a4d);
  padding: 2px 14px;
  margin: 12px 0;
  background: rgba(0, 0, 0, .02);
}
.fo-docs__example-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
  opacity: .7;
  margin: 6px 0 2px;
}
.fo-docs__tokens { max-width: 720px; margin: 8px 0 16px; }
.fo-docs__tokens code { white-space: nowrap; }

/* =========================================================
   Category links inside offer messages and banners (1.7.9)
   Colour + hover come from the Styling tab.
   ========================================================= */
.fo-sc__cat,
.fo-box__msg a,
.fo-banner__cat {
  color: var(--fo-cat-link, #003984);
  text-decoration: underline;
  transition: color .15s ease;
}
.fo-sc__cat:hover,
.fo-sc__cat:focus,
.fo-box__msg a:hover,
.fo-box__msg a:focus,
.fo-banner__cat:hover,
.fo-banner__cat:focus {
  color: var(--fo-cat-link-hover, #ffa42d);
}