/* Normalize.css
----------------------------------------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}html,button,input,select,textarea{font-family:sans-serif;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}h2{font-size:1.5em;margin:0.83em 0;}h3{font-size:1.17em;margin:1em 0;}h4{font-size:1em;margin:1.33em 0;}h5{font-size:0.83em;margin:1.67em 0;}h6{font-size:0.75em;margin:2.33em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}blockquote{margin:1em 40px;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}p,pre{margin:1em 0;}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em;}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}q{quotes:none;}q:before,q:after{content:'';content:none;}small{font-size:75%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}dl,menu,ol,ul{margin:1em 0;}dd{margin:0 0 0 40px;}menu,ol,ul{padding:0 0 0 40px;}nav ul,nav ol{list-style:none;list-style-image:none;}img{border:0;-ms-interpolation-mode:bicubic;}svg:not(:root){overflow:hidden;}figure{margin:0;}form{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;white-space:normal;*margin-left:-7px;}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}button,input{line-height:normal;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible;}button[disabled],input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*, * html, body, html{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; outline:0; margin: 0; padding: 0; }
:root{
  --rouge: #872b31;
  --or : rgb(161, 125, 68);
  --container-margin : 30px;
  --fonts-untitled: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bg-color : radial-gradient(circle, rgba(247,247,247,0.6) 80%, rgba(221,213,204,0.4) 100%);/*#F7F7EF #F4F4F4 /*#e6ebef*/;
  --font-size : 0.86em;
}

body{font-family: font-family: "Poppins", serif; font-size: var(--font-size); font-weight: 400; font-style: normal; background: var(--bg-color); cursor: default}
header, main, footer {position: relative;  width: 100%;  clear: both; z-index: 10}
header{z-index: 20}
main{z-index: 30}
footer{z-index: 10}
.header-content { position: relative; max-width: 1440px; margin: auto }
.main-content { position: relative; max-width: 1440px; margin: 0 auto 20px; min-height: 40vh  }
.page-content { position: relative; max-width: 1080px; margin: auto;  }
.footer-content { position: relative; max-width: 1440px; margin: auto } 
.footer-menu-content { position: relative; max-width: 960px; margin: 20px auto } 

h1,h2,h3,h4,h5,h6{font-family:  Times, "Times New Roman", "serif"; font-weight: 400; }
h1{font-size: 2.8em}
h2{font-size: 2.4em}
h3{font-size: 2em}
h4{font-size: 1.4em}
h5{font-size: 1.2em}
h6{font-size: 1em}
p,li{line-height: 1.3em; font-size: 1em}
ul{margin: 0; padding: 0 0 0 2.4em}

.accroche {display: grid; grid-column: auto; grid-template-columns: 25% 1fr; align-items: center; grid-gap: var(--container-margin); padding: 15px; background: white;  border-bottom: 1px solid white;box-shadow: rgba(0, 0, 0, 0.10) 0px 25px 20px -20px; }
.accroche-image {  border-right: 2px dashed #EFEFEF }
.accroche-image img{ max-width: 80%; margin: 0 10%;}
.accroche-texte { padding: 20px;} 

.grid{ transition: all .6s ease; position: relative}
/*.grid {filter: brightness(0.5) contrast(1.7); opacity: 0; }*/
.grid-single-vins-image, .grid-vin-image{filter:  brightness(0.5) contrast(1.7); opacity: 0; }
.grid-vin-info { opacity: 0; }
.effects{ filter: brightness(1) contrast(1); opacity: 1;  transition: all .4s ease;  }
.slow{ transition: all 0.8s ease;}
/* header */

.logo-bio img {width: 100%}
/* Logo */
.logo { text-align: center; margin: 0px 0;
  a{ text-decoration: none}
  img{ width: 250px}
}
.compte { float: left; width: 100%; padding: 5px 0; margin: 0 0 20px;  text-align: center; background : var(--rouge); 
  ul {float: right; margin:0; padding: 0;}
  ul>li { margin:0; padding: 0; float: left; list-style: none; padding: 0 5px; margin-right: 5px }
  ul>li>a {float: left; color: white;padding: 5px; display: block; transition: all 0.4s;text-decoration: none;}
  ul>li>a:hover {text-decoration: none; background: white; color: var(--rouge) }
}
.dropdown { float: left; color: white; padding: 0px; display: block; transition: all 0.4s;
  .dropdown-toggle {float: left; color: white;padding: 5px; display: block; transition: all 0.4s;text-decoration: none;}
  .dropdown-toggle:hover {background: white; color: var(--rouge);  transition: all 0.4s;} 
  .dropdown-menu, .dropdown-menu li{ padding:0; margin:0;min-width: 40px;}
  .dropdown-menu a {text-decoration: none; color: black;padding: 5px; display: block; background: var(--rouge); color: white; transition: all 0.4s;}
  .dropdown-menu a:hover {text-decoration: none; background:white; color: var(--rouge);}
}
.retrour-domaine {position: absolute; font-size: 1.2em;
  a {float: left; padding: 20px; text-align: center; background: var(--rouge); color: white; transition: all .4s ease; text-decoration: none;}
  a:hover { background : var(--or); padding: 20px 20px 20px 30px; }
}

.text-success { position: fixed; top: 30px; right: 10%; transition: 500ms; z-index: 1000; display: block;
  .window {  padding: 20px;  background-color: #fff;  border:6px solid var(--rouge);  box-sizing: border-box;  box-shadow: 0 20px 60px rgba(0,0,0, 0.2);  transition: 500ms;z-index: 10; margin-top: 26px;}
  a.fermer{float: right; background: var(--rouge); color: white; z-index: 100; padding: 2px 6px;}
  a.fermer:hover{background: var(--or); text-decoration:none}
}


/* products.liquid */

.grid-vin { display: grid; grid-column: auto; grid-template-columns: repeat(4, 1fr); align-items: top; grid-gap: var(--container-margin); padding: 15px; } 
  .col-md { width: 100%; height: 100%; margin: 0 ; padding: 0px 0px; position: relative; }
  .grid-vin-image-background{ opacity: 1; position: absolute; z-index: 0; top: 0; width: calc(100% - 30px); margin: 30% 15px 0; height: 60%;  transition: all .4s ease; background:  linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 10%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.2) 100%), url("/theme-assets/papier-fond-1b51f1d271014d0639e7f165cc5aea38.jpg") top center;} 
  .grid-vin-image {position: relative; float: left; width: 100%; padding:0; clear: both; z-index: 100;  }
  .grid-vin-image img{ float: left; width: 36%;  margin: 30px 32% 0; padding: 0;transition: all .4s ease; }
  .magnum img{ width: 40%;  margin: -10px 30% 0;}
  .bib img {width: 80%;  margin: 140px 10% 0;}
  .volume {float: right; background: white; padding: 5px 10px; margin-top: -60px;}
  .grid-vin-info { position: relative; float: left; width: 100%; padding: 50px  0 20px; z-index: 90; margin-top: -40px; background: white; box-shadow: rgba(0, 0, 0, 0.10) 0px 25px 20px -20px; transition: all .4s ease; border-top: 1px solid #EFEFEF;
    .grid-vin-titre { float: left; width: 100%; text-align: center; padding: 0; }
    .grid-vin-titre h3{text-align: center; font-weight: 500; margin: 10px 0 }
    .grid-vin-titre h3 a{text-decoration: none; color: var(--rouge)}
    .grid-vin-titre .millesime span{font-family:Times, "Times New Roman", "serif";font-size: 1.2em; color: var(--rouge);padding:0; font-weight: bold;}
    .grid-vin-titre .appellation {font-size: 1em; margin-top: 5px;}
    .prix {float: left; width: 100%; text-align: center; font-size: 1.4em;  margin: 0; padding-top: 10px;  font-weight: 500; color: var(--rouge);}
    .prix span{color: black;font-size: 0.7em; font-weight: normal; font-style: italic}
  }
  .col-md:hover .grid-vin-image-background { transform: scale(1.0);}
  .col-md:hover .grid-vin-image img{transform: scale(1.04); transform-origin: center; }
  .col-md:hover .grid-vin-info {box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 20px -20px;}
  .col-md:hover .triangle-background{  margin-top: 20%;  transition: all .4s ease; background: var(--or);  height:30%;  margin-top: 68%;} 

.form-homepage{float: left; width: 100%; padding-top: 5px; text-align: center}
.col-btn-left {float:left; width: 50%; margin:0 0x; padding: 0px 0 0 15px  ; position: relative; min-height: 1px; text-align: center;
  input[type=number] { width: 100%; height: 34px;}
}
.col-btn {float:left; width: 50%; margin:0 0x; padding: 0px ; position: relative; min-height: 1px;text-align: center}
.btn-primary, .qty-button { color: #fff; background-color: var(--rouge); border-color: var(--rouge);}
.btn-primary:hover, .qty-button:hover { color: #fff; background-color: var(--or); border-color: var(--or)}
.qty-button {height: 34px;}
input[type="number"] { -webkit-appearance: none; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; -moz-appearance: textfield; margin: 0; }
button {outline:none; }
.sold_out {float: left; width: calc(100% - 30px); text-align: center;margin: 22px 15px 0; padding: 10px; font-size: 1.2em; background: #EFEFEF; color: var(--rouge)}
.grid-cross-selling { display: grid; grid-column: auto; grid-template-columns: repeat(5, 1fr) ; align-items: top; grid-gap: var(--container-margin)}
.grid-cross-selling h3 {font-size: 1.4em}

.promo {float: left; width: 80%; margin: 0 10%; padding: 5px; border: 1px solid var(--rouge); font-size: 0.8em; text-align: center; color: var(--rouge); }
.grid-single-vins .promo{font-size: 1.2em; border: none}
/* Single product */
.product {margin-top: 40px}
.grid-single-vins-image-background { position: absolute; z-index: 0; float: left; width: calc(100% );height: 100%;  background: url('https://www.domaine-richaud.fr/styles/img/papier.png') 0 50px no-repeat; background-size: contain }
.grid-single-vins {width: 90%; margin: auto 5%; display: grid; grid-column: auto; grid-template-columns: calc(100% / 3) calc(200% / 3) ; align-items: top; }
.grid-single-vins-image{ position: relative; float: left;  width: calc(100% - 0px); text-align: center; z-index: 10 }
.grid-single-vins-image-bib img {width: 80%;  margin: 140px 10% 0;}

.grid-single-vins-fiche { position: relative; text-align: center; float: left; width: calc(100%); margin-top: 0px; padding: 30px 30px 60px; min-height: 100%; background:rgba(255, 255, 255, 0.90); box-shadow: rgba(0, 0, 0, 0.10) 0px 25px 20px -20px;  z-index: 1;}
.grid-single-vins-fiche h2 {font-size: 3.4em}
.grid-single-vins-fiche .millesime {font-size: 1.8em; padding:0; margin-top: 0px}
.grid-single-vins-fiche .appellation {}
.grid-single-vins-fiche .prix  { margin-top: 20px}
.outofstock {color: var(--rouge)}
.grid-single-vins-fiche .rowa {float: left; width: 50%; margin: 0 25% 30px}
.grid-single-vins-fiche .fiche-technique {float: left; width: 100%; text-align: left;border-bottom: 1px dotted rgba(0, 0, 0, 0.20)}
.grid-single-vins-fiche .fiche-technique .row{float: left; width: 100%; margin: 0 ; padding: 0px 0;  border-top: 1px dotted rgba(0, 0, 0, 0.20)}
.fiche-technique .product-label { font-weight: bold;padding: 15px; }
.product-characteristic .col-md-9{ padding: 15px;  }

/* Panier */
.cart-shop { width: 100%; background-color: white; display: grid; grid-auto-rows: 1fr; position: relative; grid-template-columns: repeat(2, 1fr); align-items: center; grid-gap: 10px; padding: 10px 0; border-bottom: 1px dashed #DDD;
  .cart-shop-detail  {display: grid; position: relative; grid-template-columns: 100px calc(100% - 100px); align-items: center; grid-gap: 10px;}
  .cart-image {width: 100px;    position: relative;  overflow: hidden; text-align: center}
  .cart-image img{ width: 45px;}
  .cart-detail { padding: 10px}
  .cart-shop-prix {display: grid; position: relative; grid-template-columns: repeat(3,1fr); height: 100%; align-items: center; grid-gap: 10px; grid-auto-rows: 1fr; border-left: 1px dashed #DDD;}
  .cart-cta-content, .cart-prix, .cart-total { float: left; width: 100%; padding: 10px 20px; text-align: right;    }
  .cart-total span {font-size: 1.4em }
}
.panier-vide {float: left; width: 100%; background: #FFF; padding: 30px;box-shadow: rgba(0, 0, 0, 0.10) 0px 25px 20px -20px; display: grid; grid-column: auto; grid-template-columns: calc(100% / 2) calc(100% / 2) ; align-items: center;
  .img-content {float: left; width: 100% }
  .img-content img{float: left; width: 100% }
  .text-content {float: left; width: 100%; padding: 20px }
   a{text-decoration: none;  border-bottom: 1px solid #CCC; cursor: pointer;transition: border 0.2s ease-in; color: black}
   a:hover{border-bottom: 1px solid #000; }
}
.continue-shopping { padding: 5px 0 5px; }
.continue-shopping a { float: right; padding: 10px;background:  var(--rouge) ; color: white; transition; all 0.4ms }
.continue-shopping a:hover {  background: var(--or) ; }


@media screen and (max-width:767px){
  .cart-shop { flex-wrap: wrap; height: auto; position: relative;
  }
}

/* Footer Domaine Richaud */
.footer-background {position: relative; width: 100%; height: 80px; clear: both; background: url(/theme-assets/paper-e7fbf4aec238ede7454690885207f2b7.png) top center no-repeat; background-size:cover; margin: 20px 0 0;  z-index: 0;}
footer { color: white;  background: var(--rouge) ;background-size: contain; margin: 0;   z-index: 10;}
.footer-content{ text-align: center; padding: 0px 0 20px 0; }
.footer-content .logo img{ zoom: 80%; margin-bottom: 10px}
footer .footer-menu {padding: 10px 0 0; background: var(--rouge); text-align: center; display: grid; grid-column: auto; grid-template-columns: repeat(4, 1fr) ; align-items: top; grid-gap: var(--container-margin); text-align: left; }
.footer-menu div {border-right: 1px dashed rgba(255,255,255,0.5);}
.footer-menu div:last-child {border: none}
footer .copy a {color: white; border-bottom: 1px solid var(--rouge); }
footer .footer-menu a {color: white; display: block; padding: 5px}
.copy a:hover{border-bottom: 1px solid white;}

.pre-footer {float: left; width: 100%; margin: 40px 0% ; display: grid; grid-column: auto; grid-template-columns: repeat(4, 1fr) ; align-items: top;
  div { float: left; width: 100%; padding: 0px 20px; border-right: 1px dashed rgba(255,255,255,0.5); text-align: left }
  div:last-child {border: none}
  a {color: white; text-decoration: underline}
  img { width: 60px;}
  h4 {margin: 10px 0 0}
}




@media screen and (max-width: 1440px) {
.grid-vin {  grid-template-columns: repeat(4, 1fr) ; }
.grid-cross-selling { grid-template-columns: repeat(5, 1fr)}
 }

@media screen and (max-width: 1200px) {
.grid-vin {  grid-template-columns: repeat(3, 1fr) ; }
.grid-cross-selling { grid-template-columns: repeat(4, 1fr)}
 }
@media screen and (max-width: 860px) {
.grid-vin {  grid-template-columns: repeat(2, 1fr) ; }
.grid-cross-selling { grid-template-columns: repeat(3, 1fr)}

 }
@media screen and (max-width:767px){
.grid-vin {  grid-template-columns: repeat(2, 1fr) ; }
.grid-cross-selling { grid-template-columns: repeat(2, 1fr); grid-gap: 10px}
.grid-cross-selling h3 {font-size: 1.1em}

.pre-footer {grid-template-columns: repeat(1, 1fr);  padding-top: 10px;
    div { float: left; width: 100%; padding: 0px 20px; font-size: 0.8em }
    div img {width: 40px;  }
  }
}
 
 
@media screen and (max-device-width:767px) and (orientation: portrait){  
.logo img{width: 50%;}
.col-md {width: calc( (100%) )}
.grid-vin-image-background{height: 30%; margin-top: 30%;  } 
.grid-vin-image img{  width: 40%;  margin: 30px 30% 0; }
}

@media screen and (max-width:767px){
  body{ font-size: 0.9em}
  .footer-content{ padding: 20px 0 20px 0; background: var(--rouge)}

  .grid-vin-image img{ width:20%; margin: 30px 40% 0;}
  .product {margin-top: 10px}  
  .grid-single-vins {width: 100%; margin: auto 0; display: grid; grid-column: auto; grid-template-columns: 1fr ; align-items: top; }
  .grid-single-vins-image-background { background: url('https://www.domaine-richaud.fr/styles/img/papier.png') 0 140px no-repeat; }
  .grid-single-vins-image img{ float: left;  width: 40%; margin: 0 30%}
  .grid-single-vins-fiche { margin-top: -25px; padding: 30px 10px;}
  .grid-single-vins-fiche h2 {font-size: 2em}
  .grid-single-vins-fiche .millesime {font-size: 1.2em; padding:0; margin-top: 0px}
  .fiche-technique .product-label { font-weight: bold;padding: 5px; }
  .product-characteristic .col-md-9{ padding: 5px 5px 10px;  }
  .grid-single-vins-fiche .rowa { width: 60%; margin: 0 20% 30px}
  .panier-vide { padding: 10px;grid-template-columns: 1fr;
    .text-content {padding: 20px 30px }
  }
  .retrour-domaine {position: relative; font-size: 0.8em; display: block; float: left; width: 100%; margin: -5px 0 5px;
    a { padding: 5px; text-align center; }
  }
  
.cart-shop {  grid-template-columns:  1fr; }
.accroche { grid-template-columns: 1fr;  }
.accroche-image {  display: none }
  footer .footer-menu{font-size: 0.8em}
}
@media screen and (max-width:580px){
.grid-vin {  grid-template-columns: repeat(1, 1fr) ; }
.grid-vin-image-background{ height: 30%; margin-top: 10%; } 
.grid-vin-image img{ width: 30%;  margin: 0px 35% 0; }
}


#age-verify {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0, 0.8); transition: 500ms; z-index: 1000;width: 100%;height: 100%;
  .window { position: absolute; top: calc(50% - 200px); left: calc( 50% - 200px);  width: 400px;height: 400px;  overflow: hidden; padding: 40px; background-color: #fff;  border:6px solid var(--rouge);box-sizing: border-box;  box-shadow: 0 20px 60px rgba(0,0,0, 0.2);  transition: 500ms;
    span {display: block;  text-align: center;  margin-bottom: 10px; 
      &.title { color: var(--rouge);font-size: 24px;}
    }
    button {border: 0;margin: 0 0 10px 0; padding: 0; width:48%; height:80px; color:#FFF; font-size: 18px; background: var(--rouge); margin-top:20px;  transform:scale(1); transition: .2s;
      span { font-size: 0.8em; padding-top: 5px}
      &.back {display:block;float:none;  margin:auto; background-color: #fff; color:var(--rouge) !important;margin-top:20px;}
      &.yes { float:left;  }
      &.no {float:right;}
      &:hover {transform:scale(1.1);box-shadow: 0 20px 60px rgba(0,0,0,0.2);  background-: lighten(var(--rouge),10%); }
    }
    .underBox { position:absolute;width: 400px; height: 400px;  padding: 40px;top:100%; left:0; right:0;background: var(--rouge); transition: 500ms;  box-sizing:border-box;
      * { color:#FFF !important;  }
    }
  }
  &.hidden { opacity:0; visibility: hidden; 
    .window {    transform:scale(0.5);  }
  }
  &.under { 
    .window .underBox { top:0%; }
  }
}