/* ---------- Product Detail Page ---------- */
.pdp{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  padding-top: 36px;
}
@media (max-width: 900px){
  .pdp{ grid-template-columns: 1fr; gap: 32px; }
}

/* Gallery */
.gallery{
  display:flex;
  gap: 14px;
}
.gallery-thumbs{
  display:flex;
  flex-direction:column;
  gap: 10px;
  width: 84px;
  flex-shrink:0;
}
.gallery-thumbs button{
  border: 1px solid var(--line);
  background: var(--card);
  padding:0;
  overflow:hidden;
  aspect-ratio:1/1;
  border-radius: var(--radius);
  transition: border-color .2s;
}
.gallery-thumbs button.active{ border-color: var(--brass); border-width:2px; }
.gallery-thumbs img{ width:100%; height:100%; object-fit:contain; padding:8%; }

.gallery-main{
  flex:1;
  position:relative;
  aspect-ratio: 1/1;
  overflow:hidden;
  background: var(--card);
  border: 1px solid var(--line);
}
.gallery-main img{
  width:100%; height:100%; object-fit:contain;
  padding: 5%;
  opacity:0;
  position:absolute; inset:0;
  transition: opacity .35s var(--ease);
}
.gallery-main img.active{ opacity:1; position:relative; }
.gallery-counter{
  position:absolute; bottom:16px; right:18px;
  background: rgba(28,25,18,0.72);
  color: var(--cream);
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 20px;
  letter-spacing:.04em;
}

@media (max-width: 560px){
  .gallery{ flex-direction: column-reverse; }
  .gallery-thumbs{ flex-direction:row; width:auto; overflow-x:auto; }
  .gallery-thumbs button{ width: 64px; flex-shrink:0; }
}

/* Info panel */
.pdp-info{ padding-top: 6px; }
.pdp-info .eyebrow{ margin-bottom: 10px; display:block; }
.pdp-info h1{ font-size: clamp(1.9rem,3.4vw,2.5rem); margin-bottom: 16px; }
.pdp-price{ margin: 18px 0 28px; }

.option-block{ margin-bottom: 28px; }
.option-label{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 12px;
  font-size: 13px; font-weight:700; letter-spacing:.03em;
}
.option-label .value{ color: var(--stone); font-weight:600; }
.option-label a{ color: var(--brass-dim); text-decoration: underline; font-weight:600; font-size:12.5px; }

.color-options{ display:flex; gap: 12px; }
.color-swatch{
  width: 42px; height:42px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 2px;
  position:relative;
  cursor:pointer;
}
.color-swatch .fill{
  width:100%; height:100%; border-radius:50%;
  border: 1px solid var(--line-strong);
  display:block;
}
.color-swatch.active{ border-color: var(--brass); }
.color-swatch .name-tip{
  position:absolute; top:100%; left:50%; transform: translateX(-50%);
  margin-top:6px;
  font-size: 10.5px; white-space:nowrap; color: var(--stone);
}

.size-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
@media (max-width: 420px){ .size-grid{ grid-template-columns: repeat(4,1fr); } }
.size-btn{
  padding: 11px 0;
  text-align:center;
  border: 1px solid var(--line-strong);
  background: var(--card);
  font-size: 13.5px; font-weight:600;
  border-radius: var(--radius);
  transition: all .2s var(--ease);
}
.size-btn:hover{ border-color: var(--ink); }
.size-btn.active{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.size-btn.oos{ opacity:.35; text-decoration: line-through; cursor:not-allowed; }

.qty-row{ display:flex; align-items:center; gap: 16px; }
.qty-control{
  display:flex; align-items:center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.qty-control button{
  width: 38px; height: 40px;
  background:none; border:none;
  font-size: 16px; color: var(--ink);
}
.qty-control button:hover{ background: var(--line); }
.qty-control span{
  width: 36px; text-align:center; font-weight:700; font-size:14px;
}

.pdp-actions{
  display:flex; flex-direction:column; gap: 12px;
  margin-top: 30px;
}
.stock-note{
  margin-top: 18px;
  font-size: 13px; color: var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
.stock-note svg{ width:15px;height:15px;color:var(--brass);}

.pdp-meta-list{
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.pdp-meta-list details{
  border-bottom: 1px solid var(--line);
}
.pdp-meta-list summary{
  padding: 16px 0;
  font-weight:700;
  font-size: 13.5px;
  letter-spacing:.02em;
  cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  list-style:none;
}
.pdp-meta-list summary::-webkit-details-marker{ display:none; }
.pdp-meta-list summary::after{ content:'+'; font-size:18px; color:var(--brass); }
.pdp-meta-list details[open] summary::after{ content:'–'; }
.pdp-meta-list .panel{ padding: 0 0 18px; font-size: 13.5px; color: var(--ink-soft); line-height:1.7; }

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top: 60px;
  font-size: 13px; font-weight:700; letter-spacing:.04em;
  color: var(--ink-soft);
}
.back-link:hover{ color: var(--ink); }

/* Toast */
.toast{
  position: fixed;
  bottom: 26px; left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--cream);
  padding: 14px 24px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition: all .3s var(--ease);
  z-index: 1000;
  display:flex; align-items:center; gap:10px;
}
.toast.show{ opacity:1; transform: translate(-50%,0); }
.toast svg{ width:16px; height:16px; color: var(--brass-light); }

/* ---------- Size guide table ---------- */
.size-table-wrap{
  overflow-x:auto;
  margin: 40px 0;
}
table.size-table{
  width:100%;
  border-collapse: collapse;
  background: var(--card);
}
.size-table th, .size-table td{
  padding: 14px 18px;
  text-align:left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.size-table th{
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:11.5px;
  color: var(--brass-dim);
  border-bottom: 2px solid var(--line-strong);
}
.size-table tr:hover td{ background: rgba(162,121,47,0.05); }

.measure-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 30px;
  margin-top: 44px;
}
@media (max-width:700px){ .measure-grid{ grid-template-columns:1fr; } }
.measure-card h4{ font-size:1.1rem; margin-bottom:10px; }
.measure-card p{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- Cart page ---------- */
.cart-page{ padding-top: 30px; }
.cart-item{
  display:grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  align-items:center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item img{ width:96px; height:96px; object-fit:contain; padding:6px; background:var(--card); border:1px solid var(--line); }
.cart-item h4{ font-size:1.05rem; margin-bottom:6px; }
.cart-item .meta{ font-size: 13px; color:var(--stone); }
.cart-item .remove{ font-size:12px; color:var(--clay-dark); font-weight:700; margin-top:8px; display:inline-block; }
.cart-item .line-price{ font-family: var(--font-display); font-size:1.2rem; text-align:right; }
.cart-empty{ text-align:center; padding: 80px 0; color: var(--ink-soft); }
.cart-summary{
  margin-top: 30px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
}
.cart-summary .row{ display:flex; justify-content:space-between; padding: 8px 0; font-size:14.5px; }
.cart-summary .row.total{ font-family:var(--font-display); font-size:1.3rem; border-top:1px solid var(--line-strong); margin-top:10px; padding-top:16px; }