/* Sweet Nao Store — hoja de estilos única */
/* Rutas: CSS está en assets/css/, imágenes en assets/img/ */

:root {
  --pink: #f291b8;
  --pink-soft: #fbd6e4;
  --pink-pale: #fdeff4;
  --green: #7cc47f;
  --ink: #6d4550;
  --ink-soft: #a1808a;
  --ink-light: #d9c5cc;
  --card: #ffffff;
  --bg: #fffafc;
  --border: #f6dfe7;
  --shadow-soft: 0 10px 30px -12px rgba(226, 122, 165, 0.4);
  --shadow-card: 0 6px 20px -10px rgba(180, 100, 140, 0.35);
  --font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-body: "Quicksand", system-ui, sans-serif;
  --font-script: "Great Vibes", cursive;
  --radius-card: 1.75rem;
  --radius-hero: 2.5rem;
}

/* ---------- Reset y tipografía ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  line-height:1.5;
}
h1,h2,h3{font-family:var(--font-display);margin:0}
h1,h2,h3,strong{font-weight:800}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit}

.container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 1rem;
}
.text-center{text-align:center}

/* ---------- Barra de anuncio ---------- */
.announcement{
  background:linear-gradient(90deg,var(--green),#6aaa75);
  color:#fff;
  text-align:center;
  padding:0.55rem 1rem;
  font-family:var(--font-display);
  font-size:0.8rem;
  overflow:hidden;
  white-space:nowrap;
}
.announcement span{
  display:inline-block;
  animation:bounce-text 3s infinite;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
}
.logo img{height:3rem;width:auto}

.nav{
  display:none;
  flex-direction:column;
  gap:1rem;
  padding:1rem 0;
}
.nav.open{
  display:flex;
  position:absolute;
  top:100%;left:0;right:0;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  z-index:25;
}
.nav a{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  padding:0.5rem 1rem;
  transition:color 0.2s;
}
.nav a:hover{color:var(--pink)}
.nav a.active{color:var(--pink)}

/* ---------- Botón menú móvil ---------- */
.btn-menu{
  display:flex;
  flex-direction:column;
  width:2.25rem;height:1.75rem;
  background:transparent;
  border:none;
  cursor:pointer;
  gap:4px;
  padding:0;
}
.btn-menu span{
  display:block;
  height:2.5px;
  background:var(--ink);
  border-radius:2px;
  transition:all 0.2s;
}
.btn-menu:hover span{background:var(--pink)}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  border:none;cursor:pointer;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:700;
  transition:background-color 0.2s,transform 0.2s;
}
.btn-primary{
  background:var(--pink);color:#fff;
  padding:0.75rem 1.75rem;
  font-size:1rem;
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{transform:scale(1.05)}
.btn-cart{
  background:var(--pink);color:#fff;
  padding:0.5rem 1.25rem;
  font-size:0.875rem;
  white-space:nowrap;
}
.btn-cart:hover{background:var(--green)}
.btn-search{
  background:transparent;color:var(--ink);
  padding:0.5rem;
  display:flex;align-items:center;justify-content:center;
}
.btn-search:hover{color:var(--pink);background:var(--pink-pale)}
.btn-block{display:block;width:100%;padding:0.5rem 1rem;font-size:0.875rem;box-shadow:none}
.btn-block:hover{background:var(--green);transform:none}
.btn-view{background:var(--pink-soft);color:var(--ink);padding:0.4rem 0.8rem;font-size:0.8rem}
.btn-view:hover{background:var(--pink);color:#fff}
.btn-cart-add{background:var(--green);color:#fff;padding:0.4rem 0.8rem;font-size:0.8rem;text-align:center}
.btn-cart-add:hover{background:var(--pink)}
.btn-buy{background:#f291b8;color:#fff;padding:0.4rem 0.8rem;font-size:0.8rem;text-align:center}
.btn-buy:hover{background:#d97aa0}
.is-hidden{display:none !important}
.load-more{margin-top:1.5rem}
.carrito-items{margin-bottom:2rem}
.carrito-item{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem}
.carrito-item img{width:80px;height:80px;object-fit:contain;border-radius:0.5rem;background:var(--pink-pale)}
.carrito-info{flex:1}
.carrito-info h3{font-size:1rem;margin-bottom:0.25rem}
.precio-item{color:var(--ink-soft);font-size:0.9rem}
.carrito-cantidad{display:flex;align-items:center;gap:0.5rem}
.carrito-cantidad button{width:30px;height:30px;border:none;border-radius:50%;background:var(--pink-soft);color:var(--ink);cursor:pointer;font-size:1.2rem}
.carrito-cantidad button:hover{background:var(--pink);color:#fff}
.carrito-cantidad span{font-weight:700;min-width:30px;text-align:center}
.carrito-subtotal{text-align:right}
.carrito-subtotal p{font-weight:700;color:var(--pink)}
.btn-remove{background:none;border:none;color:#e74c3c;font-size:1.5rem;cursor:pointer}
.btn-remove:hover{color:#c0392b}
.carrito-total{text-align:right;padding:1rem;border-top:2px solid var(--border)}
.carrito-total h3{font-size:1.5rem;margin-bottom:1rem}
.carrito-acciones{display:flex;gap:1rem;justify-content:flex-end;flex-wrap:wrap}
.checkout-info{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.checkout-resumen,.checkout-instrucciones{background:var(--card);padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.checkout-item{display:flex;align-items:center;gap:1rem;padding:0.75rem 0;border-bottom:1px solid var(--border)}
.checkout-item img{width:50px;height:50px;object-fit:contain;border-radius:0.5rem;background:var(--pink-pale)}
.checkout-item h4{font-size:0.9rem}
.checkout-item p{font-size:0.8rem;color:var(--ink-soft)}
.checkout-item span{margin-left:auto;font-weight:700}
.checkout-total{margin-top:1rem;padding-top:1rem;border-top:2px solid var(--border);text-align:right;font-size:1.25rem}
.checkout-instrucciones ol{padding-left:1.5rem;line-height:2}
.checkout-instrucciones .nota{background:var(--pink-pale);padding:1rem;border-radius:0.5rem;margin:1rem 0;font-size:0.9rem}
/* Custom Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(109,69,80,0.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{background:#fff;border-radius:var(--radius-card);padding:2rem;max-width:400px;width:90%;box-shadow:0 25px 60px rgba(0,0,0,0.3);transform:scale(0.9);transition:transform 0.3s}
.modal-overlay.open .modal{transform:scale(1)}
.modal-icon{font-size:3rem;text-align:center;margin-bottom:1rem}
.modal h3{font-family:var(--font-display);font-size:1.25rem;text-align:center;margin-bottom:0.5rem;color:var(--ink)}
.modal p{text-align:center;color:var(--ink-soft);margin-bottom:1.5rem}
.modal-actions{display:flex;gap:1rem;justify-content:center}
.modal-actions .btn{min-width:100px}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0.7)),
  url("../img/SITIO/pattern.png");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  min-height:480px;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  padding-top:3rem;
  text-align:center;
}
.hero-card{
  max-width:28rem;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(4px);
  border-radius:var(--radius-hero);
  padding:2rem;
  box-shadow:var(--shadow-soft);
}
.hero-card h1{
  font-size:2.25rem;
  line-height:1.15;
  color:var(--pink);
  font-weight:800;
}
.hero-card p{
  color:var(--ink-soft);
  font-size:1rem;
  margin:1.25rem 0;
}

.hero-figure{display:flex;flex:1;align-items:flex-end;justify-content:center}
.hero-figure img{width:14rem;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,0.12));
}

.float{animation:float-soft 4s ease-in-out infinite}
@keyframes float-soft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes bounce-text{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-10px)}
  40%{transform:translateX(0)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(0)}
}
@keyframes float-figure{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-10px) rotate(2deg)}
}
.hero-sub-title{
  font-size:2.5rem;
  color:var(--pink);
  margin-bottom:0.5rem;
}
.hero-sub-text{
  color:var(--ink-soft);
  font-size:1rem;
}

/* ---------- Secciones ---------- */
.section{padding:3rem 0}
.section h2.section-title{
  text-align:center;
  font-size:1.875rem;
  font-weight:800;
  margin-bottom:2rem;
  position:relative;
  padding-bottom:0.5rem;
}
.section h2.section-title:after{
  content:'';
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:60px;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--green));
  border-radius:2px;
}
.section-muted{
  background:var(--pink-pale);
  padding:3rem 0;
}
.no-results{
  font-size:1.1rem;
  color:var(--ink-soft);
  padding:2rem 0;
}

/* ---------- Grid ---------- */
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-tight{gap:1.25rem}
.grid-3{grid-template-columns:1fr}

/* ---------- Categorías con marco de corazón ---------- */
.cat{
  display:block;
  text-align:center;
  transition:transform 0.3s;
}
.cat:hover{transform:translateY(-6px)}

.cat-frame{
  position:relative;
  margin:0 auto;
  width:100%;
  max-width:300px;
  aspect-ratio:1/1;
}
.cat-frame svg{
  width:100%;height:100%;
  filter:drop-shadow(var(--shadow-card));
  transition:transform 0.3s;
}
.cat:hover .cat-frame svg{transform:scale(1.05)}

.heart-bg{fill:#fbe4ec;stroke:#f291b8;stroke-width:2}
#pearls circle{fill:#f291b8;stroke:#d97aa0;stroke-width:1}
.bow-fill{fill:#f8c9dc}
.bow-knot{fill:#fff}
.bow-tail{stroke:#f8c9dc;stroke-width:5;fill:none;stroke-linecap:round}

.cat-name{
  display:block;
  margin-top:0.75rem;
  font-family:var(--font-script);
  font-size:1.875rem;
  color:var(--ink);
}

/* ---------- Filtros de categoría ---------- */
.category-filters{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:center;
  margin-bottom:1.5rem;
}
.filter-btn{
  background:var(--pink-soft);
  color:var(--ink);
  padding:0.5rem 1.25rem;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.85rem;
  transition:all 0.2s;
  border:2px solid transparent;
}
.filter-btn:hover{
  background:var(--pink);
  color:#fff;
  transform:translateY(-2px);
}
.filter-btn.active{
  background:var(--pink);
  color:#fff;
  border-color:var(--green);
}

/* ---------- Filtro de series ---------- */
.series-filter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem;
  margin-bottom:1.5rem;
  flex-wrap:wrap;
}
.series-filter label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.9rem;
  color:var(--ink);
}
.series-filter select{
  padding:0.5rem 2rem 0.5rem 1rem;
  border:2px solid var(--border);
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.9rem;
  color:var(--ink);
  background:var(--bg);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d4550' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.75rem center;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.series-filter select:hover,
.series-filter select:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(242,145,184,0.15);
  outline:none;
}

/* ---------- Productos ---------- */
.product{
  overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--card);
  box-shadow:var(--shadow-card);
  transition:transform 0.3s;
  display:flex;
  flex-direction:column;
}
.product:hover{transform:translateY(-4px)}

.product-media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--pink-pale);
}
.product-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.3s;
}

.media-overlay{
  position:absolute;
  inset:0;
  background:rgba(242,145,184,0.75);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.9rem;
  opacity:0;
  transition:opacity 0.3s;
  pointer-events:none;
}
.product:hover .media-overlay{opacity:1}

.media-link{
  display:block;
  width:100%;
  height:100%;
  position:relative;
}
.media-link img{
  transition:filter 0.3s, transform 0.3s;
}
.product:hover .media-link img{
  filter:grayscale(40%);
  transform:scale(1.05);
}

.tag{
  position:absolute;
  left:0.75rem;
  top:0.75rem;
  z-index:2;
  border-radius:999px;
  padding:0.25rem 0.75rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.7rem;
  line-height:1;
}
.tag.nuevo{
  background:var(--pink);
  color:#fff;
}
.tag.oferta{
  background:#ff6b6b;
  color:#fff;
  margin-top:2rem;
}

.product-body{
  padding:1rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  flex:1;
}
.product-body h3{
  font-family:var(--font-body);
  font-size:0.875rem;
  font-weight:700;
  margin-bottom:0.25rem;
}
.product-id{
  font-size:0.7rem;
  color:var(--ink-soft);
  font-family:var(--font-display);
  letter-spacing:1px;
}
.price{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  margin:0.5rem 0;
}
.price-now{
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:700;
  color:var(--pink);
}
.price-old{
  font-size:0.75rem;
  color:var(--ink-soft);
  text-decoration:line-through;
}
.stock{
  font-size:0.875rem;
  font-weight:700;
  margin-bottom:0.75rem;
}
.stock.in-stock{color:var(--green)}
.stock.out-of-stock{
  color:#e74c3c;
  font-size:1.25rem;
  letter-spacing:1px;
  text-transform:uppercase;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}

/* ---------- Producto detalle ---------- */
.product-detail{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  align-items:start;
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.product-detail-media{
  position:relative;
  aspect-ratio:1/1;
  background:var(--pink-pale);
  border-radius:var(--radius-card) 0 0 var(--radius-card);
  overflow:hidden;
  padding:1.5rem;
  box-sizing:border-box;
}
.product-detail-media img{
  width:100%;height:100%;
  object-fit:contain;
}
/* ---------- Slideshow para Coleccionables ---------- */
.slideshow-container{
  position:relative;
  width:100%;
  height:100%;
}
.slideshow-wrapper{
  width:100%;
  height:100%;
}
.slide-img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.slideshow-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(242,145,184,0.8);
  color:#6d4550;
  border:none;
  border-radius:50%;
  width:40px;
  height:40px;
  cursor:pointer;
  font-size:1.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  transition:background 0.2s;
}
.slideshow-btn:hover{
  background:var(--pink);
}
.slideshow-btn.prev{left:8px}
.slideshow-btn.next{right:8px}
.slideshow-controls{
  position:absolute;
  bottom:8px;
  right:48px;
  z-index:2;
}
.slideshow-btn.play-pause{
  background:rgba(242,145,184,0.9);
  color:#fff;
  width:36px;
  height:36px;
  font-size:1rem;
}
.slide-item{
  position:relative;
  width:100%;
  height:100%;
}
.slide-img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform 0.2s;
}
.slide-item:hover .slide-img{
  transform:scale(1.02);
}
.zoom-btn{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(242,145,184,0.9);
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity 0.2s, transform 0.2s, background 0.2s;
  z-index:3;
}
.slide-item:hover .zoom-btn{
  opacity:1;
  transform:translateY(0);
}
.zoom-btn:hover{
  background:var(--pink);
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.95);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s, visibility 0.3s;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
}
.lightbox img{
  max-width:95%;
  max-height:95%;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close{
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s;
}
.lightbox-close:hover{
  background:rgba(255,255,255,0.4);
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:60px;
  height:60px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s;
}
.lightbox-nav:hover{
  background:rgba(255,255,255,0.4);
}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:2;
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(242,145,184,0.5);
  cursor:pointer;
  transition:background 0.2s;
}
.dot.active,
.dot:hover{
  background:var(--pink);
}
.product-detail-body{
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.related-row{display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:0.5rem;scroll-snap-type:x mandatory;align-items:flex-start;justify-content:center}
.related-row .product{width:240px;max-width:240px;flex:0 0 240px;scroll-snap-align:start}
.related-tags{margin-top:1rem}
.related-tags h2.section-title{margin-top:2.5rem;margin-bottom:1.25rem;text-align:center}
.product-detail-body h1{
  font-family:var(--font-body);
  font-size:1.25rem;
  font-weight:700;
  margin:0;
}
.product-categoria{
  font-size:0.8rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:1px;
}
.product-detail .price{
  margin:0.5rem 0;
}
.product-detail .price-now{
  font-size:2.5rem;
  font-weight:800;
  color:var(--pink);
}
.product-detail .price-old{
  font-size:1.25rem;
  color:var(--ink-soft);
  text-decoration:line-through;
}
.product-description{
  margin-top:1rem;
}
.product-description h3{
  font-family:var(--font-body);
  font-size:0.9rem;
  font-weight:700;
  margin-bottom:0.5rem;
}
.product-description p{
  font-size:0.85rem;
  color:var(--ink);
  line-height:1.6;
}
.product-actions{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  margin-top:1rem;
}
.btn-whatsapp{
  background:#25d36e;
  color:#fff;
}
.btn-whatsapp:hover{
  background:#128c7e;
}

/* ---------- Info cards ---------- */
.info-card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:1.5rem;
  padding:1.75rem;
  text-align:center;
  box-shadow:var(--shadow-card);
  transition:transform 0.3s;
}
.info-card:hover{transform:translateY(-4px)}
.info-card h3{
  font-size:1.125rem;
  font-weight:700;
  color:var(--pink);
  margin-bottom:0.5rem;
}
.info-card p{
  font-size:0.875rem;
  color:var(--ink-soft);
  margin-top:0.5rem;
}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  font-size:0.85rem;
  margin-top:0.5rem;
}
.footer-contact span{display:flex;align-items:center;gap:0.3rem}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--pink-soft);
  padding:2.5rem 0;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
}
.footer-inner img{height:3.5rem;width:auto}
.footer-info p{margin:0.2rem 0}
.footer-copy{
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-top:0.5rem;
}

/* ---------- Desktop (min-width: 768px) ---------- */
@media(min-width:768px){
  .nav{
    display:flex !important;
    flex-direction:row !important;
    position:static !important;
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
    padding:0 !important;
    margin:0 !important;
    gap:1.5rem !important;
  }
  .nav.open{position:static}
  .btn-menu{display:none}

  .hero-inner{
    flex-direction:row;
    text-align:left;
  }
  .hero-card{margin:0 2rem 0 0;max-width:30rem}
  .hero-card h1{font-size:3rem}
  .hero-card p{font-size:1.1rem}
  .hero-figure img{width:20rem}

  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

  .cat-name{font-size:2.25rem}

  .section{padding:3.5rem 0}

  .product-detail{
    grid-template-columns:1.2fr 1fr;
    border-radius:var(--radius-card);
  }
  .product-detail-media{
    border-radius:var(--radius-card) 0 0 var(--radius-card);
  }
  .product-detail-body h1{font-size:1.75rem}
}

/* ---------- Search Modal ---------- */
.search-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity 0.3s,visibility 0.3s;
}
.search-modal.open{opacity:1;visibility:visible}
.search-modal-overlay{
  position:absolute;inset:0;
  background:rgba(109,69,80,0.85);
  backdrop-filter:blur(8px);
}
.search-modal-content{
  position:relative;
  width:90%;max-width:600px;
  background:var(--card);
  border-radius:var(--radius-card);
  padding:2.5rem;
  box-shadow:0 25px 60px rgba(0,0,0,0.3);
  transform:translateY(-20px);
  transition:transform 0.3s;
}
.search-modal.open .search-modal-content{transform:translateY(0)}
.search-modal-close{
  position:absolute;top:1rem;right:1rem;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--pink-pale);
  color:var(--ink);
  border:none;cursor:pointer;
  font-size:1.5rem;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s;
}
.search-modal-close:hover{background:var(--pink);color:#fff}
.search-modal-content h2{
  font-family:var(--font-display);
  font-size:1.5rem;
  text-align:center;
  margin-bottom:1.5rem;
  color:var(--ink);
}
.search-input-wrapper{
  position:relative;
  display:flex;align-items:center;
}
.search-icon{
  position:absolute;left:1rem;
  color:var(--ink-soft);
  pointer-events:none;
}
.search-input-wrapper input{
  width:100%;
  padding:1rem 1rem 1rem 3rem;
  border:2px solid var(--border);
  border-radius:999px;
  font-family:var(--font-body);
  font-size:1.1rem;
  font-weight:600;
  color:var(--ink);
  background:var(--bg);
  transition:border-color 0.2s,box-shadow 0.2s;
}
.search-input-wrapper input:focus{
  outline:none;
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(242,145,184,0.15);
}
.search-input-wrapper input::placeholder{color:var(--ink-light)}
.search-results{
  margin-top:1.5rem;
  max-height:400px;
  overflow-y:auto;
}
.search-result-item{
  display:flex;align-items:center;gap:1rem;
  padding:0.75rem;
  border-radius:1rem;
  transition:background 0.2s;
  cursor:pointer;
}
.search-result-item:hover{background:var(--pink-pale)}
.search-result-item img{
  width:60px;height:60px;
  object-fit:contain;
  border-radius:0.75rem;
  background:var(--pink-pale);
}
.search-result-info h4{
  font-family:var(--font-body);
  font-size:0.95rem;
  font-weight:700;
  margin-bottom:0.25rem;
}
.search-result-info .price{
  color:var(--pink);
  font-weight:700;
}
.search-result-info .category{
  font-size:0.75rem;
  color:var(--ink-soft);
}
.search-suggestions{
  margin-top:1.5rem;
  text-align:center;
}
.suggestions-title{
  font-size:0.85rem;
  color:var(--ink-soft);
  margin-bottom:0.75rem;
}
.suggestion-tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;
}
.suggestion-tag{
  display:inline-block;
  padding:0.5rem 1rem;
  background:var(--green);
  border-radius:999px;
  font-size:0.85rem;
  font-weight:600;
  color:#fff;
  transition:background 0.2s,color 0.2s;
}
.suggestion-tag:hover{background:var(--pink);color:#fff}
.search-no-results{
  text-align:center;
  padding:2rem;
  color:var(--ink-soft);
}
.search-no-results span{
  font-size:3rem;
  display:block;
  margin-bottom:0.5rem;
}

@media(max-width:768px){
  .search-modal-content{padding:1.5rem}
  .search-modal-content h2{font-size:1.25rem}
}