/* ============================================================
   IC LINKS CO — Shop, Collection & Product pages
   ============================================================ */

/* ── Collection hero ── */
.coll-hero {
  position: relative;
  /* Trimmed down further from the original 4.5rem/4rem so the bar hugs the
     320px emblem more closely. */
  padding: 1.75rem 0 1.5rem;
  color: var(--white);
  overflow: hidden;
}
.coll-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 25%, rgba(255,255,255,0.22), transparent 55%);
}
.coll-hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.coll-hero .breadcrumb { color: rgba(255,255,255,0.8); }
.coll-hero .breadcrumb a { color: rgba(255,255,255,0.9); }
.coll-hero h1 { color: var(--white); margin-bottom: 0.75rem; }
.coll-hero p { color: rgba(255,255,255,0.9); max-width: 560px; font-size: 1.05rem; }
.coll-hero .eyebrow { color: rgba(255,255,255,0.85); }
.coll-hero-emblem {
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(255,255,255,0.16); border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 20px 45px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.coll-hero-emblem svg { width: 150px; height: 150px; color: var(--white); stroke-width: 1.2; }
.coll-hero-emblem img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── Charm grid ── */
.charm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.charm-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: var(--trans);
}
.charm-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.charm-emblem {
  height: 180px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--ivory-dark), var(--ivory-deep));
  color: var(--rose-dark);
}
.charm-emblem svg { width: 68px; height: 68px; stroke-width: 1.3; }
/* Full-bleed — the charm photo fills the whole emblem area edge-to-edge,
   cropping as needed, rather than sitting padded/contained inside it. */
.charm-emblem img { width: 100%; height: 100%; object-fit: cover; }
.charm-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.charm-card-body h3 { margin-bottom: 0.5rem; }
.charm-words { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.charm-words span {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--plum-dark); background: var(--plum-mist); padding: 0.24rem 0.6rem; border-radius: var(--radius-pill);
}

.charm-colors { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.color-swatch {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--charcoal-mid); background: var(--white); border: 1.5px solid var(--border);
  padding: 0.28rem 0.7rem; border-radius: var(--radius-pill); transition: var(--trans);
}
.color-swatch:hover { border-color: var(--rose); }
.color-swatch.active { background: var(--rose); border-color: var(--rose); color: var(--white); }
.charm-photo-dots { display: flex; gap: 0.35rem; justify-content: center; margin: -0.4rem 0 0.6rem; }
.photo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); padding: 0; }
.photo-dot.active { background: var(--rose); }
.charm-card-body p { font-size: 0.88rem; flex: 1; margin-bottom: 1.1rem; }
/* margin-top: auto pins the foot (Choose/Selected button) to the bottom of the
   card even when a card has no description paragraph to do that via flex — so
   the button lines up at the same height across cards regardless of which
   ones have body copy and which don't. */
.charm-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.charm-price { font-family: var(--font-display); font-size: 1.4rem; color: var(--charcoal); }

/* ── Bundle / "buy the set" band ── */
.bundle {
  margin-top: 1.25rem; padding: 2.25rem 2.5rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  box-shadow: var(--shadow-soft);
}
.bundle-text h3 { margin-bottom: 0.35rem; }
.bundle-text p { font-size: 0.9rem; margin: 0; }
.bundle-buy { display: flex; align-items: center; gap: 1.5rem; }
.bundle-price { text-align: right; }

/* Buy-box CTA: journey + purchase + price, all in one row, pinned to the right */
.bundle-cta { display: flex; flex-direction: row; align-items: center; gap: 1.25rem; margin-left: auto; }
.bundle-cta .btn { text-align: center; white-space: nowrap; }

/* Collection Card thumbnail in the bundle box — bigger, hoverable, opens a lightbox */
.bundle-card-thumb {
  position: relative; width: 200px; height: 200px; border-radius: 18px; flex-shrink: 0;
  overflow: hidden; border: none; padding: 0; cursor: pointer;
  background: linear-gradient(160deg, var(--ivory-dark), var(--ivory-deep)); color: var(--rose-dark);
  transition: transform var(--trans);
}
.bundle-card-thumb img, .bundle-card-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.bundle-card-thumb svg { padding: 20%; box-sizing: border-box; }
.bundle-card-thumb:hover, .bundle-card-thumb:focus-visible { transform: scale(1.04); }
.bundle-card-thumb .zoom-ic {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,18,16,0); color: #fff; opacity: 0;
  transition: background var(--trans), opacity var(--trans);
}
.bundle-card-thumb .zoom-ic svg { width: 26px; height: 26px; padding: 0; }
.bundle-card-thumb:hover .zoom-ic, .bundle-card-thumb:focus-visible .zoom-ic {
  background: rgba(20,18,16,0.32); opacity: 1;
}

/* Lightbox */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 2000; padding: 2rem;
  background: rgba(20,18,16,0.88);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay img {
  max-width: min(90vw, 720px); max-height: 85vh;
  border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }
.bundle-price .was { font-size: 0.85rem; color: var(--charcoal-light); text-decoration: line-through; }
.bundle-price .now { font-family: var(--font-display); font-size: 2rem; color: var(--plum-dark); }

/* ── Shop landing sections ── */
.shop-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }

/* ── Product detail (starter kit, etc.) ── */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.product-media {
  aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--plum-light), var(--rose-light));
  display: flex; align-items: center; justify-content: center; position: relative;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-media .emblem { color: rgba(255,255,255,0.9); }
.product-media .emblem svg { width: 140px; height: 140px; stroke-width: 1; }
.product-info .eyebrow { margin-top: 0.5rem; }
.product-info h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 0.75rem; }
.product-price { font-family: var(--font-display); font-size: 2.2rem; color: var(--charcoal); margin: 0.5rem 0 1.5rem; }
.product-desc { font-size: 1.05rem; margin-bottom: 1.75rem; }
.product-buy { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.75rem; }
.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.qty-stepper button { width: 42px; height: 46px; font-size: 1.2rem; color: var(--charcoal-mid); transition: var(--trans); }
.qty-stepper button:hover { background: var(--ivory-dark); color: var(--plum-dark); }
.qty-stepper input { width: 44px; height: 46px; border: none; text-align: center; font-size: 1rem; font-weight: 600; background: transparent; }
.product-includes { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.product-includes h4 { margin-bottom: 1rem; color: var(--charcoal); }
.product-trust { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; font-size: 0.82rem; color: var(--charcoal-mid); }
.product-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.product-trust svg { width: 17px; height: 17px; color: var(--plum); }

/* ── Toast (added to bag) ── */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--charcoal); color: var(--ivory); padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill); font-size: 0.85rem; z-index: 1060;
  box-shadow: var(--shadow-card); transition: transform 0.4s var(--ease);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .charm-grid, .shop-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .product { grid-template-columns: 1fr; gap: 2rem; }
  .coll-hero .container { grid-template-columns: 1fr; }
  .coll-hero-emblem { display: none; }
}
@media (max-width: 600px) {
  .charm-grid, .shop-cat-grid { grid-template-columns: 1fr; }
  .bundle { flex-direction: column; align-items: flex-start; }
}