/**** grid ****/
.grid-product-container {
  display: grid;
  grid-template-columns: 3fr 3fr; 
  /*gap: 20px;*/
  /*border: 1px solid red;*/ /* optional for debugging */
}
 
.grid-product-left {
	gap: 0.5rem;               /* space between buttons */
	text-align: right;         
	/*padding-right: 10px;*/
	/*border: 1px solid yellow;*/ /* optional for debugging */	
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* prevents internal elements from forcing overflow */
}


.grid-product-right {
	font-size: 1.2rem;
	/*gap: 0.5rem;*/             /* spacing between elements */
	padding-top: 20px;
	text-align: left;
	/*padding-left: 10px;*/
	/*border: 1px solid green;*/   /* optional for debugging */ 
	width: 100%;  
}

.grid-product-right h1 {
 /*border: 1px solid #ccc;*/
 margin-top:0px;
 margin-left:0px;
 margin-right:10px;
 margin-bottom:10px;
} 

.grid-product-right span {
 /*border: 1px solid #ccc;*/
 margin-top:0px;
 margin-left:0px;
 margin-right:2px;
 margin-bottom:10px;
} 

.grid-product-right p {
 /*border: 1px solid #ccc;*/
 margin-top:0px;
 margin-left:0px;
 margin-right:10px;
 margin-bottom:10px;
} 

.grid-product-add-to-cart-panel {
 /*border: 1px solid #ccc;*/
 margin-top:10px;
 margin-bottom:10px;
} 


/**** grid single line ****/
.grid-product-single-line-container {
  font-size: 1.2rem;	
  display: grid;
  grid-template-columns: 1fr; 
  /*gap: 20px;*/
  /*border: 1px solid red;*/ /* optional for debugging */
}

.grid-product-single-line-container-flex {
  font-size: 1.2rem;	
  display: flex;
  justify-content: space-between;  /* left + right */
  align-items: center;             /* center vertically */
  flex-wrap: wrap;                 /* allow wrap on small screens */
  gap: 10px;                       /* spacing when wrapped */
}


.grid-product-single-line-container p {
 margin-top:0px;
 margin-left:0px;
 margin-right:10px;
 margin-bottom:10px;
}

.grid-product-paginator {
  font-size: 1.2rem;
  display: flex;
  gap: 10px;
  justify-content: center; /* centers the links horizontally */
  flex-wrap: wrap;       /* <-- allows multiple lines */
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:10px;
}

.grid-product-paginator  a {
    display: inline-block;   /* makes the link behave like a box */
    padding: 8px 12px;        /* space inside the box */
    border: 1px solid #ccc;   /* border around the box */
    border-radius: 6px;       /* optional rounded corners */
    background-color: #f9f9f9;
    text-decoration: none;    /* remove underline */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.grid-product-paginator a:hover,
.grid-product-paginator a.active {
	/*background: #f0f0f0;*/
	color: #0078e7;
	border-color: #999; 
}

.breadcrumb {
	margin-top:10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	/*border: 1px solid green;*/ /* optional for debugging */
}

.filters{
	margin-top:10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	/*border: 1px solid green;*/ /* optional for debugging */
}


.filters.right {
    margin-left: auto;   /* pushes the element to the right */
}

/****** input ******/
#quantityInput {
	width: 40px; 
	min-width: 0;           /* allow shrinking in flex container */
	border: 1px solid #ccc;
	border-radius: 6px;
	/*border: none; */
	outline: none;
	padding: 0.5rem;
}

/****** buttons ******/
.grid-product-right button {
	background: #0078e7;
	color: white;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	margin-bottom: 10px;
	cursor: pointer;
}

.grid-product-container button:hover {
	background: #005bb5;
}

/********tag links ********/
a.tag-link  {
    display: inline-block;   /* makes the link behave like a box */
    padding: 8px 12px;        /* space inside the box */
    margin:2px;					/* space outside the box */
    border: 1px solid #ccc;   /* border around the box */
    border-radius: 6px;       /* optional rounded corners */
    background-color: #f9f9f9;
    text-decoration: none;    /* remove underline */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    
}

a.tag-link:hover {
    /*background: #0078e7;*/
    color: #0078e7;
    border-color: #999; 
}



/*add to cart*/
.add-to-cart-container {
    display: inline-block;
    vertical-align: middle;  /* keeps them aligned nicely */
    
    /*display: flex;   */
    /*align-items: center;*/
    /*gap: 10px;*/  /* spacing between button and span */
}

.addToCartResult{
	/*display: none;*/
}


.addToCartResult.hidden { 
	display: none; 
}
.addToCartResult.visible { 
	display: inline-block; 
}

.added-spin {
	display: inline-block;   /* IMPORTANT */
    animation: spin 0.5s linear;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
} 


button.add-to-cart-btn {
	background: #0078e7;
	color: white;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: background 0.2s;
}


button.add-to-cart-btn:hover {
  background: #005bb5;
}


a.show-cart-btn { 
    display: inline-block;
    background-color: #1cb841;
    color: white;
    padding: 8px 16px;
    margin-bottom: 10px;
    border-radius: 6px;
    text-decoration: none; /* remove underline */
    cursor: pointer;
    transition: background 0.2s;
}

a.show-cart-btn:hover {
    background-color: #189d37; /* darker green on hover */
	color: white;
}


/*********** responsive 1076px **************/
@media (max-width: 1076px) {
	

	

}

/*********** responsive 768px **************/
@media (max-width: 768px) {

	.grid-product-container { 
	  grid-template-columns: 1fr; 
	}
		
	.grid-product-left{
		text-align: left;
	}	
	
	.grid-product-right {
		text-align: left;
		padding-top: 0px;
	}
		
}

/*********** responsive 480px **************/
@media (max-width: 480px) {

	.filters{
		margin-top:0px;
	}
			
}