/*
Theme Name: generatepress-child-ubt
Theme URL: http://hostinger-tutorials.com
Description: generatepress Child Theme
Author: generatepress
Author URL: https://generatepress.com
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child-ubt
*/ 

/* FLOATING NAV BAR CSS*/
.nav-bar-fixed {
	position: fixed !important;
	top: 0;
	width: 100%;
	z-index: 10000;
}

.sticky_content {
  padding-top: 66px;
}
/* END FLOATING NAV CSS*/


/* Make the price bigger on the single product page */
.woocommerce-variation-price .price .woocommerce-Price-amount {
    font-size: 24px;
}
.woocommerce-variation-price {
	padding-bottom: 10px;
}

/* Center images on product gallery */
 .woocommerce div.product .woocommerce-product-gallery {
 text-align: center;
} 
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
  display: inline-block;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
  margin: 0 20px;
}


/* This was on the product pages, not sure what it was supposed to do. Doesn't seem to work. */
/* Ah, it was meant ot make single product pages not get all fucked up. And I broke it. Damn. 
.woocommerce div.product.elementor .variations_form .woocommerce-variation-add-to-cart, .woocommerce div.product.elementor form.cart:not(.grouped_form):not(.variations_form) {
    display:block;
}
*/
/* product-addons-total {
    display: none;
}

.wc-pao-addon-chars-remaining {
    display:none;
} */

/* Add the dropdown icon back to variant select list dropdowns on product pages (front skewer length, etc) */
.value select {
	-webkit-appearance: menulist;
} 

/* Hide the ordering fields (should only be happening on product category pages anyway) */
form.woocommerce-ordering {
    display:none;
}

/***************************/
/* CSS FOR THE FOOTER */
/* H4 formatting */
.site-footer h4 {
	text-transform: uppercase;
	color: #ffffff;
	font-size: 20px;
    font-weight: 400;
}
/* Link formatting */
.site-footer a {
	color: #ffffff;
	opacity: 0.6;
	font-size: 16px;
	font-weight: 400;
}
/* Link hover formatting */
.site-footer a:hover {
	opacity: 1;
}
.site-footer .elementor-social-icons-wrapper a {
	font-size: 25px;
	background-color: #7A7979;
}

/***** CART CSS ***/
/*.Remove cross sells from cart for now. Keep it simple. */
div.cart-collaterals > div.cross-sells {
	display: none;
}
/******************/


/***************************/
/* PRODUCT PAGE CSS */
/* CUSTOM CSS FOR SIDEBAR */
/* Remove the button from the sidebar (for more spacing) */

/* Make on-sale prices red, bold, italic */
ins > span.woocommerce-Price-amount.amount {
    color: red;
    font-weight: bold;
    font-style: italic;
}

/* Add spacing to the "add to cart" button on the product page - looks funky when nothing is selected */
.single_variation_wrap {
	margin-top: 10px;
}

/* Set star rating color to a golden/orange hue*/
div.star-rating > span {
	color: #fbbe23;
}

/* Set star rating count to be on same line as star rating (start of tweaks)*/
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .woocommerce-review-link {
    display:inline-block
}
/* More tweaks - set it to be in the middle instead of floating weird. */
div.star-rating {
	vertical-align: middle;
}
/* Alignment of stars + count for the "table" layout - Make the review count smaller and aligned properly*/
a.woocommerce-review-link {
	font-size: small;
    vertical-align: top;
}
/* Alignment of stars + count for the "grid" layout */
ul.columns-4 > li > a + a.woocommerce-review-link {
	position: absolute;
    left: 5.8em;
    bottom: 2.4em;
}
/* Alignment of stars + count for the "grid" layout on product pages (related products) */
ul.columns-1 > li > a + a.woocommerce-review-link {
	position: absolute;
    left: 15.4em;
    bottom: 2em;
}
/* End of star rating alignment tweaks */

/* Fix formatting for simple products form - display is effed otherwise */
div.product-type-simple > div > div > section > div > div > div.elementor-element.elementor-column.elementor-col-50.elementor-top-column > div > div > div.elementor-widget-woocommerce-product-add-to-cart > div > div > form {
	flex-wrap: wrap;
}

/* Start of sidebar edits */
/* .related-products-sidebar a.button {
	display:none;
} */
/* Remove the star rating from the sidebar (for more spacing) */
.woocommerce .related-products-sidebar .star-rating {
	display:none;
}
/* Add padding to the dropdown menus - otherwise they look cramped on desktop */
.woocommerce div.product.elementor form.cart table.variations td.value {
	padding-left: 10px;
	padding-right: 10px;	
}

/***** Product page styling - make add-ons pretty *****/

/* Keep the label and input boxes on the same row on desktop and on mobile. */
/* wc-pao-addon-container is the outermost container */
.wc-pao-addon-container {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	flex-wrap: wrap;		   /* For mobile - The items outside the browser’s view will come directly below it */
	width: 100%;
	margin-top: 0px;
}

/* Remove the "100 characters remaining" bit - just takes up space. */
small.wc-pao-addon-chars-remaining {
    display: none;
}

/* Remove the * from the labels - takes up space. */
div.wc-pao-required-addon > label > em.required {
    display: none;
}

/* Make teh subtotal bold (stand out more) */
li.wc-pao-subtotal-line > p.price {
    font-weight: bold;
}

/* Float the label to the left */
label.wc-pao-addon-name {
    overflow: none;
    float: left;
    flex-basis: 20%;
	min-width: 13em;
	font-weight: bold;
	font-weight: narrower;
}

/* Float the input form to the right, and give it a little padding */
p.form-row.form-row-wide.wc-pao-addon-wrap {
    flex: 1;
    float: right;
    padding-left: 1em;
}

/* If there is an add-on description, give it a new line */
.wc-pao-addon-description {
    width: 100%;
}

/* The select is what is actually handles the dropdown */
select {
    padding-top: 0;
    padding-right: 15px;
    padding-bottom: 0;
    padding-left: 5px;
}

/* Hide all the individual line items, they take up too much space. */
#product-addons-total > div > ul > li {
    display: none;
}

/* ...But!! Make sure the subtotal still displays. */
#product-addons-total > div > ul > li.wc-pao-subtotal-line {
    display: flex;
}

/* Make the subtotal display nicely  */
div.product-addon-totals {
/* 	width: 100%; */
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-top: none;
    border-bottom: none;
    overflow: hidden;
}

#product-addons-total {
	width:100%;
}

/***************************************************************/





/********************* Woocommerce styling *********************/
.price {
	color: #494949 !important;
}

.woocommerce-Price-amount {
	font-weight: bold;
}

div.ubt_product_meta_container > a > h2 {
	font-weight: 500;
	font-size: 1.2em !important;
}

div.woocommerce-notices-wrapper > div {
	background-color: #00b33fbf;
}

div.woocommerce-message {
	border-top-color: #00b33fbf;
}

#coupon_code {
    width: 120px !important;
}

div > a.checkout-button.button.alt.wc-forward {
	background-color:#000;
}

/***************************/
/* PRODUCT CATEGORY PAGE CSS - This is complex to handle the tabular layout (Mobile vs desktop)*/

/* columns-1 is the outermost container, so we need to make sure this wraps and there isn't more than 1 item per row */
div.columns-1 > ul.products.columns-1 {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
}

div.columns-1 > ul.products.columns-1 > li.product {
 	list-style: none;
	margin-bottom: 2.5em;	
}

/* And then get down to the items within the list items, and keep the image and descriptions on separate rows on mobile. */
/* ubt_product_container is the outermost container */
div.ubt_product_container {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	flex-wrap: wrap;		   /* For mobile - The items outside the browser’s view will come directly below it */
	justify-content:center;    /* When the columns break to a new line, keep the image (and desc..) items centered. */
}
/* ubt_product_meta_container is the container for title, description, meta data, etc*/
div.ubt_product_meta_container {
	flex: 1;
	float: right;
	min-width: 200px;
	padding-right: 1em;
	padding-left: 1em;
}
/* ubt_product_image_container is the container for the image*/
.ubt_product_image_container {
	overflow: none;
	float: left;
	flex-basis:200px; 
	margin-bottom: -.5em;
}


/* This is janky but otherwise Elementor is making my product category (and upsell) products have the "Grid" display...*/
ul.columns-1.products {
	display:block !important;
} 






/* Style sheet for thru axle table */
/* The outer container */
.flex-container.thru-axle-table {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
}
/* An italic label up top*/
.flex-text-label {
	width: 100%;
	margin-bottom: -1.2em;
	font-style: italic;
}
/* The container to the left (the table) */
div.thru-axle-spec-table {
	max-width: 720px;
	height: 15em;
	overflow: scroll;
}
/* The cintainer to the right (the image) */
.flex-container-right.product-category-description-image {
	flex: 1;
	float: left;
	padding-right: 1em;
	padding-left: 1em;
	justify-content: center;
	min-width: 125px;
/* 	height: 15em; */
}

#thru-axle-sample-image {
	position: relative;
	top: 50%;
	transform: translateY(-50%)
}

/* Style table on thru axle category page */
.thru-axle-spec-table tr {
	  border-bottom: 1px solid;
}

.thru-axle-spec-table th {
	background-color: #555;
	color: #fff;
	overflow-wrap: normal;
}

.thru-axle-spec-table th, .thru-axle-spec-table tr, .thru-axle-spec-table tr, .thru-axle-spec-table td {
	text-align: left;
	padding: 0.1em .3em;
	min-width: 6em;
}

.thru-axle-spec-table p {
	text-align: right;
	margin-top: 1em;
	font-style: italic;
}

/* Ninja form fields */
div.nf-form-fields-required {
	font-style: italic;
	font-size: smaller;
}