/*main css*/

/*if something does not work check background and add '-color'*/
/*GLOBAL*/
body { 
	font-family: Arial; 
	background:#f9f9f9; 
	color:#333; 
	}

/*NAVBAR*/
.navbar { 
	background:#333; 
	color:white; 
	padding:0.9375rem 1.25rem; 
	display:flex; 
	justify-content:space-between; 
	align-items:center;
	}
	
	.navbar a { 
		color:white; 
		text-decoration:none;
		font-size:1rem;
		font-weight:bold; 
		}
	
/*IMAGE GRID*/
.image-grid { 
	}
	
.image-card {  
	position:relative; 
	}
	
	.image-card img { 
		width:100%; 
		height:auto; 
	}







/*INFO BUTTON*/
.info-btn { 
top:0.556rem; 
right:0.556rem; 
border:none; 
cursor:pointer; 
border-radius:50%; 
font-weight:bold; 
position:absolute; 
}	
.info-icon { 
	}	


/*DETAILS (heading + price)*/
.image-details { 
	margin-top:0.556rem; 
	}

.heading { 
	font-weight:bold; 
	}

.price { 
	color:green; 
	}


/*CATEGORY NAVBAR*/
.category-bar {
		display: flex;
		align-items: center;
		gap: 6px;
		border-bottom: 1px solid #ddd;
		padding: 6px 8px;
		font-family: Arial, sans-serif;
	}

.categories {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
	flex: 1;
	}

	.categories::-webkit-scrollbar {
		display: none;
	}

	.categories a {
		text-decoration: none;
		padding: 8px 12px;
		font-size: 15px;
		color: #000;
		white-space: nowrap;
	}

	.categories a:hover {
		text-decoration: underline;
	}

.scroll-btn {
	border: none;
	background: none;
	cursor: pointer;
	font-size: 20px;
	color: #555;
	}

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

/**/
.previous {
      background-color: #f1f1f1;
      color: black;
      display: inline-block;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
      margin: 2rem;
    }

.next {
      display: inline-block;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
      margin: 2rem;
    }
	
    .sticky {
      position: fixed;
      bottom: 20px;
      right: 20px;
    }

    .sticky a {
      background-color: #04AA6D;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 50px;
      text-decoration: none;
      font-weight: bold;
      display: inline-flex;
      align-items: center;
    }

    .sticky svg {
      margin-right: 5px;
    }
	
/**/
/* Responsive tweaks (no column change) */
    @media (max-width: 42.667rem) {
      .navbar {
        <!--flex-direction: column;-->
        align-items: center;
        text-align: center;
      }

      .navbar a {
        margin: 0.556rem 0rem;
        font-size: 0.889rem;

      }

      .heading {
        font-size: 0.833rem;
      }

      .price {
        font-size: 0.722rem;
      }

      .info-btn {
        padding: 0.333rem;
      }
    }

	/*small screen 480px*/
    @media (max-width: 26.667rem) {
		.navbar {
			padding: 0.556rem;
		}
		.navbar a {
			font-size: 0.778rem;
		}

		.heading {
			font-size: 0.778rem;
		}

		.price {
			font-size: 0.667rem;
		}

		.info-btn {
			font-size: 0.778rem;
			padding: 0.278rem;
		}
		  
		.image-card {
			position: relative;
			background: white;
			border: 1px solid #ccc;
			border-radius: 0.278rem;
			overflow: hidden;
			padding: 0.556rem;
			transition: transform 0.2s;
			width: 100%;
			max-width: 11.875rem; /* 190px */
		}
    }
	
	
/*other*/