/* ============================================================
   Lady Style — estilo minimalista neutro (blanco / beige / negro)
   Mobile-first, sin frameworks externos (cero dependencias de red).
   ============================================================ */

:root {
  --color-bg: #fcf9fd;
  --color-surface: #ffffff;
  --color-dark: #21153f;
  --color-text: #25203a;
  --color-muted: #756f82;
  --color-accent: #c62d8f;
  --color-accent-dark: #7b237d;
  --color-border: #eadff0;
  --color-accent-soft: #f8e6f4;
  --color-purple-soft: #eee8fb;
  --color-green: #0aa66f;
  --radius: 14px;
  --shadow: 0 10px 28px rgba(56, 25, 82, 0.08);
  --max-width: 1140px;
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-dark);
  margin: 0 0 0.5em;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

section { padding: 4rem 1.25rem; }

.section-heading {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.section-heading p { color: var(--color-muted); }

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--color-accent);
  color: #fff;
}

.btn--primary:hover { background: var(--color-accent-dark); }

.btn--ghost {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.btn--block { width: 100%; text-align: center; }

.btn--small { padding: 0.5rem 1rem; font-size: 0.9rem; }

/* --- Navbar --- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.navbar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.navbar__logo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

.navbar__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  order: 3;
}

.navbar__toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-dark);
}

.navbar__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-direction: column;
  padding: 1rem 1.25rem;
}

.navbar__menu.is-open { display: flex; }

.navbar__menu a {
  padding: 0.6rem 0;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.navbar__menu a:last-child { border-bottom: none; }

.cart-fab {
  position: relative;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  font-weight: 600;
  order: 2;
}

.cart-fab__badge {
  display: inline-block;
  margin-left: 0.4rem;
  background: var(--color-accent);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.8rem;
}

/* Boton flotante "Reservar cita": aparece al elegir un servicio */
.reservar-fab {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.75rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  z-index: 45;
  animation: reservar-fab-in 0.2s ease-out;
}

.reservar-fab:hover { background: var(--color-accent-dark); }

.reservar-fab[hidden] { display: none; }

@keyframes reservar-fab-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Boton flotante del carrito: esquina inferior derecha, misma logica que
   reservar-fab (aparece/desaparece) pero es una opcion aparte de la cita. */
.cart-fab-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-dark);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  z-index: 45;
  animation: reservar-fab-in 0.2s ease-out;
}

.cart-fab-float:hover { background: var(--color-accent-dark); }

.cart-fab-float[hidden] { display: none; }

.cart-fab-float svg { width: 24px; height: 24px; }

.cart-fab-float__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 15% 20%, rgba(198,45,143,.12), transparent 30%), radial-gradient(circle at 85% 10%, rgba(123,35,125,.10), transparent 28%), linear-gradient(180deg, #fff 0%, var(--color-bg) 100%);
  text-align: center;
  padding: 5rem 1.25rem;
}

.hero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85rem;
}

.hero h1 { font-size: 2.75rem; background: linear-gradient(90deg, var(--color-dark), var(--color-accent), var(--color-accent-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero__tagline {
  max-width: 520px;
  margin: 0 auto 1.75rem;
  color: var(--color-muted);
}

.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Services --- */
.services, .shop { max-width: var(--max-width); margin: 0 auto; }

.services-grid, .products-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.services-grid { grid-template-columns: 1fr; }

/* Productos: 2 columnas desde un movil normal, sube a 3 en tablet y 4 en
   pantallas grandes (ver breakpoints mas abajo). Servicios no se toca. */
.products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

.service-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.service-card.is-selected {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, #fff, var(--color-accent-soft));
  box-shadow: var(--shadow);
}

.service-card__thumb {
  display: block;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--color-dark);
}

.service-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.service-card__thumb:hover img,
.service-card__thumb:focus-visible img {
  transform: scale(1.1);
}

.service-card__body { flex: 1 1 160px; min-width: 140px; }

.service-card__body h4 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.service-card__body p { margin: 0; color: var(--color-muted); font-size: 0.85rem; }

.service-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.service-card__price {
  font-weight: 700;
  color: var(--color-accent-dark);
  white-space: nowrap;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.qty-value {
  min-width: 1.2rem;
  text-align: center;
  font-weight: 700;
}

/* --- Booking form --- */
.booking-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  max-width: 640px;
  margin: 0 auto;
}

.form-row { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }

.form-row--split {
  flex-direction: row;
  gap: 1rem;
}

.form-row--split > div { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }

.form-row label, fieldset.form-row legend { font-weight: 600; font-size: 0.9rem; }

.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row textarea {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-bg);
}

fieldset.form-row {
  border: none;
  padding: 0;
  margin: 0 0 1.1rem;
}

.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  margin-right: 1rem;
  margin-top: 0.3rem;
}

.sinpe-box {
  background: var(--color-bg);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.1rem;
}

.sinpe-box label { display: block; margin-top: 0.6rem; font-weight: 600; font-size: 0.9rem; }

.sinpe-box input {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.booking-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-border);
  margin-bottom: 1.1rem;
  font-size: 1.1rem;
}

.form-error {
  color: #b3261e;
  background: #fdecea;
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* --- Products --- */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.product-card:hover { transform: translateY(-3px); border-color: #e2b3d8; box-shadow: 0 14px 32px rgba(123,35,125,.12); }

.product-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-bg);
}

.product-card h4 { font-size: 1rem; margin: 0; }

.product-card__price { color: var(--color-accent-dark); font-weight: 700; }

/* --- Contact --- */
.contact__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.contact__grid h3 { font-size: 1rem; color: var(--color-accent-dark); margin-bottom: 0.2rem; }
.contact__grid p { margin: 0 0 1rem; font-weight: 600; }

/* --- Footer --- */
.footer {
  text-align: center;
  padding: 2rem 1.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
}

.footer p { margin: 0.25rem 0; }
.footer__muted { font-size: 0.85rem; }

/* --- Cart drawer --- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(33, 21, 63, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 50;
}

.overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 51;
  display: flex;
  flex-direction: column;
}

.drawer.is-open { transform: translateX(0); }

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.icon-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
}

.drawer__items {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1;
}

.drawer__empty { color: var(--color-muted); text-align: center; margin-top: 2rem; }

.cart-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-item__info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cart-item__info span { color: var(--color-muted); font-size: 0.85rem; }

.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-item__qty button,
.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  font-weight: 700;
}

.qty-btn:hover { border-color: var(--color-accent); }

.cart-item__remove {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.9rem;
}

.drawer__footer {
  padding: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* --- Modal --- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(33, 21, 63, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 60;
}

.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__content {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 1.75rem;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.modal__summary {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 1rem;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

.modal__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.modal__actions .btn { flex: 1; text-align: center; }

.modal__content--photo {
  max-width: 640px;
  padding: 1rem;
  position: relative;
  text-align: center;
}

.modal__content--photo img {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 0.85rem;
  display: block;
}

.modal__content--photo h3 { margin: 0; }

.modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  z-index: 1;
}

/* ============================================================
   Responsive — tablet / desktop
   ============================================================ */
@media (min-width: 768px) {
  .navbar__toggle { display: none; }

  .navbar__menu {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    border: none;
    padding: 0;
    gap: 1.5rem;
    order: 1;
  }

  .navbar__menu a { border-bottom: none; padding: 0; }

  .hero h1 { font-size: 3.5rem; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tablet: maximo 3 productos por fila */
  .products-grid { grid-template-columns: repeat(3, 1fr); }

  .contact__grid { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 1200px) {
  /* Pantallas grandes (laptop/desktop, ~24") -- 4 productos por fila */
  .products-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Aroma & Estilo: catálogo de perfumes --- */
.services,.shop,.contact{max-width:var(--max-width);margin:0 auto}
.catalog-toolbar{display:flex;gap:1rem;align-items:center;margin:0 auto 1.5rem;max-width:820px}
.search-box{flex:1;display:flex;align-items:center;gap:.6rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;padding:.2rem 1rem;box-shadow:var(--shadow)}
.search-box span{font-size:1.5rem;color:var(--color-muted)}
.search-box input{width:100%;border:0;outline:0;background:transparent;padding:.75rem .2rem;font:inherit}
.search-count{white-space:nowrap;color:var(--color-muted);font-size:.9rem}
.product-card{padding:1rem;gap:.45rem;min-width:0}
.product-card__open{width:100%;border:0;background:transparent;padding:0;cursor:pointer}
.product-card__img{aspect-ratio:1/1;object-fit:cover;background:var(--color-bg);transition:transform .2s ease}
.product-card__open:hover .product-card__img{transform:scale(1.02)}
.product-card__brand,.detail-brand{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent-dark);font-weight:700}
.product-card__profile{font-size:.82rem;color:var(--color-muted);min-height:2.5em}
.product-card__price{font-size:.95rem}
.no-results,.loading{text-align:center;padding:2rem;color:var(--color-muted);grid-column:1/-1}
.no-results{display:flex;flex-direction:column;gap:.25rem}

/* Featured carousel */
.featured-slider{position:relative;display:flex;align-items:center;gap:.5rem}
.featured-track{display:flex;overflow:hidden;flex:1;scroll-behavior:smooth;touch-action:pan-y;user-select:none}
.featured-card{min-width:100%;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1rem}
.featured-card__image{border:0;padding:0;background:var(--color-bg);border-radius:var(--radius);overflow:hidden;cursor:pointer}
.featured-card__image img{width:100%;aspect-ratio:1;object-fit:cover}
.featured-card h3{font-size:1.6rem;margin:.2rem 0}
.featured-card p{color:var(--color-muted)}
.slider-btn{width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;font-size:1.7rem;z-index:2}
.slider-btn:hover{border-color:var(--color-accent)}

/* Product detail modal */
.product-modal{max-width:860px}
.product-detail{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1fr);gap:2rem;align-items:start}
.detail-image{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);background:var(--color-bg)}
.detail-copy h3{font-size:2rem;margin:.2rem 0}
.detail-profile{color:var(--color-muted)}
.field-label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
#detail-size{width:100%;padding:.7rem .8rem;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);font:inherit}
.detail-price-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0;font-size:1.15rem}
.detail-price-row .qty-stepper{display:flex;align-items:center}

/* Cart */
.cart-item img{width:52px;height:52px;object-fit:cover;border-radius:8px;background:var(--color-bg)}
.cart-item__info{min-width:0}.cart-item__info strong{font-size:.86rem}.cart-item__info span{font-size:.76rem}
#checkout-form textarea{resize:vertical}
.form-row input,.form-row textarea{padding:.7rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius);font:inherit;background:var(--color-bg)}
code{font-size:.8em}

@media(max-width:767px){
 .catalog-toolbar{align-items:stretch;flex-direction:column}.search-count{text-align:right}
 .featured-card{grid-template-columns:1fr}.featured-card__image img{max-height:320px}
 .product-detail{grid-template-columns:1fr;gap:1rem}.detail-copy h3{font-size:1.7rem}
}
@media(min-width:768px){
 .products-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
 .products-grid{grid-template-columns:repeat(4,1fr)}
}
.form-hint { font-size: .78rem; opacity: .7; margin-top: .1rem; }
.form-row select { padding: .7rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; background: var(--color-bg); }

/* Ocultar el comprobante SINPE mientras no se haya seleccionado SINPE */
#sinpe-proof-row[hidden] { display: none !important; }

/* --- Pestaña lateral moderna para categorías --- */
.category-tab{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:45;
  display:flex;align-items:center;gap:.42rem;
  padding:.72rem .62rem .72rem .48rem;
  border:1px solid var(--color-border);border-left:0;
  border-radius:0 14px 14px 0;
  background:rgba(255,255,255,.96);color:var(--color-dark);
  box-shadow:4px 8px 22px rgba(0,0,0,.12);
  cursor:pointer;font-weight:800;white-space:nowrap;
  writing-mode:vertical-rl;text-orientation:mixed;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.category-tab:hover{box-shadow:6px 10px 26px rgba(0,0,0,.18);background:var(--color-surface)}
.category-tab:active{transform:translateY(-50%) translateX(2px)}
.category-tab__grip{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;writing-mode:horizontal-tb}
.category-tab__grip i{display:block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
.category-list{padding:1rem 1rem 1.5rem;overflow-y:auto;flex:1}
.category-item{width:100%;display:flex;align-items:center;gap:.75rem;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--color-border);padding:1rem .5rem;cursor:pointer;color:var(--color-text);border-radius:10px}
.category-item:hover,.category-item.is-active{background:var(--color-bg)}
.category-item.is-active{box-shadow:inset 3px 0 0 var(--color-accent)}
.category-item__icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#f2ede6;color:var(--color-accent-dark);font-size:1.1rem;flex:0 0 34px}
.category-item__copy{display:flex;flex-direction:column;flex:1;min-width:0}
.category-item__copy strong{font-size:.9rem}
.category-item__copy small{font-size:.74rem;color:var(--color-muted);margin-top:.1rem}
.category-item__count{font-size:.75rem;color:var(--color-muted);font-weight:700}
.overlay--left{z-index:50}
.drawer--left{left:0;right:auto;transform:translateX(-100%);box-shadow:8px 0 24px rgba(0,0,0,.15)}
.drawer--left.is-open{transform:translateX(0)}
.product-card__badges{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;width:100%}
.category-chip,.size-chip{display:inline-flex;align-items:center;border-radius:999px;padding:.18rem .5rem;font-size:.66rem;font-weight:700}
.category-chip{background:#f3eee8;color:var(--color-accent-dark)}
.size-chip{background:#f5f5f5;color:#555}
.detail-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1rem 0}
.detail-meta-grid>div{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:.75rem}
.detail-meta-grid .field-label{margin-bottom:.15rem;color:var(--color-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.size-label{display:block;font-size:1rem;color:var(--color-dark)}
@media(max-width:767px){
 .category-tab{font-size:.76rem;padding:.62rem .5rem .62rem .4rem;border-radius:0 12px 12px 0}
 .detail-meta-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:768px){.navbar__menu{order:1}.cart-fab{order:3}}

/* ============================================================
   Lady Style — acentos modernos
   Mantiene el diseño actual y añade color solo en puntos clave.
   ============================================================ */
.navbar__brand span {
  color: var(--color-dark);
  letter-spacing: -.02em;
}
.navbar__brand span::first-letter { color: var(--color-accent-dark); }
.navbar__menu a { transition: color .18s ease; }
.navbar__menu a:hover { color: var(--color-accent); }

.hero__actions .btn--ghost { background: rgba(255,255,255,.7); }

.section-heading h2 {
  position: relative;
  display: inline-block;
}
.section-heading h2::after {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  margin: .45rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
}

.search-box:focus-within {
  border-color: #d98bc2;
  box-shadow: 0 0 0 4px rgba(198,45,143,.09), var(--shadow);
}
.search-box span { color: var(--color-accent); }

.featured-card {
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, #fff 72%, #fdf0fa 100%);
}
.featured-card__image { background: var(--color-accent-soft); }
.slider-btn:hover { color: var(--color-accent); border-color: #d98bc2; background: var(--color-accent-soft); }

.product-card__img { background: linear-gradient(145deg, #fff, #f8eef8); }
.product-card__brand,.detail-brand { color: var(--color-accent-dark); }
.category-chip { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.size-chip { background: var(--color-purple-soft); color: #59427d; }

.category-tab {
  background: linear-gradient(180deg, #fff, #fbecf8);
  color: var(--color-accent-dark);
  border-color: #e6c8e0;
  box-shadow: 4px 8px 22px rgba(123,35,125,.16);
}
.category-tab:hover { background: #fff; color: var(--color-accent); box-shadow: 6px 10px 28px rgba(123,35,125,.22); }
.category-item:hover { background: #fdf3fb; }
.category-item.is-active { background: linear-gradient(90deg, #f9e8f5, #fff); box-shadow: inset 3px 0 0 var(--color-accent); }
.category-item__icon { background: var(--color-purple-soft); color: var(--color-accent-dark); }

.drawer__header { background: linear-gradient(90deg, #fff, #fdf0fa); }
.cart-item { border-color: #eee3f1; }
.cart-item__qty button:hover, .qty-btn:hover { border-color: var(--color-accent); color: var(--color-accent-dark); background: var(--color-accent-soft); }

.detail-meta-grid>div { background: linear-gradient(135deg, #fff, #fbf1fa); }
.detail-price-row strong:first-child { color: var(--color-accent-dark); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none;
  border-color: #d98bc2;
  box-shadow: 0 0 0 3px rgba(198,45,143,.08);
}

.footer {
  background: linear-gradient(180deg, transparent, #f7edf8);
}
.footer p:first-child { color: var(--color-accent-dark); font-weight: 800; }

/* Pequeños detalles de vida visual sin saturar la página. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}
.hero::before { left: -70px; top: 25px; background: rgba(198,45,143,.09); }
.hero::after { right: -70px; bottom: 20px; background: rgba(123,35,125,.08); }
.hero > * { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .navbar__brand { gap: .45rem; font-size: 1.12rem; }
  .navbar__logo { width: 38px; height: 38px; }
  .cart-fab { padding: .5rem .8rem; }
}