


    button {cursor:pointer; border:none; outline:none;}
  a {text-decoration:none; color:inherit;}

  /* ===== Container ===== */
  .product-page {max-width:1200px; margin:2rem auto; display:flex; flex-wrap:wrap; gap:2rem; padding:0 1rem;}

  /* ===== Image Section ===== */
  .image-section {flex:1; min-width:300px; position:relative; margin-left: 90px;}
  .main-image {width:60%;  border-radius:10px; cursor:pointer; box-shadow:0 5px 15px rgba(0,0,0,0.2);}
.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.thumbnail {
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0.5rem;
    background: var(--bg-2);
    border: 2px solid transparent;
    transition: var(--transition);
}

.thumbnail:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.thumbnail.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}  /* ===== Info Section ===== */
  .info-section {flex:1; min-width:300px; display:flex; flex-direction:column; justify-content:center; gap:1rem;}
  .product-title {font-size:2rem; font-weight:700; color:#111;}
  .product-price {font-size:1.5rem; color:#111;}
  .product-description {font-size:1rem; line-height:1.6; color:#111; margin-top:1rem;}
  .product-actions {display:flex; gap:1rem; margin-top:1.5rem;}
  .product-actions button {padding:0.8rem 1.5rem; border-radius:8px; font-weight:600; transition:0.3s;}
  .add-cart {background:#111; color:#f5f5dc;}
  .wishlist {background:#f5f5dc; color:#111; border:2px solid #111;}
  .buy-now {background:#111; color:#f5f5dc;}
  .add-cart:hover, .buy-now:hover {opacity:0.8;}
  .wishlist:hover {background:#111; color:#f5f5dc;}

  /* ===== Modal ===== */
  .modal {display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:1000;}
  .modal-content {position:relative; max-width:90%; max-height:90%; width:auto; background:#f5f5dc; border-radius:10px; padding:1rem; display:flex; justify-content:center; align-items:center; overflow:hidden;}
  .modal-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 10px;
    transition: transform 0.2s ease;
    cursor: zoom-in;
    transform-origin: center center;
    position: relative;
  }
  .modal-content img.zoomed {
    cursor: grab;
  }
  .modal-close {position:absolute; top:10px; right:15px; font-size:2rem; cursor:pointer; color:#111;}

  /* ===== Animations ===== */
  .anim-item {opacity:0; transform:translateY(50px); transition: all 0.6s ease;}
  .anim-item.from-left {transform:translateX(-50px);}
  .anim-item.from-right {transform:translateX(50px);}
  .anim-item.from-top {transform:translateY(-50px);}
  .anim-item.active {opacity:1; transform:translateX(0) translateY(0);}



















































/* Product Page Styles */
.product-breadcrumb{padding:1rem 0;border-bottom:1px solid var(--line);background:var(--bg-2)}
.breadcrumb-container{max-width:1200px;margin:0 auto;padding:0 2rem}
.breadcrumb-link{color:var(--muted);text-decoration:none;transition:var(--transition);font-size:.875rem}
.breadcrumb-link:hover{color:var(--accent)}
.breadcrumb-separator{margin:0 .5rem;color:var(--line)}
.breadcrumb-current{color:var(--text);font-size:.875rem}
.product-container{max-width:1200px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.stock-status{margin-bottom:1.5rem;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.5rem}
.stock-status i{font-size:1rem}
.in-stock{color:var(--success)}
.low-stock{color:var(--warning)}
.out-of-stock{color:var(--error)}
.quantity-section{margin-bottom:1.5rem}
.quantity-label{font-weight:500;color:var(--text);margin-bottom:.5rem;display:block}
.quantity-controls{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);width:fit-content;padding:.5rem;background:var(--bg-2)}
.quantity-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text);cursor:pointer;transition:var(--transition)}
.quantity-button:hover{background:var(--bg);border-radius:var(--radius)}
.quantity-input{width:60px;text-align:center;border:none;padding:.5rem;appearance:textfield;-moz-appearance:textfield;background:transparent;color:var(--text);font-weight:500}
.quantity-input::-webkit-outer-spin-button,.quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.action-buttons{display:flex;gap:1rem}
.add-to-cart-btn{flex:1;padding:1rem 2rem;background:var(--accent);color:white;border:none;border-radius:var(--radius);font-weight:500;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.5rem}
.add-to-cart-btn:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.buy-now-btn{flex:1;padding:1rem 2rem;background:var(--text);color:white;border:none;border-radius:var(--radius);font-weight:500;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.5rem}
.buy-now-btn:hover{background:#000;transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.product-info{display:flex;flex-direction:column}
.product-category{color:var(--accent);text-decoration:none;font-weight:500;margin-bottom:1rem;font-size:.875rem;letter-spacing:1px;text-transform:uppercase}
.product-category:hover{color:var(--accent-light)}
.product-title{font-size:2.5rem;font-weight:300;color:var(--text);margin-bottom:1.5rem;line-height:1.2;font-family:'Playfair Display',serif}
.price-container{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem}
.current-price{font-size:2rem;font-weight:600;color:var(--accent)}
.original-price{font-size:1.25rem;color:var(--muted);text-decoration:line-through}
.savings-badge{background:var(--error);color:white;padding:.25rem .75rem;border-radius:var(--radius);font-size:.875rem}
.product-description{color:var(--muted);line-height:1.8;margin-bottom:2rem;font-size:1rem}
.product-images{position:relative;width:100%}
.main-image-container{position:relative;background:var(--bg-2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);transition:var(--transition)}
.main-image-container:hover{box-shadow:var(--shadow-hover)}
.main-image{width:100%;height:600px;object-fit:contain;background:linear-gradient(45deg,var(--bg) 0%,var(--bg-2) 100%);transition:var(--transition);padding:1rem}
.main-image:hover{transform:scale(1.02)}
.wishlist-button{position:absolute;top:1rem;right:1rem;background:var(--bg-2);color:var(--accent);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);transition:var(--transition);border:none;cursor:pointer;z-index:10}
.wishlist-button:hover{transform:translateY(-2px) scale(1.1);box-shadow:var(--shadow-hover);color:var(--error)}
.wishlist-button.active{color:var(--error)}