/* Product builder: photo panel + options panel.
   Class names match the markup the configurator scripts query. */

.bundle-shop{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
@media (max-width:900px){ .bundle-shop{ grid-template-columns:1fr; } }

/* ----- Visual side -----
   The photo sticks beside the (tall) options column on desktop. It can be
   sticky now because the panel no longer clips with overflow:hidden. */
.bundle-visual{
  position:sticky;
  top:96px;
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--blush);
}
.bundle-visual > .photo-main,
.bundle-visual > .bundle-video,
.bundle-visual > .photo-gallery{
  position:absolute; inset:0;
  width:100%; height:100%; max-width:none; margin:0;
}
.bundle-visual > .photo-main,
.bundle-visual > .bundle-video{
  display:block; object-fit:cover; object-position:center top;
  border:none; border-radius:0; box-shadow:none; aspect-ratio:auto;
}
/* Line-art fallback centres rather than crops. */
.bundle-visual > .bundle-illustration{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(56%,240px); max-width:none; margin:0;
}
.bundle-visual .tag{
  position:absolute; top:16px; left:16px; z-index:3;
  padding:6px 14px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:var(--radius-pill);
  font-size:.8rem; font-weight:600; color:var(--ink);
}

/* Gallery: full-bleed image, thumbnails in a bar along the bottom. */
.photo-gallery{ display:block; }
.photo-gallery .photo-main{
  width:100%; height:100%; max-width:none; margin:0;
  object-fit:cover; object-position:center top;
  aspect-ratio:auto; border:none; border-radius:0; box-shadow:none;
}
.photo-thumbs{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; gap:8px; justify-content:center;
  padding:14px;
  background:linear-gradient(180deg, rgba(31,20,22,0), rgba(31,20,22,.55));
}
.photo-thumb{
  width:58px; height:58px; flex-shrink:0;
  padding:0; overflow:hidden;
  border-radius:var(--radius-sm);
  border:2px solid rgba(255,255,255,.55);
  background:var(--white);
  cursor:pointer; opacity:.85;
  transition:opacity .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.photo-thumb img{ width:100%; height:100%; object-fit:cover; }
.photo-thumb:hover{ opacity:1; transform:translateY(-2px); }
.photo-thumb.active{ opacity:1; border-color:var(--white); box-shadow:0 0 0 2px var(--ink); }

@media (max-width:900px){
  .bundle-visual{ position:relative; top:auto; }
}

/* ----- Options side ----- */
.bundle-config{ padding:4px 0 0; }
.bundle-config .bar{ display:none; }
.bundle-config h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:12px; }
.bundle-config > p{ margin:0 0 30px; max-width:52ch; color:var(--muted); }

.field{ padding:22px 0; border-top:1px solid var(--line); }
.field-label,
.field label{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:12px;
  font-size:.9rem; font-weight:600; color:var(--ink);
  letter-spacing:0; text-transform:none;
}
/* Free-text hints that were marked up as .field-label (e.g. the cap-size
   note) read as captions, not as shouty labels. */
.field > .field-label:not(:first-child){
  margin:12px 0 0; font-size:.85rem; font-weight:400; color:var(--muted);
}
.field select{
  width:100%; max-width:360px; min-height:48px;
  padding:0 42px 0 16px;
  font-family:inherit; font-size:.95rem; color:var(--ink);
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231f1416' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
  transition:border-color .2s var(--ease);
}
.field select:hover{ border-color:var(--ink); }

.pill-group{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  min-height:44px; min-width:56px;
  padding:0 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--ink);
  font-family:inherit; font-size:.92rem; font-weight:500;
  cursor:pointer;
  transition:border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.pill:hover{ border-color:var(--ink); }
.pill[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--white); }

/* ----- Price + order ----- */
.bundle-price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px;
  margin:4px 0 22px; padding-top:26px;
  border-top:1px solid var(--line);
}
.bundle-price .amount{ font-family:"Fraunces",serif; font-size:clamp(2.2rem,4vw,2.8rem); font-weight:500; line-height:1; }
.bundle-price .price-note{ font-size:.85rem; color:var(--muted); }

.order-actions{ display:grid; grid-template-columns:1fr auto; gap:10px; }
.order-actions .btn{ min-height:54px; }
@media (max-width:480px){ .order-actions{ grid-template-columns:1fr; } }
.payment-hint{ font-size:.85rem; color:var(--muted); margin-top:14px; max-width:52ch; }

/* Reassurance beside the buy button. */
.buy-assurance{
  list-style:none; margin:24px 0 0; padding:18px 20px;
  display:grid; gap:12px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:.9rem;
}
.buy-assurance li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); }
.buy-assurance svg{ width:20px; height:20px; flex-shrink:0; color:var(--gold); margin-top:1px; }
.buy-assurance strong{ color:var(--ink); font-weight:600; }
.buy-assurance a{ color:var(--ink); font-weight:600; text-underline-offset:3px; }

/* Product pages open straight onto the product (no page header). */
.product-section{ padding-top:clamp(20px,3vw,36px); }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:clamp(18px,2.5vw,28px); font-size:.85rem; color:var(--muted); }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.crumbs [aria-current]{ color:var(--ink); font-weight:500; }
.bundle-config h1{ font-size:clamp(2rem,3.4vw,2.8rem); margin-bottom:12px; }