/* Shared Styles for Zoezi Activewear */
:root{
  --bg:#ffffff; 
  --text:#111111; 
  --muted:#6b7280; 
  --accent:#9caf88; 
  --max-width:1200px;
  --primary-sage: #9caf88;
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}

/* Header */
.topbar{border-bottom:1px solid #eee;background:#fff;position:sticky;top:0;z-index:1000}
.nav{max-width:var(--max-width);margin:0 auto;display:flex;gap:16px;align-items:center;padding:14px}
.brand{display:flex;align-items:center;gap:8px;cursor:pointer}
.brand img{height:40px;width:auto}
.brand-text{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--primary-sage)}
.search{flex:1;display:flex;align-items:center}
.search input{width:100%;padding:10px 12px;border:1px solid #eee;border-radius:8px}
.nav-actions{display:flex;gap:12px;align-items:center}
.menu-btn{padding:8px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all 0.2s;background:none;font-size:14px}
.menu-btn:hover{background:var(--primary-sage);color:white}
.icon-btn{padding:8px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;position:relative}
#cart-btn{position:relative}
.cart-count{background:var(--primary-sage);color:white;border-radius:50%;padding:2px 6px;font-size:11px;min-width:16px;text-align:center;position:absolute;top:-8px;right:-8px}

/* Side Menu */
.side-menu{position:fixed;top:0;left:-300px;width:300px;height:100vh;background:#fff;z-index:2000;transition:left 0.3s ease;box-shadow:2px 0 10px rgba(0,0,0,0.1);overflow-y:auto}
.side-menu.active{left:0}
.menu-header{padding:20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.menu-header h3{margin:0;color:var(--primary-sage);font-size:18px}
.close-menu{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted)}
.menu-items{padding:20px 0}
.menu-item{display:block;padding:12px 20px;color:var(--text);font-weight:500;transition:all 0.2s;border-left:3px solid transparent}
.menu-item:hover{background:#f8f8f8;border-left-color:var(--primary-sage);color:var(--primary-sage)}
.menu-dropdown{position:relative}
.dropdown-toggle{display:flex;justify-content:space-between;align-items:center}
.dropdown-content{display:none;padding-left:20px;background:#f8f8f8}
.dropdown-content.active{display:block}
.dropdown-item{padding:8px 20px;color:var(--muted);font-size:14px;display:block;transition:all 0.2s}
.dropdown-item:hover{color:var(--primary-sage);background:#fff}
.menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1500;opacity:0;visibility:hidden;transition:all 0.3s ease}
.menu-overlay.active{opacity:1;visibility:visible}

/* Product Side Menu */
.product-sidebar{position:fixed;top:0;right:-100%;width:400px;height:100vh;background:white;z-index:2000;transition:right 0.3s ease;overflow-y:auto;box-shadow:-2px 0 10px rgba(0,0,0,0.1)}
.product-sidebar.active{right:0}
.product-sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #eee}
.product-sidebar-header h3{margin:0;font-size:18px;font-weight:600}
.close-product-sidebar{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted)}
.product-sidebar-content{padding:20px}
/* FIXED: Changed object-fit from cover to contain to prevent image zoom */
.product-main-image{width:100%;height:auto;object-fit:cover;border-radius:8px;margin-bottom:1rem;background:#f9f9f9}
.product-thumbnails{display:flex;gap:10px;margin-bottom:20px;overflow-x:auto}
.product-thumbnail{width:60px;height:60px;object-fit:cover;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:border-color 0.2s}
.product-thumbnail.active{border-color:var(--primary-sage)}
.product-thumbnail:hover{border-color:var(--primary-sage)}
.product-details h2{font-size:24px;font-weight:600;margin:0 0 10px 0;color:var(--text)}
.product-price-large{font-size:28px;font-weight:700;color:var(--text);margin-bottom:20px}
.product-price-large .original{text-decoration:line-through;color:var(--muted);margin-left:8px;font-weight:400;font-size:20px}
.product-sizes-section{margin-bottom:20px}
.product-sizes-section h4{font-size:16px;font-weight:600;margin:0 0 10px 0;color:var(--text)}
.size-options{display:flex;gap:10px;flex-wrap:wrap}
.size-option{padding:10px 16px;border:1px solid #eee;background:white;cursor:pointer;transition:all 0.2s;font-size:14px;font-weight:500}
.size-option.active{background:var(--primary-sage);color:white;border-color:var(--primary-sage)}
.size-option:hover{border-color:var(--primary-sage)}
.product-colors-section{margin-bottom:20px}
.product-colors-section h4{font-size:16px;font-weight:600;margin:0 0 10px 0;color:var(--text)}
.color-options{display:flex;gap:10px;flex-wrap:wrap}
.color-option{width:40px;height:40px;border-radius:50%;border:2px solid #eee;cursor:pointer;transition:all 0.2s}
.color-option.active{border-color:var(--primary-sage);transform:scale(1.1)}
.color-option:hover{border-color:var(--primary-sage)}
.quantity-section{margin-bottom:20px}
.quantity-section h4{font-size:16px;font-weight:600;margin:0 0 10px 0;color:var(--text)}
.quantity-controls{display:flex;align-items:center;gap:10px}
.quantity-btn{width:40px;height:40px;border:1px solid #eee;background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all 0.2s}
.quantity-btn:hover{background:var(--primary-sage);color:white;border-color:var(--primary-sage)}
.quantity-input{width:60px;height:40px;text-align:center;border:1px solid #eee;font-size:16px;font-weight:600}
.sidebar-actions{display:flex;flex-direction:column;gap:12px}
.add-to-cart-btn{background:var(--primary-sage);color:white;padding:16px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:background 0.3s;text-transform:uppercase;letter-spacing:0.5px}
.add-to-cart-btn:hover{background:#7a9a6b}
.view-details-btn{background:transparent;color:var(--primary-sage);padding:16px;border:1px solid var(--primary-sage);font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s;text-transform:uppercase;letter-spacing:0.5px}
.view-details-btn:hover{background:var(--primary-sage);color:white}

/* Cart Side Menu */
.cart-sidebar{position:fixed;top:0;right:-100%;width:400px;height:100vh;background:white;z-index:2000;transition:right 0.3s ease;overflow-y:auto;box-shadow:-2px 0 10px rgba(0,0,0,0.1)}
.cart-sidebar.active{right:0}
.cart-sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #eee}
.cart-sidebar-header h3{margin:0;font-size:18px;font-weight:600}
.close-cart-sidebar{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted)}
.cart-sidebar-content{padding:20px}
.cart-item{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid #eee}
.cart-item-image{width:80px;height:80px;object-fit:cover;border-radius:8px}
.cart-item-details{flex:1}
.cart-item-name{font-weight:600;margin-bottom:5px}
.cart-item-price{color:var(--primary-sage);font-weight:600;margin-bottom:5px}
.cart-item-size{font-size:14px;color:var(--muted);margin-bottom:5px}
.cart-item-quantity{display:flex;align-items:center;gap:8px}
.cart-quantity-btn{width:30px;height:30px;border:1px solid #eee;background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}
.cart-quantity-input{width:40px;height:30px;text-align:center;border:1px solid #eee;font-size:14px}
.cart-total{padding:20px 0;border-top:1px solid #eee;margin-top:20px}
.cart-total-text{font-size:18px;font-weight:600;margin-bottom:15px}
.checkout-btn{width:100%;background:var(--primary-sage);color:white;padding:16px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:background 0.3s;text-transform:uppercase;letter-spacing:0.5px}
.checkout-btn:hover{background:#7a9a6b}
.empty-cart{text-align:center;padding:40px 20px;color:var(--muted)}
.empty-cart i{font-size:48px;margin-bottom:16px;display:block}

/* Notification */
/* FIXED: Limited notification height to 40px and adjusted padding */
.notification{position:fixed;top:20px;right:20px;background:var(--primary-sage);color:white;padding:8px 16px;height:40px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:3000;transform:translateX(100%);transition:transform 0.3s ease;max-width:300px;display:flex;align-items:center}
.notification.show{transform:translateX(0)}
.notification-content{display:flex;align-items:center;gap:8px}
.notification-icon{font-size:16px}
.notification-text{font-weight:500;font-size:14px}
.notification-close{background:none;border:none;color:white;font-size:16px;cursor:pointer;margin-left:auto;opacity:0.7;transition:opacity 0.2s}
.notification-close:hover{opacity:1}

/* Buttons */
.btn{padding:12px 18px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;text-decoration:none;transition:all 0.2s;display:inline-block}
.btn:hover{background:var(--text);border-color:var(--text)}
.btn-ghost{padding:12px 18px;border-radius:10px;border:1px solid #ddd;background:transparent;cursor:pointer;text-decoration:none;transition:all 0.2s;display:inline-block}
.btn-ghost:hover{background:var(--primary-sage);color:white;border-color:var(--primary-sage)}

/* Loading */
.loading{text-align:center;padding:40px;color:var(--muted)}
.loading i{font-size:24px;margin-bottom:12px;display:block;animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* FIXED: Mobile responsive styles to prevent cart sidebar visibility issues */
@media (max-width: 768px) {
  .cart-sidebar{width:100vw;right:-100vw}
  .cart-sidebar.active{right:0}
  .product-sidebar{width:100vw;right:-100vw}
  .product-sidebar.active{right:0}
}

@media (max-width: 480px) {
  .cart-sidebar{width:100vw;right:-100vw}
  .cart-sidebar.active{right:0}
  .product-sidebar{width:100vw;right:-100vw} 
  .product-sidebar.active{right:0}
  .search{display:none}
}

/* Discount Styles */
.discount-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ff4444;
  color: white;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
}

.discount-badge.sale {
  background: #ff4444;
}

.discount-badge.new {
  background: var(--primary-sage);
}

.product-price-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.product-price-current {
  font-weight: 700;
  color: var(--primary-sage);
  font-size: 1.1em;
}

.product-price-original {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.7;
}

/* Utility */
.center{text-align:center}
.muted{color:var(--muted);font-size:13px}