/*
 * DBF PROMOS — Frontend CSS
 * Reference design: promo-reference.html / promo-reference.css
 *
 * CSS custom properties let you tune the ribbon from the theme without
 * touching this file. Override in your theme's style.css or child theme:
 *
 *   :root {
 *     --ribbon-scale: 1.20;
 *     --ribbon-corner-distance: 8px;
 *   }
 */

/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --ch-red:           #870000;
  --ch-red-2x1:       #870000;
  --ch-black:         #1d1d1b;
  --ch-gold:          #b08b3c;
  --ch-gold-bg:       #f4ead1;

  /* Ribbon geometry – adjust these two to change size and position */
  --ribbon-scale:             1.17;
  --ribbon-corner-distance:   12px;

  /* Base ribbon geometry – normally no need to touch */
  --ribbon-corner-size:       190px;
  --ribbon-width:             250px;
  --ribbon-height:            36px;
  --ribbon-top-base:          24px;
  --ribbon-left-base:         -72px;
}

/* ─── Shop loop: product card is the ribbon anchor ──────────────────────── */
/*
 * The theme's content-product.php outputs:
 *   <li class="product ch-promo-product">
 *     <a class="woocommerce-loop-product__link">
 *       [thumbnail → our ribbon at p11]
 *       <h2>title</h2>
 *     </a>
 *     <div class="product-bottom-group" style="position:relative;z-index:10">
 *
 * The <li> becomes the ribbon's anchor: position:relative here guarantees
 * the ribbon (position:absolute; top:0; left:0) stays in the top-left
 * corner of the full product card, in front of all card content.
 * overflow:visible allows the ribbon to overflow the image bounds if needed.
 */
li.ch-promo-product,
.ch-promo-product {
  position: relative !important;
  overflow: visible !important;
}

/* ─── Image wrapper ──────────────────────────────────────────────────────── */
/*
 * Used when inject_ribbon_into_image wraps the WC product image (home carousel
 * and other contexts where WC_Product::get_image() is called directly —
 * i.e. NOT inside woocommerce_before_shop_loop_item_title action).
 */
.ch-product-image-wrap {
  position: relative;
  overflow: visible;
  display: block;
}

/* ─── Product link: also positioned so ribbon anchors correctly ──────────── */
.ch-promo-product .woocommerce-loop-product__link,
.ch-promo-product .woocommerce-LoopProduct-link {
  position: relative !important;
}

/* ─── Corner ribbon: clip box ────────────────────────────────────────────── */
/*
 * Positioned at the top-left of the nearest positioned ancestor.
 * High z-index ensures it renders above all card content.
 *
 * NOTE: We use clip-path (triangle polygon) instead of overflow:hidden.
 * overflow:hidden on a position:absolute+z-index element inside a flex
 * container can create a compositing layer that renders behind flex content
 * regardless of z-index value. clip-path achieves the same triangular clip
 * without triggering that stacking issue.
 */
.ch-ribbon-corner {
  position: absolute !important;
  top:  0 !important;
  left: 0 !important;
  width:  var(--ribbon-corner-size, 190px) !important;
  height: var(--ribbon-corner-size, 190px) !important;
  /* Triangle clip: top-left corner of the 190×190 box */
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* ─── Corner ribbon: diagonal strip ─────────────────────────────────────── */
/*
 * All visual properties use !important + hardcoded fallbacks to survive any
 * theme/plugin CSS rule that might override width, height, background, or
 * transform on a generic div element.
 *
 * The specificity of `ch-ribbon-corner > .ch-promo-ribbon` (0-2-0) defeats
 * any single-class theme rule; !important defeats the rest.
 */
.ch-ribbon-corner .ch-promo-ribbon {
  position: absolute !important;
  top:  calc(var(--ribbon-top-base, 24px)  + var(--ribbon-corner-distance, 12px)) !important;
  left: calc(var(--ribbon-left-base, -72px) + var(--ribbon-corner-distance, 12px)) !important;
  width:  var(--ribbon-width,  250px) !important;
  height: var(--ribbon-height,  36px) !important;
  background: var(--ch-red, #870000) !important;
  -webkit-transform: rotate(-45deg) scale(var(--ribbon-scale, 1.17)) !important;
          transform: rotate(-45deg) scale(var(--ribbon-scale, 1.17)) !important;
  transform-origin: center center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* reset anything a generic div rule might inject */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

.ch-promo-2x1 .ch-ribbon-corner .ch-promo-ribbon {
  background: var(--ch-red-2x1, #870000) !important;
}

.ch-ribbon-corner .ch-promo-ribbon span {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background: transparent !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.40) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: inline !important;
  margin-left: -12px !important; /* optical centering tweak for the rotated text */
}

.ch-promo-2x1 .ch-ribbon-corner .ch-promo-ribbon span {
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  margin-left: -10px !important;
}

/* ─── Gold campaign tag ──────────────────────────────────────────────────── */
/*
 * Shown when campaign.promo_label is non-empty.
 * Injected as prefix inside woocommerce_get_price_html — appears above the
 * price number within the <span class="price"> container.
 *
 * The .ch-promo-product .price flex rule below ensures it stacks vertically.
 */
.ch-cyber-tag {
  display: block !important;
  width: 100%;
  padding: 4px 10px;
  margin: 0 0 6px;
  border: 1.5px solid #c4972a;
  background: linear-gradient(135deg, #fff8e1 0%, #fef0b0 100%);
  color: #7a5310;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  border-radius: 2px;
}

/* ─── Price container: stack gold tag, price, and promo text vertically ── */
.ch-promo-product .price,
.woocommerce .ch-promo-product span.price,
.woocommerce-page .ch-promo-product span.price,
.woocommerce ul.products .ch-promo-product span.price {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px;
}

/* ─── Price: percentage discount (del + ins) ─────────────────────────────── */
del .woocommerce-Price-amount.amount{
  color: #707070 !important;
  font-size: 16px;
  line-height: 1.2;
  text-decoration-thickness: 1px;
  text-decoration-color: #555;
  margin-right: 5px;
}

ins .woocommerce-Price-amount.amount{
  color: var(--ch-red, #9f1515) !important;
  line-height: 1.2;
  font-weight: 700 !important;
  text-decoration: none !important;
}

ins .woocommerce-Price-amount.amount bdi {
  font-size: 25px !important;
  text-decoration: none !important;
}

/* ─── Price: buy X get Y (standard price in brand red) ──────────────────── */
.ch-promo-2x1 .price .woocommerce-Price-amount,
.ch-promo-2x1 .price .woocommerce-Price-amount bdi {
  color: var(--ch-red, #9f1515) !important;
  font-weight: 700 !important;
}

/* ─── Promo text below price ─────────────────────────────────────────────── */
.ch-promo-text {
  display: block !important;
  margin: 4px auto 10px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ch-red, #9f1515) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.ch-promo-2x1 .ch-promo-text {
  font-size: 13px;
}

/* ─── Single product page: corner ribbon on gallery image ───────────────── */
/*
 * The corner ribbon is injected by inject_ribbon_into_single_image() via the
 * woocommerce_single_product_image_thumbnail_html filter, which wraps the
 * main product image. The gallery wrapper gets position:relative so the
 * ribbon anchors correctly.
 */
.woocommerce-product-gallery {
  position: relative !important;
}

/* ─── Single product page: corner ribbon anchor ──────────────────────────── */
/*
 * inject_ribbon_into_single_image() appends the ribbon INSIDE the
 * .woocommerce-product-gallery__image div (before its closing </div>).
 * WooCommerce already gives this div position:relative for the zoom feature,
 * but we force it here to guarantee correct ribbon anchoring.
 * overflow:visible is needed so the ribbon's clip-path renders outside
 * the image bounds without being clipped by the gallery container.
 */
.woocommerce-product-gallery__image {
  position: relative !important;
  overflow: visible !important;
}

/* ─── Single product page: horizontal ribbon banner in summary ──────────── */
/*
 * Kept as secondary indicator in the summary area.
 */
.chpe-single-ribbon {
  display: inline-block;
  background: var(--ch-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 2px;
  margin-bottom: 8px;
}

.ch-promo-2x1 .chpe-single-ribbon {
  background: var(--ch-red-2x1);
}

/* ─── Responsive: small screens ─────────────────────────────────────────── */
@media (max-width: 420px) {
  :root {
    --ribbon-corner-size:  165px;
    --ribbon-width:        220px;
    --ribbon-height:        32px;
    --ribbon-top-base:      22px;
    --ribbon-left-base:    -68px;
  }
}
.chpe-next-threshold { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid #9f1515; background: #f8f5f1; color: #542c16; font-size: 14px; }
.woocommerce-cart-form .chpe-next-threshold {
  display: block;
  width: 300px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 10px 0 0 !important;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}
@media (max-width: 600px) {
  .woocommerce-cart-form .chpe-next-threshold { width: 220px; }
}
.chpe-single-volume-guidance { display: block; width: 100%; margin: 8px 0 12px; color: #542c16; font-size: 12px; line-height: 1.45; }
.chpe-single-volume-message { font-weight: 700; color: #9f1515; }
.chpe-single-volume-current { font-weight: 700; color: #9f1515; }
.chpe-single-volume-next { margin-top: 3px; }

/* Single-product volume promos: quantity, guidance and add-to-cart each get
 * their own row, without changing the promotion calculation or its markup. */
.woocommerce div.product form.cart:has(.chpe-single-volume-guidance) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.woocommerce div.product form.cart:has(.chpe-single-volume-guidance) > .quantity,
.woocommerce div.product form.cart:has(.chpe-single-volume-guidance) > .chpe-single-volume-guidance,
.woocommerce div.product form.cart:has(.chpe-single-volume-guidance) > .single_add_to_cart_button {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce div.product form.cart:has(.chpe-single-volume-guidance) > .quantity {
  margin-bottom: 8px !important;
}
.woocommerce div.product form.cart:has(.chpe-single-volume-guidance) > .chpe-single-volume-guidance {
  margin: 0 0 10px;
}
.woocommerce div.product form.cart:has(.chpe-single-volume-guidance) > .single_add_to_cart_button {
  margin-left: 0 !important;
}
.chpe-debug { margin: 20px 0; padding: 10px; border: 1px dashed #777; background: #fff; font-size: 12px; }
.chpe-debug pre { overflow: auto; max-height: 360px; white-space: pre-wrap; }