/*==================================================
AVATT TECHNOLOGIES
products.css
PART 1 OF 5
PRODUCT HERO • SEARCH • FILTERS
PRODUCT GRID • PRODUCT CARD
==================================================*/

/*=========================================
CSS VARIABLES
=========================================*/

:root{

--primary:#0056b3;
--secondary:#0099ff;
--accent:#00bcd4;

--dark:#1a1a1a;
--light:#ffffff;

--gray-100:#f8f9fa;
--gray-200:#eeeeee;
--gray-300:#dddddd;
--gray-500:#777777;
--gray-700:#444444;

--success:#28a745;
--danger:#dc3545;

--radius:14px;

--shadow-sm:0 5px 15px rgba(0,0,0,.08);

--shadow-md:0 10px 25px rgba(0,0,0,.12);

--shadow-lg:0 18px 40px rgba(0,0,0,.16);

--transition:.35s ease;

}



/*=========================================
PRODUCT HERO
=========================================*/

.products-hero{

padding:120px 0 70px;

background:linear-gradient(

135deg,

rgba(0,86,179,.95),

rgba(0,153,255,.88)

),

url("../images/products-banner.jpg")

center/cover no-repeat;

color:#fff;

text-align:center;

position:relative;

overflow:hidden;

}



.products-hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.08),

transparent

);

animation:heroShine 8s linear infinite;

}



.products-hero h1{

font-size:3rem;

font-weight:700;

margin-bottom:20px;

}



.products-hero p{

max-width:760px;

margin:auto;

font-size:1.15rem;

line-height:1.8;

opacity:.95;

}



/*=========================================
SEARCH BAR
=========================================*/

.products-toolbar{

display:flex;

flex-wrap:wrap;

justify-content:space-between;

align-items:center;

gap:20px;

padding:40px 0;

}



.search-box{

position:relative;

flex:1;

min-width:280px;

}



.search-box input{

width:100%;

padding:15px 55px 15px 20px;

border:2px solid var(--gray-300);

border-radius:50px;

font-size:16px;

transition:var(--transition);

background:#fff;

}



.search-box input:focus{

border-color:var(--primary);

outline:none;

box-shadow:0 0 0 4px rgba(0,86,179,.15);

}



.search-box i{

position:absolute;

right:22px;

top:50%;

transform:translateY(-50%);

font-size:18px;

color:var(--gray-500);

}



/*=========================================
SORT DROPDOWN
=========================================*/

.sort-box{

min-width:220px;

}



.sort-box select{

width:100%;

padding:15px 20px;

border-radius:50px;

border:2px solid var(--gray-300);

background:#fff;

cursor:pointer;

transition:var(--transition);

}



.sort-box select:focus{

border-color:var(--primary);

outline:none;

}



/*=========================================
CATEGORY FILTER
=========================================*/

.category-container{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:15px;

margin-bottom:40px;

}



.category-btn{

padding:12px 28px;

background:#fff;

border:2px solid var(--gray-300);

border-radius:50px;

cursor:pointer;

font-weight:600;

transition:var(--transition);

}



.category-btn:hover{

background:var(--primary);

color:#fff;

border-color:var(--primary);

transform:translateY(-3px);

}



.category-btn.active{

background:var(--primary);

color:#fff;

border-color:var(--primary);

box-shadow:var(--shadow-sm);

}



/*=========================================
PRODUCT COUNT
=========================================*/

#productCount{

font-weight:600;

color:var(--gray-700);

margin-bottom:25px;

}



/*=========================================
GRID
=========================================*/

.product-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(320px,1fr));

gap:35px;

margin-bottom:50px;

}



/*=========================================
PRODUCT CARD
=========================================*/

.product-card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow-sm);

transition:var(--transition);

position:relative;

display:flex;

flex-direction:column;

height:100%;

}



.product-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}



/*=========================================
CARD BADGE
=========================================*/

.product-category{

display:inline-block;

background:rgba(0,86,179,.08);

color:var(--primary);

padding:6px 16px;

border-radius:30px;

font-size:13px;

font-weight:600;

margin-bottom:15px;

}



/*=========================================
IMAGE
=========================================*/

.product-image{

height:260px;

overflow:hidden;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

}



.product-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.product-card:hover

.product-image img{

transform:scale(1.08);

}



/*=========================================
CONTENT
=========================================*/

.product-content{

padding:28px;

display:flex;

flex-direction:column;

flex:1;

}



.product-content h3{

font-size:1.35rem;

margin-bottom:15px;

color:var(--dark);

}



.product-content p{

color:var(--gray-500);

line-height:1.7;

margin-bottom:25px;

flex:1;

}



/*=========================================
FOOTER
=========================================*/

.product-footer{

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

margin-top:auto;

}



/*=========================================
BUTTON
=========================================*/

.product-footer .btn{

width:100%;

text-align:center;

padding:14px 24px;

border-radius:50px;

font-weight:600;

transition:var(--transition);

}



.product-footer .btn:hover{

transform:translateY(-3px);

}



/*=========================================
HOVER OVERLAY
=========================================*/

.product-card::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}



.product-card:hover::after{

transform:scaleX(1);

}



/*=========================================
ANIMATION
=========================================*/

@keyframes heroShine{

0%{

transform:translateX(-100%);

}

100%{

transform:translateX(100%);

}

}
/*==================================================
AVATT TECHNOLOGIES
products.css
PART 2 OF 5
LIST VIEW • ACTION BUTTONS • BADGES
LOAD MORE • PAGINATION • EMPTY STATE
==================================================*/

/*=========================================
LIST VIEW
=========================================*/

.product-grid.list-view{

display:flex;

flex-direction:column;

gap:25px;

}

.product-grid.list-view .product-card{

display:grid;

grid-template-columns:320px 1fr;

align-items:center;

min-height:260px;

}

.product-grid.list-view .product-image{

height:100%;

border-radius:14px 0 0 14px;

}

.product-grid.list-view .product-content{

padding:30px;

}

.product-grid.list-view .product-footer{

justify-content:flex-start;

}



/*=========================================
PRODUCT ACTIONS
=========================================*/

.product-actions{

display:flex;

align-items:center;

gap:12px;

margin-top:20px;

}

.product-actions .btn{

flex:1;

}

.icon-btn{

width:46px;

height:46px;

border:none;

border-radius:50%;

background:#fff;

box-shadow:var(--shadow-sm);

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

transition:var(--transition);

}

.icon-btn:hover{

background:var(--primary);

color:#fff;

transform:translateY(-3px);

}



/*=========================================
FAVOURITE BUTTON
=========================================*/

.favorite-btn{

color:#888;

}

.favorite-btn.active{

background:var(--danger);

color:#fff;

}

.favorite-btn.active i{

animation:heartBeat .6s;

}

@keyframes heartBeat{

0%{transform:scale(1);}

30%{transform:scale(1.3);}

60%{transform:scale(.9);}

100%{transform:scale(1);}

}



/*=========================================
STATUS BADGES
=========================================*/

.product-badge{

position:absolute;

top:18px;

left:18px;

padding:7px 16px;

border-radius:30px;

font-size:12px;

font-weight:700;

color:#fff;

z-index:5;

}

.badge-new{

background:var(--success);

}

.badge-featured{

background:#ff9800;

}

.badge-popular{

background:#e91e63;

}



/*=========================================
RATING
=========================================*/

.product-rating{

display:flex;

align-items:center;

gap:4px;

margin-bottom:18px;

}

.product-rating i{

color:#ffc107;

font-size:15px;

}

.product-rating span{

margin-left:8px;

font-size:14px;

color:var(--gray-500);

}



/*=========================================
PRICE
=========================================*/

.product-price{

display:flex;

align-items:center;

gap:12px;

margin-bottom:18px;

}

.product-price .current{

font-size:1.3rem;

font-weight:700;

color:var(--primary);

}

.product-price .old{

text-decoration:line-through;

color:var(--gray-500);

}



/*=========================================
LOAD MORE BUTTON
=========================================*/

.load-more{

text-align:center;

margin:50px 0;

}

#loadMoreBtn{

padding:15px 45px;

border:none;

border-radius:50px;

background:var(--primary);

color:#fff;

font-weight:600;

cursor:pointer;

transition:var(--transition);

box-shadow:var(--shadow-sm);

}

#loadMoreBtn:hover{

background:var(--secondary);

transform:translateY(-4px);

box-shadow:var(--shadow-lg);

}



/*=========================================
PAGINATION
=========================================*/

.pagination{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin-top:50px;

flex-wrap:wrap;

}

.pagination button{

width:46px;

height:46px;

border:none;

border-radius:50%;

background:#fff;

box-shadow:var(--shadow-sm);

cursor:pointer;

transition:var(--transition);

font-weight:600;

}

.pagination button:hover{

background:var(--primary);

color:#fff;

}

.pagination button.active{

background:var(--primary);

color:#fff;

}



/*=========================================
EMPTY STATE
=========================================*/

.no-products{

padding:80px 20px;

text-align:center;

background:var(--gray-100);

border-radius:16px;

}

.no-products i{

font-size:4rem;

color:var(--primary);

margin-bottom:20px;

}

.no-products h3{

font-size:2rem;

margin-bottom:15px;

}

.no-products p{

color:var(--gray-500);

}



/*=========================================
ERROR BOX
=========================================*/

.error-box{

padding:70px 20px;

text-align:center;

background:#fff5f5;

border:2px solid #ffd7d7;

border-radius:16px;

}

.error-box i{

font-size:3rem;

color:var(--danger);

margin-bottom:20px;

}

.error-box h3{

margin-bottom:15px;

color:var(--danger);

}



/*=========================================
SKELETON LOADING
=========================================*/

.skeleton{

background:linear-gradient(

90deg,

#eeeeee 25%,

#f8f8f8 50%,

#eeeeee 75%

);

background-size:300% 100%;

animation:skeletonLoading 1.4s infinite;

border-radius:10px;

}

@keyframes skeletonLoading{

0%{

background-position:100% 0;

}

100%{

background-position:-100% 0;

}

}

.skeleton-image{

height:250px;

margin-bottom:20px;

}

.skeleton-title{

height:22px;

width:70%;

margin-bottom:18px;

}

.skeleton-text{

height:14px;

margin-bottom:10px;

}

.skeleton-button{

height:46px;

width:150px;

margin-top:20px;

}



/*=========================================
HOVER EFFECTS
=========================================*/

.product-card:hover .product-category{

background:var(--primary);

color:#fff;

}

.product-card:hover h3{

color:var(--primary);

}

.product-card:hover .icon-btn{

transform:translateY(-2px);

}
/*==================================================
AVATT TECHNOLOGIES
products.css
PART 3 OF 5
PRODUCT DETAILS • GALLERY • SPECIFICATIONS
RELATED PRODUCTS • SHARE • PRINT
==================================================*/

/*=========================================
PRODUCT DETAILS
=========================================*/

.product-details{

padding:80px 0;

}

.product-details-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}



/*=========================================
PRODUCT GALLERY
=========================================*/

.product-gallery{

position:sticky;

top:100px;

}

.product-main-image{

background:#fff;

border-radius:18px;

padding:20px;

box-shadow:var(--shadow-md);

overflow:hidden;

margin-bottom:20px;

}

.product-main-image img{

width:100%;

display:block;

transition:.4s;

cursor:zoom-in;

}

.product-main-image:hover img{

transform:scale(1.08);

}



/*=========================================
THUMBNAILS
=========================================*/

.product-thumbnails{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.product-thumbnails img{

width:90px;

height:90px;

object-fit:cover;

border-radius:12px;

cursor:pointer;

border:2px solid transparent;

transition:var(--transition);

}

.product-thumbnails img:hover,

.product-thumbnails img.active{

border-color:var(--primary);

transform:translateY(-4px);

}



/*=========================================
PRODUCT INFO
=========================================*/

.product-info h1{

font-size:2.6rem;

margin-bottom:18px;

color:var(--dark);

}

.product-info .category{

display:inline-block;

padding:7px 18px;

background:rgba(0,86,179,.08);

color:var(--primary);

border-radius:30px;

font-weight:600;

margin-bottom:20px;

}

.product-info p{

line-height:1.9;

color:var(--gray-500);

margin-bottom:25px;

}



/*=========================================
FEATURE LIST
=========================================*/

.product-features{

margin:35px 0;

}

.product-features h3{

margin-bottom:20px;

}

.product-features ul{

list-style:none;

padding:0;

margin:0;

}

.product-features li{

display:flex;

align-items:flex-start;

gap:12px;

margin-bottom:14px;

line-height:1.7;

}

.product-features i{

color:var(--success);

margin-top:4px;

}



/*=========================================
SPECIFICATION TABLE
=========================================*/

.specification-table{

width:100%;

border-collapse:collapse;

margin:35px 0;

background:#fff;

border-radius:12px;

overflow:hidden;

box-shadow:var(--shadow-sm);

}

.specification-table th,

.specification-table td{

padding:16px 20px;

border-bottom:1px solid var(--gray-200);

text-align:left;

}

.specification-table th{

background:var(--primary);

color:#fff;

width:35%;

}

.specification-table tr:nth-child(even){

background:#fafafa;

}



/*=========================================
PRODUCT ACTIONS
=========================================*/

.product-action-buttons{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:35px;

}

.product-action-buttons .btn{

padding:14px 30px;

border-radius:50px;

}



/*=========================================
SHARE BUTTON
=========================================*/

.share-btn{

background:#1877f2;

color:#fff;

}

.share-btn:hover{

background:#0f63d6;

}



/*=========================================
PRINT BUTTON
=========================================*/

.print-btn{

background:#444;

color:#fff;

}

.print-btn:hover{

background:#222;

}



/*=========================================
FAVOURITE BUTTON
=========================================*/

.favorite-btn{

background:#fff;

border:2px solid var(--danger);

color:var(--danger);

}

.favorite-btn:hover,

.favorite-btn.active{

background:var(--danger);

color:#fff;

}



/*=========================================
RELATED PRODUCTS
=========================================*/

.related-products{

padding:80px 0;

background:var(--gray-100);

}

.related-products h2{

text-align:center;

margin-bottom:45px;

font-size:2.3rem;

}

.related-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}



/*=========================================
IMAGE ZOOM
=========================================*/

.zoom-container{

overflow:hidden;

border-radius:18px;

cursor:zoom-in;

}

.zoom-container img{

transition:transform .35s ease;

}

.zoom-container:hover img{

transform:scale(1.12);

}



/*=========================================
PRODUCT TAGS
=========================================*/

.product-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:25px;

}

.product-tags span{

padding:8px 18px;

background:var(--gray-100);

border-radius:30px;

font-size:14px;

transition:var(--transition);

}

.product-tags span:hover{

background:var(--primary);

color:#fff;

}



/*=========================================
DOWNLOAD BROCHURE
=========================================*/

.download-brochure{

margin-top:30px;

padding:18px;

border:2px dashed var(--primary);

border-radius:14px;

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

background:#f9fcff;

}

.download-brochure i{

font-size:2rem;

color:var(--primary);

}



/*=========================================
PRODUCT HIGHLIGHTS
=========================================*/

.product-highlights{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-top:40px;

}

.highlight-box{

background:#fff;

padding:25px;

text-align:center;

border-radius:14px;

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.highlight-box:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-md);

}

.highlight-box i{

font-size:2rem;

color:var(--primary);

margin-bottom:15px;

}

.highlight-box h4{

margin-bottom:10px;

}

.highlight-box p{

font-size:14px;

margin:0;

}
/*==================================================
AVATT TECHNOLOGIES
products.css
PART 4 OF 5
LIGHTBOX • FULLSCREEN • ANIMATIONS
TOAST • SKELETON • MICRO INTERACTIONS
==================================================*/


/*=========================================
LIGHTBOX
=========================================*/

.product-lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.92);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:9999;

}

.product-lightbox.active{

opacity:1;

visibility:visible;

}

.product-lightbox img{

max-width:90%;

max-height:90%;

border-radius:16px;

box-shadow:0 25px 60px rgba(0,0,0,.45);

animation:zoomFade .35s ease;

}

.product-lightbox-close{

position:absolute;

top:25px;

right:30px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#fff;

cursor:pointer;

font-size:20px;

transition:.3s;

}

.product-lightbox-close:hover{

background:var(--primary);

color:#fff;

transform:rotate(90deg);

}



/*=========================================
LIGHTBOX NAVIGATION
=========================================*/

.lightbox-prev,

.lightbox-next{

position:absolute;

top:50%;

transform:translateY(-50%);

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#fff;

cursor:pointer;

transition:.3s;

}

.lightbox-prev{

left:35px;

}

.lightbox-next{

right:35px;

}

.lightbox-prev:hover,

.lightbox-next:hover{

background:var(--primary);

color:#fff;

}



/*=========================================
FULLSCREEN BUTTON
=========================================*/

.fullscreen-btn{

position:absolute;

bottom:30px;

right:30px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:#fff;

cursor:pointer;

transition:.3s;

}

.fullscreen-btn:hover{

background:var(--primary);

color:#fff;

}



/*=========================================
IMAGE LOADING
=========================================*/

.product-image img{

opacity:0;

transition:opacity .5s ease;

}

.product-image img.loaded{

opacity:1;

}



/*=========================================
SKELETON PLACEHOLDER
=========================================*/

.product-skeleton{

border-radius:16px;

overflow:hidden;

background:#fff;

box-shadow:var(--shadow-sm);

}

.product-skeleton .image{

height:260px;

background:linear-gradient(

90deg,

#ececec 25%,

#f8f8f8 50%,

#ececec 75%

);

background-size:300%;

animation:skeleton 1.4s infinite;

}

.product-skeleton .line{

height:16px;

margin:18px;

border-radius:8px;

background:linear-gradient(

90deg,

#ececec 25%,

#f8f8f8 50%,

#ececec 75%

);

background-size:300%;

animation:skeleton 1.4s infinite;

}



/*=========================================
TOAST
=========================================*/

.toast{

position:fixed;

bottom:30px;

right:30px;

min-width:260px;

padding:18px 22px;

border-radius:12px;

background:#222;

color:#fff;

box-shadow:var(--shadow-lg);

transform:translateY(120px);

opacity:0;

transition:.4s;

z-index:99999;

}

.toast.show{

transform:translateY(0);

opacity:1;

}

.toast.success{

background:var(--success);

}

.toast.error{

background:var(--danger);

}

.toast.warning{

background:#ff9800;

}



/*=========================================
WISHLIST ANIMATION
=========================================*/

.favorite-btn.active{

animation:wishlistPulse .45s ease;

}

@keyframes wishlistPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.2);

}

100%{

transform:scale(1);

}

}



/*=========================================
SCROLL REVEAL
=========================================*/

.product-card{

opacity:0;

transform:translateY(40px);

transition:.7s ease;

}

.product-card.active{

opacity:1;

transform:translateY(0);

}



/*=========================================
IMAGE HOVER
=========================================*/

.product-image{

position:relative;

overflow:hidden;

}

.product-image::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

transparent,

rgba(0,0,0,.18)

);

opacity:0;

transition:.35s;

}

.product-card:hover

.product-image::after{

opacity:1;

}



/*=========================================
BUTTON RIPPLE
=========================================*/

.btn{

position:relative;

overflow:hidden;

}

.btn .ripple{

position:absolute;

border-radius:50%;

background:rgba(255,255,255,.4);

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(12);

opacity:0;

}

}



/*=========================================
FLOATING ICON
=========================================*/

.product-icon{

display:inline-flex;

animation:float 3s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}



/*=========================================
SUCCESS MESSAGE
=========================================*/

.success-message{

padding:16px;

background:#e8f8ed;

border-left:5px solid var(--success);

border-radius:10px;

color:#198754;

margin-top:20px;

}



/*=========================================
ERROR MESSAGE
=========================================*/

.error-message{

padding:16px;

background:#fff1f1;

border-left:5px solid var(--danger);

border-radius:10px;

color:#dc3545;

margin-top:20px;

}



/*=========================================
PAGE TRANSITION
=========================================*/

.page-enter{

animation:fadeIn .5s ease;

}

.page-exit{

animation:fadeOut .3s ease forwards;

}



/*=========================================
KEYFRAMES
=========================================*/

@keyframes zoomFade{

from{

opacity:0;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes skeleton{

0%{

background-position:100%;

}

100%{

background-position:-100%;

}

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeOut{

to{

opacity:0;

transform:translateY(-20px);

}

}
/*==================================================
AVATT TECHNOLOGIES
products.css
PART 5 OF 5
RESPONSIVE • DARK MODE • PRINT
ACCESSIBILITY • UTILITIES
==================================================*/


/*=========================================
LARGE DESKTOP
=========================================*/

@media (min-width:1400px){

.product-grid{

grid-template-columns:

repeat(4,1fr);

}

.product-details-wrapper{

gap:80px;

}

}



/*=========================================
LAPTOP
=========================================*/

@media (max-width:1200px){

.product-grid{

grid-template-columns:

repeat(3,1fr);

}

.product-highlights{

grid-template-columns:

repeat(3,1fr);

}

}



/*=========================================
TABLET
=========================================*/

@media (max-width:992px){

.products-hero{

padding:100px 0 60px;

}

.products-hero h1{

font-size:2.5rem;

}

.products-toolbar{

flex-direction:column;

align-items:stretch;

}

.search-box,

.sort-box{

width:100%;

}

.product-grid{

grid-template-columns:

repeat(2,1fr);

}

.product-details-wrapper{

grid-template-columns:1fr;

gap:40px;

}

.product-gallery{

position:relative;

top:auto;

}

.product-highlights{

grid-template-columns:

repeat(2,1fr);

}

.product-grid.list-view .product-card{

grid-template-columns:1fr;

}

.product-grid.list-view .product-image{

border-radius:14px 14px 0 0;

height:260px;

}

}



/*=========================================
MOBILE
=========================================*/

@media (max-width:768px){

.products-hero{

padding:90px 0 50px;

}

.products-hero h1{

font-size:2rem;

}

.products-hero p{

font-size:1rem;

}

.category-container{

justify-content:flex-start;

overflow-x:auto;

padding-bottom:10px;

}

.category-btn{

white-space:nowrap;

}

.product-grid{

grid-template-columns:1fr;

gap:25px;

}

.product-content{

padding:22px;

}

.product-footer{

flex-direction:column;

}

.product-footer .btn{

width:100%;

}

.product-action-buttons{

flex-direction:column;

}

.product-action-buttons .btn{

width:100%;

}

.product-highlights{

grid-template-columns:1fr;

}

.related-grid{

grid-template-columns:1fr;

}

.product-thumbnails{

justify-content:center;

}

.lightbox-prev,

.lightbox-next{

width:45px;

height:45px;

}

.toast{

left:20px;

right:20px;

bottom:20px;

min-width:auto;

}

}



/*=========================================
SMALL MOBILE
=========================================*/

@media (max-width:480px){

.products-hero h1{

font-size:1.7rem;

}

.product-info h1{

font-size:2rem;

}

.product-main-image{

padding:12px;

}

.product-content{

padding:18px;

}

.product-card{

border-radius:12px;

}

.product-thumbnails img{

width:70px;

height:70px;

}

.search-box input{

padding:14px 18px;

}

.sort-box select{

padding:14px 18px;

}

}



/*=========================================
PRINT
=========================================*/

@media print{

header,

footer,

.products-toolbar,

.category-container,

.product-action-buttons,

.pagination,

#loadMoreBtn,

.favorite-btn,

.share-btn,

.print-btn{

display:none !important;

}

body{

background:#fff;

color:#000;

}

.product-details{

padding:0;

}

.product-details-wrapper{

display:block;

}

.product-main-image img{

max-width:300px;

margin:auto;

}

a{

text-decoration:none;

color:#000;

}

}



/*=========================================
DARK MODE
=========================================*/

@media (prefers-color-scheme:dark){

body{

background:#121212;

color:#f3f3f3;

}

.product-card,

.product-main-image,

.highlight-box,

.specification-table{

background:#1f1f1f;

}

.product-content h3,

.product-info h1{

color:#fff;

}

.product-content p,

.product-info p{

color:#cccccc;

}

.search-box input,

.sort-box select{

background:#222;

color:#fff;

border-color:#444;

}

.category-btn{

background:#222;

color:#eee;

border-color:#444;

}

.category-btn.active{

background:var(--primary);

}

.specification-table td{

border-color:#333;

}

}



/*=========================================
ACCESSIBILITY
=========================================*/

:focus-visible{

outline:3px solid var(--secondary);

outline-offset:3px;

}

button,

a,

input,

select{

transition:

background .3s,

color .3s,

transform .3s,

box-shadow .3s;

}

button:disabled{

opacity:.6;

cursor:not-allowed;

}



/*=========================================
REDUCED MOTION
=========================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}



/*=========================================
HIGH DPI
=========================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

.product-image img{

image-rendering:auto;

}

}



/*=========================================
UTILITY CLASSES
=========================================*/

.text-center{

text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.d-flex{

display:flex;

}

.align-center{

align-items:center;

}

.justify-center{

justify-content:center;

}

.w-100{

width:100%;

}

.rounded{

border-radius:var(--radius);

}

.shadow{

box-shadow:var(--shadow-md);

}

.hidden{

display:none !important;

}

.visible{

display:block !important;

}



/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--secondary);

}



/*=========================================
END OF FILE
=========================================*/