/*
Theme Name: Astra Binrock
Theme URI: https://binrock.com
Description: Tema hijo de Astra para Binrock Store
Author: Esteban Munoz
Author URI: https://binrock.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-binrock
*/

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
	--binrock-navy:  #0F1B2D;
	--binrock-cream: #F5F0E8;
	--binrock-white: #FFFFFF;
	--binrock-accent:#1E3A5F;
	--binrock-text:  #0F1B2D;
	--binrock-muted: #6B7280;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.binrock-home {
	background:    var(--binrock-cream);
	font-family:   'DM Sans', sans-serif;
	font-weight:   400;
	color:         var(--binrock-text);
	overflow-x:    hidden;
}

body.binrock-home a  { text-decoration: none; }
body.binrock-home img { display: block; width: 100%; }
body.binrock-home ul  { list-style: none; }

.sr-only {
	position:    absolute;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0,0,0,0);
	white-space: nowrap;
	border:      0;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.binrock-announcement {
	position:        relative;
	z-index:         50;
	background:      var(--binrock-navy);
	height:          32px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0 16px;
}

.binrock-announcement p {
	font-family:     'DM Sans', sans-serif;
	font-size:       11px;
	font-weight:     400;
	letter-spacing:  0.1em;
	text-transform:  uppercase;
	color:           #FFFFFF;
	text-align:      center;
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
}

@media (min-width: 768px) {
	.binrock-announcement        { height: 36px; }
	.binrock-announcement p      { font-size: 12px; white-space: normal; }
}

/* ============================================================
   HEADER NAV
   ============================================================ */
/* Override snippet cosmetics; height set by JS via --br-topbar-h */
#br-top-bar {
	border-bottom: none !important;
	box-shadow:    none !important;
}

.binrock-header {
	position:   sticky;
	top:        var(--br-topbar-h, 36px); /* JS measures actual top-bar height */
	margin-top: var(--br-topbar-h, 36px); /* push below fixed top bar on load */
	z-index:    100;
	background: var(--binrock-navy);
	height:     64px;
	border:     none;
	transition: box-shadow 200ms ease;
}

.binrock-header.scrolled {
	box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

.binrock-header-inner {
	max-width:       1440px;
	margin:          0 auto;
	padding:         0 20px;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

@media (min-width: 768px) {
	.binrock-header-inner { padding: 0 40px; }
}

.binrock-logo {
	display:     flex;
	align-items: center;
	line-height: 0;
}

.binrock-logo img {
	height:  19px;
	width:   auto;
	display: block;
}

/* Desktop nav */
.binrock-nav {
	display: none;
}

@media (min-width: 768px) {
	.binrock-nav {
		display:     flex;
		gap:         28px;
		align-items: center;
	}

	.binrock-nav a {
		font-family:    'DM Sans', sans-serif;
		font-size:      12px;
		font-weight:    400;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color:          var(--binrock-cream);
		text-decoration: none;
		transition:     opacity 200ms ease;
	}

	.binrock-nav a:hover { opacity: 0.65; }
}

/* Header actions (nav + cart + hamburger) */
.binrock-header-actions {
	display:     flex;
	align-items: center;
	gap:         24px;
}

.binrock-cart-link {
	position:    relative;
	display:     flex;
	align-items: center;
	color:       var(--binrock-cream);
}

.binrock-cart-count {
	position:        absolute;
	top:             -7px;
	right:           -9px;
	background:      var(--binrock-cream);
	color:           var(--binrock-navy);
	font-family:     'DM Sans', sans-serif;
	font-size:       9px;
	font-weight:     500;
	width:           16px;
	height:          16px;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	line-height:     1;
}

.binrock-menu-toggle {
	background:  none;
	border:      none;
	color:       var(--binrock-cream);
	font-size:   22px;
	cursor:      pointer;
	padding:     4px;
	display:     flex;
	align-items: center;
	line-height: 1;
}

@media (min-width: 768px) {
	.binrock-menu-toggle { display: none; }
}

/* ============================================================
   CATEGORY BAR — sticky under header
   ============================================================ */
.binrock-catbar {
	position:                   sticky;
	top:                        calc(var(--br-topbar-h, 52px) + 64px); /* top bar + header */
	z-index:                    90;
	background:                 var(--binrock-cream);
	border-bottom:              1px solid rgba(15,27,45,0.1);
	display:                    flex;
	align-items:                center;
	overflow-x:                 auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:            none;
	white-space:                nowrap;
	padding:                    0 20px;
	justify-content:            center;
}

.binrock-catbar::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
	.binrock-catbar {
		justify-content: center;
		overflow-x:      visible;
		padding:         0 40px;
	}
}

.binrock-catbar-item {
	display:        inline-flex;
	align-items:    center;
	height:         40px;
	padding:        0 16px;
	font-family:    'DM Sans', sans-serif;
	font-size:      11px;
	font-weight:    400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--binrock-navy);
	white-space:    nowrap;
	flex-shrink:    0;
	transition:     opacity 200ms ease;
}

.binrock-catbar-item:hover { opacity: 0.55; }

@media (min-width: 768px) {
	.binrock-catbar-item { height: 44px; padding: 0 24px; }
}

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.binrock-mobile-menu {
	position:        fixed;
	inset:           0;
	background:      var(--binrock-navy);
	z-index:         200;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	opacity:         0;
	pointer-events:  none;
	transform:       translateY(-12px);
	transition:      opacity 250ms ease, transform 250ms ease;
}

.binrock-mobile-menu.is-open {
	opacity:        1;
	pointer-events: all;
	transform:      translateY(0);
}

.binrock-mobile-menu-close {
	position:    absolute;
	top:         20px;
	right:       20px;
	background:  none;
	border:      none;
	color:       var(--binrock-cream);
	font-size:   28px;
	cursor:      pointer;
	padding:     4px;
	line-height: 1;
}

.binrock-mobile-menu nav {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            36px;
}

.binrock-mobile-menu nav a {
	font-family:  'Playfair Display', serif;
	font-size:    28px;
	font-weight:  400;
	color:        var(--binrock-cream);
	transition:   opacity 200ms ease;
}

.binrock-mobile-menu nav a:hover { opacity: 0.65; }

/* ============================================================
   HERO PANELS
   ============================================================ */
.binrock-hero-panel {
	position:              relative;
	height:                100vh;
	min-height:            560px;
	background-color:      #111;
	background-size:       cover;
	background-position:   center;
	background-attachment: fixed;
}

@media (max-width: 767px) {
	.binrock-hero-panel { background-attachment: scroll; }
}

.binrock-hero-panel-overlay {
	position:   absolute;
	inset:      0;
	background: rgba(10, 18, 30, 0.28);
	z-index:    0;
}

@media (min-width: 768px) {
	.binrock-hero-panel-overlay { display: none; }
}

/* Ambos paneles: botón absolutamente posicionado dentro del panel (como el overlay) */
.binrock-hero-panel-bottom {
	position:  absolute;
	left:      50%;
	transform: translateX(-50%);
	z-index:   1;
}

/* Panel 1: botón estático en el fondo */
#brPanel1 .binrock-hero-panel-bottom {
	bottom: 48px;
}

#brPanel2 .binrock-hero-panel-bottom {
	bottom: 48px;
}

@media (min-width: 768px) {
	#brPanel2 { display: none; }
}

.binrock-scroll-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	padding:         14px 36px;
	background:      rgba(255, 255, 255, 0.08);
	border:          1px solid rgba(255, 255, 255, 0.4);
	color:           var(--binrock-cream);
	font-family:     'DM Sans', sans-serif;
	font-size:       12px;
	font-weight:     400;
	letter-spacing:  0.15em;
	text-transform:  uppercase;
	cursor:          pointer;
	transition:      background 200ms ease, border-color 200ms ease;
}

.binrock-scroll-btn:hover {
	background:   rgba(255, 255, 255, 0.18);
	border-color: var(--binrock-cream);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.binrock-btn-primary {
	display:        inline-block;
	margin-top:     32px;
	background:     var(--binrock-cream);
	color:          var(--binrock-navy);
	font-family:    'DM Sans', sans-serif;
	font-size:      13px;
	font-weight:    500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding:        14px 32px;
	border-radius:  0;
	transition:     background 200ms ease, transform 200ms ease;
}

.binrock-btn-primary:hover {
	background:  var(--binrock-white);
	transform:   scale(1.02);
	color:       var(--binrock-navy);
}

.binrock-btn-outline {
	display:        inline-block;
	border:         1px solid var(--binrock-cream);
	color:          var(--binrock-cream);
	font-family:    'DM Sans', sans-serif;
	font-size:      13px;
	font-weight:    500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding:        12px 28px;
	border-radius:  0;
	transition:     background 200ms ease, color 200ms ease;
}

.binrock-btn-outline:hover {
	background: var(--binrock-cream);
	color:      var(--binrock-navy);
}

/* ============================================================
   SECTIONS — COMMON
   ============================================================ */
.binrock-section {
	padding: 48px 20px;
}

@media (min-width: 768px) {
	.binrock-section { padding: 80px 40px; }
}

.binrock-section--cream { background: var(--binrock-cream); }
.binrock-section--white { background: var(--binrock-white); }

.binrock-section-inner {
	max-width: 1440px;
	margin:    0 auto;
}

.binrock-section-header {
	margin-bottom: 40px;
}

.binrock-section-label {
	font-family:    'DM Sans', sans-serif;
	font-size:      11px;
	font-weight:    400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color:          var(--binrock-muted);
	margin-bottom:  8px;
}

.binrock-section-title {
	font-family:    'DM Sans', sans-serif;
	font-size:      28px;
	font-weight:    300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--binrock-navy);
	line-height:    1.2;
}

@media (min-width: 768px) {
	.binrock-section-title { font-size: 36px; }
}

.binrock-section-rule {
	width:      40px;
	height:     1px;
	background: var(--binrock-navy);
	margin-top: 16px;
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.binrock-product-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   12px;
}

@media (min-width: 768px) {
	.binrock-product-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.binrock-product-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.binrock-card {
	background:     var(--binrock-white);
	position:       relative;
	display:        flex;
	flex-direction: column;
}

.binrock-card > a { display: block; }
.binrock-card-body { display: block; text-decoration: none; color: inherit; flex: 1; }
ul.products.binrock-product-grid { list-style: none; padding: 0; margin: 0; }

.binrock-card-image > a {
	display:  block;
	position: absolute;
	inset:    0;
}

ul.products.binrock-product-grid li.product {
	float:   none;
	width:   auto;
	margin:  0;
	clear:   none;
	display: block;
}

ul.products.binrock-product-grid li.product .binrock-card {
	height: 100%;
}

.binrock-card-image {
	position:     relative;
	aspect-ratio: 4 / 5;
	overflow:     visible;
	background:   #e8e4dc;
}

.binrock-card-image img {
	position:   absolute !important;
	inset:      0 !important;
	width:      100% !important;
	height:     100% !important;
	object-fit: cover !important;
	transition: opacity 300ms ease;
}

.binrock-card-image .img-hover  { opacity: 0; }
.binrock-card-image .img-primary { opacity: 1; }

.binrock-card:hover .img-hover  { opacity: 1; }
.binrock-card:hover .img-primary { opacity: 0; }

.binrock-card-info {
	padding: 10px 12px 14px;
}

.binrock-card-price {
	font-family:   'DM Sans', sans-serif;
	font-size:     14px;
	font-weight:   400;
	color:         var(--binrock-navy);
	margin-bottom: 4px;
}

.binrock-card-name {
	font-family:        'DM Sans', sans-serif;
	font-size:          13px;
	font-weight:        400;
	color:              var(--binrock-muted);
	text-transform:     uppercase;
	letter-spacing:     0.05em;
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.binrock-card-badge {
	position:       absolute;
	top:            0;
	left:           0;
	background:     var(--binrock-navy);
	color:          var(--binrock-cream);
	font-family:    'DM Sans', sans-serif;
	font-size:      10px;
	font-weight:    500;
	padding:        4px 8px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	z-index:        1;
}

/* ============================================================
   EDITORIAL BANNER
   ============================================================ */
.binrock-banner {
	position:        relative;
	width:           100%;
	height:          320px;
	background:      linear-gradient(135deg, #0F1B2D 0%, #1E3A5F 50%, #0F1B2D 100%);
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
}

.binrock-banner::after {
	content:          '';
	position:         absolute;
	inset:            0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	opacity:          0.03;
	pointer-events:   none;
}

@media (min-width: 768px) {
	.binrock-banner { height: 480px; }
}

.binrock-banner-content {
	position:   relative;
	z-index:    1;
	text-align: center;
	padding:    0 24px;
}

.binrock-banner-label {
	font-family:    'DM Sans', sans-serif;
	font-size:      11px;
	font-weight:    400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color:          rgba(245,240,232,0.6);
	margin-bottom:  24px;
}

/* ============================================================
   CATEGORÍAS F4T3
   ============================================================ */
.binrock-cat-list {
	position:              relative;
	height:                100vh;
	min-height:            520px;
	background-color:      var(--binrock-navy);
	background-size:       cover;
	background-position:   center;
	background-attachment: fixed;
	display:               flex;
	align-items:           center;
	justify-content:       center;
}

@media (max-width: 767px) {
	.binrock-cat-list { background-attachment: scroll; }
}

.binrock-cat-list-overlay {
	position:   absolute;
	inset:      0;
	background: rgba(10, 18, 30, 0.58);
	z-index:    0;
}

.binrock-cat-list-nav {
	position:       relative;
	z-index:        1;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            4px;
	text-align:     center;
}

.binrock-cat-item {
	font-family:    'DM Sans', sans-serif;
	font-size:      clamp(20px, 3.5vw, 40px);
	font-weight:    300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          rgba(245, 240, 232, 0.75);
	line-height:    1.2;
	transition:     color 200ms ease, letter-spacing 250ms ease;
	display:        block;
}

.binrock-cat-item:hover {
	color:          var(--binrock-cream);
	letter-spacing: 0.15em;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.binrock-trust {
	background: var(--binrock-navy);
	padding:    40px 24px;
}

@media (min-width: 768px) {
	.binrock-trust { padding: 48px 40px; }
}

.binrock-trust-inner {
	max-width:      1440px;
	margin:         0 auto;
	display:        flex;
	flex-direction: column;
	gap:            0;
}

@media (min-width: 768px) {
	.binrock-trust-inner { flex-direction: row; }
}

.binrock-trust-item {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            8px;
	padding:        24px 0;
	flex:           1;
	border-bottom:  1px solid rgba(255,255,255,0.08);
}

.binrock-trust-item:last-child {
	border-bottom: none;
}

@media (min-width: 768px) {
	.binrock-trust-item {
		align-items:   center;
		text-align:    center;
		padding:       0 40px;
		border-bottom: none;
		border-right:  1px solid rgba(255,255,255,0.08);
	}

	.binrock-trust-item:last-child { border-right: none; }
	.binrock-trust-item:first-child { padding-left: 0; }
}

.binrock-trust-item svg {
	width:      20px;
	height:     20px;
	color:      var(--binrock-cream);
	flex-shrink:0;
}

.binrock-trust-title {
	font-family:    'DM Sans', sans-serif;
	font-size:      12px;
	font-weight:    500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--binrock-cream);
}

.binrock-trust-desc {
	font-family: 'DM Sans', sans-serif;
	font-size:   13px;
	font-weight: 300;
	color:       rgba(245,240,232,0.6);
}

/* ============================================================
   FOOTER
   ============================================================ */
.binrock-footer {
	background:  var(--binrock-navy);
	border-top:  1px solid rgba(255,255,255,0.08);
	padding:     48px 24px 24px;
}

@media (min-width: 768px) {
	.binrock-footer { padding: 64px 40px 32px; }
}

.binrock-footer-container {
	max-width: 1440px;
	margin:    0 auto;
}

.binrock-footer-inner {
	display:        flex;
	flex-direction: column;
	gap:            40px;
}

@media (min-width: 768px) {
	.binrock-footer-inner {
		flex-direction: row;
		gap:            0;
	}
}

.binrock-footer-col {
	flex: 1;
}

@media (min-width: 768px) {
	.binrock-footer-col { padding-right: 48px; }
	.binrock-footer-col:last-child { padding-right: 0; }
}

.binrock-footer-logo {
	display:       block;
	margin-bottom: 12px;
	line-height:   0;
}

.binrock-footer-logo img {
	height: 19px;
	width:  auto;
}

/* body.binrock-home img { display:block; width:100% } tiene misma especificidad
   que la regla anterior — override con selector más específico (0,2,0,1 vs 0,1,0,1). */
body.binrock-home .binrock-footer-logo img {
	display: inline-block;
	width:   auto;
	height:  19px;
}

.binrock-footer-tagline {
	font-family: 'DM Sans', sans-serif;
	font-size:   13px;
	font-weight: 300;
	color:       rgba(245,240,232,0.6);
}

.binrock-footer-heading {
	font-family:    'DM Sans', sans-serif;
	font-size:      11px;
	font-weight:    500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--binrock-cream);
	margin-bottom:  16px;
}

.binrock-footer-links {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.binrock-footer-links a {
	font-family:  'DM Sans', sans-serif;
	font-size:    13px;
	font-weight:  300;
	color:        rgba(245,240,232,0.7);
	transition:   color 200ms ease;
}

.binrock-footer-links a:hover { color: var(--binrock-cream); }

.binrock-footer-social {
	font-family: 'DM Sans', sans-serif;
	font-size:   14px;
	font-weight: 300;
	color:       rgba(245,240,232,0.7);
}

.binrock-footer-bottom {
	border-top:    1px solid rgba(255,255,255,0.06);
	margin-top:    48px;
	padding-top:   24px;
	display:       flex;
	flex-direction:column;
	gap:           8px;
}

@media (min-width: 768px) {
	.binrock-footer-bottom {
		flex-direction:  row;
		justify-content: space-between;
		align-items:     center;
	}
}

.binrock-footer-bottom p {
	font-family: 'DM Sans', sans-serif;
	font-size:   11px;
	font-weight: 300;
	color:       rgba(245,240,232,0.4);
}

/* ============================================================
   TRUSTPILOT WIDGET — ajuste de logos
   ============================================================ */
.br-tp-head img[alt="Binrock"],
.br-tp-head a > img {
	height: 13px !important;
	width:  auto !important;
}

img[alt="Trustpilot"],
img[alt*="rustpilot"] {
	height: 15px !important;
	width:  auto !important;
}

/* ============================================================
   QUICK ADD — Modal UI
   Migrated from snippet 36
   ============================================================ */

.br-loop ul.products li.product,
ul.products li.product { position: relative; }

.astra-shop-thumbnail-wrap { position: relative !important; overflow: visible !important; }
.astra-shop-thumbnail-wrap > a { position: relative; z-index: 1; }

.brx-quickadd {
	position: absolute;
	right: -7px !important;
	bottom: -3px !important;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: rgba(0,0,0,.45) !important;
	font-size: 28px !important;
	font-weight: 300 !important;
	cursor: pointer;
	z-index: 10;
	-webkit-tap-highlight-color: transparent !important;
	outline: none !important;
}
.brx-quickadd:focus,
.brx-quickadd:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

#brx-qa-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 999999;
	align-items: flex-end;
	justify-content: center;
	display: none;
	pointer-events: none;
}
body.brx-qa-open #brx-qa-modal {
	display: flex;
	pointer-events: auto;
}

.brx-qa-sheet {
	position:               relative;
	width:                  min(520px, 100%);
	background:             #fff;
	border-top-left-radius: 22px !important;
	border-top-right-radius: 22px !important;
	padding:                48px 18px 24px !important;
	box-shadow:             0 -10px 40px rgba(0,0,0,.2);
}

.brx-qa-close {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	float:           none !important;
	position:        absolute !important;
	top:             14px !important;
	right:           14px !important;
	width:           28px !important;
	height:          28px !important;
	padding:         0 !important;
	margin:          0 !important;
	border:          none !important;
	border-radius:   0 !important;
	background:      transparent !important;
	color:           rgba(15, 27, 45, 0.5) !important;
	font-size:       16px !important;
	line-height:     1 !important;
	cursor:          pointer;
	box-shadow:      none !important;
	transition:      color 150ms ease;
}
.brx-qa-close:hover {
	background: transparent !important;
	color:      #0f1b2d !important;
}

.brx-qa-title { display: none !important; }
.brx-qa-group-title { display: none !important; }

.brx-qa-group {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
}
.brx-qa-options {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}

.brx-qa-row {
	width:           100% !important;
	display:         flex !important;
	flex-wrap:       wrap !important;
	justify-content: flex-start !important;
	align-items:     center !important;
	gap:             8px !important;
	padding:         8px 0 12px !important;
	margin:          0 !important;
}

.brx-qa-row.is-jean {
	display:         flex !important;
	flex-wrap:       wrap !important;
	gap:             8px !important;
	justify-content: flex-start !important;
	align-items:     center !important;
}
.brx-qa-row.is-jean .brx-qa-pill {
	min-width: 52px !important;
}

.brx-qa-pill {
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: center !important;
	flex:            1 1 0 !important;
	border:          1px solid rgba(15, 27, 45, 0.35) !important;
	background:      #fff !important;
	color:           #0f1b2d !important;
	height:          40px !important;
	min-width:       0 !important;
	padding:         0 6px !important;
	border-radius:   0 !important;
	font-family:     'DM Sans', sans-serif !important;
	font-size:       12px !important;
	font-weight:     500 !important;
	letter-spacing:  0.06em !important;
	line-height:     40px !important;
	cursor:          pointer;
	box-shadow:      none !important;
	outline:         none !important;
	transition:      background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.brx-qa-pill:hover {
	border-color: #0f1b2d !important;
	background:   #fff !important;
}
.brx-qa-pill.is-active {
	background:      #0f1b2d !important;
	color:           #fff !important;
	border-color:    #0f1b2d !important;
	font-weight:     600 !important;
	text-decoration: none !important;
}
.brx-qa-pill.is-oos,
.brx-qa-pill:disabled {
	opacity:         0.35 !important;
	text-decoration: line-through !important;
	text-decoration-thickness: 1px;
	cursor:          not-allowed;
	background:      #fff !important;
}

.brx-qa-add {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	width:           100% !important;
	height:          46px !important;
	padding:         0 !important;
	border:          none !important;
	border-radius:   0 !important;
	background:      #0f1b2d !important;
	color:           #f5f0e8 !important;
	font-family:     'DM Sans', sans-serif !important;
	font-size:       11px !important;
	font-weight:     500 !important;
	letter-spacing:  0.18em !important;
	text-transform:  uppercase !important;
	cursor:          pointer;
	transition:      background 200ms ease !important;
	margin-top:      16px !important;
}
.brx-qa-add:hover:not(:disabled) {
	background: rgba(15, 27, 45, 0.82) !important;
}
.brx-qa-add:disabled {
	opacity: 0.45 !important;
	cursor:  not-allowed;
}

.brx-skel { opacity: .85; }
.brx-skel .line {
	height: 14px;
	width: 160px;
	background: rgba(0,0,0,.08);
	border-radius: 8px;
	margin: 8px 0 14px;
}
.brx-skel .row { display: flex; gap: 10px; flex-wrap: wrap; }
.brx-skel .row span {
	width: 64px;
	height: 42px;
	border-radius: 999px;
	background: rgba(0,0,0,.08);
	display: inline-block;
}

#brx-toast {
	position: fixed;
	left: 50%;
	bottom: 92px;
	transform: translateX(-50%);
	background: #111;
	color: #fff;
	padding: 10px 14px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
	z-index: 999999;
	pointer-events: none;
}
#brx-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(-4px);
}

@media (min-width: 900px) {
	#brx-qa-modal {
		align-items: center !important;
		padding: 24px;
	}
	.brx-qa-sheet {
		width:      450px !important;
		max-width:  calc(100% - 48px) !important;
		padding:    48px 22px 20px !important;
		border-radius: 22px !important;
		box-shadow: 0 18px 60px rgba(0,0,0,.28) !important;
	}
	.brx-qa-row {
		gap: 8px !important;
		padding: 8px 0 12px !important;
	}
	.brx-qa-row.is-jean {
		gap: 8px !important;
	}
	.brx-qa-add {
		display:       flex !important;
		width:         100% !important;
		max-width:     100% !important;
		border-radius: 0 !important;
		margin:        16px auto 0 !important;
		padding:       0 !important;
		height:        46px !important;
		background:    #0f1b2d !important;
		color:         #f5f0e8 !important;
		font-size:     11px !important;
		letter-spacing: 0.18em !important;
		opacity:       1 !important;
	}
}

@media (max-width: 899px) {
	.brx-qa-row { padding-bottom: 12px !important; }
	.brx-qa-add {
		margin-top: 16px !important;
		transform:  none !important;
	}
}

/* ============================================================
   CART DRAWER
   ============================================================ */

/* Overlay */
.brx-cart-overlay {
	position:         fixed;
	inset:            0;
	z-index:          999998;
	background:       rgba(15, 27, 45, 0.55);
	opacity:          0;
	pointer-events:   none;
	transition:       opacity 280ms ease;
}
.brx-cart-overlay.is-visible {
	opacity:        1;
	pointer-events: all;
}

/* Drawer shell */
.brx-cart-drawer {
	position:         fixed;
	top:              0;
	right:            0;
	bottom:           0;
	z-index:          999999;
	width:            min(420px, 100vw);
	background:       var(--binrock-white);
	display:          flex;
	flex-direction:   column;
	transform:        translateX(100%);
	transition:       transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
	overflow:         hidden;
}
.brx-cart-drawer.is-open {
	transform: translateX(0);
}

/* Lock body scroll when drawer is open */
body.brx-cart-open {
	overflow: hidden;
}

/* Header */
.brx-cart-drawer-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 24px;
	border-bottom:   1px solid rgba(15, 27, 45, 0.08);
	flex-shrink:     0;
}
.brx-cart-drawer-title {
	font-family:     'DM Sans', sans-serif;
	font-size:       13px;
	font-weight:     500;
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	color:           var(--binrock-navy);
}
.brx-cart-drawer-close {
	background:  none;
	border:      none;
	cursor:      pointer;
	padding:     4px;
	color:       var(--binrock-muted);
	font-size:   16px;
	line-height: 1;
	transition:  color 150ms ease;
}
.brx-cart-drawer-close:hover { color: var(--binrock-navy); }

/* Body (scrollable) */
.brx-cart-drawer-body {
	flex:       1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

/* Items wrap (WC fragment target) */
.brx-cart-items-wrap {
	padding: 0 24px;
}

/* Empty state */
.brx-cart-empty {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             12px;
	padding:         48px 0 32px;
	color:           var(--binrock-muted);
}
.brx-cart-empty p {
	font-size:   13px;
	letter-spacing: 0.06em;
}
.brx-cart-shop-link {
	font-size:      11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--binrock-navy);
	border-bottom:  1px solid var(--binrock-navy);
	padding-bottom: 2px;
}

/* Items list */
.brx-cart-items {
	list-style: none;
	padding:    0;
	margin:     0;
}
.brx-cart-item {
	display:       flex;
	align-items:   flex-start;
	gap:           12px;
	padding:       16px 0;
	border-bottom: 1px solid rgba(15, 27, 45, 0.07);
}
.brx-cart-item-thumb {
	flex-shrink: 0;
	width:       64px;
	height:      64px;
	overflow:    hidden;
	background:  var(--binrock-cream);
}
.brx-cart-item-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}
.brx-cart-item-info {
	flex:    1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.brx-cart-item-name {
	font-size:      13px;
	font-weight:    500;
	color:          var(--binrock-navy);
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
}
.brx-cart-item-variant {
	font-size:   11px;
	color:       var(--binrock-muted);
	letter-spacing: 0.04em;
}
.brx-cart-item-price {
	font-size:  13px;
	color:      var(--binrock-navy);
	margin-top: 4px;
}
.brx-cart-item-qty {
	color:      var(--binrock-muted);
	font-size:  12px;
}
.brx-cart-item-remove {
	flex-shrink: 0;
	color:       var(--binrock-muted);
	font-size:   14px;
	line-height: 1;
	padding:     4px;
	align-self:  flex-start;
	transition:  color 150ms ease;
}
.brx-cart-item-remove:hover { color: var(--binrock-navy); }

/* Quantity controls */
.brx-qty-ctrl {
	display:     flex;
	align-items: center;
	gap:         0;
	margin-top:  6px;
	width:       fit-content;
	border:      1px solid rgba(15, 27, 45, 0.18);
}
.brx-qty-btn {
	background:  none;
	border:      none;
	width:       28px;
	height:      26px;
	display:     flex;
	align-items: center;
	justify-content: center;
	cursor:      pointer;
	font-size:   15px;
	color:       var(--binrock-navy);
	line-height: 1;
	transition:  background 120ms ease;
	flex-shrink: 0;
}
.brx-qty-btn:hover { background: var(--binrock-cream); }
.brx-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.brx-qty-num {
	min-width:   28px;
	text-align:  center;
	font-size:   12px;
	font-family: 'DM Sans', sans-serif;
	color:       var(--binrock-navy);
	line-height: 26px;
	border-left:  1px solid rgba(15, 27, 45, 0.18);
	border-right: 1px solid rgba(15, 27, 45, 0.18);
	padding:     0 4px;
}

/* Free shipping message */
.brx-cart-shipping-msg {
	display:         flex;
	align-items:     center;
	gap:             6px;
	margin:          16px 0 0;
	padding:         10px 12px;
	background:      var(--binrock-cream);
	font-size:       11px;
	letter-spacing:  0.08em;
	text-transform:  uppercase;
	color:           var(--binrock-muted);
}
.brx-cart-shipping-msg.is-free {
	color:      var(--binrock-navy);
	font-weight: 500;
}

/* Subtotal row */
.brx-cart-subtotal {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	padding:         16px 0;
	font-size:       13px;
	font-weight:     500;
	color:           var(--binrock-navy);
	letter-spacing:  0.04em;
}

/* Upsell */
.brx-cart-upsell {
	padding:    20px 24px 16px;
	border-top: 1px solid rgba(15, 27, 45, 0.08);
}
.brx-cart-upsell-title {
	font-size:      10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--binrock-muted);
	margin-bottom:  14px;
}
.brx-cart-upsell-grid {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}
.brx-upsell-card {
	display:     flex;
	flex-direction: row;
	gap:         12px;
	align-items: flex-start;
}

/* Thumbnail link */
.brx-upsell-card-img {
	flex-shrink: 0;
	width:       64px;
	height:      64px;
	overflow:    hidden;
	background:  var(--binrock-cream);
	display:     block;
}
.brx-upsell-card-img img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* Info column */
.brx-upsell-card-body {
	flex:           1;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	gap:            3px;
}
.brx-upsell-name {
	font-size:      12px;
	font-weight:    500;
	color:          var(--binrock-navy);
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
	text-decoration: none;
	display:        block;
}
.brx-upsell-price {
	font-size: 12px;
	color:     var(--binrock-muted);
}

/* Cart item thumb placeholder (no image assigned) */
.brx-cart-item-thumb-placeholder {
	width:       64px;
	height:      64px;
	background:  var(--binrock-cream);
	flex-shrink: 0;
}

/* Upsell size buttons */
.brx-upsell-sizes {
	display:         flex;
	flex-wrap:       wrap;
	gap:             4px;
	margin-top:      5px;
	justify-content: flex-start;
}
.brx-upsell-size {
	background:     none;
	border:         1px solid rgba(15, 27, 45, 0.25);
	padding:        3px 7px;
	font-family:    'DM Sans', sans-serif;
	font-size:      10px;
	letter-spacing: 0.06em;
	color:          var(--binrock-navy);
	cursor:         pointer;
	transition:     background 150ms ease, color 150ms ease, border-color 150ms ease;
	min-width:      28px;
	text-align:     center;
	line-height:    1.4;
}
.brx-upsell-size:hover:not(:disabled) {
	background:   var(--binrock-navy);
	color:        var(--binrock-white);
	border-color: var(--binrock-navy);
}
.brx-upsell-size.is-oos,
.brx-upsell-size:disabled {
	opacity: 0.35;
	cursor:  not-allowed;
}
.brx-upsell-size--simple {
	padding:   4px 10px;
	font-size: 10px;
}

/* Drawer footer */
.brx-cart-drawer-footer {
	flex-shrink:  0;
	padding:      16px 24px 24px;
	border-top:   1px solid rgba(15, 27, 45, 0.08);
	display:      flex;
	flex-direction: column;
	gap:          10px;
}
.brx-cart-checkout-btn {
	display:         block;
	width:           100%;
	padding:         14px;
	background:      var(--binrock-navy);
	color:           var(--binrock-white);
	font-family:     'DM Sans', sans-serif;
	font-size:       12px;
	font-weight:     500;
	letter-spacing:  0.14em;
	text-transform:  uppercase;
	text-align:      center;
	border:          none;
	cursor:          pointer;
	transition:      background 200ms ease;
}
.brx-cart-checkout-btn:hover {
	background: var(--binrock-accent);
	color:      var(--binrock-white);
}
.brx-cart-continue {
	display:         block;
	text-align:      center;
	font-family:     'DM Sans', sans-serif;
	font-size:       11px;
	letter-spacing:  0.10em;
	text-transform:  uppercase;
	color:           var(--binrock-muted);
	text-decoration: none;
	padding:         4px 0;
	transition:      color 150ms ease;
}
.brx-cart-continue:hover { color: var(--binrock-navy); }

/* Mobile */
@media (max-width: 480px) {
	.brx-cart-drawer { width: 100vw; }
	.brx-cart-drawer-header { padding: 16px 20px; }
	.brx-cart-items-wrap    { padding: 0 20px; }
	.brx-cart-upsell        { padding: 20px 20px 12px; }
	.brx-cart-drawer-footer { padding: 14px 20px 20px; }
}

/* ============================================================
   CHECKOUT — Minimalista Apple/FATE
   ============================================================ */

/* ── Variables locales del checkout ── */
:root {
	--brx-co-border:  #e0e0e0;
	--brx-co-label:   #999;
	--brx-co-focus:   var(--ast-global-color-0, #046bd2);
	--brx-co-radius:  4px;
	--brx-co-btn-r:   6px;
}

/* ── Page layout ── */
body.woocommerce-checkout #primary,
body.woocommerce-checkout .ast-container,
body.woocommerce-checkout .entry-content { max-width: 100% !important; padding: 0 !important; }

/* Checkout header: binrock header fijo en top:0 (sin topbar), Astra masthead y catbar ocultos */
body.woocommerce-checkout #masthead           { display: none !important; }
body.woocommerce-checkout .binrock-catbar     { display: none !important; }
body.woocommerce-checkout #binrockHeader {
	position:   fixed !important;
	top:        0 !important;
	margin-top: 0 !important;
	z-index:    9999 !important;
	width:      100% !important;
	left:       0 !important;
}
/* #page compensates the 64px fixed header */
body.woocommerce-checkout #page {
	padding-top: 64px !important;
	margin-top:  0 !important;
}

/* Zero out all other Astra wrappers that could add top spacing */
body.woocommerce-checkout,
body.woocommerce-checkout #content,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout main,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout #primary,
body.woocommerce-checkout article,
body.woocommerce-checkout .hentry,
body.woocommerce-checkout .ast-article-single { padding: 0 !important; margin-top: 0 !important; }

/* ── Wrapper principal ── */
.brx-checkout-form {
	max-width: 560px;
	margin:    40px auto 80px;
	padding:   0 20px;
}

@media (min-width: 640px) {
	.brx-checkout-form { padding: 0; }
}

/* ── Colapsar layout flotante de WC ── */
.brx-checkout-form .col2-set,
.brx-checkout-form #customer_details.col2-set,
.brx-checkout-form .col2-set .col-1,
.brx-checkout-form .col2-set .col-2 { float: none; width: 100%; }

.brx-checkout-fields,
.brx-checkout-billing,
.brx-checkout-shipping { width: 100%; }

/* ── Section headings ── */
.brx-checkout-form h3 {
	font-size:      13px;
	font-weight:    600;
	letter-spacing: 0.04em;
	color:          inherit;
	margin:         32px 0 16px;
	padding:        0;
	border:         none;
}
.brx-checkout-form h3:first-child { margin-top: 0; }

/* ── Labels ── */
.brx-checkout-form label,
.brx-checkout-form .woocommerce-form-row label {
	display:        block;
	font-size:      11px;
	font-weight:    500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--brx-co-label);
	margin-bottom:  6px;
}

.brx-checkout-form .optional { display: none; }

/* ── Inputs, selects, textareas ── */
.brx-checkout-form input[type="text"],
.brx-checkout-form input[type="email"],
.brx-checkout-form input[type="tel"],
.brx-checkout-form input[type="number"],
.brx-checkout-form input[type="password"],
.brx-checkout-form select,
.brx-checkout-form textarea {
	width:              100%;
	height:             48px;
	padding:            0 14px;
	background:         #ffffff;
	border:             1px solid var(--brx-co-border);
	border-radius:      var(--brx-co-radius);
	font-size:          14px;
	color:              inherit;
	outline:            none;
	box-shadow:         none;
	appearance:         none;
	-webkit-appearance: none;
	transition:         border-color 140ms ease;
}
.brx-checkout-form textarea {
	height:  auto;
	padding: 14px;
	resize:  vertical;
}
.brx-checkout-form input:focus,
.brx-checkout-form select:focus,
.brx-checkout-form textarea:focus {
	border-color: var(--brx-co-focus);
	box-shadow:   none;
}

/* Placeholder */
.brx-checkout-form input::placeholder,
.brx-checkout-form textarea::placeholder { color: #c4c4c4; }

/* Select arrow */
.brx-checkout-form select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 14px center;
	padding-right:       40px;
}

/* ── Field rows ── */
.brx-checkout-form p.form-row,
.brx-checkout-form .woocommerce-input-wrapper { width: 100%; float: none; clear: both; }
.brx-checkout-form p.form-row { margin: 0 0 16px; }

/* ── First name / Last name — grid 2 columnas ── */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
	display:               grid;
	grid-template-columns: 1fr;
	column-gap:            16px;
}

@media (min-width: 480px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}
	/* First y Last name: columna 1 y 2 */
	.woocommerce-billing-fields__field-wrapper .form-row-first,
	.woocommerce-shipping-fields__field-wrapper .form-row-first { grid-column: 1; }
	.woocommerce-billing-fields__field-wrapper .form-row-last,
	.woocommerce-shipping-fields__field-wrapper .form-row-last  { grid-column: 2; }
	/* Todo lo demás ocupa las 2 columnas */
	.woocommerce-billing-fields__field-wrapper p:not(.form-row-first):not(.form-row-last),
	.woocommerce-shipping-fields__field-wrapper p:not(.form-row-first):not(.form-row-last) {
		grid-column: 1 / -1;
	}
}

/* ── Espaciado entre grupos de 32px ── */
.brx-checkout-form .woocommerce-billing-fields,
.brx-checkout-form .woocommerce-shipping-fields,
.brx-checkout-form .woocommerce-additional-fields { margin-bottom: 32px; }

/* ── Coupon — discreto ── */
.woocommerce-info {
	background:  transparent;
	border:      none;
	padding:     0 0 16px;
	font-size:   13px;
	color:       var(--brx-co-label);
}
.woocommerce-info a.showcoupon {
	color:           inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.woocommerce-form-coupon {
	background: transparent;
	border:     none;
	padding:    0 0 32px;
	box-shadow: none;
	display:    flex;
	gap:        8px;
	align-items:flex-end;
}
.woocommerce-form-coupon .form-row { margin: 0; flex: 1; }
.woocommerce-form-coupon .form-row-last { flex: 0 0 auto; width: auto !important; }
.woocommerce-form-coupon button[type="submit"] {
	height:         48px;
	padding:        0 20px;
	background:     transparent;
	border:         1px solid var(--brx-co-border);
	border-radius:  var(--brx-co-radius);
	font-size:      13px;
	font-weight:    500;
	color:          inherit;
	cursor:         pointer;
	white-space:    nowrap;
	transition:     border-color 140ms ease;
}
.woocommerce-form-coupon button[type="submit"]:hover { border-color: var(--brx-co-focus); }

/* ── Resumen del pedido — <details> ── */
.brx-order-summary {
	border:        1px solid var(--brx-co-border);
	border-radius: var(--brx-co-radius);
	margin-bottom: 32px;
	overflow:      hidden;
}

.brx-order-summary__toggle {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         16px 18px;
	cursor:          pointer;
	list-style:      none;
	user-select:     none;
}
.brx-order-summary__toggle::-webkit-details-marker { display: none; }

.brx-order-summary__label {
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--brx-co-label);
}

.brx-order-summary__chevron {
	color:      var(--brx-co-label);
	flex-shrink:0;
	transition: transform 200ms ease;
}
.brx-order-summary[open] .brx-order-summary__chevron { transform: rotate(180deg); }

.brx-order-summary__body {
	padding:    0 18px 18px;
	border-top: 1px solid var(--brx-co-border);
}

.brx-order-summary .shop_table {
	width:           100%;
	border-collapse: collapse;
	font-size:       14px;
}
.brx-order-summary .shop_table thead { display: none; }

.brx-order-summary .shop_table tbody td,
.brx-order-summary .shop_table tfoot th,
.brx-order-summary .shop_table tfoot td {
	padding:        12px 0;
	border-bottom:  1px solid var(--brx-co-border);
	vertical-align: middle;
}
.brx-order-summary .shop_table tfoot td,
.brx-order-summary .shop_table tbody td.product-total { text-align: right; }
.brx-order-summary .shop_table tfoot th { color: var(--brx-co-label); font-weight: 400; }

.brx-order-summary .shop_table tfoot tr.order-total th,
.brx-order-summary .shop_table tfoot tr.order-total td {
	font-weight:  600;
	font-size:    15px;
	border-bottom:none;
}

.brx-order-summary .product-quantity { color: var(--brx-co-label); font-weight: 400; }
.brx-order-summary .remove-coupon    { color: var(--brx-co-label); font-size: 12px; }

/* ── Métodos de pago ── */
.brx-order-review #payment {
	background:    transparent;
	border:        none;
	border-radius: 0;
	margin-top:    0;
	padding:       0;
}

#payment .wc_payment_methods {
	list-style:    none;
	margin:        0 0 20px;
	padding:       0;
	border:        1px solid var(--brx-co-border);
	border-radius: var(--brx-co-radius);
	overflow:      hidden;
}

#payment .wc_payment_methods li {
	padding:       0;
	border-bottom: 1px solid var(--brx-co-border);
}
#payment .wc_payment_methods li:last-child { border-bottom: none; }

/* Radio nativo oculto */
#payment .wc_payment_methods li input[type="radio"] {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
	margin:   0;
}

/* Label como fila flex */
#payment .wc_payment_methods li label {
	display:     flex;
	align-items: center;
	gap:         12px;
	padding:     16px 18px;
	font-size:   14px;
	font-weight: 400;
	color:       inherit;
	cursor:      pointer;
	margin:      0;
	transition:  background 120ms ease;
}
#payment .wc_payment_methods li label:hover { background: #f8f8f8; }

/* Círculo custom — inyectado via ::before en el label */
#payment .wc_payment_methods li label::before {
	content:       '';
	flex-shrink:   0;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	border:        1.5px solid var(--brx-co-border);
	transition:    border-color 140ms ease, box-shadow 140ms ease;
}

/* Estado checked */
#payment .wc_payment_methods li input[type="radio"]:checked + label::before {
	border-color: var(--brx-co-focus);
	box-shadow:   inset 0 0 0 4px var(--brx-co-focus);
}

/* Logos de tarjeta (imágenes inline a la derecha) */
#payment .wc_payment_methods li label img {
	margin-left: auto;
	height:      20px;
	width:       auto;
	flex-shrink: 0;
	object-fit:  contain;
}

/* Descripción del método */
.payment_box {
	background:  #f8f8f8;
	border:      none;
	border-top:  1px solid var(--brx-co-border);
	padding:     14px 18px;
	font-size:   13px;
	color:       var(--brx-co-label);
	margin:      0;
}
.payment_box::before { display: none; }
.payment_box p { margin: 0; }

/* ── Botón "Realizar pedido" ── */
#payment .form-row.place-order {
	padding: 0;
	margin:  0;
	float:   none;
	width:   100%;
}

.brx-order-review #place_order,
.woocommerce-checkout #place_order,
#payment .form-row.place-order #place_order {
	display:        block;
	width:          100%;
	height:         52px;
	padding:        0 24px;
	background:     var(--brx-co-focus);
	color:          #ffffff;
	font-size:      15px;
	font-weight:    600;
	letter-spacing: 0.02em;
	text-align:     center;
	border:         none;
	border-radius:  var(--brx-co-btn-r);
	box-shadow:     none;
	cursor:         pointer;
	transition:     opacity 150ms ease;
}
.brx-order-review #place_order:hover,
.woocommerce-checkout #place_order:hover { opacity: 0.88; }

/* ── Terms & condiciones ── */
.brx-checkout-form .woocommerce-terms-and-conditions-wrapper {
	font-size:  12px;
	color:      var(--brx-co-label);
	margin-top: 14px;
}

/* ── Ocultar propina ── */
.wc-block-checkout__add-tip,
.woocommerce-checkout-tip,
.ast-checkout-tip,
.ast-woo-checkout-tip,
[class*="checkout-tip"],
[class*="checkout_tip"] { display: none !important; }

/* ── Validación ── */
.brx-checkout-form .woocommerce-invalid input,
.brx-checkout-form .woocommerce-invalid select { border-color: #e53e3e; }

/* ── Login form ── */
.woocommerce-form-login { border: none; padding: 0; box-shadow: none; }
.woocommerce-form-login .form-row { margin-bottom: 12px; }

/* ── Mensajes WC ── */
.woocommerce-error { font-size: 13px; border-radius: var(--brx-co-radius); }
.woocommerce-message { display: none !important; }

/* ============================================================
   OCULTAR HEADER/FOOTER NATIVOS DE ASTRA
   Binrock usa su propio header.php y footer.php globales.
   ============================================================ */
#masthead,
#colophon { display: none !important; }

/* ============================================================
   OCULTAR ELEMENTOS ASTRA/UAGB INNECESARIOS EN SHOP
   ============================================================ */

/* 1. Toolbar de filtros de Astra — solo en archivos de productos */
body.post-type-archive-product .ast-shop-toolbar-container,
body.tax-product_cat           .ast-shop-toolbar-container { display: none !important; }

/* 2. Heading "Binrock Store" de UAGB — solo en página de shop */
body.woocommerce-shop .wp-block-uagb-advanced-heading { display: none !important; }

/* 3. Breadcrumb — oculto en archivos; visible en producto single */
body.post-type-archive-product .woocommerce-breadcrumb,
body.tax-product_cat           .woocommerce-breadcrumb,
body.woocommerce-shop          .woocommerce-breadcrumb { display: none !important; }

/* ============================================================
   #br-modal — POPUP WELCOME10 (snippet Code Snippets #23)
   Overrides inline <style> injected by wp_footer via !important.
   Aligns design to Binrock theme: DM Sans, navy/cream palette,
   square corners, same ATC-button style for the submit.
   ============================================================ */

/* ANTES (original snippet):
   - Font: EuropaGrotesk
   - border-radius: 16px (modal), 8px (inputs/button)
   - Colors: #000 text, rgba(0,0,0,.55) overlay
   - Title: 28px / weight 800
   - Submit: scale(1.03) hover, rounded

   DESPUÉS (override):
   - Font: DM Sans (hereda del tema)
   - border-radius: 0 en todo
   - Colors: --binrock-navy (#0f1b2d), --binrock-cream (#f5f0e8)
   - Overlay: rgba(15,27,45,0.65)
   - Title: 20px / uppercase / letter-spacing 0.08em
   - Submit: 46px height, square, navy/cream, igual al ATC del PDP
*/

#br-overlay {
	background: rgba(15, 27, 45, 0.65) !important;
}

#br-modal {
	font-family:   'DM Sans', sans-serif !important;
	border-radius: 0 !important;
	padding:       36px 28px 28px !important;
	width:         min(400px, 92vw) !important;
	box-shadow:    0 12px 48px rgba(15, 27, 45, 0.28) !important;
}

#br-close {
	font-size: 16px !important;
	color:     rgba(15, 27, 45, 0.45) !important;
	top:       14px !important;
	right:     16px !important;
	transition: color 150ms ease;
}
#br-close:hover { color: #0f1b2d !important; }

#br-title {
	font-family:    'DM Sans', sans-serif !important;
	font-size:      20px !important;
	font-weight:    700 !important;
	color:          #0f1b2d !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin:         0 0 8px !important;
}

#br-sub {
	font-family:    'DM Sans', sans-serif !important;
	font-size:      12px !important;
	font-weight:    400 !important;
	color:          rgba(15, 27, 45, 0.6) !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	line-height:    1.5 !important;
	margin:         0 0 20px !important;
}

#br-form input[type="email"] {
	font-family:   'DM Sans', sans-serif !important;
	border-radius: 0 !important;
	border:        1px solid rgba(15, 27, 45, 0.25) !important;
	font-size:     13px !important;
	letter-spacing: 0.04em !important;
	padding:       12px 14px !important;
	margin-bottom: 10px !important;
	color:         #0f1b2d !important;
}
#br-form input[type="email"]:focus {
	outline:    none !important;
	border-color: #0f1b2d !important;
	box-shadow: none !important;
}

#br-form input[type="submit"],
#br-form button[type="submit"] {
	font-family:    'DM Sans', sans-serif !important;
	border-radius:  0 !important;
	background:     #0f1b2d !important;
	color:          #f5f0e8 !important;
	height:         46px !important;
	padding:        0 !important;
	font-size:      11px !important;
	font-weight:    500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	transition:     background 200ms ease !important;
	transform:      none !important;
}
#br-form input[type="submit"]:hover,
#br-form button[type="submit"]:hover {
	background: rgba(15, 27, 45, 0.82) !important;
	transform:  none !important;
}

#br-code {
	font-family:    'DM Sans', sans-serif !important;
	font-size:      14px !important;
	letter-spacing: 0.08em !important;
	color:          #0f1b2d !important;
	margin-top:     16px !important;
	margin-bottom:  8px !important;
}
#br-code span {
	border-radius: 0 !important;
	background:    #f5f0e8 !important;
	border:        1px solid rgba(15, 27, 45, 0.15) !important;
	font-weight:   700 !important;
	letter-spacing: 0.1em !important;
	padding:       6px 14px !important;
}

@media (max-width: 720px) {
	#br-title {
		font-size:   18px !important;
		margin-bottom: 6px !important;
	}
	#br-modal {
		padding: 28px 20px 24px !important;
	}
}