/* General */

body { background:black; color:#BABABA; text-shadow:2px 2px 2px black; }
h1 span { display:none; }
a { color:#a79359; text-decoration:none; outline:0; }
a:hover { color:#DBBC5F; text-decoration:none;}
::selection { color:white; background:#8d2a2a; }
strong { color:white; }


#scrollToTop { color:#DBBC5F; text-shadow: 2px 2px 2px #000000; }
#menuButton { background-position:top right; }

#bg {
    background: black url("img/shop/bg.png") no-repeat center center;
    background-size: 100% 100%;
    width:100vw; height:100vh;
    position:fixed; top:0; left:50%; transform:translate(-50%); z-index:-2;
}


/* Content elements */

main{
    display:block; margin:0 auto; width:810px; min-height:100vh;
    background: url("img/shop/frame.png") no-repeat top center; background-size:100%;
}
h1{
    margin:0; padding:0;
    display:block; width:750px; height:525px;
    position:absolute; top:0; left:50%; transform:translate(-50%);
}
h1 a { display:block; width:100%; height:80%; }

#products, #product {
    width:800px; margin: 0 auto; padding:700px 0 75px 0;
}
#products {
    display: grid; grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
}
h2 { display:none; }
.product { aspect-ratio: 1; padding:1.5rem; }
.product, #singleProduct {
    border: 2px solid #885D32; border-radius:1.5rem;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 1); 
    background: linear-gradient(to right, rgba(20, 15, 15, 0.95) 0%, rgba(70, 30, 30, 0.9) 50%, rgba(20, 15, 15, 0.95) 100%);
    text-align:justify;
}
#product h3 { color:#DBBC5F; margin:3rem 0 -.5rem 0; }
#product h4 { color:#a79359; margin:2rem 0 -.5rem 0; }

#singleProduct {
    padding: 1rem 2.5rem 2rem 2.5rem;
    border-radius:3rem;
    font-size:1.3rem;
}
.product a { display:block;width:100%;height:100%;background-size:cover; background-position:center center; background-size:cover; }
.product a span { display:none; }
#product-thumb { width:60%; height:auto; display:block; margin: 0 auto; }


.wp-caption-text { margin:0; padding:.5rem; text-align:center; font-size:1rem; color:#c89be2; border-top:1px solid #0f151a; }
.alignleft img, .alignright img, .aligncenter img { border-radius:1rem; }
.alignright { transform:translateY(.4rem); margin: 0 0 .5rem 1rem;  float:right; }
.alignleft  { transform:translateY(.4rem); margin: 0 1rem .5rem 0;  float:left;  }
.aligncenter  { position:relative;left:50%; transform:translateX(-50%); }
.alignleft,.alignright,.aligncenter {
    max-width:100%; border:1px solid #885D32; border-radius:1rem; background:black; box-shadow:2px 2px 2px rgba(0, 0, 0, 0.5);
}


.popup-show {
    background:#a8a088;
}

.stripe-button, .popup-show #buttons-container button {
    color:#a79359;
    font-family:"Evy"; font-size:1.75rem; padding:1.25rem 1.25rem .75rem 1.25rem;
    background-image:linear-gradient(to left, #251515 0%, #412727 50%, #251515 100%);
    transition: 0.5s;
    border:2px solid #885D32;
    border-radius : 2rem;
    cursor:pointer;
    margin-top:1rem;
}
.stripe-button:hover {
    color:#DBBC5F; border:2px solid #DBBC5F;
    background-image:linear-gradient(to left, #442525 0%, #5f2f2f 50%, #442525 100%);
}


@media screen and (orientation: portrait){

    main            { background-size:101%; width:100vw; }
    h1              { height:65vw; width:100%; }
    a               { color:#DBBC5F; }
    #bg             { background-size:100% 100%; }
    #product-thumb  { width:100%; }
    #products       { grid-template-columns: 1fr; }
    #products, #product { width:98%; padding-top:90vw; }

}





/*  <center>[accept_stripe_payment name="Tarot - Le Psychydre" price="89" quantity="1" class="stripe-button"]</center> */
#product .asp-order-details-wrap h4 {
	margin: 3.5rem 0 1rem 0;
    text-align: center;
    font-size: 1.5rem;
    font-family: "Evy";
}
#product .asp-order-details-wrap table, #product .asp-order-details-wrap tr,
#product .asp-order-details-wrap th, #product .asp-order-details-wrap td,
#product .asp-order-data-box, #product .asp-order-data-box-col {
    border-color: rgba(219, 188, 95, 0.5);
    font-size: 1.1rem;
}