/*
Theme Name: Shoptimizer Child Theme
Theme URI: https://commercegurus.com/
Description: Shoptimizer WordPress theme. Sample child theme.
Author: PoolPartz
Author URI: https://pryzbylkowski.com
Template: shoptimizer
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

.related.products {
display: none;
}

.top-bar {
background-color: lightblue;	
}

span.sale-item.product-label.type-bubble { display: none !important; }

.content-area .summary .onsale {
    background: red;
	color: white !important;
}

.imgtext {vertical-align:middle;margin:0px 30px 0px 0px;width:80;height:80;min-width:80px;max-width:80px;min-height:80px;max-height:80px; !important}
  .imgfull {margin:20px 20px 20px 20px;width:400;height:400}
  video {
    max-width: 100%;
    height: auto;
  }
  .jpp-blog-h2 { margin-top:40px; }

.blogicon {margin: 20px 20px 20px 20px }


.content-area .summary .onsale { 
	font-size: 32px;
}

body .price del {
    font-size: 1.85em;
}

body .price ins {
    font-size: 1.85em;
}

body #reviews .commentlist li .avatar {
	display: none;
}

#reviews .commentlist li time {
	display: none !important;
}


.woocommerce-tabs table.woocommerce-product-attributes td {
    text-align: left;
}
video {
  width: 100%;
  height: auto;
border: 1px solid black;
box-sizing: border-box;
}
p.woocommerce-result-count { display: none; }
div.vcard.author { display: none; }

.site-header .custom-logo-link img {
    height: 38px !important;
}


  video {
    max-width: 100%;
    height: auto;
		width: 800px;
  }

body #reviews .commentlist li .comment_container .comment-text {
    width: 100%;
}


.jppimg { 
  max-width: 100%;
  width: 400px;
}

.numberCircle {
    display: inline-block;
    border-radius: 50%;
    behavior: url(PIE.htc);
    padding: auto;
    background: #0A378F;
    border: 6px solid #0A378F;
    color: white;
    text-align: center;
    font: 14px Arial, sans-serif;
	margin-bottom: 6px;
}

.product .quantity {
	display: none;
}

.jpptable th {
	  background: #0578b7;
    color: white !important;
}

.jpptable {
  border: 1px solid !important;
}

.jpptable td, .jpptable th {
    padding: 0 !important;
    text-align: left !important;
    vertical-align: top !important;
}	

.jpptable td:first-child {
	min-width: 120px;
	max-width: 120px !important;
}

.woocommerce-cart .woocommerce-message {
	display: none;
}

#billing_country_field { display: none;
}

#shipping_country_field { display: none;
}

.textOverImage figcaption {
position: absolute;
margin: 0;
width: 100%;
top: 10%;
right: -25%;
}

.single-post.post-l2 #secondary, .single-post.post-l2 .site-content .woocommerce-breadcrumb {
    display: inline !important;
}

ul.products li.product p.product__categories a {
    display: none !important;
}	

li.menu-item-product p.product__categories, ul.products li.product p.product__categories {
    display: none !important;
}

.main-navigation ul.menu li.menu-item-has-children.full-width>.sub-menu-wrapper li p.product__categories a, li.menu-item-product ul.products li.product p.product__categories a, ul.products li.product p.product__categories, ul.products li.product p.product__categories a {
    color: #444;
    font-size: 11px;
    text-transform: uppercase;
    display: none !important;
}

body .price del {
    font-size: 1.0em;
}

body ul.products li.product .star-rating {
    display: none !important;
}

div.woocommerce-loop-product__title {
    font-size: 14px;
    display: none;
}

.button.jpp-custom-button-view-product {
    position: relative !important;
    width: 100% !important;
}

/*
.m-grid-2 ul.products {
*/
.cross-sells ul.products {
		display: inline;
    overflow-x: wrap;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    padding-top: 5px;
    margin-left: -15px;
    padding-left: 1em;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}

.productpaOLD .add_to_cart_button {display: none  !important }


.prow {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.pcolumn {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}

.pcolumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .pcolumn {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .pcolumn {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

.joepryz .add_to_cart_button { 

display: none !important; 

} 

 
.shoptimizer-sorting { display: block }

.sticky {
	position: fixed;
	top: 0;
	margin-top: 93px;
	z-index: 999;
}

.site-header-cart.menu {
    display: none;
}

body .woocommerce-product-title-container {
    max-width: calc(1170px + 5.2325em);
    margin: 0 auto;
    padding-right: 2.617924em;
    padding-left: 2.617924em;
}
@media (max-width: 992px) {
body .woocommerce-product-title-container {
    padding-right: 1em;
    padding-left: 1em;
}
}

.compare-legend { font-size: clamp(12px, 1vw, 20px); text-align: center; color: white; background-color:black; position: absolute; bottom: 0px; left: 0px;right:0px}
.compare-container {max-width: 500px;display: flex;align-items: center;justify-content: center;}
.compare-img {max-width: 100%;}
.post-legend { font-size: clamp(12px, 1vw, 20px); color: white; background-color:blue; position: absolute; bottom: 10px; left: 10px;}
.post-title123 {  @extend h1; font-size: clamp(40px, 1.5vw, 40px); font-style: bold; color: #201e5a; background-color:white; position: absolute; top: 20%; left: 5%; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; }
.post-title {  @extend .h1; color: #201e5a; background-color:white; position: absolute; top: 20%; left: 5%; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; }
/* .post-subtitle { font-size: clamp(36px, 1vw, 36px); color: white; background-color:blue; position: absolute; top: 45%; left: 5%;max-width: 60%; } */
.post-subtitle { font-size: clamp(32px, 1vw, 32px); color: blue; font-style: bold; position: absolute; top: 45%; left: 5%;max-width: 60%; } */


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  h1.homefont1 { 
      font-size: 24px; 
  }
  .homefont2 { 
      font-size: 20px; padding-top: 10px; 
  }
  h3.homefont3 { font-size: 11px; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .homefont1 {
    font-size: 36px;
  }
  .homefont2 {
    font-size: 28px;
  }
  h3.homefont3 { font-size: 12px; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .homefont1 {
    font-size: 36px;
  }
  .homefont2 {
    font-size: 30px;
  }
  h3.homefont3 { font-size: 20px; }
  
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .homefont1 {
    font-size: 32px;
  }
  .homefont2 {
    font-size: 24px;
  }
  h3.homefont3 { font-size: 20px; }
  
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .homefont1 {
    font-size: 48px;
  }
  .homefont2 {
    font-size: 40px;
  }
  h3.homefont3 { font-size: 24px; }
}
@media only screen and (min-width: 2400px) {
  .homefont1 {
    font-size: 48px;
  }
  .homefont2 {
    font-size: 40px;
  }
  h3.homefont3 { font-size: 36px; }
}


/* review,coupons and comparisons */
div.gallery { border: 1px solid #ccc; position: relative;	margin: 10px; display: inline-flex; }
div.gallery:hover { border: 1px solid #777; }
div.gallery img { width: 100%; height: auto; }
div.coupon { background-color: #101010; color: #ffffff; }
.top-left { position: absolute; top: 0px; left: 0px; z-index: 3;}
.top-right { position: absolute; top: 0px; right: 0px; z-index: 3;}
.bottom-left { position: absolute; bottom: 0px; text-align: center; right: 10px; z-index: 3;}
.bottom-review { position: absolute; bottom: 0px; left: 0px; text-align: center; z-index: 3; font-size: 12px;}

/* .responsive { padding: 0 6px; float: left; width: 33.3333%; } */
.responsive { padding: 0 6px; float: left; width: 25%; }
@media only screen and (max-width: 700px) { .responsive { width: 49.99999%; margin: 6px 0; } }
/* @media only screen and (max-width: 500px) { .responsive { width: 100%; } } */
.clearfix:after { content: ''; display: table; clear: both; }

/*	* { box-sizing: border-box; } */
/* compare images */
.mainRunner { border: 1px solid #000; display: inline-flex; }
.img1 { position: relative; z-index: 2; }
.img2 { position: relative; z-index: 1; top: 12px; left: -12px;}
.reviewrating { padding-left:5px;padding-right:5px;color:white;background-color:black;font-weight: bold;font-size: clamp(12px, 1.5vw, 16px); }
.toprating { padding-left:5px;padding-right:5px;color:white;background-color:red;font-weight: bold;font-size: clamp(12px, 1vw, 16px); }

.wp-block-button { margin: 5px !important;}
a:hover.wp-block-button__link {
    background-color: #0578b7 !important;
}

.imgTxtCenter figcaption { position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%); pointer-events: none;}
.imgTxtBottomCenter figcaption { position: absolute; bottom: 10%; left: 0; right: 0;pointer-events: none;}



.postimage {
	position: relative;
	padding: 5px;
}


.article a span::after {
    content: " ";
}

.article {
	position: relative;
}

.article .title {
    max-height: calc(100% - 16px);
    max-width: 90%;
    position: absolute;
    top: 20%;
    left: 5%;
    border-radius: 4px;
    /* background-color: rgba(0,51,102,.8); */
	background-color: white;
	color: black;
	font-weight: bold;
    overflow-wrap: break-word;
    overflow-x: hidden;
    box-shadow: none;
    padding: 6px 10px;
    /*font-size: 22px;*/
	font-size: calc(15px + 0.390625vw);
    /* letter-spacing: -.25px;
    line-height: 22.27px; */
    display: block;
	/* width: 80%; */
}

.article .subtitle {
    max-height: calc(100% - 16px);
    max-width: 90%;
    position: absolute;
    top: 50%;
    left: 10%;
    border-radius: 4px;
    /* background-color: rgba(0,51,102,.8); */
	background-color: white;
	color: black;
	font-weight: bold;
    overflow-wrap: break-word;
    overflow-x: hidden;
    box-shadow: none;
    padding: 6px 10px;
    /* font-size: 16px; */
	font-size: calc(10px + 0.390625vw);

    /* letter-spacing: -.25px;
    line-height: 22.27px; */
    display: block;
	/* width: 80%; */
}

.article .kicker {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-height: calc(100% - 16px);
    max-width: calc(100% - 16px);
    border-radius: 4px;
    background-color: rgba(0, 51, 102, .8);
    overflow-wrap: break-word;
    overflow-x: hidden;
}

.article .kicker .kicker-text {
    box-shadow: 8px 0 0 rgba(0,51,102,.8),-8px 0 0 rgba(0,51,102,.8);
    color: #fff;
    background-color: rgba(0,51,102,.8);
    padding: 6px 10px;
    font-size: calc(15px + 0.390625vw);
    font-weight: 500;
    line-height: 1.2;
    /*letter-spacing: -.25px; */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    display: block;
}


.article123 .kicker .kicker-text {
    box-shadow: none;
    padding: 6px 10px;
    font-size: 19px;
    /* letter-spacing: -.25px; */
    line-height: 22.27px;
    background-color: transparent;
    display: block
}

@supports (-webkit-overflow-scrolling:touch) {
    .article .kicker .kicker-text {
        line-height: 1.55
    }
}

.custom-alert-banner {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position at the top */
    top: 0;
    left: 0;
	height: 32px;
    width: 100%; /* Full width */
    background-color: green;
    color: white; /* Text color, customize as needed */
    padding: 5px; /* Padding around content */
    z-index: 9999; /* Ensure it appears above other content */
}

.custom-alert-banner p {
    margin: 0; /* Remove default margin */
    display: inline; /* Ensure text and link are inline */
}

.custom-alert-banner a {
    color: white; /* Link color, customize as needed */
    text-decoration: underline; /* Underline link */
    margin-left: 2px; /* Space between text and link */
}

.alert-banner-close {
    position: absolute; /* Absolute position within .custom-alert-banner */
    top: 5px; /* 5px from the top */
    right: 10px; /* 10px from the right */
    cursor: pointer; /* Cursor pointer on hover */
    color: white; /* Close icon color, customize as needed */
	float: right;
}
.custom-star-rating__wrapper {
    display: flex;
    align-items: left;
    gap: 0px;
}

.custom-star-rating {
    display: flex;
    font-size: 20px;
    line-height: 1;
}

.jpstar {
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
    color: #f5c107; /* Gold color for full/fractional stars */
}

.jpstar.full,
.jpstar.fractional {
    color: #f5c107;
}

.jpstar.empty {
    color: #ccc; /* Gray for empty stars */
}

.jpstarX.fractional {
    overflow: hidden;
    position: relative;
}

.jpstarX.fractional:before {
    content: "★";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.jpstar.fractional {
    position: relative;
    color: #ccc; /* Empty star color as base */
}

.jpstar.fractional:before {
    content: "☆"; /* Empty star */
    position: absolute;
    left: 0;
    top: 0;
}

.jpstar.fractional:after {
    content: "★"; /* Filled star */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    color: #f5c107;
    display: block;
    width: inherit; /* Inherits the dynamic width */
}


.faq-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}
.accordion {
	margin-bottom: 20px;
}
.accordion-item {
	border-bottom: 1px solid #ddd;
}
.accordion-header {
	background: #f4f4f4;
	border: none;
	width: 100%;
	text-align: left;
	padding: 15px;
	font-size: 16px;
	cursor: pointer;
	outline: none;
	display: flex;
	align-items: center;
}
.accordion-header:hover {
	background: #e0e0e0;
}
.accordion-icon {
	margin-right: 10px;
	font-size: 18px;
	transition: transform 0.3s ease;
}
/*
.accordion-header.active .accordion-icon {
	content: '-';
}
.accordion-header.active .accordion-icon::before {
	content: '+';
}
*/
.accordion-content {
	display: none;
	padding: 15px;
	background: #fff;
}
.accordion-content p {
	margin: 0;
}
	.faq-container {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		max-width: 800px;
		margin: 0 auto;
	}

	.faq-section {
		margin-bottom: 20px;
	}

	.faq-header {
		font-size: 22px;
		font-weight: bold;
		margin-bottom: 10px;
		color: white;
		cursor: pointer;
		background-color: #0db4d7;
		padding: 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
	}

	.faq-header .open-close-icon {
		font-size: 18px;
		margin-right: 10px;
	}

	.faq-content {
		display: none;
		padding-left: 20px;
	}

	.faq-question {
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
		padding: 10px;
		background-color: #0578b7;
		color: white;
		border: none;
		border-radius: 5px;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		width: 100%;
		text-align: left;
	}

	.faq-question .open-close-icon {
		font-size: 18px;
		margin-right: 10px;
	}

	.faq-answer {
		display: none;
		padding: 10px;
		background-color: #f9f9f9;
		border-left: 3px solid #4CAF50;
		margin-top: 5px;
		text-align: left;
	}

	@media (max-width: 1024px) {
		.faq-container {
			padding: 15px;
			max-width: 90%;
		}
	}

	@media (max-width: 768px) {
		.faq-header, .faq-question {
			font-size: 16px;
			padding: 8px;
		}

		.faq-answer {
			font-size: 14px;
		}
	}

	@media (max-width: 480px) {
		.faq-container {
			padding: 10px;
			max-width: 100%;
		}

		.faq-header, .faq-question {
			font-size: 14px;
			padding: 6px;
		}

		.faq-answer {
			font-size: 12px;
		}
	}
	
        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: -webkit-fill-available;
        }

        .popup-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            animation: slideIn 0.3s ease-in;
            position: relative;
            margin: 20px;
        }

        .close-btn {
            position: absolute;
            right: 15px;
            top: 10px;
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }

        .close-btn:hover {
            color: #000;
        }

        .button-container {
            display: flex;
            justify-content: center;
            gap: 10px; /* Space between buttons */
            margin-top: 20px;
        }

        .popup-button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            text-align: center;
            flex: 1; /* Make buttons equal width */
            max-width: 150px; /* Limit maximum width */
        }

        .close-button {
            background-color: #666;
            color: white;
        }

        .close-button:hover {
            background-color: #444;
        }

        .action-button {
            background-color: #4CAF50; /* Green color for action button */
            color: white;
        }

        .action-button:hover {
            background-color: #45a049;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @media (max-width: 480px) {
            .popup-content {
                padding: 15px;
                width: 85%;
                margin: 15px;
            }
            
            .popup-button {
                padding: 8px 15px;
                font-size: 14px;
                max-width: 120px;
            }
            
            .button-container {
                gap: 8px;
            }
        }

        @media (max-height: 400px) {
            .popup {
                align-items: flex-start;
                overflow-y: auto;
            }
            .popup-content {
                margin-top: 10px;
            }
        }

        @supports (-webkit-touch-callout: none) {
            .popup {
                height: -webkit-fill-available;
            }
        }