/* ==========================================================================
   Arctic Living — campaign tokens, save badge, was/now price
   Shop-wide. Loads on every page so the badge works in any product card.
   ========================================================================== */

:root {
  /* --- Existing brand tokens, mirrored from the Elementor global kit -------
     Kept as --al-* aliases so campaign CSS never depends on Elementor's
     generated variable names (--e-global-color-13eb8cd etc.), which change
     if the kit is edited. */
  --al-white:      #ffffff;
  --al-bone:       #f0f0f0;   /* --e-global-color-secondary */
  --al-bone-deep:  #e4e4e4;
  --al-text:       #565657;   /* --e-global-color-text / accent */
  --al-petrol:     #153644;   /* --e-global-color-13eb8cd, primary dark */
  --al-green:      #36bb21;   /* --e-global-color-4753c2b */
  --al-gold:       #eaaf0f;   /* --e-global-color-8bde925 */
  --al-plum:       #4d203c;   /* --e-global-color-c5620ab */

  /* --- NEW: campaign red "Arctic Ember" -----------------------------------
     Adapted from the Swiss Sense reference (#e30613) rather than copied:
     hue rotated +11 deg into the warm range and luminance dropped ~20%, so it
     sits with the oak, bone and terracotta in the campaign photography and
     next to --al-petrol without vibrating.

     #c8321e  hsl(7, 74%, 45%)
     Contrast on white ......... 5.34:1  (AA, incl. small text)
     White text on the red ..... 5.34:1  (AA, incl. small text)
     On --al-bone (#f0f0f0) .... 4.83:1  (AA) */
  --al-red:        #c8321e;
  --al-red-hover:  #a82815;
  --al-red-press:  #8e2211;
  --al-red-tint:   #fbf1ee;   /* wash background */
  --al-red-line:   #eccfc7;   /* hairline on tinted surfaces */
  --al-red-on:     #ffffff;   /* text colour on --al-red */

  /* Type — matches the Elementor kit's accent style. */
  --al-font: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --al-accent-size: clamp(0.75rem, 0.6864rem + 0.2679vw, 0.9375rem);
  --al-accent-ls: 1.4px;
}

/* ==========================================================================
   Save badge  —  [al_save_badge]
   ========================================================================== */

.al-save-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  box-sizing: border-box;
  padding: 7px 14px 8px;
  border-radius: 40px; /* matches the existing .card-overlay.badge pill */
  background: var(--al-red);
  color: var(--al-red-on);
  font-family: var(--al-font);
  font-size: var(--al-accent-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--al-accent-ls);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* Lifts the pill off busy photography without a hard drop shadow. */
  box-shadow: 0 1px 3px rgb(21 54 68 / 18%);
}

/* WooCommerce injects its own markup into wc_price(); neutralise it so the
   amount inherits the badge type rather than the theme's price styling. */
.al-save-badge .woocommerce-Price-amount,
.al-save-badge bdi {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.al-save-badge__percent {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.al-save-badge__sep {
  opacity: 0.55;
}

.al-save-badge__amount {
  font-weight: 400;
}

/* --- Optional self-positioning overlay: [al_save_badge float="yes"] ------ */

.al-save-badge-wrap {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.al-save-badge-wrap--top-left     { top: 12px;    left: 12px; }
.al-save-badge-wrap--top-right    { top: 12px;    right: 12px; }
.al-save-badge-wrap--bottom-left  { bottom: 12px; left: 12px; }
.al-save-badge-wrap--bottom-right { bottom: 12px; right: 12px; }

/* Give the usual card image containers a positioning context so float="yes"
   pins to the image. Harmless where a context already exists. */
li.product,
.e-loop-item,
.al-product-card,
.woocommerce-loop-product__link,
.elementor-widget-woocommerce-product-images,
.woocommerce-product-gallery {
  position: relative;
}

@media (max-width: 767px) {
  .al-save-badge {
    padding: 5px 11px 6px;
    letter-spacing: 1px;
  }

  .al-save-badge-wrap--top-left,
  .al-save-badge-wrap--top-right     { top: 8px; }
  .al-save-badge-wrap--bottom-left,
  .al-save-badge-wrap--bottom-right  { bottom: 8px; }
  .al-save-badge-wrap--top-left,
  .al-save-badge-wrap--bottom-left   { left: 8px; }
  .al-save-badge-wrap--top-right,
  .al-save-badge-wrap--bottom-right  { right: 8px; }
}

/* The existing customizer pill sits top-right on Arctic Living cards, so the
   save badge defaults to top-left and the two never collide. */

@media (forced-colors: active) {
  .al-save-badge {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

@media print {
  .al-save-badge {
    background: none;
    color: #000;
    border: 1px solid #000;
    box-shadow: none;
  }
}

/* ==========================================================================
   Was / now price  —  [al_price format="was_now"]
   ========================================================================== */

.al-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55em;
  font-family: var(--al-font);
  color: var(--al-text);
}

.al-price__from {
  font-weight: 300;
  opacity: 0.75;
}

/* De-emphasised by the strike and the lighter weight, NOT by fading it out.
   At opacity 0.6 this computed to 2.67:1 on bone — a fail, and the reference
   price is exactly the number that has to stay legible under the EU 30-day
   rule. 0.85 lands at 4.6:1 on bone and 4.9:1 on white. */
.al-price__was {
  color: var(--al-text);
  opacity: 0.85;
  font-weight: 300;
  text-decoration: line-through;
  /* Keep the strike readable at small sizes. */
  text-decoration-thickness: 1px;
  text-underline-offset: 0;
}

.al-price__now {
  color: var(--al-red);
  font-weight: 500;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

/* WooCommerce's native price markup, in campaign colours. */
.woocommerce .al-price del,
.al-price del {
  opacity: 0.85; /* see .al-price__was — must stay AA-legible */
  font-weight: 300;
}

.woocommerce .al-price ins,
.al-price ins {
  background: none;
  color: var(--al-red);
  font-weight: 500;
  text-decoration: none;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Campaign button — reuses the shop's square, uppercase button language
   ========================================================================== */

.al-btn {
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--al-red);
  color: var(--al-red-on);
  font-family: var(--al-font);
  font-size: var(--al-accent-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--al-accent-ls);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.al-btn:hover,
.al-btn:focus-visible {
  background: var(--al-red-hover);
  color: var(--al-red-on);
}

.al-btn:active {
  background: var(--al-red-press);
}

.al-btn--dark {
  background: var(--al-petrol);
  color: var(--al-white);
}

.al-btn--dark:hover,
.al-btn--dark:focus-visible {
  background: #0e2733;
  color: var(--al-white);
}

.al-btn--ghost {
  background: var(--al-white);
  border-color: var(--al-text);
  color: var(--al-text);
}

.al-btn--ghost:hover,
.al-btn--ghost:focus-visible {
  background: var(--al-text);
  color: var(--al-white);
}

/* Visible focus everywhere — the shop's default outline is easy to lose on
   photography. */
.al-btn:focus-visible,
.al-save-badge:focus-visible {
  outline: 2px solid var(--al-petrol);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .al-btn {
    transition: none;
  }
}