/** The new gallery set, using Envira **********************************************************************************/

/* Envira Gallery Box  */

.ns-envira-box {
    display:block;
    padding: 18px 9px 18px 9px;
}

/*
Envira CSS modifications
*/

.ns-envira {
	font-family: inherit !important; 
}

.envirabox-close, .envirabox-arrow--left span, .envirabox-arrow--right span {
    background-image: url('images/ns_envirabox_sprite.png') !important;
}

.envirabox-image-wrap {
    border:none !important; 
}

/*** makes the type Calibre on the box and gallery */
.envira-caption,
.envira-title,
.envirabox-caption,
.envirabox-title {
    font-family: 'Calibre Web' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    text-align: left !important;
}

/*** Gallery Position */
.envira-title,
.envira-caption{
    margin-top:-6px !important;
    padding-top:0 !important;
    top:0 !important;
    font-size:15px !important;
    line-height: 120% !important;
    font-weight: 300 !important;
}

.envirabox-caption,
.envirabox-title {
    padding-bottom: 120px;
    padding: 18px 0;
    font-size: 18px !important;	
    text-align: left !important;
    color: #fff;
    line-height: 20px;
        text-align: center !important;
}

.envira-gallery-captioned-data {
    display:block !important;
    position:relative !important;
}

.envira-caption a,
.envirabox-caption a {
    display:block;
    font-size:14px !important;
    text-decoration:none !important;
    border:0 !important;
    color:dodgerblue !important;
}

.envira-caption a.reddot,
.envirabox-caption a.reddot,
.reddot {
    color:tomato !important;
}

.envira-caption a:hover,
.envirabox-caption a:hover {
    color:orangered !important;
        border:0  !important;
}

/*** lightbox caption position */
.outside {
    bottom:  -36px !important;

}

/*** the X that closes the lightbox */

.envirabox-close {
    display:none;
}

 /*  -----------------------------------------------------------------
 Woo Commerce Hacks to get this to look sort of cool, 2020
 --------------------------------------------------------------------*/


 /*  Product Box on Shop Page -- overrides whatever woo commerce does -- 2018 */
 
 .woocommerce .site-content {
	padding:0 0 !important;;
	 margin-bottom:0  !important;
	 min-height:auto;
}

.woocommerce .content-area {
	padding:0 0 !important;
	border:2px solid white;
	margin-bottom:0  !important;
	height:auto;
}

.woocommerce .site-main {
	padding:0 0 120px 0  !important;
	margin: 0 !important;
	border:0px solid blue;
	background-color:inherit;
}


.post-type-archive-product .site-main {

    background-color:#e1ddd6;
	padding-top:30px !important;
}

.woocommerce h1.page-title {
	margin-bottom:inherit;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	text-transform: uppercase;
	display:none;
}

/* *  contains all of the product boxes on the main shop page -- 2018 */
.woocommerce .products {
	padding:0 0 0 0 !important;
	margin:0 auto !important;
	text-align:center;
	display: block !important;

}

/* *  this is the box that holds the product on the main shop page -- 2018 */
.woocommerce li.product {
	clear:both !important;
	float:none !important;
	display: block !important;
	width:300px !important;
	margin:6px auto !important;
	padding:18px !important;

	border:2px solid white;
	text-align:center;
	background-color:white;
    font-size:80%;
    line-height: 140%;
}	

	/* *  Mobile Large 620px */
	@media screen and (min-width: 38.75em) {
		.woocommerce .products {
			padding:0 !important;
			margin:0 auto !important;
		}

		.woocommerce li.product {
			display: inline-block !important;
			width:25% !important;
			max-width:420px !important;
			min-width:240px !important;
			margin:6px 9px 30px 9px !important;
		}	
	}

/* *  shop page eliminating stuff and typogprahy -- 2018 */

h4.tn,
.product .woocommerce-Price-amount {
	font-size:inherit;
}

.woocommerce li.product a.woocommerce-LoopProduct-link {
	display:block;
	border:0;
}

.attachment-shop_catalog {
	padding-top:0px;
}

p.stock {
	display:none;
}

/* *  When stock is zero site shows "no longer available" with red dot. Text is changed via functions 2020 */

p.out-of-stock {
    display:block;
    color:tomato;
}
p.out-of-stock::before {
    content: "⬤ ";
}


/* * Add to Cart and other buttons -- 2018 */

.quantity input{
	border:1px solid dodgerblue;
	background-color:#efefef;
    margin-bottom:0;
}

.woocommerce button.single_add_to_cart_button,
.woocommerce a.button {
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
    border:1px solid dodgerblue;
	background-color:#efefef !important;
	color:dodgerblue!important;
	font-weight:300;
	text-transform:uppercase;
	letter-spacing:.02em;
    font-size:80%;
}

.woocommerce a.button:hover {
}

/* * Price Styles -- 2018 */

p.price {
	line-height:1em;
}

p.price span,
span.price span,
.amount {
	color:black !important;
}

span.woocommerce-Price-currencySymbol {
	margin-right:.1em;
	display:inline-block;
}


/* -----------------------------------------
   Product Page -- 2020 
-------------------------------------------- */

/* sets a 6px border to match single posts on single product to match the border on single posts set in style.css */

.single-product .content-area {
    border: 6px solid white;
}

.single-product .site-main {
}

.single-product .entry-content {
}

/* This box nests the entire single product within the content-area.  */
.single-product .ns-product {
    display:block;
    height:auto !important;
}

/* these are the nested boxes that holds the product image on top */

.single-product .woocommerce-product-gallery {
    display:block;
}
.single-product .woocommerce-product-gallery div {
}
.single-product .woocommerce-product-gallery div img {
    display:block;
	margin:0 auto 0 auto;
	padding:0;
    width:auto;

    max-height:24em;
}

/* this nests all the content below the product image. it is set to the same column width as the entry-content p used in the single posts, this is done in styles.css. There are several breakpoints */

.single-product .ns-product-info-box {
    display:block;
    position:relative;
    border-top:1px solid black;
    padding-top:.25em;
    margin-top:2.25em;
}


/* The title of the product
.product_title_box is generated by woocommerce function, in style.css is linked to the entry-content p styles to keep it the right col width  */

 .product_title_box {
  	display:block;
     margin-bottom:6px;
     padding:0 !important;
     width:63%;
         min-height:150px; /*  quick fix to give space for tee shirt size box */
 } 

 .product_title_box p{
    letter-spacing: .015em;
    margin:0 !important;
    padding:0;
 }
 
/* These control the way price looks -- width auto overrides the entry-content p styling, woocommerce spits out a p tag here for somereason */
.single-product p.price,
.single-product span.amount {
    width:auto !important;
    clear:both;
    
}

/* Contains the add to cart button and quantity selector 2020 */
  .single-product form.cart  {  
    display:block;
    position:absolute;
    top:.5em;
    right:0;
    width:30%;
      text-align:center;
      z-index:100;
 } 

/* quantity selector 2020 */
.single-product form.cart div.quantity {  
	margin:0 -.45em .5em auto !important;
 }  
 
/* quantity selector when given class "hidden" 2020 */
.single-product form.cart div.hidden {  
    display:none;
 }  
 
 
 
/* Add to cart button 2020 */
  .single-product form.cart button {
	margin:0 -.45em 1.72em 0 !important;
 }  



/* Categories, Tags, and related -- could be useful someday, but not today yet 2020 */
.product_meta {
    display:none;
    visibility: hidden;
}

.woocommerce div.related {
	display:none;
}


/* -----------
   The Long Description */

.woocommerce-Tabs-panel h2,
.wc-tabs {
	display:none;
}

.woocommerce-product-details__short-description  {
    padding-top:12px;
    border-top:1px solid black;
}
/* I am hacking at Woocomerce indiscriminately here
this controls the way the Long Description text looks. It removes the dumb tabs */

.wc-tab {
    padding:0;
}

.wc-tab p {
    width:auto !important;
}

/* more hacking at Woocomerce indiscriminately 
gets rid of the attributes table below the product */
table.woocommerce-product-attributes {
    display:none;
}

 /* -----------
   Private Products */

.back-to-where {
    display:block;
    position:relative;
    border-top:1px solid black;
    margin-top:2.5em;
}


.woocommerce li.product.status-private a,
.status-private p.price span,
.status-private span.price span,
.woocommerce div.status-private {
	color:inherit;
}