@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body{  font-size: 14px; overflow-x: hidden; font-family: "Montserrat", sans-serif; color: var(--font-colour);  letter-spacing: 0;}
a, a:link, a:visited, a:hover, a:active, button, button:hover, i, i:hover, h6, h6:hover, img, .form-control:focus{ box-shadow: none; text-decoration:none; outline:none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
img{ max-width:100%;} input, textarea, button, input:focus, textarea:focus, button:focus{outline: none;}
a, a:hover, a:focus{color:inherit;}
ul{list-style: none; padding: 0px; margin: 0px;}
p{line-height: 24px; margin-bottom: 0px;}
.logo img{max-height: 45px;  position: relative;}
header{padding: 10px 30px; display: flex; align-items: center; justify-content: space-between; border: var(--border); position: relative;
background: var(--bg-white); z-index: 2;}
.header-icons{display: flex; gap: var(--gap-20); align-items: center;}
.header-icons div{position: relative;}
.header-icons div sup{font-size: 14px; color: var(--secondary); font-weight: 700; right: -8px; position: absolute; top: 0;}
.header-icons img{max-width: 36px;}
.blur-1{width: 300px; height: 100px; border-radius: 50%; background: linear-gradient(to right, var(--white), var(--bg-light));
filter: blur(30px); position: absolute; right: 0;}
.blur-2{width: 300px; height: 100px; border-radius: 50%; background: linear-gradient(to left, var(--white), var(--bg-light));
filter: blur(30px); position: absolute; left: 0;}
.main-categories{position: relative; display: flex; gap: 30px; justify-content: center; padding: 30px 0px; flex-wrap: nowrap; overflow: hidden;}
.category-name{display: flex; flex-direction: column; gap: var(--gap-10); align-items: center; position: relative; flex-shrink: 0; }
.category-name img{width: 80px; height: 80px; object-fit: cover; border-radius: 50%; transition: 0.3s all ease-in-out;}
.category-name:hover h6, .category-name.active h6{color: var(--secondary);}
.category-name:hover img, .category-name.active img{transform: translateY(-5px);}
.product-list{padding: 20px 30px; display: flex; flex-direction: column; gap: var(--gap-10); border: var(--border); border-radius:var(--radius-10);}
.product-title h4{font-weight: 700;}
.p-30{padding: 10px 30px;}
.product-items{border: var(--border); border-radius: var(--radius-10); padding: 14px; display: flex; flex-direction: column; gap: var(--gap-10);}
.product-img{position: relative; text-align: center;}
.product-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;}
.product-container2{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;}
.product-container2 .product-img img{max-height: 158px;}
footer{padding: 20px 30px; position: relative; overflow: hidden; border-top: var(--border); margin-top: 20px;}
.blur-footer{width: 300px; height: 100px; border-radius: 50%; background: linear-gradient(to right, var(--white), var(--bg-light));
filter: blur(30px); position: absolute; right: 0;}
.blur-footer2{width: 300px; height: 100px; border-radius: 50%; background: linear-gradient(to left, var(--white), var(--bg-light));
filter: blur(30px); position: absolute; left: 0;}
.footer-container{position: relative; display: flex; align-items: center; justify-content: space-between;}
.footer-container svg{max-width: 20px; color: var(--secondary);}
.footer-contact{display: flex; gap: var(--gap-10);}
.grid-4{display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
.zoom-container { position: relative; overflow: hidden; border: var(--border);}
.zoom-container img { width: 100%; transition: transform 0.2s ease; transform-origin: center center; cursor: crosshair;}
.thumbs { display: flex; gap: 10px; margin-top: 12px; justify-content: center;}
.thumbs img { width: 80px; cursor: pointer; border: 2px solid var(--f5f5f5);}
.thumbs img.active { border-color: var(--secondary);}
.dflex3{display: flex; gap: 60px;}
.product-details{display: flex; flex-direction: column; gap: var(--gap-20);}
.product-details h4{font-weight: 700; color: var(--secondary);}
.qty-box { display: inline-flex; align-items: center; border: var(--border); width: fit-content;}
.qty-box input { width: 50px; text-align: center; border: none; outline: none; font-size: 16px;}
.qty-btn {width: 40px; height: 40px; border: none; background: #fff; cursor: pointer; font-size: 20px;}
.qty-btn:hover { background: #f5f5f5;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
input[type=number] { -moz-appearance: textfield;}
.column-1{display: flex; flex-direction: column; gap: var(--gap-10);}
.line-1{width: 100%; border-bottom: var(--border);}
.size-area{display: flex; gap: var(--gap-10); flex-wrap: wrap;}
.size-box{min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: var(--border); cursor: pointer;}
.size-box.active{border-color: var(--secondary); color: var(--secondary);}
.dflex4{display: flex; gap: 15px;}
.cart-items-section{display: flex; flex-direction: column; gap: var(--gap-20);}
.cart-items-box { padding: var(--pad-20); border-radius: var(--radius-10); border: var(--border);  display: flex; justify-content: space-between;}
.cart-remove { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
background: var(--f5f5f5); flex-shrink: 0;}
.cart-image img { max-height: 100px;}
.cart-items { display: flex; align-items: center; gap: var(--gap-10);}
.cart-content { display: flex; flex-direction: column; gap: var(--gap-10);}
.cart-content h6 { font-weight: 300; display: flex; gap: var(--gap-10); align-items: center;}
.cart-content h6 span { color: var(--secondary); font-weight: 700;}
.cart-price-box { padding: 30px; border: var(--border); border-radius: var(--radius-10); flex-direction: column; gap: 30px; display: flex;
position: sticky; top: 90px; z-index: 1;}
.discount-area { display: flex; flex-direction: column; gap: 12px;}
.discount-area h6 { font-weight: var(--font-900);}
.discount-input { position: relative;}
.discount-input input { border: var(--border); border-radius: var(--radius-10); padding: 8px 16px; width: 100%; height: 56px;}
.activation { color: var(--secondary); font-weight: 600; cursor: pointer; position: absolute; top: 50%;
right: 0; transform: translate(-50%, -50%);}
.payment-area h5{font-weight: 600;}
.price-area { display: flex; flex-direction: column; gap: var(--gap-20);}
.cart-price-section { flex: 1; position: relative;}
.subject-price { display: flex; justify-content: space-between;}
.discount-price { display: flex; justify-content: space-between; color: var(--red);}
.total-price { display: flex; justify-content: space-between;}
.price-area h6 { font-weight: 600;}
.checkout-order{padding: 30px; border: var(--border); border-radius: var(--radius-10); display: flex; flex-direction: column; gap: var(--gap-20);}
.checkout-product{display: flex; gap: var(--gap-10);}
.checkout-info{background: var(--bg-light); padding: var(--pad-20); border-radius: var(--radius-10);}
.cart-image{flex-shrink: 0;}
.invoice-page{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 40px; min-height: 79vh;}
.invoice-box{display: flex; flex-direction: column; gap: var(--gap-20); border: var(--border); border-radius: var(--radius-10); padding: 30px;
width: 100%; max-width: 550px;}
.succes-icon{position: relative; text-align: center;}
.succes-icon img{position: relative; max-width: 200px;}
.invoice-title{text-align: center; display: flex; flex-direction: column; gap: var(--gap-10); position: relative;}
.invoice-title h5{font-weight: 700;}
.invoice-number{display: flex; justify-content: space-between; gap: var(--gap-20);}
.invoice-number-box h6{font-weight: 700;}
.invoice-details{border: var(--border); padding: var(--pad-20); border-radius: var(--radius-10); display: flex; flex-direction: column;
gap: var(--gap-10);}
.invoice-details h6{font-weight: 600;}
.error-img{position: relative; text-align: center;}
.error-img img{position: relative;}
.flex-direction{display: flex; flex-direction: column; gap: var(--gap-20);}
.error-content{text-align: center;}
.error-content h5{font-weight: 700;}
.error-content h5 span{color: var(--red);}
.cart-img{position: relative;}
.cart-img img{max-height: 180px; position: relative;}
.empty-cart{display: flex; flex-direction: column; gap: var(--gap-20); text-align: center; align-items: center;}
.empty-cart h4{font-weight: 700;}
.empty-cart .btn-primary{max-width: 200px;}
.product-items h6{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
height: 39px;}
.select-school{display: flex; align-items: center; gap: 5px;}
.select-school span{ max-width: 10ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.select-icon{width: 24px; height: 24px; background: var(--check-mark); background-repeat: no-repeat; background-size: cover;}
.school-name.selected .select-icon{background: var(--check-mark-check); background-repeat: no-repeat; background-size: cover;}
.school-name{display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-bottom: var(--border);
padding-bottom: var(--gap-20);}
.school-name:last-child{border: none; padding: 0px;}
.school-name.selected h6{color: var(--secondary);}
.out-stock{color: var(--grey); cursor:not-allowed; text-decoration:line-through;}
.cart-success{ position: fixed; bottom: 20px; right: 20px; background: var(--green); color: var(--white); padding: 12px 20px; border-radius: 6px;
display: none; z-index: 222;}
.stock-message{position: fixed; bottom: 20px; right: 20px; background: var(--red); color: var(--white); padding: 12px 20px; border-radius: 6px;
display: none; z-index: 222;}
.product-img img{max-height: 220px;}
.displa-flex{display: flex; flex-wrap: wrap; gap: var(--gap-20);}
.grid-auto{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;}
.display-flex{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap-20);}
.brd-none{border: none;}