/* ============================================================
   Ojitos Adhesivos 3D — estilos de marca (WooCommerce + utilidades)
   Tokens de color/tipografía en theme.json.
   ============================================================ */

:root {
  --oj-shadow-card: 0 6px 18px rgba(90, 52, 34, .07);
  --oj-shadow-card-hover: 0 18px 36px rgba(90, 52, 34, .13);
  --oj-shadow-cta: 0 10px 24px rgba(229, 0, 126, .28);
  --oj-border: #EFE2D0;
}

/* ---------- Cabecera fija translúcida ---------- */
.oj-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 248, 239, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--oj-border);
}
.oj-wordmark { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1; }
.oj-wordmark .oj-w1 { color: var(--wp--preset--color--magenta); }
.oj-wordmark .oj-w2 { color: var(--wp--preset--color--teal); }
.oj-header .wp-block-navigation a { font-family: "Fredoka", sans-serif; }
.oj-header .wp-block-navigation .wp-block-navigation-item a:hover { color: var(--wp--preset--color--magenta); }

/* ---------- Barra de anuncio ---------- */
.oj-announce { background: var(--wp--preset--color--magenta); color: #fff; font-family: "Fredoka", sans-serif; font-weight: 500; }
.oj-announce p { margin: 0; }

/* ---------- Botones de marca (pastilla) ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.wc-block-components-button, .wp-block-button__link {
  border-radius: 999px !important; font-family: "Fredoka", sans-serif; font-weight: 600;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .wc-block-components-button.contained {
  background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--blanco); box-shadow: var(--oj-shadow-cta);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--wp--preset--color--magenta-deep); }

/* ---------- Breadcrumb ---------- */
.woocommerce-breadcrumb {
  font-family: "Fredoka", sans-serif; font-size: .9rem; color: var(--wp--preset--color--cafe);
  margin-bottom: 8px;
}
.woocommerce-breadcrumb a { color: var(--wp--preset--color--cafe); }
.woocommerce-breadcrumb a:hover { color: var(--wp--preset--color--magenta); }

/* ---------- Barra de orden / resultados del catálogo ---------- */
.woocommerce-result-count { color: var(--wp--preset--color--cafe); font-family: "Fredoka", sans-serif; }
.woocommerce-ordering select {
  border-radius: 999px; border: 1px solid var(--oj-border); padding: 10px 16px;
  background: var(--wp--preset--color--crema-3); font-family: "Nunito", sans-serif;
}

/* ---------- Grid de catálogo (3 col / 2 col móvil) ---------- */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none; }

/* ---------- Tarjeta de producto ---------- */
.woocommerce ul.products li.product, .wc-block-grid__product {
  position: relative; background: var(--wp--preset--color--crema-3); border-radius: 22px;
  padding: 14px; box-shadow: var(--oj-shadow-card);
  transition: transform .18s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-5px); box-shadow: var(--oj-shadow-card-hover); }
.woocommerce ul.products li.product img { border-radius: 16px; margin-bottom: 12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Fredoka", sans-serif; font-size: 1.05rem; color: var(--wp--preset--color--burgundy); padding: 0;
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price, .woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--wp--preset--color--magenta) !important; font-family: "Fredoka", sans-serif; font-weight: 600;
}
.woocommerce ul.products li.product .price del { color: var(--wp--preset--color--gris); opacity: .7; }

/* ---------- Badge de oferta ---------- */
.woocommerce span.onsale {
  background: var(--wp--preset--color--magenta); color: #fff; border-radius: 999px;
  font-family: "Fredoka", sans-serif; font-weight: 600; min-height: auto; min-width: auto;
  padding: 6px 14px; top: 18px; left: 18px; margin: 0; line-height: 1;
}

/* ---------- Producto individual ---------- */
.woocommerce div.product .product_title { font-family: "Fredoka", sans-serif; color: var(--wp--preset--color--burgundy); }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 22px; }
.woocommerce div.product form.cart .quantity input { border-radius: 12px; border: 1px solid var(--oj-border); }
.woocommerce .star-rating span { color: var(--wp--preset--color--magenta); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--wp--preset--color--crema-2); border-radius: 999px; border: none; margin-right: 8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--wp--preset--color--magenta); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }

/* ---------- Carrito / Checkout (bloques) ---------- */
.wc-block-cart__totals-title, .wc-block-components-totals-item__label { font-family: "Fredoka", sans-serif; }
.wc-block-components-order-summary, .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--wp--preset--color--crema-3); border-radius: 20px; padding: 18px; border: 1px solid var(--oj-border);
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.wc-block-components-text-input input, .wc-block-components-text-input input[type=text] {
  border-radius: 12px; border: 1px solid var(--oj-border);
}

/* ---------- Mi cuenta ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-radius: 999px; margin-bottom: 8px; background: var(--wp--preset--color--crema-3);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--wp--preset--color--magenta); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 18px; font-family: "Fredoka", sans-serif; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #fff; }

/* ============================================================
   Utilidades de portada / patrones
   ============================================================ */

/* Pastilla decorativa */
.oj-pill { display: inline-block; width: auto; }

/* Hero: blob rosa detrás de la mascota */
.oj-hero .wp-block-column:last-child { position: relative; }
.oj-hero .wp-block-column:last-child::before {
  content: ""; position: absolute; inset: -6% -4% -10% -4%; z-index: 0;
  background: radial-gradient(circle at 50% 45%, rgba(229, 0, 126, .16), rgba(229, 0, 126, 0) 65%);
  border-radius: 50%;
}
.oj-hero .wp-block-column:last-child figure { position: relative; z-index: 1; }

/* Badges de confianza */
.oj-trust .wp-block-column {
  background: var(--wp--preset--color--crema-3); border-radius: 16px; padding: 18px 14px; text-align: center;
}
.oj-trust p { margin: 0; }

/* Tarjetas de categoría */
.oj-cats .wp-block-column {
  align-self: stretch; border-radius: 20px; overflow: hidden; background: var(--wp--preset--color--crema-3);
  box-shadow: var(--oj-shadow-card); transition: transform .18s ease, box-shadow .2s ease; padding-bottom: 14px;
}
.oj-cats .wp-block-column:hover { transform: translateY(-4px); box-shadow: var(--oj-shadow-card-hover); }
.oj-cats figure { margin: 0 0 12px; }
.oj-cats img { margin: 0; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* Tarjetas de testimonio */
.oj-tests .wp-block-column {
  background: var(--wp--preset--color--crema-3); border-radius: 20px; padding: 26px 22px;
  box-shadow: var(--oj-shadow-card);
}

/* ---------- Responsive (corte único 820px) ---------- */
@media (max-width: 820px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .oj-wordmark { font-size: 1.3rem; }
}