/* ==========================================================================
   Aurora Nails Lab - New Arrivals page
   Loaded only on new-arrivals.html. Editorial hero, flagship drop, staggered
   lineup, best-seller rail, restock strip. Values 1:1 from the design source.
   ========================================================================== */

@keyframes na-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Editorial hero ---------- */
.na-hero { position: relative; background: #fbe4e4; overflow: hidden; padding: 96px 24px 90px; text-align: center; }
.na-hero__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.na-hero__blob--1 { top: -120px; right: -90px; width: 340px; height: 340px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.na-hero__blob--2 { bottom: -140px; left: -100px; width: 380px; height: 380px; background: radial-gradient(circle at 40% 40%, rgba(178,143,82,.16), rgba(178,143,82,0)); }
.na-hero__inner { position: relative; max-width: 760px; margin: 0 auto; animation: na-rise .6s ease both; }
.na-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #a06b6b; margin-bottom: 22px; }
.na-hero__rule { width: 26px; height: 1px; background: #c99; display: inline-block; }
.na-hero__title { font-size: 64px; font-weight: 600; letter-spacing: -.02em; line-height: 1.02; margin: 0 0 20px; color: #2c2623; }
.na-hero__desc { font-size: 16px; line-height: 1.75; color: #7c5f5b; max-width: 520px; margin: 0 auto 34px; }
.na-hero__cta-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.na-btn-dark { display: inline-block; background: #2c2623; color: #fff; padding: 15px 44px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; transition: background .25s ease; }
.na-btn-dark:hover { background: #463c37; color: #fff; }
.na-hero__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8a5c5c; }
.na-dot { width: 8px; height: 8px; border-radius: 50%; background: #c98a8a; display: inline-block; box-shadow: 0 0 0 4px rgba(201,138,138,.25); }

/* ---------- Shared bits ---------- */
.na-eyebrow { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #b28f52; margin-bottom: 10px; }
.na-h2 { font-size: 30px; font-weight: 600; margin: 0; letter-spacing: -.01em; color: #2c2623; }
.na-link { font-size: 12.5px; letter-spacing: .06em; color: #8a5c5c; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.na-link:hover { color: #b28f52; }
.na-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }

/* ---------- This week's drop (flagship) ---------- */
.na-drop-sec { max-width: 1240px; margin: 0 auto; padding: 80px 24px 20px; }
.na-drop-date { display: flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .02em; color: #8a817b; }
.na-drop { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; color: inherit; border: 1px solid #f0e7e1; }
.na-drop:hover { color: inherit; }
.na-drop__media { position: relative; min-height: 560px; background: #f7f0ec; overflow: hidden; }
.na-drop__badges { position: absolute; top: 20px; left: 20px; display: flex; gap: 8px; }
.na-badge-dark { background: #2c2623; color: #fff; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 13px; }
.na-badge-light { background: rgba(255,255,255,.92); color: #8a5c5c; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 13px; }
.na-drop__content { background: #fff; padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.na-drop__cat { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #b7ada6; margin-bottom: 14px; }
.na-drop__name { font-size: 44px; font-weight: 600; letter-spacing: -.01em; line-height: 1.05; margin: 0 0 18px; color: #2c2623; }
.na-drop__blurb { font-size: 15px; line-height: 1.75; color: #7a716c; margin: 0 0 26px; max-width: 400px; }
.na-drop__price-row { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.na-drop__price { font-size: 20px; color: #2c2623; }
.na-drop__made { font-size: 12px; letter-spacing: .02em; color: #8a817b; }
.na-drop__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; background: #2c2623; color: #fff; padding: 15px 40px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; transition: gap .25s ease; }
.na-drop:hover .na-drop__btn { gap: 20px; }

/* ---------- The new lineup (staggered) ---------- */
.na-lineup { max-width: 1240px; margin: 0 auto; padding: 76px 24px 30px; }
.na-lineup__center { text-align: center; margin-bottom: 48px; }
.na-lineup__title { font-size: 32px; font-weight: 600; margin: 0; letter-spacing: -.01em; color: #2c2623; }
.na-lineup__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 44px 26px; }
.na-card { display: block; color: inherit; transition: opacity .2s ease; }
.na-card:hover { opacity: .9; color: inherit; }
.na-card--offset { transform: translateY(38px); }
.na-card__media { position: relative; width: 100%; aspect-ratio: 4/5; background: #f7f0ec; overflow: hidden; }
.na-card__badge { position: absolute; top: 14px; left: 14px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 11px; background: rgba(255,255,255,.92); color: #8a5c5c; }
.na-card__badge--hot { background: #2c2623; color: #fff; }
.na-card__badge--low { background: #fbe4e4; color: #a04545; }
.na-card__body { padding: 16px 2px 0; }
.na-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.na-card__cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #b7ada6; }
.na-card__date { font-size: 11px; letter-spacing: .05em; color: #c0b7b0; }
.na-card__name { font-size: 16px; letter-spacing: .01em; color: #2c2623; margin-top: 6px; }
.na-card__price { font-size: 13.5px; color: #8a817b; margin-top: 3px; }
.na-lineup__more { display: flex; justify-content: center; margin-top: 60px; }
.na-outline-btn { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #2c2623; color: #2c2623; padding: 15px 44px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; transition: all .25s ease; }
.na-outline-btn:hover { background: #2c2623; color: #fff; }

/* ---------- Best sellers rail ---------- */
.na-best { background: #faf3ee; margin-top: 80px; padding: 72px 0 76px; }
.na-best__wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.na-best__rail { display: flex; gap: 22px; overflow-x: auto; padding: 4px 24px 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; max-width: 1240px; margin: 0 auto; }
.na-best__card { flex: 0 0 auto; width: 250px; scroll-snap-align: start; display: block; color: inherit; }
.na-best__card:hover { opacity: .9; color: inherit; }
.na-best__media { position: relative; width: 100%; aspect-ratio: 4/5; background: #f2e8e2; overflow: hidden; }
.na-best__rank { position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(44,38,35,.9); color: #f6efe9; font-size: 13px; letter-spacing: .02em; }
.na-best__sold { position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,.94); color: #8a5c5c; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; }
.na-best__body { padding: 14px 2px 0; }
.na-best__name { font-size: 16px; letter-spacing: .01em; color: #2c2623; margin-top: 6px; }
.na-best__price-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.na-best__price { font-size: 13.5px; color: #8a817b; }
.na-best__stars { font-size: 12px; color: #c9a76a; letter-spacing: .06em; }

/* ---------- Restock / notify strip ---------- */
.na-restock { max-width: 1240px; margin: 64px auto 80px; padding: 0 24px; }
.na-restock__inner { background: #2c2623; color: #f6efe9; padding: 52px 40px; text-align: center; position: relative; overflow: hidden; }
.na-restock__blob { position: absolute; top: -80px; right: -40px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(178,143,82,.28), rgba(178,143,82,0)); pointer-events: none; }
.na-restock__body { position: relative; }
.na-restock__eyebrow { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #c9a76a; margin-bottom: 14px; }
.na-restock__title { font-size: 28px; font-weight: 600; margin: 0 0 12px; letter-spacing: -.01em; }
.na-restock__desc { font-size: 14.5px; line-height: 1.7; color: #c9beb6; max-width: 440px; margin: 0 auto 28px; }
.na-restock__form { display: flex; max-width: 400px; margin: 0 auto; border: 1px solid rgba(246,239,233,.3); background: rgba(246,239,233,.06); }
.na-restock__form input { flex: 1; border: none; background: transparent; padding: 15px 18px; font-family: inherit; font-size: 14px; color: #f6efe9; outline: none; }
.na-restock__form button { background: #c9a76a; border: none; padding: 0 26px; cursor: pointer; color: #2c2623; font-family: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; transition: background .2s ease; }
.na-restock__form button:hover { background: #d9b878; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .na-lineup__grid { grid-template-columns: repeat(2,1fr); }
  .na-drop { grid-template-columns: 1fr; }
  .na-drop__media { min-height: 420px; }
  .na-card--offset { transform: none; }
}
@media (max-width: 640px) {
  .na-lineup__grid { grid-template-columns: 1fr; }
  .na-hero { padding: 70px 24px 60px; }
  .na-hero__title { font-size: 40px; }
  .na-drop__name { font-size: 34px; }
  .na-drop__content { padding: 34px 26px; }
  .na-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .na-restock__inner { padding: 40px 24px; }
  .na-best { padding: 52px 0 56px; }
  .na-best__card { width: 200px; }
}