/* ═══════════════════════════════════════════
   RedBen Store — Luxury Fashion CSS
   Inspired by Veloria.ma · Mobile First
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --black:#0A0907;
  --gold:#B8954A;
  --gold-l:#D4AF7A;
  --gold-g:rgba(184,149,74,.1);
  --white:#FAFAF8;
  --cream:#F5F0E8;
  --border:#E8E0D0;
  --muted:#9A8A78;
  --s:'Cormorant Garamond',Georgia,serif;
  --b:'Inter',sans-serif;
  --radius:10px;
  --shadow:0 2px 20px rgba(10,9,7,.06);
  --shadow-lg:0 8px 40px rgba(10,9,7,.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--b);color:var(--black);background:var(--white);
  -webkit-tap-highlight-color:transparent;padding-bottom:68px}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font-family:var(--b)}
input,select,textarea{font-family:var(--b)}

/* ── ANNOUNCEMENT BAR ── */
.rb-announce{
  background:var(--black);color:rgba(255,255,255,.8);
  text-align:center;padding:8px 1rem;
  font-size:11px;letter-spacing:2px;text-transform:uppercase
}
.rb-announce span{color:var(--gold-l)}

/* ── NAV ── */
.rb-nav{
  position:sticky;top:0;z-index:100;
  background:var(--white);
  display:flex;align-items:center;justify-content:space-between;
  padding:.875rem 1.25rem;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
}
.rb-logo{
  font-family:var(--s);font-size:20px;font-weight:400;
  color:var(--black);letter-spacing:.08em;text-transform:uppercase
}
.rb-logo em{font-style:italic;color:var(--gold)}
.rb-nav-icons{display:flex;align-items:center;gap:1rem}
.rb-nav-icon{color:var(--black);transition:color .2s;position:relative;opacity:.75}
.rb-nav-icon:hover{opacity:1;color:var(--gold)}
.rb-cart-badge{
  position:absolute;top:-5px;right:-7px;
  width:16px;height:16px;border-radius:50%;
  background:var(--gold);color:var(--black);
  font-size:9px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0);transition:all .2s
}
.rb-cart-badge.show{opacity:1;transform:scale(1)}

/* ── HERO ── */
.rb-hero{
  position:relative;overflow:hidden;
  background:var(--black);
  min-height:92vh;display:flex;align-items:flex-end;
  padding:0 1.25rem 3.5rem
}
.rb-hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.55
}
.rb-hero-content{position:relative;z-index:1;width:100%}
.rb-hero-tag{
  display:inline-block;
  border:1px solid rgba(212,175,122,.4);
  border-radius:2px;padding:5px 14px;
  font-size:9px;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:1.25rem
}
.rb-hero h1{
  font-family:var(--s);
  font-size:clamp(44px,11vw,96px);
  font-weight:300;color:#fff;
  line-height:1;letter-spacing:-.02em;
  margin-bottom:1rem
}
.rb-hero h1 em{font-style:italic;color:var(--gold-l)}
.rb-hero-sub{
  font-size:13px;color:rgba(255,255,255,.45);
  font-weight:300;max-width:340px;line-height:1.8;
  margin-bottom:2rem
}
.rb-hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* ── BUTTONS ── */
.rb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  font-weight:500;transition:all .2s;border-radius:2px;
  padding:14px 28px
}
.rb-btn-gold{background:var(--gold);color:var(--black)}
.rb-btn-gold:hover{background:var(--gold-l)}
.rb-btn-outline-w{
  background:transparent;color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.2)
}
.rb-btn-outline-w:hover{border-color:var(--gold-l);color:var(--gold-l)}
.rb-btn-black{background:var(--black);color:#fff}
.rb-btn-black:hover{background:#2A2520}
.rb-btn-border{
  background:transparent;color:var(--black);
  border:1px solid var(--border)
}
.rb-btn-border:hover{border-color:var(--black)}

/* ── DELIVERY BADGE ── */
.rb-delivery-bar{
  background:var(--cream);border-bottom:1px solid var(--border);
  padding:.875rem 1.25rem;display:flex;align-items:center;
  justify-content:center;gap:.75rem;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)
}
.rb-delivery-bar strong{color:var(--black)}

/* ── CATEGORIES SCROLL ── */
.rb-cats{
  padding:1.25rem 1.25rem .5rem;
  display:flex;gap:.5rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none
}
.rb-cats::-webkit-scrollbar{display:none}
.rb-cat-pill{
  flex-shrink:0;padding:8px 18px;
  border:1px solid var(--border);border-radius:2px;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);transition:all .2s;white-space:nowrap;
  background:transparent
}
.rb-cat-pill.active,.rb-cat-pill:hover{
  background:var(--black);color:#fff;border-color:var(--black)
}

/* ── SECTION ── */
.rb-section{padding:2.5rem 1.25rem}
.rb-section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:1.5rem;padding-bottom:1rem;
  border-bottom:1px solid var(--border)
}
.rb-section-title{
  font-family:var(--s);font-size:clamp(22px,5vw,32px);
  font-weight:300;letter-spacing:.01em
}
.rb-section-link{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);transition:opacity .2s
}
.rb-section-link:hover{opacity:.7}

/* ── PRODUCT GRID ── */
.rb-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.75rem
}
@media(min-width:600px){.rb-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.rb-grid{grid-template-columns:repeat(4,1fr);gap:1.25rem}}

/* ── PRODUCT CARD ── */
.rb-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:box-shadow .3s,transform .3s;position:relative
}
.rb-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.rb-card-img-wrap{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  background:var(--cream)
}
.rb-card-img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease
}
.rb-card:hover .rb-card-img{transform:scale(1.06)}
.rb-card-badge{
  position:absolute;top:10px;left:10px;
  background:var(--black);color:#fff;
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  padding:4px 10px;border-radius:2px;font-weight:400
}
.rb-card-badge.promo{background:var(--gold);color:var(--black)}
.rb-card-badge.nouveau{background:#2D6A4F;color:#fff}
.rb-card-wish{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(250,250,248,.92);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;color:var(--muted);
  border:1px solid var(--border)
}
.rb-card-wish:hover,.rb-card-wish.active{
  background:var(--gold);color:#fff;border-color:var(--gold)
}
.rb-card-body{padding:.875rem .875rem 1rem}
.rb-card-cat{
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:.25rem
}
.rb-card-name{
  font-family:var(--s);font-size:16px;font-weight:400;
  margin-bottom:.5rem;line-height:1.25
}
.rb-card-prices{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.rb-card-price{font-size:15px;font-weight:600;color:var(--black)}
.rb-card-old{font-size:12px;color:var(--muted);text-decoration:line-through}
.rb-card-promo-pct{
  font-size:10px;background:var(--gold-g);
  color:var(--gold);padding:2px 6px;border-radius:2px;font-weight:500
}
.rb-card-sizes{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:.75rem}
.rb-size-dot{
  font-size:10px;color:var(--muted);
  border:1px solid var(--border);border-radius:2px;
  padding:2px 5px;line-height:1.4
}
.rb-card-btn{
  width:100%;background:var(--black);color:#fff;
  font-size:9px;letter-spacing:2.5px;text-transform:uppercase;
  padding:11px;border-radius:4px;transition:background .2s;
  display:flex;align-items:center;justify-content:center;gap:6px
}
.rb-card-btn:hover{background:var(--gold);color:var(--black)}

/* ── HERO COLLECTION BANNER ── */
.rb-collection-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:.75rem;padding:0 1.25rem 2.5rem
}
.rb-col-card{
  border-radius:var(--radius);overflow:hidden;
  position:relative;aspect-ratio:3/4;cursor:pointer
}
.rb-col-card.tall{aspect-ratio:2/3}
.rb-col-img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.rb-col-card:hover .rb-col-img{transform:scale(1.05)}
.rb-col-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,9,7,.6) 0%,transparent 50%);
  display:flex;flex-direction:column;
  justify-content:flex-end;padding:1rem
}
.rb-col-label{
  font-size:9px;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:.25rem
}
.rb-col-name{
  font-family:var(--s);font-size:20px;font-weight:300;
  color:#fff;line-height:1.1
}

/* ── PRODUCT PAGE ── */
.rb-product-page{padding:0;max-width:960px;margin:0 auto}
.rb-product-gallery{position:relative}
.rb-main-img{
  width:100%;aspect-ratio:3/4;object-fit:cover
}
.rb-thumbs{
  display:flex;gap:.5rem;padding:.75rem 1.25rem;
  overflow-x:auto;scrollbar-width:none;background:var(--cream)
}
.rb-thumbs::-webkit-scrollbar{display:none}
.rb-thumb{
  flex-shrink:0;width:64px;height:80px;object-fit:cover;
  border-radius:4px;cursor:pointer;
  border:2px solid transparent;transition:border-color .2s;opacity:.65
}
.rb-thumb.active{border-color:var(--gold);opacity:1}
.rb-product-info{padding:1.5rem 1.25rem}
.rb-product-cat{
  font-size:9px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem
}
.rb-product-name{
  font-family:var(--s);font-size:30px;font-weight:300;
  margin-bottom:.75rem;line-height:1.15
}
.rb-product-prices{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
.rb-product-price{font-size:24px;font-weight:500;color:var(--black)}
.rb-product-old{font-size:16px;color:var(--muted);text-decoration:line-through}
.rb-option-label{
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem;display:block
}
.rb-sizes{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.rb-size-btn{
  min-width:44px;height:44px;padding:0 8px;border-radius:4px;
  border:1.5px solid var(--border);font-size:13px;
  color:var(--black);transition:all .2s;background:#fff
}
.rb-size-btn:hover,.rb-size-btn.active{
  border-color:var(--black);background:var(--black);color:#fff
}
.rb-colors{display:flex;gap:.625rem;margin-bottom:1.5rem}
.rb-color-btn{
  width:28px;height:28px;border-radius:50%;
  border:2.5px solid transparent;cursor:pointer;transition:border-color .2s
}
.rb-color-btn.active{border-color:var(--black)}
.rb-delivery-note{
  display:flex;align-items:center;gap:.5rem;
  background:var(--cream);border:1px solid var(--border);
  border-radius:6px;padding:.75rem 1rem;margin-bottom:1.25rem;
  font-size:12px;color:var(--muted)
}
.rb-delivery-note strong{color:var(--black)}
.rb-add-cart{
  width:100%;background:var(--black);color:#fff;
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  padding:16px;border-radius:4px;margin-bottom:.75rem;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .2s
}
.rb-add-cart:hover{background:var(--gold);color:var(--black)}
.rb-product-desc{
  margin-top:1.5rem;padding-top:1.5rem;
  border-top:1px solid var(--border);
  font-size:13px;color:var(--muted);line-height:1.8
}

/* ── CART PAGE ── */
.rb-cart-page{padding:1.5rem 1.25rem;max-width:540px;margin:0 auto}
.rb-cart-title{
  font-family:var(--s);font-size:30px;font-weight:300;
  margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)
}
.rb-cart-item{
  display:flex;gap:1rem;padding:1rem 0;
  border-bottom:1px solid var(--border)
}
.rb-cart-item-img{
  width:80px;height:100px;object-fit:cover;
  border-radius:6px;flex-shrink:0;background:var(--cream)
}
.rb-cart-item-info{flex:1}
.rb-cart-item-name{
  font-family:var(--s);font-size:17px;font-weight:400;
  margin-bottom:.2rem;line-height:1.2
}
.rb-cart-item-meta{font-size:11px;color:var(--muted);margin-bottom:.5rem}
.rb-cart-item-price{font-size:15px;font-weight:600}
.rb-cart-item-remove{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);margin-top:.5rem;display:inline-block;
  cursor:pointer;background:none;border:none;padding:0
}
.rb-qty-wrap{display:flex;align-items:center;gap:.5rem;margin-top:.625rem}
.rb-qty-btn{
  width:28px;height:28px;border-radius:4px;
  border:1px solid var(--border);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;background:#fff;color:var(--black);line-height:1
}
.rb-qty-btn:hover{background:var(--black);color:#fff;border-color:var(--black)}
.rb-qty-val{font-size:14px;font-weight:500;min-width:20px;text-align:center}
.rb-cart-total{
  background:var(--cream);border:1px solid var(--border);
  border-radius:8px;padding:1.25rem;margin:1.5rem 0
}
.rb-cart-total-row{
  display:flex;justify-content:space-between;
  font-size:13px;margin-bottom:.5rem;color:var(--muted)
}
.rb-cart-total-row.main{
  font-size:18px;font-weight:600;color:var(--black);
  border-top:1px solid var(--border);
  margin-top:.75rem;padding-top:.75rem
}
.rb-cart-empty{text-align:center;padding:4rem 1.25rem}
.rb-cart-empty h2{font-family:var(--s);font-size:28px;font-weight:300;margin-bottom:.5rem}
.rb-cart-empty p{font-size:13px;color:var(--muted);margin-bottom:2rem}

/* ══════════════════════════════════
   POPUP COMMANDE (EasySell style)
   ══════════════════════════════════ */
.rb-popup-overlay{
  position:fixed;inset:0;background:rgba(10,9,7,.55);
  z-index:200;opacity:0;pointer-events:none;
  transition:opacity .3s;backdrop-filter:blur(3px)
}
.rb-popup-overlay.open{opacity:1;pointer-events:all}

.rb-popup{
  position:fixed;bottom:0;left:0;right:0;
  background:#fff;z-index:201;
  border-radius:16px 16px 0 0;
  max-height:92vh;overflow-y:auto;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,0,.67,0);
  padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom))
}
.rb-popup.open{transform:translateY(0);transition-timing-function:cubic-bezier(.33,1,.68,1)}

.rb-popup-drag{
  width:36px;height:4px;border-radius:2px;
  background:var(--border);margin:0 auto 1.25rem
}
.rb-popup-product{
  display:flex;gap:.875rem;margin-bottom:1.25rem;
  padding-bottom:1.25rem;border-bottom:1px solid var(--border)
}
.rb-popup-img{
  width:64px;height:80px;object-fit:cover;
  border-radius:6px;background:var(--cream);flex-shrink:0
}
.rb-popup-pname{font-family:var(--s);font-size:18px;font-weight:400;line-height:1.2;margin-bottom:.25rem}
.rb-popup-pmeta{font-size:11px;color:var(--muted);margin-bottom:.25rem}
.rb-popup-pprice{font-size:16px;font-weight:600}

.rb-popup h3{
  font-family:var(--s);font-size:22px;font-weight:300;
  margin-bottom:1.25rem
}
.rb-popup-form{display:flex;flex-direction:column;gap:.75rem}
.rb-field label{
  display:block;font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem
}
.rb-field input,.rb-field select{
  width:100%;padding:13px 14px;
  border:1.5px solid var(--border);border-radius:6px;
  font-size:14px;color:var(--black);background:#fff;
  transition:border-color .2s;outline:none;
  -webkit-appearance:none
}
.rb-field input:focus,.rb-field select:focus{border-color:var(--black)}
.rb-field input.error{border-color:#E53935}
.rb-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.rb-popup-delivery{
  display:flex;align-items:center;gap:.5rem;
  background:var(--cream);border:1px solid var(--border);
  border-radius:6px;padding:.75rem 1rem;margin:.5rem 0;
  font-size:12px;color:var(--muted)
}
.rb-popup-delivery strong{color:#2D6A4F}
.rb-popup-submit{
  width:100%;background:var(--black);color:#fff;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  padding:16px;border-radius:6px;margin-top:.25rem;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .2s;font-weight:500
}
.rb-popup-submit:hover{background:var(--gold);color:var(--black)}
.rb-popup-submit:disabled{opacity:.5;cursor:not-allowed}
.rb-popup-note{
  text-align:center;font-size:11px;color:var(--muted);
  margin-top:.75rem;line-height:1.6
}

/* ── TOAST ── */
.rb-toast{
  position:fixed;bottom:80px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--black);color:#fff;
  font-size:12px;letter-spacing:.5px;
  padding:11px 22px;border-radius:100px;
  opacity:0;transition:all .3s;z-index:300;
  white-space:nowrap;border-left:3px solid var(--gold)
}
.rb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── BOTTOM NAV ── */
.rb-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:#fff;border-top:1px solid var(--border);
  display:flex;justify-content:space-around;align-items:center;
  padding:.625rem 0 calc(.625rem + env(safe-area-inset-bottom));
  z-index:99
}
.rb-bn-item{
  display:flex;flex-direction:column;align-items:center;
  gap:3px;color:var(--muted);transition:color .2s;position:relative
}
.rb-bn-item.active,.rb-bn-item:hover{color:var(--black)}
.rb-bn-label{font-size:9px;letter-spacing:1px;text-transform:uppercase}
.rb-bn-badge{
  position:absolute;top:-4px;right:-8px;
  width:15px;height:15px;border-radius:50%;
  background:var(--gold);color:var(--black);font-size:8px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0);transition:all .2s
}
.rb-bn-badge.show{opacity:1;transform:scale(1)}

/* ── FOOTER ── */
.rb-footer{
  background:var(--black);color:rgba(255,255,255,.45);
  padding:2.5rem 1.25rem 2rem;margin-top:3rem
}
.rb-footer-logo{
  font-family:var(--s);font-size:22px;font-weight:300;
  color:#fff;margin-bottom:.375rem;letter-spacing:.08em;text-transform:uppercase
}
.rb-footer-logo em{font-style:italic;color:var(--gold-l)}
.rb-footer-tag{font-size:11px;margin-bottom:2rem;letter-spacing:.5px}
.rb-footer-links{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.rb-footer-link{
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.35);transition:color .2s
}
.rb-footer-link:hover{color:var(--gold-l)}
.rb-footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:1.25rem;font-size:10px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem
}
.rb-footer-bottom a{color:var(--gold-l);font-size:10px}

/* ── PAGE HERO ── */
.rb-page-hero{
  background:var(--black);padding:2.5rem 1.25rem 2rem;text-align:center
}
.rb-page-hero h1{
  font-family:var(--s);font-size:clamp(30px,7vw,52px);
  font-weight:300;color:#fff;letter-spacing:.02em
}
.rb-page-hero h1 em{color:var(--gold-l);font-style:italic}
.rb-page-hero p{font-size:12px;color:rgba(255,255,255,.35);margin-top:.5rem;letter-spacing:1px}

/* ── FILTERS ── */
.rb-filters{
  padding:.75rem 1.25rem;display:flex;gap:.5rem;
  align-items:center;border-bottom:1px solid var(--border)
}
.rb-sort{
  padding:8px 12px;border:1px solid var(--border);
  border-radius:4px;font-size:11px;background:#fff;
  color:var(--black);letter-spacing:.5px
}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.rb-fade{animation:fadeUp .45s ease both}

/* ── MERCI ── */
.rb-merci{
  min-height:80vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:3rem 1.25rem
}
.rb-merci-check{
  width:72px;height:72px;border-radius:50%;
  background:var(--gold-g);border:1.5px solid rgba(184,149,74,.3);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;font-size:32px
}
.rb-merci h1{
  font-family:var(--s);font-size:36px;font-weight:300;
  margin-bottom:.75rem;line-height:1.2
}
.rb-merci h1 em{font-style:italic;color:var(--gold)}
.rb-merci p{font-size:13px;color:var(--muted);max-width:360px;line-height:1.8;margin-bottom:2rem}

/* ── DESKTOP ── */
@media(min-width:768px){
  body{padding-bottom:0}
  .rb-bottom-nav{display:none}
  .rb-hero{min-height:80vh}
  .rb-product-page{
    display:grid;grid-template-columns:1fr 1fr;
    gap:0;align-items:start
  }
  .rb-product-info{padding:2.5rem}
  .rb-main-img{aspect-ratio:2/3}
}

/* ════════════════════════════════════════
   VELORIA-STYLE COMPONENTS
   ════════════════════════════════════════ */

/* ── PRODUCT PAGE VELORIA LAYOUT ── */
.rb-prod-top{padding:1rem 1.25rem .875rem;border-bottom:1px solid var(--border)}
.rb-prod-name-price{
  display:flex;justify-content:space-between;
  align-items:flex-start;gap:.75rem;margin-bottom:.5rem
}
.rb-prod-title{font-size:17px;font-weight:600;flex:1;line-height:1.35;color:var(--black)}
.rb-prod-price-block{text-align:right;flex-shrink:0}
.rb-prod-price-tag{font-size:17px;font-weight:700;color:var(--black)}
.rb-prod-old-tag{text-decoration:line-through;color:var(--muted);font-size:13px}
.rb-prod-rating{display:flex;align-items:center;gap:.5rem;font-size:12px;color:var(--muted)}
.rb-stars{color:#F5A623;font-size:14px;letter-spacing:1px}

/* Buy button — 2 lines, full width */
.rb-buy-main-btn{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;
  width:calc(100% - 2.5rem);margin:1rem 1.25rem;
  background:var(--black);color:#fff;
  border:none;cursor:pointer;border-radius:8px;
  padding:15px 1rem;transition:background .2s;font-family:var(--b)
}
.rb-buy-main-btn:hover{background:#333}
.rb-buy-main-btn .rbm-main{font-size:16px;font-weight:700}
.rb-buy-main-btn .rbm-sub{font-size:12px;opacity:.7}

/* Secondary add-to-cart */
.rb-add-cart-sec{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:calc(100% - 2.5rem);margin:0 1.25rem;
  background:transparent;color:var(--black);
  border:1.5px solid var(--border);border-radius:8px;
  padding:13px 1rem;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  font-family:var(--b);cursor:pointer;transition:all .2s
}
.rb-add-cart-sec:hover{border-color:var(--black)}

/* Delivery info grid */
.rb-delivery-info{
  margin:1.25rem 1.25rem;
  border:1px solid var(--border);border-radius:10px;
  display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden
}
.rb-di-cell{
  text-align:center;padding:.875rem .5rem;
  border-right:1px solid var(--border)
}
.rb-di-cell:last-child{border-right:none}
.rb-di-icon{font-size:22px;margin-bottom:.3rem}
.rb-di-label{
  font-size:9px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:.2rem;line-height:1.4
}
.rb-di-val{font-size:12px;font-weight:600;color:var(--black)}

/* Card badge % */
.rb-pct-badge{
  position:absolute;top:8px;left:8px;
  background:#E53935;color:#fff;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:3px
}

/* ── HOMEPAGE FILTER ROW ── */
.rb-filter-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--border)
}
.rb-filter-item{
  padding:9px 10px;border:1px solid var(--border);
  border-radius:6px;font-size:10px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;
  background:#fff;color:var(--black);font-family:var(--b);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239A8A78'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
  background-size:8px;padding-right:24px
}

/* ════════════════════════════════════════
   POPUP — VELORIA / EASYSELL STYLE
   ════════════════════════════════════════ */
.rb-popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.52);
  z-index:200;opacity:0;pointer-events:none;
  transition:opacity .25s
}
.rb-popup-overlay.open{opacity:1;pointer-events:all}

.rb-popup{
  position:fixed;bottom:0;left:0;right:0;
  background:#fff;z-index:201;border-radius:18px 18px 0 0;
  max-height:94vh;overflow-y:auto;
  transform:translateY(102%);
  transition:transform .32s cubic-bezier(.32,0,.67,0);
  overscroll-behavior:contain;padding:0
}
.rb-popup.open{
  transform:translateY(0);
  transition-timing-function:cubic-bezier(.33,1,.68,1)
}

/* Green COD header */
.rb-popup-cod{
  background:#1a8a4a;color:#fff;
  padding:.875rem 3.25rem .875rem 1.25rem;
  font-size:12px;line-height:1.6;
  border-radius:18px 18px 0 0;
  position:relative;font-weight:500
}
.rb-popup-x{
  position:absolute;top:.75rem;right:.875rem;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;border:none;
  line-height:1;font-weight:300;transition:background .2s
}
.rb-popup-x:hover{background:rgba(255,255,255,.35)}

/* Product mini row */
.rb-popup-order-row{
  display:flex;align-items:center;gap:.875rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--border)
}
.rb-popup-mini-img{
  width:60px;height:72px;object-fit:cover;
  border-radius:6px;flex-shrink:0;background:var(--cream)
}
.rb-popup-mini-badge{
  position:absolute;top:-7px;left:-7px;
  width:22px;height:22px;border-radius:50%;
  background:var(--black);color:#fff;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center
}
.rb-popup-mini-name{font-size:14px;font-weight:600;line-height:1.3;margin-bottom:.2rem}
.rb-popup-mini-meta{font-size:12px;color:var(--muted)}
.rb-popup-mini-price{font-size:15px;font-weight:700;margin-left:auto;flex-shrink:0;white-space:nowrap}

/* Order totals */
.rb-popup-totals{padding:.875rem 1.25rem;border-bottom:1px solid var(--border)}
.rb-popup-total-row{
  display:flex;justify-content:space-between;
  font-size:13px;color:var(--muted);margin-bottom:.35rem
}
.rb-popup-total-row.shipr span:last-child{color:#1a8a4a;font-weight:600}
.rb-popup-total-row.mainr{
  font-size:16px;font-weight:700;color:var(--black);
  border-top:1px solid var(--border);
  padding-top:.5rem;margin-top:.25rem;margin-bottom:0
}

/* Form fields with icons */
.rb-popup-fields{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.625rem}
.rb-pf{
  display:flex;align-items:center;gap:.75rem;
  border:1.5px solid var(--border);border-radius:8px;
  padding:0 1rem;background:#fff;transition:border-color .2s
}
.rb-pf:focus-within{border-color:var(--black)}
.rb-pf.error-f{border-color:#E53935;background:#fff8f8}
.rb-pf svg{color:var(--muted);flex-shrink:0;width:18px;height:18px}
.rb-pf input{
  flex:1;border:none;outline:none;padding:.875rem 0;
  font-size:14px;font-family:var(--b);background:transparent;color:var(--black)
}
.rb-pf input::placeholder{color:#C0B0A0}

/* Confirm button */
.rb-popup-confirm{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:calc(100% - 2.5rem);margin:0 1.25rem;
  background:#1a8a4a;color:#fff;border:none;cursor:pointer;
  border-radius:8px;padding:16px;font-size:15px;font-weight:700;
  font-family:var(--b);transition:background .2s;
  margin-bottom:calc(1.25rem + env(safe-area-inset-bottom))
}
.rb-popup-confirm:hover{background:#16733d}
.rb-popup-confirm:disabled{opacity:.55;cursor:not-allowed}

/* ── MERCI PAGE PERSONALIZED ── */
.rb-merci-steps{
  display:flex;flex-direction:column;gap:1rem;
  max-width:360px;margin:1.75rem auto 0;text-align:left
}
.rb-merci-step{display:flex;gap:.875rem;align-items:flex-start}
.rb-merci-step-num{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--gold-g);border:1px solid rgba(184,149,74,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--gold)
}
.rb-merci-step-text{font-size:13px;color:var(--muted);line-height:1.6;padding-top:.3rem}
.rb-merci-ctas{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:2rem}
.rb-merci-wa{
  display:inline-flex;align-items:center;gap:.625rem;
  background:#25D366;color:#fff;padding:14px 28px;
  border-radius:8px;font-size:13px;font-weight:600;
  font-family:var(--b);transition:background .2s
}
.rb-merci-wa:hover{background:#1ebe59}

/* ── DESKTOP POPUP ── */
@media(min-width:768px){
  .rb-popup{
    max-width:460px;left:50%;right:auto;
    transform:translateX(-50%) translateY(102%);
    border-radius:16px;bottom:2rem
  }
  .rb-popup.open{transform:translateX(-50%) translateY(0)}
  .rb-buy-main-btn,.rb-add-cart-sec{width:calc(100% - 5rem);margin-left:2.5rem}
  .rb-delivery-info,.rb-popup-confirm{margin-left:2.5rem;margin-right:2.5rem;width:calc(100% - 5rem)}
  .rb-popup-confirm{margin-bottom:1.25rem}
}