/* ==========================================================================
   Kumaas — product.css  (product detail page)
   ========================================================================== */

.pdp-crumbs { padding-block: var(--sp-5) var(--sp-4); }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
  padding-bottom: var(--sp-7);
}
.pdp-skel-media { aspect-ratio: 3 / 4; }
.pdp-skel-info { display: grid; gap: var(--sp-4); align-content: start; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-3); position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.gallery--single { grid-template-columns: 1fr; }
.gallery__main {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-cream);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__main .pcard__placeholder { height: 100%; }
.gallery__main .pcard__ph-mark { max-width: 140px; }
.gallery__thumbs { display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; }
.gallery__thumbs button {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.7;
  transition: opacity var(--t-fast), border-color var(--t-fast);
}
.gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs button:hover { opacity: 1; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--c-burgundy); opacity: 1; }
.gallery__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 250, 247, 0.9);
  color: var(--c-wine);
  box-shadow: var(--shadow-sm);
}
.gallery__nav svg { width: 18px; height: 18px; }
.gallery__nav--prev { left: var(--sp-3); }
.gallery__nav--prev svg { transform: rotate(180deg); }
.gallery__nav--next { right: var(--sp-3); }
.gallery .pcard__badges { top: var(--sp-4); left: var(--sp-4); }

/* ---------- Info column ---------- */
.pinfo { display: flex; flex-direction: column; gap: var(--sp-5); }
.pinfo__top { display: flex; flex-direction: column; gap: var(--sp-2); }
.pinfo__cat { font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold-text); font-weight: 500; }
.pinfo__cat a:hover { color: var(--c-burgundy); }
.pinfo h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
.pinfo__sku { font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: 0.05em; }
.pinfo__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.pinfo__price .price { font-size: 1.5rem; }
.pinfo__price .price--was { font-size: var(--fs-md); }
.pinfo__save { font-size: var(--fs-xs); font-weight: 600; color: var(--c-burgundy); background: var(--c-blush-soft); padding: 2px 10px; border-radius: var(--radius-pill); }
.pinfo__tax { font-size: var(--fs-xs); color: var(--c-muted); }

.sample-banner { font-size: var(--fs-sm); }

/* Option groups */
.opt { margin: 0; padding: 0; border: 0; min-width: 0; }
.opt__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); width: 100%; }
.opt legend { float: left; width: 100%; padding: 0; }
.opt legend + * { clear: both; }
.opt__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-wine); }
.opt__label span { font-weight: 400; color: var(--c-text); }
.opt__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }

.swatch {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.swatch::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(36, 25, 28, 0.2);
}
.swatch:hover { border-color: var(--c-blush); }
input:checked + .swatch { border-color: var(--c-burgundy); }
input:focus-visible + .swatch,
input:focus-visible + .size-btn { box-shadow: var(--focus); }

.size-btn {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.size-btn:hover { border-color: var(--c-burgundy); }
input:checked + .size-btn { background: var(--c-burgundy); border-color: var(--c-burgundy); color: var(--c-ivory); }
input:disabled + .size-btn {
  color: var(--c-muted);
  background: var(--c-cream);
  border-color: var(--c-line);
  cursor: not-allowed;
  text-decoration: line-through;
}
.link-btn { font-size: var(--fs-sm); color: var(--c-burgundy); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--c-wine); }

/* Stock line */
.stock { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); min-height: 22px; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); }
.stock--low { color: var(--c-burgundy); }
.stock--low::before { background: var(--c-champagne); }
.stock--out { color: var(--c-muted); }
.stock--out::before { background: var(--c-muted); }
.stock--hint::before { display: none; }
.stock--hint { color: var(--c-muted); }

/* Quantity + add */
.buy { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.buy .btn--primary { flex: 1; min-width: 200px; min-height: 52px; }
.buy .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.buy-msg { font-size: var(--fs-sm); min-height: 1.4em; }
.buy-msg--error { color: var(--c-error); }

.perks { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: var(--c-cream); border-radius: var(--radius); font-size: var(--fs-sm); list-style: none; }
.perks li { display: flex; gap: var(--sp-3); align-items: center; }
.perks svg { width: 20px; height: 20px; color: var(--c-burgundy); flex-shrink: 0; }
.perks a { text-decoration: underline; text-underline-offset: 3px; }

/* Accordions */
.acc { border-top: 1px solid var(--c-line); }
.acc details { border-bottom: 1px solid var(--c-line); }
.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  font-weight: 500;
  color: var(--c-wine);
  cursor: pointer;
  list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.4rem; font-weight: 300; line-height: 1; transition: transform var(--t-fast); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc__body { padding-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--c-text); }
.acc__body p + p { margin-top: var(--sp-2); }
.acc dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); }
.acc dt { color: var(--c-muted); }
.acc dd { margin: 0; }
.acc a { color: var(--c-burgundy); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Size guide modal ---------- */
.modal {
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-ivory);
  color: var(--c-text);
  box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(36, 25, 28, 0.5); }
.modal__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line); }
.modal__head h2 { font-size: var(--fs-lg); }
.modal__body { padding: var(--sp-5); display: grid; gap: var(--sp-5); }
.table-wrap { overflow-x: auto; }
.size-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.size-table th, .size-table td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.size-table thead th { background: var(--c-cream); color: var(--c-wine); font-weight: 600; }
.size-table tbody th { font-weight: 600; }
.measure-list { display: grid; gap: var(--sp-2); list-style: none; font-size: var(--fs-sm); }
.measure-list strong { color: var(--c-wine); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  z-index: 200;
  right: var(--sp-5);
  bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: min(420px, calc(100vw - 2rem));
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  background: var(--c-wine);
  color: var(--c-ivory);
  box-shadow: var(--shadow);
  font-size: var(--fs-sm);
  animation: toast-in var(--t) var(--ease);
}
.toast[hidden] { display: none; }
.toast a { color: var(--c-champagne-soft); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Not found ---------- */
.pdp-missing { padding-block: var(--sp-8); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; grid-template-columns: 1fr; }
  .gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .gallery__thumbs li { flex: 0 0 64px; }
}
@media (max-width: 520px) {
  .toast { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); max-width: none; }
  .pdp-crumbs { padding-block: var(--sp-4) var(--sp-3); }
}

/* Wishlist button (signed-in customers) */
.wish-btn { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: start; font-size: var(--fs-sm); color: var(--c-wine); padding: var(--sp-2) 0; }
.wish-btn svg { width: 20px; height: 20px; transition: fill var(--t-fast); }
.wish-btn:hover { color: var(--c-burgundy); }
.wish-btn[aria-pressed="true"] svg { fill: var(--c-burgundy); color: var(--c-burgundy); }
.wish-btn:disabled { opacity: 0.6; }
.stitch-tag { align-self: flex-start; display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--c-blush-soft); color: var(--c-wine); }
.stitch-tag--unstitched { background: var(--c-champagne-soft); color: #5c3d06; }