/* ===========================================================================
   fimart — storefront polish
   Hero fallback · reveal animations · stock badges · flash notices · footer contact.

   Every colour, radius, shadow and space below is an existing token from style.css.
   Nothing here restyles a global element; each rule is scoped to a fi-* component.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Hero media
   .fi-hero__media already sets radius, shadow, 4/3 aspect and overflow in style.css.
   These modifiers only decide what fills it.
   --------------------------------------------------------------------------- */
.fi-hero__media--photo .fi-hero__img { width: 100%; height: 100%; object-fit: cover; }

/* Brand fallback: shown until the operator picks a hero image in the Customizer.
   Deliberate, not empty — brand gradient, a soft bean-weave, one leaf sweep. */
.fi-hero__media--brand {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(118% 92% at 86% 8%,  rgba(27, 118, 187, .20), transparent 58%),
    radial-gradient(104% 84% at 8%  98%, rgba(125, 185, 63, .28), transparent 62%),
    linear-gradient(140deg, var(--mist-2) 0%, var(--paper) 52%, var(--mist) 100%);
}
.fi-hero__media--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--brand-green) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  opacity: .10;
}
.fi-hero__media--brand::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -30%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
  background: linear-gradient(140deg, rgba(125, 185, 63, .34), rgba(27, 118, 187, .20));
}
.fi-hero__brand {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
}
.fi-hero__brand img {
  width: min(248px, 58%);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(23, 36, 28, .12));
}
.fi-hero__brand-line {
  max-width: 24ch;
  padding: .45em 1.1em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   2. Reveal animation
   The hiding state is applied by assets/js/theme.js, never by the server — with
   JavaScript off, or before the script runs, every element is fully visible.
   Only opacity and transform animate, so nothing reflows.
   --------------------------------------------------------------------------- */
.fi-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .68, .28, 1);
  transition-delay: var(--fi-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.fi-reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .fi-reveal, .fi-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   3. Stock state on product cards — audit No.14 / No.24
   The card (li.product) is already position:relative; the "Promo" badge owns the
   top-left corner, so stock sits top-right and never collides with it.
   --------------------------------------------------------------------------- */
.fi-stock-badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - var(--sp-6) - var(--sp-4));
  padding: .22em .65em;
  border-radius: var(--radius-pill);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fi-stock-badge--out  { background: var(--ink);        color: #fff; }
.fi-stock-badge--back { background: var(--brand-blue); color: #fff; }
.fi-stock-badge--low  { background: var(--star);       color: var(--ink); text-transform: none; letter-spacing: 0; }

/* An out-of-stock card stays readable but visibly stands down. */
.fi-card--oos .fi-card__image img { opacity: .55; filter: grayscale(.35); }
.fi-card--oos .fi-card__price { color: var(--muted); }

/* The availability filter reuses .fi-shop__cats, so it inherits the sidebar look. */
.fi-shop__stock { margin-bottom: var(--sp-6); }

/* ---------------------------------------------------------------------------
   4. Flash notices on non-WooCommerce pages (coupon links land anywhere)
   --------------------------------------------------------------------------- */
.fi-flash { background: var(--mist); border-bottom: 1px solid var(--line); padding-block: var(--sp-3); }
.fi-flash .woocommerce-message,
.fi-flash .woocommerce-info,
.fi-flash .woocommerce-error {
  margin: 0 0 var(--sp-2);
  padding: .75em 1em;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: .9rem;
  list-style: none;
}
.fi-flash .woocommerce-info  { border-left-color: var(--brand-blue); }
.fi-flash .woocommerce-error { border-left-color: var(--danger); }
.fi-flash ul, .fi-flash li { margin: 0; padding: 0; list-style: none; }
.fi-flash > .fi-container > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   5. Footer contact rows — audit TT-14
   Each channel is labelled, so a care line and a WhatsApp line can never be
   mistaken for one another.
   --------------------------------------------------------------------------- */
.fi-footer .fi-footer__contact { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.fi-footer .fi-footer__contact li { display: grid; gap: 1px; }
.fi-footer__label {
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #93a397;
}
.fi-footer .fi-footer__contact a { font-weight: 500; }
.fi-footer__hours { margin: var(--sp-3) 0 0; font-size: .78rem; color: #93a397; }

/* ---------------------------------------------------------------------------
   6. Small responsive corrections for the new pieces
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .fi-hero__brand img { width: min(200px, 62%); }
  .fi-hero__brand-line { font-size: .78rem; }
  .fi-stock-badge { font-size: .62rem; }
}

/* Centred "see everything" button under a section grid (was an inline style). */
.fi-section__more { margin: var(--sp-6) 0 0; text-align: center; }