/* ============================================================
   Sakura & Co. — Lupa + Carrito (header) — v4 aprobada
   - Lupa simple (sin círculo), rosa #C06C84, antes del carrito.
   - Carrito DENTRO de un círculo suave rosa pálido #FBE4ED,
     icono bolsa outline rosa, badge rosa intenso con número blanco.
   - Vacío: sin flores. Con productos: 4 flores sakura oficiales
     alrededor del círculo (flor-menu.png).
   - Hover: ligero aumento + brillo suave. Al agregar: pétalos de
     la misma flor que caen y desaparecen (sin restos).
   Solo presentación: la lógica del contador es de WooCommerce
   (header-cart.js) y NO se toca.
   ============================================================ */

/* La zona derecha del header: [ lupa ][ carrito ].
   El icono de cuenta de WooCommerce se oculta (no forma parte de la
   estructura aprobada Logo->Menu->Lupa->Carrito). */
.wp-block-woocommerce-customer-account,
.wc-block-customer-account {
  display: none !important;
}

/* --- lupa simple (sin círculo ni borde) --- */
.sc-search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: #C06C84;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent; /* móvil: sin recuadro al tocar */
  transition: transform .35s ease, opacity .35s ease;
}
.sc-search-link:hover { transform: scale(1.08); opacity: .8; }
.sc-search-link svg { width: 20px; height: 20px; }

/* --- panel de búsqueda (se abre al hacer clic en la lupa) ---
   Presentación limpia y proporcionada al header: altura contenida,
   marco rosa sutil arriba y abajo (no se ve "cortado"), campo
   centrado, X con aire. */
.sc-search-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10002;
  background: #FDFBF7;
  border-top: 1.5px solid #FAD0C4;
  border-bottom: 1.5px solid #FAD0C4;
  padding: 10px 28px;
  display: none;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(17,17,17,.08);
}
.sc-search-panel.is-open { display: flex; }
.sc-search-panel .sc-search-icon { color: #C06C84; flex-shrink: 0; }
.sc-search-panel input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1rem;
  color: #111;
  border-bottom: 1.5px solid #FAD0C4;
  /* altura fija + line-height = altura: el texto queda centrado de forma fiable */
  height: 36px;
  line-height: 36px;
  padding: 0 4px;
}
.sc-search-panel input::placeholder { color: #C9A3B8; }
.sc-search-panel button {
  border: none;
  background: none;
  cursor: pointer;
  color: #C06C84;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; /* móvil: sin recuadro al tocar */
}
.sc-search-panel button svg { width: 20px; height: 20px; display: block; }

/* El panel de búsqueda vive fuera del header (document.body): cobertura
   global propia — sin recuadro al tocar/clic en el campo, la X ni la lupa;
   foco de teclado con anillo rosa discreto. */
.sc-search-panel * {
  -webkit-tap-highlight-color: transparent !important;
}
/* El campo de texto NO muestra anillo al enfocarse (ni clic ni teclado):
   su borde rosa inferior ya indica dónde está el campo; un anillo extra
   se percibe como recuadro. Los botones y enlaces sí conservan el anillo
   rosa discreto SOLO para foco de teclado. */
.sc-search-panel input:focus {
  outline: none !important;
}
.sc-search-panel button:focus:not(:focus-visible),
.sc-search-panel a:focus:not(:focus-visible) {
  outline: none !important;
}
.sc-search-panel button:focus-visible,
.sc-search-panel a:focus-visible {
  outline: 2px solid rgba(192, 108, 132, .55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- carrito: círculo suave + icono + badge (v4 aprobada) --- */
.sc-cart-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FBE4ED;
  color: #C06C84;
  margin-left: 4px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* móvil: sin recuadro al tocar */
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
/* HOVER: ligero aumento + brillo suave (nada exagerado) */
.sc-cart-wrap:hover {
  transform: scale(1.08);
  box-shadow: 0 0 10px 2px rgba(192,108,132,.35);
  background: #F9DCE7;
}
.sc-cart-wrap:active { transform: scale(.97); }

/* icono bolsa outline rosa */
.sc-cart-basket,
.sc-cart-basket svg {
  width: 24px;
  height: 24px;
  color: #C06C84;
  stroke: #C06C84;
  fill: none;
  z-index: 3;
}

/* badge circular rosa intenso con número blanco */
.sc-cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #D1587B;
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  box-shadow: 0 0 0 2px #FDFBF7;
  z-index: 8;
}

/* flores sakura oficiales alrededor del círculo (solo con productos) */
.sc-cart-flowers {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.sc-cart-flower {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(.2);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.sc-cart-flower img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sc-cart-flower.show { opacity: 1; transform: scale(1); }
/* posiciones alrededor del círculo (misma relación visual aprobada) */
.sc-cart-flower.f1 { margin-left: -17px; margin-top: -13px; }
.sc-cart-flower.f2 { margin-left: 17px;  margin-top: -14px; }
.sc-cart-flower.f3 { margin-left: -19px; margin-top: 13px;  }
.sc-cart-flower.f4 { margin-left: 16px;  margin-top: 15px;  }

/* --- pétalos al agregar producto (la misma flor; se eliminan solos) --- */
.sc-cart-petal {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  width: 13px;
  height: 13px;
  animation: sc-cart-petal-fall 1.1s ease-in forwards;
}
.sc-cart-petal img {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes sc-cart-petal-fall {
  0% { opacity: 0; transform: translate(0,0) rotate(0deg) scale(.6); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx,18px), var(--dy,90px)) rotate(var(--rot,40deg)) scale(1); }
}

/* --- móvil: mismo diseño, tamaño ligeramente menor --- */
@media (max-width: 980px) {
  .sc-search-link svg { width: 18px; height: 18px; }
  .sc-cart-wrap { width: 42px; height: 42px; }
  .sc-cart-basket,
  .sc-cart-basket svg { width: 21px; height: 21px; }
}

/* --- móvil: orden aprobado Logo | Lupa+Carrito | Hamburguesa ---
   Solo presentación (flex order): el DOM y la funcionalidad no cambian.
   En desktop el orden es el del bloque (Logo | Menú | Lupa+Carrito). */
@media (max-width: 640px) {
  .wp-block-group.alignwide.is-content-justification-space-between
    > nav.wp-block-navigation {
    order: 3;
  }
  .wp-block-group.alignwide.is-content-justification-space-between
    > .wp-block-group.is-content-justification-right {
    order: 2;
  }
}