.wm-wrapper {
background:#fffbf0;
color:#5B4B3C;
font-family:"Alegreya SC", Georgia, serif;
padding:30px 6% 50px;
text-align:center;
}
.wm-breadcrumb {
font-size:11px;
text-transform:uppercase;
letter-spacing:0.3px;
color:#B29760;
margin-bottom:30px;
}
.wm-breadcrumb a { color:#B29760; text-decoration:underline; }
.wm-title {
font-size:26px !important;
color:#B29760;
font-weight:400;
line-height:1.15;
margin:0 0 10px;
}
.wm-domain-row {
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:28px;
flex-wrap:wrap;
}
.wm-domain {
font-size:17px !important;
color:#402E15;
font-family:"Alegreya SC", Georgia, serif;
letter-spacing:0.3px;
}
.wm-year {
display:inline-flex;
align-items:center;
justify-content:center;
border:2px solid #B29760;
box-shadow: inset 0 0 0 2px #fffbf0, inset 0 0 0 3px #B29760;
padding:4px 8px;
font-size:15px;
color:#111;
}
.wm-image {
position:relative;
padding:15px;
max-width:220px;
margin:0 auto 26px;
display:flex;
align-items:center;
justify-content:center;
}
.wm-image::before {
content:"";
position:absolute; inset:0;
border:2px solid #B29760;
}
.wm-image::after {
content:"";
position:absolute; top:5px; left:5px; right:5px; bottom:5px;
border:1px solid #B29760;
}
.wm-image img {
position:relative; z-index:2;
max-width:100%; max-height:220px;
object-fit:contain;
}
.wm-badges {
display:flex; flex-wrap:wrap; justify-content:center;
gap:8px; margin-bottom:24px;
}
.wm-badge {
border:1px solid #B29760; color:#B29760; border-radius:999px;
padding:6px 14px; font-size:12px; text-transform:uppercase;
}
.wm-price-row {
display:flex; align-items:center; justify-content:center;
flex-wrap:wrap; gap:10px; margin-bottom:14px;
}
.wm-contenance {
background:#B29760; color:#fff; font-size:10px;
padding:5px 9px; text-transform:uppercase;
}
.wm-price { color:#B29760 !important; font-size:26px !important; }
.wm-price-liter { color:#B29760; font-size:12px; }
.wm-qty-stepper {
display:inline-flex; align-items:center; justify-content:center;
border:1px solid #B29760; height:36px; padding:0 6px; gap:4px;
color:#B29760; flex-shrink:0;
}
.wm-qty-btn { background:none !important;border:none !important;color:#B29760 !important;font-size:16px;cursor:pointer; font-family:"Alegreya SC",serif; box-shadow:none !important; }
.wm-qty-btn:hover, .wm-qty-btn:focus, .wm-qty-btn:active { background:none !important; color:#B29760 !important; }
.wm-qty-value { font-size:14px; color:#B29760; text-align:center; }
.wm-buy-row { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; align-items:center;}
.wm-button {
height:36px; border:1px solid #B29760 !important; background:transparent !important; color:#B29760 !important;
text-transform:uppercase; font-size:11px !important; letter-spacing:0.06em; padding:0 14px;
font-family:"Alegreya SC",serif; width:100%; max-width:320px;
box-shadow:none !important; border-radius:0 !important;
}
.wm-button:hover, .wm-button:focus, .wm-button:active {
background:transparent !important; color:#B29760 !important; border-color:#B29760 !important;
}
.wm-button-select { height:36px !important; width:auto !important; flex:1 1 auto !important; min-width:0 !important; white-space:nowrap !important; font-size:10px !important; letter-spacing:0 !important; padding:0 6px !important; }
.wm-button-carton { width:70% !important; max-width:180px !important; height:25px !important; font-size:10px !important; padding:0 10px !important; margin:0 auto !important; }
.wm-inline-row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:nowrap; }
.wm-services {
display:flex; flex-direction:column; gap:6px; font-size:12px;
margin-bottom:34px;
}
.wm-advice-title { color:#B29760 !important; text-transform:uppercase; font-size:13px !important; margin:0 0 8px; font-family:"Alegreya SC",serif !important; }
.wm-advice-sentence { font-size:15px !important; font-style:italic; line-height:1.5; margin-bottom:14px; font-family:"Alegreya",serif; }
.wm-advice-text { font-size:15px !important; line-height:1.5; margin-bottom:8px; font-family:"Alegreya",serif; }
.wm-portrait-btn {
display:inline-block; border:1px solid #B29760 !important; color:#B29760 !important; background:transparent !important;
padding:10px 20px; font-size:11px !important; text-transform:uppercase; text-decoration:none;
margin-top:10px; box-shadow:none !important;
}
.wm-portrait-btn:hover, .wm-portrait-btn:focus, .wm-portrait-btn:active, .wm-portrait-btn:visited {
color:#B29760 !important; background:transparent !important; border-color:#B29760 !important;
}
.wm-summary {
position:relative;
background:#fffbf0;
border:1px solid #B29760;
padding:34px 6% 24px;
margin:40px 0 10px;
text-align:center;
}
.wm-summary-title {
position:absolute;
top:-13px;
left:50%;
transform:translateX(-50%);
background:#fffbf0;
padding:0 16px;
color:#B29760 !important;
font-size:14px !important;
font-weight : 200;
text-transform:uppercase;
white-space:nowrap;
font-family:"Alegreya SC",serif !important;
margin:0;
}
.wm-summary-block { margin-bottom:22px; }
.wm-summary-block:last-child { margin-bottom:0; }
.wm-summary-grape { display:flex; align-items:center; justify-content:center; gap:14px; }
.wm-summary-grape img { max-width:120px; height:auto; }
.wm-summary-info p { margin:0; font-size:14px; text-align:left; }
.wm-summary-region { font-size:16px !important; text-transform:uppercase; letter-spacing:0.5px; color:#5B4B3C !important; margin:0 0 8px !important; font-family:"Alegreya SC",serif !important; }
.wm-summary-appellation {
display:inline-block; background:#B29760; color:#fffbf0; padding:4px 14px;
font-size:14px; text-transform:uppercase; margin:0 0 10px;
}
.wm-summary-aoc { display:flex; gap:8px; justify-content:center; }
.wm-summary-aoc span { border:1px solid #B29760; color:#B29760; border-radius:999px; padding:3px 10px; font-size:10px; }
.wm-summary-producer img { max-width:150px; height:auto; }
.wm-summary-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.wm-summary-tags span { border:1px solid #B29760; color:#B29760; border-radius:999px; padding:5px 10px; font-size:11px; text-transform:uppercase; }
@media (max-width: 767px) {
.wm-button {
height: 36px;
font-size: 11px !important;
padding: 0 14px;
}
.wm-advice-sentence {
font-size: 15px !important;
}
.wm-advice-text {
font-size: 15px !important;
}
}
@media (max-width: 767px) {
.wm-services {
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-flow:column;
grid-template-rows:repeat(2, auto);
justify-items:center;
column-gap:24px;
row-gap:10px;
}
}

/* Reduction espacement image cepage / bloc couleur-millesime-garde en mobile */
@media (max-width: 767px) {
  .wm-summary-grape { gap: 6px; }
}