/* =====================================================================
   7Stars — Art Supplies category page. Scoped `as-`; reuses the homepage
   tokens on `.hp` plus the shared hp- header / nav / footer. Styles the
   art hero, stats bar, collection heading, product cards and trust row.
   ===================================================================== */

/* Header cart badge */
.hp-util { position: relative; }
.as-util-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; line-height: 1;
  color: var(--hp-white); background: #c1592f;
  border-radius: 999px; border: 2px solid var(--hp-white);
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.as-hero {
  position: relative;
  background: linear-gradient(115deg, #f7efe3 0%, #f4ebdd 45%, #efe3d2 100%);
  overflow: hidden;
}
.as-hero-in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center; gap: 2rem;
}
/* Breadcrumb: canonical .hp-crumb in home.css */
.as-hero-copy { padding: 2.6rem 0 3rem; max-width: 30rem; }
.as-hero h1 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.2rem); line-height: 1.05; }
.as-hero-sub {
  margin-top: .5rem;
  font-family: var(--hp-serif); font-weight: 500;
  font-size: clamp(1.2rem, .9rem + 1.1vw, 1.7rem); line-height: 1.2;
  color: var(--hp-ink-2);
}
.as-hero-lede { margin-top: 1.2rem; font-size: 1rem; line-height: 1.6; color: var(--hp-ink-2); max-width: 24rem; }
.as-hero-cta { margin-top: 1.9rem; }
.as-hero-media {
  position: relative; align-self: stretch; min-height: 400px;
  display: grid; place-items: center;
  padding: 2rem;
  margin-right: calc((100vw - min(var(--hp-w), 100vw - 2.5rem)) / -2);
}
.as-hero-media img { max-width: 100%; max-height: 360px; width: auto; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(120, 84, 22, .18)); }

/* ── Stats bar ─────────────────────────────────────────────────────── */
.as-stats-wrap { position: relative; z-index: 3; margin-top: -1.9rem; }
.as-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--hp-white);
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-r-lg);
  box-shadow: var(--hp-shadow-md);
  overflow: hidden;
}
.as-stat { display: flex; align-items: center; gap: .85rem; padding: 1.2rem 1.5rem; }
.as-stat + .as-stat { border-left: 1px solid var(--hp-line-soft); }
.as-stat svg { flex: none; color: var(--hp-gold-deep); }
.as-stat b { display: block; font-size: .9rem; font-weight: 700; letter-spacing: -0.01em; color: var(--hp-ink); }
.as-stat span { display: block; font-size: .74rem; color: var(--hp-muted); margin-top: 1px; }

/* ── Section shell + fancy heading ─────────────────────────────────── */
.as-section { padding: clamp(2.6rem, 4.5vw, 4rem) 0; }
.as-fancy-head { text-align: center; margin-bottom: 2rem; }
.as-fancy-title {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem);
}
.as-fancy-title::before, .as-fancy-title::after {
  content: ""; width: clamp(28px, 8vw, 74px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--hp-gold));
}
.as-fancy-title::after { background: linear-gradient(90deg, var(--hp-gold), transparent); }
.as-fancy-star { color: var(--hp-gold); font-size: 1rem; margin: .4rem 0 .3rem; }
.as-fancy-sub { font-size: .95rem; color: var(--hp-muted); }

/* ── Product grid ──────────────────────────────────────────────────── */
.as-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  justify-content: center;
  gap: 1.5rem;
}
.as-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--hp-white);
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-r);
  overflow: hidden;
  box-shadow: var(--hp-shadow-sm);
  transition: transform .3s var(--hp-ease), box-shadow .3s var(--hp-ease), border-color .3s;
}
.as-card:hover { transform: translateY(-5px); box-shadow: var(--hp-shadow-md); border-color: var(--hp-gold-soft); }
.as-card-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--hp-white); }
.as-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 1.4rem; transition: transform .6s var(--hp-ease); }
.as-card:hover .as-card-media img { transform: scale(1.05); }
.as-badge {
  position: absolute; top: 0; left: 1rem; z-index: 2;
  padding: .45rem .55rem .32rem;
  font-size: .68rem; font-weight: 800; line-height: 1.05; text-align: center;
  color: var(--hp-white);
  background: linear-gradient(180deg, #2f6bd6, #2453b4);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 10px rgba(36, 83, 180, .3);
}
.as-badge span { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .04em; }
.as-wish {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--hp-ink-2);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(4px);
  border: 1px solid var(--hp-line-soft); border-radius: 50%; box-shadow: var(--hp-shadow-sm);
  transition: color .2s, transform .2s;
}
.as-wish:hover { color: #d64545; transform: scale(1.08); }
.as-wish.is-on { color: #d64545; }
.as-wish.is-on svg { fill: currentColor; }
.as-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.as-eta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hp-muted);
}
.as-eta svg { color: var(--hp-gold-deep); }
.as-card-title {
  font-family: var(--hp-sans);
  font-size: 1rem; font-weight: 600; line-height: 1.32; letter-spacing: -0.01em; color: var(--hp-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
.as-card-title a:hover { color: var(--hp-gold-deep); }
.as-unit { font-size: .8rem; color: var(--hp-muted); }
.as-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .9rem; }
.as-price { display: flex; align-items: baseline; gap: .5rem; }
.as-price-now { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--hp-ink); }
.as-price-was { font-size: .82rem; color: var(--hp-muted); text-decoration: line-through; }
.as-add {
  flex: none;
  padding: .62rem 1.1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  color: #1a8a54; background: var(--hp-white);
  border: 1px solid rgba(26, 138, 84, .5); border-radius: var(--hp-r-sm);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.as-add:hover { background: #1a8a54; color: var(--hp-white); border-color: transparent; box-shadow: 0 6px 14px rgba(26, 138, 84, .28); transform: translateY(-1px); }
.as-add:active { transform: translateY(0); }
.as-add.is-added { background: #1a8a54; color: var(--hp-white); border-color: transparent; }

/* ── Trust strip ───────────────────────────────────────────────────── */
.as-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
  padding: 1.7rem 1.9rem;
  background: linear-gradient(120deg, #f8f1e6, #f3e9d9);
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-r-lg);
}
.as-trust-item { display: flex; align-items: center; gap: .8rem; }
.as-trust-item svg { flex: none; color: var(--hp-gold-deep); }
.as-trust-item strong { display: block; font-size: .85rem; font-weight: 600; letter-spacing: -0.01em; }
.as-trust-item span { display: block; font-size: .74rem; color: var(--hp-muted); margin-top: 1px; }

/* Toast */
.as-toast {
  position: fixed; left: 50%; bottom: 1.6rem; z-index: 200;
  transform: translate(-50%, 1.5rem);
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.2rem;
  font-size: .85rem; font-weight: 600; color: var(--hp-white);
  background: var(--hp-ink); border-radius: 999px; box-shadow: var(--hp-shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--hp-ease), transform .3s var(--hp-ease);
}
.as-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.as-toast svg { color: #7ee0a6; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .as-stats { grid-template-columns: repeat(2, 1fr); }
  .as-stat:nth-child(n+3) { border-top: 1px solid var(--hp-line-soft); }
  .as-stat:nth-child(3) { border-left: none; }
  .as-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .as-hero-in { grid-template-columns: 1fr; }
  .as-hero-copy { padding: 1.6rem 0 1rem; max-width: none; order: 2; }
  .as-hero-media { min-height: 240px; order: 1; margin-inline: 0; padding: 1rem; }
  .as-hero-media img { max-height: 240px; }
}
@media (max-width: 560px) {
  .as-stats { grid-template-columns: 1fr; }
  .as-stat { border-left: none !important; }
  .as-stat + .as-stat { border-top: 1px solid var(--hp-line-soft); }
  .as-trust { grid-template-columns: 1fr; }
  .as-grid { grid-template-columns: minmax(0, 1fr); }
}