/* product-page.css — page d'un produit (product.php). Se charge après style.css et boost.css. */

.p-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);padding:22px 0 14px;
}
.p-breadcrumb a{color:var(--muted);text-decoration:none;}
.p-breadcrumb a:hover{color:var(--ink);text-decoration:underline;}

.p-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;align-items:start;padding-bottom:36px;
}

.p-media{
  position:relative;aspect-ratio:1/1;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.p-media img{width:100%;height:100%;object-fit:contain;display:block;}
.p-media.p-media-empty::after{content:"📦";font-size:72px;}

.p-info{display:flex;flex-direction:column;gap:12px;min-width:0;}
.p-cat{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.p-name{font-size:28px;line-height:1.2;margin:0;overflow-wrap:anywhere;}

.p-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;}
.p-price{font-size:26px;font-weight:700;}
.p-old{font-size:16px;color:var(--muted);text-decoration:line-through;}

.p-desc p{margin:0 0 12px;line-height:1.6;font-size:15px;}

.p-add{margin-top:4px;}
.p-note{font-size:12.5px;color:var(--muted);margin:0;}
.p-back{
  align-self:flex-start;font-size:14px;color:var(--muted);
  text-decoration:underline;margin-top:4px;
}
.p-back:hover{color:var(--ink);}

.p-related{padding:8px 0 48px;}
.p-related h2{font-size:20px;margin:0 0 14px;}
.p-related ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;
}
.p-related a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--white);color:var(--ink);text-decoration:none;font-size:14px;
}
.p-related a:hover{border-color:var(--ink);}
.p-related-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.p-related-price{flex-shrink:0;color:var(--muted);font-weight:600;}

@media (max-width:760px){
  .p-layout{grid-template-columns:1fr;gap:18px;}
  .p-name{font-size:23px;}
}