/* RNM Autoparts — BMW accessories add-on styles.
   Loaded AFTER style.css. Everything new is namespaced .acc-* so this file can be
   dropped into the live site later without touching a single existing rule. */

/* preview-only ribbon so nobody mistakes this for the live shop */
.preview-bar {
  background: repeating-linear-gradient(135deg, #2a1c00, #2a1c00 12px, #241800 12px, #241800 24px);
  border-bottom: 1px solid #4a3a10;
  color: #f7d79a;
  font-size: 13px;
  letter-spacing: .04em;
  text-align: center;
  padding: 9px 16px;
}
.preview-bar b { color: var(--orange); }

.acc-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.acc {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: .2s;
}
.acc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #3a404a; }

.acc-photo { position: relative; aspect-ratio: 4 / 3; background: #0b0c0e; cursor: zoom-in; }
.acc-photo img { width: 100%; height: 100%; object-fit: cover; }

.acc-flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; color: #fff;
}
.acc-flag.in-stock { background: #1e7a45; }
.acc-flag.low-stock { background: var(--orange); color: #2a1900; }
.acc-flag.sold-out { background: #4a4f59; }

.acc-tagline {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: var(--red); color: #fff;
}

.acc-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

.acc-kicker {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange);
}
.acc-body h3 { margin: 0; font-size: 19px; line-height: 1.25; }

.acc-fits { margin: 0; font-size: 14px; color: var(--muted); }
.acc-fits b { color: var(--text); font-weight: 600; }

.acc-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.acc-price .now { font-size: 25px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.acc-price .was { font-size: 15px; color: var(--muted); text-decoration: line-through; }
.acc-price .save {
  font-size: 12px; font-weight: 700; color: #7ee2a8;
  background: rgba(30, 122, 69, .18); border: 1px solid rgba(126, 226, 168, .28);
  padding: 3px 9px; border-radius: 999px;
}

.acc-note { margin: 0; font-size: 13.5px; color: var(--muted); font-style: italic; }

.acc-foot { margin-top: auto; display: flex; gap: 10px; padding-top: 4px; }
.acc-foot .btn { flex: 1; justify-content: center; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* sort control next to the existing search box */
.acc-sort {
  background: var(--ink-3); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; cursor: pointer;
}

@media (max-width: 620px) {
  .acc-grid { grid-template-columns: 1fr; }
}