/* Site-level styles layered on the "Industry" design system (styles.css). */
body { margin: 0; text-wrap: pretty; background: #ffffff; }
/* the home hero bleeds past the content column; clip (unlike hidden) keeps the sticky header working */
html, body { overflow-x: clip; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); text-decoration: underline; }

/* Links that are buttons keep the design system's button colours */
a.btn, a.btn:hover { text-decoration: none; }
a.btn-primary, a.btn-primary:hover { color: var(--color-bg); }
a.btn-secondary, a.btn-secondary:hover { color: var(--color-text); }
a.btn-ghost, a.btn-ghost:hover { color: var(--color-accent); }

.duotone img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); }

/* Placeholder shown until real trailer photos are dropped into /public/images */
.photo-empty {
  width: 100%; height: 100%; min-height: 80px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  background: repeating-linear-gradient(45deg, var(--color-neutral-100), var(--color-neutral-100) 10px, var(--color-neutral-200) 10px, var(--color-neutral-200) 11px);
}

@keyframes cartShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.cart-shake { animation: cartShake 0.6s ease-in-out; border-color: var(--color-accent) !important; }
.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
  display: none; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: var(--color-accent); color: var(--color-bg);
}
.cart-count.on { display: inline-flex; }

.link-btn {
  background: none; border: none; cursor: pointer; padding: 0; font: inherit; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); text-decoration: underline;
}
.link-btn:hover { color: var(--color-text); }

.msg { font-size: 14px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--color-divider); }
.msg.err { border-color: #b3261e; color: #7a1a15; background: #fdf1f0; }
.msg.ok { border-color: var(--color-accent); color: var(--color-accent-800); background: var(--color-accent-100); }
.msg.warn { border-color: #a26a00; color: #6b4600; background: #fff7e6; }

.eyebrow { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); }
.muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

.spinner {
  width: 18px; height: 18px; border: 2px solid var(--color-divider); border-top-color: var(--color-accent);
  border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.avail-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.avail-yes { color: var(--color-accent-700); }
.avail-no { color: #b3261e; }

@media (max-width: 820px) {
  .stack-sm { grid-template-columns: minmax(0, 1fr) !important; }
  .stack-sm > aside, .stack-sm > div[style*="sticky"] { position: relative !important; top: auto !important; max-height: none !important; }
}

/* the header mount point must be the sticky element (its parent is the whole page) */
#site-header { position: sticky; top: 0; z-index: 20; }