/* ============================================================
   SHIFT HAUS — Global Stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --black:      #0a0a0a;
  --off-black:  #111111;
  --carbon:     #1a1a1a;
  --charcoal:   #2a2a2a;
  --mid:        #555;
  --muted:      #888;
  --light:      #ccc;
  --white:      #f5f3ef;
  --gold:       #c9a84c;
  --gold-light: #e8c96a;
  --gold-dark:  #9c7a2e;
  --red:        #c0392b;
  --green:      #27ae60;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--black); color: var(--white); font-family: 'DM Sans', sans-serif; font-weight: 300; overflow-x: hidden; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: 'DM Sans', sans-serif; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--off-black); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ── NAV ── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 72px; background: rgba(10,10,10,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(201,168,76,0.15); }
.nav-logo { display: flex; flex-direction: column; line-height: 1; }
.nav-logo .logo-main { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 3px; color: var(--gold); }
.nav-logo .logo-sub  { font-size: 9px; letter-spacing: 6px; color: var(--muted); text-transform: uppercase; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { color: var(--light); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; transition: color .2s; position: relative; padding-bottom: 2px; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .25s; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.cart-btn { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid rgba(201,168,76,0.4); color: var(--gold); padding: 8px 20px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; transition: all .2s; border-radius: 2px; }
.cart-btn:hover { background: var(--gold); color: var(--black); }
.cart-count { background: var(--gold); color: var(--black); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; min-width: 20px; }
.cart-btn:hover .cart-count { background: var(--black); color: var(--gold); }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.nav-hamburger span { display: block; width: 24px; height: 1.5px; background: var(--light); transition: all .3s; }
.nav-mobile { display: none; position: fixed; top: 72px; left: 0; right: 0; background: var(--off-black); border-bottom: 1px solid rgba(201,168,76,0.15); padding: 20px 40px; z-index: 999; flex-direction: column; gap: 16px; }
.nav-mobile.open { display: flex; }
.nav-mobile a { color: var(--light); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }

/* ── Buttons ── */
.btn-primary    { background: var(--gold); color: var(--black); border: none; padding: 14px 36px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; transition: all .25s; border-radius: 2px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-outline    { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.25); padding: 14px 36px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; transition: all .25s; border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold-outline { background: transparent; color: var(--gold); border: 1px solid rgba(201,168,76,0.4); padding: 12px 28px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; transition: all .2s; border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; }
.btn-gold-outline:hover { background: var(--gold); color: var(--black); }

/* ── Section ── */
section { padding: 100px 40px; }
.section-eyebrow { font-size: 10px; letter-spacing: 5px; color: var(--gold); text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.section-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px,5vw,64px); letter-spacing: 2px; color: var(--white); line-height: 1; }
.section-header { margin-bottom: 60px; }
.text-gold { color: var(--gold); }
.text-muted { color: var(--muted); }

/* ── Page header ── */
.page-header { padding: 140px 40px 60px; background: var(--off-black); border-bottom: 1px solid rgba(201,168,76,0.1); position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 80% 50%, rgba(201,168,76,0.05) 0%, transparent 60%); }
.page-header-content { position: relative; z-index: 2; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.breadcrumb a { color: var(--gold); }
.breadcrumb span { color: var(--mid); }
.page-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px,6vw,80px); letter-spacing: 2px; line-height: 1; }

/* ── COMING SOON: Image ── */
.cs-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--carbon); display: flex; align-items: center; justify-content: center; }
.cs-emoji-bg { font-size: 80px; opacity: 0.12; user-select: none; filter: blur(2px); transition: transform .35s; }
.product-card:hover .cs-emoji-bg { transform: scale(1.08); }
.cs-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10,10,10,0.55); backdrop-filter: blur(3px); }
.cs-label { font-size: 12px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; text-align: center; line-height: 1.6; border: 1px solid rgba(201,168,76,0.35); padding: 8px 16px; border-radius: 2px; background: rgba(201,168,76,0.08); }

/* ── COMING SOON: Price ── */
.cs-price-wrap { display: flex; align-items: center; }
.cs-price-tag { font-size: 11px; letter-spacing: 1.5px; color: var(--gold); background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25); padding: 5px 10px; border-radius: 2px; white-space: nowrap; }

/* ── Product Cards ── */
.product-card { background: var(--off-black); border: 1px solid rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; position: relative; cursor: pointer; display: flex; flex-direction: column; }
.product-card:hover { border-color: rgba(201,168,76,0.3); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.product-badge { position: absolute; top: 16px; left: 16px; z-index: 3; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; border-radius: 1px; font-weight: 500; }
.badge-new  { background: var(--gold);  color: var(--black); }
.badge-sale { background: var(--red);   color: white; }
.badge-hot  { background: #e67e22;      color: white; }
.product-info { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.product-category { font-size: 10px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
.product-name { font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--white); margin-bottom: 6px; line-height: 1.3; flex: 1; }
.product-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.product-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: auto; gap: 8px; }
.add-btn { background: none; border: 1px solid rgba(201,168,76,0.4); color: var(--gold); width: 40px; height: 40px; border-radius: 2px; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
.add-btn:hover, .add-btn.added { background: var(--gold); color: var(--black); }
.enquire-btn { font-size: 18px; flex-shrink: 0; }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; }
.filter-btn { background: none; border: 1px solid rgba(255,255,255,0.1); color: var(--muted); padding: 8px 18px; border-radius: 2px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; transition: all .2s; }
.filter-btn:hover  { border-color: var(--gold); color: var(--gold); }
.filter-btn.active { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* ── Feature Strip ── */
.feature-strip { background: var(--carbon); border-top: 1px solid rgba(201,168,76,0.15); border-bottom: 1px solid rgba(201,168,76,0.15); padding: 40px; display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.feature-item { display: flex; gap: 16px; align-items: flex-start; }
.feature-icon { font-size: 28px; flex-shrink: 0; }
.feature-text h4 { font-weight: 500; font-size: 13px; letter-spacing: 1px; color: var(--white); margin-bottom: 4px; }
.feature-text p  { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ── Cart Drawer ── */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(4px); }
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; background: var(--off-black); border-left: 1px solid rgba(201,168,76,0.2); z-index: 2001; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.cart-drawer.open { transform: translateX(0); }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 28px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cart-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 3px; }
.close-btn { background: none; border: none; color: var(--muted); font-size: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: color .2s; border-radius: 2px; }
.close-btn:hover { color: var(--white); }
.cart-items { flex: 1; overflow-y: auto; padding: 20px 28px; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 16px; color: var(--muted); text-align: center; }
.cart-empty-icon { font-size: 48px; opacity: 0.3; }
.cart-empty p { font-size: 14px; letter-spacing: 1px; }
.cart-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06); animation: slideIn .25s ease; }
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.cart-item-img { width: 64px; height: 64px; background: var(--carbon); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.cart-item-info { flex: 1; }
.cart-item-name { font-family: 'DM Serif Display', serif; font-size: 14px; margin-bottom: 4px; line-height: 1.3; }
.qty-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qty-btn { background: var(--carbon); border: 1px solid rgba(255,255,255,0.1); color: var(--white); width: 26px; height: 26px; border-radius: 2px; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.qty-btn:hover { border-color: var(--gold); color: var(--gold); }
.qty-num { font-size: 13px; min-width: 20px; text-align: center; }
.remove-btn { background: none; border: none; color: var(--muted); font-size: 18px; transition: color .2s; padding: 4px; display: flex; align-items: center; }
.remove-btn:hover { color: var(--red); }
.cart-footer { border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; display: flex; flex-direction: column; }
.cart-checkout-wrap { padding: 14px 24px 4px; }
.cart-totals { padding: 0 24px 16px; }
.cart-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.checkout-btn { width: 100%; background: var(--gold); color: var(--black); border: none; padding: 16px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 500; transition: all .25s; border-radius: 2px; }
.checkout-btn:hover { background: var(--gold-light); }
@media (max-width: 768px) {
  .cart-checkout-wrap { position: sticky; bottom: 0; background: var(--off-black); padding: 12px 20px 16px; border-top: 1px solid rgba(201,168,76,.2); z-index: 10; }
  .cart-totals { padding: 0 20px 8px; order: -1; }
}

/* ── Toast ── */
.toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--gold); color: var(--black); padding: 12px 28px; border-radius: 2px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; z-index: 5000; transition: transform .35s cubic-bezier(.4,0,.2,1); white-space: nowrap; pointer-events: none; }
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Footer ── */
footer { background: var(--off-black); border-top: 1px solid rgba(201,168,76,0.15); padding: 60px 40px 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand .logo-main { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 3px; color: var(--gold); display: block; margin-bottom: 4px; }
.footer-brand .logo-sub  { font-size: 9px; letter-spacing: 6px; color: var(--muted); display: block; text-transform: uppercase; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.social-links { display: flex; gap: 12px; flex-wrap: wrap; }
.social-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 7px 14px; border: 1px solid rgba(255,255,255,0.1); border-radius: 2px; transition: all .2s; }
.social-link:hover { border-color: var(--gold); color: var(--gold); }
.footer-col h4 { font-size: 10px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--muted); font-size: 13px; transition: color .2s; display: flex; align-items: center; gap: 8px; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: var(--mid); flex-wrap: wrap; gap: 8px; }

/* ── Form ── */
.form-group  { margin-bottom: 20px; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-label  { display: block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.form-input, .form-select, .form-textarea { width: 100%; background: var(--carbon); border: 1.5px solid rgba(255,255,255,0.1); color: var(--white); padding: 12px 16px; font-family: 'DM Sans', sans-serif; font-size: 14px; border-radius: 2px; outline: none; transition: border-color .2s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(201,168,76,0.65); }
.form-input::placeholder { color: var(--mid); }
.form-input.err, .form-select.err { border-color: var(--red) !important; }
.form-error { font-size: 11px; color: #e74c3c; margin-top: 5px; display: none; }
.form-error.show { display: block; }
.form-select option { background: var(--carbon); }
.form-textarea { resize: vertical; min-height: 120px; }

/* ── Responsive ── */
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  section { padding: 60px 20px; }
  .feature-strip { grid-template-columns: 1fr 1fr; padding: 32px 20px; }
  .cart-drawer { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .page-header { padding: 120px 20px 40px; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
}
@media (max-width: 480px) {
  nav { padding: 0 16px; }
  section { padding: 48px 16px; }
  .feature-strip { grid-template-columns: 1fr; padding: 24px 16px; }
  .products-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   LEGAL PAGES — Shared Styles
   ══════════════════════════════════════════════════════════ */

/* Page transition overlay */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .45s cubic-bezier(.4,0,.2,1);
}
.page-transition-overlay.show { opacity: 1; pointer-events: all; animation: overlayIn .45s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
.ptr-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px; letter-spacing: 6px; color: var(--gold);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s .1s, transform .3s .1s;
}
.page-transition-overlay.show .ptr-logo { opacity: 1; transform: none; }

/* Body enter animation */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageEnter .5s cubic-bezier(.4,0,.2,1) forwards; }

/* Legal page layout */
.legal-page { padding: 80px 40px 100px; max-width: 860px; margin: 0 auto; }

.legal-toc {
  background: var(--off-black);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 4px;
  padding: 28px 32px;
  margin-bottom: 56px;
}
.legal-toc-title {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.legal-toc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.legal-toc-list a {
  font-size: 14px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
  transition: color .2s;
}
.legal-toc-list a:hover { color: var(--gold); }
.legal-toc-list a::before { content: '→'; color: var(--gold); font-size: 12px; }

.legal-section {
  margin-bottom: 56px;
  scroll-margin-top: 100px;
}
.legal-section-num {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.legal-section h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px; letter-spacing: 2px;
  color: var(--white); margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.legal-section p {
  font-size: 15px; color: var(--muted); line-height: 1.8;
  margin-bottom: 14px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol {
  margin: 8px 0 16px 0; padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.legal-section li {
  font-size: 15px; color: var(--muted); line-height: 1.7;
  display: flex; gap: 10px; align-items: flex-start;
}
.legal-section li::before { content: '•'; color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.legal-section ol { counter-reset: item; }
.legal-section ol li { counter-increment: item; }
.legal-section ol li::before { content: counter(item)'.'; color: var(--gold); min-width: 20px; }

.legal-highlight {
  background: rgba(201,168,76,0.07);
  border-left: 3px solid var(--gold);
  padding: 16px 20px; border-radius: 0 3px 3px 0;
  margin: 16px 0;
}
.legal-highlight p { color: var(--light) !important; margin: 0 !important; }

.legal-table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: 14px;
}
.legal-table th {
  background: rgba(201,168,76,0.1); color: var(--gold);
  padding: 10px 14px; text-align: left;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.legal-table td {
  padding: 10px 14px; color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-table tr:hover td { background: rgba(255,255,255,0.02); }

.legal-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 2px; margin-bottom: 8px;
}
.legal-badge.green { background: rgba(39,174,96,0.15); color: #6fcf97; border: 1px solid rgba(39,174,96,0.25); }
.legal-badge.red   { background: rgba(192,57,43,0.15);  color: #e88; border: 1px solid rgba(192,57,43,0.25); }
.legal-badge.gold  { background: rgba(201,168,76,0.12); color: var(--gold); border: 1px solid rgba(201,168,76,0.25); }

/* Footer legal links */
.footer-legal-links {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-legal-links a {
  font-size: 11px; color: var(--mid);
  letter-spacing: 1px;
  transition: color .2s;
  display: flex; align-items: center; gap: 4px;
}
.footer-legal-links a:hover { color: var(--gold); }

/* Legal page nav pills */
.legal-nav-pills {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px;
}
.legal-nav-pill {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 16px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.1); color: var(--muted);
  background: none; cursor: pointer;
  transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.legal-nav-pill:hover  { border-color: var(--gold); color: var(--gold); }
.legal-nav-pill.active { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* Last updated chip */
.last-updated {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted); letter-spacing: 1px;
  margin-bottom: 32px;
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 6px 14px; border-radius: 20px;
}
.last-updated::before { content: '🕐'; }

@media (max-width: 768px) {
  .legal-page { padding: 48px 20px 80px; }
  .legal-toc { padding: 20px; }
  .legal-section h2 { font-size: 26px; }
  .legal-nav-pills { gap: 6px; }
  .legal-nav-pill { font-size: 10px; padding: 6px 12px; }
}

/* ══════════════════════════════════════════════════════════
   CART BUTTONS + WHATSAPP MINI + SHOP NOW ANIMATION
   ══════════════════════════════════════════════════════════ */

/* Dual action buttons on product card */
.card-actions {
  display: flex; gap: 6px; align-items: center;
}
.wa-mini-btn {
  width: 40px; height: 40px; border-radius: 2px;
  background: rgba(37,211,102,0.12);
  border: 1px solid rgba(37,211,102,0.35);
  color: #25D366; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.wa-mini-btn:hover {
  background: #25D366; color: white;
  border-color: #25D366;
}

/* ── Shop Now button ripple ── */
.btn-primary { position: relative; overflow: hidden; }
.btn-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleAnim 0.65s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Shop Now flash overlay ── */
#shopNowOverlay {
  position: fixed; inset: 0; z-index: 9000;
  background: radial-gradient(ellipse at center,
    rgba(201,168,76,0.18) 0%, rgba(10,10,10,0.9) 70%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease-in;
}
#shopNowOverlay.active {
  opacity: 1;
  transition: opacity 0.08s ease-in;
  animation: overlayFlash 0.55s ease-out forwards;
}
@keyframes overlayFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Hero section animated particles ── */
.hero-particles {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 1;
}
.hero-particle {
  position: absolute; border-radius: 50%;
  background: var(--gold); opacity: 0;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-120vh) scale(0.3); opacity: 0; }
}

/* ── Shop Now button pulse ring ── */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0   rgba(201,168,76,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(201,168,76,0);   }
  100% { box-shadow: 0 0 0 0   rgba(201,168,76,0);    }
}
#shopNowBtn {
  animation: pulseRing 2.4s ease-out infinite;
}
#shopNowBtn:hover { animation: none; }

/* ── Scroll indicator arrow ── */
.scroll-indicator {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0.6; cursor: pointer; transition: opacity .2s;
  animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-indicator:hover { opacity: 1; }
.scroll-indicator span {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted);
}
.scroll-arrow {
  width: 20px; height: 20px; border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── Staggered product card entrance ── */
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.product-card.animating {
  animation: cardEntrance 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
  opacity: 0;
}

/* ── Real product image ── */
.prod-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--carbon);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}
.product-card:hover .prod-img-wrap img { transform: scale(1.06); }

/* ── Real price display ── */
.price-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.price-now {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .5px;
}
.price-old {
  font-size: 12px;
  color: var(--mid);
  text-decoration: line-through;
}
.price-disc {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: #c0392b;
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: .5px;
}

/* ── Cart item thumbnail ── */
.cart-item-img {
  width: 52px;
  height: 52px;
  background: var(--carbon);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Product card footer — stacked layout with full-width Add to Cart ── */
.product-footer-stack {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-btn-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.card-add-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold);
  color: var(--black);
  border: none;
  padding: 10px 14px;
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
  white-space: nowrap;
}
.card-add-btn:hover   { opacity: .88; }
.card-add-btn:active  { transform: scale(.97); }
.card-add-btn.added   { background: #27ae60; color: white; }
.add-label { pointer-events: none; }

/* ═══════════════════════════════════════════════════════
   QUANTITY PICKER MODAL
═══════════════════════════════════════════════════════ */
.qty-modal-bg {
  display: none;
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0);
  align-items: center; justify-content: center;
  padding: 20px;
  transition: background .3s ease;
}
.qty-modal-bg.open {
  display: flex;
  animation: modalBgIn .3s ease forwards;
}
.qty-modal-bg.closing {
  animation: modalBgOut .32s ease forwards;
}
@keyframes modalBgIn  { from { background:rgba(0,0,0,0) } to { background:rgba(0,0,0,.72) } }
@keyframes modalBgOut { from { background:rgba(0,0,0,.72) } to { background:rgba(0,0,0,0) } }

.qty-modal {
  background: var(--off-black);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 8px;
  width: 100%; max-width: 400px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(201,168,76,.08);
  animation: modalSlideIn .32s cubic-bezier(0.22,1,0.36,1) forwards;
}
.qty-modal-bg.closing .qty-modal {
  animation: modalSlideOut .28s cubic-bezier(0.4,0,1,1) forwards;
}
@keyframes modalSlideIn  { from { opacity:0; transform:translateY(28px) scale(.96) } to { opacity:1; transform:none } }
@keyframes modalSlideOut { from { opacity:1; transform:none } to { opacity:0; transform:translateY(16px) scale(.97) } }

.qty-modal-img-wrap {
  width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: var(--carbon);
  display: flex; align-items: center; justify-content: center;
}
.qty-modal-img-wrap img { width:100%; height:100%; object-fit:cover; }
.qty-modal-emoji { font-size: 72px; opacity: .2; }

.qty-modal-body {
  padding: 24px 28px 28px;
}
.qty-modal-cat {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.qty-modal-name {
  font-family: 'DM Serif Display', serif;
  font-size: 20px; line-height: 1.25;
  color: var(--white); margin-bottom: 10px;
}
.qty-modal-price {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.qty-modal-label {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}

/* Quantity stepper */
.qty-modal-controls {
  display: flex; align-items: center;
  border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
  overflow: hidden; width: fit-content; margin-bottom: 14px;
}
.qty-modal-btn {
  background: var(--carbon); border: none;
  color: var(--white); width: 48px; height: 52px;
  font-size: 22px; cursor: pointer;
  transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center;
}
.qty-modal-btn:hover { background: rgba(201,168,76,.18); color: var(--gold); }
.qty-modal-num {
  width: 60px; height: 52px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; font-weight: 600;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  color: var(--white); user-select: none;
}
.qty-modal-num.qty-pulse {
  animation: qtyPulse .22s ease;
}
@keyframes qtyPulse {
  0%   { transform: scale(1);    color: var(--white); }
  40%  { transform: scale(1.28); color: var(--gold); }
  100% { transform: scale(1);    color: var(--white); }
}

.qty-modal-total {
  font-size: 13px; color: var(--muted); margin-bottom: 20px; min-height: 20px;
  transition: opacity .2s;
}
.qty-modal-total strong { color: var(--gold); font-size: 15px; }

.qty-modal-confirm {
  width: 100%; padding: 14px;
  background: var(--gold); color: var(--black);
  border: none; border-radius: 4px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: opacity .2s, transform .15s;
  margin-bottom: 10px;
  position: relative; overflow: hidden;
}
.qty-modal-confirm:hover  { opacity: .88; }
.qty-modal-confirm:active { transform: scale(.98); }
/* Gold shimmer sweep on confirm button */
.qty-modal-confirm::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-100%);
}
.qty-modal-confirm:hover::after {
  animation: shimmerSweep .55s ease forwards;
}
@keyframes shimmerSweep { to { transform: translateX(100%); } }

.qty-modal-cancel {
  width: 100%; padding: 10px;
  background: none; border: 1px solid rgba(255,255,255,.09);
  color: var(--muted); border-radius: 4px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.qty-modal-cancel:hover { border-color: rgba(255,255,255,.22); color: var(--white); }

/* ═══════════════════════════════════════════════════════
   ADD-TO-CART BUTTON ANIMATION STATES
═══════════════════════════════════════════════════════ */

/* Phase 1 — shimmer loading bar */
.card-add-btn.btn-confirming {
  background: var(--carbon);
  border: 1px solid rgba(201,168,76,.3);
  color: var(--gold);
  pointer-events: none;
  overflow: hidden;
  position: relative;
}
.btn-shimmer-bar {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,.18) 40%,
    rgba(201,168,76,.45) 50%,
    rgba(201,168,76,.18) 60%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmerLoad .35s ease forwards;
}
@keyframes shimmerLoad {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* Phase 2 — success green burst */
.card-add-btn.btn-success {
  background: #1a6b38;
  border: 1px solid rgba(39,174,96,.5);
  color: white;
  pointer-events: none;
  position: relative;
  overflow: visible;
  animation: successPop .3s cubic-bezier(0.22,1,0.36,1);
}
@keyframes successPop {
  0%   { transform: scale(.94); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.success-ring {
  position: absolute; inset: -4px;
  border: 2px solid rgba(39,174,96,.6);
  border-radius: 4px;
  animation: ringPulse .5s ease forwards;
}
@keyframes ringPulse {
  0%   { opacity:1; inset:-2px; }
  100% { opacity:0; inset:-10px; }
}
.success-check {
  animation: checkDraw .35s .05s ease both;
}
@keyframes checkDraw {
  from { stroke-dashoffset: 30; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}

/* Phase 3 — fade back out */
.card-add-btn.btn-fading-out {
  animation: fadeToDefault .4s ease forwards;
}
@keyframes fadeToDefault {
  0%   { background: #1a6b38; color: white; }
  100% { background: var(--gold); color: var(--black); }
}

/* ═══════════════════════════════════════════════════════
   GOLD PARTICLES
═══════════════════════════════════════════════════════ */
.gold-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: particleBurst .65s cubic-bezier(0,.9,.57,1) forwards;
}
@keyframes particleBurst {
  0%   { transform: translate(0,0) scale(1);   opacity: 1; }
  70%  { opacity: .8; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════
   UPSELL & BUNDLE STYLES
═══════════════════════════════════════════════════════ */

/* Product page — Complete the Build */
.upsell-section { padding: 48px 0 0; }
.upsell-section-eyebrow {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.upsell-section-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 28px;
  letter-spacing: 2px; margin-bottom: 24px;
}
.upsell-products-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.upsell-prod-card {
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px; overflow: hidden; cursor: pointer;
  transition: border-color .2s, transform .2s;
  position: relative;
}
.upsell-prod-card:hover {
  border-color: rgba(201,168,76,.35);
  transform: translateY(-2px);
}
.upsell-prod-thumb {
  width: 100%; aspect-ratio: 4/3;
  background: var(--carbon); overflow: hidden;
}
.upsell-prod-thumb img { transition: transform .35s; }
.upsell-prod-card:hover .upsell-prod-thumb img { transform: scale(1.06); }
.upsell-prod-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;
  background: rgba(201,168,76,.9); color: var(--black);
  padding: 2px 7px; border-radius: 2px; font-weight: 700;
}
.upsell-prod-info { padding: 12px 14px; }
.upsell-prod-cat {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.upsell-prod-name { font-size: 12px; font-weight: 500; margin-bottom: 8px; line-height: 1.35; }
.upsell-prod-price-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.upsell-quick-add {
  width: 100%; background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.3); color: var(--gold);
  padding: 7px 0; border-radius: 2px; font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.upsell-quick-add:hover { background: rgba(201,168,76,.2); border-color: var(--gold); }

/* Cart drawer — Bundle upsell zone */
.cart-upsell-zone {
  padding: 14px 16px; border-top: 1px solid rgba(201,168,76,.15);
  background: rgba(201,168,76,.03);
}
.cart-upsell-label {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.upsell-bundle-card {
  background: var(--carbon);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 5px; padding: 14px; margin-bottom: 10px;
  transition: border-color .2s;
}
.upsell-bundle-card:last-child { margin-bottom: 0; }
.upsell-bundle-card:hover { border-color: rgba(201,168,76,.4); }
.upsell-badge {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px; font-weight: 600;
}
.upsell-items-row {
  display: flex; align-items: center; gap: 4px; margin-bottom: 8px;
}
.upsell-names {
  font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.4;
}
.upsell-pricing {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.upsell-original {
  font-size: 11px; color: var(--mid); text-decoration: line-through;
}
.upsell-arrow { color: var(--mid); font-size: 11px; }
.upsell-price {
  font-size: 14px; font-weight: 700; color: var(--gold);
}
.upsell-save {
  font-size: 10px; background: rgba(39,174,96,.15);
  border: 1px solid rgba(39,174,96,.3);
  color: #7ed8a3; padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.upsell-add-btn {
  width: 100%; background: var(--gold); color: var(--black);
  border: none; padding: 9px; border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; cursor: pointer; transition: opacity .2s;
}
.upsell-add-btn:hover { opacity: .88; }

/* Bundle discount line in cart totals */
.cart-bundle-discount {
  display: flex; justify-content: space-between;
  font-size: 12px; padding: 4px 0; color: #7ed8a3;
}

@media(max-width: 640px) {
  .upsell-products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SKELETON LOADERS
   ============================================================ */
@keyframes skeletonPulse {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-base {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%);
  background-size: 800px 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  border-radius: 2px;
}
.skeleton-card {
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.skeleton-img  { width: 100%; aspect-ratio: 1/1; }
.skeleton-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.skeleton-line { height: 11px; }
.skeleton-line.short  { width: 45%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.full   { width: 100%; }
.skeleton-line.title  { height: 15px; width: 85%; }
.skeleton-btn  { height: 38px; margin-top: 8px; border-radius: 2px; }

/* ============================================================
   OPTIMISTIC BUTTON STATES
   ============================================================ */

/* Cart button — instant feedback on click */
.cart-btn.cart-btn--adding {
  background: var(--gold);
  color: var(--black);
  transform: scale(.96);
}

/* Checkout button pulse while processing */
.checkout-btn.btn--processing {
  opacity: .75;
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.checkout-btn.btn--processing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: btnSweep .8s linear infinite;
}
@keyframes btnSweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Qty +/- optimistic press */
.qty-btn.qty-btn--pressed {
  transform: scale(.88);
  background: rgba(201,168,76,.25);
  transition: transform .08s, background .08s;
}

/* Remove btn optimistic */
.remove-btn.remove-btn--pressed {
  transform: scale(.85);
  opacity: .5;
  transition: transform .08s, opacity .08s;
}

/* Cart drawer slide refresh indicator */
.cart-refreshing {
  position: relative;
  pointer-events: none;
}
.cart-refreshing::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  animation: cartRefreshBar .4s ease forwards;
}
@keyframes cartRefreshBar {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Smooth card fade-in when skeletons replaced */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.product-card--reveal {
  animation: cardReveal .3s ease forwards;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
#announcementBar {
  background: linear-gradient(90deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
  border-bottom: 1px solid rgba(201,168,76,.2);
  padding: 10px 20px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--muted);
  position: relative;
  overflow: hidden;
  z-index: 1001;
}
#announcementBar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.04) 50%, transparent 100%);
  animation: annShimmer 3s linear infinite;
}
@keyframes annShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.ann-text {
  transition: opacity .3s, transform .3s;
  display: inline-block;
}
.ann-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 4px;
  transition: color .2s;
}
.ann-close:hover { color: var(--white); }
/* Nav sits below announcement bar when visible */
nav { top: 0; transition: top .3s; }
body.has-ann-bar nav { top: 38px; }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
#floatWA {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 9999;
  background: #25D366;
  color: white;
  border-radius: 50px;
  padding: 14px 20px 14px 16px;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(37,211,102,.35), 0 2px 8px rgba(0,0,0,.3);
  transition: transform .25s, box-shadow .25s, background .2s, opacity .3s;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  max-width: 54px;
}
#floatWA.float-wa--visible {
  opacity: 1;
  pointer-events: auto;
  animation: floatWAPop .4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes floatWAPop {
  from { transform: scale(.6) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}
#floatWA:hover {
  background: #1ea953;
  box-shadow: 0 6px 32px rgba(37,211,102,.5), 0 4px 16px rgba(0,0,0,.4);
  transform: translateY(-3px);
  max-width: 200px;
}
.float-wa-label {
  font-size: 13px; font-weight: 600; white-space: nowrap;
  max-width: 0; overflow: hidden;
  transition: max-width .35s ease, opacity .3s;
  opacity: 0;
}
#floatWA:hover .float-wa-label { max-width: 120px; opacity: 1; }

/* Pulse ring */
#floatWA::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50px;
  box-shadow: 0 0 0 0 rgba(37,211,102,.5);
  animation: floatWARing 2.5s ease-out infinite 2s;
}
@keyframes floatWARing {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.scroll-reveal.scroll-visible {
  opacity: 1;
  transform: none;
}
.scroll-reveal.delay-1 { transition-delay: .1s; }
.scroll-reveal.delay-2 { transition-delay: .2s; }
.scroll-reveal.delay-3 { transition-delay: .3s; }
.scroll-reveal.delay-4 { transition-delay: .4s; }

/* ============================================================
   RECENTLY VIEWED
   ============================================================ */
.rv-section { padding: 60px 40px; background: var(--off-black); border-top: 1px solid rgba(255,255,255,.05); }
.rv-header  { margin-bottom: 28px; }
.rv-title   { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 2px; }
.rv-track-wrap { overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: rgba(201,168,76,.3) transparent; }
.rv-track-wrap::-webkit-scrollbar { height: 3px; }
.rv-track-wrap::-webkit-scrollbar-thumb { background: rgba(201,168,76,.3); border-radius: 2px; }
.rv-track {
  display: flex; gap: 16px;
  min-width: max-content;
}
.rv-card {
  width: 160px; flex-shrink: 0;
  background: var(--carbon);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 3px; overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.rv-card:hover { border-color: rgba(201,168,76,.35); transform: translateY(-3px); }
.rv-thumb {
  width: 100%; aspect-ratio: 1;
  background: var(--off-black);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.rv-card:hover .rv-thumb img { transform: scale(1.06); }
.rv-emoji   { font-size: 40px; opacity: .3; }
.rv-info    { padding: 10px 12px; }
.rv-cat     { font-size: 9px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; margin-bottom: 4px; }
.rv-name    { font-size: 12px; font-weight: 500; line-height: 1.4; margin-bottom: 6px; color: var(--white); }
.rv-price   { font-size: 12px; color: var(--gold); font-weight: 700; }
.rv-price-req { font-size: 10px; color: var(--muted); }

@media(max-width:768px){ .rv-section { padding: 40px 20px; } }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-section { padding: 0 0 40px; }
.reviews-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.reviews-title { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:2px; margin-top:4px; }
.reviews-summary { display:flex; align-items:center; gap:14px; }
.reviews-avg { font-family:'Bebas Neue',sans-serif; font-size:48px; color:var(--gold); line-height:1; }
.reviews-stars { display:flex; gap:2px; margin-bottom:4px; }
.reviews-count { font-size:12px; color:var(--muted); }

/* Star rating display on cards */
.card-stars { display:flex; align-items:center; gap:4px; margin-top:4px; margin-bottom:6px; }
.card-stars svg { flex-shrink:0; }
.card-stars-count { font-size:10px; color:var(--muted); }

.review-card {
  background: var(--carbon);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 3px; padding: 18px 20px;
  margin-bottom: 12px;
  transition: border-color .2s;
}
.review-card:hover { border-color: rgba(201,168,76,.2); }
.review-card-top { display:flex; justify-content:space-between; margin-bottom:10px; }
.review-name { font-size:13px; font-weight:600; color:var(--white); }
.review-verified { font-size:10px; color:#27ae60; background:rgba(39,174,96,.1); padding:2px 6px; border-radius:10px; margin-left:6px; }
.review-stars { display:flex; gap:2px; margin-top:4px; }
.review-date { font-size:11px; color:var(--muted); }
.review-comment { font-size:13px; color:var(--muted); line-height:1.6; }

.review-form-card {
  background: var(--off-black);
  border: 1px solid rgba(201,168,76,.15);
  border-radius: 4px; overflow: hidden; margin-top: 20px;
}
.review-form-title {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px;
}
.review-form-body { padding: 20px; }
.rf-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.rf-field { display:flex; flex-direction:column; gap:6px; }
.rf-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.rf-input {
  background: var(--carbon); border: 1.5px solid rgba(255,255,255,.1);
  color: var(--white); padding: 10px 12px;
  font-family:'DM Sans',sans-serif; font-size:13px;
  border-radius:2px; outline:none;
  transition: border-color .2s;
}
.rf-input:focus { border-color: rgba(201,168,76,.5); }
.rf-textarea { resize: vertical; min-height: 80px; margin-bottom:16px; }
.rf-submit {
  background:var(--gold); color:var(--black); border:none;
  padding:12px 28px; border-radius:2px; font-size:12px;
  letter-spacing:2px; text-transform:uppercase; font-weight:700;
  cursor:pointer; transition: opacity .2s;
  font-family:'DM Sans',sans-serif;
}
.rf-submit:hover { opacity:.88; }
.star-inputs { display:flex; gap:4px; padding-top:4px; }
.star-input { transition: transform .1s; }
.star-input:hover { transform: scale(1.2); }
@media(max-width:600px){ .rf-row { grid-template-columns:1fr; } }

/* ============================================================
   FREE DELIVERY BAR IN CART
   ============================================================ */
.delivery-bar-wrap {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.delivery-bar-msg {
  font-size: 12px; color: var(--muted);
  margin-bottom: 8px; line-height: 1.4;
}
.delivery-bar-msg strong { color: var(--white); }
.delivery-bar-track {
  height: 4px; background: rgba(255,255,255,.08);
  border-radius: 4px; overflow: hidden; margin-bottom: 5px;
}
.delivery-bar-fill {
  height: 100%; background: var(--gold);
  border-radius: 4px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.delivery-bar-fill--done { background: #27ae60; }
.delivery-bar-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--mid);
}

/* ============================================================
   TRUST BADGES
   ============================================================ */
.trust-strip {
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 20px 40px;
}
.trust-grid {
  display: flex; justify-content: center;
  flex-wrap: wrap; gap: 12px 32px;
}
.trust-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .5px; color: var(--muted);
  transition: color .2s;
}
.trust-badge:hover { color: var(--white); }
.trust-badge-icon { font-size: 18px; }
.trust-badge-text strong { color: var(--gold); display:block; font-size:11px; letter-spacing:1px; }
@media(max-width:600px){ .trust-strip{ padding:16px 20px; } .trust-grid{ gap:10px 20px; } }

/* ============================================================
   STICKY ADD TO CART BAR
   ============================================================ */
#stickyCartBar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 800;
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(201,168,76,.2);
  padding: 14px 40px;
  display: flex; align-items: center; gap: 16px;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
#stickyCartBar.sticky--visible { transform: translateY(0); }
.sticky-bar-info { flex:1; min-width:0; }
.sticky-bar-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-bar-price { font-size:14px; color:var(--gold); font-weight:700; }
.sticky-bar-btn {
  background: var(--gold); color: var(--black);
  border: none; padding: 12px 28px; border-radius:2px;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  font-weight:700; cursor:pointer; white-space:nowrap;
  font-family:'DM Sans',sans-serif;
  transition: opacity .2s;
  flex-shrink: 0;
}
.sticky-bar-btn:hover { opacity:.88; }
@media(max-width:600px){ #stickyCartBar{ padding:12px 16px; } }

/* ============================================================
   STAR RATING ON PRODUCT CARDS
   ============================================================ */
.card-rating-row { display:flex; align-items:center; gap:4px; margin:4px 0 6px; }
.card-rating-stars { color:#c9a84c; font-size:11px; letter-spacing:1px; }
.card-rating-count { font-size:10px; color:var(--muted); }

/* ============================================================
   VIDEO SUPPORT IN GALLERY
   ============================================================ */
.gallery-video {
  width:100%; height:100%; object-fit:cover;
  border:none; background:#000;
}
.gallery-media-type {
  position:absolute; top:12px; left:12px; z-index:10;
  background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.15);
  border-radius:20px; padding:3px 10px; font-size:10px; letter-spacing:1px;
  color:rgba(255,255,255,.7); backdrop-filter:blur(4px);
}
.gallery-thumb.is-video::after {
  content:'▶';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:18px;
  background:rgba(0,0,0,.4);
}

/* ============================================================
   CUSTOMERS ALSO VIEWED CAROUSEL
   ============================================================ */
.carousel-section { padding: 60px 40px; }
.carousel-wrap { position:relative; }
.carousel-track-outer { overflow:hidden; }
.carousel-track {
  display:flex; gap:20px;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.carousel-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  background:var(--off-black); border:1px solid rgba(201,168,76,.3);
  color:var(--gold); cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s, border-color .2s, transform .15s;
}
.carousel-nav:hover { background:rgba(201,168,76,.15); border-color:var(--gold); transform:translateY(-50%) scale(1.1); }
.carousel-nav.prev { left:-20px; }
.carousel-nav.next { right:-20px; }
.carousel-dots { display:flex; justify-content:center; gap:6px; margin-top:20px; }
.carousel-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.15); cursor:pointer;
  transition:background .2s, transform .2s;
}
.carousel-dot.active { background:var(--gold); transform:scale(1.3); }
@media(max-width:600px){ .carousel-section{ padding:40px 20px; } .carousel-nav{ display:none; } }


/* ── Stock indicators ── */
.pp-stock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
  padding: 6px 12px; border-radius: 2px; margin-bottom: 14px;
}
.pp-stock--in  { background: rgba(39,174,96,.1);  color: #27ae60; border: 1px solid rgba(39,174,96,.25); }
.pp-stock--low { background: rgba(231,188,60,.1);  color: #e7bc3c; border: 1px solid rgba(231,188,60,.3); }
.pp-stock--out { background: rgba(231,76,60,.08); color: #e74c3c; border: 1px solid rgba(231,76,60,.2); }