/* =========================================================
   WallpaperStudio — Product detail page
   (builds on home.css tokens and components)
   ========================================================= */

/* Product page theme: GP blue for UI, red for prices and buy actions.
   This file only loads on product.html, so the overrides stay page-scoped. */
:root{
  --bg: #f5f8fc;
  --bg-warm: #eef3fa;
  --text: #1f2a3a;
  --text-muted: #5f6b7c;
  --heading: #0f1d33;
  --accent: #1a5fd0;
  --accent-dark: #134aa6;
  --accent-soft: #e8f0fd;
  --border: #e1e8f2;
  --sale: #e53935;
  --sale-dark: #c62828;
  --sale-soft: #fdecec;
  --shadow-sm: 0 4px 14px rgba(20,45,90,.06);
  --shadow: 0 14px 34px rgba(20,45,90,.10);
}

.pdp-page{
  background:
    radial-gradient(900px 600px at 0% 30%, rgba(26,95,208,.06), transparent 70%),
    radial-gradient(700px 500px at 100% 0%, rgba(26,95,208,.05), transparent 70%),
    var(--bg);
}
.gallery__deco,
.related__deco{ color:#9fb6d9; }
.scroll-top{ box-shadow:0 10px 24px rgba(26,95,208,.35); }
.footer{ background:#fff; }

/* ---------- Breadcrumb bar ---------- */
.crumbs-bar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font-size:.8rem; color:var(--text-muted); }
.crumbs a{ display:inline-flex; transition:color var(--ease); }
.crumbs a:hover{ color:var(--accent); }
.crumbs svg{ width:17px; height:17px; color:var(--text); }
.crumbs__sep{ width:6px; height:6px; border-right:1.5px solid #a9b4c4; border-top:1.5px solid #a9b4c4; transform:rotate(45deg); }
.crumbs__current{ color:var(--accent); font-weight:500; }
.back-btn{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  padding:8px 16px; border-radius:var(--radius-sm);
  background:var(--accent-soft); color:var(--accent); border:1px solid #c9daf5;
  font-weight:600; font-size:.8rem;
  transition:background var(--ease), color var(--ease);
}
.back-btn svg{ width:16px; height:16px; }
.back-btn:hover{ background:var(--accent); color:#fff; }

.pdp-missing{ padding:96px 32px; text-align:center; }
.pdp-missing h1{ font-size:2rem; margin-bottom:12px; }
.pdp-missing p{ color:var(--text-muted); margin-bottom:24px; }

/* ---------- Layout ---------- */
.pdp__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:20px; padding-top:8px; padding-bottom:40px; align-items:start; }

/* ---------- Gallery ---------- */
.gallery__sticky{ position:sticky; top:96px; }
.gallery__frame{ position:relative; }
.gallery__main{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius); background:#e3e9f1;
  box-shadow:var(--shadow-sm);
}
.gallery__main > img,
.gallery__main > .detail-view,
.gallery__main > svg{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery__main:fullscreen{ border-radius:0; background:#111; }
.gallery__main:fullscreen > img{ object-fit:contain; }
.detail-view{ background-size:260%; background-position:center; }
.zoomable{ transition:transform .3s ease; cursor:zoom-in; }
.zoomable.is-zoomed{ transform:scale(1.8); }
.room-svg--tour{ animation:tour 14s ease-in-out infinite alternate; transform-origin:center; }
@keyframes tour{ from{ transform:scale(1.25) translateX(8%); } to{ transform:scale(1.25) translateX(-8%); } }
@media (prefers-reduced-motion: reduce){ .room-svg--tour{ animation:none; } }

.gallery__flag{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:6px;
  background:rgba(31,29,26,.88); color:#fff; font-size:.74rem; font-weight:600;
  pointer-events:none;
}
.gallery__flag svg{ width:16px; height:16px; }
.gallery__flag[hidden]{ display:none; }
.gallery__btn{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:#fff; color:var(--text); box-shadow:0 4px 14px rgba(0,0,0,.15);
  transition:background var(--ease), color var(--ease);
}
.gallery__btn svg{ width:18px; height:18px; }
.gallery__btn:hover{ background:var(--accent); color:#fff; }
.gallery__btn--full{ top:14px; right:14px; width:36px; height:36px; }
.gallery__btn--prev,
.gallery__btn--next{ top:50%; transform:translateY(-50%); }
.gallery__btn--prev{ left:14px; }
.gallery__btn--next{ right:14px; }

.gallery__thumbs{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; margin-top:12px; }
.thumb{
  position:relative; aspect-ratio:1; padding:3px;
  border:2px solid transparent; border-radius:var(--radius-sm); background:#fff;
  overflow:hidden; transition:border-color var(--ease);
}
.thumb:hover{ border-color:#a9c4ef; }
.thumb.is-active{ border-color:var(--accent); }
.thumb > img,
.thumb__detail,
.thumb__room{ display:block; width:100%; height:100%; object-fit:cover; border-radius:5px; overflow:hidden; }
.thumb__detail{ background-size:300%; background-position:center; }
.thumb__room svg{ width:100%; height:100%; display:block; }
.thumb__room--dim{ filter:brightness(.8); }
.thumb__play{
  position:absolute; inset:0; margin:auto; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.9); color:var(--text);
}
.thumb__play svg{ width:16px; height:16px; margin-left:2px; }
.thumb--upload{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--accent-soft); border:1.5px dashed #b9cff2; color:var(--text); cursor:pointer;
  font-size:.76rem; font-weight:600; text-align:center; line-height:1.25;
}
.thumb--upload small{ font-weight:400; font-size:.72rem; }
.thumb--upload svg{ width:26px; height:26px; color:var(--text); }
.thumb--upload:hover{ border-color:var(--accent); background:#d6e4fa; }
.thumb--upload:focus-within{ outline:2px solid var(--accent); outline-offset:3px; }

/* Action cards */
.gallery__actions{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.action-card{
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:14px 20px; border-radius:var(--radius-sm);
  transition:background var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.action-card strong{ display:block; font-size:.95rem; font-weight:600; line-height:1.3; }
.action-card small{ display:block; font-size:.74rem; opacity:.85; }
.action-card > svg{ width:34px; height:34px; }
.action-card--whatsapp{ background:#22b153; color:#fff; box-shadow:0 8px 18px rgba(34,177,83,.25); }
.action-card--whatsapp:hover{ background:#1c9a48; }
.action-card--wall{ background:#fff; border:1px solid var(--border); color:var(--text); box-shadow:var(--shadow-sm); }
.action-card--wall:hover{ border-color:var(--accent); }
.action-card__icon{ display:grid; place-items:center; width:38px; height:38px; border-radius:8px; border:1.5px solid var(--accent); color:var(--accent); }
.action-card__icon svg{ width:22px; height:22px; }

/* Perks */
.perks{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:22px; padding:16px 6px; background:rgba(255,255,255,.55); border-radius:var(--radius-sm); }
.perks li{ display:flex; align-items:center; gap:10px; padding:0 10px; border-right:1px solid var(--border); font-size:.74rem; line-height:1.35; color:var(--text-muted); }
.perks li:last-child{ border-right:0; }
.perks strong{ display:block; font-size:.82rem; font-weight:500; color:var(--text); }
.perks__icon{ display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.perks__icon svg{ width:18px; height:18px; }

.gallery__deco{ display:block; width:200px; height:300px; margin:36px 0 0 -40px; color:#a9b49a; opacity:.7; pointer-events:none; }

/* ---------- Buy box ---------- */
.buybox-col{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.buybox{ background:#fff; border-radius:var(--radius); box-shadow:0 4px 18px rgba(20,45,90,.06); border:1px solid #e6edf7; }
.buybox__sec{ padding:18px 20px; border-top:1px solid var(--border); }
.buybox__sec:first-child{ border-top:0; }
.buybox h2{ font-family:var(--font-body); font-size:.98rem; font-weight:600; color:var(--heading); display:flex; align-items:center; gap:8px; }
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sec-head__light{ font-weight:500; }

.buybox__tools{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.tool-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border:1.5px solid #b9cff2; border-radius:6px;
  color:var(--accent); font-size:.76rem; font-weight:500; background:#fff;
  transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.tool-btn svg{ width:15px; height:15px; }
.tool-btn:hover{ background:var(--accent-soft); border-color:var(--accent); }
.tool-btn.is-active svg{ fill:currentColor; }

.pdp__title{ font-family:var(--font-body); font-size:1.45rem; font-weight:600; line-height:1.3; margin-bottom:4px; }
.pdp__sub{ margin:0 0 6px; font-size:.82rem; color:var(--text-muted); }
.pdp__rating{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-muted); margin-bottom:6px; }
.pdp__rating .stars{ font-size:1rem; }
.pdp__price{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-bottom:10px; }
.pdp__price s{ color:var(--text-muted); font-size:.95rem; }
.pdp__price strong{ color:var(--accent); font-size:1.5rem; font-weight:700; }
.off-badge{ padding:4px 12px; border-radius:6px; background:var(--accent); color:#fff; font-size:.76rem; font-weight:600; }
.off-badge:empty{ display:none; }
.pdp__delivery{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.84rem; font-weight:500; }
.pdp__delivery > svg{ width:22px; height:22px; color:var(--text); }
.pdp__delivery strong{ color:var(--accent); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.link-btn{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-weight:500; padding:0; }
.link-btn:hover{ color:var(--accent-dark); }
.link-btn--sm{ font-size:.74rem; }
.link-btn--chev::after{ content:"›"; display:inline-block; margin-left:10px; font-size:1.2rem; line-height:1; color:var(--text); text-decoration:none; }
.pin-form{ display:inline-flex; gap:6px; }
.pin-form[hidden]{ display:none; }
.pin-form input{ width:96px; padding:4px 10px; border:1.5px solid var(--border); border-radius:6px; font:inherit; font-size:.85rem; }
.pin-form input:focus{ outline:none; border-color:var(--accent); }
.pin-form button{ padding:4px 12px; border-radius:6px; background:var(--accent); color:#fff; font-size:.8rem; font-weight:600; }
.pin-error{ margin:6px 0 0; font-size:.78rem; color:#c0392b; }
.pin-error:empty{ display:none; }

/* Tooltip */
.hint{
  position:relative; display:inline-grid; place-items:center;
  width:16px; height:16px; border-radius:50%;
  background:#6e655d; color:#fff; font-size:.66rem; font-weight:700; font-family:var(--font-body); font-style:normal;
  cursor:help; vertical-align:middle;
}
.hint--info{ font-family:Georgia, serif; }
.hint::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:230px; padding:9px 12px; border-radius:8px;
  background:var(--dark); color:#fff; font-family:var(--font-body); font-size:.75rem; font-weight:400; line-height:1.45; text-align:left;
  opacity:0; visibility:hidden; transition:opacity var(--ease); z-index:20; pointer-events:none;
}
.hint:hover::after,
.hint:focus::after{ opacity:1; visibility:visible; }

/* Materials */
.materials{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.material{
  position:relative; display:flex; flex-direction:column; text-align:center;
  padding:5px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:#fff;
  transition:border-color var(--ease), box-shadow var(--ease);
}
.material:hover{ border-color:#a9c4ef; }
.material.is-active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.material__swatch{ position:relative; display:block; aspect-ratio:1/0.85; border-radius:5px; overflow:hidden; }
.material__swatch--quickfix{ background:linear-gradient(150deg, #fafafa 0 45%, #e6e6e6 45% 60%, #f4f4f4 60%); box-shadow:inset 0 0 0 1px #eee; }
.material__swatch--nonwoven{ background:repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 4px), #f1f1f1; }
.material__swatch--peel{ background:repeating-linear-gradient(45deg, #ececec 0 2px, #d8d8d8 2px 4px); }
.material__swatch--canvas{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    #ececea;
}
.material__check{
  position:absolute; top:5px; right:5px; display:none; place-items:center;
  width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff;
}
.material__check svg{ width:12px; height:12px; }
.material.is-active .material__check{ display:grid; }
.material__new{ position:absolute; top:5px; left:5px; padding:1px 6px; border-radius:4px; background:#2d6cdf; color:#fff; font-size:.56rem; font-weight:700; text-transform:uppercase; }
.material__name{ padding:6px 2px 0; font-size:.72rem; font-weight:500; line-height:1.3; min-height:2.9em; display:grid; place-items:center; }
.material__add{ font-size:.7rem; color:var(--text-muted); padding-bottom:3px; }
.material.is-active .material__add{ color:var(--accent); }
.materials__note{ margin:10px 0 0; font-size:.76rem; color:var(--text-muted); }

.compare{ margin-top:12px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow-x:auto; }
.compare[hidden]{ display:none; }
.compare table{ width:100%; border-collapse:collapse; font-size:.74rem; }
.compare th,
.compare td{ padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.compare th{ background:#f4f7fc; font-weight:600; }
.compare tr:last-child td{ border-bottom:0; }

/* Size */
.size-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-bottom:12px; }
.size-field{ min-width:0; display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:500; }
.size-input{ display:flex; align-items:stretch; height:38px; border:1.5px solid var(--border); border-radius:6px; overflow:hidden; background:#fff; transition:border-color var(--ease); }
.size-input:focus-within{ border-color:var(--accent); }
.size-input__icon{ display:grid; place-items:center; width:30px; color:var(--text-muted); font-size:.95rem; }
.size-input input{ flex:1; width:100%; min-width:0; border:0; outline:0; padding:0 6px; font:inherit; font-size:.86rem; color:var(--text); -moz-appearance:textfield; }
.size-input input::-webkit-outer-spin-button,
.size-input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.step-btn,
.unit-btn{ width:34px; background:#6f665e; color:#fff; font-size:.95rem; font-weight:600; transition:background var(--ease); }
.unit-btn{ font-size:.74rem; }
.step-btn:hover,
.unit-btn:hover{ background:var(--accent); }
.size-meta{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; font-size:.8rem; }
.size-meta p{ margin:0; display:flex; align-items:center; gap:6px; }
.size-meta p:last-child{ color:var(--text-muted); }
.size-meta strong{ color:var(--accent); font-weight:600; }
.kit-banner{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 14px; border-radius:6px; background:var(--accent-soft);
  color:var(--accent); font-size:.76rem; text-align:left;
  transition:background var(--ease);
}
.kit-banner svg{ width:18px; height:18px; }
.kit-banner strong{ font-weight:600; }
.kit-banner:hover{ background:#d6e4fa; }
.kit-list{ margin:10px 0 0; padding-left:18px; list-style:disc; font-size:.78rem; color:var(--text-muted); }

/* Total + CTAs */
.final-total{ margin:6px 0 2px; font-size:1.75rem; font-weight:700; color:var(--accent); line-height:1.3; }
.final-break{ margin:0 0 16px; font-size:.72rem; color:var(--text-muted); }

.buybox__cta{ display:grid; grid-template-columns:auto 1fr 1fr; gap:10px; align-items:stretch; }
.qty{ display:flex; align-items:center; border:1.5px solid var(--border); border-radius:6px; overflow:hidden; }
.qty button{ width:34px; height:100%; font-size:1.1rem; transition:color var(--ease), background var(--ease); }
.qty button:hover{ background:var(--accent-soft); color:var(--accent); }
.qty input{ width:36px; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border); text-align:center; font:inherit; font-size:.86rem; height:100%; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty input:focus{ outline:none; background:#f6f9ff; }
.cta-btn{ justify-content:center; gap:8px; padding:12px 14px; border-radius:6px; font-size:.82rem; font-weight:600; }
.cta-btn svg{ width:20px; height:20px; }
.cta-btn:hover svg{ transform:none; }
.cta-btn--outline{ border-color:var(--accent); color:var(--accent); background:#fff; }
.cta-btn--outline:hover{ background:var(--accent-soft); }
.cta-btn--outline.is-added{ background:var(--accent); color:#fff; }
.cta-btn--solid{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(229,57,53,.25); }
.cta-btn--solid:hover{ background:var(--accent-dark); }
.cta-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; }
.cta-hint{ margin:0; font-size:.72rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.cta-hint.is-error{ color:#c0392b; font-weight:500; }

/* Badges */
.badges{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:18px 6px; }
.badges li{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:.6rem; font-weight:500; text-transform:uppercase; letter-spacing:.03em; color:var(--text); line-height:1.3; }
.badge__icon{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1.5px solid var(--text); color:var(--text); background:#fff; }
.badge__icon svg{ width:24px; height:24px; }

/* Meta */
.meta{ padding:14px 20px; background:#fff; border-radius:var(--radius); border:1px solid #e6edf7; }
.meta p{ margin:0 0 2px; font-size:.78rem; color:var(--text-muted); }
.meta a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.meta a:hover{ color:var(--accent); }

/* ---------- Payments ---------- */
.payments{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:10px 0 40px; }
.pay-group{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:0; flex:1 1 auto;
  padding:6px 12px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff;
}
.pay-group legend{ padding:0 8px; margin:0 auto; font-size:.76rem; color:var(--text); }
.pay-logo{
  display:inline-flex; align-items:center; gap:6px; height:32px;
  padding:0 12px; border:1px solid var(--border); border-radius:5px; background:#fff;
  font-size:.72rem; font-weight:600; color:var(--text);
}
.pay-logo svg{ width:16px; height:16px; }
.pay-logo--upi{ font-style:italic; font-weight:800; font-size:.9rem; letter-spacing:-.02em; }
.pay-group--brands{ gap:18px; }
.brand{ display:inline-flex; align-items:center; height:32px; font-weight:800; font-style:italic; }
.brand--visa{ color:#1a1f71; font-size:1rem; letter-spacing:.02em; }
.brand--mc i{ width:22px; height:22px; border-radius:50%; background:#eb001b; }
.brand--mc i + i{ margin-left:-9px; background:#f79e1b; mix-blend-mode:multiply; }
.brand--rupay{ color:#1d3b8f; font-size:.92rem; }
.brand--rupay b{ color:#f37021; margin-left:1px; }

/* ---------- Tabs ---------- */
.pdp-tabs{ padding:28px 0 56px; border-top:1px solid var(--border); }
.pdp-tabs__list{ display:grid; grid-template-columns:repeat(5, 1fr); border:1px solid var(--border); margin-bottom:28px; background:#f3f6fb; }
.pdp-tabs__list button{
  padding:11px 10px; font-size:.82rem; color:var(--text);
  border-right:1px solid var(--border); transition:background var(--ease), color var(--ease);
}
.pdp-tabs__list button:last-child{ border-right:0; }
.pdp-tabs__list button:hover{ color:var(--accent); }
.pdp-tabs__list button.is-active{ background:var(--accent); color:#fff; font-weight:500; }

.guides{ display:grid; grid-template-columns:repeat(3, 1fr); }
.guide{ padding:4px 30px; text-align:center; border-right:1px solid var(--border); }
.guide:last-child{ border-right:0; }
.guide h3{ font-family:var(--font-body); font-size:1rem; font-weight:600; color:var(--accent); margin-bottom:14px; }
.guide__art{ width:180px; height:108px; margin:0 auto 18px; display:block; }
.guide p{ color:var(--text-muted); font-size:.82rem; line-height:1.75; max-width:340px; margin-left:auto; margin-right:auto; }
.btn--ghost-accent{ border-color:var(--accent); color:var(--accent); border-radius:4px; padding:8px 16px; font-size:.78rem; font-weight:600; background:#fff; }
.btn--ghost-accent:hover{ background:var(--accent); color:#fff; }
.guide__steps{ text-align:left; margin:18px 0 0; padding-left:20px; font-size:.82rem; color:var(--text); }
.guide__steps li{ margin-bottom:6px; }

.info-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; }
.info-grid h3,
.info-cols h3{ font-family:var(--font-body); font-size:1rem; font-weight:600; margin-bottom:10px; }
.info-grid p,
.info-cols p{ color:var(--text-muted); font-size:.9rem; }
.spec-table{ margin:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
.spec-table div{ display:grid; grid-template-columns:150px 1fr; border-bottom:1px solid var(--border); }
.spec-table div:last-child{ border-bottom:0; }
.spec-table dt{ padding:10px 14px; background:#f4f7fc; font-size:.82rem; color:var(--text-muted); }
.spec-table dd{ margin:0; padding:10px 14px; font-size:.86rem; }
.info-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:28px; }

/* Reviews */
.reviews{ display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:center; max-width:820px; margin:0 auto; }
.reviews__summary{ text-align:center; }
.reviews__summary p{ margin:0; }
.reviews__score{ font-family:var(--font-heading); font-size:3rem; font-weight:700; color:var(--heading); line-height:1.1; }
.reviews__summary .stars{ font-size:1.2rem; }
.reviews__count{ font-size:.82rem; color:var(--text-muted); margin-bottom:16px !important; }
.reviews__bars li{ display:grid; grid-template-columns:44px 1fr 48px; align-items:center; gap:12px; font-size:.8rem; color:var(--text-muted); margin-bottom:10px; }
.reviews__bar{ height:8px; border-radius:8px; background:#e6edf7; overflow:hidden; }
.reviews__bar span{ display:block; height:100%; background:#f0a52b; border-radius:8px; }

/* ---------- Related ---------- */
.related{ padding:56px 0 72px; background:var(--bg-warm); overflow:hidden; }
.related .container{ position:relative; }
.related__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; }
.related__head .section-head{ margin:0; }
.related__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4 * 18px) / 5); gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 12px;
}
.related__track::-webkit-scrollbar{ display:none; }
.related__track .product-card{ scroll-snap-align:start; }
.related__deco{ position:absolute; right:-30px; bottom:-20px; width:180px; height:270px; color:#a9b49a; opacity:.55; transform:scaleX(-1); pointer-events:none; }

/* ---------- Visualizer ---------- */
.viz{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.viz[hidden]{ display:none; }
.viz__overlay{ position:absolute; inset:0; background:rgba(31,27,24,.65); }
.viz__dialog{
  position:relative; width:100%; max-width:860px; max-height:calc(100vh - 40px); overflow-y:auto;
  background:#fff; border-radius:var(--radius); padding:20px 22px 18px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.viz__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.viz__head h2{ font-size:1.4rem; }
.viz__close{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); }
.viz__close svg{ width:18px; height:18px; }
.viz__close:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.viz__stage{ position:relative; display:grid; place-items:center; min-height:240px; border-radius:var(--radius-sm); overflow:hidden; background:#efe9e2; }
.viz__frame{ position:relative; line-height:0; }
.viz__frame canvas{ position:relative; display:block; max-width:100%; max-height:60vh; width:auto; height:auto; }
.viz__frame canvas.is-ready{ cursor:pointer; }
.viz__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.viz__split-line{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 6px rgba(0,0,0,.4); pointer-events:none; }
.viz__split-line::before,
.viz__split-line::after{ position:absolute; top:10px; padding:2px 8px; border-radius:4px; background:rgba(31,29,26,.75); color:#fff; font-size:.68rem; line-height:1.6; }
.viz__split-line::before{ content:"Before"; right:8px; }
.viz__split-line::after{ content:"After"; left:8px; }
.viz__split-line[hidden]{ display:none; }
.viz__status{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px);
  padding:10px 16px; border-radius:50px; background:rgba(31,29,26,.85); color:#fff;
  font-size:.82rem; line-height:1.4;
}
.viz__status[hidden]{ display:none; }
.viz__spinner{ display:none; width:16px; height:16px; flex-shrink:0; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite; }
.viz__status.is-busy .viz__spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.viz__controls{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:16px; }
.viz__upload{ cursor:pointer; border-radius:var(--radius-sm); box-shadow:none; padding:11px 20px; }
.viz__upload:focus-within{ outline:2px solid var(--accent); outline-offset:3px; }
.viz__range{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-muted); }
.viz__range input{ accent-color:var(--accent); width:110px; }
.viz__range input:disabled{ opacity:.4; }
.viz__dl{ margin-left:auto; border-radius:var(--radius-sm); padding:10px 18px; }
.viz__dl:disabled{ opacity:.45; pointer-events:none; }
.viz__dl:hover svg{ transform:none; }
.viz__note{ margin:12px 0 0; font-size:.78rem; color:var(--text-muted); }
.viz__note--small{ margin-top:4px; font-size:.72rem; opacity:.85; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:300; transform:translate(-50%, 20px);
  max-width:calc(100% - 32px); padding:12px 20px; border-radius:50px;
  background:var(--dark); color:#fff; font-size:.85rem; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.toast.is-visible{ opacity:1; visibility:visible; transform:translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .related__track{ grid-auto-columns:calc((100% - 3 * 18px) / 4); }
  .perks{ grid-template-columns:repeat(2, 1fr); gap:14px 0; }
  .perks li:nth-child(2){ border-right:0; }
}
@media (max-width: 900px){
  .pdp__grid{ grid-template-columns:minmax(0,1fr); }
  .gallery__sticky{ position:static; }
  .gallery__deco{ display:none; }
  .perks{ grid-template-columns:repeat(4, 1fr); gap:0; }
  .perks li:nth-child(2){ border-right:1px solid var(--border); }
  .guides{ grid-template-columns:1fr; gap:36px; }
  .guide{ border-right:0; padding:0; }
  .info-grid{ grid-template-columns:1fr; gap:24px; }
  .pdp-tabs__list{ display:flex; overflow-x:auto; scrollbar-width:none; }
  .pdp-tabs__list::-webkit-scrollbar{ display:none; }
  .pdp-tabs__list button{ flex:1 0 auto; white-space:nowrap; padding:11px 16px; }
  .reviews{ grid-template-columns:1fr; gap:24px; }
  .related__track{ grid-auto-columns:calc((100% - 2 * 18px) / 3); }
}
@media (max-width: 760px){
  .crumbs-bar__inner{ min-height:56px; padding-top:8px; padding-bottom:8px; }
  .crumbs{ font-size:.74rem; gap:6px 8px; }
  .back-btn{ padding:6px 10px; font-size:.74rem; }
  .gallery__thumbs{ gap:6px; }
  .thumb--upload{ font-size:.62rem; }
  .thumb--upload small{ font-size:.6rem; }
  .thumb--upload svg{ width:20px; height:20px; }
  .thumb__play{ width:28px; height:28px; }
  .gallery__btn--prev,
  .gallery__btn--next{ width:34px; height:34px; }
  .gallery__actions{ grid-template-columns:1fr; }
  .perks{ grid-template-columns:repeat(2, 1fr); gap:14px 0; }
  .perks li:nth-child(2){ border-right:0; }
  .buybox__sec{ padding:16px; }
  .materials{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .size-fields{ grid-template-columns:1fr; }
  .buybox__cta{ grid-template-columns:1fr 1fr; }
  .qty{ grid-column:1 / -1; justify-self:start; height:42px; }
  .cta-foot{ flex-direction:column; align-items:flex-start; gap:4px; }
  .badges{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px 4px; }
  .badge__icon{ width:44px; height:44px; }
  .badge__icon svg{ width:22px; height:22px; }
  .pay-group{ flex:1 1 100%; }
  .spec-table div{ grid-template-columns:110px 1fr; }
  .hint::after{ width:190px; left:auto; right:-8px; transform:none; }
  .related__head{ align-items:center; }
  .related__track{ grid-auto-columns:calc((100% - 12px) / 2); gap:12px; }
  .viz__range input{ width:100px; }
}

/* =========================================================
   Reference styling: red prices / buy actions, numbered guides
   ========================================================= */
.crumbs__current{ color:var(--sale); }
.back-btn{ background:#fff; color:var(--sale); border-color:#f6c6c4; box-shadow:var(--shadow-sm); }
.back-btn:hover{ background:var(--sale); color:#fff; border-color:var(--sale); }

.gallery__flag{ background:var(--accent); }
.thumb--upload{ background:#fff; border-color:#9dbcf0; color:var(--heading); }
.thumb--upload svg{ color:var(--accent); }

.tool-btn{ color:var(--text); border-color:var(--border); }
.tool-btn:hover{ color:var(--accent); }
.tool-btn#wishBtn.is-active{ color:var(--sale); border-color:#f6c6c4; background:var(--sale-soft); }

.pdp__title{ font-size:1.55rem; font-weight:700; color:var(--heading); }
.pdp__price strong,
.final-total,
.size-meta strong{ color:var(--sale); }
.pdp__price strong{ font-size:1.65rem; }
.off-badge{ background:var(--sale); }
.pdp__delivery strong,
.pdp__delivery .link-btn{ color:var(--sale); }

.kit-banner{ background:var(--sale-soft); color:var(--sale); border:1px solid #f9d4d2; }
.kit-banner:hover{ background:#fbdcdb; }

.cta-btn--solid{ background:var(--sale); }
.cta-btn--solid:hover{ background:var(--sale-dark); }

.badge__icon{ border-color:var(--heading); }

/* Tabs */
.pdp-tabs{ border-top:0; }
.pdp-tabs__list{ border-radius:var(--radius-sm); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
.pdp-tabs__list button.is-active{ border-radius:var(--radius-sm); font-weight:600; }

/* Guides */
.guide{ text-align:left; }
.guide h3{ display:flex; align-items:center; gap:12px; font-size:1.02rem; color:var(--accent); }
.guide__num{
  display:grid; place-items:center; flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--accent); color:var(--accent);
  font-size:1rem; font-weight:700;
}
.guide__art{ background:var(--accent-soft); border-radius:var(--radius-sm); padding:6px; }
.guide p{ text-align:center; }
.guide .btn--ghost-accent{ display:flex; width:max-content; margin:0 auto; }
.guide__steps{ color:var(--text-muted); line-height:1.6; }
.guide__steps li::marker{ color:var(--text); }

/* Related */
.related{ background:transparent; }
.related .eyebrow{ color:var(--sale); }
.related .price{ color:var(--sale); }
.arrows{ align-items:center; }
.view-all{ display:inline-flex; align-items:center; gap:6px; margin-right:10px; font-size:.84rem; font-weight:600; color:var(--sale); }
.view-all svg{ width:16px; height:16px; transition:transform var(--ease); }
.view-all:hover svg{ transform:translateX(3px); }
@media (max-width: 760px){
  .view-all{ font-size:.78rem; margin-right:4px; }
}
.related .section-head h2{ font-family:var(--font-body); font-weight:700; }
.related .add-cart{ background:var(--sale-soft); color:var(--sale); }
.related .add-cart:hover,
.related .add-cart.is-added{ background:var(--sale); color:#fff; }