/* =========================================================
   REMZY COLLECTION — Design System
   Gold · Coral · Freshwater Pearl
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600;700&family=Alex+Brush&display=swap');

:root{
  --gold:        #B8912F;
  --gold-deep:   #8C6A1E;
  --gold-light:  #E7C776;
  --coral:       #E8654D;
  --coral-deep:  #C6432D;
  --coral-soft:  #F7D9CF;
  --pearl:       #FAF5EC;
  --pearl-deep:  #F1E7D5;
  --lagoon:      #B9CFC9;
  --ink:         #2A2118;
  --ink-soft:    #6B5D4E;
  --white:       #FFFFFF;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;
  --font-script: 'Alex Brush', cursive;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 12px 30px -12px rgba(42,33,24,.18);
  --shadow-strong: 0 20px 45px -15px rgba(42,33,24,.28);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--pearl);
  overflow-x:hidden;
}
@media (max-width:991.98px){
  body{padding-bottom:66px;} /* room for mobile bottom nav */
}

h1,h2,h3,h4,.font-display{font-family:var(--font-display); font-weight:600; letter-spacing:.2px;}
.font-script{font-family:var(--font-script); font-weight:400;}
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:600;
  color:var(--coral-deep);
}
a{text-decoration:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Buttons ---------- */
.btn{border-radius:999px; font-family:var(--font-body); font-weight:600; letter-spacing:.03em; padding:.7rem 1.6rem; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--ink); border:none; box-shadow:var(--shadow-soft);}
.btn-gold:hover{background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:var(--white);}
.btn-coral{background:var(--coral); color:var(--white); border:none; box-shadow:0 12px 25px -10px rgba(198,67,45,.55);}
.btn-coral:hover{background:var(--coral-deep); color:var(--white);}
.btn-outline-ink{background:transparent; border:1.5px solid var(--ink); color:var(--ink);}
.btn-outline-ink:hover{background:var(--ink); color:var(--pearl);}
.payment-tab.active{background:var(--ink); color:var(--pearl);}
.btn-whatsapp{background:#25D366; color:#fff; border:none;}
.btn-whatsapp:hover{background:#1DA851; color:#fff;}
.btn-sm-pill{border-radius:999px; padding:.4rem 1rem; font-size:.85rem;}

/* ---------- Beaded strand divider (signature element) ---------- */
.strand-divider{display:flex; align-items:center; justify-content:center; gap:10px; padding:2.2rem 0; user-select:none;}
.strand-divider .bead{width:9px; height:9px; border-radius:50%; background:var(--coral); box-shadow:inset -2px -2px 3px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.15);}
.strand-divider .bead:nth-child(3n+1){background:var(--gold);}
.strand-divider .bead:nth-child(5n+2){background:var(--lagoon);}
.strand-divider .bead.big{width:14px; height:14px;}
.strand-divider .line{height:1px; width:60px; background:linear-gradient(90deg, transparent, var(--ink-soft), transparent); opacity:.35;}

/* ---------- Navbar ---------- */
.navbar-remzy{background:rgba(250,245,236,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(184,145,47,.18); transition:box-shadow .3s ease;}
.navbar-remzy.scrolled{box-shadow:var(--shadow-soft);}
.brand-mark{font-family:var(--font-display); font-size:1.55rem; font-weight:700; color:var(--ink); letter-spacing:.5px;}
.brand-mark span{color:var(--coral); font-family:var(--font-script); font-size:1.9rem; margin-left:2px;}
.navbar-remzy .nav-link{font-weight:500; color:var(--ink) !important; position:relative; margin:0 .5rem; padding:.4rem 0 !important;}
.navbar-remzy .nav-link::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--coral); transition:width .25s ease;}
.navbar-remzy .nav-link:hover::after, .navbar-remzy .nav-link.active::after{width:100%;}
.navbar-remzy .nav-link.active{color:var(--coral-deep) !important;}
.icon-btn{width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--pearl-deep); color:var(--ink); position:relative; transition:.25s; border:none;}
.icon-btn:hover{background:var(--coral); color:#fff;}
.dropdown-toggle-no-caret::after{display:none;}
.cart-badge{position:absolute; top:-4px; right:-4px; background:var(--coral-deep); color:#fff; font-size:.65rem; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; padding:0 3px;}
.topbar{background:var(--ink); color:var(--pearl-deep); font-size:.8rem;}
.topbar a{color:var(--pearl-deep);}
.topbar a:hover{color:var(--gold-light);}

/* ---------- Mini-cart dropdown ---------- */
.minicart-dropdown{width:340px; max-width:90vw; padding:0; border:none; border-radius:var(--radius-md); box-shadow:var(--shadow-strong); overflow:hidden;}
.minicart-head{padding:1rem 1.1rem; border-bottom:1px solid var(--pearl-deep); display:flex; justify-content:space-between; align-items:center;}
.minicart-head strong{font-family:var(--font-display);}
.minicart-body{max-height:320px; overflow-y:auto; padding:.4rem .6rem;}
.minicart-item{display:flex; gap:.7rem; padding:.6rem .5rem; border-radius:var(--radius-sm); align-items:center;}
.minicart-item:hover{background:var(--pearl);}
.minicart-item img{width:52px; height:52px; border-radius:8px; object-fit:cover; flex-shrink:0;}
.minicart-item .mi-name{font-size:.86rem; font-weight:600; color:var(--ink); line-height:1.2;}
.minicart-item .mi-meta{font-size:.78rem; color:var(--ink-soft);}
.minicart-empty{padding:2rem 1rem; text-align:center; color:var(--ink-soft);}
.minicart-foot{padding:.9rem 1.1rem; border-top:1px solid var(--pearl-deep); background:var(--pearl);}
.minicart-foot .mf-row{display:flex; justify-content:space-between; font-weight:600; margin-bottom:.7rem;}

/* ---------- Hero Carousel ---------- */
.hero-carousel{position:relative;}
.hero-slide{height:88vh; min-height:520px; position:relative; display:flex; align-items:center; background-size:cover; background-position:center;}
.hero-slide::before{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(42,33,24,.62) 0%, rgba(42,33,24,.32) 45%, rgba(42,33,24,.1) 75%);}
.hero-content{position:relative; z-index:2; color:var(--white); max-width:640px;}
.hero-content .eyebrow{color:var(--gold-light);}
.hero-content h1{font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.05; margin:.6rem 0 1rem;}
.hero-content p{font-size:1.1rem; color:rgba(255,255,255,.88); margin-bottom:1.8rem; max-width:520px;}
.hero-carousel .carousel-indicators [data-bs-target]{background:var(--gold-light); width:9px; height:9px; border-radius:50%; opacity:.6;}
.hero-carousel .carousel-indicators .active{opacity:1; background:var(--coral);}
.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next{width:5%;}
.hero-scroll-cue{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2; color:#fff; font-size:1.3rem; animation:bob 2.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------- Section headings ---------- */
.section-heading{text-align:center; max-width:600px; margin:0 auto 2.5rem;}
.section-heading h2{font-size:clamp(1.8rem,3vw,2.6rem); margin-top:.4rem;}

/* ---------- Category tiles ---------- */
.cat-tile{position:relative; border-radius:var(--radius-lg); overflow:hidden; height:320px; display:flex; align-items:flex-end; background-size:cover; background-position:center; box-shadow:var(--shadow-soft); transition:transform .4s ease;}
.cat-tile:hover{transform:translateY(-6px);}
.cat-tile::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(42,33,24,.78), rgba(42,33,24,0) 60%);}
.cat-tile-body{position:relative; z-index:2; padding:1.5rem; color:#fff; width:100%;}
.cat-tile-body h3{font-size:1.4rem; margin-bottom:.2rem;}
.cat-tile-body span{font-size:.85rem; opacity:.85;}

/* ---------- Product cards ---------- */
.product-card{background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 8px 20px -14px rgba(42,33,24,.25); transition:box-shadow .3s ease, transform .3s ease; height:100%; border:1px solid rgba(184,145,47,.12);}
.product-card:hover{box-shadow:var(--shadow-strong); transform:translateY(-4px);}
.product-thumb{position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--pearl-deep);}
.product-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease;}
.product-card:hover .product-thumb img{transform:scale(1.08);}
.product-badge{position:absolute; top:10px; left:10px; z-index:2; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px;}
.badge-best{background:var(--coral); color:#fff;}
.badge-new{background:var(--gold); color:#fff;}
.badge-sale{background:var(--ink); color:#fff;}
.wishlist-btn{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:.25s; border:none;}
.wishlist-btn:hover{background:var(--coral); color:#fff;}
.product-body{padding:1.1rem 1.1rem 1.3rem;}
.product-cat{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft);}
.product-name{font-family:var(--font-display); font-size:1.05rem; margin:.25rem 0 .5rem; color:var(--ink);}
.product-price .old{text-decoration:line-through; color:var(--ink-soft); font-size:.85rem; margin-right:.4rem;}
.product-price .now{color:var(--coral-deep); font-weight:700; font-size:1.1rem;}
.product-actions{display:flex; gap:.5rem; margin-top:.8rem;}

/* ---------- Best seller auto-scrolling carousel ---------- */
.bestseller-viewport{overflow:hidden; position:relative;}
.bestseller-viewport::before, .bestseller-viewport::after{content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;}
.bestseller-viewport::before{left:0; background:linear-gradient(90deg, var(--pearl), transparent);}
.bestseller-viewport::after{right:0; background:linear-gradient(270deg, var(--pearl), transparent);}
.bestseller-track{display:flex; gap:1.2rem; padding:.5rem .2rem 1.2rem; will-change:transform;}
.bestseller-track .bs-item{flex:0 0 260px;}
@media (max-width:575.98px){.bestseller-track .bs-item{flex-basis:76vw;}}
.bs-nav-btn{width:44px; height:44px; border-radius:50%; border:1px solid rgba(184,145,47,.4); background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); transition:.25s;}
.bs-nav-btn:hover{background:var(--gold); color:#fff; border-color:var(--gold);}

/* ---------- Testimonials ---------- */
.testimonial-card{background:var(--white); border-radius:var(--radius-md); padding:2rem 1.8rem; height:100%; box-shadow:var(--shadow-soft); position:relative;}
.testimonial-card .quote-mark{font-family:var(--font-script); font-size:3.5rem; color:var(--coral-soft); line-height:1; position:absolute; top:8px; left:18px;}
.testimonial-card p{position:relative; z-index:1; font-style:italic; color:var(--ink); margin:1.2rem 0 1.2rem;}
.testimonial-avatar{width:46px; height:46px; border-radius:50%; background:var(--gold-light); color:var(--ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display);}
.stars i{color:var(--gold); font-size:.85rem;}

/* ---------- Flash sale toast (bottom-left live notification) ---------- */
.sale-toast{position:fixed; left:18px; bottom:18px; z-index:1080; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-strong); padding:.8rem 1rem; display:flex; align-items:center; gap:.7rem; max-width:300px; transform:translateY(140%); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; border-left:4px solid var(--coral);}
.sale-toast.show{transform:translateY(0); opacity:1;}
.sale-toast .icon{width:40px; height:40px; border-radius:50%; background:var(--coral-soft); color:var(--coral-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sale-toast .txt strong{color:var(--ink);}
.sale-toast .txt small{color:var(--ink-soft); display:block; margin-top:2px;}
.sale-toast .close-toast{position:absolute; top:6px; right:8px; color:var(--ink-soft); font-size:.75rem; cursor:pointer;}
@media (max-width:575.98px){.sale-toast{left:10px; bottom:78px; max-width:250px;}}

/* ---------- WhatsApp floating button ---------- */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:1080; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; box-shadow:0 10px 25px -8px rgba(37,211,102,.6); animation:pulseWa 2.6s ease-in-out infinite;}
@keyframes pulseWa{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}50%{box-shadow:0 0 0 12px rgba(37,211,102,0);}}
@media (max-width:575.98px){.wa-float{right:12px; bottom:78px; width:50px; height:50px; font-size:1.35rem;}}

/* ---------- About page bits ---------- */
.stat-block{text-align:center;}
.stat-block .num{font-family:var(--font-display); font-size:2.4rem; color:var(--coral-deep); font-weight:700;}
.stat-block .label{font-size:.85rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em;}

/* ---------- Footer ---------- */
.footer-remzy{background:var(--ink); color:var(--pearl-deep);}
.footer-remzy a{color:var(--pearl-deep);}
.footer-remzy a:hover{color:var(--gold-light);}
.footer-remzy h6{color:var(--gold-light); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; margin-bottom:1rem;}
.footer-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; margin-right:.4rem;}
.footer-social a:hover{background:var(--coral);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); font-size:.82rem;}

/* ---------- Mobile bottom nav (icons) ---------- */
.mobile-bottom-nav{display:none;}
@media (max-width:991.98px){
  .mobile-bottom-nav{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1070; background:var(--white); border-top:1px solid rgba(184,145,47,.2); box-shadow:0 -8px 20px -12px rgba(42,33,24,.3); padding:.4rem 0 .3rem;}
  .mobile-bottom-nav a{flex:1; text-align:center; color:var(--ink-soft); font-size:.68rem; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative;}
  .mobile-bottom-nav a i{font-size:1.25rem;}
  .mobile-bottom-nav a.active{color:var(--coral-deep);}
  .mobile-bottom-nav a .mb-badge{position:absolute; top:-2px; right:22%; background:var(--coral-deep); color:#fff; font-size:.6rem; min-width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Auth / Account ---------- */
.auth-card, .account-card{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:2.4rem; border:1px solid rgba(184,145,47,.12);}
.account-sidebar a{display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; border-radius:var(--radius-sm); color:var(--ink); font-weight:500; margin-bottom:.3rem;}
.account-sidebar a.active, .account-sidebar a:hover{background:var(--pearl-deep); color:var(--coral-deep);}
.form-control, .form-select{border-radius:var(--radius-sm); border-color:rgba(184,145,47,.35); padding:.65rem .9rem;}
.form-control:focus, .form-select:focus{border-color:var(--coral); box-shadow:0 0 0 .2rem rgba(232,101,77,.15);}
.form-label{font-weight:600; font-size:.88rem; color:var(--ink);}

/* ---------- Page banner ---------- */
.page-banner{background:linear-gradient(120deg, var(--pearl-deep), var(--pearl)); padding:5rem 0 3rem; position:relative; overflow:hidden;}
.page-banner h1{font-size:clamp(2rem,4vw,3rem);}
.page-banner .breadcrumb-remzy a{color:var(--ink-soft);}
.page-banner .breadcrumb-remzy a:hover{color:var(--coral-deep);}

/* ---------- Legal pages (sticky left table of contents) ---------- */
.legal-toc{position:sticky; top:100px; align-self:start;}
.legal-toc .toc-card{background:#fff; border-radius:var(--radius-md); padding:1.3rem; box-shadow:var(--shadow-soft); border:1px solid rgba(184,145,47,.12);}
.legal-toc h6{text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:var(--ink-soft); margin-bottom:.8rem;}
.legal-toc a{display:block; padding:.4rem .6rem; border-radius:var(--radius-sm); color:var(--ink); font-size:.88rem; margin-bottom:.1rem; border-left:2px solid transparent;}
.legal-toc a:hover{background:var(--pearl); color:var(--coral-deep);}
.legal-toc a.active{background:var(--pearl-deep); color:var(--coral-deep); border-left-color:var(--coral); font-weight:600;}
.legal-content h2{font-size:1.3rem; margin-top:2.2rem; color:var(--ink); scroll-margin-top:100px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p, .legal-content li{color:var(--ink-soft); line-height:1.8;}
@media (max-width:991.98px){.legal-toc{position:static; margin-bottom:2rem;}}

/* ---------- GDPR / cookie consent banner ---------- */
.gdpr-banner{position:fixed; left:0; right:0; bottom:0; z-index:1200; background:var(--ink); color:var(--pearl-deep); padding:1.1rem 1.2rem; transform:translateY(100%); transition:transform .5s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 30px -10px rgba(0,0,0,.4);}
.gdpr-banner.show{transform:translateY(0);}
.gdpr-banner p{margin:0; font-size:.88rem; color:var(--pearl-deep); opacity:.92;}
.gdpr-banner a{color:var(--gold-light); text-decoration:underline;}
@media (max-width:991.98px){.gdpr-banner{bottom:66px;}}

/* misc */
.text-coral{color:var(--coral-deep) !important;}
.text-gold{color:var(--gold-deep) !important;}
.bg-pearl{background:var(--pearl) !important;}
.bg-pearl-deep{background:var(--pearl-deep) !important;}



 
.cat-tile-icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(184, 145, 47, 0.18);
}
.cat-tile-icon .cat-tile-body {
  background: transparent;
  padding: 2rem 1.25rem;
}
.cat-tile-icon-glyph {
  font-size: 2.6rem;
  color: var(--gold, #b08d57);
  display: block;
  margin-bottom: .75rem;
}
.cat-tile-icon h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  margin: 0 0 .35rem;
  color: var(--ink, #2b2118);
}
.cat-tile-icon span {
  font-size: .8rem;
  color: var(--gold, #b08d57);
  letter-spacing: .04em;
  text-transform: uppercase;
}


.cat-tile-icon {
  background: linear-gradient(140deg, #fdf8ee, #f4ecdc);
  border: 1px solid rgba(184, 145, 47, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.cat-tile-icon::before {
  /* kill the dark overlay from the parent .cat-tile::before */
  background: none !important;
}
.cat-tile-icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(184, 145, 47, 0.18);
}
.cat-tile-icon .cat-tile-body {
  background: transparent;
  padding: 2rem 1.25rem;
  color: var(--ink, #2b2118);
}
.cat-tile-icon-glyph {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 2.6rem;
  color: var(--gold, #b08d57) !important;
  display: block;
  margin: 0 auto .75rem;
  line-height: 1;
}
.cat-tile-icon h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  margin: 0 0 .35rem;
  color: var(--ink, #2b2118);
}
.cat-tile-icon span {
  font-size: .8rem;
  color: var(--gold, #b08d57);
  letter-spacing: .04em;
  text-transform: uppercase;
}