/* ============================================================
   MOJIBANDE — Style Updates v2
   Add <link rel="stylesheet" href="style-updates.css"> after style.css
   ============================================================ */

/* ── VIBRANT LIGHT THEME ── */
[data-theme="light"] {
  --bg:       #FFFFFF;
  --bg2:      #F5F5F5;
  --bg3:      #EBEBEB;
  --bg4:      #E0E0E0;
  --surface:  #FFFFFF;
  --card:     #FFFFFF;
  --border:   rgba(0,0,0,.09);
  --border2:  rgba(200,130,0,.3);
  --text:     #111111;
  --text2:    #4A4A4A;
  --text3:    #888888;
  --gold:     #C8820A;
  --gold2:    #E8A020;
  --gold-d:   #9B6106;
  --red:      #E8001E;
  --shadow-sm: 0 2px 12px rgba(0,0,0,.07);
  --shadow:    0 8px 32px rgba(0,0,0,.11);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.14);
  --glow-gold: 0 4px 24px rgba(200,130,10,.25);
  --g-gold:    linear-gradient(135deg,#E8A020,#C8820A);
}

/* ── PRODUCT DETAIL PAGE ── */
.pd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
  padding: 2rem 0 4rem;
}
@media(max-width:768px){ .pd-layout{grid-template-columns:1fr;gap:2rem} }

/* Gallery */
.pd-gallery { position: sticky; top: calc(var(--nav-h) + 1rem); }
.pd-main-img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--bg3); display: block; cursor: zoom-in;
  transition: transform .4s ease;
}
.pd-main-img:hover { transform: scale(1.02); }
.pd-thumbs {
  display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap;
}
.pd-thumb {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--r); border: 2px solid transparent;
  cursor: pointer; transition: border-color .2s; background: var(--bg3);
}
.pd-thumb:hover, .pd-thumb.active { border-color: var(--gold); }

/* Info */
.pd-brand { font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem }
.pd-name  { font-family:var(--font-d);font-size:2.2rem;font-weight:700;line-height:1.15;margin-bottom:.75rem }
.pd-rating-row { display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap }
.pd-stars { color:#F59E0B;font-size:1rem;letter-spacing:.05em }
.pd-rval  { font-weight:700;font-size:.9rem }
.pd-rcnt  { font-size:.8rem;color:var(--text3);border-left:1px solid var(--border);padding-left:.6rem }
.pd-price-row { display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap }
.pd-price-now { font-size:2rem;font-weight:800;color:var(--text) }
.pd-price-old { font-size:1.1rem;text-decoration:line-through;color:var(--text3) }
.pd-price-save{
  font-size:.78rem;font-weight:700;background:rgba(232,0,30,.1);color:var(--red);
  padding:.2rem .6rem;border-radius:var(--r-pill);
}
.pd-desc { font-size:.9rem;color:var(--text2);line-height:1.7;margin-bottom:1.5rem }

/* Size selector */
.pd-size-label { font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin-bottom:.6rem;display:flex;gap:.5rem;align-items:center }
.pd-size-label a { color:var(--gold);text-decoration:underline;font-weight:600;cursor:pointer }
.pd-sizes { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem }
.pd-size-btn {
  padding:.55rem 1.1rem;border:1.5px solid var(--border);border-radius:var(--r-pill);
  font-size:.82rem;font-weight:600;background:var(--bg2);color:var(--text);
  cursor:pointer;transition:all .2s;font-family:var(--font-b);
}
.pd-size-btn:hover { border-color:var(--gold);color:var(--gold) }
.pd-size-btn.selected { border-color:var(--gold);background:rgba(200,130,10,.12);color:var(--gold) }
.pd-size-btn.oos { opacity:.35;cursor:not-allowed;text-decoration:line-through }

/* CTAs */
.pd-cta-row { display:flex;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap }
.pd-cta-row .btn { flex:1;min-width:140px;justify-content:center }
.pd-wish-btn {
  width:50px;height:50px;border-radius:50%;border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  background:var(--bg2);cursor:pointer;transition:all .2s;flex-shrink:0;
}
.pd-wish-btn:hover,.pd-wish-btn.active { border-color:#FF3C5F;background:rgba(255,60,95,.1) }

/* Badges row */
.pd-badges-row {
  display:flex;gap:.5rem;flex-wrap:wrap;padding:1rem;
  background:var(--bg2);border-radius:var(--r);margin-bottom:1.5rem;
}
.pd-badge-item { display:flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;color:var(--text2) }
.pd-badge-item span { font-size:.9rem }

/* ── TABS ── */
.pd-tabs { margin-top:3rem;border-top:2px solid var(--border) }
.pd-tab-nav {
  display:flex;gap:0;border-bottom:2px solid var(--border);
  overflow-x:auto;scrollbar-width:none;
}
.pd-tab-nav::-webkit-scrollbar { display:none }
.pd-tab-btn {
  padding:1rem 1.5rem;font-size:.82rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text3);border:none;background:none;
  cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;
  margin-bottom:-2px;transition:all .2s;font-family:var(--font-b);
}
.pd-tab-btn:hover { color:var(--text) }
.pd-tab-btn.active { color:var(--gold);border-bottom-color:var(--gold) }
.pd-tab-panel { display:none;padding:2rem 0 }
.pd-tab-panel.active { display:block }

/* Description tab */
.pd-tab-desc { font-size:.9rem;color:var(--text2);line-height:1.8;max-width:680px }
.pd-features { margin-top:1.5rem }
.pd-features li {
  padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.88rem;
  color:var(--text2);display:flex;gap:.6rem;align-items:center;
}
.pd-features li::before { content:'✓';color:var(--gold);font-weight:700;flex-shrink:0 }

/* Size Guide tab */
.size-table { width:100%;border-collapse:collapse;font-size:.84rem;max-width:600px }
.size-table th { background:var(--bg3);padding:.75rem 1rem;text-align:left;font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text2) }
.size-table td { padding:.75rem 1rem;border-bottom:1px solid var(--border);color:var(--text2) }
.size-table tr:hover td { background:var(--bg2) }

/* Reviews tab */
.reviews-summary { display:flex;gap:2.5rem;align-items:center;padding:1.5rem;background:var(--bg2);border-radius:var(--r-lg);margin-bottom:1.5rem;flex-wrap:wrap }
.reviews-big-score { font-size:3.5rem;font-weight:800;line-height:1 }
.reviews-big-stars { font-size:1.3rem;color:#F59E0B;letter-spacing:.05em;margin:.2rem 0 }
.reviews-big-cnt { font-size:.8rem;color:var(--text3) }
.reviews-bars { flex:1;min-width:200px }
.review-bar-row { display:flex;align-items:center;gap:.6rem;font-size:.78rem;margin-bottom:.35rem;color:var(--text2) }
.review-bar-track { flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden }
.review-bar-fill { height:100%;background:#F59E0B;border-radius:3px }
.review-card {
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.5rem;margin-bottom:1rem;
}
.review-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem }
.reviewer-info { display:flex;align-items:center;gap:.75rem }
.reviewer-avatar {
  width:38px;height:38px;border-radius:50%;background:var(--g-gold);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;color:#fff;flex-shrink:0;
}
.reviewer-name { font-weight:700;font-size:.88rem }
.reviewer-date { font-size:.75rem;color:var(--text3) }
.review-stars { color:#F59E0B;font-size:.9rem }
.review-title { font-weight:700;font-size:.9rem;margin-bottom:.4rem }
.review-body  { font-size:.85rem;color:var(--text2);line-height:1.6 }
.review-verified { font-size:.7rem;font-weight:700;color:#22C55E;letter-spacing:.05em;text-transform:uppercase;margin-top:.6rem }

/* ── RELATED PRODUCTS ── */
.related-section { padding:3rem 0 5rem }
.related-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem }
@media(max-width:900px){ .related-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .related-grid{grid-template-columns:repeat(2,1fr)} }

/* ── DASHBOARD ADDITIONS ── */

/* Security panel */
.security-block {
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.75rem;max-width:520px;margin-bottom:1.5rem;
}
.security-block-title {
  font-weight:700;font-size:.95rem;margin-bottom:1.25rem;
  padding-bottom:1rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.5rem;
}
.danger-zone {
  background:rgba(255,60,95,.05);border:1px solid rgba(255,60,95,.2);
  border-radius:var(--r-lg);padding:1.5rem;max-width:520px;margin-top:1.5rem;
}
.danger-zone-title { font-weight:700;color:var(--red);margin-bottom:.75rem;font-size:.9rem }

/* Payment panel */
.upi-card {
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:.75rem;
}
.upi-icon { width:40px;height:40px;border-radius:var(--r);background:linear-gradient(135deg,#7D00A4,#3A007A);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.7rem;font-weight:900;color:#fff;letter-spacing:.05em }
.upi-details { flex:1 }
.upi-id   { font-weight:700;font-size:.9rem }
.upi-label { font-size:.75rem;color:var(--text3) }
.upi-default-badge { font-size:.65rem;font-weight:700;background:rgba(200,130,10,.12);color:var(--gold);padding:.15rem .5rem;border-radius:var(--r-pill);letter-spacing:.06em;text-transform:uppercase }
.payment-type-tabs { display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap }
.payment-tab-btn {
  padding:.5rem 1.1rem;border-radius:var(--r-pill);border:1.5px solid var(--border);
  background:var(--bg2);font-size:.8rem;font-weight:600;cursor:pointer;
  color:var(--text2);transition:all .2s;font-family:var(--font-b);
}
.payment-tab-btn.active { border-color:var(--gold);color:var(--gold);background:rgba(200,130,10,.08) }
.coming-soon-pill { font-size:.65rem;font-weight:700;background:var(--bg3);color:var(--text3);padding:.1rem .5rem;border-radius:var(--r-pill);margin-left:.4rem }

/* ── PRODUCT PAGE SKELETON ── */
.pd-skel { background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4,#e0e0e0) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r) }
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── REMOVE DUPLICATE ADD-TO-CART OVERLAY ON PRODUCT IMAGE ── */
/* Keep only the bottom-row buttons; hide the hover overlay */
.product-actions {
  display: none !important;
}

/* ── FIX LAST COUPON CHIP BREAKING ON SMALL SCREENS ── */
.offers-bar {
  padding-right: 1.25rem;
  padding-left: 0;
  /* Ensure chips wrap nicely on very small screens */
}
.offer-chip {
  min-width: 200px;
  max-width: 260px;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .offer-chip {
    min-width: 180px;
    padding: .85rem 1rem;
  }
  .offer-chip-code {
    font-size: 1rem;
  }
}

/* ── ENSURE LIGHT THEME IS VIBRANT ON FIRST LOAD ── */
html:not([data-theme]) {
  --bg:       #FFFFFF;
  --bg2:      #F5F5F5;
  --bg3:      #EBEBEB;
  --bg4:      #E0E0E0;
  --text:     #111111;
  --text2:    #4A4A4A;
  --text3:    #888888;
}

/* ── FOOTER MODERNIZED ── */
/* Footer always uses dark theme regardless of page theme for premium look */
#footer-wrap {
  background: linear-gradient(180deg, #141210 0%, #0e0c0a 100%) !important;
  border-top: 2px solid rgba(232,197,71,0.35) !important;
  position: relative !important;
}
#footer-wrap::before {
  content: '';
  position: absolute;
  top: -2px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,197,71,0.8), transparent);
  pointer-events: none;
}
#footer-wrap .footer-desc,
#footer-wrap .footer-col ul li a,
#footer-wrap p,
#footer-wrap span {
  color: rgba(255,255,255,0.55) !important;
}
#footer-wrap .footer-brand-name,
#footer-wrap h4 {
  color: #E8C547 !important;
}
#footer-wrap .footer-bottom p,
#footer-wrap .footer-bottom-links a {
  color: rgba(255,255,255,0.35) !important;
}
#footer-wrap .footer-bottom-links a:hover,
#footer-wrap .footer-col ul li a:hover {
  color: #E8C547 !important;
}
#footer-wrap .social-link {
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.6) !important;
}
#footer-wrap .social-link:hover {
  border-color: #E8C547 !important;
  color: #E8C547 !important;
}
#footer-wrap .footer-newsletter-input input {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
#footer-wrap .footer-newsletter-input input::placeholder {
  color: rgba(255,255,255,0.3) !important;
}
#footer-wrap .footer-newsletter-input input:focus {
  border-color: #E8C547 !important;
}