/* Trame commune à toutes les fiches produits, y compris les nouvelles fiches CMS.
   La composition commerciale et les photos restent propres à chaque produit. */
body.offer-product-page {
 --product-width:1120px;
 --product-gutter:64px;
 --product-section-space:48px;
}
body.offer-product-page #main .shell {
 width:min(var(--product-width),calc(100% - 64px));
 max-width:var(--product-width);
}
body.offer-product-page #main .shop-breadcrumb {
 margin-inline:auto;
 padding-block:16px;
 gap:7px 12px;
 font-size:14px;
 line-height:1.6;
}
body.offer-product-page #main .offer-detail {
 display:grid;
 grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
 align-items:start;
 gap:32px var(--product-gutter);
 padding-block:24px var(--product-section-space);
}
body.offer-product-page #main :is(.offer-detail-visual,.offer-detail-copy) {
 width:100%;
 min-width:0;
 max-width:none;
 margin:0;
}
body.offer-product-page #main .offer-product-photo {
 width:100%;
 aspect-ratio:1.35;
 padding:16px;
 background:var(--linen);
 overflow:hidden;
}
body.offer-product-page #main .offer-product-photo img {
 display:block;
 width:100%;
 height:100%;
 object-fit:contain;
}
body.offer-product-page #main .offer-gallery-thumbs {
 display:flex;
 flex-wrap:wrap;
 align-items:start;
 gap:12px;
 margin-top:16px;
}
body.offer-product-page #main .offer-gallery-thumbs button {
 flex:0 0 88px;
 width:88px;
 min-width:0;
 height:auto;
 min-height:72px;
 padding:5px;
}
body.offer-product-page #main .offer-gallery-thumbs img {
 display:block;
 width:100%;
 height:60px;
 aspect-ratio:auto;
 object-fit:contain;
}
body.offer-product-page #main .offer-gallery-thumbs span {
 display:block;
 margin-top:5px;
 font:400 12px/1.4 var(--font-accent);
 overflow-wrap:anywhere;
}
body.offer-product-page #main .offer-detail-copy h1 {
 margin:0;
 font-size:clamp(30px,3vw,40px);
 line-height:1.15;
 letter-spacing:-.04em;
 white-space:normal;
 overflow-wrap:break-word;
}
body.offer-product-page #main .offer-title-format {
 display:block;
 margin-top:16px;
 font:400 16px/1.6 var(--font-accent);
 letter-spacing:normal;
}
body.offer-product-page #main .offer-detail-copy>p {
 max-width:none;
 margin-top:20px;
}
body.offer-product-page #main .sweet-purchase {
 margin-top:24px;
 border:0;
 padding-top:0;
}
body.offer-product-page #main .sweet-purchase .offer-detail-price {
 margin:0 0 4px;
 font:400 28px/1.4 var(--font-accent);
}
body.offer-product-page #main .sweet-purchase .sweet-purchase-format {
 margin:0 0 24px;
 font-size:14px;
 line-height:1.65;
}
body.offer-product-page #main :is(.offer-composition,.offer-guide,.offer-practical,.offer-alternative) {
 padding-block:var(--product-section-space);
}
body.offer-product-page #main :is(.tasting-layout,.offer-practical) {
 gap:40px var(--product-gutter);
}
body.offer-product-page #main .offers-heading {
 margin-bottom:28px;
}
body.offer-product-page #main :is(.offers-heading,.tasting-heading,.offer-practical,.offer-alternative)>h2,
body.offer-product-page #main .offers-heading h2,
body.offer-product-page #main .sweet-recipe-story h2#recipe-title {
 font-size:clamp(30px,3vw,40px);
 line-height:1.15;
}
@media(min-width:761px) and (max-width:1100px) {
 body.offer-product-page {--product-gutter:32px}
}
@media(max-width:760px) {
 body.offer-product-page {--product-gutter:28px;--product-section-space:32px}
 body.offer-product-page #main .shell {
  width:calc(100% - 32px);
  max-width:var(--product-width);
 }
 body.offer-product-page #main .shop-breadcrumb {
  padding-block:14px;
  gap:5px 8px;
  font-size:13px;
 }
 body.offer-product-page #main .offer-detail {
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  padding-block:16px var(--product-section-space);
 }
 body.offer-product-page #main .offer-product-photo {padding:12px}
 body.offer-product-page #main .offer-gallery-thumbs {gap:10px;margin-top:14px}
 body.offer-product-page #main .offer-gallery-thumbs button {flex-basis:72px;width:72px}
 body.offer-product-page #main .offer-gallery-thumbs img {height:52px}
 body.offer-product-page #main .offer-detail-copy h1 {font-size:clamp(28px,8vw,38px)}
 body.offer-product-page #main :is(.tasting-layout,.offer-practical) {
  grid-template-columns:minmax(0,1fr);
  gap:28px;
 }
 body.offer-product-page #main .offers-heading {margin-bottom:24px}
}