/* D' PLATA 925 - Luxury theme (AVIR-style inspired) */
/* Palette requested:
   Navy: #001F3F
   Silver: #C0C0C0
   Ivory: #F8F9FA
   Rose: #E5839B
*/

:root{
  --navy:#001F3F;
  --silver:#C0C0C0;
  --ivory:#F8F9FA;
  --rose:#E5839B;

  --ink: var(--navy);
  --muted: rgba(0,31,63,.72);
  --line: rgba(192,192,192,.55);
  --bg: var(--ivory);

  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,31,63,.10);
  --shadow-soft: 0 10px 30px rgba(0,31,63,.08);
  --container: 1180px;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap');

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font: inherit; }

.container{ width:min(var(--container), calc(100% - 40px)); margin:0 auto; }

/* Topbar */
.topbar{
  background: var(--navy);
  color: rgba(248,249,250,.95);
  font-size: 12.5px;
  letter-spacing: .2px;
}
.topbar .row{
  display:flex; align-items:center; justify-content:center;
  padding:10px 0;
}
.topbar strong{ color: #fff; font-weight:600; }
.topbar a{ text-decoration: underline; text-decoration-color: rgba(248,249,250,.55); }

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248,249,250,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; gap:16px;
  padding: 16px 0;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: inherit;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.logo small{
  display:block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
  margin-top: 2px;
}
.nav{
  display:flex; align-items:center; gap:22px;
  margin-left: 24px;
}
.nav a{
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,31,63,.88);
  padding: 10px 2px;
  position: relative;
}
.nav a:hover{ color: var(--navy); }
.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:4px;
  height:1px; width:0;
  background: var(--rose);
  transition: width .18s ease;
}
.nav a:hover::after{ width:100%; }

.has-mega{ position: relative; }
/* Ensure the first nav item (wrapped in .has-mega) aligns perfectly with other links */
.nav > .has-mega{
  display:flex;
  align-items:center;
}
.nav > .has-mega > a{
  display:flex;
  align-items:center;
  line-height: 1;
}
/* Bridge hover gap so mega menu doesn't disappear when moving mouse */
.has-mega::after{
  content:"";
  position:absolute;
  left:-20px;
  right:-20px;
  top:100%;
  height:14px; /* matches the visual gap */
}
.mega{
  position:absolute;
  left: -18px;
  top: calc(100% + 12px);
  width: 640px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 18px;
  display:none;
}
.has-mega:hover .mega{ display:block; }
.mega-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mega a{
  display:block;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(192,192,192,.30);
  background: linear-gradient(180deg, rgba(248,249,250,.8), rgba(248,249,250,.4));
}
.mega a:hover{
  border-color: rgba(229,131,155,.55);
  box-shadow: 0 10px 30px rgba(229,131,155,.12);
}
.mega .t{
  font-weight:600;
  font-size: 13px;
  letter-spacing:.06em;
  text-transform: uppercase;
}
.mega .d{
  font-size: 12.5px;
  color: var(--muted);
  margin-top:6px;
  line-height:1.35;
}

.header-actions{
  margin-left:auto;
  display:flex; align-items:center; gap:12px;
}
.searchbox{
  position:relative;
  width: 280px;
}
.searchbox input{
  width:100%;
  padding: 11px 12px 11px 40px;
  border-radius: 999px;
  border: 1px solid rgba(192,192,192,.55);
  background: rgba(255,255,255,.65);
  outline: none;
}
.searchbox input:focus{
  border-color: rgba(229,131,155,.75);
  box-shadow: 0 0 0 4px rgba(229,131,155,.18);
}
.searchbox .icon{
  position:absolute;
  left:14px; top:50%;
  transform: translateY(-50%);
  opacity:.65;
}
.icon-btn{
  border: 1px solid rgba(192,192,192,.65);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.icon-btn:hover{ border-color: rgba(229,131,155,.65); }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size: 11px;
  background: var(--rose);
  color: #fff;
  font-weight: 600;
}

/* Mobile drawer */
.mobile-only{ display:none; }
.desktop-only{ display:flex; }

.drawer{
  position: fixed;
  inset: 0;
  z-index: 80;
  display:none;
}
.drawer.open{ display:block; }
.drawer-backdrop{
  position:absolute; inset:0;
  background: rgba(0,31,63,.35);
}
.drawer-panel{
  position:absolute; top:0; left:0;
  width:min(92vw, 380px);
  height:100%;
  background: #fff;
  padding: 18px;
  box-shadow: var(--shadow);
  overflow:auto;
}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom: 12px;
  border-bottom:1px solid var(--line);
}
.drawer-title{
  font-size: 12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted);
  margin: 18px 0 10px;
}
.drawer a{
  display:block;
  padding: 12px 10px;
  border-radius: 12px;
}
.drawer a:hover{ background: rgba(248,249,250,.8); }
.drawer .drawer-search input{ width:100%; padding:12px 14px; border-radius: 14px; border:1px solid var(--line); }

/* Hero */
.hero{
  padding: 26px 0 10px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: stretch;
}
.hero-card{
  border-radius: 26px;
  overflow:hidden;
  min-height: 420px;
  position:relative;
  box-shadow: var(--shadow);
  background: #0b1b2e;
}
.hero-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,31,63,.82) 0%, rgba(0,31,63,.35) 55%, rgba(0,31,63,.15) 100%);
}
.hero-card img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.hero-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 28px;
  gap: 14px;
}
.kicker{
  font-size: 12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(248,249,250,.88);
}
.h1{
  font-family: "Playfair Display", Georgia, serif;
  font-size: 44px;
  line-height: 1.02;
  color: #fff;
  margin:0;
  letter-spacing:.2px;
}
.lead{
  color: rgba(248,249,250,.86);
  max-width: 42ch;
  line-height: 1.55;
  margin:0;
}
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  border-radius: 999px;
  padding: 12px 18px;
  border: 1px solid rgba(248,249,250,.35);
  background: rgba(255,255,255,.08);
  color: #fff;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: 12px;
  cursor:pointer;
}
.btn.primary{
  background: var(--rose);
  border-color: rgba(229,131,155,.85);
  color: #fff;
}
.btn.primary:hover{ filter: brightness(.98); }
.btn.ghost:hover{ border-color: rgba(229,131,155,.55); }

.hero-side{
  display:flex; flex-direction:column; gap:14px;
}
.info-card{
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.70);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.info-card h3{
  margin:0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
}
.info-card p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height:1.55;
}
.pills{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.pill{
  border: 1px solid rgba(192,192,192,.55);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(0,31,63,.85);
  background: rgba(248,249,250,.85);
}

/* Sections */
.section{ padding: 26px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.h2{
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  margin:0;
}
.section-head .sub{
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
}
.link{
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(0,31,63,.88);
  border-bottom: 1px solid rgba(229,131,155,.55);
  padding-bottom: 2px;
}
.link:hover{ border-bottom-color: rgba(229,131,155,.95); }

/* Product cards */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.card{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(192,192,192,.45);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(229,131,155,.55);
  box-shadow: 0 16px 50px rgba(0,31,63,.12);
}
.thumb{
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, rgba(0,31,63,.04), rgba(0,31,63,.01));
  border-bottom: 1px solid rgba(192,192,192,.35);
}
.thumb img{ width:100%; height:100%; object-fit: cover; }
.content{ padding: 14px 14px 16px; }
.content h3{
  margin: 2px 0 8px;
  font-size: 14px;
  letter-spacing:.04em;
  text-transform: uppercase;
}
.content p{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  line-height:1.45;
  min-height: 38px;
}
.price{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top: 12px;
  gap: 10px;
}
.price strong{
  font-size: 14px;
  letter-spacing:.06em;
}
.small{ font-size: 12px; color: rgba(0,31,63,.70); }

/* Horizontal slider */
.hscroll{
  display:flex;
  gap: 18px;
  overflow:auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.hscroll::-webkit-scrollbar{ height: 10px; }
.hscroll::-webkit-scrollbar-thumb{ background: rgba(192,192,192,.55); border-radius: 999px; }
.hscroll > a{ min-width: 260px; scroll-snap-align: start; }

/* Filters */
.filters{
  display:flex; gap: 12px; align-items:center; flex-wrap:wrap;
}
.select{
  border: 1px solid rgba(192,192,192,.60);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.75);
}
.input{
  border: 1px solid rgba(192,192,192,.60);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,.75);
  outline:none;
}

.input-readonly{
  background: rgba(248,249,250,.85) !important;
  color: rgba(0,31,63,.80) !important;
}
.input-error{
  border-color: rgba(180,35,24,.55) !important;
  box-shadow: 0 0 0 3px rgba(180,35,24,.10) !important;
}
.input:focus{ border-color: rgba(229,131,155,.75); box-shadow: 0 0 0 4px rgba(229,131,155,.18); }

/* Product detail */
.product-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
}
.panel{
  border-radius: 22px;
  border: 1px solid rgba(192,192,192,.45);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow-soft);
}
.p-14{ padding:14px; }
.p-18{ padding:18px; }
.product-title{
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  margin: 0 0 10px;
}
.hr{ height:1px; background: rgba(192,192,192,.45); margin: 16px 0; }
.kv{ display:flex; gap: 10px; flex-wrap:wrap; }
.kv span{
  border: 1px solid rgba(192,192,192,.55);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(248,249,250,.85);
  color: rgba(0,31,63,.85);
}
.cta{
  display:flex; gap: 10px; flex-wrap:wrap;
}
.cta .btn2{
  border-radius: 999px;
  padding: 12px 16px;
  border: 1px solid rgba(0,31,63,.20);
  background: rgba(255,255,255,.60);
  cursor:pointer;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: 12px;
}
.cta .btn2.primary{
  background: var(--rose);
  border-color: rgba(229,131,155,.85);
  color: #fff;
}
.cta .btn2:hover{ border-color: rgba(229,131,155,.65); }

/* Footer */
.footer{
  margin-top: 34px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 18px;
  padding: 34px 0;
}
.footer h4{
  margin:0 0 12px;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
}
.footer a{
  display:block;
  padding: 6px 0;
  color: rgba(0,31,63,.78);
}
.footer a:hover{ color: var(--navy); }
.footer p{ margin:0; color: var(--muted); line-height:1.55; }
.footer-bottom{
  border-top:1px solid rgba(192,192,192,.45);
  padding: 14px 0;
  color: rgba(0,31,63,.70);
  font-size: 12.5px;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.footer-bottom .made{ color: rgba(0,31,63,.55); }

/* WhatsApp FAB */
.whatsapp-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  border: 1px solid rgba(192,192,192,.45);
  box-shadow: var(--shadow);
}

/* WhatsApp icon button (admin pedidos) */
.waIconBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(37, 211, 102, .35);
  background: rgba(37, 211, 102, .14);
  color: #0a7b40;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.waIconBtn:hover{
  background: rgba(37, 211, 102, .20);
  border-color: rgba(37, 211, 102, .55);
}
.whatsapp-fab:hover{ filter: brightness(.98); }
.whatsapp-fab .dot{
  width:10px; height:10px;
  border-radius:50%;
  background: var(--rose);
  box-shadow: 0 0 0 6px rgba(229,131,155,.18);
}

/* Responsive */
@media (max-width: 980px){
  .desktop-only{ display:none !important; }
  .mobile-only{ display:inline-flex; }
  .nav{ display:none; }
  .searchbox{ width: 100%; }
  .hero-grid{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .product-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .h1{ font-size: 38px; }
}


/* --- Rich interactions (v0.4) --- */
@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to {opacity:1; transform: translateY(0);} }
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.on{ opacity:1; transform: translateY(0); }

.thumb.swap{ position:relative; }
.thumb.swap img{ position:absolute; inset:0; width:100%; height:100%; transition: opacity .28s ease, transform .45s ease; }
.thumb.swap img.second{ opacity:0; }
.card:hover .thumb.swap img.first{ opacity:0; transform: scale(1.03); }
.card:hover .thumb.swap img.second{ opacity:1; transform: scale(1.03); }

.card::before{ content:""; position:absolute; inset:-40%;
  background: linear-gradient(120deg, rgba(248,249,250,0) 40%, rgba(248,249,250,.22) 50%, rgba(248,249,250,0) 60%);
  transform: translateX(-60%) rotate(6deg); transition: transform .55s ease; pointer-events:none; }
.card:hover::before{ transform: translateX(60%) rotate(6deg); }

.carousel{ position:relative; }
.carousel .slides{ position:relative; height:100%; }
.carousel .slide{ position:absolute; inset:0; opacity:0; transform: scale(1.01); transition: opacity .55s ease, transform .65s ease; }
.carousel .slide.active{ opacity:1; transform: scale(1); }
.carousel-controls{ position:absolute; left:22px; right:22px; bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; pointer-events:none; }
.dots{ display:flex; gap:8px; pointer-events:auto; }
.dot{ width:30px; height:3px; border-radius:999px; background: rgba(248,249,250,.35); cursor:pointer; border:none; }
.dot.active{ background: var(--rose); }
.ctrl{ pointer-events:auto; border-radius:999px; border: 1px solid rgba(248,249,250,.35);
  background: rgba(255,255,255,.10); color:#fff; padding: 10px 12px; cursor:pointer; }
.ctrl:hover{ border-color: rgba(229,131,155,.60); }

.editorial{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.editorial .block{ border-radius: 26px; overflow:hidden; border: 1px solid rgba(192,192,192,.45); box-shadow: var(--shadow); position:relative; }
.editorial .block img{ width:100%; height:320px; object-fit:cover; }
.editorial .block .cap{ position:absolute; left:18px; bottom:16px; right:18px; background: rgba(248,249,250,.90);
  border: 1px solid rgba(192,192,192,.45); border-radius: 18px; padding: 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cap strong{ letter-spacing:.10em; text-transform:uppercase; font-size:12px; }
.cap span{ color: rgba(0,31,63,.72); font-size:13px; }

.trust{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.trust .tcard{ border-radius:20px; border:1px solid rgba(192,192,192,.45); background: rgba(255,255,255,.78);
  padding:16px; box-shadow: var(--shadow-soft); transition: transform .18s ease, border-color .18s ease; }
.trust .tcard:hover{ transform: translateY(-2px); border-color: rgba(229,131,155,.55); }
.trust .ic{ font-size:18px; }
.trust .h{ margin-top:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
.trust .p{ margin-top:6px; color: var(--muted); font-size:13px; line-height:1.45; }

.reviews{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.review{ border-radius:22px; border:1px solid rgba(192,192,192,.45); background: rgba(255,255,255,.80);
  padding:16px; box-shadow: var(--shadow-soft); }
.stars{ letter-spacing: 2px; color: var(--rose); }
.review .name{ margin-top:10px; font-weight:800; }
.review .txt{ margin-top:8px; color: var(--muted); line-height:1.55; }

.ig{ display:grid; grid-template-columns: repeat(6,1fr); gap:10px; }
.ig a{ border-radius:16px; overflow:hidden; border:1px solid rgba(192,192,192,.45); box-shadow: var(--shadow-soft); transition: transform .18s ease; }
.ig a:hover{ transform: translateY(-2px); }
.ig img{ aspect-ratio: 1/1; object-fit: cover; width:100%; height:100%; }

.newsletter{ border-radius:26px; border:1px solid rgba(192,192,192,.45); background: rgba(255,255,255,.80); box-shadow: var(--shadow); overflow:hidden; position:relative; }
.newsletter .inner{ padding:22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.newsletter h3{ margin:0; font-family: "Playfair Display", Georgia, serif; font-size:24px; }
.newsletter p{ margin:8px 0 0; color: var(--muted); }
.newsletter form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.newsletter input{ min-width: 260px; }
.newsletter .btn2.primary{ padding-left:20px; padding-right:20px; }

@media (max-width: 980px){
  .editorial{ grid-template-columns: 1fr; }
  .trust{ grid-template-columns: repeat(2,1fr); }
  .reviews{ grid-template-columns: 1fr; }
  .ig{ grid-template-columns: repeat(3,1fr); }
}

/* --- AVIR-like collection hero + swatches + accordion (v0.5) --- */
.collection-hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: center;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(192,192,192,.45);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.80);
}
.collection-hero .img{
  min-height: 320px;
  background: linear-gradient(120deg, rgba(0,31,63,.12), rgba(229,131,155,.10));
}
.collection-hero .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.collection-hero .txt{ padding: 22px; }
.collection-hero .txt h1{ margin:0; font-family:"Playfair Display", Georgia, serif; font-size: 40px; }
.collection-hero .txt p{ margin: 10px 0 0; color: var(--muted); line-height: 1.6; max-width: 46ch; }
.collection-hero .meta{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; }

.swatches{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.swatch{
  width: 14px; height: 14px; border-radius: 999px;
  border: 1px solid rgba(0,31,63,.25);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.swatch.more{
  width:auto; height:auto; padding: 3px 8px;
  border-radius: 999px; font-size: 11px;
  letter-spacing:.10em; text-transform:uppercase;
  background: rgba(0,31,63,.06);
}

.opt-group{ margin-top: 14px; }
.opt-name{ font-weight: 800; letter-spacing:.08em; text-transform:uppercase; font-size: 12px; color: rgba(0,31,63,.70); }
.opt-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.chip{
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(192,192,192,.55);
  background: rgba(255,255,255,.85);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
  font-size: 13px;
}
.chip:hover{ transform: translateY(-1px); border-color: rgba(229,131,155,.60); }
.chip.on{ border-color: rgba(0,31,63,.65); box-shadow: 0 0 0 3px rgba(229,131,155,.16); }

/* Variant selection validation (product page) */
.opt-group.error .opt-name{ color: #B00020; }
.opt-group.error .chip{ border-color: rgba(176,0,32,.55); box-shadow: 0 0 0 3px rgba(176,0,32,.12); }
.opt-error-msg{ margin-top: 10px; color: #B00020; font-weight: 800; }

.chip .swatch{ margin-right: 8px; vertical-align: middle; display:inline-block; }

.accordion{ margin-top: 14px; border-top: 1px solid rgba(192,192,192,.45); }
.acc-item{ border-bottom: 1px solid rgba(192,192,192,.45); }
.acc-btn{
  width:100%; text-align:left;
  background: transparent; border:0; cursor:pointer;
  padding: 14px 0;
  display:flex; align-items:center; justify-content:space-between;
  font-weight: 800; letter-spacing:.08em; text-transform:uppercase; font-size: 12px;
}
.acc-panel{ display:none; padding: 0 0 14px; color: var(--muted); line-height: 1.65; }
.acc-item.open .acc-panel{ display:block; }
.acc-icon{ opacity:.6; }

.price-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.price-row .compare{ text-decoration: line-through; color: rgba(0,31,63,.45); font-weight:700; }
.price-row .badge-sale{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius:999px;
  border:1px solid rgba(229,131,155,.55); background: rgba(229,131,155,.12); font-size:11px; letter-spacing:.10em; text-transform:uppercase; }

@media (max-width: 980px){
  .collection-hero{ grid-template-columns: 1fr; }
  .collection-hero .txt h1{ font-size: 32px; }
}


/* --- Brand logo helpers --- */
.brandLogo{
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 12px;
}
.brandText{ display:flex; flex-direction:column; }
.brandText .brandName{ display:block; line-height:1.05; white-space:nowrap; font-size: clamp(14px, 2.1vw, 18px); }
.brandText .brandSubtitle{ margin-top: 3px; white-space:nowrap; }

/* --- Checkout/cart summary helpers --- */
.sum-row{
  display:flex;
  justify-content:space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(192,192,192,.35);
  gap: 14px;
}
.sum-left{ max-width: 70%; }
.sum-name{ font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.sum-right{ font-weight:800; white-space:nowrap; }
.sum-totals{ padding-top: 12px; display:grid; gap: 8px; }
.sum-kv{ display:flex; justify-content:space-between; }
.sum-kv.total{
  border-top: 1px solid rgba(192,192,192,.35);
  padding-top: 10px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 900;
}
.pay-lg{
  padding: 14px 18px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .10em;
  text-transform: uppercase;
}

@media (max-width: 520px){
  .brandLogo{ width: 46px; height: 46px; }
}

/* --- Form validation (red alerts + highlight fields) --- */
.is-invalid{
  border-color: #b00020 !important;
  box-shadow: 0 0 0 3px rgba(176,0,32,.12) !important;
}
.field-error-msg{
  color: #b00020;
  font-size: 12.5px;
}

/* --- Cart responsive rows --- */
.cart-row{
  display:grid;
  grid-template-columns: 90px 1fr 140px;
  gap:14px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(192,192,192,.35);
}
.cart-row .cart-total{ font-weight:800; text-align:right; white-space:nowrap; }
@media (max-width: 640px){
  .cart-row{ grid-template-columns: 80px 1fr; }
  .cart-row .cart-total{ grid-column: 1 / -1; text-align:left; padding-left: 94px; }
}


/* ===== Layout helpers (portal/admin forms & tables) ===== */
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px){ .grid2{ grid-template-columns: 1fr; } }

/* Fuerza 1 columna incluso en pantallas anchas (para evitar secciones "tapadas") */
.admin-stack{ grid-template-columns: 1fr !important; }

.row2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 700px){ .row2{ grid-template-columns: 1fr; } }

.form label{ display:block; font-size:13px; color:rgba(0,31,63,.75); margin:10px 0 6px; }
.form input, .form select, .form textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(192,192,192,.6);
  border-radius:14px;
  background:#fff;
  outline:none;
}
.form textarea{ min-height:96px; resize:vertical; }

.table-wrap{ border:1px solid rgba(192,192,192,.55); border-radius:16px; overflow:auto; }
table.t{ width:100%; border-collapse:separate; border-spacing:0; min-width:860px; }
table.t th, table.t td{ padding:12px 12px; border-bottom:1px solid rgba(192,192,192,.38); text-align:left; vertical-align:middle; }
table.t th{ position:sticky; top:0; background:#fff; z-index:1; font-size:12px; color:rgba(0,31,63,.78); letter-spacing:.02em; }
table.t tr:hover td{ background:rgba(0,31,63,.03); }

.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(192,192,192,.55); }
.badge.ok{ background:rgba(0,31,63,.06); color:rgba(0,31,63,.88); }
.badge.off{ background:rgba(0,31,63,.10); color:rgba(0,31,63,.88); }

.badge.warn{ background:rgba(229,131,155,.10); color:#b42318; border-color:rgba(180,35,24,.25); }

.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  background:var(--navy); color:#fff; font-weight:600; font-size:12px;
  box-shadow:0 10px 18px rgba(0,31,63,.18);
}

/* social links */
a.soc{ display:inline-flex; align-items:center; gap:10px; }
.soc-ico{ width:18px; height:18px; display:inline-flex; }
.soc-ico svg{ width:18px; height:18px; fill:rgba(0,31,63,.85); }
.soc-txt{ display:inline-block; }

/* logo bigger */
.brandLogo{ height:54px; width:auto; }
@media (max-width: 720px){ .brandLogo{ height:44px; } }


/* Admin usability improvements */

@media (max-width: 980px){ body.admin-wide .toolbar .row2{ grid-template-columns: 1fr; } body.admin-wide .toolbar-actions{ flex-wrap:wrap; } }
body.admin-wide{overflow-x:hidden;}
body.admin-wide .wrap{max-width:1700px;margin:0 auto;padding:18px;}
body.admin-wide .container{max-width:1600px !important;}
body.admin-wide .card{overflow:visible;}
.table-wrap{overflow:auto;max-width:100%;}
table.t{width:100%;border-collapse:collapse;}
table.t th, table.t td{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.08);vertical-align:top;overflow-wrap:anywhere;word-break:break-word;}
table.t thead th{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:saturate(120%) blur(6px);z-index:1;}
table.t tbody tr:hover{background:rgba(0,0,0,.03);}
.toolbar{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px;}
.toolbar-actions{display:flex;gap:10px;align-items:center;}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:10px;}
.lbl{display:block;font-size:.88rem;color:rgba(0,0,0,.65);margin-bottom:6px;}
.input,.select,.textarea{width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.18);border-radius:12px;outline:none;}
.textarea{resize:vertical;}
.chip{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:rgba(255,255,255,.8);}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:.82rem;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.04);}
.badge.paid{background:rgba(46, 204, 113,.12);border-color:rgba(46,204,113,.25);}
.badge.pending{background:rgba(241, 196, 15,.14);border-color:rgba(241,196,15,.25);}
.badge.shipped{background:rgba(52, 152, 219,.12);border-color:rgba(52,152,219,.25);}
.badge.delivered{background:rgba(155, 89, 182,.12);border-color:rgba(155,89,182,.25);}
.timeline{display:flex;flex-direction:column;gap:10px;border-left:2px solid rgba(0,0,0,.12);padding-left:12px;}
.titem{display:grid;grid-template-columns:160px 1fr;gap:10px;align-items:start;}
.twhen{font-size:.85rem;color:rgba(0,0,0,.55);}
.twhat{padding:10px 12px;border:1px solid rgba(0,0,0,.10);border-radius:14px;background:rgba(255,255,255,.9);}
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.detail-actions{display:flex;gap:10px;align-items:center;}
.social-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.social-row a{display:inline-flex;gap:8px;align-items:center;}
.btn-pay{position:relative;overflow:hidden;}
.btn-pay::after{content:"";position:absolute;top:-50%;left:-30%;width:40%;height:200%;transform:rotate(20deg);background:rgba(255,255,255,.35);filter:blur(2px);animation:shine 2.8s infinite;}
@keyframes shine{0%{left:-40%;}60%{left:120%;}100%{left:120%;}}


/* TEST MODE badge */
.test-badge{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(229,131,155,.92);
  color:#001F3F;
  border:1px solid rgba(0,31,63,.18);
  font-weight:900;
  letter-spacing:.14em;
  font-size:12px;
  box-shadow:0 14px 28px rgba(0,31,63,.18);
}

/* === Hotfix: badge del carrito y estados legibles === */
[data-cart-badge].badge{
  background:#b42318 !important;
  color:#fff !important;
  border-color:#b42318 !important;
}
.badge.ok{
  background:#1a7f37 !important;
  color:#fff !important;
  border-color:#1a7f37 !important;
}
.badge.warn{
  background:#b54708 !important;
  color:#fff !important;
  border-color:#b54708 !important;
}
.badge.bad{
  background:#b42318 !important;
  color:#fff !important;
  border-color:#b42318 !important;
}


/* Hotfix2b: resaltar item con stock insuficiente */
.cart-row.stock-low{
  border: 1px solid rgba(180,35,24,.65) !important;
  box-shadow: 0 0 0 4px rgba(180,35,24,.12);
  border-radius: 16px;
  background: rgba(180,35,24,.06);
}

/* Modal bloqueante */
body.dp-modal-open{ overflow:hidden; }
.dp-modal.hidden{ display:none; }
.dp-modal{ position:fixed; inset:0; z-index:9999; display:block; }
.dp-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.dp-modal-card{
  position:relative;
  margin: min(10vh, 90px) auto 0;
  width: min(720px, calc(100% - 24px));
  background: #0b0f1a;
  border: 1px solid rgba(192,192,192,.25);
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.dp-modal-card h2{ margin:0 0 6px; }
.dp-modal-close{
  position:absolute;
  top:10px; right:12px;
  width:34px; height:34px;
  border-radius: 10px;
  border: 1px solid rgba(192,192,192,.25);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 22px;
  line-height: 30px;
  cursor: pointer;
}
.dp-modal-actions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

main{flex:1 0 auto;}

.cart-row > div{min-width:0;}
.cart-name{overflow-wrap:anywhere; word-break:break-word;}

.dp-modal-card .small{color:rgba(255,255,255,.78);}
.dp-modal-card h2,.dp-modal-card h3{color:#fff;}
.dp-modal-card a{color:#fff;}

/* =====================
   ADMIN UX FIXES
   ===================== */
.admin-wide .wrap{max-width:1200px; margin:0 auto; padding:16px;}
.admin-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.admin-top .brand{display:flex; flex-direction:column; gap:2px;}
.admin-top .logo{font-weight:900; font-size:22px; letter-spacing:.2px;}
.admin-top .sub{color:rgba(0,31,63,.6); font-size:13px;}
.admin-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.admin-nav{display:flex; gap:8px; flex-wrap:wrap; padding:10px 0 6px;}
.admin-nav .btn2{white-space:nowrap;}
.admin-main{padding-top:8px;}

/* Badges con mejor contraste */
.badge{border:1px solid rgba(0,0,0,.08); font-weight:800; letter-spacing:.02em;}
.t td .badge{display:inline-flex; align-items:center; justify-content:center; min-width:34px; text-transform:uppercase;}
.t td .badge{white-space:nowrap; line-height:1;}

/* Yes/No badges (reportes) */
.badge.yn{min-width:44px; justify-content:center; letter-spacing:.04em;}
.badge.yn.yes{background:#0a7b40; color:#fff; border-color:#0a7b40;}
.badge.yn.no{background:#b02c2c; color:#fff; border-color:#b02c2c;}

/* Highlight rows with stock mismatch */
tr.row-mismatch td{background:rgba(176,35,24,.06);}
.badge.ok{background:rgba(10,123,64,.16); color:#0a7b40; border-color:rgba(10,123,64,.28);}
.badge.warn{background:rgba(181,111,0,.16); color:#b56f00; border-color:rgba(181,111,0,.26);}
.badge.danger{background:rgba(176,44,44,.16); color:#b02c2c; border-color:rgba(176,44,44,.26);}
.badge.paid{background:#0a7b40; color:#fff; border-color:#0a7b40;}
.badge.shipped{background:#0b5ed7; color:#fff; border-color:#0b5ed7;}
.badge.delivered{background:#0a7b40; color:#fff; border-color:#0a7b40;}
.badge.pending{background:#b56f00; color:#fff; border-color:#b56f00;}
.badge.cancelled,.badge.canceled{background:#b02c2c; color:#fff; border-color:#b02c2c;}

/* Switch (apagador) */
.toggle{display:inline-flex; align-items:center; gap:10px; user-select:none;}
.toggle input{display:none;}
.toggle-ui{width:44px; height:24px; border-radius:999px; background:#b42318; position:relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);} 
.toggle-ui::after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .18s ease;}
.toggle input:checked + .toggle-ui{background:#0a7b40;}
.toggle input:checked + .toggle-ui::after{transform: translateX(20px);} 

/* Filas editadas */
tr.dirty td{background:rgba(229,131,155,.12);} 


/* =====================
   HOTFIX 3H - Checkout coupon + phone UI
   ===================== */
.coupon-box{
  border:1px dashed rgba(0,31,63,.22);
  border-radius:16px;
  padding:12px 12px 10px;
  background:rgba(248,249,250,.75);
}
#whats_wrap .toggle{ padding:10px 12px; border:1px solid rgba(0,0,0,.10); border-radius:14px; background:rgba(255,255,255,.85); }

/* =====================
   HOTFIX 3H - Trust strip (Catálogo)
   ===================== */
.trust-strip{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.trust-item{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 12px 12px;
  border:1px solid rgba(192,192,192,.45);
  border-radius:18px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-soft);
  min-height: 56px;
}
.trust-ico{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,31,63,.06);
  font-size: 18px;
}
.trust-txt strong{ display:block; font-size: 13px; letter-spacing:.02em; }
.trust-txt span{ display:block; font-size: 12px; color: rgba(0,31,63,.62); margin-top:2px; }
@media (max-width: 1100px){
  .trust-strip{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px){
  .trust-strip{ grid-template-columns: repeat(2, 1fr); }
}

/* =====================
   HOTFIX 3H - Admin cards padding (fix "Agrupar" overflow)
   ===================== */
body.admin-wide section.card{ padding: 16px 16px 14px; }

/* =====================
   HOTFIX 3H - Order Success premium
   ===================== */
.success-card .kicker{ margin-bottom:2px; }
.success-card .hr{ margin: 14px 0; }

/* --- Checkout layout (premium) --- */
.checkout-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  align-items:start;
}
.checkout-panel{ margin-bottom: 14px; }
.checkout-h3{ margin:0; font-family: "Playfair Display", Georgia, serif; }
.checkout-head-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.checkout-pay{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.checkout-summary.sticky{ position: sticky; top: 96px; }

@media (max-width: 980px){
  .checkout-grid{ grid-template-columns: 1fr; }
  .checkout-summary.sticky{ position: static; top:auto; }
}

@media (max-width: 520px){
  .brandText .brandSubtitle{ font-size: 11px; }
}


/* Hotfix 3N: Admin orders toast + WhatsApp + pickup banner */
.toast{position:fixed; right:18px; top:18px; z-index:9999; background:rgba(0,31,63,.92); color:#fff; padding:10px 14px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.18); transform:translateY(-10px); opacity:0; transition:all .18s ease; font-size:14px; letter-spacing:.01em;}
.toast.show{transform:translateY(0); opacity:1;}
.btn2.wa{display:inline-flex; align-items:center; justify-content:center; width:44px; height:36px; border-radius:12px; font-weight:900; letter-spacing:.06em;}
.pill.pickup{background:rgba(0,31,63,.10); border:1px solid rgba(0,31,63,.18); color:#001F3F; padding:6px 10px; border-radius:999px; font-weight:900; letter-spacing:.06em;}
.pickup-banner{padding:12px 12px; border:1px solid rgba(0,31,63,.14); border-radius:14px; background:rgba(248,249,250,.92);}