:root {
  --a45-primary: #0d7377;
  --a45-secondary: #e85d04;
  --a45-accent: #14919b;
  --a45-cream: #f3f6f1;
  --a45-ink: #102820;
  --a45-nav: #095456;
  --a45-promo: #dff4f2;
  --a45-leaf: #3aa6a1;
  --a45-white: #FFFFFF;
  --a45-muted: #5a6f68;
  --a45-border: #c5d8d1;
  --a45-radius: 16px;
  --a45-radius-pill: 999px;
  --a45-shadow: 0 10px 36px rgba(16, 40, 32, 0.1);
  --a45-font-serif: 'Fraunces', Georgia, serif;
  --a45-font-sans: 'Sora', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.a45-store {
  margin: 0;
  font-family: var(--a45-font-sans);
  color: var(--a45-ink);
  background: var(--a45-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--a45-font-serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.container { width: min(1200px, 92vw); margin-inline: auto; }
.page-main { min-height: 50vh; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.a45-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .75rem 1.5rem; border-radius: var(--a45-radius-pill);
  font-weight: 600; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer; transition: .2s ease;
}
.a45-btn-primary { background: var(--a45-primary); color: var(--a45-white); }
.a45-btn-primary:hover { background: var(--a45-nav); transform: translateY(-1px); }
.a45-btn-dark { background: var(--a45-primary); color: var(--a45-white); }
.a45-btn-dark:hover { background: var(--a45-nav); }
.a45-btn-cart { background: var(--a45-primary); color: var(--a45-white); font-size: .78rem; padding: .55rem 1rem; width: 100%; }
.a45-btn-cart:hover { background: var(--a45-nav); }
.a45-sale-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--a45-secondary); color: var(--a45-white);
  font-size: .68rem; font-weight: 800; padding: .25rem .55rem; border-radius: 6px;
}
.a45-leaf-ornament { display: block; font-size: 1.1rem; margin-top: .35rem; }
.a45-section-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--a45-muted); margin-bottom: .35rem; }

.a45-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--a45-muted); margin-bottom: .75rem;
}
.a45-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.a45-section-head--center { flex-direction: column; align-items: center; text-align: center; }
.a45-section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--a45-primary); }
.a45-gold-line { display: block; width: 48px; height: 2px; background: var(--a45-secondary); margin-top: .5rem; }
.a45-view-all { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--a45-ink); }
.a45-view-all:hover { color: var(--a45-secondary); }

.a45-product-cat {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem; font-weight: 600; color: var(--a45-nav); text-transform: uppercase; letter-spacing: .06em;
}
.a45-variant { font-size: .82rem; color: var(--a45-muted); margin: .25rem 0; }
.a45-price-row { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.a45-price-row s { color: var(--a45-muted); font-size: .85rem; }
.a45-price-row strong { color: var(--a45-secondary); font-size: 1.05rem; font-weight: 700; }
.a45-disc-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--a45-secondary); color: var(--a45-ink);
  font-size: .7rem; font-weight: 700; padding: .25rem .55rem; border-radius: var(--a45-radius-pill);
}

/* Inner pages shared */
.page-hero { padding: 2.5rem 0 1.5rem; background: var(--a45-promo); }
.page-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--a45-primary); }
.page-hero .hero-lede { color: var(--a45-muted); max-width: 52ch; }
.catalog-page { padding: 2rem 0 3rem; }
.catalog-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; }
.filter-panel h2 { font-size: 1rem; margin-bottom: .75rem; }
.filter-nav { display: flex; flex-direction: column; gap: .35rem; }
.filter-nav a { padding: .45rem .75rem; border-radius: 8px; font-size: .9rem; color: var(--a45-muted); }
.filter-nav a.active, .filter-nav a:hover { background: var(--a45-promo); color: var(--a45-primary); font-weight: 600; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.product-card {
  border: 1px solid var(--a45-border); border-radius: var(--a45-radius);
  overflow: hidden; background: var(--a45-white); transition: box-shadow .2s;
}
.product-card:hover { box-shadow: var(--a45-shadow); }
.product-img { position: relative; aspect-ratio: 1; background: #fafafa; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 1rem; }
.product-body h3 { font-size: 1rem; font-family: var(--a45-font-sans); font-weight: 600; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .75rem; }
.price { color: var(--a45-secondary); font-weight: 700; }
.btn { display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: var(--a45-radius-pill); font-weight: 600; font-size: .85rem; border: none; cursor: pointer; }
.btn-primary { background: var(--a45-primary); color: var(--a45-white); }
.btn-sm { padding: .35rem .85rem; font-size: .78rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--a45-muted); }
.pagination { display: flex; gap: .5rem; margin-top: 2rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: .4rem .75rem; border: 1px solid var(--a45-border); border-radius: 8px; font-size: .85rem; }
.pagination a.active, .pagination a:hover { background: var(--a45-primary); color: var(--a45-white); border-color: var(--a45-primary); }
