/* ==========================================================================
   USASignLab storefront
   Layered on top of Bootstrap 5. Bootstrap handles the grid, forms and
   components; this file supplies the brand, the header/nav and the
   configurator.
   ========================================================================== */

:root {
  --navy:        #0e2a47;
  --navy-dark:   #08192c;
  --navy-mid:    #16395c;
  --accent:      #e2541f;
  --accent-dark: #c14313;
  --ink:         #16212b;
  --muted:       #64748b;
  --line:        #dfe5ec;
  --wash:        #f4f7fa;
  --radius:      6px;

  --bs-body-color: var(--ink);
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, sans-serif;
}

body { background: #fff; color: var(--ink); }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}
.bg-accent { background: var(--accent) !important; }
.text-muted-light { color: #9fb0c4 !important; }

/* --------------------------------------------------------------- header -- */
.announce-bar {
  background: var(--accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  padding: .45rem 0;
  letter-spacing: .01em;
}
.announce-bar a { color: #fff; text-decoration: underline; }

.site-header { position: sticky; top: 0; z-index: 1030; }
.header-top { background: var(--navy); color: #fff; }

.brand {
  display: block;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--accent);
  letter-spacing: -.02em;
}
.brand-word {
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: -.02em;
}
.brand-tag {
  color: #93a9c1;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: .25rem;
}
.brand-footer .brand-word { color: #fff; }

/* An uploaded logo replaces the wordmark. The height is fixed and the width
   left to the image, so wide and square logos both sit on the same baseline
   without the header changing size. */
.brand-logo {
  height: 40px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}
@media (max-width: 575.98px) {
  .brand-logo { height: 32px; max-width: 170px; }
}

.search-form { max-width: 520px; }
.search-form .form-control { border: 0; }
.search-form .form-control:focus { box-shadow: none; }

.header-phone {
  color: #fff;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: #fff; text-decoration: none; }
.header-phone small {
  display: block;
  font-weight: 400;
  font-size: .68rem;
  color: #93a9c1;
}
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: .65rem;
}

/* ------------------------------------------------------------------ nav -- */
.main-nav {
  background: var(--navy-mid);
  padding: 0;
  border-bottom: 3px solid var(--accent);
}
.main-nav .nav-link {
  color: #e7eef6;
  font-weight: 600;
  font-size: .9rem;
  padding: .8rem 1rem;
}
.main-nav .nav-link:hover,
.main-nav .nav-link:focus { color: #fff; background: rgba(255,255,255,.08); }
.main-nav .navbar-toggler {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  margin: .5rem 0;
}
.main-nav .navbar-toggler:focus { box-shadow: none; }
.toggler-label { color: #fff; font-weight: 600; font-size: .9rem; }
.nav-utility .nav-link { font-weight: 400; font-size: .84rem; color: #b9cade; }

.mega-menu {
  border: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 12px 34px rgba(8,25,44,.22);
  padding: 0;
  min-width: 340px;
}
@media (min-width: 992px) {
  .mega-menu { min-width: 560px; }
}
.mega-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .7rem 1rem;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mega-head a { font-size: .78rem; color: var(--accent); text-transform: none; letter-spacing: 0; }
.mega-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: .5rem;
}
@media (min-width: 992px) {
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
}
.mega-link {
  padding: .5rem .75rem;
  border-radius: 4px;
  font-size: .88rem;
  color: var(--ink);
}
.mega-link:hover { background: var(--wash); color: var(--accent); text-decoration: none; }

/* ----------------------------------------------------------------- hero -- */
.hero {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 60%, #061527 100%);
  color: #fff;
  padding: 3.5rem 0;
}
.hero-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffb494;
  border: 1px solid rgba(226,84,31,.55);
  border-radius: 100px;
  padding: .3rem .85rem;
  margin-bottom: 1.1rem;
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.hero-title span { color: var(--accent); }
.hero-lead {
  font-size: 1.05rem;
  color: #c3d3e3;
  max-width: 48ch;
  margin-bottom: 1.6rem;
}
.hero .btn-outline-light:hover { color: var(--navy); }
.hero-points {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  font-size: .88rem;
  color: #c3d3e3;
}
.hero-points i { color: var(--accent); margin-right: .35rem; }

.hero-panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 1.5rem;
  backdrop-filter: blur(2px);
}
.hero-panel-head {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #93a9c1;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.hero-panel-list { margin: 0; }
.hero-panel-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-panel-list dt { font-weight: 400; color: #c3d3e3; font-size: .9rem; }
.hero-panel-list dd { margin: 0; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.hero-panel-note { font-size: .74rem; color: #8fa5bd; padding-top: .9rem; }

/* --------------------------------------------------------------- strips -- */
.value-strip { background: var(--wash); border-bottom: 1px solid var(--line); }
.value-item { padding: 1.5rem .75rem; }
.value-item + .value-item { border-left: 1px solid var(--line); }
.value-item i { display: block; font-size: 1.4rem; color: var(--accent); margin-bottom: .4rem; }
.value-item strong { display: block; font-size: .95rem; }
.value-item span { display: block; font-size: .8rem; color: var(--muted); }

.section-head { margin-bottom: 1.5rem; }
.section-head h2 { font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: .25rem; }
.section-head p { color: var(--muted); margin: 0; }

.section-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* -------------------------------------------------------------- tiles ---- */
.category-tile {
  display: block;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.category-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(14,42,71,.09);
  text-decoration: none;
}
.category-tile h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; color: var(--navy); }
.category-tile ul {
  list-style: none;
  padding: 0;
  margin: 0 0 .9rem;
  font-size: .85rem;
  color: var(--muted);
}
.category-tile li { padding: .12rem 0; }
.category-tile-cta { font-size: .82rem; font-weight: 700; color: var(--accent); }

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.product-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(14,42,71,.1);
  transform: translateY(-2px);
  text-decoration: none;
}
.product-card-media {
  aspect-ratio: 4 / 3;
  background: var(--wash);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card-media img { width: 100%; height: 100%; object-fit: cover; }
.product-card-placeholder { color: #b8c6d6; font-size: 2rem; }
.product-card-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.product-card-title { font-size: .98rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; }
.product-card-desc {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-cta { margin-top: auto; font-size: .8rem; font-weight: 700; color: var(--accent); }

.location-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  height: 100%;
  background: #fff;
}
.location-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.location-card address { font-size: .86rem; color: var(--muted); margin-bottom: .5rem; }
.location-hours { font-size: .78rem; color: var(--muted); margin-bottom: .5rem; }

.cta-band {
  background: var(--navy);
  color: #fff;
  padding: 3rem 0;
}
.cta-band h2 { font-weight: 800; letter-spacing: -.02em; }
.cta-band p { color: #c3d3e3; }
.cta-band a { color: #ffb494; }

/* ----------------------------------------------------------- page heads -- */
.page-head {
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 0;
}
.page-head-tight { padding: 1rem 0; }
.page-head h1 { font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; margin: 0; }
.page-head .lead { color: var(--muted); font-size: 1rem; margin: .4rem 0 0; }
.page-head .breadcrumb { margin: 0 0 .4rem; font-size: .82rem; }

.empty-state { text-align: center; padding: 3.5rem 1rem; }
.empty-state i { font-size: 2.5rem; color: #b8c6d6; display: block; margin-bottom: .75rem; }
.empty-state h2 { font-size: 1.25rem; font-weight: 700; }
.empty-state p { color: var(--muted); max-width: 46ch; margin: 0 auto 1.25rem; }

/* --------------------------------------------------------------- cards --- */
.form-card, .side-card, .auth-card, .summary-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.side-card { background: var(--wash); }
.summary-card { position: sticky; top: 140px; }
.summary-row { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .92rem; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.summary-total strong { font-size: 1.35rem; color: var(--navy); }
.summary-items { list-style: none; padding: 0; margin: 0 0 .5rem; }
.summary-items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.summary-items small { display: block; color: var(--muted); font-size: .76rem; }

.prose { line-height: 1.7; }
.prose h2 { font-size: 1.3rem; font-weight: 700; margin: 1.75rem 0 .6rem; }
.prose h3 { font-size: 1.1rem; font-weight: 700; margin: 1.4rem 0 .5rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .35rem; }

.checklist { list-style: none; padding: 0; margin: 0; font-size: .87rem; }
.checklist li { position: relative; padding: .4rem 0 .4rem 1.5rem; color: var(--muted); }
.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.kv { margin: 0; }
.kv > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.kv dt { font-weight: 400; color: var(--muted); margin: 0; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

.numbered-steps { padding-left: 1.1rem; font-size: .9rem; }
.numbered-steps li { margin-bottom: .5rem; }

.pickup-row { padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.pickup-row strong { display: block; }
.pickup-row span { display: block; color: var(--muted); }
.pickup-row small { display: block; color: var(--muted); font-size: .76rem; }

.stat-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  height: 100%;
}
.stat-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .35rem;
}

/* ------------------------------------------------------------- product --- */
.product-gallery {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--wash);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-gallery img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery-placeholder { text-align: center; color: #9fb0c4; }
.product-gallery-placeholder i { font-size: 3rem; display: block; margin-bottom: .5rem; }
.product-gallery-placeholder span { font-size: .9rem; font-weight: 600; }

.product-title { font-weight: 800; font-size: 1.75rem; letter-spacing: -.02em; }
.product-lead { color: var(--muted); font-size: 1rem; }
.product-tabs { padding: 1.25rem 0; }
.spec-table th { width: 45%; font-weight: 600; color: var(--muted); }

.configurator {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 140px;
  background: #fff;
}
.configurator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.15rem;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
}
.configurator-body { padding: 1.15rem; max-height: 58vh; overflow-y: auto; }
.configurator-foot { padding: 1.15rem; border-top: 1px solid var(--line); }

.config-group { border: 0; padding: 0; margin: 0 0 1.15rem; }
.config-group legend {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .4rem;
  float: none;
  width: auto;
}
.help-dot {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: .62rem;
  line-height: 1;
  padding: 0;
  margin-left: .35rem;
  vertical-align: 1px;
}

.preset-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.preset-chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 100px;
  padding: .22rem .7rem;
  font-size: .78rem;
  color: var(--ink);
}
.preset-chip:hover { border-color: var(--accent); color: var(--accent); }

.option-radios { display: grid; gap: .4rem; }
.option-radio { display: block; cursor: pointer; margin: 0; }
.option-radio input { position: absolute; opacity: 0; }
.option-radio-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  font-size: .88rem;
}
.option-radio input:checked + .option-radio-body {
  border-color: var(--accent);
  background: #fff5f0;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.option-radio input:focus-visible + .option-radio-body { outline: 2px solid var(--navy); outline-offset: 2px; }
.option-price { color: var(--muted); font-size: .8rem; white-space: nowrap; }

.qty-row { display: flex; gap: .4rem; max-width: 190px; }
.qty-row .btn { width: 42px; flex-shrink: 0; }

.upload-slot {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: .75rem;
  background: var(--wash);
}
.upload-slot.is-ready { border-color: #2f9e44; background: #f2fbf4; border-style: solid; }
.upload-slot.is-error { border-color: #d64545; background: #fdf3f3; border-style: solid; }
.upload-slot-head {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.upload-state { font-weight: 400; color: var(--muted); font-size: .76rem; }
.upload-progress { height: 4px; background: var(--line); border-radius: 2px; margin-top: .5rem; overflow: hidden; }
.upload-bar { height: 100%; width: 0; background: var(--accent); transition: width .15s; }
/* What the configurator says when the customer tries to add a line with no
   artwork on it, or with one still uploading. */
.upload-notice {
  margin: .6rem 0 0;
  padding: .5rem .7rem;
  border-left: 3px solid var(--accent);
  background: #fff6f2;
  color: var(--ink);
  font-size: .82rem;
}

.price-panel { background: var(--navy); color: #fff; padding: 1.15rem; }
.price-rows { display: grid; gap: .25rem; margin-bottom: .75rem; }
.price-rows > div { display: flex; justify-content: space-between; font-size: .85rem; color: #b9cade; }
.price-rows b { color: #fff; font-variant-numeric: tabular-nums; }
.price-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.price-total span { font-size: .85rem; color: #b9cade; }
.price-total strong { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.price-note { font-size: .74rem; color: #8fa5bd; margin-top: .5rem; }
.price-locked { display: flex; gap: .75rem; align-items: center; }
.price-locked i { font-size: 1.5rem; color: var(--accent); }
.price-locked strong { display: block; font-size: .95rem; }
.price-locked span { font-size: .78rem; color: #b9cade; }
.price-panel .btn-outline-light:hover { color: var(--navy); }

/* ----------------------------------------------------------------- cart -- */
.cart-line {
  display: flex;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fff;
}
.cart-line-media { width: 110px; flex-shrink: 0; }
.cart-line-media img { width: 100%; border-radius: 4px; }
.cart-line-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--wash);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8c6d6;
  font-size: 1.5rem;
}
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-title { font-size: 1rem; font-weight: 700; margin-bottom: .15rem; }
.cart-line-job { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }
.cart-spec { margin: .5rem 0; font-size: .82rem; }
.cart-spec > div { display: flex; gap: .5rem; padding: .12rem 0; }
.cart-spec dt { color: var(--muted); min-width: 110px; font-weight: 400; margin: 0; }
.cart-spec dd { margin: 0; }
.cart-line-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.cart-qty { width: 78px; }
.cart-line-price { text-align: right; }
.cart-line-price strong { display: block; font-size: 1.15rem; }

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .15rem .6rem;
  font-size: .76rem;
  margin-right: .3rem;
  color: var(--ink);
}
.file-chip em { color: var(--muted); font-style: normal; }
button.file-chip, a.file-chip[data-bs-toggle] { cursor: pointer; }

/* The customer's design, shown over their order page. Front and back stack. */
.design-viewer { background: var(--wash); text-align: center; }
.design-viewer-file { margin: 0 0 1.25rem; }
.design-viewer-file:last-child { margin-bottom: 0; }
.design-viewer-file img {
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}
.design-viewer-file iframe { display: block; width: 100%; height: 70vh; border: 0; background: #fff; }
.design-viewer-file figcaption { margin-top: .5rem; font-size: .85rem; }
.design-viewer-file figcaption em { color: var(--muted); font-style: normal; }

@media (max-width: 575.98px) {
  .cart-line { flex-direction: column; }
  .cart-line-media { width: 100%; max-width: 140px; }
}

/* ------------------------------------------------------------- checkout -- */
.method-list { display: grid; gap: .5rem; }
.method-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  cursor: pointer;
  margin: 0;
}
.method-option:has(input:checked) { border-color: var(--accent); background: #fff5f0; }
.method-body { flex: 1; }
.method-name { display: block; font-weight: 600; font-size: .92rem; }
.method-meta { display: block; font-size: .78rem; color: var(--muted); }
.method-price { font-weight: 700; }

.confirm-hero { text-align: center; padding: 2rem 1rem 0; }
.confirm-hero i { font-size: 3rem; color: #2f9e44; }
.confirm-hero h1 { font-weight: 800; font-size: 1.8rem; margin: .75rem 0 .5rem; letter-spacing: -.02em; }
.confirm-hero p { color: var(--muted); max-width: 56ch; margin: 0 auto .4rem; }
.confirm-ship { font-size: .95rem; }

.confirm-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
.confirm-item:last-child { border-bottom: 0; padding-bottom: 0; }
.confirm-options { list-style: none; padding: 0; margin: .4rem 0 0; font-size: .78rem; color: var(--muted); }
.confirm-options li { display: inline; }
.confirm-options li:not(:last-child)::after { content: " \00b7 "; }

/* A design sent back to the customer. Loud on purpose: it is the one thing on
   the page that needs them. */
.confirm-request {
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: #fff6f2;
  padding: 1.15rem;
}
.confirm-request h2 { color: var(--accent-dark); }
.confirm-request-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 0;
  border-top: 1px solid #f0d7cb;
}
.confirm-request-line form { margin: 0; }

/* Where staff are with the artwork on one order line. Mirrors the badge in the
   header, with a sentence saying what happens next. */
.artwork-status {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-top: .6rem;
  padding: .55rem .75rem;
  border-left: 3px solid;
  border-radius: var(--radius);
  font-size: .86rem;
}
.artwork-status small { color: var(--muted); }
.artwork-status.is-review { border-color: #0dcaf0; background: #eefbfe; }
.artwork-status.is-review strong { color: #087990; }
.artwork-status.is-approved { border-color: #1aa37a; background: #eefaf5; }
.artwork-status.is-changes { border-color: #dc3545; background: #fdf0f1; }
.artwork-status.is-changes strong { color: #b02a37; }
.artwork-status a { align-self: flex-start; }

/* Staff's note on a design they sent back: quoted, so it reads as theirs. */
.artwork-note {
  padding: .5rem .75rem;
  border-left: 3px solid #dc3545;
  background: #fff;
  border-radius: var(--radius);
  white-space: pre-line;
}
.artwork-replace-form { max-width: 28rem; }
.artwork-keep-form { max-width: 28rem; }
.artwork-choice { padding-top: .6rem; }
.artwork-choice + .artwork-choice { margin-top: .6rem; border-top: 1px dashed #f0d7cb; }
.artwork-status.is-approved strong,
.artwork-status.is-approved span { color: #13795b; }

/* A price staff agreed with this customer, on the cart and at checkout. */
.agreed-price-note { color: var(--accent-dark); }

/* ----------------------------------------------------------------- blog --- */
.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.blog-card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.blog-card-placeholder {
  display: grid;
  place-items: center;
  background: var(--wash);
  color: var(--muted);
  font-size: 2rem;
}
.blog-card-body { padding: 1rem 1.1rem 1.2rem; }
.blog-card-date { font-size: .78rem; color: var(--muted); }
.blog-card-title { font-size: 1.05rem; margin: .35rem 0 .5rem; }
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: var(--accent); }
.blog-card-excerpt { font-size: .9rem; color: var(--muted); }
.blog-card-more { font-size: .85rem; font-weight: 600; text-decoration: none; }

.blog-post-cover { display: block; width: 100%; border-radius: var(--radius); }
.blog-post-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.blog-post-body h2, .blog-post-body h3 { margin-top: 1.6rem; }

/* ------------------------------------------------------------- account --- */
.account-nav {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem;
  background: #fff;
}
.account-nav-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: .9rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.account-nav-head strong { display: block; font-size: .92rem; }
.account-nav-head small { display: block; color: var(--muted); font-size: .78rem; }
.account-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.account-nav .nav-link {
  color: var(--ink);
  font-size: .89rem;
  padding: .45rem .5rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.account-nav .nav-link i { color: var(--muted); width: 16px; }
.account-nav .nav-link:hover { background: var(--wash); }
.account-nav .nav-link.active { background: var(--navy); color: #fff; }
.account-nav .nav-link.active i { color: #fff; }

.address-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  height: 100%;
  font-size: .88rem;
}
.address-card address { margin: .35rem 0 0; color: var(--muted); }
.address-label {
  display: inline-block;
  background: var(--wash);
  border-radius: 100px;
  padding: .1rem .55rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: .35rem;
}

.tracker { list-style: none; padding: 0; margin: 0; }
.tracker li { display: flex; gap: .85rem; padding-bottom: 1.1rem; position: relative; }
.tracker li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.tracker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.tracker strong { display: block; font-size: .92rem; }
.tracker small { color: var(--muted); font-size: .78rem; }

/* ---------------------------------------------------------------- footer -- */
.site-footer { background: var(--navy-dark); color: #c3d3e3; margin-top: 3rem; }
.footer-cta {
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 0;
  color: #fff;
}
.footer-heading {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #fff;
  margin-bottom: .85rem;
}
.footer-list { list-style: none; padding: 0; margin: 0; font-size: .86rem; }
.footer-list li { padding: .2rem 0; }
.site-footer a { color: #c3d3e3; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1rem 0;
  color: #8fa5bd;
}

/* ----------------------------------------------------------------- auth -- */
.auth-card { padding: 2rem; }

/* ---------------------------------------------------------- live chat -- */
/* Bottom-left, deliberately: the cart and account menus live top-right, and
   sticky "back to top" controls conventionally sit bottom-right. */
.chat-widget {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1045;            /* above content, below Bootstrap modals (1055) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}

.chat-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.15rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: background .15s ease, transform .15s ease;
}
.chat-launcher:hover { background: var(--accent-dark); transform: translateY(-1px); }
.chat-launcher i { font-size: 1.1rem; }
.chat-widget.is-open .chat-launcher-text { display: none; }

.chat-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #94a3b8;      /* offline */
  flex: 0 0 auto;
}
.chat-dot.is-online, .chat-status.is-online .chat-dot { background: #22c55e; }

.chat-unread {
  position: absolute;
  top: -.25rem;
  right: -.25rem;
  min-width: 1.25rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: #16212b;
  color: #fff;
  font-size: .7rem;
  line-height: 1.25rem;
  text-align: center;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  width: min(22rem, calc(100vw - 2rem));
  height: min(30rem, calc(100vh - 7rem));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
  overflow: hidden;
  order: -1;                /* panel sits above the launcher */
}

.chat-panel-head {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .75rem .9rem;
  background: var(--ink);
  color: #fff;
}
.chat-panel-head strong { display: block; font-size: .95rem; }
.chat-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  color: #b9c6d4;
}
.chat-whoami {
  display: block;
  font-size: .72rem;
  color: #b9c6d4;
  margin-top: .1rem;
}
.chat-whoami strong { color: #fff; font-weight: 600; overflow-wrap: anywhere; }

.chat-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #b9c6d4;
  padding: .15rem .3rem;
  line-height: 1;
}
.chat-close:hover { color: #fff; }

.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .9rem;
  background: #f7f9fb;
  font-size: .87rem;
}
.chat-empty, .chat-note {
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
  margin: .5rem 0;
}

.chat-msg { margin-bottom: .7rem; display: flex; flex-direction: column; }
.chat-msg-visitor { align-items: flex-end; }
.chat-msg-admin   { align-items: flex-start; }
.chat-bubble {
  max-width: 85%;
  padding: .5rem .7rem;
  border-radius: 12px;
  white-space: pre-wrap;    /* keep the visitor's own line breaks */
  overflow-wrap: anywhere;  /* a pasted URL must not widen the panel */
}
.chat-msg-visitor .chat-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; }
.chat-msg-admin   .chat-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.chat-meta { font-size: .7rem; color: var(--muted); margin-top: .2rem; }

.chat-offline-note {
  margin: 0;
  padding: .55rem .9rem;
  background: #fff7ed;
  border-top: 1px solid var(--line);
  color: #9a3412;
  font-size: .78rem;
}

.chat-identify {
  display: grid;
  gap: .4rem;
  padding: .6rem .9rem 0;
}

.chat-composer {
  display: flex;
  gap: .4rem;
  align-items: flex-end;
  padding: .6rem .9rem .8rem;
  border-top: 1px solid var(--line);
}
.chat-composer textarea { resize: none; max-height: 120px; font-size: .87rem; }
.chat-composer .btn { flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .chat-launcher-text { display: none; }
  .chat-panel { height: min(26rem, calc(100vh - 6rem)); }
}

/* accessibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------ promotion pages -- */
/* Each layout is one class on the wrapper. The images themselves are plain
   <figure> elements, so an arrangement can change without touching the HTML. */
.promo-images { display: grid; gap: 1rem; }
.promo-image { margin: 0; }
.promo-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.promo-image figcaption {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--muted);
}

/* One image across the full width; any extras stack beneath it. */
.promo-banner { grid-template-columns: 1fr; }

/* Two equal columns, falling to one on a phone. */
.promo-side_by_side { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .promo-side_by_side { grid-template-columns: 1fr 1fr; }
}

/* A responsive grid that fills the row, whatever the count. */
.promo-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Full width, one under another, with a little more air between. */
.promo-stacked { grid-template-columns: 1fr; gap: 1.5rem; }

/* A collage: the first image takes a double-width, double-height cell and the
   rest fill in around it. Degrades to a single column on a phone. */
.promo-collage { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .promo-collage {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 12rem;
  }
  .promo-collage .promo-image { grid-column: span 1; }
  .promo-collage .promo-image:first-child { grid-column: span 2; grid-row: span 2; }
  .promo-collage .promo-image img { height: 100%; object-fit: cover; }
  .promo-collage .promo-image:first-child img { height: 100%; }
}

/* ---------------------------------------------------------- invoice -- */
/* The customer's copy of the invoice. Deliberately the same sheet the admin
   panel prints, so both sides see the same document. */
.invoice-sheet {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2rem;
  max-width: 52rem;
  margin: 0 auto;
}
.invoice-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}
.invoice-logo { height: 46px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.invoice-wordmark { font-size: 1.4rem; font-weight: 800; display: block; margin-bottom: .35rem; }
.invoice-from p { color: var(--muted); margin-top: .4rem; }
.invoice-meta { text-align: right; }
.invoice-meta h1 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 .5rem;
}
.invoice-meta dl { margin: 0; font-size: .82rem; }
.invoice-meta dl > div { display: flex; gap: .6rem; justify-content: flex-end; }
.invoice-meta dt { color: var(--muted); font-weight: 400; }
.invoice-meta dd { margin: 0; font-weight: 700; }

.invoice-barcode { margin-bottom: .6rem; }
.invoice-barcode svg { display: block; margin-left: auto; }
.invoice-barcode span {
  display: block; text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem; letter-spacing: .06em; margin-top: .1rem;
}

.invoice-parties {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  margin-bottom: 1.5rem; font-size: .85rem;
}
@media (min-width: 768px) { .invoice-parties { grid-template-columns: repeat(3, 1fr); } }
.invoice-party h2 {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
  padding-bottom: .3rem; margin-bottom: .5rem;
}
.invoice-pay { margin: 0; }
.invoice-pay > div { margin-bottom: .35rem; }
.invoice-pay dt { font-weight: 400; color: var(--muted); font-size: .78rem; }
.invoice-pay dd { margin: 0; font-weight: 700; }

.invoice-items { width: 100%; border-collapse: collapse; font-size: .85rem; }
.invoice-items thead th {
  text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--ink); padding: .5rem .4rem;
}
.invoice-items tbody td {
  padding: .6rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.invoice-col-image { width: 4.5rem; }
.invoice-col-qty { width: 4rem; }
.invoice-col-amount { width: 7rem; }
.invoice-thumb {
  display: block; width: 3.5rem; height: 3.5rem; object-fit: contain;
  background: var(--wash); border: 1px solid var(--line); border-radius: 4px;
}
.invoice-thumb-empty { display: grid; place-items: center; color: var(--muted); }

.invoice-totals-wrap { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.invoice-totals { min-width: 17rem; margin: 0; font-size: .85rem; }
.invoice-totals > div {
  display: flex; justify-content: space-between; gap: 1.5rem; padding: .3rem 0;
}
.invoice-totals dt { font-weight: 400; color: var(--muted); }
.invoice-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.invoice-totals .invoice-grand {
  border-top: 2px solid var(--ink); margin-top: .35rem; padding-top: .5rem; font-size: 1.05rem;
}
.invoice-totals .invoice-grand dt,
.invoice-totals .invoice-grand dd { font-weight: 800; color: var(--ink); }

.invoice-notes { margin-top: 1.5rem; font-size: .85rem; }
.invoice-notes h2 {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.invoice-foot {
  margin-top: 2rem; padding-top: .75rem; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
}

@media print {
  .site-header, .site-footer, .chat-widget, .announce-bar,
  .d-print-none { display: none !important; }
  body { background: #fff !important; }
  .container { padding: 0 !important; max-width: none !important; }
  .invoice-sheet { border: 0; border-radius: 0; padding: 0; max-width: none; }
  .invoice-items tr { page-break-inside: avoid; }
  .invoice-totals-wrap { page-break-inside: avoid; }
}