/* ==========================================================================
   AntenX catalog
   Tokens copied from the homepage hero block, not eyeballed:
   --red #e00000 · --red-hi #ff2b3d · --bar #c41020
   --line rgba(255,255,255,.14) · page grey #3a3b3e
   Everything is scoped under .antxc-catalog so nothing can leak onto the rest
   of the site, and deactivating the plugin leaves no trace.
   ========================================================================== */

.antxc-catalog {
  --antxc-red:#e00000;
  --antxc-red-hi:#ff2b3d;
  --antxc-bar:#c41020;
  --antxc-ink:#fff;
  --antxc-ink-dim:#c8ccd1;
  --antxc-ink-mute:#8a9099;
  --antxc-card-mute:#adb3bb;
  --antxc-line:rgba(255,255,255,.14);
  --antxc-page:#3a3b3e;
  --antxc-plate:#e9eaee;
  --antxc-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --antxc-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  background:var(--antxc-page);
  color:var(--antxc-ink);
}

/* FULL BLEED — by neutralising the container, not by fighting it.
   The usual trick (width:100vw + negative margins) needs the containing block
   to be a predictable width. Astra puts archives inside a flex .ast-container,
   where our section got shrunk to ZERO width and its content wrapped into a
   3300px column. So instead the wrappers are opened up on catalog pages only,
   and every block inside re-establishes its own max-width. Nothing here needs
   the container's help, and 100vw is avoided entirely — that also dodges the
   horizontal scrollbar 100vw causes when a scrollbar is present.

   SCOPE: .ast-container is NOT unique to the content area — Astra uses the same
   class inside the header bar and the footer. An unscoped rule here therefore
   stripped the header's max-width and side padding on catalog pages only, which
   is why the logo and cart sat closer to the window edges than on the homepage.
   Every container selector below is anchored to .site-content, which contains
   the archive but not #masthead and not the footer. */
.antxc-catalog #content,
.antxc-catalog #primary,
.antxc-catalog .site-content .ast-container,
.antxc-catalog .ast-woocommerce-container{
  display:block !important;
  max-width:none !important;
  width:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.antxc-catalog #primary{float:none !important;min-width:0 !important}
.antxc-catalog .antxc-hero,
.antxc-catalog .antxc-filterbar{
  width:auto !important;max-width:none !important;
  margin-left:0 !important;margin-right:0 !important;
  min-width:0 !important;flex:none !important;
}

.antxc-catalog a{text-decoration:none}
.antxc-catalog .antxc-hero-in,
.antxc-catalog .antxc-filterbar-in{max-width:1320px;margin:0 auto;padding-left:32px;padding-right:32px}

/* ---------- hero -------------------------------------------------------- */
.antxc-catalog .antxc-hero{
  position:relative;min-height:240px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.94) 14%,
              rgba(0,0,0,.55) 52%, rgba(0,0,0,0) 100%),
             radial-gradient(90% 55% at 50% 24%, rgba(224,0,0,.11), rgba(224,0,0,0) 70%);
  font-family:var(--antxc-font);
}
.antxc-catalog .antxc-mesh,
.antxc-catalog .antxc-dust{
  position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;
  opacity:var(--antxc-mesh-op,.7);transition:opacity .25s ease;
}
.antxc-catalog .antxc-dust{z-index:2}
.antxc-catalog .antxc-mesh{z-index:1}
/* 34px matches the grid's top padding, so the space above and below the
   filter bar is identical. Change one, change the other. */
.antxc-catalog .antxc-hero-in{position:relative;z-index:20;padding-top:52px;padding-bottom:34px}
.antxc-catalog .antxc-crumbs{font-size:13px;color:var(--antxc-ink-mute);display:flex;gap:9px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.antxc-catalog .antxc-crumbs a{color:var(--antxc-red-hi)}
.antxc-catalog .antxc-crumbs a:hover{color:#fff}
.antxc-catalog .antxc-hero h1{
  font-size:clamp(26px,3.2vw,40px);line-height:1.15;letter-spacing:-.01em;
  margin:0 0 18px;font-weight:300;color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.7);
  text-transform:none;
}
.antxc-catalog .antxc-hero.nodesc h1{margin-bottom:2px}
.antxc-catalog .antxc-lede{margin:0;max-width:720px;font-size:17px;line-height:1.6;font-weight:400;color:var(--antxc-ink-dim);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.antxc-catalog .antxc-meta{margin-top:20px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:13px;color:#a8aeb6;font-weight:500}
.antxc-catalog .antxc-hero.nodesc .antxc-meta{margin-top:16px}
.antxc-catalog .antxc-meta b{color:#fff;font-weight:600}
.antxc-catalog .antxc-meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3);display:block}
.antxc-catalog .antxc-meta .mono{font-family:var(--antxc-mono);font-size:12.5px;color:var(--antxc-ink-dim)}
.antxc-catalog .antxc-meta .antxc-qual{font-size:12px;color:var(--antxc-ink-mute);margin-left:6px}

/* ---------- filter bar -------------------------------------------------- */
.antxc-catalog .antxc-filterbar{
  position:sticky;top:0;z-index:30;background:rgba(28,29,32,.92);
  backdrop-filter:blur(14px);border-top:1px solid var(--antxc-line);border-bottom:1px solid var(--antxc-line);
  font-family:var(--antxc-font);
}
.antxc-catalog .antxc-filterbar-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.antxc-catalog .antxc-fg{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.antxc-catalog .antxc-fg-lbl{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--antxc-ink-mute);margin-right:2px}
.antxc-catalog .antxc-chip{
  font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:8px;cursor:pointer;
  border:1px solid var(--antxc-line);color:var(--antxc-ink-dim);background:transparent;white-space:nowrap;
  font-family:inherit;line-height:1.3;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.antxc-catalog .antxc-chip:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.antxc-catalog .antxc-chip.on{background-color:rgba(224,0,0,.92);border-color:rgba(224,0,0,.35);color:#fff}
.antxc-catalog .antxc-chip.on:hover{background-color:var(--antxc-red);border-color:rgba(224,0,0,.75)}
.antxc-catalog .antxc-push{flex:1}
.antxc-catalog .antxc-count{font-size:13px;color:var(--antxc-ink-dim);white-space:nowrap}
.antxc-catalog .antxc-count b{color:#fff;font-weight:600}
.antxc-catalog .antxc-clear{font-size:12px;color:var(--antxc-red-hi);font-weight:600;background:none;border:0;cursor:pointer;font-family:inherit}
.antxc-catalog .antxc-sort{
  font-family:inherit;font-size:12.5px;font-weight:500;padding:8px 12px;border-radius:8px;
  background:rgba(0,0,0,.4);color:#fff;border:1px solid var(--antxc-line);cursor:pointer;
}
.antxc-catalog .antxc-sort:focus{outline:none;border-color:rgba(224,0,0,.75)}

/* ---------- the grid ---------------------------------------------------- */
/* auto-FILL, never auto-fit. auto-fit collapses empty tracks, which makes a
   3-product category balloon its cards to fill the row; auto-fill keeps them,
   so a card is the same size whether the page holds 3 items or 32. */
.antxc-catalog ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(266px,1fr));
  gap:16px;
  list-style:none;margin:0;padding:34px 0 72px;
  max-width:1320px;margin-left:auto;margin-right:auto;
}
.antxc-catalog ul.products::before,
.antxc-catalog ul.products::after{content:none !important;display:none !important}
.antxc-catalog ul.products li.product{
  width:auto !important;margin:0 !important;padding:0 !important;float:none !important;
  clear:none !important;list-style:none;
}
.antxc-catalog ul.products li.product::before{content:none !important}

/* ---------- the card ---------------------------------------------------- */
.antxc-catalog .antxc-card{
  --c-face:rgba(0,0,0,.55);
  --c-face-hi:rgba(0,0,0,.42);
  --c-rule:rgba(255,255,255,.12);
  --c-bord:var(--antxc-line);
  --c-bord-hi:rgba(224,0,0,.85);
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--c-bord);border-radius:14px;background:var(--c-face);
  overflow:hidden;font-family:var(--antxc-font);
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
/* Red at rest is the homepage treatment, correct across 6 feature cards.
   Across 22 archive cards it becomes the page's dominant texture, so the
   default here is neutral at rest with red reserved for hover. */
.antxc-catalog.antxc-border-red .antxc-card{--c-bord:rgba(224,0,0,.55)}
.antxc-catalog .antxc-card:hover{
  --c-face:var(--c-face-hi);
  border-color:var(--c-bord-hi);background:var(--c-face);
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34);
}
.antxc-catalog .antxc-card:focus-visible{outline:2px solid var(--antxc-red-hi);outline-offset:3px}

.antxc-catalog .antxc-c-img{
  position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#fff;padding:14px;border-bottom:1px solid transparent;
}
/* "soft" mode puts the photo on a grey mat. Note it only works with
   transparent product images — against a photo that carries its own white
   background the mat just reveals that background as a rectangle. */
.antxc-catalog.antxc-plate-soft .antxc-c-img{background:var(--antxc-plate);padding:14px 14px 4px;border-bottom-color:var(--c-rule)}
.antxc-catalog .antxc-c-img img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  transition:transform .25s ease;mix-blend-mode:normal;
}
.antxc-catalog .antxc-card:hover .antxc-c-img img{transform:scale(1.04)}
.antxc-catalog .antxc-c-flag{
  position:absolute;top:10px;left:10px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#fff;background:var(--antxc-bar);padding:4px 8px;border-radius:4px;line-height:1;z-index:2;
}

.antxc-catalog .antxc-c-body{padding:13px 16px 16px;display:flex;flex-direction:column;flex:1}
.antxc-catalog .antxc-c-sku{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--antxc-card-mute);margin-bottom:7px;line-height:1}
.antxc-catalog .antxc-c-name{font-size:15px;font-weight:600;color:#fff;line-height:1.3;margin:0 0 6px}
.antxc-catalog .antxc-card:hover .antxc-c-name{color:var(--antxc-red-hi)}
.antxc-catalog .antxc-c-band{font-size:12.5px;color:var(--antxc-ink-dim);line-height:1.3;font-variant-numeric:tabular-nums;margin-bottom:12px}
.antxc-catalog .antxc-c-foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--c-rule)}
.antxc-catalog .antxc-c-price{font-size:16px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
/* WooCommerce wraps prices in bdi/ins/del — flatten them to one style. */
.antxc-catalog .antxc-c-price span,
.antxc-catalog .antxc-c-price bdi,
.antxc-catalog .antxc-c-price ins{font:inherit;color:inherit;background:none;text-decoration:none}
.antxc-catalog .antxc-c-price del,
.antxc-catalog .antxc-c-price del span,
.antxc-catalog .antxc-c-price del bdi{font-size:12px;font-weight:400;color:var(--antxc-card-mute);margin-right:2px;text-decoration:line-through}
.antxc-catalog .antxc-c-stock{font-size:11px;color:var(--antxc-ink-dim);line-height:1;white-space:nowrap;display:flex;align-items:center;gap:5px}
.antxc-catalog .antxc-c-stock i{width:6px;height:6px;border-radius:50%;background:var(--antxc-card-mute);display:block;flex:none}
.antxc-catalog .antxc-c-stock.ok i{background:#2fbf5f}

.antxc-catalog .antxc-empty{grid-column:1/-1;padding:60px;text-align:center;color:var(--antxc-ink-mute);font-family:var(--antxc-font)}

/* ---------- browse related ---------------------------------------------- */
.antxc-catalog .antxc-related{max-width:1320px;margin:0 auto;padding:0 0 72px;font-family:var(--antxc-font)}
.antxc-catalog .antxc-sec{display:flex;align-items:baseline;gap:13px;margin:0 0 16px}
.antxc-catalog .antxc-sec h2{margin:0;font-size:20px;font-weight:400;letter-spacing:-.01em;color:#fff;text-transform:none}
.antxc-catalog .antxc-sec span{font-size:13px;color:var(--antxc-ink-mute)}
.antxc-catalog .antxc-sibs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px}
.antxc-catalog .antxc-sib{
  display:block;border:1px solid var(--antxc-line);border-radius:10px;padding:16px 17px;
  background:rgba(0,0,0,.35);transition:border-color .15s ease,background-color .15s ease;
}
.antxc-catalog .antxc-sib:hover{border-color:rgba(224,0,0,.55);background:rgba(0,0,0,.5)}
.antxc-catalog .antxc-sib .n{display:block;font-size:14px;font-weight:500;margin-bottom:4px;color:#fff}
.antxc-catalog .antxc-sib .m{display:block;font-size:11.5px;color:var(--antxc-ink-mute);font-family:var(--antxc-mono)}
.antxc-catalog .antxc-sib .a{display:block;color:var(--antxc-red-hi);font-size:12.5px;margin-top:10px;font-weight:500}

/* ---------- preview badge ----------------------------------------------- */
.antxc-preview-badge{
  position:fixed;left:14px;bottom:14px;z-index:99999;
  font:700 11px/1 var(--antxc-mono,monospace);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(196,16,32,.95);padding:9px 12px;border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.antxc-preview-badge a{color:#ffd7da;text-decoration:underline;margin-left:8px}

@media (max-width:820px){
  .antxc-catalog .antxc-hero-in,
  .antxc-catalog .antxc-filterbar-in{padding-left:18px;padding-right:18px}
  .antxc-catalog ul.products{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding-left:18px;padding-right:18px}
  .antxc-catalog .antxc-related{padding-left:18px;padding-right:18px}
}
@media (prefers-reduced-motion:reduce){
  .antxc-catalog .antxc-card,
  .antxc-catalog .antxc-c-img img{transition:none}
  .antxc-catalog .antxc-card:hover{transform:none}
}

/* ==========================================================================
   HARDENING — themes fight back
   Everything below is scoped under .antxc-catalog, which only exists on pages
   this plugin is rendering. It cannot reach the homepage or product pages.
   ========================================================================== */

/* The theme styles headings with -webkit-text-fill-color / text-stroke, which
   beats `color` and renders the H1 as outline-only. Reset the whole family. */
.antxc-catalog .antxc-hero h1,
.antxc-catalog .antxc-related h2{
  -webkit-text-fill-color:currentColor !important;
  -webkit-text-stroke:0 !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  text-shadow:0 4px 40px rgba(0,0,0,.7);
}
.antxc-catalog .antxc-hero h1{color:#fff !important}
.antxc-catalog .antxc-related h2{color:#fff !important;text-shadow:none}

/* Hero geometry, defended. A theme that sets height/min-height on sections
   collapses the canvases to zero and the mesh silently never appears. */
.antxc-catalog section.antxc-hero{
  display:block !important;
  min-height:240px !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
}
.antxc-catalog section.antxc-hero > canvas{display:block !important}

/* Some themes wrap archive output in a white container; the hero and filter
   bar are full-bleed and need the page colour behind them, not white. */
.antxc-catalog #primary,
.antxc-catalog #main,
.antxc-catalog .site-main,
.antxc-catalog .content-area,
.antxc-catalog .woocommerce-products-header{
  background:transparent !important;
}
.antxc-catalog .woocommerce-products-header,
.antxc-catalog .woocommerce-breadcrumb,
.antxc-catalog .page-title,
.antxc-catalog .entry-title:not(.antxc-c-name){display:none !important}

/* The theme styles selects full-width. Ours sits in a toolbar. */
.antxc-catalog select.antxc-sort{
  width:auto !important;min-width:190px;max-width:260px;
  height:auto !important;line-height:1.3 !important;margin:0 !important;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#c8ccd1 50%),linear-gradient(135deg,#c8ccd1 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:34px !important;
}
.antxc-catalog .antxc-filterbar-in > *{margin:0}

/* ---------- transparent header overlay ----------------------------------
   Added by JS to the element it measures, so it works whatever the theme
   calls its header. Only ever applied on catalog pages. */
/* The header is never repositioned — only tinted. Taking it out of flow
   would shift everything below it by its own height, and then the hero's
   negative margin would double-count and pull the hero off the top of the
   screen. position:relative keeps it exactly where it is while letting it
   paint above the hero. */
.antxc-catalog .antxc-header-transparent{position:relative;z-index:60}

/* Only pull the hero up when the header still occupies space. A fixed header
   is already out of flow, so the hero starts at the top of its own accord and
   needs padding, not a negative margin. */
/* --antxc-header-pull is measured: the distance from the header's top to the
   hero's top, so it swallows the breadcrumb bar, the archive title, and
   anything else Astra prints in between. */
.antxc-catalog.antxc-header-overlay.antxc-header-inflow .antxc-hero{
  margin-top:calc(-1 * var(--antxc-header-pull, var(--antxc-header-h, 86px))) !important;
}
/* Backgrounds tagged by the JS walk — this is the one that actually clears
   Astra's bars, because it found them rather than guessing their names. */
.antxc-catalog .antxc-header-transparent.antxc-bg-clear,
.antxc-catalog .antxc-header-transparent .antxc-bg-clear{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border-top-color:transparent !important;
  border-bottom-color:transparent !important;
}
.antxc-catalog.antxc-header-overlay .antxc-hero-in{
  padding-top:calc(var(--antxc-header-h, 86px) + var(--antxc-header-gap, 30px)) !important;
}

/* Astra nests its bars several levels deep, so tinting the header element
   alone leaves an opaque bar inside it. */
.antxc-catalog .antxc-header-transparent,
.antxc-catalog .antxc-header-transparent > *,
.antxc-catalog .antxc-header-transparent .main-header-bar-wrap,
.antxc-catalog .antxc-header-transparent .main-header-bar,
.antxc-catalog .antxc-header-transparent .ast-main-header-wrap,
.antxc-catalog .antxc-header-transparent .site-primary-header-wrap,
.antxc-catalog .antxc-header-transparent .ast-primary-header-bar,
.antxc-catalog .antxc-header-transparent .ast-above-header-wrap,
.antxc-catalog .antxc-header-transparent .ast-below-header-wrap{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border-bottom:0 !important;
}

/* ---------- debug readout ------------------------------------------------ */
.antxc-debug{
  position:fixed;right:14px;bottom:14px;z-index:99999;max-width:min(560px,92vw);
  background:#07080a;color:#7CFC9B;border:1px solid #2f7d4d;border-radius:10px;
  padding:12px 14px;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;
  white-space:pre-wrap;box-shadow:0 18px 44px rgba(0,0,0,.7);
}
.antxc-debug b{color:#fff}

/* ==========================================================================
   ASTRA SPECIFICS  (v1.4)
   ========================================================================== */

/* Astra prints its own breadcrumb bar between the header and the content, on
   a white background. It duplicates ours, and — worse — it sits between the
   header and the hero, so the hero's negative margin pulls it under the
   BREADCRUMB rather than under the header, and the overlay never happens. */
.antxc-catalog .ast-breadcrumbs-wrapper,
.antxc-catalog .ast-breadcrumbs,
.antxc-catalog .ast-breadcrumbs-inner,
.antxc-catalog .woocommerce-breadcrumb,
.antxc-catalog .ast-archive-description,
.antxc-catalog .woocommerce-products-header,
.antxc-catalog .ast-woocommerce-archive-title,
.antxc-catalog .ast-single-post-order{
  display:none !important;
}

/* Anything that could paint white behind the full-bleed blocks. */
.antxc-catalog #content,
.antxc-catalog .site-content,
.antxc-catalog #main,
.antxc-catalog .site-main,
.antxc-catalog .content-area,
.antxc-catalog .site-content .ast-container,
.antxc-catalog #primary{
  background:transparent !important;
  background-color:transparent !important;
}

/* Product images: preserve the photo's own aspect ratio.
   Astra sets width AND height on product thumbnails, which stretches a photo
   whose ratio doesn't match the box. Constrain by both axes, let the image
   size itself, and let object-fit catch anything that still forces a box. */
.antxc-catalog .antxc-c-img img,
.antxc-catalog ul.products li.product .antxc-c-img img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

/* Astra decorates product list items — swatches, quick view, "Add to cart"
   under the card. Our card is a single link, so anything Woo or the theme
   appends after it is noise. */
.antxc-catalog ul.products li.product > *:not(.antxc-card){display:none !important}
.antxc-catalog ul.products li.product .ast-shop-product-out-of-stock,
.antxc-catalog ul.products li.product .astra-shop-summary-wrap,
.antxc-catalog ul.products li.product .add_to_cart_button,
.antxc-catalog ul.products li.product .added_to_cart,
.antxc-catalog ul.products li.product .onsale{display:none !important}

/* Astra's own link colours would repaint the card text on hover. */
.antxc-catalog .antxc-card,
.antxc-catalog .antxc-card:hover,
.antxc-catalog .antxc-card:focus{color:inherit !important;text-decoration:none !important}


/* ==========================================================================
   v1.6
   ========================================================================== */

/* The grid measured 1320px wide but sat flush left: `margin-left:auto` ties on
   specificity with Astra's own `.woocommerce ul.products`, and the theme's
   stylesheet loads after the plugin's, so the theme won.
   Horizontal padding is 32px to match .antxc-hero-in, so the first card's edge
   lines up with the H1 above it rather than sitting 32px to its left. */
.antxc-catalog ul.products,
.antxc-catalog.woocommerce ul.products,
.antxc-catalog .woocommerce ul.products{
  max-width:1320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:34px 32px 72px !important;
  float:none !important;
}
.antxc-catalog .antxc-related{
  padding-left:32px !important;
  padding-right:32px !important;
}

/* The hero is pulled up under the header, but with no z-index it loses to any
   POSITIONED element sitting between the two — which is what left a white
   stripe painted on top of it. z-index 5 puts the hero above ordinary page
   furniture while staying well below the header (60) and the filter bar (30). */
.antxc-catalog .antxc-hero{position:relative;z-index:5}

/* Anything between the header and the hero that paints gets tagged by the JS
   walk and cleared here — same find-don't-guess approach as the header bars. */
.antxc-catalog .antxc-gap-clear{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
}


/* ==========================================================================
   v1.7
   ========================================================================== */

/* THE FILTER BUG. `li.hidden = true` sets display:none via the UA stylesheet,
   which is the weakest source there is — Astra's `.woocommerce ul.products
   li.product{display:...}` beat it, so filtered-out cards stayed on screen and
   the chips looked dead. Both the attribute and an explicit class are honoured
   here so it cannot lose again. */
.antxc-catalog ul.products li.product[hidden],
.antxc-catalog ul.products li.product.antxc-hidden,
.antxc-catalog ul.products li[hidden]{
  display:none !important;
}

/* ---------- FOUC: apply the header treatment before first paint -----------
   The overlay used to be applied by JS after DOMContentLoaded, so the original
   header painted first and snapped a moment later. The body classes and the
   geometry now come from PHP, and the bars below are cleared statically, so
   the page is correct on the first frame. The JS still measures afterwards and
   corrects the numbers if the header ever changes height — it just no longer
   has anything visible to fix.

   Submenus are deliberately NOT cleared: they need their own background or
   the dropdowns become unreadable over the page behind them. */
.antxc-catalog.antxc-header-overlay header.site-header,
.antxc-catalog.antxc-header-overlay #masthead{position:relative;z-index:60}

.antxc-catalog.antxc-header-overlay header.site-header,
.antxc-catalog.antxc-header-overlay #masthead,
.antxc-catalog.antxc-header-overlay .main-header-bar-wrap,
.antxc-catalog.antxc-header-overlay .main-header-bar,
.antxc-catalog.antxc-header-overlay .ast-main-header-wrap,
.antxc-catalog.antxc-header-overlay .site-primary-header-wrap,
.antxc-catalog.antxc-header-overlay .ast-primary-header-bar,
.antxc-catalog.antxc-header-overlay .ast-above-header-wrap,
.antxc-catalog.antxc-header-overlay .ast-below-header-wrap,
.antxc-catalog.antxc-header-overlay .ast-header-break-point .main-header-bar{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border-bottom-color:transparent !important;
}


/* ==========================================================================
   v1.8 — findings from the site's own CSS
   ========================================================================== */

/* THE DARK BAR I COULD NOT CLEAR.
   Site CSS paints the header wave like this:

     .ast-primary-header-bar { background-image:url(WaveBackground.png) }
     .ast-primary-header-bar::before { background-color:rgba(34,34,34,.3) }

   A ::before pseudo-element has no DOM node, so the JS walk that finds and
   clears painted backgrounds can never reach it — which is exactly why the
   header still read as dark grey after the wave image was cleared. It has to
   be done in CSS. */
.antxc-catalog.antxc-header-overlay .ast-primary-header-bar::before,
.antxc-catalog.antxc-header-overlay .ast-primary-header-bar::after{
  content:none !important;
  background:transparent !important;
  background-color:transparent !important;
}
.antxc-catalog.antxc-header-overlay .ast-primary-header-bar{
  background-image:none !important;
  background-color:transparent !important;
}

/* THE WHITE BAR. Astra renders the breadcrumb as a header ROW
   (.main-header-bar.ast-header-breadcrumb), not as page content — which is
   why hiding .ast-breadcrumbs-wrapper never removed the strip it sits in. */
.antxc-catalog .main-header-bar.ast-header-breadcrumb,
.antxc-catalog .ast-header-breadcrumb,
.antxc-catalog .ast-breadcrumbs-wrapper{
  display:none !important;
}

/* The site sets `h1 { text-shadow: 1px 1px #eeeeee }` globally, which put a
   pale outline on the hero title, and Astra's heading weight is heavier than
   the homepage hero's. Both restated here so the catalog H1 matches the
   homepage hero exactly rather than the theme's heading style. */
.antxc-catalog .antxc-hero h1{
  font-family:var(--antxc-font) !important;
  font-weight:300 !important;
  letter-spacing:-.01em !important;
  text-shadow:0 4px 40px rgba(0,0,0,.7) !important;
  color:#fff !important;
}

/* Site CSS puts `ul { margin-left:30px; margin-top:-5px }` on every list, and
   `.woocommerce ul.products li.product { margin-top:-10px }` on every tile.
   Both would knock the grid out of alignment. */
.antxc-catalog ul.products{margin-top:0 !important;margin-bottom:0 !important}
.antxc-catalog ul.products li.product{margin-top:0 !important;line-height:1.4}


/* Site CSS sets `#primary { margin-top: 10px }`, which pushes the hero 10px
   below where the stored overlap expects it — that 10px was the thin grey
   strip visible at the top before the script corrected the geometry. */
.antxc-catalog #primary{margin-top:0 !important}

/* REMOVED in v3.2 — this was a black band across the top of the page, added as
   insurance while the grey strip was still unexplained. Two colour stops at the
   same position:
       #000 var(--antxc-header-h), transparent var(--antxc-header-h)
   is a hard edge by construction, and it was visible as a line partway down the
   header. The strip it guarded against was `#primary{margin-top:10px}` from the
   site CSS, which is zeroed above, so the guard is not needed. The hero's own
   gradient — opaque black at 0%, easing to transparent at 100% — is the only
   thing that should be painting behind the header, and it has no hard stops. */


/* Only genuine, complete stock is green.
   'partial' = a variable product where some options are available and others
   are not. It shares the amber dot with backorder because both mean "yes, but
   check before you assume" — and the label, not the colour, carries the
   difference. The label is longer than the others, so it is allowed to shrink
   rather than push the price out of the card foot. */
.antxc-catalog .antxc-c-stock.antxc-stock-partial i,
.antxc-catalog .antxc-c-stock.antxc-stock-backorder i{background:#d9a441 !important}
.antxc-catalog .antxc-c-stock.antxc-stock-out i{background:var(--antxc-card-mute) !important}
.antxc-catalog .antxc-c-stock.antxc-stock-partial{
  min-width:0;
  font-size:11.5px;
  text-align:right;
}


/* No filter bar: the two 34px paddings would stack into a 68px gap. The bar
   is what those numbers were spaced for — without it, the grid closes up so
   the distance from the meta line to the first card stays the same as the
   distance from the meta line to the bar. */
.antxc-catalog.antxc-nobar ul.products{padding-top:6px !important}


/* Space before "Browse related".
   The grid carries 72px of bottom padding, which is right when it is the last
   thing on the page and too much when a section follows — on a 3-product
   category it left the block looking detached rather than related. Pulling it
   up to ~44px keeps it clearly a separate section (more than the 34px used
   inside the page) without stranding it.
   Done as a negative margin on the related block rather than by changing the
   grid, so the 72px still applies when nothing follows. */
.antxc-catalog .antxc-related{margin-top:-28px}


/* Space above the footer.
   Two sources were stacking: the plugin's own 72px bottom padding, plus the
   theme's container padding below #content / #primary. The footer already has
   a strong boundary — a red top border against a near-black bar — so it does
   not need a large run-up as well. 48px from the plugin, nothing from the
   theme. */
.antxc-catalog .antxc-related{padding-bottom:48px !important}
.antxc-catalog ul.products{padding-bottom:48px !important}
.antxc-catalog #content,
.antxc-catalog #primary,
.antxc-catalog .site-content,
.antxc-catalog .site-content .ast-container{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}


/* Hero rhythm.
   The four elements were spaced 14 / 18 / 20 — near enough to even that the
   description read as a fourth independent item. It is not: it belongs to the
   title. And the meta line is a different register (data, not prose), so it
   wants MORE air above it than the description does, not less.

   Reading as three tiers rather than four equal things:
       breadcrumb            12px
       title + description   10px   <- bound together
       meta                  26px   <- separated                                */
.antxc-catalog .antxc-crumbs{margin-bottom:12px !important}
.antxc-catalog .antxc-hero h1{margin-bottom:10px !important}
.antxc-catalog .antxc-meta{margin-top:26px !important}
/* Without a description there is nothing to bind to, so the title and the
   meta line simply sit close. */
.antxc-catalog .antxc-hero.nodesc h1{margin-bottom:2px !important}
.antxc-catalog .antxc-hero.nodesc .antxc-meta{margin-top:18px !important}


/* Tighter around the meta line.
   Above: 26 -> 16. Below: the hero's bottom padding 34 -> 24.

   The bottom number cannot move on its own — it is half of a pair. The space
   above the filter bar and the space below it were deliberately matched, so
   the grid's top padding moves with it. Change one, change the other, or the
   bar stops sitting centred between the hero and the products. */
.antxc-catalog .antxc-meta{margin-top:16px !important}
.antxc-catalog .antxc-hero.nodesc .antxc-meta{margin-top:14px !important}
.antxc-catalog .antxc-hero-in{padding-bottom:24px !important}
.antxc-catalog ul.products{padding-top:24px !important}
/* No bar: the two paddings stack, so the grid closes up to keep the distance
   from the meta line to the first card close to the 24px used above the bar. */
.antxc-catalog.antxc-nobar ul.products{padding-top:8px !important}


/* ==========================================================================
   MOBILE  (v3.6)

   SPECIFICITY, NOT SOURCE ORDER. The v3.5 block used `.antxc-catalog
   ul.products` — two classes. The grid-centering rule above it is
   `.antxc-catalog.woocommerce ul.products`, which is THREE (the body carries
   `woocommerce`), so it won on specificity no matter that the mobile rules
   came later in the file. Same for the sort control: `select.antxc-sort`
   outranks a plain class. Class count is compared before source order, and
   `!important` on both sides does not change that.

   Every selector here is prefixed `body.antxc-catalog.woocommerce` so it
   outranks anything above it rather than merely following it.
   ========================================================================== */
@media (max-width:820px){

  /* Gutters: 32px each side spends ~16% of a 400px screen on nothing. */
  body.antxc-catalog.woocommerce .antxc-hero-in,
  body.antxc-catalog.woocommerce .antxc-filterbar-in,
  body.antxc-catalog.woocommerce .antxc-related{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body.antxc-catalog.woocommerce ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    max-width:none !important;
  }

  /* The label sits on its own line so the fourth chip is not orphaned, but
     the line gap was doing double duty — the label's own margin AND the
     flex row-gap. Row and column gaps are set separately so the chips can
     breathe sideways without pushing the label away from them. */
  body.antxc-catalog.woocommerce .antxc-filterbar-in{gap:0 !important}
  body.antxc-catalog.woocommerce .antxc-fg{
    width:100%;
    flex-wrap:wrap;
    column-gap:6px !important;
    row-gap:4px !important;
  }
  body.antxc-catalog.woocommerce .antxc-fg-lbl{
    width:100%;
    margin:0 0 2px 0 !important;
    line-height:1.2;
  }
  body.antxc-catalog.woocommerce .antxc-chip{font-size:12px;padding:5px 10px}

  /* Sort: full width, and further from the chips so it reads as a separate
     control rather than a fifth item in the row. */
  body.antxc-catalog.woocommerce .antxc-push{display:none !important}
  body.antxc-catalog.woocommerce select.antxc-sort{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin-top:18px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
    background-position:calc(100% - 19px) 54%, calc(100% - 14px) 54% !important;
  }
  body.antxc-catalog.woocommerce .antxc-count{width:100%;margin-top:12px}

  body.antxc-catalog.woocommerce .antxc-sibs{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }
  body.antxc-catalog.woocommerce .antxc-hero-in{padding-bottom:20px !important}
  body.antxc-catalog.woocommerce .antxc-meta{margin-top:14px !important;font-size:12.5px}
}

@media (max-width:420px){
  body.antxc-catalog.woocommerce ul.products{gap:10px !important}
  body.antxc-catalog.woocommerce .antxc-c-body{padding:11px 12px 13px}
  body.antxc-catalog.woocommerce .antxc-c-name{font-size:14px}
}