#product #photos{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

#product #photos .photo{
	border:1px solid #ECECEC;
	box-sizing:border-box;
	align-self: stretch;
}

#product #photos .photo:first-child{
	flex-grow:1;
	flex-basis:calc(100%);
	aspect-ratio: 1 / 1;
}

#product #photos .photo:not(first-child){
	flex-grow:0;
	flex-basis:calc(25% - 7.5px); 
}

#product #photos .photo a img{
	width:100%;
    display:block;
}

#product #description #review-overview{
	margin-bottom:15px;
}

#product #description #review-overview #stars{
	color:#f5b301;
	font-size: 18px;
	display:inline-block;
}

#product #description #review-overview #stars .fa-star-half-stroke {
  background: linear-gradient(90deg, #f5b301 50%, #f5b301 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#product #description #review-overview #rating{
	font-weight:bold;
	display:inline-block;
}

#product #description #review-overview #number-of-reviews{
	font-size:12px;
	display:inline-block;
}

#product #description #size-guide{
	float:right;
}

#product #description #benefits .benefit{
	margin-bottom:3px;
	display:flex;
    align-items:center;
}

#product #description #benefits .benefit:last-child{
	margin-bottom:0px;
}

#product #description #benefits .benefit span{
	margin-right:10px;
	font-size:18px;
}

#product #description dialog#maattabel{
  border: none;
  border-radius: 12px;
  padding: 1.5rem;
  width: calc(100% - 3rem - 20px);
  max-width: 520px;
  max-height: 85vh;
}

#product #description dialog#maattabel::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

#product #description dialog#maattabel .close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

#product #description dialog#maattabel .table-wrapper {
  overflow-x: auto;
  margin-top: 1rem;
}

#product #description dialog#maattabel table {
  width: 100%;
  min-width: 300px;
  border-collapse: collapse;
}

#product #description dialog#maattabel caption {
  caption-side: bottom;
  padding-top: 0.75rem;
  font-size: 0.85rem;
  color: #666;
}

#product #description dialog#maattabel th, dialog#maattabel td {
  padding: 0.6rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

#product #description dialog#maattabel .unit-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #666;
}

#product #description #discount{
    display:inline-block;
    padding:6px 10px;
    margin-bottom:20px;

    background-color:#f4f7f9;
    border:1px solid #d6e2ea;
    border-left:4px solid #3aa0d8;

    color:#2c3e50;
    font-weight:600;
    font-size:0.95rem;
}


#product #description #price{
	font-size:25px;
	font-weight:bold;
	/*color:#496DAA;*/
}

#product #description #price #old-price{
	font-size:20px;
	color:grey;
	text-decoration:line-through;
	display:inline-block;
	margin-left:10px;
}

#product #description #price #addition{
	font-size:12px;
	color:grey;
	display:block;
	font-weight:normal;
	margin-top:5px;
}

#product #description #shipping-information{
	font-size:14px;
	margin-top:10px;
}

#product #description #shipping-information.green{
	color:green;
}

#product #description #shipping-information.red{
	color:red;
}

#product #description select[name="quantity"] {
	width:60px;
	text-align:center;
}

#product #description input[type="submit"][name="add_product"], #product #description .button{
	width:100%;
}

#product #description #always-visible-shopping-cart input[type="submit"][name="add_product"]{
	width:calc(100% - 60px);
}

#product #description input[type="submit"][name="add_product"]:disabled{
	width:100%;
	float:none;
}

#product #description #always-visible-shopping-cart{
	text-align:center;
	position: fixed;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	opacity: 100%;
	width:100%;
	display:block;
	padding-bottom:30px;
	padding-top:10px;
	height:40px;
	background-color:#FFFFFF;
}

#product #description #always-visible-shopping-cart:hover{
  opacity: 100%;
}

#product #description #guarantee{
	margin-top:15px;
	text-align:center;
	color:grey;
}

#product #description #payment-methods{
	text-align:center;
	margin-top:15px;
}

#product #description #payment-methods img{
	width:50px;
}

#product #product-benefit{
	width:60%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:40px;
}

#product .faq-item {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  background-color: #fafafa;
}

#product .faq-item summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  outline: none;
}

#product .faq-item summary::-webkit-details-marker {
  display: none;
}

#product .faq-item[open] {
  background-color: #f0f8ff;
  border-color: #aaa;
}

#product .faq-item p {
  margin-top: 0.5rem;
}

#product #unique-selling-points{
	background-color:#F3F4F6;
	padding:50px;
	font-size:14px;
	margin-top:50px;
	margin-bottom:50px;
	gap:12.5px;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#product #unique-selling-points .unique-selling-point{
	display:flex;
    align-items:center;
	justify-content: center;
}

#product #unique-selling-points .unique-selling-point .fa{
	font-size:30px;
	display:block;
	margin-right:20px;
}

#product .reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: calc(100%);
	margin: 0 auto;
	align-items: start;
}

/* Algemene kaart styling */
#product .review, #product .add-review {
	background: #fff;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	
	position: relative;
  z-index: 999;
}

/* Hover effect voor beide */
#product .review:hover, #product .add-review:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

/* Afbeelding */
#product .review img {
	width: 50%;
	border-radius: 8px;
	margin-top: 10px;
	object-fit: cover;
}

/* Sterren */
#product .stars {
	color: #f5b301;
	margin-bottom: 8px;
	font-size: 18px;
}

#product .stars .fa-star-half-stroke {
  background: linear-gradient(90deg, #f5b301 50%, #f5b301 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tekst */
#product .review p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

/* Add review kaart */
#product .add-review {
	border: 2px dashed #dcdcdc;
	padding: 0;
	overflow: hidden; /* belangrijk voor hover */
}

/* Hele kaart klikbaar */
#product .add-review a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 20px 10px;
	text-decoration: none;
	color: #666;
	font-size: 18px;
	font-weight: 600;
	transition: background 0.2s ease;
}

/* Hover alleen op link */
#product .add-review a:hover {
	background: #f5f5f5;
}

#ad-photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

#ad-photos .ad-photo {
	width: 100%;
	display: block;
	border-radius: 8px; /* optioneel */
}

/* Tablet: 2 naast elkaar */
@media (max-width: 1024px) {
	#ad-photos {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* iPhone / mobiel: alles onder elkaar */
@media (max-width: 767px) {
	#ad-photos {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 900px) {
	#product .reviews {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	#product .reviews {
		grid-template-columns: 1fr;
	}
}

@media (max-width:1024px){
	#product{
		gap:25px;
	}
	
	#product #unique-selling-points{
		background-color:#FFFFFF;
		margin-top:25px;
		margin-bottom:25px;
		padding:0px;
		font-size:14px;
		gap:10px;
	}

	#product #unique-selling-points .unique-selling-point{
		margin-bottom:0px;
		background-color:#F3F4F6;
		padding:25px;
		flex-basis: 100%; 
		
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
}

@media (max-width:800px){
	#product #photos{
		flex-basis:100%; 
	}
	
	#product #description{
		flex-basis:100%; 
	}
	
	#product #description input[type="submit"][name="add_product"]#always-visible-shopping-cart{
		display:block;
	}
	
	#product #product-benefit{
		width:100%;
		margin-bottom:0px;
	}
	
	#reviews .review{
		justify-content: center;
		flex-basis: 100%; 
	}
}

@media (max-width: 480px) {
	dialog#maattabel{
		padding: 1rem;
	}

	dialog#maattabel h2{
		font-size: 1.25rem;
	}
}