/* ---------- Product Detail Page ---------- */
.pdp{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  padding-top: 52px;
  padding-bottom: 90px;
}
@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(--night);
  border: 0;
  box-shadow: 12px 12px 0 rgba(197,154,80,.28);
}
.gallery-main img{
  width:100%; height:100%; object-fit:contain;
  padding: 8%;
  filter: saturate(.86);
  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; position:sticky; top:104px; align-self:start; }
.pdp-info .eyebrow{ margin-bottom: 10px; display:block; }
.pdp-info h1{ font-size: clamp(2.4rem,4.6vw,4.4rem); line-height:.95; letter-spacing:-.035em; 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;
}
.pdp-actions .btn-primary{ padding-top:18px; padding-bottom:18px; box-shadow:6px 6px 0 var(--brass); }
.craft-note{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-strong);
  margin-top:30px;
}
.craft-note div{ background:var(--bone); padding:15px 12px; }
.craft-note strong{ display:block; color:var(--brass-dim); font-family:var(--font-display); font-size:1.15rem; font-weight:400; }
.craft-note span{ display:block; color:var(--ink-soft); font-size:10.5px; line-height:1.4; margin-top:5px; }
.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); }

@media (max-width: 900px){
  .pdp-info{ position:static; }
  .gallery-main{ box-shadow:8px 8px 0 rgba(197,154,80,.28); }
}

@media (max-width: 420px){
  .craft-note{ grid-template-columns:1fr; }
}

/* 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; }

/* ---------- Checkout page ---------- */
.checkout-page{ padding-top: 30px; padding-bottom: 100px; }
.checkout-grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items:start;
  margin-top: 30px;
}
@media (max-width: 900px){
  .checkout-grid{ grid-template-columns: 1fr; gap: 40px; }
  .checkout-summary{ position: static; }
}

.checkout-steps{ display:flex; flex-direction:column; gap: 40px; }
.checkout-step{
  background: var(--card);
  border: 1px solid var(--line);
  padding: 30px 28px;
}
@media (max-width:560px){ .checkout-step{ padding: 22px 18px; } }
.checkout-step h2{
  font-size: 1.15rem;
  display:flex; align-items:center; gap:10px;
  margin-bottom: 22px;
}
.checkout-step h2 .step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width: 26px; height: 26px; border-radius:50%;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-body); font-size:13px; font-weight:700;
  flex-shrink:0;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
@media (max-width: 520px){ .form-grid{ grid-template-columns: 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:7px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{
  font-size: 12.5px; font-weight:700; letter-spacing:.03em; color: var(--ink-soft);
}
.form-field label .req{ color: var(--clay-dark); }
.form-field input, .form-field select, .form-field textarea{
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  font-size: 14.5px;
  color: var(--ink);
  width:100%;
  transition: border-color .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color: var(--brass); outline:none;
}
.form-field textarea{ resize: vertical; min-height: 80px; font-family: inherit; }
.field-error{ font-size:12px; color:var(--clay-dark); display:none; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea{ border-color: var(--clay-dark); }
.form-field.invalid .field-error{ display:block; }

/* Bank transfer card */
.bank-card{
  background:#fff;
  border: 1.5px solid var(--brass);
  border-radius: var(--radius);
  padding: 22px 22px;
  margin-top: 4px;
}
.bank-row{
  display:flex; justify-content:space-between; align-items:center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-strong);
}
.bank-row:last-child{ border-bottom:none; }
.bank-row .k{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); font-weight:700; }
.bank-row .v{ font-family: var(--font-display); font-size:1.05rem; text-align:right; }
.copy-btn{
  background:none; border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:6px 12px; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink); flex-shrink:0; white-space:nowrap;
  transition: all .2s;
}
.copy-btn:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.copy-btn.copied{ background:var(--brass); color:#fff; border-color:var(--brass); }
.bank-note{
  margin-top: 16px; font-size: 13px; color: var(--ink-soft); line-height:1.6;
  display:flex; gap:8px; align-items:flex-start;
}
.bank-note svg{ width:16px; height:16px; color:var(--brass); flex-shrink:0; margin-top:2px; }

.upload-field{
  margin-top: 18px;
}
.upload-field input[type="file"]{
  width:100%; padding: 12px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); background: #fff; font-size: 13px;
}

.confirm-checkbox{
  display:flex; align-items:flex-start; gap:10px;
  margin-top: 20px; font-size: 13.5px; color: var(--ink-soft); line-height:1.5;
}
.confirm-checkbox input{ margin-top:3px; width:16px; height:16px; flex-shrink:0; accent-color: var(--ink); }

/* Order summary panel */
.checkout-summary{
  background: var(--card);
  border: 1px solid var(--line);
  padding: 26px;
  position: sticky;
  top: 100px;
}
.summary-item{
  display:flex; gap:14px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.summary-item img{ width:64px; height:64px; object-fit:contain; background:#fff; border:1px solid var(--line); padding:4px; flex-shrink:0; }
.summary-item .meta{ font-size:12.5px; color:var(--stone); margin-top:3px; }
.summary-item .name{ font-size:14px; font-weight:600; }
.summary-item .price{ margin-left:auto; font-family: var(--font-display); font-size:15px; white-space:nowrap; }

.summary-row{ display:flex; justify-content:space-between; padding:9px 0; font-size:14px; }
.summary-row.total{ font-family:var(--font-display); font-size:1.3rem; border-top:1px solid var(--line-strong); margin-top:8px; padding-top:16px; }
.summary-note{ font-size:12px; color:var(--stone); margin-top: 4px; }

.place-order-btn{ margin-top: 26px; }

/* Confirmation screen */
.order-confirm{
  text-align:center;
  max-width: 560px;
  margin: 40px auto 0;
  padding: 50px 30px;
  background: var(--card);
  border: 1px solid var(--line);
}
.order-confirm .check-icon{
  width:64px; height:64px; border-radius:50%;
  background: var(--ink); color: var(--cream);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 22px;
}
.order-confirm .check-icon svg{ width:30px; height:30px; }
.order-confirm h1{ font-size: 1.7rem; margin-bottom:10px; }
.order-confirm .ref{
  font-family: var(--font-display); font-size:1.1rem; color:var(--brass-dim);
  margin: 6px 0 22px;
}
.order-confirm p{ color: var(--ink-soft); font-size:14.5px; line-height:1.7; }
.order-confirm .confirm-actions{
  display:flex; flex-direction:column; gap:12px; margin-top:30px;
}
.order-confirm .whatsapp-note{
  font-size:12.5px; color:var(--stone); margin-top:18px;
}

.form-error-banner{
  background: rgba(199,125,111,0.12);
  border: 1px solid var(--clay);
  color: var(--clay-dark);
  padding: 14px 18px;
  font-size:13.5px;
  margin-bottom: 22px;
  display:none;
}
.form-error-banner.show{ display:block; }

.spinner{
  display:inline-block; width:16px; height:16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }