/* ============================================================
   AMATULI — STANDALONE STYLESHEET
   Brand: dark brown #1C1208 · gold #8B7A2E · warm white #F5F2EC
   Fonts: Cormorant Garamond · Syncopate · DM Sans
   ============================================================ */

:root {
  --am-dark:       #1C1208;   /* header / footer background */
  --am-dark-2:     #251A0A;   /* slightly lighter dark */
  --am-gold:       #8B7A2E;   /* primary accent */
  --am-gold-light: #B09A3E;   /* hover / highlight */
  --am-gold-pale:  rgba(139,122,46,0.12);
  --am-gold-line:  rgba(139,122,46,0.35);
  --am-cream:      #F5F2EC;   /* page background */
  --am-white:      #FFFFFF;
  --am-paper:      #FDFBF7;   /* card background */
  --am-ink:        #1C1208;   /* body text */
  --am-ink-soft:   #3D3018;
  --am-muted:      #7A6E5A;
  --am-light:      #A89E88;
  --am-line:       rgba(28,18,8,0.12);
  --am-line-2:     rgba(28,18,8,0.22);

  --am-serif:      'Cormorant Garamond', Georgia, serif;
  --am-display:    'Syncopate', sans-serif;
  --am-brand:      'Cinzel', Georgia, serif;
  --am-body:       'DM Sans', Arial, sans-serif;

  --am-nav-h:      72px;
  --am-radius:     3px;
  --am-shadow:     0 2px 16px rgba(28,18,8,0.10);
  --am-shadow-lg:  0 8px 40px rgba(28,18,8,0.16);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--am-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--am-ink);
  background: var(--am-cream);
  min-height: 100vh;
  padding-top: var(--am-nav-h);
}

img { max-width: 100%; display: block; }
a { color: var(--am-gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--am-gold-light); }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--am-body); border: none; background: none; }


/* ── NAV ── */
.am-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--am-nav-h);
  background: var(--am-dark);
  border-bottom: 1px solid var(--am-gold);
}

.am-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

/* Centre column */
.am-nav-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 0 1rem;
}

.am-nav-logo { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; min-width: 0; }
.am-logo-img { height: 52px; width: auto; flex-shrink: 0; }
.am-logo-text {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--am-gold);
  text-transform: uppercase;
}

/* Centre Caddelle logo */
.am-nav-caddelle-logo {
  height: 26px;
  width: auto;
  max-width: 100%;
  display: block;
}

.am-nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-end;
}

/* Selection tray button */
.am-tray-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--am-gold);
  color: var(--am-dark);
  border-radius: var(--am-radius);
  padding: 0.45rem 0.9rem;
  font-size: 0.72rem;
  font-family: var(--am-brand);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  font-weight: 700;
}
.am-tray-btn:hover { background: var(--am-gold-light); transform: translateY(-1px); }
.am-tray-count {
  background: var(--am-dark);
  color: var(--am-gold);
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}
.am-tray-label { display: none; }
@media(min-width:480px){ .am-tray-label { display: inline; } }

/* Staff badge */
.am-nav-staff {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #F0EDE8;
  font-size: 0.75rem;
  font-family: var(--am-brand);
  letter-spacing: 0.08em;
}
.am-nav-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--am-gold-line);
}

.am-btn-primary {
  background: var(--am-gold);
  color: var(--am-dark);
  padding: 0.45rem 1rem;
  border-radius: var(--am-radius);
  font-family: var(--am-brand);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.2s;
}
.am-btn-primary:hover { background: var(--am-gold-light); color: var(--am-dark); }

.am-btn-ghost {
  color: #F0EDE8;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.4rem 0.85rem;
  border-radius: var(--am-radius);
  font-family: var(--am-brand);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}
.am-btn-ghost:hover { border-color: var(--am-gold); color: var(--am-gold-light); }

.am-caddelle-link { display: flex; align-items: center; opacity: 0.6; transition: opacity 0.2s; }
.am-caddelle-link:hover { opacity: 1; }
.am-caddelle-icon { height: 28px; width: auto; filter: brightness(2); }

/* Hamburger */
.am-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.am-hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--am-gold);
  transition: transform 0.2s, opacity 0.2s;
}
.am-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.am-hamburger.open span:nth-child(2) { opacity: 0; }
.am-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.am-mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--am-dark-2);
  border-top: 1px solid var(--am-gold-line);
  padding: 1rem 2rem 1.5rem;
  gap: 0.2rem;
}
.am-mobile-menu.open { display: flex; }
.am-mobile-menu a {
  color: var(--am-gold-light);
  font-family: var(--am-brand);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--am-gold-line);
}
.am-mobile-menu a:last-child { border-bottom: none; }

@media(max-width:760px){
  .am-hamburger { display: flex; }
  .am-nav-staff, .am-btn-ghost, .am-btn-primary, .am-caddelle-link { display: none; }
  .am-nav { height: auto; min-height: var(--am-nav-h); position: fixed; }
  body { padding-top: var(--am-nav-h); }
}


/* ── PAGE HERO BAND ── */
.am-hero {
  background: var(--am-dark);
  padding: 3.5rem 2rem 3rem;
  text-align: center;
  border-bottom: 1px solid var(--am-gold);
}
.am-hero-eyebrow {
  font-family: var(--am-brand);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--am-gold);
  margin-bottom: 0.8rem;
}
.am-hero h1 {
  font-family: var(--am-serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--am-cream);
  line-height: 1.15;
}
.am-hero p {
  font-size: 0.9rem;
  color: var(--am-light);
  margin-top: 0.7rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}


/* ── FILTER BAR ── */
.am-filter-bar {
  background: var(--am-paper);
  border-bottom: 1px solid var(--am-line);
  padding: 0.8rem 2rem;
  position: sticky;
  top: var(--am-nav-h);
  z-index: 80;
}
.am-filter-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.am-filter-label {
  font-family: var(--am-brand);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--am-muted);
  margin-right: 0.25rem;
  white-space: nowrap;
}
.am-filter-btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--am-line-2);
  border-radius: 20px;
  font-size: 0.7rem;
  color: var(--am-muted);
  background: transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.am-filter-btn:hover,
.am-filter-btn.active {
  border-color: var(--am-gold);
  color: var(--am-gold);
  background: var(--am-gold-pale);
}
.am-search-wrap {
  margin-left: auto;
  position: relative;
}
.am-search-wrap input {
  padding: 0.35rem 0.75rem 0.35rem 2rem;
  border: 1px solid var(--am-line-2);
  border-radius: 20px;
  font-size: 0.75rem;
  font-family: var(--am-body);
  background: transparent;
  color: var(--am-ink);
  width: 200px;
  transition: border-color 0.2s, width 0.3s;
}
.am-search-wrap input:focus {
  outline: none;
  border-color: var(--am-gold);
  width: 260px;
}
.am-search-wrap svg {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--am-muted);
  pointer-events: none;
}


/* ── CATALOGUE GRID ── */
.am-catalogue {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

.am-grid {
  columns: 4;
  column-gap: 1.2rem;
}
@media(max-width:1100px){ .am-grid { columns: 3; } }
@media(max-width:700px)  { .am-grid { columns: 2; } }
@media(max-width:420px)  { .am-grid { columns: 1; } }

.am-card {
  break-inside: avoid;
  margin-bottom: 1.2rem;
  position: relative;
  cursor: pointer;
  border-radius: var(--am-radius);
  overflow: hidden;
  background: var(--am-paper);
  box-shadow: var(--am-shadow);
  transition: transform 0.25s, box-shadow 0.25s;
}
.am-card:hover { transform: translateY(-3px); box-shadow: var(--am-shadow-lg); }
.am-card.am-hidden { display: none; }

.am-card-img-wrap {
  position: relative;
  line-height: 0;
}
.am-card-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.3s;
}

/* Selection overlay */
.am-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,18,8,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.am-card:hover .am-card-overlay { opacity: 1; }
.am-card.am-selected .am-card-overlay {
  opacity: 1;
  background: rgba(139,122,46,0.45);
}

.am-card-check {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.am-card.am-selected .am-card-check {
  background: var(--am-gold);
  border-color: var(--am-gold);
}

/* Share button on card */
.am-card-share {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(28,18,8,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  z-index: 2;
}
.am-card:hover .am-card-share { opacity: 1; }
.am-card-share:hover { background: var(--am-gold); }

.am-card-info {
  padding: 0.55rem 0.7rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.am-card-code {
  font-family: var(--am-brand);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--am-muted);
}
.am-card-series {
  font-size: 0.65rem;
  color: var(--am-light);
  font-style: italic;
  font-family: var(--am-serif);
}

/* No results */
.am-no-results {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--am-muted);
  font-family: var(--am-serif);
  font-size: 1.1rem;
  font-style: italic;
  display: none;
}
.am-no-results.visible { display: block; }


/* ── SELECTION TRAY (bottom drawer) ── */
.am-tray {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 800;
  background: var(--am-dark);
  border-top: 1px solid var(--am-gold);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}
.am-tray.open { transform: translateY(0); }

.am-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--am-gold-line);
  flex-shrink: 0;
}
.am-tray-title {
  font-family: var(--am-brand);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--am-gold);
}
.am-tray-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.am-tray-close {
  color: var(--am-light);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  transition: color 0.2s;
}
.am-tray-close:hover { color: var(--am-gold); }

.am-tray-thumbs {
  overflow-x: auto;
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  flex: 1;
  align-items: flex-start;
}
.am-tray-thumb {
  position: relative;
  flex-shrink: 0;
  width: 80px;
}
.am-tray-thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--am-radius);
  border: 1px solid var(--am-gold-line);
}
.am-tray-thumb-code {
  font-family: var(--am-brand);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--am-light);
  text-align: center;
  margin-top: 0.3rem;
  text-transform: uppercase;
}
.am-tray-remove {
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--am-gold);
  color: var(--am-dark);
  font-size: 0.65rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.am-tray-remove:hover { background: #fff; }

/* Generate PDF button */
.am-gen-pdf-btn {
  background: var(--am-gold);
  color: var(--am-dark);
  font-family: var(--am-brand);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.5rem 1.2rem;
  border-radius: var(--am-radius);
  transition: background 0.2s, transform 0.15s;
}
.am-gen-pdf-btn:hover { background: var(--am-gold-light); transform: translateY(-1px); }
.am-gen-pdf-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.am-clear-btn {
  color: var(--am-muted);
  font-size: 0.68rem;
  transition: color 0.2s;
}
.am-clear-btn:hover { color: var(--am-gold); }


/* ── PDF MODAL (staff details + generate) ── */
.am-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(28,18,8,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.am-modal-backdrop.open { display: flex; }

.am-modal {
  background: var(--am-paper);
  border-radius: 4px;
  box-shadow: var(--am-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border-top: 3px solid var(--am-gold);
}
.am-modal-head {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--am-line);
}
.am-modal-head h2 {
  font-family: var(--am-serif);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--am-ink);
}
.am-modal-head p {
  font-size: 0.78rem;
  color: var(--am-muted);
  margin-top: 0.25rem;
}
.am-modal-body { padding: 1.25rem 1.5rem; }
.am-modal-body .am-field {
  margin-bottom: 1rem;
}
.am-modal-body label {
  display: block;
  font-family: var(--am-brand);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--am-muted);
  margin-bottom: 0.35rem;
}
.am-modal-body input,
.am-modal-body textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-radius);
  font-family: var(--am-body);
  font-size: 0.85rem;
  color: var(--am-ink);
  background: #fff;
  transition: border-color 0.2s;
}
.am-modal-body input:focus,
.am-modal-body textarea:focus {
  outline: none;
  border-color: var(--am-gold);
}
.am-modal-body textarea { resize: vertical; min-height: 70px; }

/* Staff preview in modal (auto-filled) */
.am-staff-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--am-gold-pale);
  border: 1px solid var(--am-gold-line);
  border-radius: var(--am-radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.am-staff-preview img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--am-gold-line);
  flex-shrink: 0;
}
.am-staff-preview-info p {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--am-ink);
}
.am-staff-preview-info span {
  font-size: 0.72rem;
  color: var(--am-muted);
}

.am-modal-foot {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.am-modal-cancel {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--am-muted);
  transition: color 0.2s;
}
.am-modal-cancel:hover { color: var(--am-ink); }


/* ── INDIVIDUAL ARTWORK PAGE ── */
.am-artwork-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: start;
}
@media(max-width:860px){
  .am-artwork-wrap { grid-template-columns: 1fr; }
}

.am-artwork-image-col img {
  width: 100%;
  border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-lg);
}

.am-artwork-meta { position: sticky; top: calc(var(--am-nav-h) + 1.5rem); }

.am-artwork-code {
  font-family: var(--am-brand);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--am-gold);
  margin-bottom: 0.5rem;
}
.am-artwork-title {
  font-family: var(--am-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--am-ink);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.am-artwork-series {
  font-size: 0.82rem;
  color: var(--am-muted);
  font-style: italic;
  font-family: var(--am-serif);
  margin-bottom: 1.5rem;
}

/* Sizes table on artwork page */
.am-sizes-block { margin-bottom: 1.75rem; }
.am-sizes-block h3 {
  font-family: var(--am-brand);
  font-size: 0.57rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--am-muted);
  margin-bottom: 0.75rem;
}
.am-sizes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.am-size-pill {
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-radius);
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
  color: var(--am-ink-soft);
  text-align: center;
  font-family: var(--am-body);
}
.am-sizes-orient {
  font-family: var(--am-brand);
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--am-gold);
  margin: 0.75rem 0 0.35rem;
}

/* Share strip */
.am-share-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--am-line);
}
.am-share-label {
  font-family: var(--am-brand);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--am-muted);
  margin-right: 0.25rem;
}
.am-share-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-radius);
  font-size: 0.7rem;
  color: var(--am-ink-soft);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.am-share-btn:hover { border-color: var(--am-gold); color: var(--am-gold); background: var(--am-gold-pale); }
.am-share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Add to selection btn on artwork page */
.am-artwork-select-btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--am-dark);
  color: var(--am-gold);
  border: 1px solid var(--am-gold);
  border-radius: var(--am-radius);
  font-family: var(--am-brand);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
  margin-bottom: 0.6rem;
}
.am-artwork-select-btn:hover,
.am-artwork-select-btn.am-selected {
  background: var(--am-gold);
  color: var(--am-dark);
}


/* ── LOGIN PAGE ── */
.am-login-wrap {
  min-height: calc(100vh - var(--am-nav-h) - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}
.am-login-box {
  background: var(--am-paper);
  border-radius: 4px;
  box-shadow: var(--am-shadow-lg);
  width: 100%;
  max-width: 400px;
  border-top: 3px solid var(--am-gold);
  padding: 2.5rem 2rem;
}
.am-login-logo {
  text-align: center;
  margin-bottom: 1.75rem;
}
.am-login-logo img { height: 70px; margin: 0 auto 0.75rem; }
.am-login-logo h1 {
  font-family: var(--am-serif);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--am-ink);
}
.am-login-logo p { font-size: 0.78rem; color: var(--am-muted); }

.am-login-box .am-field { margin-bottom: 1rem; }
.am-login-box label {
  display: block;
  font-family: var(--am-brand);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--am-muted);
  margin-bottom: 0.35rem;
}
.am-login-box input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-radius);
  font-family: var(--am-body);
  font-size: 0.88rem;
  color: var(--am-ink);
  background: #fff;
  transition: border-color 0.2s;
}
.am-login-box input:focus { outline: none; border-color: var(--am-gold); }

.am-login-submit {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.7rem 1rem;
  background: var(--am-gold);
  color: var(--am-dark);
  font-family: var(--am-brand);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--am-radius);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.am-login-submit:hover { background: var(--am-gold-light); }

.am-alert {
  padding: 0.65rem 0.9rem;
  border-radius: var(--am-radius);
  font-size: 0.78rem;
  margin-bottom: 1rem;
}
.am-alert-error { background: rgba(180,40,40,0.08); border: 1px solid rgba(180,40,40,0.25); color: #8b2020; }
.am-alert-success { background: rgba(40,140,80,0.08); border: 1px solid rgba(40,140,80,0.25); color: #1a6b3a; }


/* ── ADMIN PANEL ── */
.am-admin-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}
.am-admin-title {
  font-family: var(--am-serif);
  font-weight: 300;
  font-size: 1.9rem;
  color: var(--am-ink);
  margin-bottom: 0.25rem;
}
.am-admin-subtitle {
  font-size: 0.8rem;
  color: var(--am-muted);
  margin-bottom: 2rem;
}
.am-admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--am-line-2);
  margin-bottom: 2rem;
}
.am-admin-tab {
  padding: 0.6rem 1.25rem;
  font-family: var(--am-brand);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--am-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.am-admin-tab.active { color: var(--am-gold); border-bottom-color: var(--am-gold); }
.am-admin-tab:hover { color: var(--am-gold-light); }

/* Upload card */
.am-upload-card {
  background: var(--am-paper);
  border: 1px solid var(--am-line);
  border-radius: 4px;
  padding: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: var(--am-shadow);
}
.am-upload-card h3 {
  font-family: var(--am-brand);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--am-gold);
  margin-bottom: 1.25rem;
}
.am-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media(max-width:600px){ .am-upload-grid { grid-template-columns: 1fr; } }

.am-upload-card label {
  display: block;
  font-family: var(--am-brand);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--am-muted);
  margin-bottom: 0.35rem;
}
.am-upload-card input[type=text],
.am-upload-card select,
.am-upload-card textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--am-line-2);
  border-radius: var(--am-radius);
  font-family: var(--am-body);
  font-size: 0.84rem;
  color: var(--am-ink);
  background: #fff;
  transition: border-color 0.2s;
}
.am-upload-card input:focus,
.am-upload-card select:focus,
.am-upload-card textarea:focus { outline: none; border-color: var(--am-gold); }

/* Dropzone */
.am-dropzone {
  grid-column: 1 / -1;
  border: 2px dashed var(--am-line-2);
  border-radius: var(--am-radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.am-dropzone:hover,
.am-dropzone.drag-over { border-color: var(--am-gold); background: var(--am-gold-pale); }
.am-dropzone p { font-size: 0.82rem; color: var(--am-muted); margin-bottom: 0.25rem; }
.am-dropzone small { font-size: 0.68rem; color: var(--am-light); }
.am-dropzone-preview { max-height: 160px; object-fit: contain; margin: 0.75rem auto 0; }

/* Admin artwork table */
.am-table-wrap { overflow-x: auto; }
.am-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.am-table th {
  font-family: var(--am-brand);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--am-muted);
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--am-line-2);
  white-space: nowrap;
}
.am-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--am-line);
  color: var(--am-ink-soft);
  vertical-align: middle;
}
.am-table tr:hover td { background: rgba(139,122,46,0.04); }
.am-table img { width: 48px; height: 48px; object-fit: cover; border-radius: 2px; }

.am-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-size: 0.62rem;
  font-family: var(--am-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.am-badge-active  { background: rgba(40,140,80,0.1);  color: #1a6b3a; }
.am-badge-inactive{ background: rgba(180,40,40,0.08); color: #8b2020; }

.am-action-link {
  font-size: 0.72rem;
  color: var(--am-gold);
  margin-right: 0.75rem;
  transition: color 0.2s;
}
.am-action-link:hover { color: var(--am-gold-light); }
.am-action-link.danger { color: var(--am-muted); }
.am-action-link.danger:hover { color: #8b2020; }

/* Admin submit button */
.am-submit-btn {
  margin-top: 1.25rem;
  padding: 0.6rem 1.75rem;
  background: var(--am-gold);
  color: var(--am-dark);
  font-family: var(--am-brand);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--am-radius);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.am-submit-btn:hover { background: var(--am-gold-light); }


/* ── FOOTER ── */
.am-footer {
  background: var(--am-dark);
  border-top: 1px solid var(--am-gold);
  padding: 3rem 2rem 0;
}
.am-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--am-gold-line);
}
@media(max-width:700px){
  .am-footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}
.am-footer-logo { height: 50px; margin-bottom: 0.75rem; }
.am-footer-logo-text {
  font-family: var(--am-brand);
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  color: var(--am-gold);
  display: block;
  margin-bottom: 0.75rem;
}
.am-footer-tagline { font-size: 0.8rem; color: var(--am-light); line-height: 1.6; }
.am-footer-col-title {
  font-family: var(--am-brand);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--am-gold);
  margin-bottom: 0.75rem;
}
.am-footer-col ul { display: flex; flex-direction: column; gap: 0.4rem; }
.am-footer-col a { font-size: 0.8rem; color: var(--am-light); transition: color 0.2s; }
.am-footer-col a:hover { color: var(--am-gold-light); }
.am-footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 0;
  font-size: 0.72rem;
  color: var(--am-light);
}


/* ── UTILITIES ── */
.am-container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.am-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


/* Contact items (phone + email) */
.am-nav-contact-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--am-light);
  transition: color 0.2s;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.am-nav-contact-item:hover { color: var(--am-gold-light); }
.am-nav-contact-divider {
  color: var(--am-gold-line);
  font-size: 0.9rem;
}
@media(max-width:1000px){
  .am-nav-contact { display: none; }
  .am-nav-contact-item { display: none; }
  .am-nav-contact-divider { display: none; }
}


/* ── MINIMAL HERO (no text) ── */
.am-hero-minimal {
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--am-gold);
}


/* ── BODY LAYOUT: sidebar + main ── */
.am-body-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - var(--am-nav-h));
  align-items: start;
}
@media(max-width:860px){
  .am-body-wrap { grid-template-columns: 1fr; }
}


/* ── SIDEBAR ── */
.am-sidebar {
  position: sticky;
  top: var(--am-nav-h);
  height: calc(100vh - var(--am-nav-h));
  overflow-y: auto;
  background: var(--am-paper);
  border-right: 1px solid var(--am-line);
  padding: 0;
  flex-shrink: 0;
}
.am-sidebar-inner {
  padding: 1.5rem 1rem 2rem;
}
.am-sidebar-heading {
  font-family: var(--am-brand);
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--am-gold);
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--am-line-2);
}
.am-series-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 1.25rem;
}
.am-series-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  font-size: 0.75rem;
  color: var(--am-dark);
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
  font-family: var(--am-body);
  background: transparent;
  cursor: pointer;
}
.am-series-btn:hover { background: var(--am-gold-pale); color: var(--am-gold); }
.am-series-btn.active {
  background: var(--am-gold-pale);
  color: var(--am-gold);
  font-weight: 500;
  border-left: 2px solid var(--am-gold);
  padding-left: calc(0.6rem - 2px);
}
.am-series-empty { opacity: 0.4; }
.am-series-count {
  font-family: var(--am-brand);
  font-size: 0.5rem;
  background: var(--am-gold-pale);
  color: var(--am-gold);
  border: 1px solid var(--am-gold-line);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Sidebar search */
.am-sidebar-search {
  position: relative;
  margin-top: 0.5rem;
}
.am-sidebar-search svg {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--am-muted);
  pointer-events: none;
}
.am-sidebar-search input {
  width: 100%;
  padding: 0.4rem 0.6rem 0.4rem 1.8rem;
  background: #fff;
  border: 1px solid var(--am-line-2);
  border-radius: 2px;
  font-size: 0.72rem;
  font-family: 'DM Sans', Arial, sans-serif;
  color: var(--am-ink);
  transition: border-color 0.2s;
}
.am-sidebar-search input::placeholder { color: var(--am-light); font-style: normal; }
.am-sidebar-search input:focus { outline: none; border-color: var(--am-gold); }

/* Sidebar PDF panel */
.am-sidebar-sel-label {
  font-size: 0.72rem;
  color: var(--am-muted);
  margin-bottom: 0.6rem;
}
.am-sidebar-sel-label span { color: var(--am-gold); font-weight: 600; }
.am-gen-pdf-full {
  width: 100%;
  text-align: center;
  padding: 0.6rem 1rem;
}

/* Hide sidebar on mobile */
@media(max-width:860px){
  .am-sidebar { display: none; }
}

/* Mobile series filter strip */
.am-mobile-series {
  display: none;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--am-line);
  background: var(--am-paper);
  position: sticky;
  top: var(--am-nav-h);
  z-index: 79;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.am-mobile-series::-webkit-scrollbar { display: none; }
.am-mobile-series .am-filter-btn { flex-shrink: 0; white-space: nowrap; }
@media(max-width:860px){ .am-mobile-series { display: flex; } }

/* Adjust catalogue padding now it's inside body-wrap */
.am-catalogue {
  padding: 1.5rem 1.5rem 5rem;
}

/* Empty state */
.am-empty-state {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--am-muted);
  font-family: var(--am-serif);
  font-size: 1.1rem;
  font-style: italic;
}

/* Footer grid — 4 columns now */
.am-footer-inner {
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
@media(max-width:860px){
  .am-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media(max-width:500px){
  .am-footer-inner { grid-template-columns: 1fr; }
}


/* ── UPLOAD TABS ── */
.am-upload-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--am-line);
}
.am-upload-tab {
  padding: 0.55rem 1.4rem;
  font-family: var(--am-brand);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--am-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.am-upload-tab.active  { color: var(--am-gold); border-bottom-color: var(--am-gold); }
.am-upload-tab:hover   { color: var(--am-gold-light); }
.am-upload-card        { border-top-left-radius: 0; }


/* ── ORIENTATION BADGE (single upload) ── */
.am-orient-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border: 1px dashed var(--am-line-2);
  border-radius: var(--am-radius);
  font-size: 0.72rem;
  color: var(--am-muted);
  transition: all 0.3s;
}
.am-orient-detected { border-style: solid; }
.am-orient-icon { font-size: 1rem; }
.am-orient-detected.am-orient-portrait  { border-color: #4a90d9; color: #2a6aac; background: rgba(74,144,217,0.06); }
.am-orient-detected.am-orient-landscape { border-color: var(--am-gold); color: var(--am-gold); background: var(--am-gold-pale); }
.am-orient-detected.am-orient-square    { border-color: #7a5ea7; color: #5a3e87; background: rgba(122,94,167,0.07); }
.am-orient-detected.am-orient-panorama  { border-color: #2a9d8f; color: #1a7d6f; background: rgba(42,157,143,0.07); }


/* ── ORIENTATION PILLS (table) ── */
.am-orient-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
  font-size: 0.65rem;
  font-family: var(--am-body);
}
.am-orient-portrait  { background: rgba(74,144,217,0.1);  color: #2a6aac; }
.am-orient-landscape { background: var(--am-gold-pale);   color: var(--am-gold); }
.am-orient-square    { background: rgba(122,94,167,0.1);  color: #5a3e87; }
.am-orient-panorama  { background: rgba(42,157,143,0.1);  color: #1a7d6f; }


/* ── BULK PREVIEW GRID ── */
#am-bulk-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.6rem;
  padding: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
}
.am-bulk-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.am-bulk-thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--am-line);
}
.am-bulk-code {
  font-family: var(--am-brand);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  color: var(--am-muted);
  text-align: center;
  word-break: break-all;
}


/* ── STAFF 3-COLUMN LAYOUT ── */
.am-body-staff {
  grid-template-columns: 220px 1fr 260px;
}
@media(max-width:1100px){
  .am-body-staff { grid-template-columns: 200px 1fr 220px; }
}
@media(max-width:860px){
  .am-body-staff { grid-template-columns: 1fr; }
}


/* ── STAFF SELECTION PANEL (right column) ── */
.am-staff-panel {
  position: sticky;
  top: var(--am-nav-h);
  height: calc(100vh - var(--am-nav-h));
  overflow-y: auto;
  background: var(--am-dark);
  border-left: 1px solid var(--am-gold-line);
  display: flex;
  flex-direction: column;
}
.am-staff-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem 1rem;
}

/* Staff identity block */
.am-staff-panel-who {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--am-gold-line);
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.am-staff-panel-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--am-gold-line);
  flex-shrink: 0;
}
.am-staff-panel-name {
  font-family: var(--am-brand);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: #F0EDE8;
  text-transform: uppercase;
}
.am-staff-panel-role {
  font-size: 0.65rem;
  color: var(--am-cream);
}

/* Panel header */
.am-staff-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.am-staff-panel-title {
  font-family: var(--am-brand);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F0EDE8;
}
.am-staff-sel-badge {
  background: var(--am-gold);
  color: var(--am-dark);
  font-family: var(--am-brand);
  font-size: 0.55rem;
  font-weight: 700;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Thumbnails list */
.am-staff-thumbs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.25rem;
}
.am-staff-thumbs::-webkit-scrollbar { width: 3px; }
.am-staff-thumbs::-webkit-scrollbar-track { background: transparent; }
.am-staff-thumbs::-webkit-scrollbar-thumb { background: var(--am-gold-line); border-radius: 2px; }

.am-staff-empty {
  font-size: 0.72rem;
  color: var(--am-cream);
  font-style: italic;
  text-align: center;
  padding: 1.5rem 0.5rem;
  line-height: 1.6;
}

.am-staff-thumb {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--am-gold-line);
  border-radius: 2px;
  padding: 0.4rem 0.5rem;
  transition: background 0.15s;
}
.am-staff-thumb:hover { background: rgba(255,255,255,0.07); }
.am-staff-thumb img {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.am-staff-thumb-code {
  font-family: var(--am-brand);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--am-gold);
  text-transform: uppercase;
  word-break: break-all;
}
.am-staff-thumb-remove {
  color: var(--am-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  transition: color 0.15s;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
}
.am-staff-thumb-remove:hover { color: var(--am-gold); }

/* Panel footer */
.am-staff-panel-foot {
  padding-top: 1rem;
  border-top: 1px solid var(--am-gold-line);
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}
.am-staff-pdf-btn {
  width: 100%;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.08);
  color: #F0EDE8;
  font-family: var(--am-brand);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--am-radius);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.am-staff-pdf-btn:hover:not(:disabled) { background: var(--am-gold); color: var(--am-dark); border-color: var(--am-gold); }
.am-staff-pdf-btn:disabled { opacity: 1; cursor: not-allowed; background: rgba(255,255,255,0.05); color: rgba(240,237,232,0.45); border-color: rgba(255,255,255,0.08); }
.am-staff-clear {
  width: 100%;
  font-size: 0.68rem;
  color: var(--am-cream);
  text-align: center;
  padding: 0.2rem;
  transition: color 0.2s;
  cursor: pointer;
  background: none;
}
.am-staff-clear:hover { color: var(--am-gold); }

/* Hide bottom tray for staff */
.am-body-staff ~ .am-tray { display: none !important; }


/* ── SHARE LIGHTBOX ── */
.am-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(28,18,8,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.am-lightbox-backdrop.open { display: flex; }

.am-lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 1200;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
}
.am-lightbox-close:hover { background: var(--am-gold); color: var(--am-dark); }

.am-lightbox-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  align-items: center;
}
@media(max-width:700px){
  .am-lightbox-backdrop { align-items: flex-start !important; justify-content: center; padding: 3.5rem .75rem 2rem; overflow-y: auto; }
  .am-lightbox-inner { grid-template-columns: 1fr; max-height: none; overflow-y: visible; width: 100%; }
  .am-lightbox-img-wrap { max-height: none !important; overflow: visible; }
  .am-lightbox-img-wrap img { max-width: 100% !important; max-height: none !important; width: 100%; height: auto !important; object-fit: contain; }
}

.am-lightbox-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 85vh;
  overflow: hidden;
}
.am-lightbox-img-wrap img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 8px 60px rgba(0,0,0,0.6);
}

.am-lightbox-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.am-lightbox-code {
  font-family: var(--am-brand);
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--am-gold);
}
.am-lightbox-series {
  font-family: var(--am-serif);
  font-style: italic;
  font-size: 1rem;
  color: #F0EDE8;
  margin-bottom: 0.5rem;
}
.am-lightbox-share-label {
  font-family: var(--am-brand);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F0EDE8;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.am-lightbox-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.am-share-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 74px;
  padding: 0.65rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: #F0EDE8;
  font-size: 0.62rem;
  font-family: var(--am-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.am-share-icon:hover { border-color: var(--am-gold); color: var(--am-gold); background: var(--am-gold-pale); }

/* Brand colours on hover */
.am-share-wa:hover  { background: rgba(37,211,102,0.15); border-color: #25d166; color: #25d166; }
.am-share-fb:hover  { background: rgba(24,119,242,0.15); border-color: #1877f2; color: #1877f2; }
.am-share-pin:hover { background: rgba(230,0,35,0.15);   border-color: #e60023; color: #e60023; }
.am-share-x:hover   { background: rgba(255,255,255,0.1); border-color: #fff;    color: #fff; }

/* Add to selection from lightbox */
.am-lightbox-select-btn {
  width: 100%;
  padding: 0.7rem 1rem;
  background: transparent;
  color: #F0EDE8;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--am-radius);
  font-family: var(--am-brand);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.am-lightbox-select-btn:hover,
.am-lightbox-select-btn.am-selected {
  background: var(--am-gold);
  color: var(--am-dark);
  border-color: var(--am-gold);
}


/* ── CARD INFO BAR SHARE BUTTON ── */
.am-card-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.am-card-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--am-gold-pale);
  border: 1px solid var(--am-gold-line);
  color: var(--am-gold);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.am-card-share-btn:hover {
  background: var(--am-gold);
  color: var(--am-dark);
}
/* Hide old top-right share icon if any remain */
.am-card-share { display: none !important; }
.am-share-ig:hover  { background: rgba(228,64,95,0.15); border-color: #e4405f; color: #e4405f; }


/* ── CARD: click opens lightbox — no hover overlay needed ── */
.am-card-overlay { display: none !important; }
.am-card-share   { display: none !important; }

/* Subtle hover lift only */
.am-card:hover { transform: translateY(-3px); box-shadow: var(--am-shadow-lg); }

/* Selected state shown via info bar highlight */
.am-card.am-selected .am-card-info {
  background: var(--am-gold-pale);
  border-top: 1px solid var(--am-gold-line);
}
.am-card.am-selected .am-card-code { color: var(--am-gold); }


/* ============================================================
   AMATULI — MOBILE RESPONSIVE PASS
   Breakpoints: 860px tablet, 600px mobile, 400px small phone
   ============================================================ */

/* ── NAV: mobile ── */
@media(max-width:860px) {
  :root { --am-nav-h: 60px; }

  .am-nav { height: auto; min-height: var(--am-nav-h); }
  .am-nav-inner {
    grid-template-columns: 1fr auto;  /* logo left, hamburger right */
    padding: 0 1rem;
    min-height: var(--am-nav-h);
  }
  .am-nav-contact { display: none; }  /* hide centre logo on mobile */
  .am-nav-right { gap: 0.5rem; }
  .am-nav-contact-item,
  .am-nav-contact-divider { display: none; }
  .am-hamburger { display: flex; }
  .am-btn-primary,
  .am-btn-ghost,
  .am-nav-staff,
  .am-caddelle-link { display: none; }
  .am-logo-text { font-size: 0.75rem; letter-spacing: 0.1em; }
  .am-logo-img  { height: 40px; }
  .am-tray-btn  { padding: 0.35rem 0.7rem; font-size: 0.62rem; }
}

/* ── BODY LAYOUT: mobile ── */
@media(max-width:860px) {
  .am-body-wrap,
  .am-body-staff {
    grid-template-columns: 1fr !important;
  }
  .am-sidebar { display: none; }   /* hidden — mobile series strip replaces it */
  .am-staff-panel { display: none; } /* hidden on mobile — tray used instead */
}

/* ── CATALOGUE GRID: mobile ── */
@media(max-width:600px) {
  .am-catalogue { padding: 0.75rem 0.75rem 5rem; }
  .am-grid { columns: 2; column-gap: 0.6rem; }
  .am-card-info { padding: 0.4rem 0.5rem; }
  .am-card-code { font-size: 0.52rem; }
  .am-card-series { font-size: 0.55rem; }
}
@media(max-width:380px) {
  .am-grid { columns: 1; }
}

/* ── MOBILE SERIES STRIP ── */
@media(max-width:860px) {
  .am-mobile-series {
    display: flex;
    padding: 0.6rem 0.75rem;
    gap: 0.35rem;
    top: calc(var(--am-nav-h));
  }
  .am-filter-btn {
    font-size: 0.65rem;
    padding: 0.28rem 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── LIGHTBOX: mobile ── */
@media(max-width:700px) {
  .am-lightbox-backdrop { padding: 0; align-items: flex-end; }

  .am-lightbox-inner {
    grid-template-columns: 1fr;
    max-height: 95vh;
    overflow-y: auto;
    background: var(--am-dark);
    border-radius: 12px 12px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 1rem);
  }

  .am-lightbox-img-wrap {
    max-height: 50vh;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }
  .am-lightbox-img-wrap img {
    max-height: 50vh;
    width: 100%;
    object-fit: contain;
  }

  .am-lightbox-info {
    padding: 1rem 1.25rem 1.5rem;
  }

  .am-lightbox-share-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .am-share-icon { width: 100%; font-size: 0.6rem; }

  .am-lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 34px; height: 34px;
    font-size: 1.1rem;
  }
}

/* ── TRAY: mobile ── */
@media(max-width:600px) {
  .am-tray-header { padding: 0.7rem 1rem; }
  .am-tray-title  { font-size: 0.58rem; }
  .am-tray-thumb  { width: 64px; }
  .am-tray-thumb img { width: 64px; height: 64px; }
  .am-gen-pdf-btn { font-size: 0.58rem; padding: 0.45rem 0.9rem; }
}

/* ── STAFF PANEL: show as bottom sheet on mobile when staff ── */
@media(max-width:860px) {
  /* Staff on mobile get the bottom tray instead */
  .am-body-staff ~ .am-tray { display: flex !important; }
}

/* ── FOOTER: mobile ── */
@media(max-width:600px) {
  .am-footer-inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    padding-bottom: 2rem;
  }
  .am-footer { padding: 2rem 1.25rem 0; }
  .am-footer-bottom { font-size: 0.65rem; }
}

/* ── LOGIN: mobile ── */
@media(max-width:480px) {
  .am-login-box { padding: 2rem 1.25rem; }
}

/* ── ADMIN: mobile ── */
@media(max-width:700px) {
  .am-admin-wrap { padding: 1.5rem 1rem 3rem; }
  .am-table td, .am-table th { padding: 0.5rem 0.5rem; font-size: 0.72rem; }
  .am-table img { width: 36px; height: 36px; }
  .am-upload-card { padding: 1.25rem; }
}

/* ── PDF MODAL: mobile ── */
@media(max-width:500px) {
  .am-modal { margin: 0.5rem; }
  .am-modal-head { padding: 1.25rem 1.25rem 0.75rem; }
  .am-modal-body { padding: 1rem 1.25rem; }
  .am-modal-foot { padding: 0.75rem 1.25rem 1.25rem; }
}

/* ── HERO: mobile ── */
@media(max-width:600px) {
  .am-hero { padding: 2.5rem 1rem 2rem; }
  .am-hero h1 { font-size: 1.8rem; }
}

/* ── ARTWORK PAGE: mobile ── */
@media(max-width:860px) {
  .am-artwork-wrap {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem 3rem;
    gap: 1.5rem;
  }
  .am-artwork-meta { position: static; }
  .am-share-strip { flex-wrap: wrap; }
}

/* Staff mobile tray — hidden on desktop, shown on mobile */
.am-staff-mobile-tray { display: none; }
@media(max-width:860px) {
  .am-staff-mobile-tray { display: flex !important; }
}

/* ── MOBILE RESPONSIVE FIXES ── */
@media(max-width:860px) {
  .am-sidebar { display: none; }
  .am-body-wrap { grid-template-columns: 1fr !important; }
  .am-grid { columns: 2 !important; gap: .5rem !important; padding: .5rem !important; }
  .am-card-img-wrap { overflow: hidden; }
  .am-card-img-wrap img { width: 100%; height: auto; display: block; }
  .am-filter-inner { flex-wrap: nowrap; overflow-x: auto; }
  .am-filter-btn { flex-shrink: 0; }
}

@media(max-width:480px) {
  .am-grid { columns: 2 !important; }
  .am-card-img-wrap { overflow: hidden; }
  .am-card-img-wrap img { width: 100%; height: auto; display: block; }
}