/*
Theme Name: generatepress-child
Template: generatepress
*/

/* ===============================
   Global layout tokens (CLEAN SYSTEM)
   =============================== */
:root {
  /* Page layout */
  --page-w: min(96vw, 2200px);

  /* Content width (no longer enforced as hard cap) */
  --content-w: min(92vw, 1800px);

  /* Sidebar */
  --sidebar-w: clamp(260px, 18vw, 360px);

  /* Spacing */
  --pad-x: 16px;
  --gap: 16px;
  --divider: #eee;
}

/* Tablet / small desktop */
@media (min-width: 768px) {
  :root {
    --sidebar-w: clamp(280px, 18vw, 360px);
    --pad-x: 20px;
    --gap: 20px;
  }
}

/* Standard desktop */
@media (min-width: 1200px) {
  :root {
    --sidebar-w: clamp(320px, 20vw, 420px);
    --pad-x: 28px;
    --gap: 24px;
  }
}

/* Ultra-wide */
@media (min-width: 2000px) {
  :root {
    --sidebar-w: clamp(380px, 18vw, 460px);
  }
}


/* ======================================
   GLOBAL ARTICLE / CONTENT WIDTH (FIXED)
   ====================================== */
.entry-content,
.dynamic-entry-content,
.site-main .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
}

.site-main article {
  width: 100%;
}

.site-main article {
  width: 100%;
}
/* Force full-width content flow */
.site-main,
.site-main article {
  width: 100%;
  min-width: 0;
}

/* Keep your existing override */
.entry-content,
.dynamic-entry-content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
}

/* ===============================
   Core layout containers (FIXED)
   =============================== */

/* Top-level container (the REAL limiter) */
.site.grid-container.container {
  max-width: var(--page-w);
  margin-left: auto;
  margin-right: auto;
}

/* Remove inner width constraint */
.inside-site-content {
  width: 100%;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* Ensure no hidden caps */
.site-main,
.content-area {
  max-width: none;
}

.site-content {
  display: flex;
  max-width: none;
}

/* 🔥 THIS is your real fix */
.inside-article {
  max-width: none !important;
  width: 100% !important;
}

/* ===============================
   Two-column layout (sidebar left)
   =============================== */
@media (min-width: 769px) {

  .site-content:has(.element-sidebar-left) {
    display: flex;
    align-items: flex-start;
  }

  .element-sidebar-left {
    flex: 0 0 var(--sidebar-w);
    max-width: var(--sidebar-w);
    margin-right: 32px;
    padding-right: 22px;
    border-right: 1px solid var(--divider);
    box-sizing: border-box;
  }

  .element-sidebar-left .mega-menu-wrap {
    border-right: none;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
  }

  .site-content:has(.element-sidebar-left) .site-main,
  .site-content:has(.element-sidebar-left) .content-area,
  .site-content:has(.element-sidebar-left) #primary {
    flex: 1 1 0%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 8px;
    margin: 0 !important;
  }
}

/* Critical override */
.site-content > .content-area {
  width: 100%;
  max-width: none;
}


.dynamic-entry-content > [class*="gb-element"] {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}


/* Mobile (<= 768px): stack menu above content */
@media (max-width: 768px) {
  .grid-container:has(.element-sidebar-left) {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .element-sidebar-left {
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--divider);
    margin: 0 0 var(--gap) 0;
    padding: 0;
  }

  .element-sidebar-left .mega-menu-wrap {
    border-right: none;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
  }

  .element-sidebar-left .mega-menu {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }
}

/* ===============================
   Buttons (use your menu button look globally)
   =============================== */
.mega-menu-button,
.button,
input[type="submit"],
.wp-block-button__link,
a.button,
a.wp-block-button__link {
  display: inline-block;
  text-align: center;
  background-color: #003366;
  color: #ffffff !important;
  border: 2px solid #003366;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

.mega-menu-button:hover,
.mega-menu-button:focus,
.button:hover,
.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
a.button:hover,
a.button:focus {
  background-color: #ffffff;
  color: #003366 !important;
  border-color: #003366;
  text-decoration: none;
}

/* ===============================
   Small / Inline Mega Menu Button
   =============================== */
.mega-menu-button--small {
  display: inline-block;
  padding: 3px 8px !important;   /* compact */
  font-size: 0.75em;             /* smaller text */
  line-height: 1.3;
  border-width: 1px;             /* lighter border */
  border-radius: 999px !important; /* pill style */
  text-transform: none;          /* reads better inline */
  font-weight: 600;
  vertical-align: baseline;      /* aligns with text */
}

.usla-service-row-mini__action
.mega-menu-button.mega-menu-button--small {
    padding: 6px 14px;
    font-size: 0.875rem;
    line-height: 1;
}


.usla-pay-services a {
  text-decoration: none !important;
}
.usla-pay-services a:hover,
.usla-pay-services a:focus {
  text-decoration: none !important;
}

/* Hide GP’s default mobile toggles if you’re using Max Mega Menu’s */
@media (max-width: 768px) {
  .site-header .menu-toggle,
  .main-navigation .menu-toggle,
  .secondary-navigation .menu-toggle {
    display: none !important;
  }
}


/* Exact hover for the UPE submit button on /usla-add-payment */
.usla-add-payment .wcpay-upe-container .mega-menu-button:hover,
.usla-add-payment .wcpay-upe-container .mega-menu-button:focus,
.usla-add-payment form#add_payment_method .mega-menu-button:hover,
.usla-add-payment form#add_payment_method .mega-menu-button:focus {
  background-color: #ffffff !important;
  color: #003366 !important;
  border-color: #003366 !important;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}


/* ===============================
   Table wrapper (site-wide)
   =============================== */
.table-wrapper { width: 100%; overflow-x: auto; margin-bottom: 1.5em; }
.entry-content table { width: 100%; max-width: 100%; border-collapse: collapse; min-width: 600px; }
.entry-content table, .entry-content th, .entry-content td { border: 1px solid #000; }
.entry-content th, .entry-content td { padding: 4px 8px; vertical-align: top; }
.entry-content th { text-align: center; background-color: #f8f8f8; }

@media (max-width: 768px) {
  .entry-content table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===============================
   Footer logos (responsive tweak)
   =============================== */
@media (min-width: 769px) and (max-width: 782px) {
  .footer-logos { text-align: center; }
  .footer-logos img {
    display: inline-block;
    width: auto !important;
    max-width: 150px !important;
    height: auto;
    margin: 0 8px 12px;
  }
}
@media (max-width: 768px) {
  .footer-logos { text-align: center; }
  .footer-logos img {
    display: inline-block;
    width: auto;
    max-width: 50%;
    height: auto;
    margin: 0 8px 12px;
  }
}

/* ===============================
   WS Form – force full width pages/tabs
   =============================== */
.wsf-form .wsf-pages,
.wsf-form .wsf-tabs,
.wsf-form .wsf-page,
.wsf-form .wsf-tab {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  box-sizing: border-box;
  min-width: 0;
}
.wsf-form .wsf-page .wsf-section,
.wsf-form .wsf-tab .wsf-section { max-width: 100% !important; }
.entry-content .wsf-form { margin-left: 0; margin-right: 0; }

/* ===============================
   Membership cards (kept concise)
   =============================== */
.wl-membership-grid { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 20px 0; }
.wl-membership-card {
  width: 100%; max-width: 500px; border: 1px solid #333; border-radius: 10px;
  background: #fff; text-align: center; padding: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.wl-membership-card__header { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; }
.wl-member-name { font-size: 1.25rem; font-weight: 600; margin: 0; }
.wl-membership-card__title { font-size: 1rem; font-weight: 500; margin: 0; color: #444; }
.wl-status-pill { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; border: 1px solid transparent; }
.wl-membership-dates { margin: 12px 0; font-size: 0.95rem; display: flex; flex-direction: column; gap: 4px; }
.wl-renew-hint { font-size: 0.9rem; color: #444; margin-top: 10px; }
.wl-membership-card__footer { margin-top: 15px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wl-renew-button, .wl-membership-card__footer .button { font-weight: 600; padding: 8px 18px; border-radius: 4px; text-decoration: none; }
.wl-status-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid; /* ⬅ thicker border */
}

/* Active */
.wl-status-pill.status-active {
  background: #e8f8ef;
  color: #0e7a3e;
  border-color: #0e7a3e; /* darker, matches text */
}

/* Expired */
.wl-status-pill.status-expired {
  background: #ffefef;
  color: #b00020;
  border-color: #b00020; /* strong red outline */
}

/* Cancelled */
.wl-status-pill.status-cancelled {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #6b7280;
}

/* Not Active */
.wl-status-pill.status-inactive {
  background: #f8f9fb;
  color: #374151;
  border-color: #374151;
}


/* ===============================
   USLA Account width & cards
   =============================== */
.usla-account .woocommerce-MyAccount-content {
  /* fill the space to the right of the sidebar within our page clamp */
  max-width: calc(var(--page-w) - var(--sidebar-w) - (var(--pad-x) * 2));
  margin-left: 0;
  margin-right: auto;
}

/* Generic card */
.usla-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 20px 24px;
  margin: 22px 0;
  max-width: 100%; /* allow full width of content area */
}

/* Orders list layout (grid-like rows) */
.usla-table { display: grid; gap: 12px; }
.usla-row,
.usla-row.usla-row--head {
  display: grid;
  grid-template-columns: 140px 1fr 180px 160px 140px; /* Order | Date | Status | Total | Action */
  align-items: center;
  gap: 24px;
}
.usla-row--head { font-weight: 600; background: var(--gp-color-contrast-4, #f3f4f6); padding: 12px 16px; border-radius: 10px; }
.usla-row:not(.usla-row--head) {
  background: #fff; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px; padding: 14px 16px;
}
.usla-row .usla-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px !important; }
.usla-row a.mega-menu-button { white-space: nowrap; text-decoration: none; }

/* Tighten/tablet */
@media (max-width: 1024px) {
  .usla-row, .usla-row.usla-row--head {
    grid-template-columns: 110px 1fr 150px 120px 120px;
    gap: 16px;
  }
  .usla-account .woocommerce-MyAccount-content { max-width: calc(100% - var(--pad-x) * 2); }
}

/* Mobile: stack rows */
@media (max-width: 780px) {
  .usla-row.usla-row--head { display: none; }
  .usla-row {
    grid-template-columns: 1fr auto;
    row-gap: 8px;
  }
  .usla-row > .usla-actions { justify-content: flex-start; }
}

/* Order details tables: room to breathe */
.usla-card--order table.shop_table {
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 0 !important;
  background: transparent;
  table-layout: auto;
}
.usla-card--order table.shop_table th,
.usla-card--order table.shop_table td {
  border: none;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.usla-card--order table.shop_table thead th { font-weight: 600; background: rgba(0,0,0,.035); }
.usla-card--order table.shop_table td.product-name,
.usla-card--order table.shop_table th.product-name { width: 68%; }
.usla-card--order table.shop_table td.product-total,
.usla-card--order table.shop_table th.product-total { width: 32%; text-align: right; white-space: nowrap; }
.usla-card--order .related-subscriptions table.shop_table td:last-child { text-align: right; white-space: nowrap; width: 42%; }

@media (max-width: 900px) {
  .usla-card--order table.shop_table th,
  .usla-card--order table.shop_table td { padding: 12px 14px; }
}



/* ——— USLA Subscription View ——— */
.usla-subscription-view { max-width: none; }

/* Meta grid (status, dates, payment, actions) */
.usla-subscription__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px 28px;
  margin-top: 6px;
}
.usla-subscription__meta > div span {
  display: block; font-size: .9rem; color: #6b7280; margin-bottom: 4px;
}
.usla-subscription__meta > div b { font-weight: 600; }

/* Actions stretch the full row on desktop */
.usla-subscription__actions {
  grid-column: 1 / -1;
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
}
.usla-subscription__actions .mega-menu-button { padding: 8px 16px; }

/* Totals & tables */
.usla-shop-table {
  width: 100%; border: none; border-collapse: separate; border-spacing: 0 !important;
}
.usla-shop-table thead th {
  text-align: left; font-weight: 600; background: rgba(0,0,0,.035);
  padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.usla-shop-table tbody td, .usla-shop-table tfoot th, .usla-shop-table tfoot td {
  padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.06);
}
.usla-shop-table tfoot th { font-weight: 600; }
.usla-right { text-align: right; white-space: nowrap; }
.usla-qty { color: #6b7280; font-size: .9rem; margin-left: 4px; }

/* Addresses two-up */
.usla-subscription__addresses {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px;
}
.usla-address { line-height: 1.5; }

/* Typography helpers */
.usla-title { margin: 0 0 6px 0; }
.usla-h3 { margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; }

/* Responsive */
@media (max-width: 980px) {
  .usla-subscription__meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .usla-subscription__meta { grid-template-columns: 1fr; }
  .usla-subscription__addresses { grid-template-columns: 1fr; }
}




/* Make Manage links in subscription tables look like our buttons */
.woocommerce-account .shop_table a.mega-menu-button {
  display: inline-block;
  text-decoration: none;
}


/* =========================================
   My USLA / Woo My Account — compact type
   ========================================= */

/* Keep the content area wide (non-mobile) */
@media (min-width: 769px) {
  .woocommerce-account .woocommerce-MyAccount-content {
    max-width: 100%;   /* wider but still centered */
    margin-left: 0;      /* let your layout CSS position this */
  }
}

/* Global font scale-down inside My Account */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce * {
  font-size: 14px;             /* base */
  line-height: 1.35;
}

/* Headings */
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce .entry-content h2,
.usla-title {
  font-size: 20px;             /* was larger */
  line-height: 1.25;
  margin-bottom: 12px;
}

/* Tables (Orders, Addresses, etc.) */
.woocommerce-account .woocommerce table.shop_table th,
.woocommerce-account .woocommerce table.shop_table td {
  font-size: 13.5px;
  padding: 10px 14px;
}
.woocommerce-account .woocommerce table.shop_table thead th {
  font-weight: 600;
}

/* Buttons (View / Manage / etc.) */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.mega-menu-button,
.usla-btn {
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 14px;
  line-height: 1.2;
}

/* Left navigation menu (your USLA sidebar) */
.usla-sidebar a,
.usla-sidebar li a {
  font-size: 14px;
  padding: 8px 12px;
}

/* USLA custom components */
.usla-card { font-size: 14px; }
.usla-card .usla-name { font-size: 18px; }
.usla-card .usla-plan { font-size: 14px; }
.usla-pill { font-size: 12px; padding: 4px 10px; }
.usla-table .usla-row > div { padding: 10px 12px; }

/* Tighten spacing between list rows (Orders list look) */
.woocommerce-account .woocommerce .order,
.woocommerce-account .woocommerce .woocommerce-orders-table__row {
  margin-bottom: 10px;
}

/* Mobile: don’t over-shrink */
@media (max-width: 480px) {
  .woocommerce-account .woocommerce,
  .woocommerce-account .woocommerce * { font-size: 15px; }
  .woocommerce-account .woocommerce h2,
  .usla-title { font-size: 19px; }
}



/* ===== My USLA → Orders: compact rows ===== */

/* 1) Make the orders table use tight spacing (kills big row gaps) */
.woocommerce-account .woocommerce table.shop_table.woocommerce-orders-table {
  border-collapse: collapse !important;     /* no row gaps */
  border-spacing: 0 !important;
}

/* 2) Reduce cell padding (height of each row) */
.woocommerce-account .woocommerce table.shop_table.woocommerce-orders-table td,
.woocommerce-account .woocommerce table.shop_table.woocommerce-orders-table th {
  padding: 4px 12px !important;             /* was ~16–20px */
  line-height: 1.25;
}

/* 3) If your theme turns rows into “cards,” neutralize extra margin/padding */
.woocommerce-account .woocommerce .woocommerce-orders-table__row {
  margin: 0 !important;                     /* kill outer row margins */
  box-shadow: none !important;
  border-radius: 8px;                        /* subtle, optional */
  background: #fff;                          /* keep clean background */
}

/* 4) Subtle separators instead of big gaps */
.woocommerce-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr {
  border-bottom: 1px solid #eee;
}
.woocommerce-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr:last-child {
  border-bottom: 0;
}

/* 5) Compact the VIEW button so it doesn't inflate the row height */
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button {
  padding: 4px 12px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  min-height: 32px;                          /* smaller */
  border-radius: 10px;
}


/* My USLA (scoped) — compact table rows */
.usla-myaccount .usla-table .usla-row > div {
  padding: 2px 10px !important;        /* was 10px 12px */
  line-height: 1.25;
}

/* Optional: slimmer header row + separators */
.usla-myaccount .usla-table .usla-row--head > div {
  padding: 2px 10px  !important;
  font-weight: 600;
}
.usla-myaccount .usla-table .usla-row {
  border-bottom: 1px solid #eee;
}
.usla-myaccount .usla-table .usla-row:last-child {
  border-bottom: 1;
}

/* Compact the action buttons so they don't reinflate the row */
.usla-myaccount .mega-menu-button,
.usla-myaccount .usla-btn {
  padding: 6px 12px  !important;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 10px;
}


/* ===========================
   My USLA — shared compact UI
   =========================== */

/* Wrapper used on cards inside My Account */
.usla-myaccount { font-size: 14px; }

/* Titles */
.usla-myaccount .usla-title {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* Compact USLA table rows on account pages */
.usla-myaccount .usla-table .usla-row > div {
  padding: 6px 10px;
  line-height: 1.25;
}
.usla-myaccount .usla-table .usla-row--head > div {
  padding: 8px 10px;
  font-weight: 600;
}
.usla-myaccount .usla-table .usla-row { border-bottom: 1px solid #eee; }
.usla-myaccount .usla-table .usla-row:last-child { border-bottom: 0; }

/* Buttons default compact */
.usla-myaccount .mega-menu-button,
.usla-myaccount .usla-btn {
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 10px;
}

/* Reusable footer action area (adds gap ABOVE) */
.usla-actions--footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

/* Footer buttons can be a touch larger */
.usla-actions--footer .mega-menu-button,
.usla-actions--footer .usla-btn {
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 14px;
}

/* Woo payment methods table + add area tidy */
.woocommerce-account .woocommerce table.my_account_payment_methods,
.woocommerce-account .woocommerce table.woocommerce-MyAccount-paymentMethods {
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
}




/*=======================================================
    USLA-styled Add Payment Method page 
    ===================================================*/
.usla-myaccount form#add_payment_method,
.usla-myaccount form.woocommerce-AddPaymentMethod {
  max-width: 100%; /* keep it tidy and centered inside the card */
}

.usla-myaccount form#add_payment_method .form-row,
.usla-myaccount form.woocommerce-AddPaymentMethod .form-row {
  margin-bottom: 10px;
}

.usla-myaccount form#add_payment_method input.input-text,
.usla-myaccount form.woocommerce-AddPaymentMethod input.input-text,
.usla-myaccount form#add_payment_method select,
.usla-myaccount form.woocommerce-AddPaymentMethod select {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

/* Submit button on add-payment form */
.usla-myaccount form#add_payment_method .button,
.usla-myaccount form.woocommerce-AddPaymentMethod .button {
  padding: 10px 18px;
  line-height: 1.2;
  border-radius: 14px;
  font-size: 14px;
}

/* Optional: make the submit look like your primary USLA button */
.usla-myaccount form#add_payment_method .button,
.usla-myaccount form.woocommerce-AddPaymentMethod .button {
  background: var(--usla-blue, #0a3b68);
  color: #fff;
  text-transform: none;
}



/* USLA Add Payment Method — restyle Woo submit */
.usla-myaccount form#add_payment_method .button,
.usla-myaccount form.woocommerce-AddPaymentMethod .button {
  /* look/size like your compact buttons */
  background: var(--usla-blue, #0a3b68);
  color: #fff;
  width: auto;                 /* no full-width */
  display: inline-block;       /* sit inline */
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 14px;
  text-transform: none;
  box-shadow: none;
  border: 0;
}

/* Hover/focus to match your buttons */
.usla-myaccount form#add_payment_method .button:hover,
.usla-myaccount form#add_payment_method .button:focus,
.usla-myaccount form.woocommerce-AddPaymentMethod .button:hover,
.usla-myaccount form.woocommerce-AddPaymentMethod .button:focus {
  background: #082f54; /* slightly darker */
  color: #fff;
}


/*Temp test for payments*/
/* Keep the payment fields visible and unclipped */
.usla-myaccount .payment_box { display: block !important; visibility: visible !important; }
.usla-myaccount .wcpay-upe-element,
.usla-myaccount .wcpay-card-container { display: block !important; min-height: 44px; }
.usla-card { overflow: visible; } /* avoid clipping if your card sets overflow:hidden */




/* USLA: keep the My Account content from collapsing */
body.woocommerce-account .site-main,
body.woocommerce-account .content-area {
  width: auto !important;
  flex: 1 1 auto !important;
}

/* The card wrapper on account pages should be full width (within the page) */
body.woocommerce-account .entry-content > .woocommerce.usla-card,
body.woocommerce-account .entry-content > .usla-card.usla-myaccount {
  display: block;
  width: 100%;
  max-width: 100%;   /* tweak 900–1200 to taste */
  margin: 0 auto;
}

/* Don’t let nested elements force weird sizing */
body.woocommerce-account .usla-card * {
  min-width: 0;
  box-sizing: border-box;
}

/* Make sure Woo’s add-payment form is visible */
form.woocommerce-AddPaymentMethod,
form#add_payment_method {
  display: block !important;
}


/* ===== USLA fix-pack: prevent content collapse & show payment fields ===== */

/* 1) Flex child must be allowed to grow — otherwise it can collapse to padding (~24px) */
@media (min-width: 769px) {
  .grid-container:has(.element-sidebar-left) .site-main,
  .grid-container:has(.element-sidebar-left) .content-area,
  .grid-container:has(.element-sidebar-left) #primary {
    flex: 1 1 0%;
    width: 100%;
    max-width: 100%;
    min-width: 0;              /* ← critical: prevents the 24px “toothpick” column */
  }
}

/* 2) Make Woo account content fill available width */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .entry-content,
.woocommerce-account .woocommerce {
  width: 100%;
  min-width: 0;
}

/* 3) Add Payment Method form: force sane width + visible fields */
.usla-myaccount form#add_payment_method,
.usla-myaccount form.woocommerce-AddPaymentMethod {
  width: 100%;
  max-width: 100%;
}

.usla-myaccount .woocommerce #add_payment_method .form-row,
.usla-myaccount .woocommerce .woocommerce-AddPaymentMethod .form-row {
  width: 100%;
}

/* 4) Gateway elements sizing (WooPayments/Stripe UPE) */
.usla-myaccount .wcpay-upe-element,
.usla-myaccount .wcpay-card-container,
.usla-myaccount .StripeElement,
.usla-myaccount .wc-stripe-elements-field {
  display: block !important;
  width: 100% !important;
  min-height: 44px;
}

/* 5) Ensure the payment box is not collapsed/hidden */
.usla-myaccount .payment_box {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  padding: 10px 0;
}

/* 6) Don’t clip absolutely-positioned gateway UI inside our card */
.usla-card { overflow: visible; }

/* 7) Headings should stay horizontal even if a narrow container tries to wrap every character */
.usla-myaccount h3,
.usla-myaccount .usla-title {
  writing-mode: horizontal-tb;
  white-space: normal;
}


/* Make the "Add Payment Method" article full width across all breakpoints */
#post-51118.grid-33,
#post-51118.tablet-grid-50,
#post-51118.mobile-grid-100 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* If Generate columns use calc() max-width on children, neutralize it */
#post-51118.grid-parent > * {
  max-width: 100% !important;
}

/* Belt-and-suspenders: ensure the Woo form and payment box occupy the width */
#post-51118 .woocommerce,
#post-51118 form#add_payment_method,
#post-51118 .woocommerce-Payment,
#post-51118 .woocommerce-Payment .payment_methods,
#post-51118 .woocommerce-PaymentBox {
  width: 100% !important;
}

/* Keep gateway UI visible (overrides inline style="display:none") */
#post-51118 .payment_box {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}


.usla-myaccount .payment_box { display:block !important; visibility:visible !important; }


/* Wider Add Payment card (desktop only) */
@media (min-width: 1024px) {
  body.usla-add-payment .usla-card.usla-myaccount {
    max-width: 100%;   /* pick 1000–1200 to taste */
  }
}

/* Optional: bump a little more on very wide screens */
@media (min-width: 1440px) {
  body.usla-add-payment .usla-card.usla-myaccount {
    max-width: 100%;
  }
}

/* Ensure inner UPE fields can use the space */
body.usla-add-payment .woocommerce form .form-row,
body.usla-add-payment .woocommerce .wcpay-upe {
  max-width: none;
}



/* Only on the Add Payment page */
body.usla-add-payment .wcpay-upe button[type="submit"].mega-menu-button,
body.usla-add-payment form#add_payment_method button[type="submit"].mega-menu-button {
  width: auto;          /* stop full-width */
  display: inline-flex; /* match your other buttons */
  margin-top: 8px;
}

/* Optional – make the container align to the left of the card footer line */
body.usla-add-payment .woocommerce .form-row {
  max-width: none;
}



/* Mega button should style anchors, buttons & submit inputs */
a.mega-menu-button,
button.mega-menu-button,
input.mega-menu-button[type="submit"] {
  /* your existing mega-menu-button rules here */
}

/* If your mega class relies on removing Woo's .button look */
button.mega-menu-button.button,
input.mega-menu-button.button {
  /* optional: neutralize Woo's .button styles if needed */
  border: none;
  box-shadow: none;
}









/* Add Payment page submit: force mega-menu look */
.usla-card.usla-myaccount #place_order,
.usla-card.usla-myaccount button#place_order.mega-menu-button,
.usla-card.usla-myaccount button#place_order.components-button.is-primary {
  background-color: #003366 !important;
  color: #ffffff !important;
  border: 2px solid #003366 !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  box-shadow: none !important; /* neutralize WP Components shadow */
}

.usla-card.usla-myaccount #place_order:hover,
.usla-card.usla-myaccount #place_order:focus {
  background-color: #ffffff !important;
  color: #003366 !important;
  border-color: #003366 !important;
}


/* USLA Add Payment: restyle WooPayments UPE submit */
.usla-card.usla-myaccount .components-button.is-primary {
  /* shape/size */
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  line-height: 1.2 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;

  /* colors match .mega-menu-button */
  background-color: #003366 !important;
  color: #ffffff !important;
  border: 2px solid #003366 !important;

  /* clean up Gutenberg defaults */
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all .25s ease-in-out !important;
}

.usla-card.usla-myaccount .components-button.is-primary:hover,
.usla-card.usla-myaccount .components-button.is-primary:focus {
  background-color: #ffffff !important;
  color: #003366 !important;
  border-color: #003366 !important;
}

/* Busy/disabled state should still look right */
.usla-card.usla-myaccount .components-button.is-primary.is-busy,
.usla-card.usla-myaccount .components-button.is-primary:disabled {
  opacity: .75 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}






/* Scope ONLY to your custom add payment page */
.woocommerce.usla-add-payment .mega-menu-button{
  /* keep your existing colors; just add motion */
  transition: filter .18s ease, box-shadow .18s ease, transform .12s ease;
  will-change: filter, box-shadow, transform;
}

/* Hover/focus – only when enabled */
.woocommerce.usla-add-payment a.button.mega-menu-button:not(:disabled):hover,
.woocommerce.usla-add-payment button.button.mega-menu-button:not(:disabled):hover,
.woocommerce.usla-add-payment .mega-menu-button:not(:disabled):focus-visible{
  /* don’t change the base color — just shade it */
  filter: brightness(0.92) saturate(1.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.25), 0 3px 10px -6px rgba(0,0,0,.18);
  outline: none;
}

/* Pressed */
.woocommerce.usla-add-payment .mega-menu-button:active{
  transform: translateY(0);
}

/* Disabled (UPE keeps it disabled until inputs complete) */
.woocommerce.usla-add-payment .mega-menu-button:disabled,
.woocommerce.usla-add-payment .mega-menu-button[disabled]{
  opacity: .6;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}


.usla-membership-badge-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
}

.usla-membership-badge-card__title {
  font-size: 1.05rem;   /* similar to the Member Name row */
  font-weight: 700;
  margin-bottom: 0.35rem;
}


/* Rows container */
.usla-membership-badge-card__rows {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Each row: label on left, value in a column on the right */
.usla-membership-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 0.9rem;
}

/* Fixed-ish label column so values line up nicely */
.usla-membership-badge-row strong {
  font-weight: 600;
  min-width: 165px;      /* tweak this width to taste */
}





/* Values all aligned in their own column */
.usla-membership-badge-value {
  flex: 1 1 auto;
}

/* Primary row (Member Name) a bit bigger/bolder */
.usla-membership-badge-row--primary {
  font-size: .9rem;
}

.usla-membership-badge-row--primary strong {
  font-weight: 600;
}

.usla-membership-badge-row--primary .usla-membership-badge-value {
  font-weight: 400;
}

/* small "to" separator */
.usla-membership-badge-sep {
  margin: 0 0.25rem;
  opacity: 0.7;
}

/* Status pill inside the value column – keep it compact */
.usla-membership-badge-row .usla-pill {
  font-size: .9rem;
  padding: 0.15rem 0.5rem;
}


/* Make the Status text line up with other values in the badge */
.usla-membership-badge-card .usla-membership-badge-row--status .usla-pill {
  padding-left: 0;       /* remove extra left padding so "Active" lines up */
  padding-right: 0.45rem;
} 




/* Make the Renew Membership card wider on desktop */
@media (min-width: 1024px) {
  .usla-account .usla-card.usla-subscription-renew {
    max-width: none;          /* remove the narrow cap */
    width: 72vw;              /* ~3/4 of viewport width */
  }
}

/* On very large screens, don't let it get insanely wide */
@media (min-width: 1400px) {
  .usla-account .usla-card.usla-subscription-renew {
    width: 70%;               /* 2/3–3/4 of the content area */
  }
}



.usla-card.usla-subscription-renew {
  max-width: 100% !important;
}

/* Make My USLA post layouts (like Renew Membership) wider on desktop */
@media (min-width: 1024px) {

  /* The outer content wrapper for My USLA posts */
  .category-my-usla .dynamic-entry-content {
    max-width: 100% !important;   /* similar to your other wide cards */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Ensure the renew card itself can use the full width */
  .category-my-usla .usla-card.usla-subscription-renew {
    max-width: 100% !important;
  }
}



/* Make the Renew Membership card use the full content column width */
.usla-card.usla-subscription-renew {
    max-width: none;   /* remove the 533px-ish cap */
    width: 100%;       /* stretch to the grid column */
    margin-left: 0;
    margin-right: 0;
}


/* Optional: widen all My USLA cards */
.usla-myaccount.usla-card {
    max-width: none;
    width: 100%;
}


/* ============================================
   Renew Membership page (#51131) – full width
   ============================================ */

/* Make the post itself span the full content column */
#post-51131.dynamic-content-template {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Kill the 533px-ish cap on the GB wrapper and inner container */
#post-51131 .dynamic-entry-content,
#post-51131 .dynamic-entry-content > .gb-element-a54ba760,
#post-51131 .dynamic-entry-content > .gb-element-a54ba760 > div,
#post-51131 .dynamic-entry-content > div {
  width: 100% !important;
  max-width: 100% !important;  /* ~2/3–3/4 of your page width */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Ensure the Renew card itself can use all that width */
#post-51131 .usla-card.usla-myaccount.usla-subscription-renew {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* Make the Renew Membership article full width across all breakpoints */
#post-51131.grid-33,
#post-51131.tablet-grid-50,
#post-51131.mobile-grid-100 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* If GeneratePress columns use calc() max-width on children, neutralize it */
#post-51131.grid-parent > * {
  max-width: 100% !important;
}

/* Ensure the inner content wrapper can expand */
#post-51131 .dynamic-entry-content,
#post-51131 .entry-content {
  width: 100% !important;
  max-width: 100% !important; /* adjust up/down if you want */
  margin-left: auto;
  margin-right: auto;
}

/* The renew card itself should use the full content width */
#post-51131 .usla-card.usla-subscription-renew {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0;
  margin-right: 0;
}


.mega-menu .usla-card.usla-membership-badge-card {
  margin-top: 0;
}


.usla-login-register-link {
  margin-top: 1rem;
  font-size: 0.95rem;
  text-align: center;
}

.usla-login-register-link a {
  font-weight: 600;
  text-decoration: underline;
}

.usla-login-forgot {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  text-align: center;
}

.usla-login-forgot a {
  text-decoration: underline;
}

.usla-login-register-link {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  text-align: center;
}

.usla-login-register-link a {
  font-weight: 600;
  text-decoration: underline;
}

/* =========================================
   HEADER BADGE (with logo, bordered card)
   Used by: [usla_membership_header_badge]
   ========================================= */
/* Wrapper: 60% width and centered */
.usla-membership-badge-wrapper {
  width: 60%;
  max-width: 100%;   /* safety cap */
  margin: 0 auto 24px;
  display: flex;
  justify-content: center;
}

/* Card fills wrapper */
.usla-membership-badge {
  width: 100%;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
  .usla-membership-badge-wrapper {
    width: 100%;
  }

  .usla-membership-badge {
    grid-template-columns: 1fr;
  }
}

/* Desktop width control */
@media (min-width: 769px) {
  .usla-membership-badge {
    max-width: 100%;
  }
}

/* Logo */
.usla-badge-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Content */
.usla-badge-title {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

/* Grid rows */
.usla-badge-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 4px;
  column-gap: 12px;
  font-size: 0.9rem;
  line-height: 1.25;
}

.usla-badge-grid > div:nth-child(odd) {
  font-weight: 600;
}

/* Mobile */
@media (max-width: 640px) {
  .usla-membership-badge {
    grid-template-columns: 1fr;
  }

  .usla-badge-logo {
    max-width: 140px;
  }

  .usla-badge-grid {
    grid-template-columns: 1fr;
  }
}


/* ===========================
   USLA Recommended Horses
   Forced layout classes: .two-up / .one-up
   =========================== */

.usla-horse-card {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 18px;
  margin: 22px 0;
  background: #fff;
}

.usla-horse-header h3 { margin: 0 0 6px 0; }
.usla-horse-subtitle { margin: 0; opacity: 0.85; }

/* Facts list */
.usla-horse-details { margin-top: 10px; }
.usla-facts { margin: 0 0 12px 0; padding-left: 18px; }
.usla-facts li { margin: 6px 0; }

/* ===========================
   Grid layouts (forced)
   =========================== */

/* Grid */
.usla-horse-grid {
  display: grid;
  gap: 20px;
  margin-top: 16px;
  align-items: start;
}

/* Two-up */
.usla-horse-grid.two-up { grid-template-columns: 1fr 1fr; }
.usla-horse-grid.two-up .usla-horse-photo { grid-column: 1; }
.usla-horse-grid.two-up .usla-horse-pedigree { grid-column: 2; }

/* One-up */
.usla-horse-grid.one-up { grid-template-columns: 1fr; }

/* Constrain ONLY the image blocks (not facts) */
.usla-horse-photo,
.usla-horse-pedigree {
  justify-self: center;
  width: 100%;
  max-width: 700px;   /* change this to 50% if you truly want */
}

/* One-up: make the single image span the grid so centering is true */
.usla-horse-grid.one-up .usla-horse-photo,
.usla-horse-grid.one-up .usla-horse-pedigree {
  grid-column: 1 / -1;
}

/* Images */
.usla-horse-photo img,
.usla-horse-pedigree img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Mobile stack */
@media (max-width: 780px) {
  .usla-horse-grid.two-up { grid-template-columns: 1fr; }
  .usla-horse-grid.two-up .usla-horse-photo,
  .usla-horse-grid.two-up .usla-horse-pedigree {
    grid-column: 1 / -1;
    justify-self: center;
  }
}





/* USLA Pay for Services */
.usla-pay-services {
  margin: 2rem 0;
}

.usla-pay-services__header {
  margin-bottom: 1.25rem;
}

.usla-pay-services__title {
  margin: 0 0 0.5rem 0;
}

.usla-pay-services__intro {
  margin: 0;
  max-width: 70ch;
}

/* Responsive grid */
.usla-pay-services__grid {
  display: grid;
  gap: 1.25rem;
}

/* Columns controlled by data attribute */
.usla-pay-services[data-columns="1"] .usla-pay-services__grid { grid-template-columns: 1fr; }
.usla-pay-services[data-columns="2"] .usla-pay-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.usla-pay-services[data-columns="3"] .usla-pay-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.usla-pay-services[data-columns="4"] .usla-pay-services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Tablet */
@media (max-width: 1024px) {
  .usla-pay-services[data-columns="3"] .usla-pay-services__grid,
  .usla-pay-services[data-columns="4"] .usla-pay-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 640px) {
  .usla-pay-services__grid {
    grid-template-columns: 1fr !important;
  }
}



/* ==================================================
    Pay for Services Card 
    =================================================*/
/* =========================
   USLA Pay for Services Cards
   Single-column, “card” look
   ========================= */

/* Section spacing */
.usla-pay-services {
  margin: 2rem 0;
}

.usla-pay-services__header {
  margin-bottom: 1.25rem;
}

.usla-pay-services__title {
  margin: 0 0 0.5rem 0;
}

.usla-pay-services__intro {
  margin: 0;
  max-width: 70ch;
}

.usla-pay-services__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;

  max-width: var(--usla-pay-services-maxw, 980px);
  margin: 0 auto;
  padding: 0 0.75rem;
}

/* Card styling (this is what you lost) */
.usla-service-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1.15rem;

  box-shadow: 0 10px 24px rgba(0,0,0,0.06);

  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Card typography */
.usla-service-card__name{
  margin: 0 0 0.6rem 0;
  font-size: 1.15rem;
  line-height: 1.25;
}

.usla-service-card__desc{
  margin: 0 0 0.8rem 0;
  opacity: 0.95;
}

.usla-service-card__desc a{
  text-decoration: underline;
  font-weight: 600;
}

.usla-service-card__desc p{
  margin: 0 0 0.65rem 0;
}
.usla-service-card__desc p:last-child{
  margin-bottom: 0;
}

.usla-service-card__note{
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* Push button to bottom if descriptions vary in length */
.usla-service-card__actions {
  margin-top: auto;
  text-align: center; /* centers inline / inline-flex children */
}

/* Use existing .mega-menu-button styling; only enforce layout */
.usla-service-card__actions .mega-menu-button {
  width: 50%;
  display: inline-flex;
  justify-content: center;
  text-align: center;
}


/* Optional: slightly reduce the “block” feeling on very small screens */
@media (max-width: 640px){
  .usla-service-card{
    padding: 1rem 1rem 1.05rem;
    border-radius: 12px;
  }
}


.usla-service-card__pricing{
  margin-top: 10px;
  margin-bottom: 14px; /* <-- creates separation from button */
}

.usla-service-card__price{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.usla-price--regular del{
  opacity: 0.65;
}

.usla-price--current{
  font-weight: 700;
  font-size: 1.1em;
}

.usla-discount-badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.85em;
  line-height: 1.6;
  border: 1px solid currentColor;
  opacity: 0.9;
}

/* Smaller version for the longer text */
.usla-discount-badge--small{
  font-size: 0.72em;
  line-height: 1.35;
  padding: 2px 8px;
  white-space: normal;     /* allow wrap */
  text-align: center;
}

.usla-discount-badge--small {
  position: relative;
  top: -1px;
}

/* Homepage / card titles only */
.home .gb-post-title,
.home .entry-title,
.home .usla-card h3 {
  font-size: 20px;   /* match your H3 setting */
  line-height: 1.25;
}

/* GenerateBlocks query loop titles */
.gb-query-loop-item h3 {
  font-size: 20px;
  line-height: 1.25;
}


/* Home page: Featured Articles card titles */
.home article.gb-loop-item h3.gb-text{
  font-size: 20px !important;
  line-height: 1.25 !important;
}


/* PAY FOR SERVICES – compact list layout */
.usla-pay-services {
  max-width: var(--usla-pay-services-maxw, 1100px);
  margin: 0 auto;
}

.usla-pay-services__grid{
  display: grid;
  gap: 14px;
}

/* Each service as a slim “row card” */
.usla-service-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}

.usla-service-row{
  display: flex;
  gap: 18px;
  padding: 16px 18px;
  align-items: center;
}

.usla-service-row__main{
  flex: 1 1 auto;
  min-width: 0;
}

.usla-service-row__name{
  margin: 0;
  line-height: 1.15;
  font-size: 20px; /* compact */
}

.usla-service-row__desc p{
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.4;
  opacity: .85;
}

.usla-service-row__note{
  margin-top: 8px;
  font-size: 13px;
  opacity: .75;
}

/* Right side: price + button */
.usla-service-row__side{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 220px;
}

.usla-service-row__price{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.usla-service-row__price del{
  opacity: .55;
  margin-right: 8px;
  font-weight: 400;
}

.usla-discount-badge.usla-discount-badge--small{
  display: inline-block;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  white-space: nowrap;
}

.usla-service-row__button{
  padding: 10px 14px !important; /* slimmer than your big button */
  width: 100%;
  text-align: center;
  border-radius: 999px;
}

/* Mobile: stack nicely */
@media (max-width: 700px){
  .usla-service-row{
    flex-direction: column;
    align-items: stretch;
  }
  .usla-service-row__side{
    align-items: stretch;
    min-width: 0;
  }
  .usla-service-row__price{
    text-align: left;
  }
}



.usla-service-card-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.usla-service-card-mini__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

.usla-service-card-mini__price {
    font-size: 0.95rem;
    color: #333;
}

.usla-mini-badge {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: #eef3f8;
    color: #003366;
    white-space: nowrap;
}

.usla-service-card-mini__button {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.usla-service-card-mini__desc {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-top: 2px;
}

.usla-service-card-mini__desc a {
    font-weight: 600;
    text-decoration: underline;
}


/* Mini rows container (optional): put around all rows if you want */
.usla-service-rows-mini {
  display: grid;
  gap: 10px;
}

/* One-row grid: description | price | button */
.usla-service-row-mini {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  align-items: center;
  gap: 14px;

  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
}

/* Left cell: name + short desc link */
.usla-service-row-mini__desc {
  min-width: 0; /* allows wrapping without blowing layout */
  font-size: 0.95rem;
  line-height: 1.25;
}

.usla-service-row-mini__name {
  font-weight: 600;
}

.usla-service-row-mini__sep {
  opacity: 0.55;
  margin: 0 6px;
}

.usla-service-row-mini__form a {
  font-weight: 600;
  text-decoration: underline;
}

/* Price column */
.usla-service-row-mini__price {
  text-align: right;
  white-space: nowrap;
  font-size: 0.95rem;
}

.usla-row-price__regular del { opacity: 0.65; }
.usla-row-price__current { font-weight: 700; }

/* Button column */
.usla-service-row-mini__action {
  text-align: right;
}

.usla-service-row-mini__button {
  padding: 8px 14px !important;
  border-radius: 12px !important;
  text-transform: none; /* more sleek */
}

/* Mobile: stack */
@media (max-width: 780px) {
  .usla-service-row-mini {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .usla-service-row-mini__price,
  .usla-service-row-mini__action {
    text-align: left;
  }
}



/* === FORCE VISIBILITY OF MINI MEGA BUTTONS === */
.usla-service-row-mini__action
a.mega-menu-button.mega-menu-button--small {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 6px 14px !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;

  background-color: #003366 !important;
  color: #ffffff !important;
  border: 1px solid #003366 !important;

  border-radius: 999px !important;
  white-space: nowrap;
  width: auto;
}



/* Mini service row — single-line layout */
.usla-service-row-mini {
  display: grid;
  grid-template-columns:
    minmax(220px, 2fr)   /* name */
    minmax(200px, 2fr)   /* form link */
    auto                 /* price */
    auto;                /* pay button */

  align-items: center;
  gap: 16px;

  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
}

/* Name */
.usla-service-row-mini__name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}

/* Description / form link */
.usla-service-row-mini__desc {
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
}

.usla-service-row-mini__desc a {
  font-weight: 600;
  text-decoration: none;
}

/* Price */
.usla-service-row-mini__price {
  white-space: nowrap;
  font-size: 0.95rem;
  text-align: right;
}

.usla-row-price__regular del { opacity: 0.6; }
.usla-row-price__current { font-weight: 700; }

/* Action */
.usla-service-row-mini__action {
  white-space: nowrap;
}


@media (max-width: 780px) {
  .usla-service-row-mini {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }

  .usla-service-row-mini__name,
  .usla-service-row-mini__desc,
  .usla-service-row-mini__price,
  .usla-service-row-mini__action {
    justify-self: center;
    text-align: center;
  }

  .usla-service-row-mini__desc {
    white-space: normal; /* allow wrapping on mobile */
  }
}


.usla-service-row-mini__price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 1.6em;     /* reserves height for both one-line and two-line prices */
  white-space: nowrap;
}

.usla-service-row-mini__price-inner {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}


/* Mini row price column: always align content to the right */
.usla-service-row-mini__price{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}

/* Two-part price layout */
.usla-service-row-mini__price .usla-row-price__regular,
.usla-service-row-mini__price .usla-row-price__current{
  display: inline-flex;
  align-items: baseline;
}

/* Gap between regular and current */
.usla-service-row-mini__price .usla-row-price__regular{
  margin-right: 8px;
}

/* Hide placeholder regular price but keep its width */
.usla-row-price__regular--placeholder{
  visibility: hidden;
}

/* Safety: neutralize any theme styles */
.usla-service-row-mini__price del,
.usla-service-row-mini__price ins{
  float: none !important;
  display: inline-block !important;
}
.usla-service-row-mini__price ins{
  text-decoration: none !important;
}


/* Desktop only: lock column rhythm */
@media (min-width: 781px){
  .usla-service-row-mini{
    grid-template-columns:
      minmax(260px, 1.4fr)   /* service name */
      minmax(220px, 1fr)     /* form button */
      160px                  /* price (fixed) */
      90px;                  /* pay button */
  }
}



/* =========================================================
   MID-WIDTH COMPRESSION BAND (≈ 780–1200)
   Goal: reduce white space + keep service rows readable
   ========================================================= */
@media (min-width: 781px) and (max-width: 1200px) {

  :root{
    /* tighten global horizontal padding + sidebar */
    --pad-x: 14px;
    --sidebar-w: 240px; /* keep it deterministic in this band */
    --gap: 14px;
  }

  /* tighten the sidebar gutter so content gains width */
  .element-sidebar-left{
    margin-right: 14px;   /* was 32 */
    padding-right: 10px;  /* was 22 */
  }

  /* reduce the “breathing room” inside the content column */
  .grid-container:has(.element-sidebar-left) .site-main,
  .grid-container:has(.element-sidebar-left) .content-area,
  .grid-container:has(.element-sidebar-left) #primary{
    padding-left: 0 !important; /* was 8px */
  }

  /* your Pay-for-Services wrapper: stop “wasting” width on inner padding */
  .usla-pay-services{
    max-width: 100%;
  }

  /* IMPORTANT: this is the space you are seeing.
     Reduce the internal padding so the table/rows can actually fit. */
  .usla-pay-services__grid{
    max-width: 100% !important;
    padding: 0 !important;     /* was 0 0.75rem */
    margin: 0 !important;
    gap: 12px;
  }

  /* If your rows are inside a card/container, tighten it slightly */
  .usla-card{
    padding: 16px 18px;        /* was 20px 24px */
  }

  /* ---------------------------------------------------------
     MINI ROWS: switch from 4 columns to 2-line layout sooner
     --------------------------------------------------------- */

  /* In this band, 4 columns is too ambitious (name + form + price + pay).
     Use a 2-row grid:
       Row 1: name | form | pay
       Row 2: price (right aligned)
  */
  .usla-service-row-mini{
    grid-template-columns: 1fr auto auto;  /* name | form | pay */
    grid-template-areas:
      "name desc action"
      ".    price price";
    column-gap: 12px;
    row-gap: 6px;
  }

  .usla-service-row-mini__name{ grid-area: name; }
  .usla-service-row-mini__desc{ grid-area: desc; white-space: nowrap; }
  .usla-service-row-mini__action{ grid-area: action; }
  .usla-service-row-mini__price{
    grid-area: price;
    justify-content: flex-end;
  }

  /* If the form button is long, allow it to truncate instead of pushing price offscreen */
  .usla-service-row-mini__desc{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Keep buttons from inflating columns */
  .usla-service-row-mini__action a.mega-menu-button{
    padding: 6px 12px !important;
  }
}


/* =========================================================
   TRUE MOBILE (<= 780): keep your existing centered stack
   (this just ensures the “mid-width” rules don’t interfere)
   ========================================================= */
@media (max-width: 780px){
  .usla-service-row-mini{
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }
}

/* If your rows live in a wrapper like .usla-service-rows-mini or .usla-pay-services__grid */
.usla-service-rows-mini,
.usla-pay-services__grid{
  gap: 08px; /* was ~14px */
}

/* Tighten the row “card” itself */
.usla-service-row-mini{
  padding: 8px 12px;     /* was ~10px 14px */
  border-radius: 12px;   /* keep as-is, or drop to 10px if you want tighter */
}


/* Section headings like “Registration & Transfers” */
.usla-pay-services h2,
.usla-pay-services h3{
  margin: 16px 0 10px;  /* reduce top/bottom */
}

/* Your separator */
.usla-separator{
  margin: 16px 0;       /* was ~24–32px */
}

.usla-service-row-mini__desc .mega-menu-button--small,
.usla-service-row-mini__desc a.mega-menu-button--small{
  padding: 5px 12px !important; /* down from 6px 14px */
  font-size: 0.84rem !important;
}

.usla-service-centers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin: 24px 0;
}

.usla-service-center-card {
  padding: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
}

.usla-service-center-card h3 {
  margin-top: 0;
}

.usla-service-extras {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.usla-divider {
  margin: 32px 0;
}



.usla-member-event-notice {
  background: #f7f9fb;
  border-left: 4px solid #003366;
  padding: 14px 18px;
  margin: 18px 0 24px;
  border-radius: 6px;
}
.usla-member-event-notice h4 {
  margin-top: 0;
}


.usla-webinar-cta .mega-menu-button {
  margin: 0 10px 12px;
}



/* USLA Homepage Announcement Panel */
.usla-home-announcement{
  margin: 22px auto 28px;
  padding: 0 18px;
}

.usla-home-announcement__inner{
  max-width: 100%;
  margin: 0 auto;
  padding: 18px 18px 16px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.usla-home-announcement__title{
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.15;
}

.usla-home-announcement__text{
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.55;
}

.usla-home-announcement__text--muted{
  margin-top: 4px;
  color: rgba(0,0,0,.72);
}

.usla-home-announcement__actions{
  margin-top: 16px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.usla-home-announcement__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.18);
  background: #f4f6f8;
  color: inherit;
}

.usla-home-announcement__btn--primary{
  background: #0b3a6b; /* navy */
  color: #ffffff;
  border-color: rgba(0,0,0,.0);
}

.usla-home-announcement__btn:hover{
  filter: brightness(0.97);
}


body.woocommerce-cart h1.entry-title {
  display: none !important;
}


/* Cart page: remove the huge top padding inside the article */
body.woocommerce-cart .inside-article {
  padding-top: 0 !important;
}




/* ============================
   USLA Login Form (wp_login_form)
   ============================ */

.usla-login-card form#loginform,
.usla-login-card form#usla_loginform {
  margin-top: 12px;
}

.usla-login-card form p {
  margin: 10px 0;
}

.usla-login-card label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.usla-login-card input[type="text"],
.usla-login-card input[type="password"]{
  width: 100%;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}

.usla-login-card input[type="text"]:focus,
.usla-login-card input[type="password"]:focus{
  outline: none;
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* Remember me row tighter */
.usla-login-card .login-remember label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 500;
  margin: 0;
}

/* Submit button uses your existing mega-menu-button look */
.usla-login-card #wp-submit,
.usla-login-card button.mega-menu-button{
  margin-top: 6px;
}


.two-logo-header {
  display: flex;
  justify-content: center;   /* centers the pair */
  align-items: center;
  gap: 20%;                 /* increase spacing for visual balance */
  margin-bottom: 20px;       /* space before headline */
}

.two-logo-header img {
  height: 100px;              /* normalize visual weight */
  width: auto;               /* prevents distortion */
  max-width: 20%;            /* still respects your 20% rule */
  object-fit: contain;
}

.one-logo-header {
  display: flex;
  justify-content: center;   /* centers the pair */
  align-items: center;
  gap: 20%;                 /* increase spacing for visual balance */
  margin-bottom: 30px;       /* space before headline */
}

.one-logo-header img {
  height: 130px;              /* normalize visual weight */
  width: auto;               /* prevents distortion */
  max-width: 20%;            /* still respects your 20% rule */
  object-fit: contain;
}


/* Position mxchat */
#floating-chatbot-button-default {
  bottom: 70px !important;
}
#floating-chatbot-default {
  bottom: 70px !important;
}

#floating-chatbot-button-default {
  width: auto !important;
  min-width: 48px !important;
  height: 48px !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  padding: 0 14px !important;
  border-radius: 30px !important;
  gap: 8px;
}
#floating-chatbot-button-default::after {
  content: "Chat";
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

#floating-chatbot-default:not(.hidden) #floating-chatbot-button-default {
  display: none !important;
}

#floating-chatbot-button-default.hidden {
  display: none !important;
}


.softr-view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.95rem;
  border-radius: 6px;
  background: #003f73;
  color: #fff !important;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.softr-view-button:hover,
.softr-view-button.is-active {
  background: #6f1220;
  color: #fff !important;
}

.softr-leftalign {
  margin-top: 0.5rem;
}

.softr-inner iframe {
  display: block;
  margin-top: 0;
}


/* My USLA Horse Profile Cards */
.usla-horse-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.usla-horse-profile-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.usla-horse-profile-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.usla-horse-profile-content {
  padding: 14px;
  text-align: center;
}

.usla-horse-profile-name {
  font-weight: 700;
  line-height: 1.3;
}

.usla-horse-profile-nin {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #666;
}

.usla-horse-profile-actions {
  margin-top: 12px;
}
.usla-horse-profile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.usla-horse-profile-actions .mega-menu-button {
  padding: 6px 12px !important;
  font-size: 13px;
  border-radius: 10px !important;
}

@media (max-width: 1200px) {
  .usla-horse-profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .usla-horse-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .usla-horse-profile-grid {
    grid-template-columns: 1fr;
  }
}


/* Horse Profile Photo css */
.usla-current-photo-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.usla-current-profile-photo,
.usla-current-additional-photos {
  margin-bottom: 1rem;
}

.usla-current-profile-photo img {
  max-width: 360px;
  width: 100%;
  height: auto;
}

.usla-additional-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.usla-additional-photo-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}


/* Marketplace mega menu cards */
.usla-mega-market-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  max-width: 340px;
}

.usla-mega-market-card__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 10px;
}

.usla-mega-market-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #003366;
  margin-bottom: 18px;
}




/* Public Stallion Directory */
.usla-stallion-directory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 28px auto;
  text-align: center;
}

.usla-stallion-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}

.usla-stallion-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.usla-stallion-card-body {
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.usla-stallion-card-title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  line-height: 1.2;
  color: #003366;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.usla-stallion-card-meta {
  font-size: 0.9rem;
  line-height: 1.35;
  margin-bottom: 5px;
}

.usla-stallion-card-summary {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 12px 0 16px;
}

.usla-stallion-card-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.usla-stallion-card-actions .mega-menu-button {
  width: 100%;
  max-width: 190px;
  padding: 8px 14px !important;
  font-size: 0.82rem;
}

@media (max-width: 1200px) {
  .usla-stallion-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .usla-stallion-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .usla-stallion-directory-grid {
    grid-template-columns: 1fr;
  }
}



/* Public Stallion Profile Detail */
.usla-stallion-profile {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 18px;
}

.usla-stallion-profile-main-photo {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  margin: 18px auto 24px;
  border-radius: 16px;
}

.usla-stallion-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.usla-stallion-photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 800px) {
  .usla-stallion-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .usla-stallion-photo-grid {
    grid-template-columns: 1fr;
  }
}


/* Stallion Profile Layout */
.usla-stallion-profile {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px;
}

.usla-stallion-profile-back {
  margin-bottom: 28px;
}

.usla-stallion-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
}

.usla-stallion-profile-media {
  text-align: center;
}

.usla-stallion-profile-main-photo {
  width: 100%;
  max-width: 700px;
  max-height: 520px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

.usla-stallion-profile-summary h1 {
  margin: 0 0 10px;
  color: #003366;
  font-size: 3rem;
  line-height: 1.1;
}

.usla-stallion-profile-nin {
  font-size: 1rem;
  margin-bottom: 28px;
  color: #666;
}

.usla-stallion-profile-facts {
  display: grid;
  gap: 18px;
  margin-bottom: 30px;
}

.usla-stallion-profile-facts div {
  border-bottom: 1px solid rgba(0,0,0,0.10);
  padding-bottom: 12px;
}

.usla-stallion-profile-facts strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  margin-bottom: 4px;
}

.usla-stallion-profile-facts span {
  font-size: 1.05rem;
  color: #222;
}

.usla-stallion-profile-section {
  max-width: 900px;
  margin: 0 auto 40px;
}

.usla-stallion-profile-section h2 {
  color: #003366;
  border-bottom: 2px solid #7a1f1f;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.usla-stallion-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.usla-stallion-photo-grid img {
    width: 100%;
    height: auto;
    max-height: 160px;
    border-radius: 10px;
    display: block;
}

.usla-stallion-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {

  .usla-stallion-profile-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .usla-stallion-profile-summary h1 {
    font-size: 2.2rem;
  }

  .usla-stallion-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {

  .usla-stallion-photo-grid {
    grid-template-columns: 1fr;
  }
}


.usla-stallion-profile-shell {
    max-width: 1400px;
    margin: 50px auto;
    padding: 50px;
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

body.single-stallion_directory {
    background: #f3f3f3;
}


.usla-stallion-lightbox {
  display: inline-block;
  cursor: zoom-in;
}

.usla-stallion-photo-grid .usla-stallion-lightbox {
  display: block;
}



/* =========================================
   Fancybox - USLA Stallion Gallery
========================================= */
.fancybox__container {
  --fancybox-bg: rgba(0, 0, 0, 0.82);
  z-index: 999999;
}

.fancybox__image {
  max-width: 80vw !important;
  max-height: 80vh !important;
  object-fit: contain !important;
}



.usla-sales-horse-card {display: flex;flex-direction: column;min-height: 520px;}

.usla-sales-horse-card .usla-stallion-card-photo {width: 100%;aspect-ratio: 4 / 3;object-fit: cover;object-position: center;}

.usla-sales-horse-card .usla-stallion-card-body {display: flex;flex-direction: column;flex: 1;padding: 18px 18px 16px;}

.usla-sales-horse-card .usla-stallion-card-title {margin-bottom: 6px;text-align: center;}

.usla-sales-horse-card .usla-stallion-card-meta {text-align: center;font-size: 0.9rem;line-height: 1.35;}

.usla-sales-horse-card .usla-stallion-card-summary {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;margin: 12px 0 16px;text-align: center;}

.usla-sales-horse-card .mega-menu-button {margin-top: auto;width: 100%;text-align: center;}

.usla-sales-horse-card {display: flex;flex-direction: column;min-height: 520px;}

.usla-sales-horse-card .usla-stallion-card-photo {width: 100%;aspect-ratio: 4 / 3;object-fit: cover;object-position: center;}

.usla-sales-horse-card .usla-stallion-card-body {display: flex;flex-direction: column;flex: 1;padding: 18px;}

.usla-sales-card-meta-wrap {min-height: 48px;}

.usla-sales-horse-card .usla-stallion-card-summary {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;margin: 12px 0 16px;text-align: center;}

.usla-sales-card-button-wrap {margin-top: auto;}

.usla-sales-card-button-wrap .mega-menu-button {width: 100%;text-align: center;}



.usla-sales-horse-card .usla-stallion-card-body {min-height: 190px;}

.usla-sales-card-meta-wrap {min-height: 42px;}

.usla-sales-horse-card .usla-stallion-card-summary {min-height: 44px;}

.usla-sales-card-button-wrap {margin-top: auto;}

.usla-sales-card-disciplines {margin: 12px 0 18px;text-align: center;line-height: 1.45;font-size: 0.9rem;color: #444;min-height: 42px;}

.usla-sales-horse-profile-shell .usla-stallion-profile {max-width: 1050px;padding: 32px 42px;}

.usla-sales-horse-profile-shell .usla-stallion-profile-hero {gap: 32px;align-items: flex-start;}

.usla-sales-horse-profile-shell .usla-stallion-profile-main-photo {max-height: 340px;object-fit: cover;}

.usla-sales-horse-profile-shell .usla-stallion-profile-summary h1 {font-size: 2rem;margin-bottom: 4px;}

.usla-sales-horse-profile-shell .usla-stallion-profile-nin {font-size: 0.9rem;margin-bottom: 14px;}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts > div {padding: 9px 0;}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts strong {font-size: 0.72rem;letter-spacing: 0.08em;}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts span {font-size: 0.95rem;}

.usla-sales-horse-profile-shell .usla-stallion-profile-section {margin-top: 24px;}

.usla-sales-horse-profile-shell .usla-stallion-profile-section h2 {font-size: 1.35rem;margin-bottom: 8px;}

.usla-sales-horse-profile-shell .usla-stallion-profile-section p {font-size: 0.95rem;line-height: 1.45;}



.usla-sales-horse-profile-shell .usla-stallion-profile-hero {display: grid;grid-template-columns: minmax(320px, 42%) 1fr;gap: 36px;align-items: start;}

.usla-sales-horse-profile-shell .usla-stallion-profile-main-photo {width: 100%;max-height: 420px;object-fit: cover;}

@media (max-width: 800px) {.usla-sales-horse-profile-shell .usla-stallion-profile-hero {grid-template-columns: 1fr;}}

.usla-sales-contact-card {margin-top: 34px;padding: 20px 28px;border: 1px solid #ece8e2;border-radius: 10px;background: #faf9f7;}

.usla-sales-contact-card h3 {text-align: center;font-size: 1.7rem;margin-bottom: 18px;}

.usla-sales-contact-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;align-items: start;text-align: center;}

.usla-sales-contact-item {padding: 4px 10px;}

.usla-sales-contact-label {font-size: 0.7rem;letter-spacing: 0.08em;text-transform: uppercase;color: #777;margin-bottom: 6px;}

.usla-sales-contact-value {font-size: 0.98rem;line-height: 1.4;}

.usla-sales-contact-card a {text-decoration: none;}

@media (max-width: 800px) {.usla-sales-contact-grid {grid-template-columns: 1fr;gap: 16px;}}

.usla-sales-detail-section {border-top: 1px solid #d8d8d8;padding-top: 16px;margin-top: 22px;}

.usla-sales-detail-section h2,.usla-sales-detail-cell h2 {font-size: 1.2rem;margin: 0 0 8px;color: #003b70;}

.usla-sales-detail-section p,.usla-sales-detail-cell p {margin: 0;font-size: 0.95rem;line-height: 1.45;}

.usla-sales-detail-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 22px 48px;}

.usla-sales-detail-cell {min-width: 0;}

@media (max-width: 800px) {.usla-sales-detail-grid {grid-template-columns: 1fr;}}

.usla-sales-contact-item .mega-menu-button,.usla-sales-contact-item .mega-menu-button-small {display: inline-flex;justify-content: center;align-items: center;}

.usla-sales-contact-item {text-align: center;}

.usla-sales-contact-value {display: flex;justify-content: center;}


/* Put website button on its own row under the 4-column contact grid */
.usla-sales-contact-item.usla-sales-contact-website {
    grid-column: 1 / -1;
    padding-top: 10px;
}

.usla-sales-contact-item.usla-sales-contact-website .usla-sales-contact-value {
    display: flex;
    justify-content: center;
}

.usla-sales-contact-item.usla-sales-contact-website .mega-menu-button {
    width: auto;
    min-width: 190px;
}



/* Compact sales horse profile */
.usla-sales-horse-profile-shell .usla-stallion-profile {
    max-width: 1000px;
    padding: 22px 32px;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-hero {
    gap: 28px;
    margin-bottom: 18px;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-main-photo {
    max-height: 300px;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-summary h1 {
    font-size: 1.8rem;
    margin-bottom: 2px;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-nin {
    margin-bottom: 10px;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts > div {
    padding: 6px 0;
}

.usla-sales-detail-section {
    padding-top: 10px;
    margin-top: 12px;
}

.usla-sales-detail-section h2,
.usla-sales-detail-cell h2 {
    font-size: 1.08rem;
    margin-bottom: 4px;
}

.usla-sales-detail-section p,
.usla-sales-detail-cell p {
    font-size: 0.9rem;
    line-height: 1.35;
}

.usla-sales-detail-grid {
    gap: 12px 42px;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-section {
    margin-top: 14px;
}

.usla-sales-additional-photos {
    margin-top: 12px;
}

.usla-sales-additional-photos h2 {
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.usla-sales-additional-photos img {
    max-width: 230px;
}

.usla-sales-contact-card {
    margin-top: 22px;
    padding: 16px 24px;
}

.usla-sales-contact-card h3 {
    font-size: 1.45rem;
    margin-bottom: 10px;
}

.usla-sales-contact-grid {
    gap: 14px;
}

.usla-sales-contact-label {
    margin-bottom: 3px;
}

.usla-sales-contact-value {
    font-size: 0.9rem;
    line-height: 1.25;
}

/* Tighten horse fact rows */
.usla-sales-horse-profile-shell .usla-stallion-profile-facts > div {
    padding: 4px 0;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts strong {
    display: block;
    margin-bottom: 2px;
    line-height: 1.1;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts span,
.usla-sales-horse-profile-shell .usla-stallion-profile-facts div:not(strong) {
    line-height: 1.2;
}

/* Reduce divider spacing */
.usla-sales-horse-profile-shell .usla-stallion-profile-facts > div {
    border-bottom-width: 1px;
}

/* Pull the entire facts block tighter */
.usla-sales-horse-profile-shell .usla-stallion-profile-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts > div {
    padding: 3px 0;
}


/* Compact seller contact card */
.usla-sales-contact-card {
    margin-top: 18px;
    padding: 14px 20px;
    border-radius: 8px;
}

.usla-sales-contact-card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    line-height: 1.1;
}

.usla-sales-contact-grid {
    gap: 10px 18px;
}

.usla-sales-contact-item {
    padding: 2px 6px;
}

.usla-sales-contact-label {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    line-height: 1;
}

.usla-sales-contact-value {
    font-size: 0.88rem;
    line-height: 1.2;
}

.usla-sales-contact-item.usla-sales-contact-website {
    padding-top: 6px;
}

.usla-sales-contact-item.usla-sales-contact-website .mega-menu-button {
    min-width: 170px;
    padding: 10px 18px;
    font-size: 0.82rem;
    line-height: 1.1;
}

/* Make contact card feel denser and aligned */
.usla-sales-contact-grid {
    align-items: center;
}

.usla-sales-contact-value br {
    display: none;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-main-photo {
    max-height: 260px;
}

.usla-sales-detail-section p,
.usla-sales-detail-cell p {
    line-height: 1.28;
    font-size: 0.92rem;
}

.usla-sales-additional-photos {
    margin-top: 8px;
}

.usla-sales-additional-photos h2 {
    margin-bottom: 4px;
}

.usla-sales-contact-card {
    padding: 12px 18px;
}

.usla-sales-contact-card h3 {
    margin-bottom: 6px;
}

.usla-sales-contact-grid {
    gap: 8px 16px;
}

/* Premium compact spec grid */
.usla-sales-horse-profile-shell .usla-stallion-profile-facts {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 18px;
    row-gap: 10px;
    margin-top: 14px;
    align-items: center;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts > div {
    display: contents;
    border: none;
    padding: 0;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts strong {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
    line-height: 1;
    margin: 0;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-facts span {
    font-size: 0.96rem;
    line-height: 1.2;
    color: #222;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-summary h1 {
    margin-bottom: 2px;
}

.usla-sales-horse-profile-shell .usla-stallion-profile-nin {
    margin-bottom: 10px;
}


.usla-preview-dropdown {
  position: relative;
  display: inline-block;
}

.usla-preview-dropdown {
  position: relative;
  display: inline-block;
}

.usla-preview-dropdown > summary {
  list-style: none;
  cursor: pointer;
}

.usla-preview-dropdown > summary::-webkit-details-marker {
  display: none;
}

.usla-preview-menu {
  display: none;
}

.usla-preview-dropdown[open] > .usla-preview-menu {
  display: block;
  position: absolute;
  z-index: 99999;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
  border-radius: 6px;
  overflow: hidden;
}

.usla-preview-menu a {
  display: block;
  padding: 10px 12px;
  color: #003b66;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}

.usla-preview-menu a:hover {
  background: #f3f6f9;
}



/* Compact stallion profile */
.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile {
    max-width: 1000px;
    padding: 22px 32px;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-hero {
    display: grid;
    grid-template-columns: minmax(320px, 42%) 1fr;
    gap: 28px;
    align-items: start;
    margin-bottom: 18px;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-main-photo {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-summary h1 {
    font-size: 1.8rem;
    margin-bottom: 2px;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-facts {
    display: grid;
    grid-template-columns: 170px 1fr;
    column-gap: 18px;
    row-gap: 10px;
    margin-top: 14px;
    align-items: center;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-facts > div {
    display: contents;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-facts strong {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-facts span {
    font-size: 0.96rem;
    line-height: 1.2;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-section {
    border-top: 1px solid #d8d8d8;
    padding-top: 10px;
    margin-top: 12px;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-section h2 {
    font-size: 1.08rem;
    margin-bottom: 4px;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-section p {
    font-size: 0.92rem;
    line-height: 1.28;
}

@media (max-width: 800px) {
    .usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-hero {
        grid-template-columns: 1fr;
    }
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-section h2 {
    border: none !important;
    padding-bottom: 0 !important;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-section:first-of-type {
    margin-top: 18px;
}


.usla-horse-profile-card,
.usla-horse-profile-content,
.usla-horse-profile-actions {
  overflow: visible !important;
}

.usla-horse-profile-card {
  position: relative;
  z-index: 1;
}

.usla-horse-profile-card:has(.usla-preview-dropdown[open]) {
  z-index: 50;
}

.usla-preview-dropdown {
  position: relative;
  display: inline-block;
}

.usla-preview-dropdown > summary {
  list-style: none;
  cursor: pointer;
}

.usla-preview-dropdown > summary::-webkit-details-marker {
  display: none;
}

.usla-preview-menu {
  display: none;
}

.usla-preview-dropdown[open] > .usla-preview-menu {
  display: block;
  position: absolute;
  z-index: 99999;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
  border-radius: 6px;
  overflow: hidden;
}

.usla-preview-menu a {
  display: block;
  padding: 10px 12px;
  color: #003b66;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  background: #fff;
}

.usla-preview-menu a:hover {
  background: #f3f6f9;
}


.usla-stallion-card {
    position: relative;
}

.usla-preview-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;

    background: rgba(120, 0, 0, 0.92);
    color: #fff;

    padding: 7px 12px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}

.usla-stallion-profile {
    position: relative;
}

.usla-preview-detail-banner {
    display: inline-block;
    margin: 0 0 16px 0;
    padding: 8px 14px;
    background: #7a0014;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 999px;
    text-transform: uppercase;
}


.usla-preview-detail-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.usla-preview-badge-detail {
    position: static !important;
    display: inline-block;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-hero {
    margin-bottom: 12px;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-profile-section {
    margin-top: 10px;
    padding-top: 10px;
}

.usla-stallion-profile-shell:not(.usla-sales-horse-profile-shell) .usla-stallion-photo-grid {
    margin-top: 10px;
}


.usla-preview-dropdown {
    position: relative;
    display: inline-block;
}

.usla-preview-dropdown summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.usla-preview-dropdown summary::-webkit-details-marker {
    display: none;
}

.usla-preview-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    background: #ffffff;
    border: 1px solid #d7dce2;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    overflow: hidden;
    z-index: 99999;
    padding: 6px 0;
}

.usla-preview-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    color: #003b66;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease;
}

.usla-preview-menu a:hover {
    background: #f3f7fb;
}

.usla-preview-menu a + a {
    border-top: 1px solid #eef2f5;
}

.usla-certificate-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 16px;
    margin-top: 12px;
}

.usla-certificate-summary-item {
    background: #f8f8f6;
    border: 1px solid #e5e0d8;
    border-radius: 10px;
    padding: 10px 12px;
}

.usla-certificate-summary-item strong {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b6258;
    margin-bottom: 3px;
}

.usla-certificate-summary-item span {
    font-size: 0.95rem;
}

.usla-certificate-button-wrap {
    margin-top: 14px;
}

.usla-pedigree-horse-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.usla-pedigree-table {
    display: grid;
    gap: 12px;
}

.usla-pedigree-row {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr 1.7fr;
    gap: 10px;
    align-items: stretch;
}

.usla-pedigree-parent,
.usla-pedigree-cell {
    border: 1px solid #e5e0d8;
    border-radius: 10px;
    background: #fbfaf8;
    padding: 9px 11px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.usla-pedigree-parent span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b6258;
    margin-bottom: 3px;
}

.usla-pedigree-parent strong,
.usla-pedigree-cell {
    font-size: 0.92rem;
    font-weight: 600;
}

.usla-pedigree-grandparents,
.usla-pedigree-greatgrandparents {
    display: grid;
    gap: 8px;
}

.usla-pedigree-grandparents {
    grid-template-rows: repeat(2, 1fr);
}

.usla-pedigree-greatgrandparents {
    grid-template-rows: repeat(4, 1fr);
}

.usla-pedigree-small {
    font-size: 0.82rem;
}

@media (max-width: 800px) {
    .usla-pedigree-row {
        grid-template-columns: 1fr;
    }

    .usla-pedigree-grandparents,
    .usla-pedigree-greatgrandparents {
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
    }
}

.usla-pedigree-brand {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    object-fit: contain !important;
    flex: 0 0 26px !important;
}

.usla-pedigree-parent .usla-pedigree-brand {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    flex-basis: 34px !important;
}

.usla-pedigree-horse-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.usla-pedigree-brand-placeholder {
    display: block;
    background: transparent;
}


.usla-pedigree-nin {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    line-height: 1.1;
    color: #6b6258;
    letter-spacing: 0.02em;
}

.usla-pedigree-chart-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.25fr 1.35fr 1.1fr;
    gap: 14px;
    max-width: 1280px;
    margin-top: 16px;
}

.usla-pedigree-chart-generation {
    display: flex;
    flex-direction: column;
}

.usla-pedigree-chart-generation-title {
    text-align: center;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a746c;
    font-weight: 700;
    margin-bottom: 10px;
}

.usla-pedigree-chart-stack {
    display: grid;
    gap: 8px;
    height: 100%;
}

.usla-pedigree-chart-stack-2 {
    grid-template-rows: repeat(2, 1fr);
}

.usla-pedigree-chart-stack-4 {
    grid-template-rows: repeat(4, 1fr);
}

.usla-pedigree-chart-stack-8 {
    grid-template-rows: repeat(8, 1fr);
}

.usla-pedigree-chart-horse {
    background: #fbfaf8;
    border: 1px solid #e5e0d8;
    border-radius: 10px;
    padding: 7px 10px;
    min-height: 48px;
}

.usla-pedigree-chart-sire {
    border-left: 4px solid #1f7f86;
}

.usla-pedigree-chart-dam {
    border-left: 4px solid #7a3b46;
}

.usla-pedigree-chart-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 4px;
    color: #6f6a63;
}

.usla-pedigree-chart-line {
    display: flex;
    align-items: center;
    gap: 7px;
}

.usla-pedigree-chart-brand {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex: 0 0 24px !important;
}

.usla-pedigree-chart-brand-placeholder {
    width: 24px;
    height: 24px;
    display: block;
}

.usla-pedigree-chart-text {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}

.usla-pedigree-chart-text strong {
    font-size: 0.8rem;
    font-weight: 700;
}

.usla-pedigree-chart-nin {
    margin-top: 2px;
    font-size: 0.64rem;
    color: #6f6a63;
}

@media (max-width: 1000px) {
    .usla-pedigree-chart-grid {
        grid-template-columns: 1fr;
    }

    .usla-pedigree-chart-stack-2,
    .usla-pedigree-chart-stack-4,
    .usla-pedigree-chart-stack-8 {
        grid-template-rows: none;
    }
}


.usla-pedigree-chart-current-horse {
    padding: 18px 18px 16px;
}

.usla-pedigree-chart-current-name {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.05;
    margin-top: 8px;
    margin-bottom: 6px;
    color: #173f6d;
    letter-spacing: 0.01em;
}

.usla-pedigree-chart-current-nin {
    font-size: 0.82rem;
    color: #6f6a63;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.usla-pedigree-chart-current-details {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e6dfd5;
}

.usla-pedigree-chart-current-detail {
    display: grid;
    gap: 2px;
}

.usla-pedigree-chart-current-detail-label {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a746c;
    font-weight: 700;
    line-height: 1;
}

.usla-pedigree-chart-current-detail-value {
    font-size: 0.92rem;
    line-height: 1.28;
    color: #2f2a26;
}

.usla-pedigree-chart-current-brand {
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin-bottom: 6px;
}

.usla-pedigree-chart-certificate-button {
    margin-top: 18px;
    width: 100%;
    text-align: center;
}

.usla-pedigree-chart-stack-small .usla-pedigree-chart-horse {
    min-height: 52px;
    padding: 5px 8px;
}

.usla-pedigree-chart-stack-small .usla-pedigree-chart-brand {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
}

.usla-pedigree-chart-stack-small .usla-pedigree-chart-text strong {
    font-size: 0.72rem;
}

.usla-pedigree-chart-stack-small .usla-pedigree-chart-nin {
    font-size: 0.58rem;
}

.usla-pedigree-chart-stack-small .usla-pedigree-chart-line {
    gap: 5px;
}

.usla-pedigree-chart-breeder-label {
    display: block;
    margin-top: 5px;
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a857d;
    font-weight: 700;
}

.usla-pedigree-chart-breeder {
    display: block;
    margin-top: 1px;
    font-size: 0.62rem;
    line-height: 1.2;
    color: #4e4943;
}

@media (max-width: 1000px) {

  .usla-pedigree-chart-block .usla-pedigree-chart-grid.usla-pedigree-chart-grid-compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .usla-pedigree-chart-block .usla-pedigree-chart-identity-column {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .usla-pedigree-chart-block .usla-pedigree-chart-parents-column {
    grid-column: 1 / 2 !important;
    min-width: 0 !important;
  }

  .usla-pedigree-chart-block .usla-pedigree-chart-grandparents-column {
    grid-column: 2 / 3 !important;
    min-width: 0 !important;
  }

  .usla-pedigree-chart-block .usla-pedigree-chart-greatgrandparents-column {
    display: none !important;
  }

  .usla-pedigree-chart-block .usla-pedigree-chart-generation,
  .usla-pedigree-chart-block .usla-pedigree-chart-stack,
  .usla-pedigree-chart-block .usla-pedigree-chart-horse,
  .usla-pedigree-chart-block .usla-pedigree-chart-text {
    min-width: 0 !important;
  }
}

.usla-pedigree-chart-current-brand {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin: 0 auto 10px;
}


.usla-preview-notice {
    max-width: 800px;
    margin: 0 0 24px;
    padding: 14px 18px;
    border-left: 5px solid #8b1e2d;
    background: #fcf6f7;
}




/*============================================================
  Breeder Directory CSS
============================================================*/

.usla-breeder-directory-filter {
    margin: 0 0 24px;
}

.usla-breeder-directory-filter input {
    width: 100%;
    max-width: 520px;
    padding: 10px 14px;
    border: 1px solid #d8d2c8;
    border-radius: 6px;
    font-size: 1rem;
}

.usla-breeder-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 24px;
    justify-content: start;
}

.usla-breeder-card {
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.usla-breeder-card-photo {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.usla-breeder-card-body {
    padding: 16px;
}

.usla-breeder-card-title {
    margin: 0 0 6px;
    color: #003b71;
    font-size: 1.25rem;
}

.usla-breeder-card-location {
    color: #555;
    font-size: 0.95rem;
}

.usla-breeder-card-actions {
    margin: 12px 0 0;
    text-align: center;
}


.usla-mega-market-card--directories {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.usla-mega-market-card--directories .usla-mega-market-card__description {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.55;
    color: #5b5d78;
}

.usla-mega-market-card__directory-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.usla-mega-market-card--directories .usla-mega-market-card__title {
    margin: 0;
    text-align: center;
    font-size: 20px;
    line-height: 1.2;
}

.usla-mega-market-card--directories .mega-menu-button {
    margin: 0;
}

.usla-mega-market-card--directories .usla-mega-market-card__description {
    font-weight: 500;
}


.usla-directory-search {
    margin: 0 0 28px;
    padding: 18px 20px;
    border: 1px solid #e2e2e8;
    border-radius: 10px;
    background: #fff;
}

.usla-directory-search__label {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #30304f;
}

.usla-directory-search__row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.usla-directory-search__input {
    flex: 1;
    min-width: 220px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #cfcfd8;
    border-radius: 6px;
    font-size: 15px;
}

.usla-directory-search__button,
.usla-directory-search__clear {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .usla-directory-search__row {
        flex-direction: column;
        align-items: stretch;
    }

    .usla-directory-search__button,
    .usla-directory-search__clear {
        width: 100%;
        text-align: center;
    }
}

.usla-breeder-menu-card .usla-mega-market-card__directory-item {
    text-align: left;
}

.usla-breeder-primary {
    margin-top: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 48, 91, 0.18);
}

.usla-breeder-primary .usla-mega-market-card__title {
    font-size: 1.35rem;
}

.usla-breeder-secondary {
    margin-top: 1.15rem;
    opacity: 0.88;
}

.usla-breeder-secondary .usla-mega-market-card__title {
    font-size: 1.1rem;
}

.usla-mega-market-card__subtext {
    margin: 0.45rem 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.35;
    color: #4d4d4d;
}

.usla-breeder-card--member {
    border: 2px solid rgba(0, 48, 91, 0.22);
}

.usla-breeder-card-badge {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 48, 91, 0.08);
    color: #00305b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.usla-breeder-card--member .usla-breeder-card-title {
    color: #00305b;
}

.usla-breeder-card-badge-spacer {
    min-height: 1.45rem;
    margin-bottom: 0.5rem;
}