/* CF UX Mejoras 2.10.3 — presentation only. Colors match the site (navy #14317f, red #d42f20). */
:root { --cfux-navy: #14317f; --cfux-red: #d42f20; --cfux-ok: #0f7a3d; --cfux-okbg: #e8f6ee; --cfux-line: #e5e7eb; --cfux-mute: #6b7280; }

/* 1a. Top trust strip */
.cf-ux-bar { background: var(--cfux-navy); color: #fff; font-size: 12.5px; line-height: 1.35; text-align: center; padding: 7px 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; }
.cf-ux-bar__sep { opacity: .6; }
@media (max-width: 689px) { .cf-ux-bar { font-size: 11.5px; padding: 6px 10px; } }

/* 2. Product page (all sizes) */
.single-product .woocommerce-product-gallery { position: relative; }
.single-product .woocommerce-product-gallery::after { content: "ORIGINAL 100%"; position: absolute; top: 14px; left: 0; z-index: 5; background: #ffd84d; color: #3b2f00; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 4px 9px; border-radius: 0 6px 6px 0; pointer-events: none; }
/* "Más de 10 unidades disponibles" contradicts made-to-order products (audit finding 3) — hidden until the stock API gives a real number. */
.single-product .cf-stock-badge { display: none !important; }
/* Delivery date box becomes the green "when + all included" box of the mockup */
.single-product .hb-tiempo-de-envio { background: var(--cfux-okbg) !important; border-radius: 10px; }
.single-product .hb-tiempo-de-envio::after { content: "Envío y aduanas incluidos. Sin pagos extra al recibir."; display: block; color: var(--cfux-ok); font-size: 12.5px; font-weight: 600; padding: 0 12px 10px; }
/* Savings badge next to the price + commercial line */
.cf-ux-save { display: inline-block; vertical-align: middle; background: #fdecea; color: var(--cfux-red); font-weight: 800; font-size: 12.5px; line-height: 1.2; padding: 3px 8px; border-radius: 5px; margin-left: 6px; }
.cf-ux-claim { margin: 4px 0 6px; font-size: 13px; font-weight: 700; color: var(--cfux-navy); }
.cf-ux-claim.is-market { color: var(--cfux-ok); }
.cf-ux-paymethods { font-size: 12.5px; color: var(--cfux-mute); margin: 4px 0 8px; }

/* 2. Product page — mobile layout, mockup order:
   photo → title → price (+ savings) → claim → transfer price → payment methods → delivery box → add to cart → trust → description → notices → payments.
   blocksy-child markup: .cf-product-wrap > .summary[title, sku, short desc, date, trust items] + .cf-buy-col > .cf-cont-buy-col[badge, price, transfer, form, popup] + .cf-cont-payment-col.
   Wrappers are flattened (display: contents) so all pieces can be reordered in one column. */
@media (max-width: 999px) {
	.single-product .cf-product-wrap { display: flex; flex-direction: column; }
	.single-product .cf-product-wrap > .summary,
	.single-product .cf-product-wrap > .cf-buy-col,
	.single-product .cf-buy-col > .cf-cont-buy-col { display: contents; }
	.single-product .cf-product-wrap > .summary > *,
	.single-product .cf-buy-col > *,
	.single-product .cf-cont-buy-col > * { order: 30; }
	.single-product .cf-product-wrap .product-brand { order: 0; font-size: 13px; letter-spacing: .04em; margin-bottom: 2px; }
	.single-product .cf-product-wrap .product_title { order: 1; font-size: 20px !important; line-height: 1.25 !important; font-weight: 700; margin: 4px 0 8px !important; }
	.single-product .cf-cont-buy-col > .cf-intl-badge { order: 2; align-self: flex-start; margin-bottom: 6px; }
	.single-product .cf-cont-buy-col > .cf-simple-price,
	.single-product .cf-cont-buy-col > .cf-variable-price { order: 3; margin: 0; }
	.single-product .cf-cont-buy-col > .cf-ux-claim { order: 4; }
	.single-product .cf-cont-buy-col > .cf-descuento-transferencia { order: 4; margin: 4px 0 0; padding: 0; border: 0; }
	.single-product .cf-cont-buy-col > .cf-ux-paymethods { order: 4; margin: 2px 0 0; }
	.single-product .cf-product-wrap .hb-tiempo-de-envio { order: 5; margin: 12px 0 4px; }
	.single-product .cf-cont-buy-col > form.cart { order: 6; margin: 8px 0 0; }
	.single-product .cf-cont-buy-col > .cf-ux-trust { order: 7; }
	/* Voltage notice (theme, only Electrohogar / Electrobelleza / Electrobelleza Reacondicionado) stays, right before the description. */
	.single-product .cf-product-wrap .cf-ehv-aviso-voltaje { order: 8; margin: 4px 0 12px; }
	.single-product .cf-product-wrap .woocommerce-product-details__short-description { order: 8; }
	.single-product .cf-product-wrap .cf-trust-items { order: 9; }
	.single-product .cf-buy-col > .cf-cont-payment-col, .single-product .cf-product-wrap .cf-cont-payment-col { order: 10; }
	.single-product .cf-product-wrap .product-sku { order: 11; font-size: 11px; color: var(--cfux-mute); }
	.single-product .cf-descuento-transferencia .cf-dt-precio { font-size: 18px; }
	/* Thumbnails: one swipeable row of small images (owner wants them visible; theme shows 2 rows of big ones). */
	.single-product .flexy-pills { display: block !important; margin-top: 8px; }
	.single-product .flexy-pills ol { display: flex !important; flex-wrap: nowrap !important; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0 4px; margin: 0; grid-template-columns: none !important; }
	.single-product .flexy-pills li { flex: 0 0 62px !important; width: 62px !important; max-width: 62px; scroll-snap-align: start; border-radius: 8px; overflow: hidden; }
	.single-product .flexy-pills li img { width: 62px; height: 62px; object-fit: cover; }
	.single-product .woocommerce-product-gallery { margin-bottom: 12px !important; }
}
.cf-ux-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 16px; }
.cf-ux-trust > div { border: 1px solid var(--cfux-line); border-radius: 8px; padding: 7px 9px; font-size: 12px; line-height: 1.35; }
.cf-ux-trust b { display: block; font-size: 12.5px; }
.cf-ux-trust a { color: var(--cfux-navy); text-decoration: underline; }
/* Desktop: the buy column is narrow, so the trust items go one per row. */
@media (min-width: 1000px) {
	.cf-ux-trust { grid-template-columns: 1fr; gap: 4px; }
	.cf-ux-trust > div { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; padding: 6px 9px; }
	.cf-ux-trust b { display: inline; }
}

/* 2b. Sticky buy bar */
.cf-ux-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--cfux-line); box-shadow: 0 -4px 14px rgba(0,0,0,.08); }
.cf-ux-sticky[hidden] { display: none; }
.cf-ux-sticky__p { font-weight: 800; font-size: 17px; line-height: 1.1; }
.cf-ux-sticky__p del { display: none; }
.cf-ux-sticky__p small { display: block; font-weight: 400; font-size: 11px; color: var(--cfux-mute); }
.cf-ux-sticky__btn { flex: 1; background: var(--cfux-red); color: #fff; border: 0; border-radius: 10px; padding: 13px; font-weight: 700; font-size: 15px; cursor: pointer; }
@media (min-width: 1000px) { .cf-ux-sticky { display: none !important; } }
/* Keep floating WhatsApp buttons above the sticky bar */
body.cf-ux-sticky-on [class*="whatsapp"][style*="fixed"], body.cf-ux-sticky-on .joinchat, body.cf-ux-sticky-on .wa__btn_popup, body.cf-ux-sticky-on .cf-wa-visible { bottom: 84px !important; }

/* 3. Cart / checkout */
.cf-ux-note { margin: 10px 0 0; padding: 9px 11px; border-radius: 8px; background: var(--cfux-okbg); color: var(--cfux-ok); font-size: 13px; font-weight: 600; }
.cf-ux-checkout { margin: 0 0 10px; font-size: 12.5px; color: #374151; text-align: center; }
.cf-ux-cart { margin-top: 2px; }
.cf-ux-sum { font-size: 14px; }
.cf-ux-sum > div { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.cf-ux-sum .inc { color: var(--cfux-ok); font-weight: 700; }
.cf-ux-sum .tot { font-weight: 800; font-size: 18px; border-top: 1px solid var(--cfux-line); margin-top: 6px; padding-top: 10px; }
.cf-ux-sum .trf { font-size: 12.5px; color: var(--cfux-mute); padding-top: 0; }
.cf-ux-sum .trf b { color: #1d2433; }
.cf-ux-pay { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.cf-ux-pay img { height: 26px; width: auto; border: 1px solid var(--cfux-line); border-radius: 5px; background: #fff; padding: 2px 4px; object-fit: contain; }
.cf-ux-wa { font-size: 12.5px; color: var(--cfux-mute); margin: 6px 0 0; }
.cf-ux-wa a { color: var(--cfux-navy); text-decoration: underline; }
/* Native "Estimated total" row is replaced by our Total row (same number, mockup order). */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item { display: none; }
/* Block cart: the price already includes shipping, so the 'calculated at checkout' row only confuses. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-shipping-block { display: none; }
/* Block cart item (audit finding 7): the line total landed on top of the photo (missing grid line "total")
   and the short description repeated the product name. */
.wc-block-cart-items__row .wc-block-cart-item__total { grid-column: 2 / 4 !important; grid-row: 2 !important; text-align: right; font-weight: 700; padding-top: 4px; }
.wc-block-cart-items__row .wc-block-components-product-metadata__description { display: none; }
/* Mockup: one price per item; the line total only matters with quantity > 1 (it is also in the summary). */
@media (max-width: 999px) { .wc-block-cart-items__row:not(:has(.wc-block-components-quantity-selector__input:not([value="1"]))) .wc-block-cart-item__total { display: none; } }
/* 2.10.7 (owner: "sale todo sin estética" with 2+ units): the line total was a 22px navy amount + a second "Ahorra"
   badge. Now a quiet "Total: S/190.00" line; the savings badge already shows next to the unit price. */
@media (max-width: 999px) {
	.wc-block-cart-items__row .wc-block-cart-item__total { padding-top: 2px !important; }
	.wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: flex !important; justify-content: flex-end; align-items: baseline; gap: 4px; }
	.wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper::before { content: "Total:"; font-size: 13px; font-weight: 400; color: var(--cfux-mute); }
	.wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price__value { font-size: 15px !important; font-weight: 700 !important; color: #1d2433 !important; }
	.wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-sale-badge { display: none !important; }
}

/* Price block as in the mockup (owner 2026-11-10):
   line 1: current price + "Ahorras S/X" to its right · line 2: regular price crossed · line 3: "Con transferencia: S/X · Yape, Plin y tarjeta". */
/* Same layout for variable products: the theme rewrites p.price.cf-variable-price on every variation change
   (<del>…</del> <ins>…</ins>, no .amount spans) and cf-ux.js re-adds "Ahorras S/X" after it (2.10.4). */
.cf-cont-buy-col .cf-simple-price p.price,
.cf-cont-buy-col p.price.cf-variable-price { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; }
.cf-cont-buy-col p.price.cf-variable-price { flex-direction: row !important; align-items: center !important; gap: 2px 10px !important; } /* the theme sets column here */
.cf-cont-buy-col .cf-simple-price .sale-price,
.cf-cont-buy-col p.price.cf-variable-price .sale-price { display: contents !important; }
.cf-cont-buy-col .cf-simple-price ins,
.cf-cont-buy-col p.price.cf-variable-price ins { order: 1; text-decoration: none; }
.cf-cont-buy-col .cf-simple-price .cf-ux-save,
.cf-cont-buy-col p.price.cf-variable-price .cf-ux-save { order: 2; margin-left: 0; }
.cf-cont-buy-col .cf-simple-price del,
.cf-cont-buy-col p.price.cf-variable-price del { order: 3; flex-basis: 100%; font-size: 14px; }
/* Keep the theme's jQuery .hide() working (out-of-stock / no-discount variation): never force display on a hidden box. */
.cf-descuento-transferencia:not([style*="none"]) { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: 2px; }
.cf-descuento-transferencia .cf-cont-dt-label { display: contents !important; }
.cf-descuento-transferencia .cf-dt-label { order: 1; font-size: 0 !important; display: inline !important; width: auto !important; flex: 0 0 auto; }
.cf-descuento-transferencia .cf-dt-label::before { content: "Con transferencia:"; font-size: 13.5px; color: #374151; }
.cf-descuento-transferencia .cf-dt-precio-row { order: 2; display: inline !important; width: auto !important; flex: 1 1 auto; margin: 0 !important; }
.cf-descuento-transferencia .cf-dt-precio { font-size: 15px !important; font-weight: 800; color: var(--cfux-ok) !important; }
.cf-descuento-transferencia .cf-transferencia-info-btn { order: 3; flex-basis: 100%; text-align: left; padding: 0; margin-top: 2px; }
.cf-ux-paymethods { display: none; }

/* Cart / checkout header with steps (replaces the grey "Carro de Compras" banner) */
.cf-ux-steps { margin: 4px 0 16px; }
.cf-ux-steps__head { display: flex; align-items: baseline; gap: 10px; }
.cf-ux-steps__head h1 { font-size: 22px; line-height: 1.2; margin: 0; color: #1d2433; }
.cf-ux-steps__count { font-size: 13px; color: var(--cfux-mute); }
.cf-ux-steps__bar { list-style: none; display: flex; margin: 12px 0 8px; padding: 0; }
.cf-ux-steps__bar li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--cfux-mute); text-align: center; }
.cf-ux-steps__bar li::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--cfux-line); z-index: 0; }
.cf-ux-steps__bar li:first-child::before { display: none; }
.cf-ux-steps__bar li span { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--cfux-line); font-weight: 700; font-size: 13px; color: var(--cfux-mute); }
.cf-ux-steps__bar li.is-active { color: var(--cfux-navy); font-weight: 700; }
.cf-ux-steps__bar li.is-active span { background: var(--cfux-navy); border-color: var(--cfux-navy); color: #fff; }
.cf-ux-steps__bar li.is-done { color: var(--cfux-ok); }
.cf-ux-steps__bar li.is-done span { background: var(--cfux-ok); border-color: var(--cfux-ok); color: #fff; }
.cf-ux-steps__bar li.is-done::before, .cf-ux-steps__bar li.is-active::before { background: var(--cfux-navy); }
.cf-ux-steps__safe { margin: 0; font-size: 12px; color: var(--cfux-ok); text-align: center; font-weight: 600; }
.cf-ux-sum .trf { align-items: center; }
.cf-ux-sum .trf .cf-ux-save { margin-left: 8px; white-space: nowrap; }
.cf-ux-sum .trf b { white-space: nowrap; }
.cf-ux-save--trf { margin-left: 8px; font-size: 11.5px; padding: 2px 7px; }
.cf-ux-save--trf[hidden] { display: none; }

/* Login / register — Temu reference: title + protected line, green benefits strip, two columns
   (email form | o | pill social buttons), discreet create-account link, terms line. */
.cf-auth-card.cf-ux-auth { max-width: 880px; margin-left: auto; margin-right: auto; }
.cf-ux-auth .cf-auth-title { margin: 6px 0 2px; text-align: center; font-size: 24px; }
.cf-ux-auth-safe { text-align: center; color: var(--cfux-ok); font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.cf-ux-auth-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--cfux-okbg); border-radius: 8px; padding: 10px 6px; margin-bottom: 20px; }
.cf-ux-auth-benefits > div { display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; padding: 0 10px; border-left: 1px solid #cfe9d9; color: var(--cfux-ok); }
.cf-ux-auth-benefits > div:first-child { border-left: 0; }
.cf-ux-auth-benefits .ic { grid-row: span 2; font-size: 16px; line-height: 1.2; }
.cf-ux-auth-benefits b { font-size: 12.5px; line-height: 1.25; }
.cf-ux-auth-benefits small { font-size: 11.5px; color: #3c6e50; line-height: 1.3; }
.cf-ux-auth-cols { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: start; }
.cf-ux-auth-cols.is-single { grid-template-columns: 1fr; }
.cf-ux-auth-or { align-self: stretch; display: flex; align-items: center; justify-content: center; position: relative; color: var(--cfux-mute); font-size: 13px; }
.cf-ux-auth-or::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--cfux-line); }
.cf-ux-auth-or span { position: relative; background: #fff; padding: 6px 0; }
.cf-ux-auth .cf-ux-pill, .cf-ux-auth #cf-google-btn { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1d2433; border: 1px solid #9aa1ad; border-radius: 999px; font-size: 15px; font-weight: 500; margin: 0 0 10px; }
.cf-ux-auth .cf-auth-submit { border-radius: 999px !important; min-height: 48px; background: var(--cfux-red) !important; border-color: var(--cfux-red) !important; font-size: 16px; }
.cf-ux-auth .cf-auth-toggle-wrap { margin-top: 12px; text-align: center; }
.cf-ux-auth .cf-btn-create-account, .cf-ux-auth .cf-btn-create-account:hover, .cf-ux-auth .cf-btn-create-account:focus, .cf-ux-auth .cf-btn-create-account:active { all: unset; cursor: pointer; font-size: 14px; color: #374151 !important; background: transparent !important; text-transform: none; letter-spacing: 0; }
.cf-ux-auth .cf-btn-create-account:focus-visible { outline: 2px solid var(--cfux-navy); outline-offset: 3px; border-radius: 4px; }
.cf-ux-auth .cf-btn-create-account u, .cf-ux-auth .cf-auth-toggle a u { color: var(--cfux-navy); font-weight: 700; }
.cf-ux-auth .cf-auth-toggle a { color: #374151; text-decoration: none; font-size: 14px; }
.cf-ux-auth-terms { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--cfux-mute); }
.cf-ux-auth-terms a { color: var(--cfux-navy); text-decoration: underline; }
@media (max-width: 760px) {
	.cf-ux-auth-benefits { grid-template-columns: 1fr 1fr; row-gap: 10px; }
	.cf-ux-auth-benefits > div:nth-child(3) { border-left: 0; }
	/* Mobile: social first (one tap), then "o", then email form */
	.cf-ux-auth-cols { grid-template-columns: 1fr; }
	.cf-ux-auth-right { order: 1; }
	.cf-ux-auth-or { order: 2; margin: 2px 0 12px; }
	.cf-ux-auth-or::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px solid var(--cfux-line); }
	.cf-ux-auth-or span { padding: 0 10px; }
	.cf-ux-auth-left { order: 3; }
}

/* Checkout: collapsible order notes */
.cf-ux-notes-toggle { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px dashed #b9c0cc; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--cfux-navy); margin: 8px 0; }
.cf-ux-notes-toggle span { font-size: 16px; }
.cf-ux-notes-toggle small { font-weight: 400; color: var(--cfux-mute); }
.cf-ux-notes-toggle:focus-visible { outline: 2px solid var(--cfux-navy); outline-offset: 2px; }
.woocommerce-additional-fields__field-wrapper[hidden] { display: none !important; }
/* Checkout: transfer discount as a green savings row */
.woocommerce-checkout-review-order-table tr.cf-ux-fee-trf th, .woocommerce-checkout-review-order-table tr.cf-ux-fee-trf td { background: var(--cfux-okbg); color: var(--cfux-ok) !important; font-weight: 700; border: 0 !important; }
.woocommerce-checkout-review-order-table tr.cf-ux-fee-trf th { border-radius: 8px 0 0 8px; font-size: 13.5px; }
.woocommerce-checkout-review-order-table tr.cf-ux-fee-trf td { border-radius: 0 8px 8px 0; white-space: nowrap; text-align: right; }
.woocommerce-checkout-review-order-table tr.cf-ux-fee-trf td * { color: var(--cfux-ok) !important; }
/* Checkout order review: amounts never split ("S/" on one line, number on the next); text cells wrap normally. */
.woocommerce-checkout-review-order-table { table-layout: auto !important; width: 100% !important; max-width: 100%; }
.woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th { white-space: normal !important; word-break: normal; overflow-wrap: anywhere; }
.woocommerce-checkout-review-order-table .amount, .woocommerce-checkout-review-order-table bdi { white-space: nowrap !important; overflow-wrap: normal; }
.woocommerce-checkout-review-order-table td.product-total, .woocommerce-checkout-review-order-table tfoot td:has(.amount) { width: 1%; text-align: right; padding-left: 10px !important; }
.woocommerce-checkout-review-order-table tfoot tr.order-total td, .woocommerce-checkout-review-order-table tfoot tr.order-total th { font-size: 17px; font-weight: 800; }

/* Checkout: payment methods as selectable cards with official logos */
#payment ul.payment_methods { border: 0 !important; padding: 0 !important; }
#payment .wc_payment_method.cf-ux-pm { list-style: none; border: 1.5px solid var(--cfux-line); border-radius: 12px; margin: 0 0 10px !important; padding: 12px 14px !important; background: #fff; }
#payment .wc_payment_method.cf-ux-pm:has(input:checked) { border-color: var(--cfux-navy); background: #f5f7ff; box-shadow: 0 0 0 1px var(--cfux-navy) inset; }
#payment .wc_payment_method.cf-ux-pm > label { display: inline-flex !important; width: calc(100% - 30px); align-items: center; justify-content: space-between; gap: 8px; vertical-align: middle; cursor: pointer; margin: 0; }
.cf-ux-pm__txt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.cf-ux-pm__txt b { font-size: 15px; color: #1d2433; }
.cf-ux-pm__txt small { flex-basis: 100%; font-size: 12px; color: var(--cfux-mute); font-weight: 400; }
.cf-ux-pm__txt .cf-ux-save { margin-left: 0; font-size: 11.5px; padding: 2px 7px; background: var(--cfux-okbg); color: var(--cfux-ok); }
.cf-ux-pm__logos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 46%; }
.cf-ux-pm__logos img { height: 20px; width: auto; border: 1px solid var(--cfux-line); border-radius: 4px; background: #fff; padding: 1px 3px; }
#payment .wc_payment_method.cf-ux-pm .payment_box { margin: 10px 0 0 !important; border-radius: 8px; font-size: 13px; }
/* Blocksy styles payment-label images at 420px wide / 35px high; override inside our cards. */
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm > label { display: flex !important; width: 100% !important; box-sizing: border-box; padding-left: 30px !important; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm > label .cf-ux-pm__logos img,
.ct-order-review #payment ul.payment_methods li.wc_payment_method.cf-ux-pm > label img:first-child { width: auto !important; height: 20px !important; max-height: 20px !important; max-width: none !important; border-radius: 4px !important; margin: 0 !important; display: inline-block !important; }
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm > input[type="radio"] { top: 16px !important; left: 14px !important; }
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm > label { flex-wrap: nowrap !important; padding-top: 0 !important; padding-bottom: 0 !important; }
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm > label::before, #payment ul.payment_methods li.wc_payment_method.cf-ux-pm > label::after { display: none !important; }
#payment li.cf-ux-pm .cf-ux-pm__txt { flex: 1 1 auto; min-width: 0; }
#payment li.cf-ux-pm .cf-ux-pm__logos { flex: 0 0 auto; max-width: 118px; }
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm > input[type="radio"] { display: block !important; appearance: auto !important; -webkit-appearance: radio !important; opacity: 1 !important; visibility: visible !important; position: absolute !important; width: 18px !important; height: 18px !important; margin: 0 !important; top: 50% !important; transform: translateY(-50%); accent-color: var(--cfux-navy); z-index: 2; clip: auto !important; clip-path: none !important; overflow: visible !important; }
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm:has(.payment_box:not([style*="none"])) > input[type="radio"] { top: 26px !important; }

/* Checkout: compact coupon toggle (same look as the notes toggle) */
.cf-ux-coupon-toggle .woocommerce-info { all: unset; display: block; }
.cf-ux-coupon-toggle .woocommerce-info::before { display: none !important; }
.cf-ux-coupon-toggle a.showcoupon { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px dashed #b9c0cc; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--cfux-navy) !important; text-decoration: none !important; margin: 4px 0 12px; }
.cf-ux-coupon-toggle a.showcoupon span { font-size: 16px; }
form.checkout_coupon { margin: -4px 0 14px !important; padding: 12px !important; border-radius: 10px; }
/* Checkout: tighter field spacing */
.woocommerce-checkout .woocommerce-billing-fields .form-row, .woocommerce-checkout .woocommerce-additional-fields .form-row { margin-bottom: 10px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.woocommerce-checkout .woocommerce-billing-fields .form-row label { margin-bottom: 4px !important; line-height: 1.3; font-size: 14px; }
.woocommerce-checkout .woocommerce-billing-fields h3 { margin: 6px 0 10px !important; }
.woocommerce-checkout .woocommerce-billing-fields input.input-text, .woocommerce-checkout .woocommerce-billing-fields select { min-height: 42px; }
/* Payment cards: bigger logos */
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm > label .cf-ux-pm__logos img,
.ct-order-review #payment ul.payment_methods li.wc_payment_method.cf-ux-pm > label img:first-child { height: 28px !important; max-height: 28px !important; }
#payment li.cf-ux-pm .cf-ux-pm__logos { max-width: 150px; gap: 5px; }
/* Payment cards: logos on their own row under the text so the title never squeezes */
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm > label { flex-wrap: wrap !important; align-items: flex-start; }
#payment li.cf-ux-pm .cf-ux-pm__txt { flex: 1 1 100%; }
#payment li.cf-ux-pm .cf-ux-pm__logos { flex: 1 1 100%; max-width: none; justify-content: flex-start; margin-top: 8px; }
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm > input[type="radio"] { top: 22px !important; transform: none; }
/* Single-logo cards (Transferencia → PagoEfectivo, Yape): logo on the right of the text */
#payment ul.payment_methods li.wc_payment_method.cf-ux-pm--inline > label { flex-wrap: nowrap !important; align-items: center; }
#payment li.cf-ux-pm--inline .cf-ux-pm__txt { flex: 1 1 auto; }
#payment li.cf-ux-pm--inline .cf-ux-pm__logos { flex: 0 0 auto; margin-top: 0; justify-content: flex-end; }

/* Checkout: terms checkbox was nearly invisible (1px #e0e0e0 border) */
.woocommerce-checkout #terms, .woocommerce-checkout .woocommerce-form__input-checkbox { width: 20px !important; height: 20px !important; min-width: 20px; border: 2px solid #4b5563 !important; border-radius: 5px !important; background-color: #fff; vertical-align: -4px; margin-right: 8px !important; cursor: pointer; }
.woocommerce-checkout #terms:checked, .woocommerce-checkout .woocommerce-form__input-checkbox:checked { background-color: var(--cfux-navy) !important; border-color: var(--cfux-navy) !important; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { background: #f8fafc; border: 1px solid var(--cfux-line); border-radius: 10px; padding: 10px 12px; margin: 10px 0 14px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text { font-size: 14px; color: #1d2433; }
/* Cart: the theme's transfer-discount fee row is replaced by our "Con transferencia pagas" line */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-fee-block { display: none; }

/* Thank-you page (theme cf-agradecimiento): WhatsApp button wider than its box on phones */
.cf-tye-wsp .cf-tye-wsp-btn { display: flex !important; width: 100%; max-width: 100%; box-sizing: border-box; justify-content: center; text-align: center; white-space: normal; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 14px 16px !important; line-height: 1.3; }

/* Product page: "Medios de pago" moved into the middle column — one compact row of logos */
.single-product .cf-cont-payment-col.cf-ux-pay-moved { margin-top: 14px; }
.single-product .cf-ux-pay-moved .cf-payment-col { padding: 12px 14px !important; }
.single-product .cf-ux-pay-moved .cf-payment-iconos { display: flex !important; flex-wrap: wrap; gap: 6px; grid-template-columns: none !important; }
.single-product .cf-ux-pay-moved .cf-payment-iconos img { height: 30px !important; width: auto !important; max-width: none !important; }

/* Trust strip inside the theme's light-blue menu bar on desktop (the separate navy strip is hidden there) */
html.cf-ux-bar-in-menu .cf-ux-bar:not(.cf-ux-bar--inline) { display: none; }
.cf-ux-bar.cf-ux-bar--inline { background: transparent; padding: 0 12px; font-size: 13px; flex: 1 1 auto; justify-content: center; align-self: center; flex-wrap: nowrap; white-space: nowrap; color: #fff; }
html:not(.cf-ux-bar-in-menu) .cf-ux-bar--inline { display: none; }
@media (max-width: 1180px) { .cf-ux-bar.cf-ux-bar--inline { font-size: 12px; } .cf-ux-bar--inline span:nth-child(5) { display: none; } .cf-ux-bar--inline span:nth-child(4) { display: none; } }
/* Theme header (production bug): between ~1000 and 1200 px the cart button overflowed the screen by ~40 px.
   Keep the cart icon + count, hide the amount next to it in that range. */
@media (min-width: 1000px) and (max-width: 1200px) { #cf-header .hbt-cart-info { display: none !important; } }
/* Theme/prefooter (production bugs, only ~1000–1279 px): the cart count bubble touched the screen edge and the
   prefooter reviews block had a fixed 1280 px width → horizontal scroll. Layout-only fixes, content untouched. */
@media (min-width: 1000px) and (max-width: 1300px) { #cf-header .cf-header-top-inner { padding-right: 16px !important; box-sizing: border-box; } }
.cf-pf-reviews.cf-ancho-maximo, .cf-ancho-personalizado, .cf-ancho-maximo { max-width: 100% !important; box-sizing: border-box; }
@media (min-width: 1000px) and (max-width: 1100px) { #cf-header .hbt-search { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } }

/* 2.10.6: no payment method preselected — message when "Realizar pedido" is pressed without choosing. */
.cf-ux-pm-none { display: none !important; }
.cf-ux-pm-msg { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #fdecea; color: var(--cfux-red); font-weight: 700; font-size: 13.5px; }
/* 2.10.7: WooCommerce separates cart item details with " / " (aria-hidden). Each detail is already its own pill
   (brand, delivery, stock), so the slash only looked like a typo ("VICTORIA'S SECRET /"). */
.wc-block-cart-items__row .wc-block-components-product-details > span > span[aria-hidden="true"] { display: none !important; }
/* 2.10.8: way back to the store from the cart (no header/menu there). */
.cf-ux-steps__more { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--cfux-navy) !important; text-decoration: none !important; white-space: nowrap; }
.cf-ux-steps__more:hover { text-decoration: underline !important; }
.cf-ux-more { display: block; text-align: center; margin: 12px 0 4px; padding: 10px 12px; border: 1.5px solid var(--cfux-navy); border-radius: 8px; color: var(--cfux-navy) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; background: #fff; }
.cf-ux-more:hover { background: #f5f7ff; }
/* 2.10.9: the done "Carrito" step is a link back to the cart; keep the step look. */
.cf-ux-steps__bar li > a { display: contents; color: inherit !important; text-decoration: none !important; }
.cf-ux-steps__bar li > a:hover { text-decoration: underline !important; }
/* 2.10.10: store pickup note under "Recógelo en nuestro local". */
.cf-ux-pickup { margin: 6px 0 2px; padding: 8px 10px; border-radius: 8px; background: var(--cfux-okbg); color: var(--cfux-ok); font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: left; white-space: normal; }
#shipping_method li:has(> .cf-ux-pickup) { flex-wrap: wrap !important; }
#shipping_method li > .cf-ux-pickup { flex: 0 0 100%; order: 3; }
.cf-ux-pickup { display: flex; gap: 6px; align-items: flex-start; }
.cf-ux-pickup__ico { flex: 0 0 auto; line-height: 1.35; }
.cf-ux-pickup__txt { flex: 1 1 auto; min-width: 0; }
.cf-ux-pickup__ref { display: block; font-weight: 400; margin-top: 2px; }