/* =======================================================================
   THEME VARIABLES
   ======================================================================= */
:root{
  --primary: #4f46e5;
  --muted:   #6b7280;
  --border:  #e5e7eb;
  --bg-soft: #fafafa;
  --radius:  12px;
}
/* quick reset */
*,*::before,*::after{box-sizing:border-box} body{margin:0;font-family:system-ui,Arial,sans-serif;color:#111;line-height:1.6}

/* =======================================================================
   OUTER WRAPPER
   ======================================================================= */
.product-container{
  max-width:1180px;
  margin:0 auto;
  padding:2rem 1rem;
}
.hero-section{
  display:flex;flex-wrap:nowrap;gap:2rem;margin-bottom:3rem; flex-direction:row;
}
.hero-left{flex:1 1 550px;min-width:650px}
.hero-right-content  {
    flex: 1 1 380px;
    min-width: 260px;
    display: flex
;
    flex-direction: column;
    gap: 5px;
    padding: 10px 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
	    padding-bottom: 30px;
	margin-bottom:10px;
}
.additional-info {
    display: flex
;
    flex-direction: column;
    gap: 0;
    padding: 10px 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    padding-bottom: 15px;
    margin-bottom: 10px;
    line-height: 2px;
}


.hero-right h1{
	font-size:25px;
	line-height: 27px;
	    margin: 3px auto !important;
	
}
.short-description p{
	   margin: 3px !important;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb{
	    padding-left: 10px;
}
.review-count{
	    margin-top: 10px;
}
.reviews{
    display: flex
;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    gap: 8px;
}
/* =======================================================================
   PRICE + TAGS
   ======================================================================= */
.price{font-size:1.75rem;font-weight:700;display:flex;align-items:center;gap:.75rem}
.price .regular{color:var(--muted);text-decoration:line-through;font-size:.95rem}
.price .discount{background:#22c55e;color:#fff;font-size:.7rem;padding:.15rem .45rem;border-radius:4px}
.tags span{display:inline-block;background:#f3f4f6;padding:.25rem .6rem;margin:.2rem;border-radius:4px;font-size:.75rem}

/* =======================================================================
   BUTTONS
   ======================================================================= */
.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.75rem 1.25rem;border-radius:8px;font-weight:600;text-decoration:none;
  transition:.2s;user-select:none
}
.button:hover{transform:translateY(-1px)}
.buy-now{background:#111;color:#fff}
.demo-btn{background:#fff;border:1px solid var(--border)}
.demo-btn:hover{background:var(--bg-soft)}

/* =======================================================================
   GALLERY  (pure CSS + tiny JS, keeps constant frame)
   ======================================================================= */
/* Gallery Positioning */
.hero-gallery {
  position: relative;
  width: 100%;
  overflow: hidden !important;
}

/* Track and Slide Sizing */
.gallery-track {
  display: flex;
  transition: transform .45s ease;
  height: auto !important;
}

.gallery-slide {
  width: 100%;
  min-width: 100%;
  height: auto !important;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image Containment */
.gallery-slide img {
	    border-radius: 10px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Dots Positioning */
.gallery-dots {
  position: absolute;
  bottom: 20px; /* Adjust this value as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.gallery-dots .dot.active,
.gallery-dots .dot:hover{background:var(--primary)}
.hero-gallery.has-gallery .gallery-track{cursor:grab}
.hero-gallery.has-gallery .gallery-track:active{cursor:grabbing}

/* single-image mode (no gallery) */
.hero-gallery:not(.has-gallery) .gallery-track{display:block}
/* stop native drag ghost on gallery images */
.hero-gallery img {
  user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ----------  REVIEWS PANEL  ---------- */
#reviews {
  padding: 1rem 0;
}

/* Style the existing comment list */
.woocommerce-Reviews .comment-list {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.woocommerce-Reviews .comment-list li {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}
.woocommerce-Reviews .comment-list li:last-child {
  border-bottom: none;
}
.woocommerce-Reviews .comment-list .comment-content {
  margin-top: .5rem;
  color: #444;
  font-size: .95rem;
}

/* Highlight the star rating chart */
.woocommerce-review__rating {
  color: var(--primary);
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

/* Review form container */
#review_form_wrapper {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}
#review_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Style form fields */
#review_form textarea,
#review_form input[type="text"],
#review_form input[type="email"] {
  width: 100%;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .95rem;
  resize: vertical;
}

/* Style the submit button */
#review_form #submit {
  width: fit-content;
  background: var(--primary);
  color: #fff;
  padding: .75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s;
}
#review_form #submit:hover {
  background: #3730a3;
}

/* Ensure required-star labels are visible */
.woocommerce-form-rating p.stars {
  margin: 0 0 1rem;
}
.woocommerce-form-rating p.stars label {
  cursor: pointer;
  color: var(--muted);
}
.woocommerce-form-rating p.stars label:hover,
.woocommerce-form-rating p.stars label:hover ~ label,
.woocommerce-form-rating p.stars .active {
  color: var(--primary);
}



/* =======================================================================
   TABS
   ======================================================================= */
.tab-system{margin-top:3rem}
.tabs{
	align-items:center;
	justify-content:center;
	list-style:none;
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;
}
.tabs a{
  padding:.6rem 1rem;font-weight:600;border-radius:50px;
  background:var(--bg-soft);text-decoration:none;color:#111
}
.tabs a.active{background:var(--primary);color:#fff}
.tab-content>div{display:none;animation:fade .25s ease}
.tab-content>div.active{display:block}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- typography inside tabs ---------- */
/* Hide default "customer reviews" text */
.woocommerce-product-rating .woocommerce-review-link {
    display: none !important;
}

#features{white-space:normal}           /* keeps line breaks from textarea */

/* =======================================================================
   VIDEO WRAPPER
   ======================================================================= */
.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius)}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/* =======================================================================
   FAQ ACCORDION
   ======================================================================= */
.faq-accordion details{
  border:1px solid var(--border);border-radius:var(--radius);margin:.6rem 0;background:#fff;overflow:hidden;
  transition:box-shadow .25s
}
.faq-accordion details[open]{box-shadow:0 2px 6px rgba(0,0,0,.06)}
.faq-accordion summary{
  cursor:pointer;list-style:none;padding:1rem 1.25rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center
}
.faq-accordion summary::-webkit-details-marker{display:none}
.faq-accordion summary::after{
  content:'▼';font-size:.8rem;color:var(--muted);transition:transform .25s
}
.faq-accordion details[open] summary::after{transform:rotate(180deg)}
.faq-accordion .answer{padding:0 1.25rem 1rem;border-top:1px solid var(--border);font-size:.95rem}

/* =======================================================================
   RELATED PRODUCTS
   ======================================================================= */
.related-products h2{margin:3rem 0 1rem;font-size:1.5rem}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media(max-width:768px){
	.woocommerce-breadcrumb{
		display:none;
	}
	.product-container{
		padding: 10px 0;
	}
	.tabs{
		flex-wrap: nowrap;
		    justify-content: flex-start;
		    margin-left: -30px !important;

	}
	.hero-right-content{
		padding: 15px 20px; 
		    padding-bottom: 15px;
    
	}
	
	
	
	.tabs a {
    padding: .6rem 1rem;
		line-height: 45px;}
	.hero-right h1 {
    font-size: 18px;
		line-height: 24px;}
	
	.buttons {
   
    flex-direction: column;
}
	    .product-actions {
        flex-direction: row !important;
    }
	.hero-left
	{
		min-width:auto;
		flex:0;
	}
	
	
  .hero-section{flex-direction:column}
  .hero-right{padding:0}
  .price{font-size:1.5rem}
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
}


.tab-content{
	max-width: 1200px;
   
}


.buttons{
	display:flex;
	gap:10px;
	width:100%;
}

.demo-btn{
	padding:12px 30px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center;
	gap:10px;
	border-radius:5px !important;
	background:rgb(79 70 229) !important;
	color:white !important;
	width:100%;
}

.buy-now{
	padding:12px 30px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center;
	gap:10px;
	border-radius:5px !important;
	background:rgb(22 163 74) !important;
	color:white !important;
		width:100%;
}
.product-images-left{
	
    padding: 10px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 30px;
}
}