/* ============================================================
   Aush Shop — Landing / Category / Product Listing
   Built entirely from design tokens defined in base.css — no
   new colors/spacing scales introduced.
   ============================================================ */

/* ── Breadcrumb bar — clears the fixed site header ────────────
   .page-breadcrumb-bar itself carries no padding in the base
   stylesheet (every pre-existing page that uses it is immediately
   followed by a full-height .page-hero, which provides its own
   clearance) so shop pages — which have no hero — need it here.
   Scoped to this file only, loaded solely by shop/cart pages. ── */
.page-breadcrumb-bar {
  padding-top: 130px;
  padding-bottom: var(--space-4);
}

/* On the shop landing page, the breadcrumb sits directly above the dark
   .shop-hero with nothing else between them. It has no background of its
   own — the body's white background was showing through — which made it
   look like a separate pale bar wedged between the solid dark header and
   the dark hero. Give it the same dark tone so header → breadcrumb → hero
   read as one continuous dark zone, with light text to match. Scoped via
   :has(+ .shop-hero) so category pages (white body, no hero) are
   untouched — their breadcrumb stays dark-on-white as-is. ── */
.page-breadcrumb-bar:has(+ .shop-hero) {
  background: var(--color-bg-dark);
}
.page-breadcrumb-bar:has(+ .shop-hero) .breadcrumb {
  color: rgba(0,0,0,.55);
}
.page-breadcrumb-bar:has(+ .shop-hero) .breadcrumb a {
  color: rgba(0,0,0,.85);
}
.page-breadcrumb-bar:has(+ .shop-hero) .breadcrumb a:hover {
  color: var(--color-accent);
}
.page-breadcrumb-bar:has(+ .shop-hero) .breadcrumb__sep {
  opacity: .4;
}

/* ── Shop Hero (gradient — no photography dependency) ─────────
   The breadcrumb bar above already provides full header clearance
   (see body.page-shop .page-breadcrumb-bar), so this no longer needs
   its own ~160px top buffer on top of that — it was double-clearing
   the header and pushing the title (and the category cards below it)
   far down the page. ── */
.shop-hero {
  position: relative;
  /* The breadcrumb bar (now hidden on the landing page — see shop.php)
     used to provide the fixed header's ~96px clearance; with it gone,
     this section needs its own top padding to clear the header. */
  padding-block: calc(var(--space-24) + var(--space-6)) var(--space-16);
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(201,169,110,.14) 0%, rgba(201,169,110,0) 60%),
    linear-gradient(160deg, var(--color-bg-dark) 0%, var(--color-bg-mid) 100%);
  color: var(--color-text-white);
  overflow: hidden;
}
/* Heading + description are centred within the section, not just left-set
   inside their own max-width box — margin-inline:auto does the centring,
   max-width keeps line length readable. */
.shop-hero__title {
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
}
.shop-hero__subtitle {
  font-size: var(--text-md);
  color: rgba(0,0,0,.65);
  max-width: 56ch;
  line-height: var(--leading-loose);
  margin-top: var(--space-3);
  margin-inline: auto;
  text-align: center;
}

/* ── Top-level category cards (Commercial / Residential) ─────── */
.shop-maincats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
/* 3rd top-level category (Industrial) spans full width below the
   Commercial/Residential pair, matching the home page category layout. */
.shop-maincat-card:last-child:nth-child(3) {
  grid-column: 1 / -1;
}
.shop-maincat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  /* Fallback fill + border tuned to the actual product photography
     (pale blue/white studio backdrops), not a generic dark card —
     a black-tinted border read as a stray dark outline on the light
     images. */
  background: #eef4fb;
  border: 1px solid #d7e5f2;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base);
}
.shop-maincat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,169,110,.5);
}

/* Background photo — one per top-level category, named by slug. See
   gen-placeholders.php for the placeholder generator / size reference. */
.shop-maincat-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.shop-maincat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The studio photography reads flat/washed-out at card size — a
     stronger contrast/saturation/brightness boost keeps it looking
     crisp rather than pale (bumped further after the .55-at-40% overlay
     below was found to still read as a hazy veil over the whole photo,
     not just the text-legibility band at the bottom). */
  filter: contrast(1.25) saturate(1.4) brightness(1.04);
  transition: transform var(--duration-slower) var(--ease-out);
}
.shop-maincat-card:hover .shop-maincat-card__media img {
  transform: scale(1.06);
}
/* Bottom-weighted white wash — the product photography is shot on
   light studio backdrops, so a light scrim (not a dark one) keeps the
   title/desc/link readable while the photo stays clean up top. Held at
   0 through the top ~half of the card (where the product photo itself
   sits, clear of any text) and only ramps up over the lower band behind
   the title/desc/link, instead of the old curve which was already at
   .55 white by 40% down the card — that covered most of the visible
   photo in a haze, not just the text band. */
.shop-maincat-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 48%, rgba(255,255,255,.55) 72%, rgba(255,255,255,.97) 100%);
  transition: background var(--duration-base);
}
.shop-maincat-card:hover .shop-maincat-card__overlay {
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.05) 48%, rgba(255,255,255,.6) 72%, rgba(255,255,255,.98) 100%);
}
.shop-maincat-card__title {
  position: relative;
  z-index: 2;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  /* Dark — sits on a light photo + light scrim (.shop-maincat-card__overlay). */
  color: var(--color-text-dark);
  margin-bottom: var(--space-2);
}
.shop-maincat-card__desc {
  position: relative;
  z-index: 2;
  font-size: var(--text-sm);
  /* Darker than --color-text-muted (#888) — that read too faint against
     the white scrim; this is the site's --color-text-light token. */
  color: var(--color-text-light);
  max-width: 42ch;
  line-height: var(--leading-normal);
}
.shop-maincat-card__count {
  position: relative;
  z-index: 2;
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── shop.php breadcrumb clearance ───────────────────────────
   The fixed header is ~80px tall (see the `offset` constant in
   main.js) and always solid/opaque on shop.php (header-solid — its
   icons are white-on-transparent by design and need a dark bar
   behind them, on both the hero landing page and the hero-less
   category pages). The breadcrumb must clear that solid bar or it
   renders hidden underneath it — 96px is enough clearance without
   the excess the old hero-only 130px/16px split left behind.
   Scoped to body.page-shop so cart.php (no header-solid) keeps its
   own 130px default above. ── */
body.page-shop .page-breadcrumb-bar {
  padding-top: var(--space-24);
  padding-bottom: var(--space-2);
}
.shop-category-section {
  padding-block: var(--space-4) var(--space-20);
}
/* No location indicator precedes the rail anymore (removed from category
   pages) — the section's own top padding is the only spacing needed, so
   this drops the base .shop-subcat-rail margin-top rather than just
   shrinking it, or it'd leave a floating gap above the first element. */
.shop-category-section .shop-subcat-rail {
  margin-top: 0;
}
.shop-category-section .loc-banner {
  padding-block: var(--space-3);
  margin-bottom: var(--space-4);
}
.shop-category-section .shop-toolbar {
  padding-block: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ── Subcategory chip rail ────────────────────────────────────── */
.shop-subcat-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-light);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-body);
  background: var(--color-bg-white);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}
.shop-chip:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.shop-chip.is-active {
  background: var(--color-text-dark);
  border-color: var(--color-text-dark);
  /* Explicit white — this is an inverted "selected" chip (dark fill
     regardless of theme), not a themed section. */
  color: #ffffff;
}

/* ── Facet filters ────────────────────────────────────────────── */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.shop-filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 9.5rem;
}
.shop-filters__field label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.shop-filters__field select {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--color-bg-white);
  color: var(--color-text-dark);
  max-width: 100%;
}
.shop-filters__clear {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-accent-dark);
  text-decoration: underline;
  white-space: nowrap;
  padding-bottom: var(--space-2);
}
.shop-filters__clear:hover { color: var(--color-accent); }

@media (max-width: 575.98px) {
  .shop-filters { gap: var(--space-3); }
  .shop-filters__field { min-width: calc(50% - var(--space-3)); flex: 1 1 calc(50% - var(--space-3)); }
}

/* ── Filter / sort bar ─────────────────────────────────────────── */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-8);
}
.shop-toolbar__count { font-size: var(--text-sm); color: var(--color-text-muted); }
.shop-toolbar__sort { display: flex; align-items: center; gap: var(--space-3); }
.shop-toolbar__sort select {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--color-bg-white);
  color: var(--color-text-dark);
}

/* ── Product grid / card ───────────────────────────────────────── */
.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.shop-product-card {
  position: relative;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.shop-product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.shop-product-card__link { display: block; color: inherit; text-decoration: none; }

.shop-product-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-light);
  overflow: hidden;
}
.shop-product-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.shop-product-card:hover .shop-product-card__img { transform: scale(1.06); }
.shop-product-card__img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  background: linear-gradient(150deg, #f2f2f2, #e6e6e6);
}

.shop-badge {
  position: absolute; top: var(--space-3); left: var(--space-3);
  z-index: 2;
  font-size: 10px; font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-full);
  color: #fff;
}
.shop-badge--sale { background: var(--color-error); }
.shop-badge--featured { background: var(--color-accent); color: var(--color-text-dark); }
.shop-badge--out { background: #6b7280; }

.shop-product-card__body { padding: var(--space-4); }
.shop-product-card__cat {
  font-size: var(--text-xs); font-weight: var(--font-semi);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-1);
}
.shop-product-card__name {
  font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--color-text-dark); line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  min-height: 2.4em;
}
.shop-product-card__price-row { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.shop-product-card__price { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text-dark); }
.shop-product-card__compare { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: line-through; }

/* Action button — only the "I'm Interested" lead-capture CTA (outside
   service area) still renders as a full-width text button; Add to
   Cart/Quote moved to the icon stack below. */
.shop-product-card__actions {
  padding: 0 var(--space-4) var(--space-4);
}
.shop-product-card__add {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-text-dark);
  /* Explicit white — this button has an intentionally dark fill
     regardless of theme (not a themed section). */
  color: #ffffff;
  border: none; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--font-semi);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.shop-product-card__add:hover { background: var(--color-accent-dark); }
.shop-product-card__add:disabled { background: #d1d5db; cursor: not-allowed; }

/* Icon action stack — wishlist, add-to-cart, add-to-quote (commercial
   only) and share, stacked top-right over the product image. Replaces
   the old full-width "Add to Cart"/"Add to Quote" text buttons. */
.shop-product-card__icon-stack {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 3;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.shop-product-card__icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); border: none; border-radius: 50%;
  color: var(--color-text-dark); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.shop-product-card__icon-btn:hover { transform: scale(1.08); background: #fff; }
.shop-product-card__icon-btn:disabled { color: #b8b8b8; cursor: not-allowed; }
.shop-product-card__icon-btn:disabled:hover { transform: none; }
.shop-product-card__icon-btn.is-loading { opacity: .55; pointer-events: none; }
.shop-product-card__icon-btn.js-wishlist-btn.is-active { color: var(--color-error); }
.shop-product-card__icon-btn.js-add-to-cart:hover { color: var(--color-accent-dark); }
.shop-product-card__icon-btn--quote:hover { color: var(--color-accent-dark); }

/* ── Share modal — reuses .loc-modal-overlay/.loc-modal for the
   backdrop + dialog chrome (see location.css); only the share-specific
   inner layout lives here. ── */
.share-modal { position: relative; }
.share-modal__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  font-size: 22px; line-height: 1; color: var(--color-text-muted); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.share-modal__close:hover { background: var(--color-bg-light); color: var(--color-text-dark); }
.share-modal__link-row { display: flex; gap: var(--space-2); margin: var(--space-5) 0; }
.share-modal__link-row .form-input { flex: 1; min-width: 0; font-size: var(--text-sm); }
/* Beats .loc-modal .btn{width:100%} (location.css) — same specificity,
   loaded later, would otherwise force this button to fill the row. */
.share-modal .share-modal__link-row .btn { width: auto; flex: none; padding-inline: var(--space-5); white-space: nowrap; }
.share-modal__socials { display: flex; gap: var(--space-3); }
.share-modal__social {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border: none; border-radius: var(--radius-md);
  font-size: var(--text-xs); font-weight: var(--font-semi);
  text-decoration: none; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.share-modal__social:hover { transform: translateY(-2px); opacity: .92; }
.share-modal__social--whatsapp { background: #25d366; color: #fff; }
.share-modal__social--facebook { background: #1877f2; color: #fff; }
.share-modal__social--instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); color: #fff; }
.share-modal__note {
  font-size: var(--text-xs); color: var(--color-text-muted);
  text-align: center; margin-top: var(--space-4);
}

/* ── Pagination (public-facing) ──────────────────────────────── */
.shop-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); }
.shop-pager a, .shop-pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding-inline: var(--space-2);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--color-text-body); text-decoration: none;
}
.shop-pager a:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.shop-pager a.is-current { background: var(--color-text-dark); border-color: var(--color-text-dark); color: #fff; }

/* ── Empty state ──────────────────────────────────────────────── */
.shop-empty { text-align: center; padding: var(--space-24) var(--space-6); color: var(--color-text-muted); }
.shop-empty h3 { font-size: var(--text-lg); color: var(--color-text-dark); margin-bottom: var(--space-2); }

/* ── Toast (add-to-cart feedback) ─────────────────────────────── */
.shop-toast {
  position: fixed; bottom: var(--space-8); left: 50%; transform: translate(-50%, 20px);
  background: var(--color-text-dark); color: #fff;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  z-index: var(--z-top);
}
.shop-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 992px) {
  .shop-product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .shop-maincats { grid-template-columns: 1fr; }
  .shop-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }

  /* Single scrollable row instead of wrapping to 2 lines — the chip set
     (All Commercial / Cooling / Ventilation / Preparation) doesn't fit
     390px wide, so let it scroll horizontally rather than stack. */
  .shop-subcat-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }
  .shop-subcat-rail::-webkit-scrollbar { display: none; }
  .shop-chip { flex-shrink: 0; }
}
@media (max-width: 480px) {
  .shop-product-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .shop-product-card__body { padding: var(--space-3); }
  .shop-product-card__name { font-size: var(--text-sm); min-height: 2.4em; }
  .shop-product-card__actions { padding-inline: var(--space-3); }
}