/* ════════════════════════════════════════════
   TOKENS
   ════════════════════════════════════════════ */
:root {
  --ivory:         #faf8f2;
  --ivory-warm:    #f5f0e6;
  --ivory-border:  #e6dfd0;
  --ivory-deep:    #ece4d4;
  --page-bg:       #f8f5ee;
  --white:         #ffffff;
  --charcoal:      #2c2820;
  --brown-mid:     #4a4038;
  --gold:          #b89560;
  --gold-btn:      #c8a870;
  --gold-btn-hover:#a87840;
  --gold-light:    #d4b88a;
  --grey-soft:     #9a9080;
  --grey-text:     #6a6050;
  --grey-light:    #bfb8a8;
  --sidebar-bg:    #f2ede2;
  --filter-border: #ddd5c0;

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Jost', system-ui, sans-serif;
  --ease:   cubic-bezier(.25,.46,.45,.94);
  --fast:   .22s;
  --med:    .45s;
  --max-w:  1260px;
  --pad:    clamp(1rem, 4vw, 2rem);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--sans); background: var(--page-bg); color: var(--charcoal); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--sans); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }

/* Placeholder */
.ph {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey-light);
  background: linear-gradient(145deg, var(--ivory-warm) 0%, var(--ivory-deep) 100%);
  overflow: hidden; position: relative;
}
.ph::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 9px,
    rgba(255,255,255,.22) 9px, rgba(255,255,255,.22) 10px);
}
.ph span { position: relative; z-index: 1; text-align: center; padding: .5rem; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .06s; } .d2 { transition-delay: .14s; }
.d3 { transition-delay: .22s; } .d4 { transition-delay: .30s; }
.d5 { transition-delay: .38s; }

/* ════════════════════════════════════════════
   SHOP LAYOUT
   ════════════════════════════════════════════ */
.shop-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 2.5rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 2rem var(--pad) 4rem;
  align-items: start;
}

/* ════════════════════════════════════════════
   SIDEBAR — COLLECTION CATEGORIES
   ════════════════════════════════════════════ */
.shop-sidebar {
  position: sticky;
  top: 80px;
  background: transparent;
}

/* Filter group container */
.filter-group {
  border-bottom: 1px solid var(--filter-border);
}
.filter-group:first-child { border-top: 1px solid var(--filter-border); }

/* Toggle button */
.filter-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: .85rem 0;
  font-family: var(--sans); font-size: .65rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--charcoal);
  background: transparent; cursor: pointer;
  transition: color var(--fast);
}
.filter-toggle:hover { color: var(--gold); }

.filter-arrow {
  width: 14px; height: 14px; stroke: currentColor; fill: none;
  stroke-width: 2; flex-shrink: 0;
  transition: transform var(--fast);
}
.filter-group.open .filter-arrow { transform: rotate(90deg); }

/* Filter body accordion */
.filter-body {
  max-height: 0; overflow: hidden;
  transition: max-height .35s var(--ease), padding .35s;
}
.filter-body.open { max-height: 600px; padding-bottom: 1rem; }

/* ── Category filter items (link-based, no checkboxes) ── */
.cat-filter-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem 0; cursor: pointer;
  color: var(--grey-text); font-size: .82rem; font-weight: 300;
  transition: color var(--fast);
  border-radius: 0;
  text-decoration: none;
}
.cat-filter-item:hover { color: var(--charcoal); }
.cat-filter-item.active { color: var(--charcoal); font-weight: 500; }

/* Left dot indicator */
.cat-filter-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--grey-light);
  background: transparent;
  transition: all var(--fast);
}
.cat-filter-item:hover .cat-filter-dot { border-color: var(--gold); }
.cat-filter-item.active .cat-filter-dot {
  background: var(--gold-btn);
  border-color: var(--gold-btn);
}

.cat-filter-label { flex: 1; line-height: 1.3; }

/* Count badge */
.cat-filter-count {
  font-size: .68rem; color: var(--grey-light);
  font-weight: 300; flex-shrink: 0;
}
.cat-filter-item.active .cat-filter-count { color: var(--grey-text); }

/* Empty state message */
.cat-filter-empty {
  font-size: .75rem; color: var(--grey-light); font-weight: 300;
  line-height: 1.6; padding: .5rem 0;
  font-style: italic;
}

/* Clear filter link */
.filter-clear-all {
  display: inline-block; margin-top: 1rem;
  font-size: .72rem; color: var(--grey-soft);
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--fast); cursor: pointer;
}
.filter-clear-all:hover { color: #c0392b; }

/* ════════════════════════════════════════════
   SHOP MAIN
   ════════════════════════════════════════════ */
.shop-main {}

.shop-header { margin-bottom: 1.75rem; }
.shop-page-title {
  font-family: var(--serif); font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 400; color: var(--charcoal); margin-bottom: .65rem;
}
.shop-desc {
  font-size: .82rem; color: var(--grey-text); line-height: 1.75;
  font-weight: 300; max-width: 680px;
}

/* Toolbar */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 0 1.25rem;
  border-bottom: 1px solid var(--ivory-border);
  margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap;
}
.shop-count { font-size: .82rem; color: var(--grey-soft); font-weight: 300; }
.shop-count strong { color: var(--charcoal); font-weight: 500; }

/* Active filter tags */
.active-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.filter-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--charcoal); color: var(--white);
  font-size: .65rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; padding: .3rem .75rem; white-space: nowrap;
}
.filter-tag__remove {
  color: var(--grey-light); font-size: .9rem;
  line-height: 1; transition: color var(--fast); cursor: pointer;
}
.filter-tag__remove:hover { color: var(--white); }

/* ════════════════════════════════════════════
   PRODUCT GRID — 4 columns, WHITE BACKGROUND
   ════════════════════════════════════════════ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1.1rem;
  margin: 0; padding: 0;
}

/* ── Product Card ── */
.product-card {
  display: flex; flex-direction: column;
  background: var(--white);               /* ← WHITE card background */
  transition: transform var(--fast) var(--ease), box-shadow var(--fast);
  position: relative;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(44,40,32,.09);
}

/* Image area */
.product-img {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--ivory-warm);          /* ← warm ivory behind image */
  flex-shrink: 0;
}
.product-img .ph { width: 100%; height: 100%; }
.product-img__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #ece8dc, #d4cec0);
}
.product-img__placeholder svg { width: 45%; height: 45%; opacity: .6; }
.product-img__link { display: block; width: 100%; height: 100%; }
.product-img__photo {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform .6s var(--ease); display: block;
}
.product-card:hover .product-img__photo { transform: scale(1.04); }

/* Sale badge */
.product-badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 3;
  font-size: .58rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .22rem .55rem;
  color: #fff; line-height: 1.4;
}
.product-badge--sale { background: #c0392b; }

/* Wishlist button */
.wishlist-btn {
  position: absolute; top: .7rem; right: .7rem;
  width: 28px; height: 28px; background: rgba(255,255,255,.9);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(0,0,0,.1); z-index: 2;
  opacity: 0; transition: opacity var(--fast), transform var(--fast); cursor: pointer;
  border: none;
}
.wishlist-btn:hover { transform: scale(1.12); }
.wishlist-btn svg { width: 13px; height: 13px; stroke: var(--grey-text); fill: none; stroke-width: 1.5; }
.wishlist-btn.saved svg { stroke: #c0392b; fill: #c0392b; }
.product-card:hover .wishlist-btn { opacity: 1; }

/* Info block */
.product-info {
  padding: .7rem .5rem .6rem;
  background: var(--white);              /* ← white info area */
}
.product-name {
  font-family: var(--serif); font-size: .95rem; font-weight: 400;
  color: var(--charcoal); margin-bottom: .5rem; line-height: 1.25;
}
.product-name a { color: inherit; transition: color var(--fast); }
.product-name a:hover { color: var(--gold); }

/* Price — hidden per design, rendered for optional toggle */
.product-price { display: none !important; }

/* Book appointment button */
.book-appt-btn {
  display: block; width: 100%;
  background: var(--gold-btn); color: var(--white);
  padding: .5rem; text-align: center;
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background var(--fast); text-decoration: none;
}
.book-appt-btn:hover { background: var(--gold-btn-hover); color: var(--white); }

/* ── Empty state ── */
.shop-empty {
  grid-column: 1/-1; text-align: center; padding: 5rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  color: var(--grey-text);
}
.shop-empty svg { opacity: .35; }
.shop-empty h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--charcoal); }
.shop-empty p  { font-size: .88rem; font-weight: 300; }
.btn-clear-filter {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--charcoal); padding: .65rem 1.75rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  transition: all var(--fast); cursor: pointer;
}
.btn-clear-filter:hover { background: var(--charcoal); color: var(--white); }

/* ════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════ */
.shop-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .3rem; margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--ivory-border); flex-wrap: wrap;
}
.page-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 .4rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 400;
  color: var(--grey-text); transition: all var(--fast); cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
}
.page-btn:hover { color: var(--charcoal); border-color: var(--ivory-border); }
.page-btn.active { color: var(--charcoal); font-weight: 600; border-color: var(--charcoal); }
.page-btn.ellipsis { border: none; cursor: default; }
.page-prev svg, .page-next svg {
  width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2;
}
.page-prev:hover, .page-next:hover { color: var(--gold); }

/* ════════════════════════════════════════════
   INSTAGRAM STRIP
   ════════════════════════════════════════════ */
.insta-section { background: var(--ivory-deep); padding: 4rem var(--pad); }
.insta-inner { max-width: var(--max-w); margin: 0 auto; }
.insta-header { text-align: center; margin-bottom: 1.75rem; }
.insta-eyebrow {
  display: block; font-family: var(--sans); font-size: .65rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem;
}
.insta-handle {
  font-family: var(--serif); font-size: 1.5rem; font-style: italic;
  font-weight: 400; color: var(--charcoal);
}
.insta-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0; margin-bottom: 1.75rem;
}
.insta-photo {
  position: relative; overflow: hidden; aspect-ratio: 1/1;
  cursor: pointer; background: var(--ivory-warm);
}
.insta-photo .ph { width: 100%; height: 100%; }
.insta-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.insta-photo:hover img { transform: scale(1.07); }
.insta-photo-overlay {
  position: absolute; inset: 0;
  background: rgba(44,40,32,.28);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--fast);
}
.insta-photo:hover .insta-photo-overlay { opacity: 1; }
.insta-photo-overlay svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.5; }
.insta-cta { text-align: center; }
.btn-follow {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--charcoal); padding: .65rem 2rem;
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--charcoal);
  transition: all var(--fast);
}
.btn-follow:hover { background: var(--charcoal); color: var(--white); }

/* ════════════════════════════════════════════
   RESPONSIVE — 1024px
   ════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: 170px 1fr; gap: 1.75rem; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .insta-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════
   RESPONSIVE — 768px
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --pad: 1rem; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar {
    position: static;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: .5rem; border: none;
  }
  .filter-group { border: 1px solid var(--filter-border); padding: 0 .75rem; }
  .filter-group:first-child { border-top: 1px solid var(--filter-border); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .wishlist-btn { opacity: 1; }
  .insta-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════
   RESPONSIVE — 480px
   ════════════════════════════════════════════ */
@media (max-width: 480px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .insta-strip { grid-template-columns: repeat(2, 1fr); }
  .shop-sidebar { grid-template-columns: 1fr; }
}