/* =========================================================
   Alliance Products Listing — Bundled Stylesheet
   Self-contained; does not depend on theme styles.
   ========================================================= */

.alliance-products { font-family: var(--au-font-body); color: var(--au-navy); }

.alliance-products * { box-sizing: border-box; }

.alliance-products a { text-decoration: none; color: inherit; }

/* ── Layout ── */
.alliance-products .products-page-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: start;
  padding-top: 40px;
}

/* ── Sidebar ── */
.alliance-products .sidebar { position: sticky; top: 80px; }

.alliance-products .sidebar-lbl {
  font-family: var(--au-font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--au-charcoal);
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  border: none;
  margin: 0 0 14px;
  line-height: 1.3;
}

.alliance-products .sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alliance-products .sidebar-item {
  font-family: var(--au-font-body);
  font-size: 18px;
  font-weight: 400;
  color: var(--au-text-mid);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.alliance-products .sidebar-item:hover,
.alliance-products .sidebar-item.active {
  background: #F9F7F4;
  color: var(--au-navy);
  font-weight: 500;
}

/* The page hero (.au-page-hero) used to live here as .pc-hero — it's
   now in alliance-child/assets/css/tokens.css as a properly-shared
   component, since the Resources page (which isn't products-related)
   uses it too. See tokens.css for the live rules. */

/* ── Section titles ── */
.alliance-products .prod-section {
  margin-bottom: 56px;
  scroll-margin-top: 88px;
}
.alliance-products .prod-section:last-child { margin-bottom: 0; }

.alliance-products .prod-section-title {
  font-family: var(--au-font-heading);
  font-size: 28px;
  font-weight: 600;
  color: var(--au-charcoal);
  letter-spacing: -.4px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--au-border);
}

/* ── Product grid (rows of three) ── */
.alliance-products .full-prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── Product card ── */
.alliance-products .full-prod-card {
  background: var(--au-white);
  border: 1px solid var(--au-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.alliance-products .full-prod-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: #C0BBB3;
  transform: translateY(-3px);
}

/* ── Card image ── */
.alliance-products .full-prod-vis {
  aspect-ratio: 4 / 3;
  background: var(--au-cream);
  border-bottom: 1px solid var(--au-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--au-text-muted);
  font-size: 12px;
  overflow: hidden;
  position: relative;
}

.alliance-products .full-prod-vis .full-prod-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.alliance-products .full-prod-no-img {
  font-size: 12px;
  color: var(--au-text-muted);
}

/* ── Card body ── */
.alliance-products .full-prod-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.alliance-products .full-prod-name {
  font-family: var(--au-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--au-navy);
  letter-spacing: -.1px;
  line-height: 1.3;
}

.alliance-products .full-prod-desc {
  font-size: 13px;
  color: var(--au-text-mid);
  line-height: 1.6;
  flex: 1;
}

.alliance-products .full-prod-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--au-navy);
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid #ECEAE5;
  transition: letter-spacing .15s ease;
}

.alliance-products .full-prod-card:hover .full-prod-link {
  letter-spacing: .3px;
}

/* ── Smooth anchor scroll for sidebar links ── */
html { scroll-behavior: smooth; }

/* ── Generic container (used directly on the product-category archive
   template, and as the base that .pdp-cta-band .pdp-container below
   builds on for the CTA band specifically) ── */
.alliance-products .pdp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ── Empty state ── */
.alliance-products .alliance-empty {
  padding: 40px;
  text-align: center;
  color: var(--au-text-muted);
  background: #F9F7F4;
  border: 1px dashed var(--au-border);
  border-radius: 8px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .alliance-products .products-page-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .alliance-products .sidebar { position: static; }
  .alliance-products .sidebar-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .alliance-products .full-prod-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .alliance-products .full-prod-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   CTA Band (matches the homepage / PDP CTA pattern)
   ========================================================= */
.alliance-products .pdp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--au-font-button);
  font-size: var(--au-btn-font-size);
  font-weight: var(--au-btn-font-weight);
  letter-spacing: var(--au-btn-letter-spacing);
  text-transform: var(--au-btn-text-transform);
  min-height: var(--au-btn-min-height);
  padding: 5px 20px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all .15s ease;
}
.alliance-products .pdp-btn-lg { padding: 8px 28px; }
.alliance-products .pdp-btn-primary {
  background: var(--au-gold);
  color: var(--au-white);
  border-color: var(--au-gold);
}
.alliance-products .pdp-btn-primary:hover {
  background: var(--au-gold-dark);
  border-color: var(--au-gold-dark);
  color: var(--au-white);
}
.alliance-products .pdp-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.22);
}
.alliance-products .pdp-btn-ghost:hover {
  border-color: var(--au-tan-light);
  color: var(--au-tan-light);
}

.alliance-products .pdp-cta-band {
  background: var(--au-charcoal);
  color: var(--au-white);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
/* Gap before the CTA band ONLY when it directly follows a grid wrapped
   in .pdp-container (Products listing + category archive pages — the
   gap separates the band from the grid above it). On pages where the
   CTA band is the only thing in its own wrapper (About, Home), this
   selector simply doesn't match, so no margin-top — no per-page
   override class needed, unlike before. */
.alliance-products .pdp-container + .pdp-cta-band {
  margin-top: 72px;
}
.alliance-products .pdp-cta-band::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 50%, black 10%, transparent 65%);
          mask-image: radial-gradient(ellipse at 100% 50%, black 10%, transparent 65%);
}
.alliance-products .pdp-cta-band .pdp-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.alliance-products .pdp-cta-headline {
  font-family: var(--au-font-heading);
  font-size: 30px;
  font-weight: 500;
  color: var(--au-white);
  letter-spacing: -.4px;
  margin: 0 0 8px;
  line-height: 1.2;
}
.alliance-products .pdp-cta-sub {
  font-size: 15px;
  color: rgba(255,255,255,.55);
  margin: 0;
  max-width: 540px;
  line-height: 1.6;
}
.alliance-products .pdp-cta-contact {
  font-family: var(--au-font-body);
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin: 14px 0 0;
  letter-spacing: .2px;
}
.alliance-products .pdp-cta-contact a {
  color: var(--au-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(191,156,88,.45);
  transition: color .15s ease, border-color .15s ease;
}
.alliance-products .pdp-cta-contact a:hover {
  color: var(--au-white);
  border-bottom-color: rgba(255,255,255,.5);
}
.alliance-products .pdp-cta-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.alliance-products .pdp-cta-band .c-mark {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  width: 18px;
  height: 18px;
}
.alliance-products .pdp-cta-band .c-tl { top: 20px;    left: 20px;  border-top: 1.5px solid; border-left: 1.5px solid; }
.alliance-products .pdp-cta-band .c-tr { top: 20px;    right: 20px; border-top: 1.5px solid; border-right: 1.5px solid; }
.alliance-products .pdp-cta-band .c-bl { bottom: 20px; left: 20px;  border-bottom: 1.5px solid; border-left: 1.5px solid; }
.alliance-products .pdp-cta-band .c-br { bottom: 20px; right: 20px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
.alliance-products .pdp-cta-band .c-lt  { border-color: rgba(255,255,255,.22); }
.alliance-products .pdp-cta-band .c-acc { border-color: rgba(191,156,88,.7); }

@media (max-width: 720px) {
  .alliance-products .pdp-cta-band .pdp-container { flex-direction: column; align-items: flex-start; padding: 0 24px; }
  .alliance-products .pdp-cta-headline { font-size: 26px; }
}