/* Page styles: all-products - loaded after common.css */

:root {
  --gold:#C9A227;
  --gold-2:#E3C766;
  --gold-soft:#F7EFD8;
  --gold-line:#E8D9A8;
  --ink:#14130F;
  --ink-2:#1E1C16;
  --cream:#FAF7F0;
  --cream-2:#F2EEE3;
  --paper:#FFFFFF;
  --text:#1B1A16;
  --muted:#6E6A60;
  --line:#E7E2D6;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-pill:999px;
  --shell:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
body {
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--cream);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4 {
  font-family:'Fraunces',Georgia,serif;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.12;
  margin:0;
}
.icon-btn {
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:none;
  display:grid;
  place-items:center;
  position:relative;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}

.icon-btn:hover {
  background:var(--gold-soft);
  border-color:var(--gold-line);
}
.icon-btn b {
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:16px;
  height:16px;
  border-radius:var(--r-pill);
  background:var(--gold);
  color:#171307;
  font-size:.55rem;
  font-weight:700;
  display:grid;
  place-items:center;
  padding:0 4px;
}
.head {
  position:relative;
  padding:52px 0 34px;
  overflow:hidden;
  background:var(--cream);
}
.leaf {
  position:absolute;
  pointer-events:none;
  color:var(--gold);
  opacity:.07;
}
.leaf--a {
  right:-40px;
  top:-70px;
  width:280px;
  transform:rotate(18deg);
}
.leaf--b {
  left:-70px;
  bottom:-120px;
  width:240px;
  transform:rotate(-140deg);
}
.head__in {
  position:relative;
  z-index:2;
}
.head__count {
  display:inline-block;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  background:var(--gold-soft);
  border:1px solid var(--gold-line);
  padding:5px 14px;
  border-radius:var(--r-pill);
  margin-bottom:18px;
}
.head h1 {
  font-size:clamp(2.2rem,5vw,3.4rem);
  margin-bottom:10px;
}
.head h1 em {
  font-style:italic;
  font-weight:400;
  color:var(--gold);
}
.head p {
  color:var(--muted);
  font-size:.88rem;
  max-width:56ch;
}
.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:26px;
}
.chip {
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--muted);
  border-radius:var(--r-pill);
  padding:7px 18px;
  font-size:.75rem;
  font-weight:500;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.chip:hover {
  border-color:var(--gold-line);
  color:var(--text);
}
.chip.is-on {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.catalog {
  padding:8px 0 70px;
}
.grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}

/* The chosen category's sections and copy, under the grid. Full width: this
   is the bottom of the page with nothing beside it, and a narrow column here
   just leaves half the row empty. */
.catblock {
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--line);
}

.catnote {
  margin-top:32px;
}
.catnote__title {
  font-size:1.2rem;
  margin-bottom:12px;
}
.catnote__rich {
  color:var(--muted);
}
.catnote__rich h2,
.catnote__rich h3,
.catnote__rich h4 {
  color:var(--text);
  margin:22px 0 8px;
}
.catnote__rich p,
.catnote__rich ul,
.catnote__rich ol {
  margin:0 0 14px;
}
.catnote__rich ul,
.catnote__rich ol {
  padding-left:20px;
}
.catnote__rich a {
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:3px;
}
.catnote__rich blockquote {
  margin:18px 0;
  padding-left:16px;
  border-left:2px solid var(--gold-line);
  font-style:italic;
}
.catnote__rich img {
  max-width:100%;
  height:auto;
  border-radius:var(--r-sm);
}
.card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(18px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease),opacity .5s var(--ease);
}
.card.is-in {
  opacity:1;
  transform:none;
  transition-delay:var(--d,0ms);
}
.card.is-in:hover {
  transform:translateY(-5px);
  box-shadow:0 18px 36px rgba(20,19,15,.1);
  border-color:var(--gold-line);
}
.card__media {
  position:relative;
  aspect-ratio:1/1;
  background:var(--cream-2);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.card__media .jar {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  transition:transform .55s var(--ease);
}
.card:hover .card__media .jar {
  transform:scale(1.07);
}
.card__media .jar svg {
  width:50%;
  height:auto;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.11));
}
.wish {
  position:absolute;
  right:10px;
  top:10px;
  z-index:2;
  width:29px;
  height:29px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  display:grid;
  place-items:center;
  color:var(--muted);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.card:hover .wish,.wish.is-on,.wish:focus-visible {
  opacity:1;
  transform:none;
}
.wish:hover {
  color:var(--gold);
}
.wish.is-on {
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}
.wish svg {
  width:14px;
  height:14px;
}
.card__body {
  padding:14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.card__title {
  font-family:'Inter',sans-serif;
  font-size:.84rem;
  font-weight:600;
  margin-bottom:6px;
}
.stars {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.66rem;
  color:var(--muted);
  margin-bottom:10px;
}
.stars b {
  color:var(--gold);
  letter-spacing:1px;
  font-weight:400;
}
.price {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:12px;
  margin-top:auto;
}
.price__now {
  font-family:'Fraunces',serif;
  font-size:1.12rem;
  font-weight:600;
}
.price__was {
  font-size:.72rem;
  color:var(--muted);
  text-decoration:line-through;
}
.card__btn {
  width:100%;
  padding:9px;
  border:0;
  border-radius:var(--r-sm);
  background:var(--ink);
  color:#fff;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.card__btn:hover {
  background:var(--gold);
  color:#171307;
}
.empty {
  grid-column:1/-1;
  text-align:center;
  padding:70px 20px;
  color:var(--muted);
}
.empty h3 {
  font-size:1.2rem;
  color:var(--text);
  margin-bottom:8px;
}
.contact li {
  display:flex;
  gap:9px;
  align-items:flex-start;
}
.contact li::before {
  content:"◦";
  color:var(--gold);
}
.top {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:800;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#171307;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  box-shadow:0 10px 24px rgba(201,162,39,.35);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.top.is-on {
  opacity:1;
  pointer-events:auto;
  transform:none;
}

/* ============================================================
   RESPONSIVE - widest breakpoint first, so narrower ones win
   ============================================================ */
@media (max-width:1300px) {
  .grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media (max-width:1100px) {
  .grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:900px) {
  .grid {
    grid-template-columns:repeat(2,1fr);
  }
  .wish {
    opacity:1;
    transform:none;
  }
}
@media (max-width:560px) {
  .grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .card__body {
    padding:11px;
  }
  .foot__grid {
    grid-template-columns:1fr;
  }
  .foot__bar {
    flex-direction:column;
  }
}
@media (prefers-reduced-motion:reduce) {
  .card {
    opacity:1!important;
    transform:none!important;
  }
}