/* ==========================================================================
   Bazr — theme layer.

   tokens.css and components.css are copied from the Brand v3 static build
   (Marketplace 1/assets/css) and kept in step with it. Anything
   the WordPress build needs that the static mockup did not goes here.
   ========================================================================== */

/* ---- Real photography inside the mockup's placeholder box ----------------
   The mockup only ever had an emoji on a gradient. A live catalogue is part
   photographed and part not, so the real image is layered into the same square
   and the emoji stays underneath as the fallback.                            */
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* ---- WooCommerce output -------------------------------------------------
   Woo prints its price markup with its own spans; keep them inheriting the
   token typography rather than Woo's defaults.                              */
.woocommerce-Price-amount {
  font: inherit;
  color: inherit;
}

.price .woocommerce-Price-currencySymbol {
  font-weight: inherit;
}

.price-was .woocommerce-Price-amount {
  text-decoration: inherit;
}

/* ---- Busy state on an AJAX add-to-cart ---------------------------------- */
.btn.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* ---- Admin bar ----------------------------------------------------------
   The sticky header sits under the admin bar for logged-in staff. Without
   this the search field is unreachable on mobile while logged in.           */
body.admin-bar .hdr {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .hdr {
    top: 46px;
  }
}

/* ---- WooCommerce notices ------------------------------------------------
   Woo's own notice CSS lives in a stylesheet we do not load, so the markup
   is styled here against the tokens.                                        */
.bazr-notices:empty { display: none; }

.bazr-notices ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.bazr-notices li,
.bazr-notices .woocommerce-message,
.bazr-notices .woocommerce-error,
.bazr-notices .woocommerce-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  background: var(--c-info-100);
  border-left: 3px solid var(--c-info);
}

.bazr-notices .woocommerce-message {
  background: var(--c-success-100);
  border-left-color: var(--c-success);
}

.bazr-notices .woocommerce-error,
.bazr-notices .woocommerce-error li {
  background: var(--c-accent-100);
  border-left-color: var(--c-accent);
}

.bazr-notices .button {
  margin-left: auto;
  font-weight: 700;
  color: var(--c-link);
}

/* ---- Per-page sticky bars -------------------------------------------------
   In the mockups these were page-specific inline <style> blocks (one per
   HTML file: product.html, cart.html, checkout.html). There is one theme
   stylesheet, not one per template, so they are consolidated here and scoped
   with body[data-page] instead — see bazr_page_slug() in inc/template-tags.php
   for what sets that attribute.                                             */

body[data-page="product"] { padding-bottom: 84px; --toast-bottom: 88px; }
body[data-page="product"] .bnav { display: none !important; }
@media (min-width: 1024px) { body[data-page="product"] { padding-bottom: 0; } }

body[data-page="cart"] { padding-bottom: calc(var(--bottomnav-h) + 76px); --toast-bottom: calc(var(--bottomnav-h) + 88px); }
@media (min-width: 1024px) { body[data-page="cart"] { padding-bottom: 0; } }

.cartbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: var(--bottomnav-h); z-index: calc(var(--z-nav) - 1);
  background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 10px 16px;
  align-items: center; gap: 12px; box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
body[data-page="cart"] .cartbar { display: flex; }
@media (min-width: 1024px) { .cartbar { display: none !important; } }

/* Checkout runs its own full-width pay bar in place of the bottom nav —
   two competing fixed bars at the bottom of the screen is not a checkout. */
body[data-page="checkout"] { padding-bottom: 88px; }
@media (min-width: 1024px) { body[data-page="checkout"] { padding-bottom: 0; } }
body[data-page="checkout"] .bnav,
body[data-page="order-received"] .bnav { display: none !important; }

.paybar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items: center; gap: 12px; box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
body[data-page="checkout"] .paybar { display: flex; }
@media (min-width: 1024px) { .paybar { display: none !important; } }

/* ---- Checkout form fields -------------------------------------------------
   woocommerce_form_field() prints a <p class="form-row"> wrapper Woo's own
   (unloaded) stylesheet expects — restyle it against our .field/.input.       */
.woocommerce-billing-fields .form-row,
.woocommerce-additional-fields .form-row {
  margin-bottom: 12px;
}

.woocommerce-billing-fields label,
.woocommerce-additional-fields label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--c-text);
}

.woocommerce-billing-fields .required,
.woocommerce-additional-fields .required {
  color: var(--c-accent);
  text-decoration: none;
}

.woocommerce-billing-fields input.input-text,
.woocommerce-billing-fields select,
.woocommerce-billing-fields textarea,
.woocommerce-additional-fields input.input-text,
.woocommerce-additional-fields select,
.woocommerce-additional-fields textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-m);
  font: inherit;
  font-size: var(--t-base);
  background: var(--c-surface);
  color: var(--c-text);
}

.woocommerce-billing-fields input.input-text:focus,
.woocommerce-additional-fields input.input-text:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-honey-100);
}

.woocommerce-billing-fields .form-row-first,
.woocommerce-billing-fields .form-row-last {
  display: inline-block;
  width: calc(50% - 6px);
  vertical-align: top;
}
.woocommerce-billing-fields .form-row-first { margin-right: 12px; }

.woocommerce-invalid input.input-text,
.woocommerce-invalid select {
  border-color: var(--c-accent);
}
.woocommerce-invalid .woocommerce-error,
.woocommerce-invalid-required-field ~ .woocommerce-error {
  color: var(--c-accent);
}

/* Checkout's blockUI overlay while totals recalculate over AJAX. */
.woocommerce-checkout .blockUI.blockOverlay {
  position: relative;
}
.woocommerce-checkout .blockUI.blockOverlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  border-radius: inherit;
}

/* Payment gateway box (bank details, PayHere iframe target, etc). */
.payment_box {
  padding: 12px 14px;
  margin-top: 6px;
  background: var(--c-surface-alt);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}
.payment_box p:first-child { margin-top: 0; }
.payment_box p:last-child { margin-bottom: 0; }

/* ---- Brand v3 additions ---------------------------------------------------
   Real photography fills the cell; the seeded gradient PNGs are skipped in
   bazr_product_image(), so what shows here is either a real photo or the
   emoji-on-honey-tint placeholder.                                            */
.ph img { z-index: 2; }
.woocommerce-checkout .payfx { position: fixed; }
body[data-page="checkout"] .pay-note { display: none; }