:root {
    --bg-color: #f9fafb;
    --card-bg: #ffffff;
    --text-main: #111827;
    --text-muted: #6b7280;
    --primary: #f59e0b; /* Golden Yellow */
    --primary-hover: #d97706; /* Darker Golden */
    --accent: #ea580c; /* Orange */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.05);
    --radius-md: 12px;
    --radius-lg: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* Layout */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header (Glassmorphism) */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    padding: 10px 0;
    transition: var(--transition);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 60px; /* Adjust logo size */
    width: auto;
}

.cart-toggle {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.cart-toggle:hover {
    background: var(--card-bg);
    border-color: var(--primary);
}

.cart-count {
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Hero Section */
.hero {
    padding: 140px 0 60px;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, #ffffff, #f3f4f6 70%);
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    background: linear-gradient(to right, #ea580c, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 60px 0;
}

.product-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0, 0.05);
    border-color: var(--primary);
}

.product-image {
    width: 100%;
    height: 250px;
    object-fit: contain;
    background: #fff;
    padding: 15px; /* Added padding so it doesn't touch the edges */
}

.product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    font-size: 1.25rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 15px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--primary));
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    margin-top: auto;
    transition: var(--transition);
}

.btn-primary:hover {
    box-shadow: 0 5px 15px rgba(234, 88, 12, 0.3);
    transform: scale(1.02);
}

/* Cart Sidebar */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--glass-border);
    z-index: 1000;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.05);
}

.cart-sidebar.open {
    right: 0;
}

.cart-header {
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.cart-close:hover {
    color: var(--accent);
}

.cart-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

.cart-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    background: var(--bg-color);
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
}

.cart-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-title {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.cart-item-price {
    color: var(--primary);
    font-weight: 600;
}

.cart-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.qty-btn {
    background: #fff;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    width: 25px;
    height: 25px;
    border-radius: 4px;
    cursor: pointer;
}

.remove-btn {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.8rem;
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid var(--glass-border);
    background: var(--card-bg);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.checkout-btn {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.checkout-btn:hover {
    background: #d97706;
}

/* Product Detail Page */
.product-detail {
    padding: 140px 0 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
}

.main-image-container { position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--glass-border);
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

.thumbnail-strip {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 2px solid var(--glass-border);
    background: #fff;
    transition: var(--transition);
}

.thumbnail.active, .thumbnail:hover {
    border-color: var(--primary);
}

.product-meta h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.product-meta .price {
    font-size: 2rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 30px;
}

.product-description {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.product-description ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

.product-description p {
    margin-bottom: 15px;
}

.product-description img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

@media (max-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr;
    }
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
}

.product-short-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 20px 0;
    opacity: 0.9;
}
.product-short-description ul {
    list-style: disc inside;
    margin-left: 10px;
}



.search-suggestion-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.2s;
}
.search-suggestion-item:last-child {
    border-bottom: none;
}
.search-suggestion-item:hover {
    background: rgba(255, 165, 0, 0.05);
}
.search-suggestion-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
}
.search-suggestion-item .suggestion-details {
    display: flex;
    flex-direction: column;
}
.search-suggestion-item .title {
    font-size: 0.9rem;
    font-weight: 600;
}
.search-suggestion-item .price {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 700;
}



.modern-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--glass-border), transparent);
    margin: 40px 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin: 40px 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.feature-img-col img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s;
}

.feature-img-col img:hover {
    transform: scale(1.02);
}

.feature-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-text-col h3, .feature-text-col strong {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.feature-text-col ul {
    list-style: none;
    padding-left: 0;
}

.feature-text-col li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.feature-text-col li::before {
    content: ''';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.product-description p, .product-description div {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}

@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }
}



/* Thumbnail Navigation */
.thumbnail-strip-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 15px;
}
.thumbnail-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    padding: 5px 0;
}
.thumbnail-strip::-webkit-scrollbar {
    display: none;
}
.thumb-nav {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s;
}
.thumb-nav:hover {
    background: var(--primary-color);
    color: white;
}
.thumb-nav.left { margin-right: 10px; }
.thumb-nav.right { margin-left: 10px; }

/* Lightbox Modal */
.lightbox {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10000;
}
.lightbox-close:hover {
    color: var(--primary-color);
}
.lightbox-content-wrapper {
    position: relative;
    max-width: 80%;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* For zooming */
}
.lightbox-content {
    max-width: 100%;
    max-height: 80vh;
    transition: transform 0.3s ease;
    cursor: grab;
}
.lightbox-content:active {
    cursor: grabbing;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    font-size: 30px;
    padding: 20px;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10000;
}
.lightbox-nav:hover {
    background: rgba(255,255,255,0.3);
}
.lightbox-nav.left { left: 5%; }
.lightbox-nav.right { right: 5%; }

.lightbox-controls {
    position: absolute;
    bottom: 30px;
    display: flex;
    gap: 15px;
    z-index: 10000;
}
.lightbox-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.3s;
}
.lightbox-btn:hover {
    background: var(--primary-color);
}

.zoom-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255,255,255,0.8);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    pointer-events: none;
    opacity: 0.7;
}
.main-image-container {
    position: relative;
    cursor: zoom-in;
}



.nav-link:hover {
    color: var(--primary-color) !important;
         b o r d e r - r a d i u s :   1 0 p x ; 
         t r a n s i t i o n :   t r a n s f o r m   0 . 3 s ; 
 } 
 
 . f e a t u r e - i m g - c o l   i m g : h o v e r   { 
         t r a n s f o r m :   s c a l e ( 1 . 0 2 ) ; 
 } 
 
 . f e a t u r e - t e x t - c o l   { 
         d i s p l a y :   f l e x ; 
         f l e x - d i r e c t i o n :   c o l u m n ; 
         j u s t i f y - c o n t e n t :   c e n t e r ; 
 } 
 
 . f e a t u r e - t e x t - c o l   h 3 ,   . f e a t u r e - t e x t - c o l   s t r o n g   { 
         c o l o r :   v a r ( - - p r i m a r y - c o l o r ) ; 
         f o n t - s i z e :   1 . 5 r e m ; 
         m a r g i n - b o t t o m :   1 5 p x ; 
 } 
 
 . f e a t u r e - t e x t - c o l   u l   { 
         l i s t - s t y l e :   n o n e ; 
         p a d d i n g - l e f t :   0 ; 
 } 
 
 . f e a t u r e - t e x t - c o l   l i   { 
         p o s i t i o n :   r e l a t i v e ; 
         p a d d i n g - l e f t :   2 5 p x ; 
         m a r g i n - b o t t o m :   1 0 p x ; 
 } 
 
 . f e a t u r e - t e x t - c o l   l i : : b e f o r e   { 
         c o n t e n t :   '  '' ; 
         p o s i t i o n :   a b s o l u t e ; 
         l e f t :   0 ; 
         c o l o r :   v a r ( - - p r i m a r y - c o l o r ) ; 
         f o n t - w e i g h t :   b o l d ; 
 } 
 
 . p r o d u c t - d e s c r i p t i o n   p ,   . p r o d u c t - d e s c r i p t i o n   d i v   { 
         f o n t - s i z e :   1 . 0 5 r e m ; 
         l i n e - h e i g h t :   1 . 8 ; 
         c o l o r :   # 4 4 4 ; 
 } 
 
 @ m e d i a   ( m a x - w i d t h :   7 6 8 p x )   { 
         . f e a t u r e - g r i d   { 
                 g r i d - t e m p l a t e - c o l u m n s :   1 f r ; 
                 p a d d i n g :   2 0 p x ; 
                 g a p :   2 0 p x ; 
         } 
 } 
 
 
 
 / *   T h u m b n a i l   N a v i g a t i o n   * / 
 . t h u m b n a i l - s t r i p - w r a p p e r   { 
         d i s p l a y :   f l e x ; 
         a l i g n - i t e m s :   c e n t e r ; 
         p o s i t i o n :   r e l a t i v e ; 
         m a r g i n - t o p :   1 5 p x ; 
 } 
 . t h u m b n a i l - s t r i p   { 
         d i s p l a y :   f l e x ; 
         g a p :   1 0 p x ; 
         o v e r f l o w - x :   a u t o ; 
         s c r o l l - b e h a v i o r :   s m o o t h ; 
         f l e x :   1 ; 
         p a d d i n g :   5 p x   0 ; 
 } 
 . t h u m b n a i l - s t r i p : : - w e b k i t - s c r o l l b a r   { 
         d i s p l a y :   n o n e ; 
 } 
 . t h u m b - n a v   { 
         b a c k g r o u n d :   v a r ( - - g l a s s - b g ) ; 
         b o r d e r :   1 p x   s o l i d   v a r ( - - g l a s s - b o r d e r ) ; 
         b o r d e r - r a d i u s :   5 0 % ; 
         w i d t h :   3 0 p x ; 
         h e i g h t :   3 0 p x ; 
         d i s p l a y :   f l e x ; 
         a l i g n - i t e m s :   c e n t e r ; 
         j u s t i f y - c o n t e n t :   c e n t e r ; 
         c u r s o r :   p o i n t e r ; 
         z - i n d e x :   2 ; 
         t r a n s i t i o n :   a l l   0 . 3 s ; 
 } 
 . t h u m b - n a v : h o v e r   { 
         b a c k g r o u n d :   v a r ( - - p r i m a r y - c o l o r ) ; 
         c o l o r :   w h i t e ; 
 } 
 . t h u m b - n a v . l e f t   {   m a r g i n - r i g h t :   1 0 p x ;   } 
 . t h u m b - n a v . r i g h t   {   m a r g i n - l e f t :   1 0 p x ;   } 
 
 / *   L i g h t b o x   M o d a l   * / 
 . l i g h t b o x   { 
         p o s i t i o n :   f i x e d ; 
         t o p :   0 ;   l e f t :   0 ;   w i d t h :   1 0 0 % ;   h e i g h t :   1 0 0 % ; 
         b a c k g r o u n d :   r g b a ( 0 ,   0 ,   0 ,   0 . 9 ) ; 
         z - i n d e x :   9 9 9 9 ; 
         d i s p l a y :   f l e x ; 
         a l i g n - i t e m s :   c e n t e r ; 
         j u s t i f y - c o n t e n t :   c e n t e r ; 
         f l e x - d i r e c t i o n :   c o l u m n ; 
 } 
 . l i g h t b o x - c l o s e   { 
         p o s i t i o n :   a b s o l u t e ; 
         t o p :   2 0 p x ; 
         r i g h t :   3 0 p x ; 
         c o l o r :   w h i t e ; 
         f o n t - s i z e :   4 0 p x ; 
         c u r s o r :   p o i n t e r ; 
         t r a n s i t i o n :   0 . 3 s ; 
         z - i n d e x :   1 0 0 0 0 ; 
 } 
 . l i g h t b o x - c l o s e : h o v e r   { 
         c o l o r :   v a r ( - - p r i m a r y - c o l o r ) ; 
 } 
 . l i g h t b o x - c o n t e n t - w r a p p e r   { 
         p o s i t i o n :   r e l a t i v e ; 
         m a x - w i d t h :   8 0 % ; 
         m a x - h e i g h t :   8 0 v h ; 
         d i s p l a y :   f l e x ; 
         a l i g n - i t e m s :   c e n t e r ; 
         j u s t i f y - c o n t e n t :   c e n t e r ; 
         o v e r f l o w :   h i d d e n ;   / *   F o r   z o o m i n g   * / 
 } 
 . l i g h t b o x - c o n t e n t   { 
         m a x - w i d t h :   1 0 0 % ; 
         m a x - h e i g h t :   8 0 v h ; 
         t r a n s i t i o n :   t r a n s f o r m   0 . 3 s   e a s e ; 
         c u r s o r :   g r a b ; 
 } 
 . l i g h t b o x - c o n t e n t : a c t i v e   { 
         c u r s o r :   g r a b b i n g ; 
 } 
 . l i g h t b o x - n a v   { 
         p o s i t i o n :   a b s o l u t e ; 
         t o p :   5 0 % ; 
         t r a n s f o r m :   t r a n s l a t e Y ( - 5 0 % ) ; 
         b a c k g r o u n d :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 1 ) ; 
         c o l o r :   w h i t e ; 
         b o r d e r :   n o n e ; 
         f o n t - s i z e :   3 0 p x ; 
         p a d d i n g :   2 0 p x ; 
         c u r s o r :   p o i n t e r ; 
         t r a n s i t i o n :   0 . 3 s ; 
         z - i n d e x :   1 0 0 0 0 ; 
 } 
 . l i g h t b o x - n a v : h o v e r   { 
         b a c k g r o u n d :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 3 ) ; 
 } 
 . l i g h t b o x - n a v . l e f t   {   l e f t :   5 % ;   } 
 . l i g h t b o x - n a v . r i g h t   {   r i g h t :   5 % ;   } 
 
 . l i g h t b o x - c o n t r o l s   { 
         p o s i t i o n :   a b s o l u t e ; 
         b o t t o m :   3 0 p x ; 
         d i s p l a y :   f l e x ; 
         g a p :   1 5 p x ; 
         z - i n d e x :   1 0 0 0 0 ; 
 } 
 . l i g h t b o x - b t n   { 
         b a c k g r o u n d :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 2 ) ; 
         b o r d e r :   n o n e ; 
         c o l o r :   w h i t e ; 
         p a d d i n g :   1 0 p x   1 5 p x ; 
         b o r d e r - r a d i u s :   5 p x ; 
         c u r s o r :   p o i n t e r ; 
         f o n t - s i z e :   1 . 2 r e m ; 
         t r a n s i t i o n :   0 . 3 s ; 
 } 
 . l i g h t b o x - b t n : h o v e r   { 
         b a c k g r o u n d :   v a r ( - - p r i m a r y - c o l o r ) ; 
 } 
 
 . z o o m - h i n t   { 
         p o s i t i o n :   a b s o l u t e ; 
         b o t t o m :   1 0 p x ; 
         r i g h t :   1 0 p x ; 
         b a c k g r o u n d :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 8 ) ; 
         p a d d i n g :   5 p x   1 0 p x ; 
         b o r d e r - r a d i u s :   2 0 p x ; 
         f o n t - s i z e :   0 . 8 r e m ; 
         p o i n t e r - e v e n t s :   n o n e ; 
         o p a c i t y :   0 . 7 ; 
 } 
 . m a i n - i m a g e - c o n t a i n e r   { 
         p o s i t i o n :   r e l a t i v e ; 
         c u r s o r :   z o o m - i n ; 
 } 
 
 
 
 . n a v - l i n k : h o v e r   { 
         c o l o r :   v a r ( - - p r i m a r y - c o l o r )   ! i m p o r t a n t ; 
 } 
 
 
 

/* Nav Link Animation */
.nav-link {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    background: transparent;
}

.nav-link:hover {
    color: var(--primary-color);
    background: rgba(220, 160, 50, 0.15); /* Soft golden/orange tint */
}



/* New Main Image Gallery Styles */
.main-image-wrapper {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
    max-width: 100%;
}

.main-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
    color: var(--text-main);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.main-nav-btn:hover {
    background: var(--primary);
    color: #fff;
}

.main-nav-btn.left {
    left: 10px;
}

.main-nav-btn.right {
    right: 10px;
}


