/* ============================================================
   Nexora / Velora — capa puente WordPress + WooCommerce
   Traduce el marcado que genera WordPress al lenguaje visual
   del mockup Velora Desktop. Se encola DESPUÉS de velora.css.
   ============================================================ */

/* ── 0. Anclas de sección ────────────────────────────────────
   Cada sección del Home se envuelve en <div id="nx-{id}" class="nx-section-anchor">
   para que el botón "Ver" del admin pueda enlazar directo a ella.
   display:contents hace que el div no ocupe espacio ni rompa grids
   (faq-contact es un grid de 2 columnas; sin esto, el wrapper
   convertiría cada celda en un div y se rompería el layout). */
.nx-section-anchor { display: contents; }

/* ── 1. Barra de administración ───────────────────────────── */
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}
#wpadminbar { background: #111 !important; }

/* ── 2. Utilidades ────────────────────────────────────────── */
.nx-hidden { display: none !important; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px; top: 12px; background: var(--accent); color: #000;
  padding: 8px 14px; border-radius: 8px; z-index: 999;
}
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── 3. Piezas que el mockup generaba por JavaScript ──────── */
.gal-img { flex: 0 0 100%; height: 100%; background-size: cover; background-position: center; background-color: var(--card); }
.sr-price { font-size: 12.5px; font-weight: 700; flex: none; }
.sr-empty { font-size: 12.5px; color: var(--text-2); padding: 14px 0; text-align: center; }
.is-loading { opacity: .55; pointer-events: none; }
.ck-field.err input, .form-row.err input.input-text { border-color: var(--red); }

/* La barra lateral de la tienda: categorías con contador */
.sidebar-cat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
  color: var(--text-2); margin-bottom: 4px;
}
.sidebar-cat:hover { background: var(--card); color: #fff; }
.sidebar-cat.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar-cat span { font-size: 11px; color: var(--text-3); }
.sidebar-cat.active span { color: var(--accent); }

/* ── 4. Contenido editorial (páginas y entradas) ──────────── */
.entry { max-width: 780px; margin: 0 auto; padding: 10px 0 60px; }
.entry-head { padding: 6px 0 22px; }
.entry-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.entry-title { font-family: 'Playfair Display', serif; font-size: 44px; line-height: 1.08; letter-spacing: -1px; margin-bottom: 12px; }
.entry-meta { font-size: 12.5px; color: var(--text-3); display: flex; gap: 10px; align-items: center; }
.entry-cover { border-radius: 20px; overflow: hidden; margin-bottom: 26px; background: var(--card); }
.entry-cover img { width: 100%; height: auto; display: block; }

.entry-content { font-size: 15.5px; line-height: 1.8; color: #cfcfcf; }
.entry-content > * + * { margin-top: 16px; }
.entry-content h2 { font-family: 'Playfair Display', serif; font-size: 28px; color: #fff; margin-top: 34px; letter-spacing: -.4px; }
.entry-content h3 { font-size: 18px; font-weight: 700; color: #fff; margin-top: 26px; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 22px; }
.entry-content li + li { margin-top: 8px; }
.entry-content img { border-radius: 14px; max-width: 100%; height: auto; }
.entry-content blockquote { border-left: 2px solid var(--accent); padding: 4px 0 4px 18px; color: #e6e6e6; font-style: italic; }
.entry-content code { background: var(--card-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 13px; }
.entry-content pre { background: var(--card-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; overflow-x: auto; font-size: 13px; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entry-content th, .entry-content td { border-bottom: 1px solid var(--border); padding: 10px 6px; text-align: left; }
.entry-content th { color: var(--text-2); font-weight: 600; }

@media (max-width: 768px) {
  .entry-title { font-size: 30px; }
  .entry-content { font-size: 14.5px; }
}

/* ── 5. Listados del blog ─────────────────────────────────── */
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 40px; }
@media (max-width: 1024px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-list { grid-template-columns: 1fr; } }

.post-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: block; }
.post-card:hover { border-color: var(--accent); }
.post-card .pc-img { display: block; height: 200px; background: var(--card-2) center/cover; }
.post-card .pc-body { display: block; padding: 18px 20px 20px; }
.post-card .pc-cat { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.post-card h3 { font-size: 17px; font-weight: 700; margin: 8px 0; line-height: 1.3; color: #fff; }
.post-card p { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.post-card .pc-meta { display: block; margin-top: 12px; font-size: 11.5px; color: var(--text-3); }

.pagination { display: flex; gap: 6px; justify-content: center; padding: 10px 0 50px; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--border); font-size: 13px; color: var(--text-2); padding: 0 12px;
}
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; }

/* ── 6. WooCommerce: avisos ───────────────────────────────── */
.woocommerce-notices-wrapper { margin-bottom: 16px; }

/* El aviso .woocommerce-message es un <ul> con un <li> que contiene
   el texto del mensaje Y el botón inline. Forzamos el <li> a bloque
   y el botón .button dentro a su propia línea. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none; background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 12px;
  padding: 14px 16px; font-size: 13.5px; color: #ddd; margin-bottom: 12px;
  display: block;
}
.woocommerce-error { border-left-color: var(--red); }
.woocommerce-message > li,
.woocommerce-info > li,
.woocommerce-error > li { display: block; }
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) { color: var(--accent); font-weight: 600; }

/* El botón "Ver carrito" / "Finalizar compra" que WooCommerce mete
   inline dentro del <li> del aviso. Lo hacemos bloque para que vaya
   en su propia línea, debajo del mensaje — sin desbordarse ni montarse
   encima del texto. Tamaño compacto para no romper el aviso. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward,
.woocommerce-message .restore-item,
.woocommerce-info .restore-item,
.woocommerce-error .restore-item {
  display: inline-block !important;
  margin-top: 10px !important;
  margin-left: 0 !important;
  background: var(--accent) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 9px 20px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .2s, transform .15s !important;
  white-space: nowrap;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
  background: #e0bd45 !important;
  color: #000 !important;
  transform: translateY(-1px);
}

/* En móvil: botón ancho completo, centrado. */
@media (max-width: 480px) {
  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    display: block !important;
    width: 100%;
    text-align: center;
    margin-top: 12px !important;
  }
}

/* ── 7. WooCommerce: variaciones y cantidad ───────────────── */
.woocommerce-variation-price { margin-bottom: 12px; }
.variations { width: 100%; margin-bottom: 8px; }
.variations th { text-align: left; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-3); padding: 10px 0 4px; }
.variations td { padding-bottom: 10px; }
.variations select, .nx-select {
  width: 100%; background: var(--card-2); border: 1px solid var(--border); color: #fff;
  border-radius: 12px; padding: 13px 15px; font-size: 14px; appearance: none;
}
.variations select:focus, .nx-select:focus { outline: none; border-color: var(--accent); }
.reset_variations { font-size: 12px; color: var(--text-3); display: inline-block; margin-top: 4px; }

.quantity input[type=number] {
  width: 54px; background: transparent; border: none; color: #fff;
  text-align: center; font-size: 15px; font-weight: 700; -moz-appearance: textfield;
}
.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* El formulario nativo de compra se viste como .buy-row del mockup */
form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 12px; }
form.cart .quantity {
  display: flex; align-items: center; background: var(--card-2);
  border: 1px solid var(--border); border-radius: 30px; padding: 4px;
}
form.cart button[type=submit] {
  flex: 1; min-width: 200px; background: var(--accent); color: #000; border: none;
  border-radius: 30px; padding: 16px 24px; font-size: 14.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
form.cart button[type=submit]:hover { background: #e0bd45; }
form.variations_form { display: block; }
form.variations_form .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── 8. WooCommerce: formularios ──────────────────────────── */
.woocommerce form .form-row { margin-bottom: 12px; }
.woocommerce form .form-row label {
  display: block; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px;
}
.woocommerce form .form-row .required { color: var(--accent); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  width: 100%; background: var(--card-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 15px; font-size: 14px; color: #fff;
  height: auto; line-height: 1.4; font-family: inherit;
}
.woocommerce form .form-row input.input-text::placeholder { color: var(--text-3); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { outline: none; border-color: var(--accent); background: #202020; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--red); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; line-height: 1.4; padding: 0; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 14px; right: 10px; }
.select2-dropdown { background: var(--card-2); border-color: var(--border); color: #fff; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent); color: #000; }

.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 48.5%; float: left; }
.woocommerce form .form-row-last { float: right; }
.woocommerce form .form-row::after { content: ''; display: table; clear: both; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3, .woocommerce-shipping-fields h3 {
  font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text-3); margin: 22px 0 12px; font-weight: 600;
}
.woocommerce form .form-row .input-checkbox { accent-color: var(--accent); margin-right: 6px; }

/* ── 9. WooCommerce: botones ──────────────────────────────── */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--accent); color: #000; border: none; border-radius: 30px;
  padding: 14px 24px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: #e0bd45; color: #000; }
.woocommerce .button.disabled, .woocommerce button.button:disabled { opacity: .45; cursor: not-allowed; }

/* ── 10. WooCommerce: tablas y totales ────────────────────── */
.woocommerce table.shop_table { border: none; width: 100%; font-size: 14px; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
  border-top: none; border-bottom: 1px solid var(--border); padding: 13px 6px; color: #ddd;
}
.woocommerce table.shop_table th { color: var(--text-3); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; }
.woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { font-weight: 700; color: #fff; }
.woocommerce .cart_totals h2, #order_review_heading,
.woocommerce-order-details__title, .woocommerce-column__title {
  font-size: 16px; font-weight: 700; margin: 20px 0 14px; color: #fff;
}

/* Métodos de envío dentro del resumen */
.nx-shipping ul, ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.nx-shipping li, ul#shipping_method li {
  background: var(--card-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 8px; font-size: 13.5px; color: #ddd;
}
.nx-shipping li label, ul#shipping_method li label { display: inline; font-size: 13.5px; color: #fff; }
.nx-shipping input[type=radio], ul#shipping_method input[type=radio] { accent-color: var(--accent); margin-right: 8px; }
.woocommerce-shipping-destination { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.shipping-calculator-button { color: var(--accent); font-size: 12px; }

/* ── 11. WooCommerce: pasarelas ───────────────────────────── */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: none; padding: 0; margin: 0 0 14px; list-style: none; }
.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 8px;
}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio] { accent-color: var(--accent); margin-right: 8px; }
.woocommerce-checkout #payment ul.payment_methods li label { font-size: 14px; font-weight: 600; color: #fff; display: inline; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--card-2); border-radius: 12px; color: var(--text-2);
  font-size: 13px; margin-top: 10px; padding: 13px 15px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row.place-order { padding: 0; margin-top: 8px; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: 12px; color: var(--text-3); }
#place_order {
  width: 100%; background: var(--accent); color: #000; border: none; border-radius: 30px;
  padding: 17px 24px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.woocommerce-terms-and-conditions-wrapper { font-size: 12.5px; color: var(--text-2); margin-bottom: 12px; }

/* ── 12. Bloques de WooCommerce, por si se reactivan ──────── */
.wc-block-components-notice-banner { background: var(--card); border-color: var(--border); color: #ddd; border-radius: 12px; }
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { color: #ddd; }

/* ── 13. Cuenta de usuario ────────────────────────────────── */
.woocommerce-MyAccount-navigation ul { list-style: none; display: flex; gap: 8px; overflow-x: auto; padding: 0 0 16px; }
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
.woocommerce-MyAccount-navigation li a {
  white-space: nowrap; font-size: 13px; padding: 10px 16px; border-radius: 30px;
  border: 1px solid var(--border); color: var(--text-2); display: block;
}
.woocommerce-MyAccount-navigation li.is-active a { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; }
.woocommerce-MyAccount-content { font-size: 14px; color: #ddd; }

/* ── 14. Reseñas de producto ────────────────────────────────
   El tema desencola la hoja de estilos nativa de WooCommerce, así
   que el selector de estrellas (.stars) y el listado de reseñas
   tienen que estar vestidos por completo desde aquí. */
#reviews { max-width: 760px; margin: 0 auto; }
#reviews .commentlist { list-style: none; padding: 0; margin: 0; }

#reviews .commentlist > li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 14px;
  transition: border-color .2s;
}
#reviews .commentlist > li:hover { border-color: rgba(212,175,55,.35); }
#reviews .comment_container { display: flex; gap: 16px; align-items: flex-start; }
#reviews .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); flex: none; background: var(--card-2);
}
#reviews .comment-text { flex: 1; min-width: 0; }
#reviews .comment-text .meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
#reviews .comment-text .meta strong { font-size: 14.5px; color: #fff; font-weight: 600; }
#reviews .comment-text .meta time { font-size: 12px; color: var(--text-3); }
#reviews .comment-text .description {
  font-size: 13.5px; color: #cfcfcf; line-height: 1.65; margin-top: 4px;
}

/* Valoración media que pinta WooCommerce (.star-rating). */
#reviews .star-rating,
.product .star-rating,
.products .star-rating {
  position: relative; display: inline-block;
  width: 5.6em; height: 1em; line-height: 1; overflow: hidden;
  font-family: 'Times New Roman', serif; font-size: 14px;
  color: var(--text-3);
}
#reviews .star-rating::before,
.product .star-rating::before,
.products .star-rating::before { content: '★★★★★'; }
#reviews .star-rating span,
.product .star-rating span,
.products .star-rating span {
  position: absolute; top: 0; left: 0; width: 0;
  color: var(--accent); overflow: hidden;
  display: block;
}
#reviews .star-rating span::before,
.product .star-rating span::before,
.products .star-rating span::before { content: '★★★★★'; }

/* Selector de estrellas del formulario (.stars con <a>).
   El JS del tema (initReviewStars) limpia el texto "N de 5 estrellas"
   y sincroniza el <select> oculto. Aquí se pintan las ★ con hover. */
#review_form .comment-form-rating { margin-bottom: 18px; }
#review_form .comment-form-rating label {
  display: block;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
#review_form .comment-form-rating label .required { color: var(--accent); }
p.stars {
  display: inline-flex;
  gap: 4px; margin: 0 0 14px !important; padding: 0;
}
p.stars a {
  position: relative; display: inline-block;
  width: 28px; height: 28px;
  font-size: 0; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-2);
  cursor: pointer; transition: all .15s var(--ease);
}
p.stars a::before {
  content: '★'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  font-family: 'Times New Roman', serif;
  color: var(--text-3);
  transition: color .15s;
}
p.stars a:hover { border-color: var(--accent); }
p.stars a:hover::before,
p.stars a.hover::before,
p.stars a.selected::before { color: var(--accent); }
p.stars a:hover { background: var(--accent-soft); }

/* El <select> nativo que Woo mantiene oculto: queda fuera de la vista. */
#rating { display: none !important; }

/* Layout general del formulario de reseña. */
#review_form { margin-top: 28px; }
#review_form .comment-reply-title,
#reviews #reply-title {
  display: block; font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 600; color: #fff;
  margin-bottom: 6px;
}
#review_form .comment-notes {
  font-size: 12.5px; color: var(--text-3); margin-bottom: 18px;
}
#review_form .comment-form-author,
#review_form .comment-form-email {
  width: 100%; margin-bottom: 12px;
}
#review_form input[type=text],
#review_form input[type=email],
#review_form textarea {
  width: 100%; background: var(--card-2);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; color: #fff; font-size: 14px;
  font-family: inherit; transition: border-color .2s;
}
#review_form input[type=text]:focus,
#review_form input[type=email]:focus,
#review_form textarea:focus {
  outline: none; border-color: var(--accent); background: #202020;
}
#review_form textarea { min-height: 130px; resize: vertical; }
#review_form .comment-form-comment label { display: none; }
#review_form .form-submit { margin-top: 14px; }
#review_form .submit {
  background: var(--accent); color: #000;
  border: none; border-radius: 30px;
  padding: 13px 26px; font-size: 13.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: transform .15s, background .2s;
}
#review_form .submit:hover { background: #e0bd45; transform: translateY(-2px); }

/* Aviso de "no hay valoraciones todavía". */
#reviews .noreviews,
#reviews .commentlist:empty + p {
  background: var(--card); border: 1px dashed var(--border);
  border-radius: 14px; padding: 22px 24px;
  color: var(--text-2); font-size: 14px; text-align: center;
  margin-bottom: 22px;
}

@media (max-width: 768px) {
  #reviews .commentlist > li { padding: 16px 16px; }
  p.stars a { width: 38px; height: 38px; }
  p.stars a::before { font-size: 20px; }
}

/* ── 15. Widgets ──────────────────────────────────────────── */
.widget { margin-bottom: 24px; }
.widget-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.widget ul { list-style: none; padding: 0; }
.widget li { padding: 6px 0; font-size: 14px; }
.widget a { color: var(--text-2); }
.widget a:hover { color: var(--accent); }

/* ── 16. Pie: enlaces legales ─────────────────────────────── */
.footer-pay span a { color: var(--text-3); font-size: 11px; }
.footer-pay span a:hover { color: var(--accent); }

/* ── 17. Piezas del mockup que no traían regla propia ─────── */
.shop-main { min-width: 0; }
.fs-price { display: flex; justify-content: space-between; align-items: center; }

/* ── 18. Paneles: seguro contra el bug de "siempre visibles" ──
   El diseño Desktop ancla los paneles al viewport, así que
   translateX(102%) ya los saca de pantalla en cualquier ancho.
   Aun así se añade visibility: un panel cerrado no debe ser
   clicable ni existir para un lector de pantalla. */
.drawer,
.modal-wrap,
.lightbox {
  visibility: hidden;
  transition:
    transform .45s var(--ease),
    opacity .25s ease,
    visibility 0s linear .45s;
}
.drawer.open,
.modal-wrap.open,
.lightbox.open {
  visibility: visible;
  transition:
    transform .45s var(--ease),
    opacity .25s ease,
    visibility 0s linear 0s;
}

/* ── 19. Enlaces que deben comportarse como bloques ───────────
   El mockup usaba <div> con onclick para las tarjetas. En WordPress
   son <a> de verdad (mejor para SEO y accesibilidad), pero un <a>
   es inline por defecto: ni `width`, ni `height`, ni `aspect-ratio`
   le aplican, así que la tarjeta se aplastaba y el texto se montaba
   encima de la etiqueta. */
a.product-img,
a.cat-card,
a.product-add,
a.post-card,
.post-card .pc-img,
.post-card .pc-body,
a.wl-img,
a.ci-img,
.rv-mini .im,
.sr-item .sr-img {
  display: block;
}

a.product-add {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La tarjeta de categoría necesita altura propia además del aspect-ratio,
   por si algún navegador antiguo lo ignora. */
a.cat-card { min-height: 220px; }
@media (max-width: 768px) { a.cat-card { min-height: 190px; } }

/* ── 20. Aviso de demostración (solo lo ve el administrador) ── */
.nx-demo-banner {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
}
.nx-demo-banner svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.6; flex: none; margin-top: 2px; }
.nx-demo-banner b { display: block; font-size: 14px; color: #fff; margin-bottom: 3px; }
.nx-demo-banner p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 0; }
.nx-demo-cta {
  flex: none; align-self: center; background: var(--accent); color: #000;
  border-radius: 30px; padding: 10px 18px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
@media (max-width: 768px) {
  .nx-demo-banner { flex-wrap: wrap; }
  .nx-demo-cta { width: 100%; text-align: center; }
}

/* ── 21. Checkout: los campos nativos con el aspecto del diseño ──
   WooCommerce genera .form-row > input.input-text. El diseño usa
   .ck-field > input. En vez de reescribir el checkout entero —lo que
   rompería pasarelas y plugins de envío— se le da a lo nativo el
   mismo aspecto. */
.woocommerce form .form-row {
  margin-bottom: 12px;
}
.woocommerce-checkout .form-row label {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 8px;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  background: #111;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  font-size: 13.5px;
  transition: border-color .2s;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus { border-color: var(--accent); }

/* Dos columnas como el .frow del diseño */
@media (min-width: 600px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { width: 49%; }
}
@media (max-width: 599px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; float: none; }
}

/* Los métodos de pago con el aspecto de las tarjetas .opt del diseño */
.woocommerce-checkout #payment ul.payment_methods li {
  transition: border-color .2s, background .2s;
}
.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--accent); }
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]:checked + label { color: var(--accent); }

/* Precio tachado dentro de la línea del carrito */
.ci-price s { color: var(--text-3); font-weight: 400; margin-left: 6px; font-size: 12px; }

/* El input real de cantidad vive dentro del control del diseño */
.ci-qty input[type=number] {
  width: 34px; background: transparent; border: none; color: #fff;
  text-align: center; font-size: 13.5px; font-weight: 600;
  -moz-appearance: textfield;
}
.ci-qty input[type=number]::-webkit-outer-spin-button,
.ci-qty input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* El contador visible de la ficha y el input oculto que lo respalda */
.qty .qv { min-width: 26px; text-align: center; font-size: 14px; font-weight: 700; }

/* ── 22. Botón principal del carrito (.cta-checkout) ──────────
   El reset `a { color: inherit }` del mockup, combinado con la cadena
   de herencia .cart-side → .summary → body(color:#fff), hacía que en
   algunos hosts el `color:#111` de velora.css perdiera la carrera de
   especificidad frente a selectores que apuntan al <a> dentro de la
   barra lateral. Resultado: texto dorado sobre fondo dorado = invisible.

   Aquí se blindan TODAS las propiedades que importan con !important,
   porque esta clase es la CTA principal del carrito y no puede fallar.

   También se corrige el desbordamiento: el <a> debe respetar el ancho
   del .summary, no salirse por la derecha. La clave es display:flex
   con width:100% + box-sizing:border-box dentro de un padre con
   box-sizing:border-box y overflow:hidden. */
.cta-checkout,
a.cta-checkout,
.cart-side .cta-checkout,
.summary .cta-checkout,
.woocommerce .cta-checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  margin: 16px 0 0 !important;
  padding: 0 22px !important;
  box-sizing: border-box !important;
  background: #D4AF37 !important;
  color: #111 !important;
  stroke: #111 !important;
  fill: none !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background .2s, transform .15s !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap;
  overflow: hidden;
}
.cta-checkout svg,
.cta-checkout svg.ic,
.cta-checkout svg.ic.sm {
  stroke: #111 !important;
  fill: none !important;
  color: #111 !important;
  flex: none;
  width: 16px; height: 16px;
}
.cta-checkout span,
.cta-checkout b { color: #111 !important; }
.cta-checkout:hover,
a.cta-checkout:hover {
  background: #e0bd45 !important;
  color: #111 !important;
  transform: translateY(-2px);
}

/* El .summary contiene el botón: si el botón desborda por la derecha,
   se corta en vez de romper el layout del padre. Además se asegura
   box-sizing:border-box explícito para que width:100% del hijo respete
   el padding del padre. */
.summary {
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
}
.cart-side { min-width: 0; box-sizing: border-box; }

/* En pantallas muy estrechas, reducir el padding del .summary para
   que el botón tenga más espacio y el texto no se corte. */
@media (max-width: 480px) {
  .summary { padding: 20px 16px; }
  .cta-checkout,
  a.cta-checkout {
    font-size: 13px !important;
    padding: 0 16px !important;
    gap: 8px !important;
  }
}

/* ── 23. Botones nativos de WooCommerce en el carrito ──────────
   WooCommerce también puede renderizar su propio botón "Proceed to
   checkout" (clase .checkout-button) dentro de los totales del carrito
   si alguna extensión lo inyecta. Lo vestimos igual que el CTA del tema
   para que no aparezca un botón "flotante" sin estilo. */
.woocommerce a.checkout-button,
.woocommerce button.checkout-button,
.woocommerce a.button.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  background: var(--accent) !important;
  color: #111 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  margin-top: 16px !important;
  transition: transform .15s, background .2s !important;
  white-space: nowrap;
  box-sizing: border-box;
}
.woocommerce a.checkout-button:hover,
.woocommerce button.checkout-button:hover {
  background: #e0bd45 !important;
  color: #111 !important;
  transform: translateY(-2px);
}
.woocommerce a.checkout-button svg,
.woocommerce button.checkout-button svg {
  stroke: #111 !important;
  fill: none !important;
  width: 16px; height: 16px;
}

/* El wrapper que WooCommerce añade alrededor del botón de checkout
   no debe añadir su propio padding/margin que rompa el layout. */
.wc-proceed-to-checkout,
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout {
  padding: 0 !important;
  margin: 0 !important;
}