/* === amrein-spmodern.css - Modern SharePoint (Fluent UI) look & feel ===
 * Overrides the Bamboo-style .hp-* classes with a light, SharePoint-modern
 * aesthetic: Segoe UI font (SharePoint default), SharePoint communication blue
 * #0078d4, white/light-gray section backgrounds, clean Fluent cards with subtle
 * shadows, a white suite-header nav with a SharePoint-style search bar, and a
 * light hero with a faint banner image overlay.
 *
 * Loaded after amrein-tiles.css. Rules are scoped to body.amrein-body for
 * higher specificity than the unscoped .hp-* base rules, so they reliably win.
 *
 * SharePoint Fluent palette:
 *   #0078d4 primary | #005a9e primary-dark | #106ebe primary-hover
 *   #deecf9 primary-light | #f3f9fd primary-lighter
 *   #323130 neutral-primary | #605e5c neutral-secondary | #a19f9c neutral-tertiary
 *   #faf9f8 neutral-lighter | #f3f2f1 neutral-light | #edebe9 neutral-border
 *   #201f1e neutral-dark
 */

body.amrein-body {
  font-family: "Segoe UI", "Segoe UI Web", -apple-system, system-ui, sans-serif;
  background: #faf9f8;
  color: #323130;
}

/* ── SharePoint suite header (nav) ── */
body.amrein-body .navbar.bg-dark {
  background: #fff !important;
  border-bottom: 1px solid #edebe9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  min-height: 56px;
}
body.amrein-body .navbar-dark .navbar-brand { color: #323130 !important; font-weight: 600; padding-top: 12px; }
body.amrein-body .navbar-dark .navbar-brand img { border-radius: 4px; }
body.amrein-body .navbar-dark .nav-link {
  color: #323130 !important; font-weight: 500; padding: 8px 14px !important; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
body.amrein-body .navbar-dark .nav-link:hover { color: #0078d4 !important; background: #f3f9fd; }
body.amrein-body .navbar-dark .navbar-nav.ml-auto { align-items: center; }
body.amrein-body .navbar-dark .navbar-toggler { border-color: #edebe9; }
body.amrein-body .navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%233230130' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* SharePoint-style search bar in the nav */
body.amrein-body .sp-search { display: inline-flex; align-items: center; margin-left: 12px; position: relative; }
body.amrein-body .sp-search-box {
  position: relative; display: inline-flex; align-items: center;
  background: #f3f2f1; border: 1px solid #edebe9; border-radius: 20px; padding: 4px 10px 4px 32px; width: 220px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
body.amrein-body .sp-search-box:focus-within { background: #fff; border-color: #0078d4; box-shadow: 0 0 0 3px rgba(0,120,212,0.12); }
body.amrein-body .sp-search-icon { color: #0078d4; position: absolute; left: 10px; font-size: 13px; }
body.amrein-body .sp-search-input { border: none; background: transparent; outline: none; width: 100%; font: 400 13px "Segoe UI", sans-serif; color: #323130; }
body.amrein-body .sp-search-input::placeholder { color: #a19f9c; }

/* Live suggestions dropdown (below the nav search box) */
body.amrein-body .sp-search-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1050;
  display: none; background: #fff; border: 1px solid #edebe9; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12); max-height: 360px; overflow-y: auto; padding: 6px;
}
body.amrein-body .sp-search-suggestion {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 4px; text-decoration: none; color: #323130;
  font: 400 13px "Segoe UI", sans-serif; cursor: pointer; transition: background 0.1s;
}
body.amrein-body .sp-search-suggestion:hover,
body.amrein-body .sp-search-suggestion.active { background: #f3f2f1; outline: none; }
body.amrein-body .sp-search-suggestion.active { background: #e6f1fb; box-shadow: inset 2px 0 0 #0078d4; }
body.amrein-body .sp-search-suggestion-type {
  display: inline-block; flex: 0 0 auto; font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: #0078d4; color: #fff;
}
body.amrein-body .sp-search-suggestion-type.post { background: #107c10; }
body.amrein-body .sp-search-suggestion-title { font-weight: 600; color: #201f1e; }
body.amrein-body .sp-search-suggestion-desc { display: block; width: 100%; color: #605e5c; font-size: 12px; line-height: 1.3; }
body.amrein-body .sp-search-suggestion-empty { padding: 10px 12px; color: #605e5c; font: 400 13px "Segoe UI", sans-serif; }

/* ── Footer (light, SharePoint-modern) ── */
body.amrein-body footer.bg-dark { background: #faf9f8 !important; border-top: 1px solid #edebe9; color: #605e5c; }
body.amrein-body footer .text-white { color: #605e5c !important; }
body.amrein-body footer .btm_elements a.text-white { color: #0078d4 !important; }
body.amrein-body footer .btm_elements a.text-white:hover { color: #005a9e !important; text-decoration: underline; }

/* ── Hero (light SharePoint-blue gradient + faint banner image) ── */
body.amrein-body .hp-hero {
  background: linear-gradient(135deg, #f3f9fd 0%, #deecf9 55%, #c7e0f4 100%) !important;
  color: #323130 !important;
  padding: 64px 0 88px !important;
  position: relative;
  overflow: hidden;
}
body.amrein-body .hp-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/images/amrein/pic/banners/tilestack3.jpg') right center / cover no-repeat;
  opacity: 0.16;
}
body.amrein-body .hp-hero-inner { position: relative; z-index: 2; grid-template-columns: 1fr; gap: 0; }
body.amrein-body .hp-hero-content { max-width: 680px; }
body.amrein-body .hp-hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 20px;
  border: 1px solid #0078d4; background: #deecf9; color: #0078d4;
  font: 600 11px/1 "Segoe UI", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 22px;
}
body.amrein-body .hp-hero-badge .badge-dot { background: #0078d4; }
body.amrein-body .hp-hero h1 {
  font-size: 44px; font-weight: 700; line-height: 1.15; margin: 0 0 18px;
  letter-spacing: -0.02em; color: #323130;
}
body.amrein-body .hp-hero h1 strong { color: #0078d4; }
body.amrein-body .hp-hero-subtitle { font-size: 16px; line-height: 1.65; color: #605e5c; margin: 0 0 30px; max-width: 560px; }
body.amrein-body .hp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
body.amrein-body .hp-btn { font: 600 14px/1.2 "Segoe UI", sans-serif; padding: 11px 22px; border-radius: 6px; transition: all 0.18s; }
body.amrein-body .hp-btn-primary { background: #0078d4; color: #fff; }
body.amrein-body .hp-btn-primary:hover { background: #005a9e; color: #fff; text-decoration: none; }
body.amrein-body .hp-btn-outline { background: #fff; color: #0078d4; border: 1px solid #0078d4; }
body.amrein-body .hp-btn-outline:hover { background: #deecf9; color: #005a9e; border-color: #005a9e; text-decoration: none; }

/* ── Sections ── */
body.amrein-body .hp-section { padding: 56px 0 !important; }
body.amrein-body .hp-section-alt { background: #f3f2f1 !important; }
body.amrein-body .hp-section-header { max-width: 640px; margin: 0 auto 36px; }
body.amrein-body .hp-section-label {
  display: inline-block; font: 600 11px "Segoe UI", sans-serif; color: #0078d4;
  background: #deecf9; padding: 4px 14px; border-radius: 20px; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 12px;
}
body.amrein-body .hp-section-label i { color: #0078d4; margin-right: 4px; }
body.amrein-body .hp-section-title { font: 600 30px/1.2 "Segoe UI", sans-serif; color: #323130; margin-bottom: 12px; letter-spacing: -0.01em; }
body.amrein-body .hp-section-desc { font: 400 15px/1.6 "Segoe UI", sans-serif; color: #605e5c; }

/* ── Stats Bar (white Fluent card row) ── */
body.amrein-body .hp-stats { margin-top: -36px; margin-bottom: 40px; position: relative; z-index: 10; }
body.amrein-body .hp-stats-inner {
  background: #fff; border: 1px solid #edebe9; border-radius: 8px;
  box-shadow: 0 1.6px 8px rgba(0,0,0,0.08), 0 0 2px rgba(0,0,0,0.06);
  grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
body.amrein-body .hp-stat { padding: 26px 20px; text-align: center; position: relative; transition: background 0.15s; }
body.amrein-body .hp-stat:hover { background: #faf9f8; }
body.amrein-body .hp-stat:not(:last-child)::after { background: #edebe9; }
body.amrein-body .hp-stat-icon { width: 40px; height: 40px; border-radius: 8px; background: #deecf9; margin-bottom: 10px; transition: background 0.15s; }
body.amrein-body .hp-stat:hover .hp-stat-icon { background: #0078d4; }
body.amrein-body .hp-stat i { color: #0078d4; font-size: 16px; transition: color 0.15s; }
body.amrein-body .hp-stat:hover .hp-stat i { color: #fff; }
body.amrein-body .hp-stat-num { font: 700 26px/1.1 "Segoe UI", sans-serif; color: #323130; margin-bottom: 2px; }
body.amrein-body .hp-stat-label { font: 500 10px "Segoe UI", sans-serif; color: #605e5c; text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Featured product cards (Fluent) ── */
body.amrein-body .hp-featured-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.amrein-body .hp-featured-card {
  background: #fff; border: 1px solid #edebe9; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1.6px 8px rgba(0,0,0,0.06); transition: all 0.18s;
}
body.amrein-body .hp-featured-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); border-color: #c7e0f4; }
body.amrein-body .hp-featured-img { aspect-ratio: 16/9; overflow: hidden; position: relative; background: #f3f2f1; }
body.amrein-body .hp-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
body.amrein-body .hp-featured-card:hover .hp-featured-img img { transform: scale(1.04); }
body.amrein-body .hp-featured-img.default { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #deecf9, #f3f9fd); }
body.amrein-body .hp-featured-img.default i { font-size: 34px; color: #0078d4; opacity: 0.5; }
body.amrein-body .hp-featured-img-overlay { background: rgba(0,120,212,0.85); }
body.amrein-body .hp-featured-img-overlay span { font: 600 13px "Segoe UI", sans-serif; background: rgba(255,255,255,0.15); padding: 8px 18px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); }
body.amrein-body .hp-featured-body { padding: 14px 16px 16px; }
body.amrein-body .hp-featured-tag { display: inline-block; font: 600 10px "Segoe UI", sans-serif; color: #0078d4; background: #deecf9; padding: 3px 8px; border-radius: 3px; margin-bottom: 8px; }
body.amrein-body .hp-featured-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
body.amrein-body .hp-featured-badge { font: 600 9px "Segoe UI", sans-serif; padding: 2px 6px; border-radius: 3px; }
body.amrein-body .hp-featured-badge.free { background: #dff6cc; color: #107c10; }
body.amrein-body .hp-featured-badge.o365 { background: #deecf9; color: #0078d4; }
body.amrein-body .hp-featured-badge.modern { background: #e6d8ec; color: #5c2d91; }
body.amrein-body .hp-featured-title { font: 600 15px/1.3 "Segoe UI", sans-serif; color: #323130; margin: 0 0 6px; }
body.amrein-body .hp-featured-title a { color: #323130; }
body.amrein-body .hp-featured-title a:hover { color: #005a9e; }
body.amrein-body .hp-featured-desc { font: 400 13px/1.5 "Segoe UI", sans-serif; color: #605e5c; margin: 0 0 12px; }
body.amrein-body .hp-featured-link { font: 600 12px "Segoe UI", sans-serif; color: #0078d4; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s; }
body.amrein-body .hp-featured-link:hover { gap: 10px; color: #005a9e; text-decoration: none; }

/* ── Category grid (SharePoint Quick Links style) ── */
body.amrein-body .hp-categories-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.amrein-body .hp-cat-card {
  text-align: left; padding: 22px 18px; border-radius: 8px; background: #fff;
  border: 1px solid #edebe9; transition: all 0.18s; text-decoration: none;
  display: flex; flex-direction: column; gap: 8px;
}
body.amrein-body .hp-cat-card:hover { transform: translateY(-2px); border-color: #0078d4; box-shadow: 0 4px 14px rgba(0,120,212,0.1); text-decoration: none; }
body.amrein-body .hp-cat-card i { font-size: 22px; color: #0078d4; margin-bottom: 4px; width: 40px; height: 40px; border-radius: 8px; background: #deecf9; display: inline-flex; align-items: center; justify-content: center; }
body.amrein-body .hp-cat-card h3 { font: 600 14px "Segoe UI", sans-serif; color: #323130; margin: 0; }
body.amrein-body .hp-cat-card span { font: 400 12px/1.4 "Segoe UI", sans-serif; color: #605e5c; }

/* ── Why grid (Fluent cards) ── */
body.amrein-body .hp-why-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.amrein-body .hp-why-card { text-align: center; padding: 32px 22px; border-radius: 8px; background: #fff; border: 1px solid #edebe9; transition: all 0.18s; }
body.amrein-body .hp-why-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: #0078d4; }
body.amrein-body .hp-why-icon { width: 48px; height: 48px; border-radius: 10px; background: #deecf9; margin-bottom: 18px; transition: background 0.15s; }
body.amrein-body .hp-why-card:hover .hp-why-icon { background: #0078d4; }
body.amrein-body .hp-why-icon i { color: #0078d4; font-size: 20px; transition: color 0.15s; }
body.amrein-body .hp-why-card:hover .hp-why-icon i { color: #fff; }
body.amrein-body .hp-why-title { font: 600 15px "Segoe UI", sans-serif; color: #323130; margin-bottom: 8px; }
body.amrein-body .hp-why-desc { font: 400 13px/1.5 "Segoe UI", sans-serif; color: #605e5c; }

/* ── Testimonials (Fluent cards) ── */
body.amrein-body .hp-testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
body.amrein-body .hp-testimonial-card { background: #fff; border: 1px solid #edebe9; border-radius: 8px; padding: 26px; box-shadow: 0 1.6px 8px rgba(0,0,0,0.05); transition: all 0.18s; }
body.amrein-body .hp-testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); border-color: #c7e0f4; }
body.amrein-body .hp-testimonial-avatar { background: linear-gradient(135deg, #0078d4, #005a9e); }
body.amrein-body .hp-testimonial-name { font: 600 15px "Segoe UI", sans-serif; color: #323130; margin-bottom: 4px; }
body.amrein-body .hp-testimonial-verified { font: 400 11px "Segoe UI", sans-serif; color: #107c10; }
body.amrein-body .hp-testimonial-rating { color: #fbbf24; font-size: 14px; letter-spacing: 2px; }
body.amrein-body .hp-testimonial-content { font: 400 14px/1.7 "Segoe UI", sans-serif; color: #323130; font-style: italic; margin-bottom: 16px; flex: 1; }
body.amrein-body .hp-testimonial-product { font: 500 12px "Segoe UI", sans-serif; color: #605e5c; padding-top: 16px; border-top: 1px solid #edebe9; }
body.amrein-body .hp-testimonial-product i { color: #0078d4; font-size: 11px; }

/* ── CTA band (SharePoint blue) ── */
body.amrein-body .hp-cta-green { background: #0078d4; padding: 32px 0; text-align: center; }
body.amrein-body .hp-cta-green h3 { font: 700 22px "Segoe UI", sans-serif; color: #fff; margin: 0 0 6px; }
body.amrein-body .hp-cta-green p { font: 400 14px/1.6 "Segoe UI", sans-serif; color: rgba(255,255,255,0.9); margin: 0 0 18px; }
body.amrein-body .hp-cta-green .hp-btn { background: #fff; color: #005a9e; font-weight: 700; }
body.amrein-body .hp-cta-green .hp-btn:hover { background: #f3f9fd; color: #0078d4; text-decoration: none; }

/* ── Compatibility bar ── */
body.amrein-body .compatibility-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
body.amrein-body .compatibility-card { background: #fff; border: 1px solid #edebe9; border-radius: 8px; padding: 20px 16px; box-shadow: 0 1.6px 8px rgba(0,0,0,0.05); transition: all 0.18s; }
body.amrein-body .compatibility-card:hover { border-color: #0078d4; box-shadow: 0 4px 14px rgba(0,120,212,0.1); }
body.amrein-body .compatibility-card i { color: #0078d4; font-size: 20px; }
body.amrein-body .compatibility-card span { font: 500 14px "Segoe UI", sans-serif; color: #323130; }

/* ── Catalog tools (ProductCatalog) ── */
body.amrein-body .hp-filter-bar { gap: 8px; margin-bottom: 18px; }
body.amrein-body .hp-filter-btn { padding: 7px 15px; border-radius: 20px; border: 1px solid #edebe9; background: #fff; color: #605e5c; font: 600 13px "Segoe UI", sans-serif; transition: all 0.15s; }
body.amrein-body .hp-filter-btn:hover { border-color: #0078d4; color: #0078d4; }
body.amrein-body .hp-filter-btn.active { background: #0078d4; color: #fff; border-color: #0078d4; }
body.amrein-body .hp-filter-btn.active .hp-filter-count { color: rgba(255,255,255,0.85); }
body.amrein-body .hp-filter-count { font-size: 11px; opacity: 0.7; }
body.amrein-body .hp-search-input { border: 1px solid #edebe9; border-radius: 6px; font: 400 14px "Segoe UI", sans-serif; color: #323130; background: #fff; }
body.amrein-body .hp-search-input:focus { border-color: #0078d4; box-shadow: 0 0 0 3px rgba(0,120,212,0.12); }
body.amrein-body .hp-sort-select { border: 1px solid #edebe9; border-radius: 6px; font: 500 13px "Segoe UI", sans-serif; color: #605e5c; background: #fff; }
body.amrein-body .hp-catalog-loading, body.amrein-body .hp-catalog-empty { color: #a19f9c; font: 400 15px "Segoe UI", sans-serif; }

/* ── Responsive ── */
@media (max-width: 1280px) {
  body.amrein-body .hp-featured-grid { grid-template-columns: repeat(3, 1fr); }
  body.amrein-body .hp-categories-grid { grid-template-columns: repeat(3, 1fr); }
  body.amrein-body .hp-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  body.amrein-body .hp-hero { padding: 52px 0 72px !important; }
  body.amrein-body .hp-hero h1 { font-size: 36px; }
  body.amrein-body .hp-featured-grid { grid-template-columns: repeat(2, 1fr); }
  body.amrein-body .hp-categories-grid { grid-template-columns: repeat(2, 1fr); }
  body.amrein-body .hp-section { padding: 44px 0 !important; }
  body.amrein-body .hp-section-title { font-size: 26px; }
  body.amrein-body .sp-search-box { width: 180px; }
}
@media (max-width: 768px) {
  body.amrein-body .hp-hero { padding: 44px 0 60px !important; }
  body.amrein-body .hp-hero h1 { font-size: 30px; }
  body.amrein-body .hp-hero-subtitle { font-size: 14px; }
  body.amrein-body .hp-hero-actions { flex-direction: column; }
  body.amrein-body .hp-btn { justify-content: center; }
  body.amrein-body .hp-stats { margin-top: -28px; }
  body.amrein-body .hp-stats-inner { grid-template-columns: repeat(2, 1fr); }
  body.amrein-body .hp-featured-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  body.amrein-body .hp-categories-grid { grid-template-columns: repeat(2, 1fr); }
  body.amrein-body .hp-why-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  body.amrein-body .hp-testimonials-grid { grid-template-columns: 1fr; }
  body.amrein-body .hp-section { padding: 36px 0 !important; }
  body.amrein-body .hp-section-title { font-size: 23px; }
  body.amrein-body .sp-search { display: block; margin: 8px 0 0; width: 100%; }
  body.amrein-body .sp-search-box { width: 100%; }
}
@media (max-width: 480px) {
  body.amrein-body .hp-hero h1 { font-size: 26px; }
  body.amrein-body .hp-stats-inner { grid-template-columns: 1fr; }
  body.amrein-body .hp-categories-grid { grid-template-columns: 1fr; }
}

/* ── Full-bleed sections: make CMS wrappers span full viewport width when
 *    they contain a .hp-* section, so hero/section backgrounds aren't boxed
 *    inside Bootstrap's 1140px .container. Uses :has() (modern browsers). ── */
body.amrein-body { overflow-x: hidden; }
body.amrein-body .outerContainer:has(.hp-hero, .hp-section, .hp-stats, .hp-cta-green, .ae-rotator):has(.rowcol.p1000) { width: 100%; max-width: none; padding: 0; margin: 0; }
body.amrein-body .outerContainer:has(.hp-hero, .hp-section, .hp-stats, .hp-cta-green, .ae-rotator):has(.rowcol.p1000) > .container { width: 100%; max-width: none; padding: 0; margin: 0; }
body.amrein-body .outerContainer:has(.hp-hero, .hp-section, .hp-stats, .hp-cta-green, .ae-rotator):has(.rowcol.p1000) > .container > .row { width: 100%; margin: 0; padding: 0; display: block; }
body.amrein-body .outerContainer:has(.hp-hero, .hp-section, .hp-stats, .hp-cta-green, .ae-rotator):has(.rowcol.p1000) > .container > .row > .rowcol.p1000 { width: 100%; padding: 0; margin: 0; display: block; }
/* Drop the legacy 20px margin around web parts inside full-bleed (single-col) sections.
   The :has(.rowcol.p1000) guard preserves 2-column (p250/p750) layouts on product-listing/detail pages. */
body.amrein-body .outerContainer:has(.hp-hero, .hp-section, .hp-stats, .hp-cta-green, .ae-rotator):has(.rowcol.p1000) .wp_innerCont { margin: 0; }
/* The ImageTile quick-links section is 4-col (not .hp-*); keep it centered but
 * give its row a gap and drop the 20px wp_innerCont margin. */
body.amrein-body .outerContainer:has(.WP_TilesImage_innerCont) > .container { max-width: 1200px; }
body.amrein-body .outerContainer:has(.WP_TilesImage_innerCont) .wp_innerCont { margin: 0; }
body.amrein-body .outerContainer:has(.WP_TilesImage_innerCont) > .container > .row { gap: 16px; }

/* ── ImageTile quick-links (override legacy moreStyles messy shadows) ── */
body.amrein-body .WP_TilesImage_innerCont {
  background: #fff; border: 1px solid #edebe9; border-radius: 8px;
  box-shadow: 0 1.6px 8px rgba(0,0,0,0.06) !important; padding: 22px 20px;
  height: auto; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; margin: 0;
}
body.amrein-body .WP_TilesImage_innerCont:hover {
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,120,212,0.1) !important;
  margin-top: 0 !important; margin-bottom: 0 !important; border-color: #c7e0f4;
}
body.amrein-body .WP_TilesImage_divImg { display: none; } /* no images configured; hide empty 200px area */
body.amrein-body .WP_TilesImage_txtCont { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.amrein-body .WP_TilesImage_title { font: 600 16px "Segoe UI", sans-serif; color: #0078d4; margin-bottom: 0; line-height: 1.3; }
body.amrein-body .WP_TilesImage_desc { font: 400 13px/1.5 "Segoe UI", sans-serif; color: #605e5c; }

/* ── SharePoint-style nav brand (icon + two-line text) ── */
body.amrein-body .navbar-dark .sp-brand { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; }
body.amrein-body .sp-brand:hover { text-decoration: none; }
body.amrein-body .sp-brand-icon {
  width: 34px; height: 34px; border-radius: 8px; background: #0078d4; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.amrein-body .sp-brand-icon i { font-size: 16px; }
body.amrein-body .sp-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
body.amrein-body .sp-brand-text strong { font: 700 16px "Segoe UI", sans-serif; color: #fff; }
body.amrein-body .sp-brand-text small { font: 400 12px "Segoe UI", sans-serif; color: #a19f9d; }

/* ── Footer (multi-column, SharePoint-modern) ── */
body.amrein-body footer.sp-footer {
  background: #fff !important; border-top: 1px solid #edebe9; padding: 40px 0 24px;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.04);
}
body.amrein-body .sp-footer-grid {
  display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
}
body.amrein-body .sp-footer-brand { flex: 0 0 280px; max-width: 280px; }
body.amrein-body .sp-footer-brand-icon {
  width: 34px; height: 34px; border-radius: 8px; background: #0078d4; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
body.amrein-body .sp-footer-brand-icon i { font-size: 16px; }
body.amrein-body .sp-footer-brand-text { display: flex; flex-direction: column; line-height: 1.25; margin-bottom: 12px; }
body.amrein-body .sp-footer-brand-text strong { font: 700 15px "Segoe UI", sans-serif; color: #323130; }
body.amrein-body .sp-footer-brand-text small { font: 400 11px "Segoe UI", sans-serif; color: #605e5c; }
body.amrein-body .sp-footer-copy { font: 400 12px/1.5 "Segoe UI", sans-serif; color: #a19f9c; margin: 8px 0 0; }
body.amrein-body .sp-footer-cols { display: flex; gap: 36px; flex-wrap: wrap; flex: 1; }
body.amrein-body .sp-footer-col { min-width: 130px; }
body.amrein-body .sp-footer-col h4 {
  font: 600 13px "Segoe UI", sans-serif; color: #323130; margin: 0 0 12px;
  letter-spacing: 0.02em; text-transform: uppercase;
}
body.amrein-body .sp-footer-col ul { list-style: none; margin: 0; padding: 0; }
body.amrein-body .sp-footer-col li { margin: 0 0 8px; }
body.amrein-body .sp-footer-col a {
  font: 400 13px "Segoe UI", sans-serif; color: #605e5c; text-decoration: none; transition: color 0.15s;
}
body.amrein-body .sp-footer-col a:hover { color: #0078d4; text-decoration: none; }
body.amrein-body .sp-footer-col a i { color: #0078d4; margin-right: 4px; }
@media (max-width: 768px) {
  body.amrein-body .sp-footer-grid { flex-direction: column; gap: 24px; }
  body.amrein-body .sp-footer-brand { flex: none; max-width: none; }
  body.amrein-body .sp-footer-cols { gap: 20px; }
}

/* ── Polish: hide legacy decorative bars, refine hero/nav/tiles ── */
/* Hide the fixed shadow bar and empty announcements bar (legacy decor) */
body.amrein-body #header_shadow { display: none !important; }
body.amrein-body .btanls_messagebar_cont { display: none !important; }
/* Hero: clean light gradient with a soft blue glow (no busy image overlay) */
body.amrein-body .hp-hero {
  background: radial-gradient(ellipse 80% 60% at 88% 0%, rgba(0,120,212,0.10), transparent 70%), linear-gradient(135deg, #f3f9fd 0%, #deecf9 55%, #c7e0f4 100%) !important;
}
body.amrein-body .hp-hero::before { display: none; }
/* ImageTile quick-links: SharePoint-blue left accent stripe */
body.amrein-body .WP_TilesImage_innerCont { border-left: 4px solid #0078d4; }
/* Nav: clean flex alignment, brand left, links + search right */
body.amrein-body .navbar .container { display: flex; align-items: center; }
body.amrein-body .navbar-dark .navbar-collapse { align-items: center; padding-top: 4px; }
/* Tighten the default wp_innerCont 20px margin globally for a cleaner grid */
body.amrein-body .outerContainer .wp_innerCont { margin: 0; }
/* Section alt background for catalog (ProductCatalog) so it reads as a band */
body.amrein-body .outerContainer:has(.hp-catalog-tools) .hp-section { background: #faf9f8; }

/* ════════════════════════════════════════════════════════════════════
 * Product-detail page: ProductHero, BannerRotator, ProductOverview, ProductTabs
 * SharePoint-modern Fluent UI styling (blue #0078d4, Segoe UI, light cards).
 * ════════════════════════════════════════════════════════════════════ */

/* ── ProductHero (extends .hp-hero with a 2-col layout: text + icon/screenshot) ── */
body.amrein-body .ae-product-hero { padding: 56px 0 64px !important; }
body.amrein-body .ae-product-hero-inner {
  display: flex; align-items: center; gap: 48px; max-width: 1140px; margin: 0 auto;
}
body.amrein-body .ae-product-hero-content { flex: 1 1 0; min-width: 0; }
body.amrein-body .ae-product-hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 20px;
  border: 1px solid #0078d4; background: #deecf9; color: #0078d4;
  font: 600 11px/1 "Segoe UI", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px;
}
body.amrein-body .ae-product-hero-badge .badge-dot { background: #0078d4; }
body.amrein-body .ae-product-hero h1 {
  font: 700 34px/1.2 "Segoe UI", sans-serif; color: #323130; margin: 0 0 14px; letter-spacing: -0.02em;
}
body.amrein-body .ae-product-hero h1 strong { color: #0078d4; }
body.amrein-body .ae-product-hero-tagline {
  font: 400 15px/1.65 "Segoe UI", sans-serif; color: #605e5c; margin: 0 0 26px;
}
body.amrein-body .ae-product-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
body.amrein-body .ae-product-hero-icon {
  flex: 0 0 320px; max-width: 320px;
  background: #fff; border: 1px solid #edebe9; border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08); padding: 10px; overflow: hidden;
}
body.amrein-body .ae-product-hero-icon img {
  width: 100%; height: auto; border-radius: 6px; display: block;
  background: #f3f2f1;
}
@media (max-width: 900px) {
  body.amrein-body .ae-product-hero-inner { flex-direction: column; gap: 24px; }
  body.amrein-body .ae-product-hero-icon { flex: none; max-width: 420px; width: 100%; }
  body.amrein-body .ae-product-hero h1 { font-size: 28px; }
}

/* ── BannerRotator (.ae-rotator - clean SP-modern slideshow) ── */
body.amrein-body .ae-rotator { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
body.amrein-body .ae-rotator-title {
  font: 600 15px "Segoe UI", sans-serif; color: #605e5c; margin-bottom: 10px;
  text-align: center; letter-spacing: 0.04em; text-transform: uppercase;
}
body.amrein-body .ae-rotator-stage {
  position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 10px;
  overflow: hidden; background: #f3f2f1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.06);
  border: 1px solid #edebe9;
}
body.amrein-body .ae-rotator-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease;
}
body.amrein-body .ae-rotator-slide.active { opacity: 1; }
body.amrein-body .ae-rotator-fade .ae-rotator-slide { transition: opacity 0.6s ease; }
body.amrein-body .ae-rotator-slide .ae-rotator-bg {
  width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.amrein-body .ae-rotator-slide .ae-rotator-bg:first-child { width: 100%; height: 100%; }
body.amrein-body .ae-rotator-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
  color: #fff; font: 600 14px/1.4 "Segoe UI", sans-serif;
}
body.amrein-body .ae-rotator-caption strong { font-weight: 700; }
/* Nav arrows */
body.amrein-body .ae-rotator-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.85); color: #0078d4; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15); transition: all 0.15s; z-index: 5;
}
body.amrein-body .ae-rotator-nav:hover { background: #0078d4; color: #fff; }
body.amrein-body .ae-rotator-prev { left: 12px; }
body.amrein-body .ae-rotator-next { right: 12px; }
/* Dot indicators */
body.amrein-body .ae-rotator-dots {
  display: flex; gap: 8px; justify-content: center; padding: 14px 0 4px;
}
body.amrein-body .ae-rotator-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer;
  background: #c7e0f4; transition: all 0.15s; padding: 0;
}
body.amrein-body .ae-rotator-dot.active { background: #0078d4; width: 22px; border-radius: 5px; }
body.amrein-body .ae-rotator-dot:hover { background: #0078d4; }
/* Counter */
body.amrein-body .ae-rotator-counter {
  position: absolute; top: 10px; right: 14px; z-index: 4;
  background: rgba(0,0,0,0.55); color: #fff; border-radius: 14px;
  font: 600 11px "Segoe UI", sans-serif; padding: 3px 10px;
}
@media (max-width: 768px) {
  body.amrein-body .ae-rotator-stage { aspect-ratio: 4/3; border-radius: 8px; }
  body.amrein-body .ae-rotator-nav { width: 32px; height: 32px; font-size: 13px; }
}

/* ── ProductOverview (.ae-overview - styled card with header + body) ── */
body.amrein-body .ae-overview {
  background: #fff; border: 1px solid #edebe9; border-radius: 8px;
  box-shadow: 0 1.6px 8px rgba(0,0,0,0.05); padding: 28px 26px; margin-bottom: 24px;
}
body.amrein-body .ae-overview-header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #edebe9; }
body.amrein-body .ae-overview-label {
  display: inline-block; font: 600 11px "Segoe UI", sans-serif; color: #0078d4;
  background: #deecf9; padding: 4px 14px; border-radius: 20px; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 10px;
}
body.amrein-body .ae-overview-header h2 {
  font: 600 22px/1.3 "Segoe UI", sans-serif; color: #323130; margin: 0; letter-spacing: -0.01em;
}
body.amrein-body .ae-overview-body {
  font: 400 14px/1.7 "Segoe UI", sans-serif; color: #323130;
}
body.amrein-body .ae-overview-body p { margin: 0 0 14px; }
body.amrein-body .ae-overview-body ul, body.amrein-body .ae-overview-body ol { margin: 0 0 14px; padding-left: 22px; }
body.amrein-body .ae-overview-body li { margin: 4px 0; }
body.amrein-body .ae-overview-body ul.wpAbstract { list-style: none; padding-left: 0; }
body.amrein-body .ae-overview-body ul.wpAbstract li {
  position: relative; padding-left: 26px; color: #323130;
}
body.amrein-body .ae-overview-body ul.wpAbstract li::before {
  content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
  color: #0078d4; position: absolute; left: 0; top: 1px; font-size: 14px;
}
body.amrein-body .ae-overview-body td.wpAbstract { display: block; padding: 0; margin: 0 0 14px; }
body.amrein-body .ae-overview-body img { max-width: 100%; height: auto; border-radius: 6px; }
body.amrein-body .ae-overview-body a { color: #0078d4; text-decoration: none; }
body.amrein-body .ae-overview-body a:hover { color: #005a9e; text-decoration: underline; }
body.amrein-body .ae-overview-body h1, body.amrein-body .ae-overview-body h2, body.amrein-body .ae-overview-body h3 {
  color: #323130; font-weight: 600; margin: 18px 0 10px;
}

/* ── ProductTabs (.ae-tabs - tabbed documentation UI) ── */
body.amrein-body .ae-tabs {
  background: #fff; border: 1px solid #edebe9; border-radius: 8px;
  box-shadow: 0 1.6px 8px rgba(0,0,0,0.05); margin-bottom: 24px; overflow: hidden;
}
body.amrein-body .ae-tabs-header { padding: 24px 26px 18px; border-bottom: 1px solid #edebe9; }
body.amrein-body .ae-tabs-label {
  display: inline-block; font: 600 11px "Segoe UI", sans-serif; color: #0078d4;
  background: #deecf9; padding: 4px 14px; border-radius: 20px; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 10px;
}
body.amrein-body .ae-tabs-header h2 {
  font: 600 22px/1.3 "Segoe UI", sans-serif; color: #323130; margin: 0; letter-spacing: -0.01em;
}
body.amrein-body .ae-tabs-bar {
  display: flex; gap: 4px; padding: 0 16px; border-bottom: 2px solid #edebe9;
  background: #faf9f8; flex-wrap: wrap;
}
body.amrein-body .ae-tab-btn {
  border: none; background: transparent; cursor: pointer;
  font: 600 13px "Segoe UI", sans-serif; color: #605e5c;
  padding: 12px 18px; border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all 0.15s;
}
body.amrein-body .ae-tab-btn:hover { color: #0078d4; background: #f3f9fd; }
body.amrein-body .ae-tab-btn.active { color: #0078d4; border-bottom-color: #0078d4; background: #fff; }
body.amrein-body .ae-tab-panel { padding: 26px; display: none; }
body.amrein-body .ae-tab-panel.active { display: block; }
body.amrein-body .ae-tab-panel p { margin: 0 0 14px; font: 400 14px/1.7 "Segoe UI", sans-serif; color: #323130; }
body.amrein-body .ae-tab-panel ul, body.amrein-body .ae-tab-panel ol { margin: 0 0 14px; padding-left: 22px; }
body.amrein-body .ae-tab-panel li { margin: 4px 0; font: 400 14px/1.6 "Segoe UI", sans-serif; color: #323130; }
body.amrein-body .ae-tab-panel img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; }
body.amrein-body .ae-tab-panel a { color: #0078d4; text-decoration: none; }
body.amrein-body .ae-tab-panel a:hover { color: #005a9e; text-decoration: underline; }
body.amrein-body .ae-tab-panel h1, body.amrein-body .ae-tab-panel h2, body.amrein-body .ae-tab-panel h3 {
  color: #323130; font-weight: 600; margin: 18px 0 10px;
}
body.amrein-body .ae-tab-panel .subheader {
  font: 600 15px "Segoe UI", sans-serif; color: #0078d4; margin: 22px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid #edebe9;
}
@media (max-width: 768px) {
  body.amrein-body .ae-tab-btn { padding: 10px 12px; font-size: 12px; }
  body.amrein-body .ae-tab-panel { padding: 18px; }
}

/* ── Product-detail 2-col content refinements ── */
/* Breadcrumb inside the content column */
body.amrein-body .ae-breadcrumb { margin-bottom: 18px; }
body.amrein-body .ae-breadcrumb nav { display: inline-flex; }
body.amrein-body .ae-breadcrumb ol { list-style: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.amrein-body .ae-breadcrumb li { display: inline-flex; align-items: center; }
body.amrein-body .ae-breadcrumb li::after { content: '/'; color: #a19f9c; margin: 0 4px; }
body.amrein-body .ae-breadcrumb li:last-child::after { display: none; }
body.amrein-body .ae-breadcrumb a { font: 500 13px "Segoe UI", sans-serif; color: #0078d4; text-decoration: none; }
body.amrein-body .ae-breadcrumb a:hover { color: #005a9e; text-decoration: underline; }
body.amrein-body .ae-breadcrumb-current { font: 600 13px "Segoe UI", sans-serif; color: #605e5c; }
/* Gallery thumbnails inside content column */
body.amrein-body .ae-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 24px; }
body.amrein-body .ae-gallery-item {
  border: 1px solid #edebe9; border-radius: 6px; overflow: hidden; background: #f3f2f1;
  aspect-ratio: 4/3; cursor: pointer; transition: all 0.15s;
}
body.amrein-body .ae-gallery-item:hover { border-color: #0078d4; box-shadow: 0 2px 8px rgba(0,120,212,0.12); }
body.amrein-body .ae-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.amrein-body .ae-gallery-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 40px;
}
body.amrein-body .ae-gallery-lightbox img { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 4px 30px rgba(255,255,255,0.2); }
/* Lightbox navigation (rotator) */
body.amrein-body .ae-lb-imgwrap { display: flex; align-items: center; justify-content: center; }
body.amrein-body .ae-lb-prev,
body.amrein-body .ae-lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.15); color: #fff; border: none;
  font-size: 32px; padding: 10px 18px; cursor: pointer; border-radius: 4px;
  transition: background 0.2s; z-index: 10000;
}
body.amrein-body .ae-lb-prev { left: 20px; }
body.amrein-body .ae-lb-next { right: 20px; }
body.amrein-body .ae-lb-prev:hover,
body.amrein-body .ae-lb-next:hover { background: rgba(255,255,255,0.35); }
body.amrein-body .ae-lb-close {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255,255,255,0.15); color: #fff; border: none;
  font-size: 28px; cursor: pointer; border-radius: 4px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 10000;
}
body.amrein-body .ae-lb-close:hover { background: rgba(255,255,255,0.35); }
body.amrein-body .ae-lb-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px; background: rgba(0,0,0,0.5);
  padding: 4px 12px; border-radius: 4px; z-index: 10000;
}
/* Download table styling */
body.amrein-body .ae-dl-table { background: #fff; border: 1px solid #edebe9; border-radius: 8px; box-shadow: 0 1.6px 8px rgba(0,0,0,0.05); padding: 20px; margin-bottom: 24px; }
body.amrein-body .ae-dl-table-inner { width: 100%; border-collapse: collapse; }
body.amrein-body .ae-dl-table-inner th {
  background: #f3f2f1; color: #323130; font: 600 13px "Segoe UI", sans-serif; padding: 10px 14px; text-align: left; border-bottom: 2px solid #0078d4;
}
body.amrein-body .ae-dl-table-inner td { padding: 10px 14px; border-bottom: 1px solid #edebe9; font: 400 13px "Segoe UI", sans-serif; color: #323130; }
body.amrein-body .ae-dl-table-inner tr:hover td { background: #faf9f8; }
body.amrein-body .ae-dl-table-inner .btn { font: 600 12px "Segoe UI", sans-serif; border-radius: 4px; padding: 6px 14px; }
body.amrein-body .ae-dl-table-inner .btn-success { background: #107c10; color: #fff; border-color: #107c10; }
body.amrein-body .ae-dl-table-inner .btn-primary { background: #0078d4; color: #fff; border-color: #0078d4; }
body.amrein-body .ae-dl-license-row { background: #f3f9fd; }
body.amrein-body .ae-dl-license-row td { font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
 * MODERN ProductListNav sidebar (SharePoint-style collapsible left nav)
 * Overrides the older amrein-modern.css .ae-listnav styling with a clean
 * SharePoint-blue theme: collapsible category groups, search filter, active
 * highlight, chevron toggle, smooth expand/collapse.
 * ════════════════════════════════════════════════════════════════════ */
body.amrein-body .ae-listnav {
  background: #fff; border: 1px solid #edebe9; border-radius: 8px;
  box-shadow: 0 1.6px 8px rgba(0,0,0,0.05); padding: 0; overflow: hidden;
  position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto;
  font-family: "Segoe UI", sans-serif;
}
/* Scrollbar styling */
body.amrein-body .ae-listnav::-webkit-scrollbar { width: 6px; }
body.amrein-body .ae-listnav::-webkit-scrollbar-thumb { background: #c7e0f4; border-radius: 3px; }
body.amrein-body .ae-listnav::-webkit-scrollbar-track { background: #f3f2f1; }
/* Title bar */
body.amrein-body .ae-listnav-title {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; background: #f3f9fd; border-bottom: 1px solid #edebe9;
  font: 700 14px "Segoe UI", sans-serif; color: #323130; letter-spacing: -0.01em;
}
body.amrein-body .ae-listnav-title i { color: #0078d4; font-size: 16px; }
/* Search box */
body.amrein-body .ae-listnav-search {
  position: relative; padding: 12px 16px; border-bottom: 1px solid #edebe9; background: #faf9f8;
}
body.amrein-body .ae-listnav-search-icon {
  position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
  color: #a19f9c; font-size: 13px; pointer-events: none;
}
body.amrein-body .ae-listnav-search-input {
  width: 100%; padding: 8px 12px 8px 32px; border: 1px solid #edebe9; border-radius: 6px;
  background: #fff; font: 400 13px "Segoe UI", sans-serif; color: #323130; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.amrein-body .ae-listnav-search-input:focus {
  border-color: #0078d4; box-shadow: 0 0 0 3px rgba(0,120,212,0.12);
}
body.amrein-body .ae-listnav-search-input::placeholder { color: #a19f9c; }
/* Groups */
body.amrein-body .ae-listnav-groups { padding: 4px 0 8px; }
body.amrein-body .ae-listnav-group { border-bottom: 1px solid #f3f2f1; }
body.amrein-body .ae-listnav-group:last-child { border-bottom: none; }
/* Group header (collapsible toggle) */
body.amrein-body .ae-listnav-group-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 16px; background: none; border: none; cursor: pointer; text-align: left;
  font: 600 13px "Segoe UI", sans-serif; color: #323130; transition: background 0.15s, color 0.15s;
}
body.amrein-body .ae-listnav-group-header:hover { background: #f3f9fd; color: #0078d4; }
body.amrein-body .ae-listnav-group-header:hover .ae-listnav-group-icon { background: #0078d4; }
body.amrein-body .ae-listnav-group-header:hover .ae-listnav-group-icon i { color: #fff; }
body.amrein-body .ae-listnav-group-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; background: #deecf9;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s;
}
body.amrein-body .ae-listnav-group-icon i { color: #0078d4; font-size: 12px; transition: color 0.15s; }
body.amrein-body .ae-listnav-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.amrein-body .ae-listnav-group-count {
  flex-shrink: 0; font: 600 11px "Segoe UI", sans-serif; color: #605e5c;
  background: #f3f2f1; padding: 2px 8px; border-radius: 10px; min-width: 24px; text-align: center;
}
body.amrein-body .ae-listnav-group.open .ae-listnav-group-count { background: #deecf9; color: #0078d4; }
body.amrein-body .ae-listnav-chevron {
  flex-shrink: 0; color: #a19f9c; font-size: 10px; transition: transform 0.2s ease;
}
body.amrein-body .ae-listnav-group.open .ae-listnav-chevron { transform: rotate(0deg); color: #0078d4; }
body.amrein-body .ae-listnav-group:not(.open) .ae-listnav-chevron { transform: rotate(-90deg); }
/* Items (collapsible content) */
body.amrein-body .ae-listnav-items {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  max-height: 0; transition: max-height 0.3s ease;
}
body.amrein-body .ae-listnav-group.open .ae-listnav-items { max-height: 2000px; }
body.amrein-body .ae-listnav-flat { max-height: none; }
body.amrein-body .ae-listnav-item {
  margin: 0; padding: 0;
}
body.amrein-body .ae-listnav-item a {
  display: block; padding: 8px 16px 8px 50px; text-decoration: none;
  font: 400 13px/1.4 "Segoe UI", sans-serif; color: #605e5c;
  border-left: 3px solid transparent; transition: all 0.15s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.amrein-body .ae-listnav-item a:hover {
  color: #0078d4; background: #f3f9fd; border-left-color: #c7e0f4;
}
body.amrein-body .ae-listnav-item.active a {
  color: #0078d4; background: #deecf9; border-left-color: #0078d4; font-weight: 600;
}
/* Override the OLD amrein-modern.css listnav rules (h6, list-group-item) */
body.amrein-body .ae-listnav h6 { display: none; }
body.amrein-body .ae-listnav .list-group { display: none; }
body.amrein-body .ae-listnav .list-group-item { display: none; }
/* Responsive: collapse sidebar to top on narrow screens */
@media (max-width: 992px) {
  body.amrein-body .ae-listnav { position: static; max-height: none; margin-bottom: 16px; }
}

/* All product tiles (.hp-featured-card) now use the same rich reference design
 * (overlay + tag + badges + desc + View Details link) across the homepage
 * ProductGrid, /sharepoint ProductCatalog, and product-detail RelatedProducts.
 * The base .hp-featured-card styling above (lines 128-152) + amrein-tiles.css
 * applies uniformly. The former .hp-catalog-grid clean override was removed. */

/* ════════════════════════════════════════════════════════════════════
 * Product-detail page refinements (more cohesive modern look)
 * ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
 * 25/75 sidebar sections (product-listing + product-detail): move the
 * Web Parts Menu (ProductListNav) into a sticky left sidebar OUTSIDE the
 * content, and let the content (ProductCatalog / product-detail content)
 * fill the remaining width. The nav stays pinned at top:80px while the
 * content scrolls. Targeted via [wptype="ProductListNav"] which is present
 * in the SSR shell (matches before JS hydration) and persists after, so no
 * FOUC. Full-width sections (hero, rotator, related, comments) have no
 * ProductListNav so they are unaffected.
 * ════════════════════════════════════════════════════════════════════ */
/* Full-bleed product-detail 2-column layout: the nav sidebar scrolls with the
 * page and STICKS (bounces) at top:80px when it would scroll off. The content
 * fills the remaining viewport width (no narrow cap). */
body.amrein-body .outerContainer:has([wptype="ProductListNav"]) {
  width: 100%; max-width: none; padding: 0; margin: 0;
}
body.amrein-body .outerContainer:has([wptype="ProductListNav"]) > .container { width: 100%; max-width: none; padding: 0; }
body.amrein-body .outerContainer:has([wptype="ProductListNav"]) > .container > .row {
  display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; margin: 0; padding: 0; gap: 0;
}
/* Nav sidebar: scrolls WITH the page (in-flow) and STICKS at top:80px when it
 * would scroll past the navbar — the "bounce" effect. align-self:flex-start
 * keeps the column at its natural height so sticky has room to work within the
 * tall row (constrained by the content column). */
body.amrein-body .outerContainer:has([wptype="ProductListNav"]) .rowcol.p250 {
  width: 260px; flex: 0 0 260px; align-self: flex-start;
  position: sticky; top: 80px;
  padding: 24px 0 24px 16px;
}
/* Content: fill ALL remaining viewport width after the sidebar — no narrow
 * max-width cap so the content uses as much space as available. */
body.amrein-body .outerContainer:has([wptype="ProductListNav"]) .rowcol.p750 {
  width: auto; flex: 1 1 0%; min-width: 0;
  padding: 24px 24px 24px 32px;
}
/* The sidebar column is the sticky element (bounces at top:80px). Neutralize
   the inner .ae-listnav's own sticky to avoid double-sticky, but keep its
   max-height + overflow-y for internal nav scrolling. */
body.amrein-body .outerContainer:has([wptype="ProductListNav"]) .ae-listnav {
  position: static; max-height: calc(100vh - 100px); overflow-y: auto;
}
/* Mobile hamburger toggle + backdrop (hidden on desktop) */
body.amrein-body .ae-listnav-burger,
body.amrein-body .ae-listnav-backdrop,
body.amrein-body .ae-listnav-close { display: none; }

/* Responsive: hamburger drawer on narrow screens. The full nav is a LEFT
   DRAWER (85% width) that slides in ON TOP of the content. A TRANSPARENT
   backdrop (no dim) covers the right slice so tapping it dismisses without
   blocking nav link clicks. The drawer extends to the viewport bottom and
   scrolls internally so all groups are reachable. */
@media (max-width: 992px) {
  body.amrein-body .outerContainer:has([wptype="ProductListNav"]) > .container > .row { display: block; }
  /* Nav column: collapses to 0 in-flow height (burger + drawer are both fixed,
     so out of flow). No white space is reserved for the expanded content. */
  body.amrein-body .outerContainer:has([wptype="ProductListNav"]) .rowcol.p250 {
    width: 100%; flex: none; padding: 0; min-height: 0; position: static; top: auto;
  }
  /* Kill the pre-hydration wpEmptyCont placeholder height in the nav column so
     there's no 150px dashed box before the JS runs. */
  body.amrein-body .outerContainer:has([wptype="ProductListNav"]) .rowcol.p250 .wpEmptyCont {
    min-height: 0; min-width: 0; border: none; height: 0;
  }
  /* Content sits just below the in-flow burger (the burger is now in the .row,
     so its height reserves space naturally — no extra padding-top needed). */
  body.amrein-body .outerContainer:has([wptype="ProductListNav"]) .rowcol.p750 {
    width: 100%; flex: none; padding: 14px;
  }
  /* Burger: a left-aligned pill that scrolls WITH the page (position:sticky)
     and pins at the top when it would scroll off. It lives in the .row (tall)
     so sticky has room. Not hidden when the drawer opens (the fixed drawer
     covers it); kept in-flow to avoid a layout shift. */
  body.amrein-body .ae-listnav-burger {
    display: flex; align-items: center; gap: 7px;
    position: sticky; top: 62px;
    margin: 6px 0 6px 12px; width: fit-content;
    z-index: 1036;
    background: #fff; border: 1px solid #c7e0f4; border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,120,212,0.12);
    padding: 7px 13px;
    font: 600 13px "Segoe UI", sans-serif; color: #0078d4; cursor: pointer;
  }
  body.amrein-body .ae-listnav-burger i { color: #0078d4; font-size: 14px; }
  /* Nav drawer: fixed LEFT drawer, slides in over the content. Fixed so it
     moves with the viewport. Hidden by default (visibility + translateX).
     Selector includes the :has() prefix so it beats the desktop override
     (line 738) specificity that would otherwise keep it position:static. */
  body.amrein-body .outerContainer:has([wptype="ProductListNav"]) .ae-listnav {
    position: fixed; top: 56px; left: 0; bottom: 0; width: 85%; max-width: 380px;
    z-index: 1040; max-height: none; overflow-y: auto; margin: 0;
    border-radius: 0; border: none; border-right: 1px solid #edebe9;
    box-shadow: 2px 0 16px rgba(0,0,0,0.12); background: #fff;
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.26s ease-out, visibility 0.26s;
  }
  body.amrein-body .outerContainer:has([wptype="ProductListNav"]) .ae-listnav.ae-open {
    transform: translateX(0); visibility: visible;
  }
  /* Close button: inline in the title bar (right-aligned), not floating. */
  body.amrein-body .ae-listnav-close {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: 30px; height: 30px; border: 1px solid #edebe9; border-radius: 50%;
    background: #fff; color: #323130; cursor: pointer; font-size: 13px;
    flex: 0 0 auto;
  }
  /* Backdrop: TRANSPARENT (no dim) full-screen click-catcher. The right slice
     (outside the 85% drawer) is exposed so tapping it dismisses. z-index below
     the drawer so links inside the drawer still work. */
  body.amrein-body .ae-listnav-backdrop { display: none; }
  body.amrein-body .ae-listnav-backdrop.ae-show {
    display: block; position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
    z-index: 1035; background: transparent;
  }
}
/* Content column cards: consistent spacing */
body.amrein-body .rowcol.p750 > .wprow > .wp_innerCont { margin-bottom: 20px; }
body.amrein-body .rowcol.p750 > .wprow > .wp_innerCont:last-child { margin-bottom: 0; }
/* ProductHero: refine the hero spacing and icon */
body.amrein-body .ae-product-hero { padding: 48px 0 56px !important; }
body.amrein-body .ae-product-hero h1 { font: 700 32px/1.2 "Segoe UI", sans-serif; }
body.amrein-body .ae-product-hero-tagline { font-size: 14px; max-width: 520px; }
body.amrein-body .ae-product-hero-icon { flex: 0 0 300px; max-width: 300px; }
/* BannerRotator: refine spacing below hero */
body.amrein-body .ae-rotator { padding: 24px 16px; }
body.amrein-body .ae-rotator-title { margin-bottom: 12px; }
/* ProductOverview: refine */
body.amrein-body .ae-overview { padding: 24px 24px; margin-bottom: 20px; }
body.amrein-body .ae-overview-header h2 { font: 600 20px/1.3 "Segoe UI", sans-serif; }
body.amrein-body .ae-overview-body { font-size: 14px; line-height: 1.65; }
/* ProductTabs: refine */
body.amrein-body .ae-tabs { margin-bottom: 20px; }
body.amrein-body .ae-tabs-header h2 { font: 600 20px/1.3 "Segoe UI", sans-serif; }
body.amrein-body .ae-tab-panel { padding: 22px 24px; }
body.amrein-body .ae-tab-panel p, body.amrein-body .ae-tab-panel li { font-size: 14px; }
/* Gallery: refine thumbnail grid */
body.amrein-body .ae-gallery { gap: 12px; margin-bottom: 20px; }
body.amrein-body .ae-gallery-item { border-radius: 6px; }
/* Download table: refine */
body.amrein-body .ae-dl-table { padding: 18px; margin-bottom: 20px; }
body.amrein-body .ae-dl-table-inner th { font: 600 13px "Segoe UI", sans-serif; }
body.amrein-body .ae-dl-table-inner td { font: 400 13px "Segoe UI", sans-serif; }
/* Breadcrumb: refine spacing */
body.amrein-body .ae-breadcrumb { margin-bottom: 20px; padding: 0; }
/* RelatedProducts now uses the same .hp-featured-card rich tile design as
 * ProductGrid and ProductCatalog (overlay + tag + badges + desc + View Details
 * link). The former .ae-related-card CSS was removed. */

/* ════════════════════════════════════════════════════════════════════
 * SiteSearch (search results page) refinements
 * ════════════════════════════════════════════════════════════════════ */
body.amrein-body .ae-search { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
body.amrein-body .ae-search-bar { max-width: 560px; }
body.amrein-body .ae-search-bar .form-control { border-radius: 20px 0 0 20px; border: 1px solid #edebe9; padding-left: 16px; font: 400 14px "Segoe UI", sans-serif; }
body.amrein-body .ae-search-bar .btn { border-radius: 0 20px 20px 0; background: #0078d4; border-color: #0078d4; font: 600 14px "Segoe UI", sans-serif; }
body.amrein-body .ae-search-meta { margin: 8px 0 20px; }
body.amrein-body .ae-search-section-header { margin: 20px 0 16px; }
body.amrein-body .ae-search-section-header .hp-section-title { font-size: 20px; }
/* Blog post results list */
body.amrein-body .ae-search-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
body.amrein-body .ae-search-post-item { background: #fff; border: 1px solid #edebe9; border-radius: 8px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
body.amrein-body .ae-search-post-item:hover { border-color: #c7e0f4; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
body.amrein-body .ae-search-post-title { font: 600 16px/1.3 "Segoe UI", sans-serif; margin: 0 0 6px; }
body.amrein-body .ae-search-post-title a { color: #201f1e; text-decoration: none; }
body.amrein-body .ae-search-post-title a:hover { color: #0078d4; }
body.amrein-body .ae-search-post-summary { color: #605e5c; font: 400 13px/1.55 "Segoe UI", sans-serif; margin: 0 0 10px; }
body.amrein-body .ae-search-post-link { color: #0078d4; font: 600 13px "Segoe UI", sans-serif; text-decoration: none; }
body.amrein-body .ae-search-post-link i { margin-left: 2px; transition: margin 0.15s; }
body.amrein-body .ae-search-post-link:hover i { margin-left: 6px; }
@media (max-width: 768px) {
  body.amrein-body .ae-search-posts { grid-template-columns: 1fr; }
}