/*
 * AOM Infusion — Infigo CSS Override
 *
 * IMPORTANT BEFORE UPLOADING
 * 1. Download the existing CSS Override file from Infigo.
 * 2. Merge this stylesheet into the existing file if one is present.
 *    Uploading a new CSS Override file may replace the existing file.
 * 3. Test in a staging/test storefront if available, then clear the relevant
 *    Infigo/storefront cache after uploading.
 *
 * This file uses conservative, common storefront selectors plus optional
 * semantic classes (.aom-primary-button, .aom-secondary-button, etc.).
 * Infigo themes can use different markup and selectors; inspect the live
 * storefront and adjust selectors where needed.
 *
 * Brand tokens supplied by the client:
 * Primary blue: #022A68
 * Accent orange: #F47920
 * Typeface: Archivo, sans-serif
 */

/* ---------- Brand tokens ---------- */
:root {
  --aom-brand-primary: #022A68;
  --aom-brand-primary-hover: #03377F;
  --aom-brand-accent: #F47920;
  --aom-brand-accent-hover: #DB6715;

  --aom-text: #022A68;
  --aom-text-muted: #53657D;
  --aom-page-background: #FFFFFF;
  --aom-surface-subtle: #F3F6FA;
  --aom-border: #D8E0EA;

  --aom-font: "Archivo", Arial, sans-serif;
  --aom-body-size: 16px;
  --aom-heading-size: 35px;

  --aom-button-radius: 32px;
  --aom-button-padding-y: 14px;
  --aom-button-padding-x: 24px;

  --aom-input-radius: 6px;
  --aom-card-radius: 8px;
}

/* ---------- Typography and page defaults ---------- */
html,
body {
  font-family: var(--aom-font);
  font-size: var(--aom-body-size);
  color: var(--aom-text);
  background-color: var(--aom-page-background);
}

button,
input,
select,
textarea,
option,
optgroup {
  font-family: var(--aom-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--aom-brand-primary);
  font-family: var(--aom-font);
  font-weight: 700;
}

h2 {
  font-size: var(--aom-heading-size);
  line-height: 1.2;
}

/* ---------- Links ---------- */
a {
  color: var(--aom-brand-primary);
}

a:hover,
a:focus {
  color: var(--aom-brand-primary-hover);
}

/* ---------- Buttons: common patterns and optional AOM classes ---------- */
/*
 * The generic selectors below are intentionally restrained. If your theme
 * uses different button classes, inspect its markup before adding selectors.
 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.button,
.aom-primary-button {
  font-family: var(--aom-font);
  font-weight: 700;
  border-radius: var(--aom-button-radius);
}

.btn-primary,
.button-primary,
.aom-primary-button,
button[type="submit"],
input[type="submit"] {
  color: #FFFFFF;
  background-color: var(--aom-brand-primary);
  border-color: var(--aom-brand-primary);
}

.btn-primary:hover,
.button-primary:hover,
.aom-primary-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  color: #FFFFFF;
  background-color: var(--aom-brand-primary-hover);
  border-color: var(--aom-brand-primary-hover);
}

.btn-secondary,
.button-secondary,
.aom-secondary-button {
  color: #FFFFFF;
  background-color: var(--aom-brand-accent);
  border-color: var(--aom-brand-accent);
}

.btn-secondary:hover,
.button-secondary:hover,
.aom-secondary-button:hover {
  color: #FFFFFF;
  background-color: var(--aom-brand-accent-hover);
  border-color: var(--aom-brand-accent-hover);
}

/* Keep large marketing-style CTA padding opt-in rather than forcing it on
   every cart, checkout, quantity, or compact table button. */
.aom-primary-button,
.aom-secondary-button {
  padding: 20px 32px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ---------- Form controls ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea {
  font-family: var(--aom-font);
  color: var(--aom-text);
  background-color: #FFFFFF;
  border: 1px solid var(--aom-border);
  border-radius: var(--aom-input-radius);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--aom-brand-primary);
}

/* ---------- Accessible keyboard focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--aom-brand-accent);
  outline-offset: 3px;
}

/* ---------- Optional reusable surfaces ---------- */
.aom-card {
  background-color: #FFFFFF;
  border: 1px solid var(--aom-border);
  border-radius: var(--aom-card-radius);
}

.aom-muted-panel {
  background-color: var(--aom-surface-subtle);
  border-radius: var(--aom-card-radius);
}

/* ---------- Optional Infigo content-template custom colour slots ---------- */
/*
 * Only use these mappings if your Infigo content-template workflow expects
 * these exact class names. Verify against the current Infigo documentation
 * and a test template before relying on them.
 */
.custom-colour-1 {
  color: var(--aom-brand-primary);
}

.custom-colour-2 {
  color: var(--aom-brand-accent);
}

.custom-colour-3 {
  color: #FFFFFF;
}

.custom-colour-4 {
  color: var(--aom-text-muted);
}

/* ---------- Responsive safeguards ---------- */
@media (max-width: 600px) {
  h2 {
    font-size: clamp(26px, 7vw, var(--aom-heading-size));
  }

  .aom-primary-button,
  .aom-secondary-button {
    padding: 14px 22px;
  }
}

/* ==========================================================================
   AOM INFUSION — ADDITIONAL STOREFRONT ELEMENTS
   Reusable .aom- classes require matching HTML/content blocks in Infigo.
   CSS styles elements; it does not create markup, logos, or images.
   Verify selectors and test in a staging storefront before production.
   ========================================================================== */

.aom-container { width: min(100% - 32px, 1200px); margin-inline: auto; }
.aom-section { padding-block: clamp(24px, 4vw, 48px); }
.aom-section-heading { margin: 0 0 12px; color: var(--aom-brand-primary, #022A68); font-size: clamp(24px, 3vw, 35px); font-weight: 700; line-height: 1.2; }
.aom-section-intro { max-width: 720px; margin: 0 0 24px; color: var(--aom-text-muted, #53657D); line-height: 1.6; }

/* Hero / welcome banner */
.aom-hero { padding: clamp(28px, 5vw, 64px); color: #fff; background: var(--aom-brand-primary, #022A68); border-radius: 12px; }
.aom-hero h1, .aom-hero h2, .aom-hero h3 { color: #fff; max-width: 800px; }
.aom-hero p { max-width: 680px; color: #fff; line-height: 1.65; }
.aom-hero .aom-hero-accent { color: #FFB477; }
.aom-hero .aom-primary-button { background: #F47920; border-color: #F47920; color: #172B45; }
.aom-hero .aom-primary-button:hover { background: #FFB477; border-color: #FFB477; color: #172B45; }

/* Information / announcement strip */
.aom-announcement { padding: 12px 18px; color: #022A68; background: #F3F6FA; border-left: 4px solid #F47920; border-radius: 4px; line-height: 1.5; }
.aom-announcement a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Category tiles */
.aom-category-tile { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: #022A68; background: #fff; border: 1px solid #D8E0EA; border-radius: 8px; text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.aom-category-tile:hover { color: #022A68; border-color: #022A68; box-shadow: 0 6px 20px rgba(2,42,104,.10); transform: translateY(-2px); }
.aom-category-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.aom-category-tile__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; }
.aom-category-tile__title { margin: 0; color: #022A68; font-size: 18px; font-weight: 700; line-height: 1.35; }
.aom-category-tile__link { margin-top: auto; color: #022A68; font-weight: 700; text-decoration: underline; text-decoration-color: #F47920; text-underline-offset: 4px; }

/* Product cards */
.aom-product-card { display: flex; flex-direction: column; height: 100%; padding: 16px; color: #022A68; background: #fff; border: 1px solid #D8E0EA; border-radius: 8px; }
.aom-product-card__image { display: flex; align-items: center; justify-content: center; min-height: 160px; margin-bottom: 16px; background: #fff; }
.aom-product-card__image img { display: block; max-width: 100%; max-height: 220px; object-fit: contain; }
.aom-product-card__title { margin: 0 0 8px; color: #022A68; font-size: 17px; font-weight: 700; line-height: 1.4; }
.aom-product-card__description { color: #53657D; font-size: 14px; line-height: 1.5; }
.aom-product-card__price { margin-top: auto; padding-top: 12px; color: #022A68; font-size: 18px; font-weight: 700; }
.aom-product-card .aom-primary-button { align-self: flex-start; margin-top: 14px; padding: 11px 20px; }

/* Status labels */
.aom-badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 10px; color: #022A68; background: #EAF0F8; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.aom-badge--accent { color: #172B45; background: #FFB477; }
.aom-badge--neutral { color: #34465C; background: #EEF1F5; }

/* Breadcrumbs */
.aom-breadcrumbs { margin-block: 16px 24px; color: #53657D; font-size: 14px; line-height: 1.5; }
.aom-breadcrumbs a { color: #022A68; text-decoration: underline; text-underline-offset: 2px; }
.aom-breadcrumbs [aria-current="page"] { color: #53657D; text-decoration: none; }

/* Order history / data tables */
.aom-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #D8E0EA; border-radius: 8px; }
.aom-table { width: 100%; border-collapse: collapse; background: #fff; color: #022A68; }
.aom-table th { padding: 13px 16px; color: #fff; background: #022A68; font-weight: 700; text-align: left; }
.aom-table td { padding: 13px 16px; border-bottom: 1px solid #D8E0EA; vertical-align: middle; }
.aom-table tbody tr:nth-child(even) { background: #F7F9FC; }
.aom-table tbody tr:last-child td { border-bottom: 0; }

/* Form labels and validation */
.aom-field-label { display: block; margin-bottom: 6px; color: #022A68; font-weight: 600; }
.aom-help-text { display: block; margin-top: 5px; color: #53657D; font-size: 13px; line-height: 1.45; }
.aom-validation-message { margin-top: 6px; color: #A12A20; font-size: 14px; font-weight: 600; }
.aom-input--error { border-color: #A12A20 !important; }

/* Footer */
.aom-footer { margin-top: 48px; padding: clamp(28px, 4vw, 48px) 0; color: #fff; background: #022A68; }
.aom-footer h2, .aom-footer h3, .aom-footer h4, .aom-footer p, .aom-footer li { color: #fff; }
.aom-footer p, .aom-footer li { line-height: 1.6; }
.aom-footer a { color: #fff; text-decoration: underline; text-decoration-color: #F47920; text-underline-offset: 3px; }
.aom-footer a:hover, .aom-footer a:focus { color: #FFB477; }

/* Responsive and reduced-motion safeguards */
@media (prefers-reduced-motion: reduce) { .aom-category-tile { transition: none; } .aom-category-tile:hover { transform: none; } }
@media (max-width: 600px) {
  .aom-hero { border-radius: 8px; padding: 24px 20px; }
  .aom-category-tile__body { padding: 14px; }
  .aom-product-card { padding: 12px; }
  .aom-table th, .aom-table td { padding: 10px 12px; white-space: nowrap; }
}

/* ==========================================================================
   AOM INFUSION — WEBSITE-ALIGNED REFINEMENTS
   Inspired by the public AOM Infusion homepage structure and tone:
   clean white space, confident navy headings, image-led content sections,
   and clear, purposeful calls to action.
   These styles remain opt-in unless the theme has matching selectors/classes.
   ========================================================================== */

:root {
  --aom-content-width: 1200px;
  --aom-section-space: clamp(32px, 5vw, 64px);
  --aom-card-border: #E1E7EF;
  --aom-soft-blue: #F4F7FB;
}

/* Use a cleaner, editorial content rhythm instead of overly decorative UI. */
.aom-page-content {
  width: min(calc(100% - 40px), var(--aom-content-width));
  margin-inline: auto;
}

.aom-content-section {
  padding-block: var(--aom-section-space);
}

.aom-content-section + .aom-content-section {
  border-top: 1px solid var(--aom-card-border);
}

.aom-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--aom-brand-accent, #F47920);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.aom-page-title {
  max-width: 850px;
  margin: 0 0 16px;
  color: var(--aom-brand-primary, #022A68);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
}

.aom-lead {
  max-width: 760px;
  color: var(--aom-text-muted, #53657D);
  font-size: 17px;
  line-height: 1.7;
}

/* A calmer, white hero option for pages where a full navy block feels too heavy. */
.aom-hero--light {
  padding: clamp(28px, 5vw, 56px) 0;
  color: var(--aom-text, #022A68);
  background: #FFFFFF;
  border-bottom: 1px solid var(--aom-card-border);
  border-radius: 0;
}

.aom-hero--light h1,
.aom-hero--light h2,
.aom-hero--light h3,
.aom-hero--light p {
  color: var(--aom-brand-primary, #022A68);
}

.aom-hero--light p {
  max-width: 720px;
  line-height: 1.7;
}

/* The public site uses service-oriented content blocks; keep portal cards simple. */
.aom-info-card {
  height: 100%;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--aom-card-border);
  border-radius: 8px;
}

.aom-info-card h2,
.aom-info-card h3,
.aom-info-card h4 {
  margin-top: 0;
  color: var(--aom-brand-primary, #022A68);
}

.aom-info-card p {
  color: var(--aom-text-muted, #53657D);
  line-height: 1.65;
}

.aom-info-card__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--aom-brand-primary, #022A68);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--aom-brand-accent, #F47920);
  text-underline-offset: 4px;
}

/* Image-led sections: use real, approved AOM imagery in the content block. */
.aom-image-panel {
  overflow: hidden;
  background: var(--aom-soft-blue);
  border-radius: 8px;
}

.aom-image-panel img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.aom-image-panel__caption {
  padding: 14px 18px;
  color: var(--aom-brand-primary, #022A68);
  font-size: 14px;
  font-weight: 600;
}

/* Orange is best used as a small emphasis or action color. */
.aom-accent-rule {
  display: block;
  width: 56px;
  height: 4px;
  margin-block: 16px 20px;
  background: var(--aom-brand-accent, #F47920);
  border-radius: 999px;
}

/* Ordering-specific quick actions: clear, compact, and easy to scan. */
.aom-quick-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  color: var(--aom-brand-primary, #022A68);
  background: #FFFFFF;
  border: 1px solid var(--aom-card-border);
  border-radius: 8px;
  text-decoration: none;
}

.aom-quick-action:hover {
  color: var(--aom-brand-primary, #022A68);
  background: var(--aom-soft-blue);
  border-color: var(--aom-brand-primary, #022A68);
}

.aom-quick-action__title {
  margin: 0;
  color: var(--aom-brand-primary, #022A68);
  font-weight: 700;
}

.aom-quick-action__description {
  margin: 5px 0 0;
  color: var(--aom-text-muted, #53657D);
  font-size: 14px;
  line-height: 1.5;
}

/* Avoid forcing the marketing-site heading size onto compact commerce screens. */
.aom-ordering-page h1 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
}

.aom-ordering-page h2 {
  font-size: clamp(23px, 2.5vw, 30px);
  line-height: 1.25;
}

.aom-ordering-page .aom-primary-button,
.aom-ordering-page .aom-secondary-button {
  padding: 12px 22px;
}

@media (max-width: 600px) {
  .aom-page-content {
    width: min(calc(100% - 28px), var(--aom-content-width));
  }

  .aom-info-card {
    padding: 18px;
  }

  .aom-quick-action {
    align-items: flex-start;
    padding: 15px;
  }
}