/*
Theme Name: SharkCards Theme
Author: Fran Rosa / Volcanic Internet
Author URI: https://volcanicinternet.com
Text Domain: sharkcards
Description: Gutenberg block theme for SharkCards
Version: 1.1
*/

body {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-family: 'Inter', sans-serif;
	line-height: 1.625;
}
a, a:hover, a:visited {
	color: inherit;
}
h1, h2, h3, h4, h5, h6 {
	font: inherit;
	margin: 0;
	padding: 0;
}
.visually-hidden {
	border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute!important;
    width: 1px;
    word-wrap: normal!important;
    word-break: normal!important
}
header {
	border: none;
	border-bottom: var(--wp--preset--color--white-40) solid 1px;
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--wp--preset--color--black);
}
header .wp-block-site-logo {
	max-width: 50%;
	order: 2;
}
header nav {
	order: 1;
}
header nav[aria-label="Iconos"] {
	order: 3;
}
@media (min-width: 1300px) {
	header .wp-block-site-logo {
		order: 1;
	}
	header nav {
		order: 2;
	}
	header nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    header nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
    }
}
/* Overriding default mobile menu breakpoint */
@media (min-width: 600px) {
    header nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    header nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}
header nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation {
	padding: 1.5rem;
}
header nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.5rem;
	right: 1.5rem;
}
header nav ul.wp-block-navigation {
	display: flex;
	flex-flow: row nowrap;
	gap: .75em;
}
header nav[aria-label="Iconos"] ul.wp-block-navigation {
	gap: 1.25rem;
}
header nav ul.wp-block-navigation li a,
.subtitle {
	font-size: .75rem;
	letter-spacing: .15rem;
	text-transform: uppercase;
	line-height: 1.5;
}
header nav ul.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
}
/* Estil unificat per a hover i pàgina activa al menú de navegació */
header nav ul.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content:hover,
header nav ul.wp-block-navigation li.wp-block-navigation-item.current-menu-item a.wp-block-navigation-item__content,
header nav ul.wp-block-navigation li.wp-block-navigation-item.current_page_item a.wp-block-navigation-item__content {
    color: var(--wp--preset--color--gold) !important;
    border-bottom: 2px solid var(--wp--preset--color--gold);
    font-weight: 600;
}
header nav[aria-label="Iconos"] ul.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content.wp-block-navigation-item__content .wp-block-navigation-item__label {
	border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute!important;
    width: 1px;
    word-wrap: normal!important;
    word-break: normal!important
}
header nav[aria-label="Iconos"] ul.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content.wp-block-navigation-item__content .wp-block-navigation-item__icon {
	font-size: 1.125rem;
}
header nav[aria-label="Iconos"] ul.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content.wp-block-navigation-item__content .wp-block-navigation-item__icon svg {
	stroke: var(--wp--preset--color--white);
	fill: none !important;
	stroke-width: 2 !important;
}
header nav[aria-label="Iconos"] ul.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover .wp-block-navigation-item__icon svg {
	stroke: var(--wp--preset--color--gold) !important;
}
/* Cart item-count badge (see inc/cart-drawer.php: sharkcards_get_cart_count_badge_html())
   — same treatment as the checkout order summary's quantity badge: background
   matches the page background, number in gold using the .number font. */
header nav[aria-label="Iconos"] ul.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	position: relative;
}
.cart-count-badge {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 .25em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--gold);
	font-family: 'JetBrainsMono', monospace;
	font-size: .625rem;
	line-height: 1;
}
.cart-count-badge[hidden] {
	display: none;
}
main > .is-layout-constrained > .wrapper > div {
	padding-left: 1.5em;
	padding-right: 1.5em;
}
.title {
	font-family: var(--wp--preset--font-family--cormorantgaramond);
	line-height: 1;
}
.title.hero {
	font-size: 3em;
}
@media (min-width: 1024px) {
	.title.hero {
		font-size: 6em;
	}
}
.title.hero em {
	font-style: italic;
	color: var(--wp--preset--color--gold);
}
.number {
	font-family: 'JetBrainsMono', monospace;
	line-height: 1;
}
.body-text {
	font-family: var(--wp--preset--font-family--inter);
	line-height: 1.625;
}
.gold {
	color: var(--wp--preset--color--gold);
}
.black {
	color: var(--wp--preset--color--black);
}
.white {
	color: var(--wp--preset--color--white);
}
.with-green-circle::before,
.with-yellow-circle::before {
    content: '';
    display: inline-block;
    width: .8em;
    height: .8em;
    border-radius: 100%;
    margin-right: .75em;
}
.with-green-circle::before {
	background-color: rgb(52, 178, 98);
}
.with-yellow-circle::before {
	background-color: rgb(244, 168, 37);
}
/* Out-of-stock label — product card (inc/acf/blocks/product/product.php) and
   single product page (woocommerce/content-single-product.php). Its own
   explicit black background rather than the card/page's own (translucent)
   background, so it reads as a clear flag regardless of what it's sitting on. */
.out-of-stock-badge {
	display: inline-block;
	background-color: var(--wp--preset--color--black);
	padding: .25rem .625rem;
}
.ctas {
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
}
/* Site-wide: every real <button> (whatever its class — dialog-close, tab
   triggers, cart quantity steppers, etc.) and every button-styled link/label
   (.cta, .button-like, .gold-button) gets a pointer cursor. Browsers don't
   apply this to <button> by default the way they do for links. */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.cta,
.button-like,
.gold-button {
	cursor: pointer;
}
button:disabled {
	cursor: not-allowed;
}
.ctas a.cta,
button.gold-button,
.button-like {
	flex: 0 0 auto;
	font-size: .875rem;
	letter-spacing: .15rem;
	text-transform: uppercase;
	text-decoration: none;
	padding: .75rem 1.5rem;
	border : 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);
}
.ctas a.cta.fill,
button.gold-button.fill,
.button-like.fill {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--black);
}
.ctas a.cta.fill:hover,
button.gold-button.fill:hover,
.button-like.fill:has( > input[checked="checked"]) {
	border-color: var(--wp--preset--color--gold);
	background-color: color-mix(in srgb, var(--wp--preset--color--gold), white 10%);
}
.ctas a.cta.fill .cta-icon,
.ctas a.cta.outline .cta-icon,
.standalone-icon {
	align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--icon-size, 1em);
    justify-content: center;
    line-height: 0;
    width: var(--icon-size, 1em);
	vertical-align: -.15em;
}
.ctas a.cta.fill .cta-icon svg,
.ctas a.cta.outline .cta-icon svg,
.standalone-icon svg {
	display: block;
	height: 100%;
	width: 100%;
	stroke: var(--wp--preset--color--black) !important;
	fill: none !important;
	stroke-width: 2 !important;
}
.ctas a.cta.fill .cta-icon svg,
.standalone-icon.black svg {
	stroke: var(--wp--preset--color--black) !important;
}
.ctas a.cta.outline,
button.gold-button.outline,
.button-like.outline {
	background-color: transparent;
	color: var(--wp--preset--color--gold);
}
.ctas a.cta.outline:hover,
button.gold-button.outline:hover,
.button-like.outline:has( > input[checked="checked"]) {
	border-color: var(--wp--preset--color--gold);
	background-color: color-mix(in srgb, var(--wp--preset--color--gold) 8%, transparent);
}
.ctas a.cta.outline .cta-icon svg,
.standalone-icon.gold svg {
	stroke: var(--wp--preset--color--gold) !important;
}
.standalone-icon.white svg {
	stroke: var(--wp--preset--color--white) !important;
}
.standalone-icon.white-75 svg {
	stroke: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent) !important;
}
.ctas.full-size {
	justify-content: stretch;
}
.ctas.full-size a.cta,
.ctas.full-size button.gold-button
 {
	text-align: center;
}
.ctas.full-size a.cta.fill,
.ctas.full-size button.gold-button {
	flex-grow: 1;
}
.ctas a.cta.is-disabled {
	opacity: .4;
	pointer-events: none;
}
.presale-members-only-notice {
	margin-top: .75rem;
}
button.gold-button:disabled {
	opacity: .4;
}
.alignwide {
	margin-inline: 1.25rem;
}
.with-border {
	border: none;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
}
.light-background {
    background-color: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
}
.text-75 {
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
}
/* "Solo texto" page template (template-solo-texto.php) — a selectable
   template for simple content pages (privacy policy, cookies, terms...)
   whose content comes from whatever the editor produced (the_content()),
   not hand-built markup like the rest of the site's pages. This used to live
   scoped to index.php (the generic fallback template), but since that
   fallback applies to ANY content without a specific template, those styles
   were leaking onto unrelated pages — moved to this opt-in template instead.
   The base h1-h6 reset above (font: inherit) intentionally leaves headings
   unstyled by default elsewhere on the site (opt-in via .title), but here
   there's no markup to add that class to, so headings are targeted directly
   instead, scoped to this template's own wrapper only. */
.solo-texto .title,
.solo-texto h1,
.solo-texto h2,
.solo-texto h3,
.solo-texto h4,
.solo-texto h5,
.solo-texto h6 {
	font-family: var(--wp--preset--font-family--cormorantgaramond);
}
.solo-texto h1 {
	font-size: 3rem;
	padding: 2rem 0;
}
.solo-texto h2 {
	font-size: 2rem;
}
.solo-texto h3 {
	font-size: 1.5rem;
}
.solo-texto h4 {
	font-size: 1.25rem;
}
.solo-texto h5 {
	font-size: 1.125rem;
}
.solo-texto h6 {
	font-size: 1rem;
}
.solo-texto p,
.solo-texto li,
.solo-texto blockquote {
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
}
.solo-texto table th,
.solo-texto table td {
	text-align: left;
	vertical-align: top;
}
.small-text {
	font-size: .875rem;
}
.no-decoration {
	text-decoration: none !important;
}
.display-block {
	display: block;
}
.display-flex {
	display: flex;
}
.display-flex.column {
	flex-direction: column;
}
.display-flex.row {
	flex-direction: row;
}
@media (min-width: 1024px) {
	.members-and-next-event > .wrapper {
		flex-direction: row;
	}
}
footer {
	font-size: .875rem;
}
@media (min-width: 1024px) {
	footer .wrapper {
		flex-direction: row;
	}	
}
footer .wrapper > div {
	flex: 1 1 0;
}
footer nav {
	margin-top: 0 !important;
}
footer nav ul.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
	text-decoration: none;
}
footer nav ul.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	text-decoration: underline;
}
.woocommerce-categories {
	padding: 2.5rem 1.5rem;
}
.woocommerce-categories > .subtitle {
	margin-bottom: 1rem;
}
.woocommerce-categories ul.categories {
    margin: 0 !important;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .woocommerce-categories ul.categories {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
.wocommerce-products {
	display: grid;
	grid-template-columns: 1fr;
	padding-bottom: 2.5rem;
}
@media (min-width: 1024px) {
    .wocommerce-products {
		grid-template-columns: 1fr 3fr;
	}
}
.wocommerce-products ul.products {
    margin: 0 !important;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.wocommerce-products ul.products::before {
	display: none;
	content: none;
}
@media (min-width: 768px) {
    .wocommerce-products ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Mystery packs archive (woocommerce/taxonomy-product_cat-mystery-packs.php)
   — same card grid as the shop, without the sidebar-grid wrapper around it
   (no filters on this page), so it can't reuse .wocommerce-products itself:
   that class's own desktop rule (1fr 3fr, for the sidebar) would squeeze a
   sidebar-less grid into its narrower first column. */
.mystery-packs-products {
    padding: 1.5rem 0 2.5rem;
}
.mystery-packs-products ul.products {
    margin: 0 !important;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.mystery-packs-products ul.products::before {
    display: none;
    content: none;
}
@media (min-width: 768px) {
    .mystery-packs-products ul.products {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.single-product-content {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 2rem;
	padding: 1.5rem;
}
@media (min-width: 1024px) {
	.single-product-content {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.single-product-content .product-gallery .woocommerce-product-gallery {
	opacity: 1 !important;
}
.single-product-content .product-gallery .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-flow: row wrap;
	gap: .75rem;
	box-sizing: border-box;
}
.single-product-content .product-gallery .woocommerce-product-gallery__image {
	margin: 0;
	border: solid 1px color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	box-sizing: border-box;
}
.single-product-content .product-gallery .woocommerce-product-gallery__image:first-child {
	flex: 1 0 100%;
}
.single-product-content .product-gallery .woocommerce-product-gallery__image:not(:first-child) {
	flex: 0 1 calc(25% - .5625rem);
	cursor: pointer;
}
.single-product-content .product-gallery .woocommerce-product-gallery__image:not(:first-child):has(a:hover) {
	border : 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);
}
.single-product-content .product-gallery .woocommerce-product-gallery__image:not(:first-child).is-active,
.single-product-content .product-gallery .woocommerce-product-gallery__image:not(:first-child).is-active:has(a:hover) {
	border : 1px solid var(--wp--preset--color--gold);
}
.single-product-content .product-gallery .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
	height: 100%;
}
.single-product-content .product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/*object-fit: cover;*/
	object-position: center;
}
.single-product-content .product-info {
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;
}
.single-product-content .product-info h1 {
	font-size: 3rem;
}
.single-product-content .product-info .presale-info {
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);
    padding: 1.5rem;
	display: flex;
    flex-flow: column nowrap;
    gap: .75rem;
    background-color: color-mix(in srgb, var(--wp--preset--color--gold) 5%, transparent);
}
.single-product-content .product-info .prices {
	padding: 1.25rem 0;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	justify-content: space-between;
	border: none;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.single-product-content .product-info .prices .price {
	font-size: 2.25rem;
}
.single-product-content .product-info .stream-discount {
	padding: 1.5rem;
	border: solid 1px color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.single-product-content .product-info .stream-discount label {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: .75rem;
	cursor: pointer;
}
.single-product-content .product-info .stream-discount label input[type="checkbox"] {
	margin-top: .5rem;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--gold);
}
.single-product-content .product-info .stream-discount label .texts {
	flex: 1 1 auto;
}
.single-product-content .product-info .stream-discount label .texts > span {
	display: block;
}
.single-product-content .product-info .edition .subtitle {
	margin-bottom: .75rem;
}
.single-product-content .product-info .edition .edition-options {
	display: flex;
	flex-flow: row wrap;
	gap: .5rem;
}
.single-product-content .product-info .edition .edition-options label.button-like {
	position: relative;
	cursor: pointer;
}
.single-product-content .product-info .edition .edition-options label.button-like input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.single-product-content .product-info .edition .edition-options .flag-icon {
	margin-right: .375rem;
}
.single-product-content .product-info .presale-info .countdown {
	flex: 0 0 auto;
    display: flex;
    flex-flow: row wrap;
    align-self: flex-start;
    gap: .75rem;
}
.single-product-content .product-info .presale-info .countdown > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    padding: .75rem;
    border: solid 1px color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.single-product-content .product-info .presale-info .countdown .number {
    font-size: 1.5rem;
    color: var(--wp--preset--color--gold);
}
.single-product-content .product-info .presale-info .countdown .unit {
    font-size: .688rem;
    letter-spacing: .08em;
    line-height: 1.5;
    text-transform: uppercase;
}
.single-product-content .product-info .conditions {
	align-items: stretch;
	padding: 1.5rem 0;
	border: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.single-product-content .product-info .conditions > div {
	flex-grow: 1;
	display: flex;
	flex-flow: row nowrap;
	gap: .75rem;
	align-items: center;
}
.single-product-content .product-info .product-meta {
	margin: 0;
	padding: 0;
	flex-direction: column;
	gap: .5rem;
}
.single-product-content .product-info .product-meta li {
	flex-direction: row;
	align-items: baseline;
	gap: .5rem;
}
.single-product-content .product-info .product-meta li span {
	flex: 1 1 0;
}
.shop-results-bar {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 1.5rem;
}
.shop-results-bar > div {
	flex: 0 0 auto;
}
@media (max-width: 599px) {
	.shop-results-bar {
		flex-flow: column nowrap;
		align-items: flex-start;
		gap: .75rem;
	}
}
.shop-results-bar label {
	margin-right: .75rem;
}
.sharkcards-shop-filters {
	padding: 1.5rem;
}
.sharkcards-shop-filters .shop-filter-group {
	margin-bottom: 2rem;
}
.sharkcards-shop-filters .shop-filter-group > label {
	display: block;
	margin-bottom: .75rem;
}
.sharkcards-shop-filters .shop-filter-group select,
.shop-results-bar select {
	font-size: .875rem;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
	padding: .5rem 1rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 8%, var(--wp--preset--color--black));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
}
.sharkcards-shop-filters .shop-filter-group select {
	width: 100%;
}
.sharkcards-shop-filters .shop-filter-group .shop-filter-options label {
	display: block;
	font-size: .875rem;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
	margin-bottom: .5rem;
	cursor: pointer;
}
.sharkcards-shop-filters .shop-filter-group .shop-filter-options label input {
	accent-color: var(--wp--preset--color--gold);
}
/* Subcategory filter: select on mobile/tablet, checkbox list on desktop —
   same choice, two controls (see woocommerce/global/sidebar.php). */
.sharkcards-shop-filters .shop-filter-subcategory-checkboxes {
	display: none;
}
@media (min-width: 1024px) {
	.sharkcards-shop-filters .shop-filter-subcategory-select {
		display: none;
	}
	.sharkcards-shop-filters .shop-filter-subcategory-checkboxes {
		display: block;
	}
}
.events-archive-intro {
	padding: 2rem 0;
}
.events-list {
	display: flex;
	flex-flow: column nowrap;
	gap: 0;
	padding: 4rem 1.5rem;
	margin: 0;
}
.events-list .event-card {
	display: block;
	padding: 0;
	margin: 0;
}
.events-list .event-card .card-link {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	text-decoration: none;
}
.events-list .event-card .card-link:has(.event-name .title a:hover) {
	border-color: var(--wp--preset--color--gold);
}
.events-list .event-date {
	flex: 0 0 10rem;
}
.events-list .event-date .day {
	font-size: 1.875rem;
}
.events-list .event-name {
	flex: 1 1 auto;
	min-width: 0;
}
.events-list .event-name .title {
	font-size: 1.5rem;
}
.events-list .event-name .title a {
	text-decoration: none;
	color: inherit;
}
.events-list .event-name .title a::after {
	content: '';
	position: absolute;
	inset: 0;
}
.events-list .event-price {
	flex: 0 0 6rem;
	font-size: 1.125rem;
}
.events-list .event-card .card-link .button-like {
	flex: 0 0 9rem;
	text-align: center;
}
.events-list .no-events {
	list-style: none;
}
.single-product-content.event-single-content .product-info h1 {
	font-size: 3.75rem;
}
.single-product-content.event-single-content .product-info .event-details {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
	padding: 1.5rem 0;
	border: none;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
@media (min-width: 1024px) {
	.single-product-content.event-single-content .product-info .event-details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.single-product-content.event-single-content .product-info .event-detail-item {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: .75rem;
}
.single-product-content.event-single-content .product-info .event-detail-item .texts {
	flex-direction: column;
	gap: .5rem;
}
.single-product-content.event-single-content .product-info .event-detail-item .texts .title {
	font-size: 1.25rem;
}
.single-product-content.event-single-content .product-info .event-section {
	padding: 1.5rem 0;
	border: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.single-product-content.event-single-content .product-info .event-section .title {
	margin-bottom: 1rem;
}
.single-product-content.event-single-content .product-info .event-section .title h2 {
	font-size: 1.5rem;
}
.single-product-content.event-single-content .product-info .awards-list {
	display: flex;
	flex-flow: column nowrap;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.single-product-content.event-single-content .product-info .award-item {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.single-product-content.event-single-content .product-info .award-item .position {
	flex: 0 0 auto;
	font-size: .875rem;
}
.single-product-content.event-single-content .product-info .award-item .prize {
	flex: 0 0 auto;
	font-size: 1.125rem;
	margin-bottom: 0;
}
/* Shared with the "Socios" tier comparison perks list. */
.rules-list {
	display: flex;
	flex-flow: column nowrap;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rule-item {
	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	gap: .75rem;
}
.single-product-content.event-single-content .product-info .reservation-box {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
}
/* .reservation-box alternates row/column at each width where .product-info's
   available space gets cramped relative to its content: column below 768px
   (mobile), row from 768-1024px (room to breathe before the sidebar layout
   kicks in), column again from 1024-1280px (sidebar layout narrows it back
   down), row from 1280px on (plenty of room again). */
@media (min-width: 768px) and (max-width: 1024px) {
	.single-product-content.event-single-content .product-info .reservation-box {
		flex-flow: row nowrap;
	}
}
@media (min-width: 1024px) and (max-width: 1280px) {
	.single-product-content.event-single-content .product-info .reservation-box {
		flex-flow: column nowrap;
	}
}
@media (min-width: 1280px) {
	.single-product-content.event-single-content .product-info .reservation-box {
		flex-flow: row nowrap;
	}
}
.single-product-content.event-single-content .product-info .reservation-box .reservation-info,
.single-product-content.event-single-content .product-info .reservation-box .reservation-ctas {
	flex: 1 1 0;
}
.single-product-content.event-single-content .product-info .reservation-info .title {
	font-size: 2rem;
}
.single-product-content.event-single-content .product-info .seats-available {
	margin-top: .75rem;
}
.single-product-content.event-single-content .product-info .reservation-ctas {
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
}
.socios-intro {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	text-align: center;
	gap: 1rem;
	max-width: 40rem;
	margin-inline: auto;
	padding: 6rem 1.5rem;
}
.socios-intro .title {
	font-size: 4.5rem;
}
.socios-intro .count {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	gap: .5rem;
	margin-top: 1rem;
}
.socios-intro .count .count-text {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	justify-content: space-between;
}
.socios-intro .count .count-text .count-figures {
	font-size: 1.5rem;
}
.socios-intro .count .bar {
	height: .25rem;
}
.socios-intro .count .bar .bar-level {
	display: block;
	background-color: var(--wp--preset--color--gold);
	height: 100%;
}
.socios-intro .count .available-text {
	text-align: center;
}
.tiers-comparison {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	gap: 1.5rem;
	padding: 5rem 1.5rem;
}
/* On mobile, tiers wrap to one per row (flex: 1 1 20rem above doesn't fit
   side by side) — a bigger gap here specifically compensates for
   .outer-label poking up above its own box (translateY(-50%)), which would
   otherwise sit right on top of the box above it at the normal 1.5rem gap. */
@media (max-width: 767px) {
	.tiers-comparison {
		gap: 3rem;
	}
}
.tiers-comparison .tier-box {
	position: relative;
	flex: 1 1 20rem;
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;
	padding: 2.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
}
.tiers-comparison .tier-box:has(.outer-label) {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);
}
.tiers-comparison .tier-box .outer-label {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(2.5rem, -50%);
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--black);
	padding: .375rem 1rem;
	white-space: nowrap;
}
.tiers-comparison .tier-box .title {
	font-size: 1.875rem;
}
.tiers-comparison .tier-box .tier-price {
	padding: 1rem 0;
	font-size: 2.25rem;
}
.tiers-comparison .tier-box .rules-list {
	flex: 1 1 auto;
	padding-bottom: 1.5rem;
}
.reservas-list {
    padding: 3rem 1.25rem;
}
.reservas-list .wrapper {
    display: flex;
    flex-flow: column wrap;
    gap: 3rem;
}
.reservas-list .wrapper .texts {
    display: flex;
    flex-flow: column wrap;
    gap: .75rem;
}
.reservas-list .wrapper .texts .title {
    font-size: 3rem;
}
.reservas-list .wrapper .texts .text {
    font-size: 1rem;

}
.reservas-list .wrapper .presales {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .reservas-list .wrapper .presales {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.reservas-list .wrapper .presales .presale {
    display: block;
    flex: 0 0 auto;
    box-sizing: border-box;
    margin-bottom: 0;
}
.reservas-list .wrapper .presales .presale .card-link {
    position: relative;
    box-sizing: border-box;
    padding: 1.5rem;
    display: flex;
    width: 100%;
    height: 100%;
    flex-flow: row nowrap;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-decoration: none;
    gap: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
}
.reservas-list .wrapper .presales .presale .card-link:has(.name a:hover) {
    border-color: var(--wp--preset--color--gold);
}
.reservas-list .wrapper .presales .presale .card-link .name a {
    text-decoration: none;
    color: inherit;
}
.reservas-list .wrapper .presales .presale .card-link .name a::after {
    content: '';
    position: absolute;
    inset: 0;
}
.reservas-list .wrapper .presales .presale .card-link .image {
    /*width: 280px;*/
    /*width: 398px;*/
    /*height: 350px;*/
    width: auto;
    height: auto;
    flex: 0 0 auto;
    overflow: hidden;
}
.reservas-list .wrapper .presales .presale .card-link .image img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    object-fit: contain;
    object-position: center;
}
.reservas-list .wrapper .presales .presale .card-link .texts {
	display: flex;
    flex-flow: column nowrap;
	justify-content: space-between;
    flex: 1 1 auto;
}
.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper .left-texts {
    display: flex;
    flex-flow: column nowrap;
    gap: .75rem;
    flex: 1 1 auto;
}
.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper .left-texts .subtitle {
    font-size: .75rem;
    flex: 0 0 auto;
    padding-bottom: .25rem;
}
.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper .left-texts .name {
    font-size: 1.875rem;
    flex: 0 0 auto;
}
.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper .left-texts .release-text {
    font-size: .875rem;
    flex: 0 0 auto;
    padding-bottom: .5rem;
}
.reservas-list .wrapper .presales .presale .card-link .texts .countdown {
    font-size: .875rem;
    flex: 0 0 auto;
    align-content: flex-end;
    padding-bottom: .5rem;
}
.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper .left-texts .prices {
    flex: 0 0 auto;
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
	gap: 1.5rem;
}
.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper .left-texts .prices .price,
.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper .left-texts .prices .member {
    font-size: 1.25rem;
}
.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper .left-texts .prices .price-block {
    display: flex;
    flex-flow: column nowrap;
    gap: .25rem;
}
.reservas-list .wrapper .presales .presale .card-link .texts .button {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}
@media (max-width: 767px) {
	.reservas-list .wrapper .presales .presale .card-link {
		flex-flow: column nowrap;
	}
	.reservas-list .wrapper .presales .presale .card-link .image {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		/* JCC aspect-ratio: 4 / 5;*/
	}
	.reservas-list .wrapper .presales .presale .card-link .texts .text-wrapper {
		flex-flow: column nowrap;
		gap: 1rem;
	}
}
/* Reusable dialog shell (native <dialog>: showModal() centers it and provides the
   ::backdrop overlay for free) — any future modal reuses this, only the content
   inside differs. */
dialog.dialog {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 30rem;
	padding: 2.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}
dialog.dialog::backdrop {
	background-color: color-mix(in srgb, var(--wp--preset--color--black) 80%, transparent);
}
/* Cart drawer: same dialog/backdrop mechanism, opens from the right edge instead of
   centered, full height, capped at 450px except on mobile where it fills the width. */
dialog.dialog.cart-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	margin: 0;
	max-width: 450px;
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	display: none;
	flex-flow: column nowrap;
}
/* Without this, the rule above (higher specificity than the browser's own
   dialog:not([open]){display:none}) would keep the drawer visible at all times. */
dialog.dialog.cart-drawer[open] {
	display: flex;
}
@media (max-width: 480px) {
	dialog.dialog.cart-drawer {
		max-width: none;
		width: 100vw;
	}
}
dialog.dialog.cart-drawer [data-cart-drawer-body] {
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
	min-height: 0;
}
.cart-drawer-header {
	flex: 0 0 auto;
	text-align: left;
	align-items: stretch;
	padding: 1.25rem;
	padding-right: 3rem;
	border: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	margin-bottom: 0;
}
.cart-drawer-header-row {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.cart-drawer-contents {
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
	min-height: 0;
}
.cart-drawer-items {
	flex: 1 1 auto;
	overflow-y: auto;
	display: flex;
	flex-flow: column nowrap;
	gap: 1.25rem;
	padding: 1.25rem;
}
.cart-item {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: .75rem;
	padding-right: 1.5rem;
}
.cart-item-remove {
	position: absolute;
	top: 0;
	right: 0;
	background: none;
	border: none;
	color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
	font-size: 1.25rem;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}
.cart-item-remove:hover {
	color: var(--wp--preset--color--gold);
}
.cart-item .image {
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	display: block;
	overflow: hidden;
}
.cart-item .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cart-item .texts {
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
	gap: .375rem;
	min-width: 0;
}
.cart-item .texts .name {
	font-size: 1.125rem;
}
.cart-item-quantity,
.product-quantity {
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: .75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	padding: .25rem .625rem;
	width: fit-content;
}
.cart-item-quantity button,
.product-quantity button {
	background: none;
	border: none;
	color: var(--wp--preset--color--white);
	font-size: 1rem;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}
.cart-item-quantity button:hover,
.product-quantity button:hover {
	color: var(--wp--preset--color--gold);
}
.cart-item-quantity button:disabled,
.product-quantity button:disabled {
	opacity: .4;
	cursor: default;
}
.cart-item-quantity-value,
.product-quantity-value {
	font-family: 'JetBrainsMono', monospace;
	min-width: 1em;
	text-align: center;
}
.cart-item-price {
	flex: 0 0 auto;
	white-space: nowrap;
}
.cart-drawer-summary {
	flex: 0 0 auto;
	display: flex;
	flex-flow: column nowrap;
	gap: .75rem;
	padding: 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.summary-row {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
.summary-row.summary-total {
	align-items: center;
	margin-bottom: .5rem;
}
.summary-row.summary-total .number {
	font-size: 1.5rem;
}
.cart-drawer-continue {
	background: none;
	border: none;
	color: var(--wp--preset--color--white);
	font-size: .75rem;
	letter-spacing: .15rem;
	text-transform: uppercase;
	text-align: center;
	padding: .5rem 0 0;
	cursor: pointer;
}
.cart-drawer-continue:hover {
	color: var(--wp--preset--color--gold);
}
.cart-drawer-empty {
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 1rem;
	padding: 2.5rem;
}
.cart-drawer-empty .standalone-icon {
	--icon-size: 3rem;
}
.cart-drawer-title {
	font-size: 1.5rem;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: .75rem;
}
.cart-drawer-count {
	font-size: .875rem;
}
.dialog-close-form {
	position: absolute;
	top: .75rem;
	right: .75rem;
}
.dialog-close {
	background: none;
	border: none;
	padding: .5rem;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}
.dialog-close:hover {
	color: var(--wp--preset--color--gold);
}
.dialog-texts {
	display: flex;
	flex-flow: column nowrap;
	gap: .75rem;
	text-align: left;
	margin-bottom: 1.5rem;
}
.dialog-texts .title {
	font-size: 1.875rem;
}
/* Mystery Pack reveal page (page-mystery-box.php). */
.mystery-box-wrapper {
	padding: 3rem 1.5rem;
	box-sizing: border-box;
}
/* Full-viewport reveal video — no site header/footer alongside it (see
   sharkcards_should_show_mystery_box_fullscreen_video(), which drives both
   header.php/footer.php's chrome suppression and this container). Sits
   outside .is-layout-constrained entirely (page-abrir-caja.php) rather than
   relying on position:fixed escaping a constrained ancestor. */
.mystery-box-fullscreen {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--wp--preset--color--black);
}
.mystery-box-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--wp--preset--color--black);
}
/* Wider than the base dialog.dialog's 30rem (style.css ~1130) — at that width
   the two claim buttons' text (especially "Prefiero crédito de tienda (90%)")
   wrapped onto three lines.
   Also restores vertical centering: dialog.dialog's own "position: relative"
   breaks the native browser centering <dialog> normally gets from
   showModal(). The usual fix (fixed positioning + inset:0 + margin:auto)
   ended up pinned to the bottom instead of centered here — likely the
   browser's own default <dialog> max-height/sizing rules fighting the
   margin-auto free-space math — so this centers via a transform instead,
   which positions from the element's own computed size rather than
   depending on that. max-height/overflow-y guard against content taller
   than the viewport, which this technique doesn't handle on its own.
   Restored just for this dialog rather than the shared base rule (other
   dialogs on the site have the same latent vertical-centering issue, left
   alone for now). */
dialog.mystery-box-reveal {
	max-width: 42rem;
	width: calc(100% - 2rem);
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	margin: 0;
	transform: translate(-50%, -50%);
}
.mystery-box-products {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	max-width: 20rem;
	margin-inline: auto;
}
/* The card partial (inc/acf/blocks/product/product.php) shows price/stock,
   neither of which applies to a free mystery-box prize. */
.mystery-box-products .prices,
.mystery-box-products .stock {
	display: none;
}
.mystery-box-actions {
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
}
.mystery-box-claim-form {
	display: flex;
	flex-flow: column nowrap;
	gap: .5rem;
	flex: 1 1 0;
}
/* Mystery Pack monthly leaderboard (woocommerce/taxonomy-product_cat-mystery-packs.php,
   rendered by sharkcards_render_mystery_pack_leaderboard() in
   inc/woocommerce/mystery-pack-ranking.php) — same top-20-by-€-spent data as
   the retired page-ranking-mystery-packs.php ever showed, restyled as a
   gamified leaderboard: dark gradient card, top-3 podium, ranks 4-20 as a
   plain list, no percentage/progress bars anywhere. */
.mystery-pack-leaderboard {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	margin: 1.5rem 0 2.5rem;
	padding: 3rem 1.5rem 2.5rem;
	background-color: #0c0a17;
	background-image:
		radial-gradient(circle at 12% 12%, color-mix(in srgb, #7c3aed 35%, transparent) 0%, transparent 45%),
		radial-gradient(circle at 88% 18%, color-mix(in srgb, #2563eb 32%, transparent) 0%, transparent 45%),
		radial-gradient(circle at 50% 100%, color-mix(in srgb, #7c3aed 20%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, #14112a 0%, #0c0a17 100%);
	box-sizing: border-box;
}
.mystery-pack-leaderboard::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(circle at 50% 25%, black 0%, transparent 70%);
}
.mystery-pack-leaderboard .leaderboard-header {
	position: relative;
	z-index: 1;
	text-align: center;
}
.leaderboard-badge,
.leaderboard-champion-badge,
.leaderboard-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.leaderboard-badge {
	padding: .4rem 1rem;
	border-radius: 999px;
	margin-bottom: 1.5rem;
	background: linear-gradient(90deg, #ec4899, #3b82f6);
	color: var(--wp--preset--color--white);
}
.leaderboard-badge .standalone-icon {
	width: .9em;
}
.leaderboard-title {
	font-size: 2.5rem;
	line-height: 1.1;
	background: linear-gradient(180deg, #f5dd9d, var(--wp--preset--color--gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: .5rem;
}
@media (min-width: 768px) {
	.leaderboard-title {
		font-size: 4.5rem;
	}
}
.leaderboard-subtitle {
	color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
}
.leaderboard-empty {
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 2.5rem 0 0;
}
.leaderboard-podium {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 2.5rem 0 0;
}
@media (min-width: 768px) {
	.leaderboard-podium {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: end;
	}
	.leaderboard-podium-card.rank-1 {
		transform: translateY(-1rem);
	}
}
.leaderboard-podium-card {
	position: relative;
	border-radius: 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 15%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 4%, transparent);
	padding: 2rem 1.5rem 1.5rem;
	text-align: center;
	box-sizing: border-box;
}
.leaderboard-podium-card.rank-1 {
	border-color: color-mix(in srgb, var(--wp--preset--color--gold) 60%, transparent);
	box-shadow: 0 0 40px color-mix(in srgb, var(--wp--preset--color--gold) 30%, transparent);
}
.leaderboard-podium-card.rank-3 {
	border-color: color-mix(in srgb, #fb923c 45%, transparent);
}
.leaderboard-champion-badge {
	position: absolute;
	top: -.85rem;
	left: 50%;
	transform: translateX(-50%);
	padding: .3rem .9rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--black);
	white-space: nowrap;
}
.leaderboard-podium-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 1rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 25%, transparent);
	color: var(--wp--preset--color--white);
}
.leaderboard-podium-icon svg {
	width: 1.75rem;
	height: 1.75rem;
	stroke: currentColor;
	fill: none;
}
.rank-1 .leaderboard-podium-icon {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}
.rank-3 .leaderboard-podium-icon {
	border-color: #fb923c;
	color: #fb923c;
}
.leaderboard-podium-rank {
	position: absolute;
	bottom: -.25rem;
	right: -.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--black);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent);
	font-size: .75rem;
}
.rank-1 .leaderboard-podium-rank {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}
.rank-3 .leaderboard-podium-rank {
	border-color: #fb923c;
	color: #fb923c;
}
.leaderboard-podium-name {
	font-size: 1.25rem;
	margin-bottom: 1rem;
}
.leaderboard-score-label {
	display: block;
	margin-bottom: .25rem;
}
.leaderboard-score-value {
	display: block;
	font-size: 1.5rem;
	color: var(--wp--preset--color--gold);
}
.rank-2 .leaderboard-score-value {
	color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
}
.rank-3 .leaderboard-score-value {
	color: #fb923c;
}
.leaderboard-list {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
	gap: .75rem;
}
.leaderboard-row {
	--row-accent: var(--wp--preset--color--gold);
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: .75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
	border-left: 3px solid var(--row-accent);
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
	box-sizing: border-box;
}
.leaderboard-row:nth-child(5n+1) { --row-accent: #38bdf8; }
.leaderboard-row:nth-child(5n+2) { --row-accent: #a78bfa; }
.leaderboard-row:nth-child(5n+3) { --row-accent: #34d399; }
.leaderboard-row:nth-child(5n+4) { --row-accent: #fb923c; }
.leaderboard-row:nth-child(5n+5) { --row-accent: #60a5fa; }
.leaderboard-row-rank {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	border: 1px solid var(--row-accent);
	color: var(--row-accent);
}
.leaderboard-row-name {
	flex: 1 1 auto;
	font-weight: 600;
}
.leaderboard-row-score {
	flex: 0 0 auto;
	color: var(--row-accent);
}
.leaderboard-footer {
	position: relative;
	z-index: 1;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: .75rem;
	margin-top: 2.5rem;
}
.leaderboard-pill {
	padding: .5rem 1rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 15%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 4%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
	font-size: .7rem;
}
.leaderboard-pill .standalone-icon {
	width: .9em;
}
/* Reusable tabs (also usable outside dialogs). */
.tabs-nav {
	display: flex;
	flex-flow: row nowrap;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	margin-bottom: 1.5rem;
}
.tab-trigger {
	flex: 1 1 0;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0 0 .75rem;
	font-family: inherit;
	font-size: .75rem;
	letter-spacing: .15rem;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
	cursor: pointer;
}
.tab-trigger.is-active {
	color: var(--wp--preset--color--gold);
	border-bottom-color: var(--wp--preset--color--gold);
}
.tab-panel {
	display: none;
}
.tab-panel.is-active {
	display: block;
}
/* Auth modal (login / create account). */
.auth-form {
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;
}
.auth-form label {
	display: flex;
	flex-flow: column nowrap;
	gap: .375rem;
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: .75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: inherit;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
}
.auth-form textarea {
	resize: vertical;
	min-height: 6rem;
}
.auth-form input:focus,
.auth-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
}
.auth-form button[type="submit"] {
	align-self: flex-stretch;
}
.auth-form-message {
	margin: 0;
	min-height: 1.25em;
	font-size: .875rem;
}
.auth-form-message.is-error {
	color: #e5484d;
}
.auth-form-message.is-success {
	color: rgb(52, 178, 98);
}
.auth-form label.accept-terms {
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: .5rem;
}
.auth-form label.accept-terms input[type="checkbox"] {
	margin-top: .25rem;
	accent-color: var(--wp--preset--color--gold);
}
.site-form-wrapper {
	max-width: 30rem;
	margin-inline: auto;
	padding: 3rem 0;
}
/* Contacto page (page-contacto.php): contact-details repeater on the left,
   the form on the right, both equal-width columns. */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding: 3rem 1.5rem;
	box-sizing: border-box;
}
@media (min-width: 1024px) {
	.contact-layout {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}
.contact-details {
	display: flex;
	flex-flow: column nowrap;
	gap: 2.5rem;
}
.contact-detail {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: .75rem;
}
.contact-detail .texts {
	display: flex;
	flex-flow: column nowrap;
	gap: .375rem;
}
/* Scoped to this page rather than .auth-form itself, which is shared with the
   auth modal and other forms elsewhere that don't need a border/background. */
.contact-layout .auth-form {
	padding: 2rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.dialog-footer-note {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}

/* Multi-step checkout header + indicator, shared by the Checkout block wrapper
   (see inc/woocommerce/checkout-block-steps.php) and the order-received page
   (woocommerce/checkout/thankyou.php). Width/centering comes from the core
   .alignwide class on .checkout-wrapper — same convention as
   .woocommerce-categories.alignwide elsewhere in this theme. */
.checkout-wrapper {
	padding: 3rem 1.5rem;
	box-sizing: border-box;
}
.checkout-header {
	margin: 0 0 2rem;
}
.checkout-header .subtitle {
	margin-bottom: .5rem;
}
.checkout-header .title {
	font-size: 2.5rem;
}
.checkout-steps {
	margin: 0 0 2.5rem;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.checkout-step-indicator {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: .625rem;
}
.checkout-step-indicator:not(:last-child) {
	flex: 1 1 auto;
}
.checkout-step-indicator:not(:last-child)::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	margin: 0 1rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.checkout-step-indicator.is-complete:not(:last-child)::after {
	background-color: var(--wp--preset--color--gold);
}
.checkout-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	font-size: .8125rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent);
}
.checkout-step-indicator.is-active .checkout-step-number {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}
.checkout-step-indicator.is-complete .checkout-step-number {
	border-color: var(--wp--preset--color--gold);
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--black);
}
.checkout-step-label {
	white-space: nowrap;
}
.checkout-step-indicator:not(.is-active) .checkout-step-label {
	color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
}
@media (max-width: 599px) {
	.checkout-step-indicator {
		gap: 0;
	}
	.checkout-step-indicator:not(:last-child)::after {
		margin: 0 .5rem;
	}
	.checkout-step-label {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute!important;
		width: 1px;
		word-wrap: normal!important;
		word-break: normal!important;
	}
}
.checkout-block-header,
.checkout-block-wrapper,
.checkout-step-nav-wrapper {
	padding-top: 0;
	padding-bottom: 0;
}
.checkout-block-header {
	padding-top: 3rem;
}
.checkout-step-nav-wrapper {
	padding-bottom: 3rem;
}
.checkout-step-nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	gap: 1rem;
	margin-top: 1.5rem;
}
/* Step visibility for the Checkout BLOCK (not the classic shortcode — this site's
   Checkout page uses "woocommerce/checkout"). Targets WooCommerce Blocks' own
   stable per-section class names; nothing about the block's markup/attributes is
   touched, so this can't interfere with its client-side hydration. See
   inc/woocommerce/checkout-block-steps.php for the data-checkout-step source. */
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-shipping-method-block,
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-pickup-options-block,
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-shipping-address-block,
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-billing-address-block,
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-shipping-methods-block,
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-additional-information-block,
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-order-note-block,
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-payment-block,
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-terms-block,
.checkout-block-outer[data-checkout-step="1"] .wp-block-woocommerce-checkout-actions-block {
	display: none;
}
.checkout-block-outer[data-checkout-step="2"] .wp-block-woocommerce-checkout-express-payment-block,
.checkout-block-outer[data-checkout-step="2"] .wp-block-woocommerce-checkout-contact-information-block,
.checkout-block-outer[data-checkout-step="2"] .wp-block-woocommerce-checkout-additional-information-block,
.checkout-block-outer[data-checkout-step="2"] .wp-block-woocommerce-checkout-payment-block,
.checkout-block-outer[data-checkout-step="2"] .wp-block-woocommerce-checkout-terms-block,
.checkout-block-outer[data-checkout-step="2"] .wp-block-woocommerce-checkout-actions-block {
	display: none;
}
.checkout-block-outer[data-checkout-step="3"] .wp-block-woocommerce-checkout-express-payment-block,
.checkout-block-outer[data-checkout-step="3"] .wp-block-woocommerce-checkout-contact-information-block,
.checkout-block-outer[data-checkout-step="3"] .wp-block-woocommerce-checkout-shipping-method-block,
.checkout-block-outer[data-checkout-step="3"] .wp-block-woocommerce-checkout-pickup-options-block,
.checkout-block-outer[data-checkout-step="3"] .wp-block-woocommerce-checkout-shipping-address-block,
.checkout-block-outer[data-checkout-step="3"] .wp-block-woocommerce-checkout-billing-address-block,
.checkout-block-outer[data-checkout-step="3"] .wp-block-woocommerce-checkout-shipping-methods-block,
.checkout-block-outer[data-checkout-step="3"] .wp-block-woocommerce-checkout-order-note-block {
	display: none;
}
.checkout-block-outer[data-checkout-step="3"] [data-checkout-next] {
	display: none;
}
.checkout-block-outer[data-checkout-step="1"] [data-checkout-prev] {
	display: none;
}
/* "Pay for order" screen (woocommerce/checkout/form-pay.php) — order review
   + payment method + pay button, reached via the mystery-pack buy-now flow
   (inc/woocommerce/mystery-pack-buy-now.php) or a failed-order retry. Item
   rows deliberately mirror .cart-item's look (inc/cart-drawer.php) minus its
   remove/quantity controls, since this is a static review, not an editable
   cart. checkout/payment-method.php and checkout/terms.php are WooCommerce's
   own default templates (not overridden) — styled here via their existing
   classes instead. */
.pay-for-order {
	display: flex;
	flex-flow: column nowrap;
}
.pay-for-order-items {
	display: flex;
	flex-flow: column nowrap;
	gap: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.pay-for-order-item {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: .75rem;
}
.pay-for-order-item .image {
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	display: block;
	overflow: hidden;
}
.pay-for-order-item .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pay-for-order-item .texts {
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
	gap: .375rem;
	min-width: 0;
}
.pay-for-order-item .texts .name {
	font-size: 1.125rem;
}
.pay-for-order-item-qty {
	font-family: 'JetBrainsMono', monospace;
}
.pay-for-order-item-price {
	flex: 0 0 auto;
	white-space: nowrap;
}
.pay-for-order-summary {
	padding: 1.25rem 0;
}
.pay-for-order-payment-label {
	margin-bottom: 1rem;
}
.pay-for-order ul.wc_payment_methods {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
	gap: .75rem;
}
.pay-for-order li.wc_payment_method {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	padding: 1rem 1.25rem;
}
.pay-for-order li.wc_payment_method input.input-radio {
	accent-color: var(--wp--preset--color--gold);
	margin-right: .625rem;
}
.pay-for-order li.wc_payment_method .payment_box {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
}
.pay-for-order-actions {
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	gap: 1.25rem;
}
.pay-for-order .woocommerce-terms-and-conditions-wrapper {
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
	font-size: .875rem;
}
.pay-for-order .woocommerce-terms-and-conditions-wrapper .input-checkbox {
	accent-color: var(--wp--preset--color--gold);
	margin-right: .5rem;
}
.pay-for-order #place_order {
	border: none;
	cursor: pointer;
}
/* Envío PSA page (page-psa.php): a plain 3-step form (Tus datos / Cartas /
   Confirmación) reusing initCheckoutSteps()'s data-checkout-step mechanics,
   scoped to this form's own .psa-step content instead of WooCommerce Blocks'
   class names. Only step 3 shows the actual submit button. */
.psa-wrapper {
	padding: 3rem 1.5rem;
	box-sizing: border-box;
}
.psa-form {
	padding: 2rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.psa-form[data-checkout-step="1"] [data-psa-step="2"],
.psa-form[data-checkout-step="1"] [data-psa-step="3"],
.psa-form[data-checkout-step="2"] [data-psa-step="1"],
.psa-form[data-checkout-step="2"] [data-psa-step="3"],
.psa-form[data-checkout-step="3"] [data-psa-step="1"],
.psa-form[data-checkout-step="3"] [data-psa-step="2"] {
	display: none;
}
.psa-form[data-checkout-step="3"] [data-checkout-next] {
	display: none;
}
.psa-form:not([data-checkout-step="3"]) [data-psa-submit] {
	display: none;
}
.psa-form[data-checkout-step="1"] [data-checkout-prev] {
	display: none;
}
.psa-step {
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;
}
.psa-step .title {
	font-size: 1.5rem;
}
.psa-cards {
	display: flex;
	flex-flow: column nowrap;
	gap: 1.5rem;
}
.psa-card {
	display: flex;
	flex-flow: column nowrap;
	gap: .75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.psa-card[hidden] {
	display: none;
}
.psa-card-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.psa-dropzone {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 2rem 1rem;
	text-align: center;
	cursor: pointer;
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent);
	transition: border-color .2s ease, background-color .2s ease;
}
.psa-dropzone:hover,
.psa-dropzone.is-dragover,
.psa-dropzone:focus-within {
	border-color: var(--wp--preset--color--gold);
	background-color: color-mix(in srgb, var(--wp--preset--color--gold) 8%, transparent);
}
.psa-dropzone.has-file {
	border-style: solid;
	border-color: var(--wp--preset--color--gold);
}
.psa-dropzone .standalone-icon {
	--icon-size: 2rem;
}
.psa-dropzone [data-psa-dropzone-hint] {
	word-break: break-all;
}
.psa-cards-actions {
	display: flex;
	flex-flow: row wrap;
	gap: 1rem;
}
.psa-summary {
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);
}
.psa-summary-line {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .75rem;
}
/* Form control colors (inputs/checkboxes/radios/textareas/labels/validation
   errors) come from WooCommerce Blocks' own "has-dark-controls" mode — see the
   has-dark-controls class added to .checkout-block-wrapper in
   inc/woocommerce/checkout-block-steps.php — rather than overriding each
   component's CSS by hand, since Blocks already ships a maintained dark-theme
   variant for all of these (confirmed in woocommerce/assets/client/blocks/
   packages-style.css). What follows here only styles what that mode doesn't
   cover: layout, step titles, totals, and buttons. */
.wc-block-checkout__form {
	display: flex;
	flex-flow: column nowrap;
	gap: 1.5rem;
}
.wc-block-components-checkout-step {
	border: none;
	padding: 0;
}
.wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--cormorantgaramond);
	font-size: 1.5rem;
	font-weight: normal;
}
.wc-block-components-checkout-step__heading {
	margin-bottom: 1.5rem;
}
/* WooCommerce Blocks' text input uses a Material-style floating label (absolutely
   positioned over the input, animating up on focus/fill via an .is-active class
   its own JS toggles). The design calls for a plain static label above the input
   instead, so the positioning/line-height tricks that trick relies on are undone
   here — has-dark-controls (added in inc/woocommerce/checkout-block-steps.php)
   still supplies the colors, only layout is overridden. */
/* WooCommerce's own DOM order is <input> then <label> (confirmed in
   wc-cart-checkout-base-frontend.js) — floating labels don't care about DOM
   order since they're absolutely positioned, but now that the label below is
   forced to position:static, it would otherwise sit in normal flow *after* the
   input. flex + order:-1 visually moves it above without touching the real DOM
   (unlike the label/input themselves, this doesn't risk React's hydration —
   nothing here is inserted, removed, or reparented, only reordered visually). */
.wc-block-components-text-input {
	display: flex !important;
	flex-flow: column nowrap !important;
	line-height: normal !important;
	white-space: normal !important;
}
/* !important on every property here, not just colors: WooCommerce's OWN base
   (non-dark) rules are already more specific than these selectors on their own
   — e.g. .wc-block-components-form .wc-block-components-text-input label beats
   .wc-block-components-text-input label regardless of has-dark-controls or
   stylesheet order — so any property left un-flagged silently falls back to
   WooCommerce's default. */
.wc-block-components-text-input label {
	order: -1 !important;
	position: static !important;
	display: block !important;
	transform: none !important;
	max-width: none !important;
	margin: 0 0 .625rem !important;
	font-size: .75rem !important;
	letter-spacing: .15rem !important;
	line-height: 1.5 !important;
	text-transform: uppercase !important;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent) !important;
}
/* Same border/background/color/padding as the shop sidebar filter's select
   (style.css ~line 572, .sharkcards-shop-filters .shop-filter-group select) —
   only the label color differs (text-75 above vs gold there). */
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-text-input.is-active input[type="email"],
.wc-block-components-text-input.is-active input[type="number"],
.wc-block-components-text-input.is-active input[type="password"],
.wc-block-components-text-input.is-active input[type="tel"],
.wc-block-components-text-input.is-active input[type="text"],
.wc-block-components-text-input.is-active input[type="url"] {
	height: auto !important;
	font-size: .875rem !important;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent) !important;
	padding: .5rem 1rem !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 8%, var(--wp--preset--color--black)) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent) !important;
}
/* Country/state use a separate "select" component (wc-blocks-components-select),
   not .wc-block-components-text-input — restyled the same way so every field
   (text or select) shares one consistent look. */
.wc-blocks-components-select__label {
	position: static !important;
	display: block !important;
	transform: none !important;
	max-width: none !important;
	margin: 0 0 .625rem !important;
	font-size: .75rem !important;
	letter-spacing: .15rem !important;
	line-height: 1.5 !important;
	text-transform: uppercase !important;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent) !important;
}
.wc-blocks-components-select__container {
	background: none !important;
}
.wc-blocks-components-select__select {
	height: auto !important;
	font-size: .875rem !important;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent) !important;
	padding: .5rem 1rem !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 8%, var(--wp--preset--color--black)) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent) !important;
}
/* has-dark-controls gives the checkbox a white border/check; this site's
   convention is gold border, gold fill + black check when checked (matching
   .ctas a.cta.fill elsewhere). */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	background-color: transparent !important;
	border-color: color-mix(in srgb, var(--wp--preset--color--gold) 50%, transparent) !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--gold) !important;
	border-color: var(--wp--preset--color--gold) !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--black) !important;
}
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item {
	color: var(--wp--preset--color--white);
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: 'JetBrainsMono', monospace;
	color: var(--wp--preset--color--gold);
}
/* .subtitle + .gold declarations (style.css ~line 94), applied directly since
   adding the class strings via JS would get stripped by React's re-renders. */
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-totals-item__label {
	font-size: .75rem;
	letter-spacing: .15rem;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wp--preset--color--gold) !important;
}
.wc-block-components-totals-footer-item-tax-value {
	font-size: 1.5rem !important;
}
/* Subtotal row overrides the general totals-item__label/__value treatment above:
   plain text (.text-75) instead of the gold subtitle style for the label, and
   .number's font in .white instead of .gold for the value. */
.wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__label {
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	line-height: inherit;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent) !important;
}
.wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__value {
	font-family: 'JetBrainsMono', monospace;
	line-height: 1;
	color: var(--wp--preset--color--white) !important;
}
/* Order summary cart items: hide the unit-price/description lines under the
   name (line total on the right stays). The quantity badge on the thumbnail
   stays in its default spot/shape, just recolored — background matches the
   page background, number in gold using the same font as .number. */
.wc-block-components-order-summary-item .wc-block-cart-item__prices,
.wc-block-components-order-summary-item .wc-block-components-product-details,
.wc-block-components-order-summary-item .wc-block-components-product-metadata {
	display: none !important;
}
.wc-block-components-order-summary-item__quantity {
	background: var(--wp--preset--color--black) !important;
}
.wc-block-components-order-summary-item__quantity span {
	color: var(--wp--preset--color--gold) !important;
	font-family: 'JetBrainsMono', monospace !important;
}
/* Same subtle border used around the summary's own section dividers
   (.wc-block-components-totals-wrapper's border-top). */
.wc-block-components-order-summary-item__image img {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
/* Same declarations as .title + .text-75 (name) and .number + .gold (price) —
   applied directly to those classes here rather than adding the class strings
   via JS, since React re-renders this component and would strip any className
   it doesn't itself manage on the next update (same issue as the quantity
   badge earlier). */
.wc-block-components-order-summary-item .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--cormorantgaramond);
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent) !important;
}
.wc-block-components-order-summary-item__total-price {
	font-family: 'JetBrainsMono', monospace;
	line-height: 1;
	color: var(--wp--preset--color--gold) !important;
}
/* Mirrors .button-like.fill's own declarations (style.css ~line 184) — these are
   WooCommerce's own button elements, so the class itself can't be applied to
   them; the same visual result is replicated onto their real class names instead. */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wp-element-button {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--black);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);
	font-size: .875rem;
	letter-spacing: .15rem;
	text-transform: uppercase;
	padding: .75rem 1.5rem;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.wp-element-button:hover {
	border-color: var(--wp--preset--color--gold);
	background-color: color-mix(in srgb, var(--wp--preset--color--gold), white 10%);
}
/* Step 4 (Confirmación) — see woocommerce/checkout/thankyou.php. */
.checkout-confirmation .woocommerce-notice--success {
	border: 1px solid var(--wp--preset--color--gold);
	padding: 1.25rem 1.5rem;
	margin: 0 0 2rem;
	color: var(--wp--preset--color--white);
}
.checkout-confirmation .woocommerce-notice--error {
	border: 1px solid #e5484d;
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
	color: #e5484d;
}
.checkout-confirmation-message {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	text-align: center;
	gap: 1rem;
	max-width: 32rem;
	margin-inline: auto;
	padding: 3rem 1.5rem;
}
.checkout-confirmation-message .title {
	font-size: 3rem;
}
.checkout-confirmation-icon {
	--icon-size: 2.5rem;
	padding: 1.25rem;
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 50%;
	margin-bottom: .5rem;
}
/* Search modal (see inc/search-modal.php) — reuses the base dialog.dialog
   centered shell, wider to fit results comfortably and with its own padding
   zeroed out so the search field can sit flush at the very top/edges, with the
   modal's own close button (top-right, unaffected by this since it's absolutely
   positioned off dialog.dialog itself) clearing the field via its right padding. */
/* dialog.dialog (element+class) is more specific than .search-modal (class
   alone) — the selector needs to match that specificity or the base 2.5rem
   padding wins regardless of source order. */
dialog.search-modal {
	max-width: 34rem;
	padding: 0;
}
.search-modal-field {
	box-sizing: border-box;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: 1.25rem 3rem 1.25rem 1.5rem;
	border: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	margin: 0;
}
.search-modal-input {
	flex: 1 1 auto;
	width: 100%;
	background: none;
	border: none;
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: 1rem;
}
.search-modal-input:focus {
	outline: none;
}
.search-modal-input::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--white) 50%, transparent);
}
.search-modal-input::-webkit-search-cancel-button {
	display: none;
	-webkit-appearance: none;
}
.search-modal-results {
	max-height: 60vh;
	overflow-y: auto;
	padding: 1.5rem;
}
.search-modal-suggestions {
	display: flex;
	flex-flow: row wrap;
	gap: .75rem;
}
.search-modal-results-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
	gap: 1.25rem;
}
.search-result-item .card-link {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	color: inherit;
}
.search-result-item .image {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	display: block;
}
.search-result-item .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.search-result-item .texts {
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
	gap: .25rem;
	min-width: 0;
}
.search-result-item .price {
	flex: 0 0 auto;
	white-space: nowrap;
}
.search-modal-no-results {
	text-align: center;
	padding: 1.5rem 0;
}
/* "En directo" page (page-directos.php) — video fills the available width,
   chat sits alongside at a fixed width matching Twitch's own default, stacking
   below the video on narrow screens. */
.live-stream-wrapper {
	padding: 3rem 1.5rem;
}
.live-stream-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 1024px) {
	.live-stream-layout {
		grid-template-columns: 1fr 340px;
	}
}
.live-stream-video {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.live-stream-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}
.live-stream-chat {
	height: 100%;
	min-height: 480px;
}
.live-stream-chat iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}
/* Featured products (see inc/woocommerce/stream-queue.php) — same product
   card grid as the shop, minus the shop's sidebar-layout wrapper this page
   doesn't need. */
.live-stream-featured {
	margin-top: 3rem;
}
.live-stream-featured .subtitle {
	margin-bottom: 1.25rem;
}
.live-stream-featured ul.products {
	margin: 0 !important;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}
.live-stream-featured ul.products::before {
	display: none;
	content: none;
}
@media (min-width: 768px) {
	.live-stream-featured ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* Related products (woocommerce/content-single-product.php) — same product
   card grid pattern as .live-stream-featured above, with a 4th step since
   this section can show up to 4 cards (wc_get_related_products( ..., 4 )). */
.related-products {
	margin-top: 6rem;
	margin-bottom: 4rem;
	padding: 3rem 1.5rem 0;
	box-sizing: border-box;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.related-products .subtitle {
	margin-bottom: .5rem;
}
.related-products .title {
	margin-bottom: 1.5rem;
	font-size: 2rem;
}
.related-products ul.products {
	margin: 0 !important;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.25rem;
}
.related-products ul.products::before {
	display: none;
	content: none;
}
@media (min-width: 768px) {
	.related-products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	.related-products ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
/* wc_print_notices() output (errors/messages/info), shown as a toast rather
   than WooCommerce's default inline page notice — unscoped, since this
   theme's custom templates call it directly wherever needed (e.g.
   woocommerce/single-product.php) rather than through WooCommerce's default
   hook chain, so it can show up on more than just one page. Auto-dismissed
   and click-to-dismiss via assets/js/vlc_scripts.js: initWooNotices(). */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	width: 24rem;
	max-width: calc(100vw - 3rem);
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 1rem 1.25rem 1rem 3.25rem;
	background-color: var(--wp--preset--color--black);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	color: var(--wp--preset--color--white);
	box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--wp--preset--color--black) 60%, transparent);
	cursor: pointer;
	transform: translate(0, 0);
	transition: opacity .2s ease, transform .2s ease;
}
.woocommerce-error.is-dismissing,
.woocommerce-message.is-dismissing,
.woocommerce-info.is-dismissing {
	opacity: 0;
	transform: translate(0, .5rem);
}
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: inherit;
	text-decoration: underline;
}
/* Real Lucide-style SVG icon (see woocommerce/notices/*.php) instead of
   WooCommerce's own icon font — that font's CSS (::before, position:absolute)
   is still active from woocommerce.css since it's not been touched, so it's
   explicitly disabled here rather than left to silently render behind/over
   this one. The icon sits absolutely within the left padding reserved above,
   which also means additional stacked <li> messages in .woocommerce-error
   just flow normally beneath it instead of pushing it out of place. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: none;
	display: none;
}
.woocommerce-error .notice-icon,
.woocommerce-message .notice-icon,
.woocommerce-info .notice-icon {
	position: absolute;
	top: 1rem;
	left: 1.25rem;
	list-style: none;
}
/* wc_print_notice() (not wc_print_notices() — no final "s") renders through
   these exact same templates for permanent empty-state messages inside
   account page templates (orders.php's "No order has been made yet.",
   downloads.php, payment-methods.php) — not just transient add-to-cart
   toasts. Those shouldn't float to a corner and vanish after 5s like the
   toasts above (see initWooNotices() in vlc_scripts.js, which skips anything
   inside .account-layout for the same reason), so this reverts them back to
   a normal inline box. position: relative (rather than the default static)
   keeps .notice-icon's position: absolute anchored to this box instead of
   whatever positioned ancestor is next up the tree. */
.account-layout .woocommerce-error,
.account-layout .woocommerce-message,
.account-layout .woocommerce-info {
	position: relative;
	width: auto;
	max-width: none;
	cursor: default;
	box-shadow: none;
	margin: 0 0 1.5rem;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: .75rem;
}
/* WC's own woocommerce.scss floats any .button inside these to the right —
   overridden so it sits in normal flow as a sibling flex item of the message
   text (the gap above), left-aligned instead of pushed to the far edge. */
.account-layout .woocommerce-error .button,
.account-layout .woocommerce-message .button,
.account-layout .woocommerce-info .button {
	float: none !important;
}
/* WooCommerce "My Account" page (page-account.php + inc/woocommerce/account-page.php).
   .account-layout wraps every state of the [woocommerce_my_account] shortcode;
   which of its 3 width variants applies is decided in page-account.php since
   it needs is_user_logged_in()/$wp->query_vars, not something CSS can see. */
.account-layout {
	padding: 3rem 1.5rem;
	box-sizing: border-box;
}
/* WC_Shortcodes::shortcode_wrapper() wraps the whole [woocommerce_my_account]
   output in its own <div class="woocommerce"> — that's .account-layout's
   actual direct child, and in turn the real direct parent of the nav/content
   pair, so the grid is applied there instead of on .account-layout itself.
   float/width are reset on the nav/content since WooCommerce's own base CSS
   floats them into a 2-column layout by default (30%/65%-ish) — those rules
   were winning over an earlier display:contents-based attempt here, which
   relied on float being ignored on grid items and didn't render reliably. */
.account-layout.is-dashboard > .woocommerce {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	min-width: 0;
}
@media (min-width: 1024px) {
	.account-layout.is-dashboard > .woocommerce {
		grid-template-columns: 240px 1fr;
		gap: 3rem;
	}
}
/* .woocommerce-account .woocommerce::before/::after is WC's own clearfix for
   the float-based layout above — content:" " generates a real box, and once
   .woocommerce is a grid container (immediately above) that box becomes an
   actual anonymous grid item instead of just floating quietly out of flow.
   That gave 4 items in DOM order (::before, nav, content, ::after) instead
   of 2, landing as row1:[::before][nav], row2:[content][::after] — nav top
   right, content bottom left. Removing the generated content here drops them
   back out of the grid entirely, leaving just the real nav/content pair. */
.account-layout.is-dashboard > .woocommerce::before,
.account-layout.is-dashboard > .woocommerce::after {
	content: none;
	display: none;
}
/* woocommerce-layout.css (always enqueued by WC, regardless of theme type)
   sets ".woocommerce-account .woocommerce-MyAccount-navigation { float:left;
   width:30% }" and the float:right/68% mirror for -content — 2 classes of
   specificity, beating a plain 1-class override here regardless of source
   order, hence !important rather than trying to out-specificity it. */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	min-width: 0;
}
.account-layout.is-single-form {
	display: block;
	max-width: 30rem;
	margin-inline: auto;
}
/* Lost-password/reset-password (see form-lost-password.php/form-reset-password.php)
   use WC's bare .form-row-first/.form-row-last — not wrapped in
   .woocommerce-EditAccountForm/.woocommerce-address-fields__field-wrapper like the
   edit-account/address forms below, so WC's own float:left/right; width:47% (meant
   for a 2-column layout) still applies and squeezes these fields in this narrow
   single-column form. Neutralized here so label+input always fill the form width;
   .button keeps its own inline-flex sizing (untouched by this). */
.account-layout.is-single-form .form-row-first,
.account-layout.is-single-form .form-row-last {
	float: none;
	width: 100%;
}
.account-layout.is-login-form {
	display: block;
	max-width: 48rem;
	margin-inline: auto;
}
.account-layout a:not(.button) {
	text-decoration: underline;
}
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-flow: column nowrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation li {
	margin: 0;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .75rem 1rem;
	text-decoration: none;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
	border-left: 2px solid transparent;
}
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--wp--preset--color--gold);
}
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--wp--preset--color--gold);
	border-left-color: var(--wp--preset--color--gold);
	background-color: color-mix(in srgb, var(--wp--preset--color--gold) 8%, transparent);
}
.woocommerce-MyAccount-content {
	display: flex;
	flex-flow: column nowrap;
	gap: 1.5rem;
	min-width: 0;
}
.woocommerce-MyAccount-content h2 {
	font-size: 1.5rem;
}
/* Generic WooCommerce .button (orders/downloads/payment-methods actions,
   form submit buttons, "Browse products" in empty-state notices, login,
   lost-password, add-payment-method...) mapped to this theme's outline
   button look (see .button-like.outline, style.css ~line 259) rather than
   duplicating that block under a different selector list. */
.account-layout .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-family: inherit !important;
	font-size: .875rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: .15rem !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	padding: .75rem 1.5rem !important;
	border-radius: 0 !important;
	cursor: pointer;
	background-color: transparent !important;
	color: var(--wp--preset--color--gold) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent) !important;
}
.account-layout .button:hover {
	border-color: var(--wp--preset--color--gold) !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--gold) 8%, transparent) !important;
}
/* My Account "Crédito de tienda" tab (inc/woocommerce/store-credit.php). */
.store-credit-balance {
	margin-bottom: 2rem;
}
.store-credit-balance .title {
	font-size: 2rem;
}
/* Orders / downloads / payment-methods / order-details tables. WooCommerce's
   own shop_table_responsive stacks these below 768px (hides <thead>, turns
   <tr>/<td> into blocks with a data-title label) — see
   woocommerce/assets/css/woocommerce-smallscreen.scss, enqueued only under
   that same max-width so it isn't in this theme's own CSS to override job;
   this only restyles colors/spacing on top of that. */
.account-layout table.shop_table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: .9375rem;
}
.account-layout table.shop_table th,
.account-layout table.shop_table td {
	padding: .875rem 1rem;
	text-align: left;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.account-layout table.shop_table thead th {
	font-size: .75rem;
	letter-spacing: .1rem;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
}
.account-layout table.shop_table tfoot th,
.account-layout table.shop_table tfoot td {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	border-bottom: none;
}
.account-layout table.shop_table .button {
	padding: .5rem 1rem;
}
@media (max-width: 768px) {
	.account-layout table.shop_table_responsive tr {
		display: block;
		padding: 1rem 0;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	}
	.account-layout table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: .375rem 0;
		border: none;
	}
	.account-layout table.shop_table_responsive td::before {
		font-weight: 400;
		color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
	}
}
.woocommerce-pagination {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin-top: 1.5rem;
	padding: 0 1.5rem;
}
.woocommerce-pagination .page-numbers-list {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}
.woocommerce-pagination .page-numbers.dots {
	padding: 0 .25rem;
	color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
}
.woocommerce-pagination .page-numbers.is-disabled {
	opacity: .4;
	pointer-events: none;
}
/* Mobile: numbers on their own centered row of compact squares, with
   Anterior / Siguiente as two equal buttons underneath (one nowrap row of
   full-size buttons overflowed). Uses the narrower page window marked up by
   sharkcards_render_shop_pagination(). */
.woocommerce-pagination .page-numbers.is-mobile-only {
	display: none;
}
@media (max-width: 699px) {
	.woocommerce-pagination {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem .75rem;
		padding: 0 1rem;
	}
	.woocommerce-pagination .page-numbers-list {
		grid-column: 1 / -1;
		grid-row: 1;
		flex-wrap: nowrap;
		gap: .375rem;
	}
	.woocommerce-pagination .page-numbers-list .page-numbers.is-desktop-only {
		display: none;
	}
	.woocommerce-pagination .page-numbers.is-mobile-only {
		display: inline;
	}
	.woocommerce-pagination .page-numbers.number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.5rem;
		height: 2.5rem;
		padding: 0 .5rem;
		letter-spacing: 0;
		font-size: .9375rem;
	}
	.woocommerce-pagination .page-numbers.dots {
		padding: 0;
	}
	.woocommerce-pagination .page-numbers.prev,
	.woocommerce-pagination .page-numbers.next {
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		padding: .75rem 1rem;
		font-size: .75rem;
		letter-spacing: .1rem;
	}
	.woocommerce-pagination .page-numbers.prev::before {
		content: '\2039';
		font-size: 1.25em;
		line-height: 1;
	}
	.woocommerce-pagination .page-numbers.next::after {
		content: '\203A';
		font-size: 1.25em;
		line-height: 1;
	}
}
/* Addresses (my-address.php) and the logged-out login/register split
   (form-login.php) share the same .u-columns.col2-set/.u-column1/.u-column2
   markup — WC's own version floats these with percentage widths, neutralized
   here in favor of a simple grid. */
.account-layout .u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 700px) {
	.account-layout .u-columns.col2-set {
		grid-template-columns: 1fr 1fr;
	}
}
/* Same issue as .woocommerce::before/::after above: .col2-set gets WC's own
   clearfix (content:" "), which becomes a real anonymous grid item once
   .col2-set is a grid container, pushing the two real .u-column1/.u-column2
   items into the wrong cells. */
.account-layout .u-columns.col2-set::before,
.account-layout .u-columns.col2-set::after {
	content: none;
	display: none;
}
/* WC's own compiled CSS targets these same elements via ".woocommerce .col2-set
   .col-1"/".col-2" (3 classes), which outranks a plain ".account-layout
   .u-column1"/".u-column2" (2 classes) — that's why width:48% was still winning
   despite the reset below. !important settles it without having to match/beat
   WC's selector, same approach as the nav/content float fix above. */
.account-layout .u-column1,
.account-layout .u-column2 {
	float: none;
	width: 100% !important;
}
.woocommerce-Address {
	box-sizing: border-box;
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.woocommerce-Address-title {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
/* Same issue as .woocommerce::before/::after and .u-columns.col2-set::before/::after
   above: WC's own clearfix content (content:" ") becomes a real anonymous flex item
   once .woocommerce-Address-title is a flex container, landing as the first item
   ahead of the real h2 — space-between then pushes the title away from the left
   edge instead of flush against it. Dropping the generated content leaves just the
   real h2/.edit pair, restoring title-left/edit-right.
   !important because the actual rule doing this is WooCommerce's own
   ".woocommerce-account .addresses .title::before" (3 classes) — plain
   ".woocommerce-Address-title::before" (1 class) can't outrank that on
   specificity alone regardless of stylesheet order. */
.woocommerce-Address-title::before,
.woocommerce-Address-title::after {
	content: none !important;
	display: none !important;
}
.woocommerce-Address-title h2 {
	font-size: 1.125rem;
}
.woocommerce-Address address {
	font-style: normal;
	color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
}
/* Account details / edit address / login / lost-password forms — boxed the
   same way as .contact-layout .auth-form and .psa-form (border + padding),
   for consistency with the other forms on the site. No shared class to hook
   without touching WC's own templates, hence the generic "form" selector —
   scoped forms don't exist anywhere else inside .account-layout. */
.account-layout form {
	padding: 2rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
/* !important on the visual properties because WC's own woocommerce.scss/
   woocommerce-layout.scss styles .input-text etc. in a few narrowly-scoped
   contexts with more classes than a plain ".account-layout input.input-text"
   descendant selector — same specificity issue as the float/clearfix fixes
   above, so guarded the same way rather than chasing each one down. */
.account-layout input.input-text,
.account-layout select,
.account-layout textarea {
	box-sizing: border-box;
	width: 100%;
	padding: .75rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: inherit !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent) !important;
}
.account-layout input.input-text:focus,
.account-layout select:focus,
.account-layout textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold) !important;
}
/* Native <select> chrome (the dropdown arrow especially) doesn't fully
   respond to background-color/border on its own in every browser — appearance:
   none drops that OS-native chrome so the border/background above render
   cleanly, and a plain custom arrow (matching --wp--preset--color--gold,
   rgb(212,170,53) / #d4aa35) replaces the one that was removed. */
.account-layout select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d4aa35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	padding-right: 2.75rem !important;
}
/* select.country_select/.state_select get replaced by a searchable
   "selectWoo" widget (WC's own select2 fork — see country-select.js) on
   is_account_page() — that's why the plain <select> styling above flashes
   briefly before JS swaps in this markup instead. select2.css ships its own
   light theme, restyled here to match. Everything below is unscoped (not
   .account-layout ...) because the open dropdown panel is a second
   .select2-container appended to <body> by select2's "attach body" positioning
   (not nested inside .account-layout) — and select2/selectWoo isn't used
   anywhere else on this site currently, so there's nothing else it could clash
   with. */
.select2-container .select2-selection--single {
	box-sizing: border-box;
	height: auto;
	padding: .75rem 1rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
	border-radius: 0;
}
/* The width:100% override below IS scoped to .account-layout — unlike the rules
   above, it must NOT reach the body-appended open-dropdown clone. That clone is
   positioned absolute with a JS-calculated inline "left" offset to sit under its
   trigger, and select2 also sets its own inline width (matching the trigger) —
   forcing width:100% !important there overrides that inline width to 100% of the
   viewport while the left offset stays, pushing it past the right edge and
   causing horizontal scroll on mobile. The always-present inline (closed) select2
   box, which does need width:100% to fill its form column, lives inside
   .account-layout; the transient body clone never does. */
.account-layout .select2-container {
	width: 100% !important;
}
.select2-container--open .select2-selection--single {
	border-color: var(--wp--preset--color--gold);
}
.select2-selection__rendered {
	padding: 0 !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--white) !important;
}
.select2-selection__arrow {
	top: 50% !important;
	right: 1rem !important;
	transform: translateY(-50%);
	height: auto !important;
}
.select2-selection__arrow b {
	border-color: var(--wp--preset--color--gold) transparent transparent transparent !important;
}
.select2-container--open .select2-selection__arrow b {
	border-color: transparent transparent var(--wp--preset--color--gold) transparent !important;
}
.select2-dropdown {
	background-color: var(--wp--preset--color--black);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
	border-radius: 0;
}
.select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	width: 100%;
	padding: .5rem .75rem;
	font-family: inherit;
	color: var(--wp--preset--color--white) !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
}
.select2-results__option {
	padding: .625rem 1rem;
	color: var(--wp--preset--color--white);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: color-mix(in srgb, var(--wp--preset--color--gold) 15%, transparent);
	color: var(--wp--preset--color--gold);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: color-mix(in srgb, var(--wp--preset--color--gold) 8%, transparent);
}
/* Matches the .subtitle.text-75 treatment used for field captions on the
   other forms on the site (page-contacto.php, page-psa.php). */
.account-layout label {
	display: block;
	margin-bottom: .375rem;
	font-size: .75rem;
	letter-spacing: .15rem;
	text-transform: uppercase;
	line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
}
/* form-edit-account.php's display-name field description — the only inline
   field hint among these account forms. */
#account_display_name_description {
	font-size: .875rem;
	color: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
}
.account-layout .required {
	color: var(--wp--preset--color--gold) !important;
	text-decoration: none;
}
/* Form h2s (form-edit-address.php's page title, form-login.php's "Login"/
   "Register") get the .title font treatment used for headings elsewhere on
   the site — can't add the class itself without overriding those templates,
   so its declared properties (font-family, line-height) are replicated
   directly; font-size isn't part of .title itself (it's contextual there
   too), picked to match .woocommerce-MyAccount-content h2 above. */
.account-layout form h2 {
	font-family: var(--wp--preset--font-family--cormorantgaramond);
	line-height: 1;
	font-size: 1.5rem;
	margin: 0 0 1.5rem;
}
/* WC's password-visibility toggle button (see woocommerce.js:
   show-password-input) renders its eye icon via a hardcoded black
   (fill="%23111111") SVG data URI background-image — not overridable via
   `color` since it's a raster-ish background image, not stroked/filled text,
   so the same SVG is repeated here with the fill swapped to gold
   (rgb(212,170,53) / #d4aa35). Second rule is the "hide" (eye-slash) icon
   shown once toggled on (.display-password). */
.account-layout .show-password-input::before {
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23d4aa35"/></svg>') !important;
}
.account-layout .show-password-input.display-password::before {
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23d4aa35"/></svg>') !important;
}
.account-layout .woocommerce-form-row,
.account-layout p.form-row {
	margin: 0 0 1rem;
}
.account-layout .clear {
	display: none;
}
.account-layout fieldset {
	margin: 1.5rem 0 0;
	padding: 1.5rem 0 0;
	border: none;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.account-layout fieldset legend {
	padding: 0;
	margin-bottom: 1rem;
	font: inherit;
}
.account-layout .woocommerce-EditAccountForm,
.account-layout .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1.5rem;
}
.account-layout .woocommerce-EditAccountForm > *,
.account-layout .woocommerce-address-fields__field-wrapper > * {
	grid-column: 1 / -1;
}
/* WC's own ".woocommerce form .form-row-first"/".form-row-last" (2 classes + 1
   element = specificity 0,0,2,1) still sets width:47% regardless of viewport —
   same issue as the addresses list's .col-1/.col-2 (see .woocommerce-Address
   above), just one grid level in: the row only fills 47% of its grid cell (the
   full-width single column below 640px, or the 50%-wide cell at 640px+),
   leaving label and input looking like they're using half the column.
   Targeting .form-row-first/.form-row-last by name (not the ">.*" universal
   selector above) matters here: that selector is only 2 classes + 0 elements
   (0,0,2,0), which LOSES to WC's (0,0,2,1) — equal class count means the tie
   goes to whoever also has an element in the selector. Naming the classes here
   makes it 3 classes (0,0,3,0), which wins outright. Applied unconditionally
   (not just inside the 640px breakpoint) since WC's rule isn't
   viewport-gated either — mobile's single-column layout needs it too. */
.account-layout .woocommerce-EditAccountForm > .form-row-first,
.account-layout .woocommerce-EditAccountForm > .form-row-last,
.account-layout .woocommerce-address-fields__field-wrapper > .form-row-first,
.account-layout .woocommerce-address-fields__field-wrapper > .form-row-last {
	width: 100%;
}
@media (min-width: 640px) {
	.account-layout .woocommerce-EditAccountForm,
	.account-layout .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}
	.account-layout .woocommerce-EditAccountForm > .form-row-first,
	.account-layout .woocommerce-EditAccountForm > .form-row-last,
	.account-layout .woocommerce-address-fields__field-wrapper > .form-row-first,
	.account-layout .woocommerce-address-fields__field-wrapper > .form-row-last {
		grid-column: auto;
	}
}
/* Login / register / lost-password / reset-password / add-payment-method. */
.account-layout .woocommerce-form-login__rememberme {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1rem;
	cursor: pointer;
}
.account-layout input.woocommerce-form__input-checkbox,
.account-layout input[type="checkbox"],
.account-layout input[type="radio"] {
	accent-color: var(--wp--preset--color--gold);
}
.account-layout .woocommerce-PaymentMethods {
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.account-layout .woocommerce-PaymentMethod {
	padding: 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}
.account-layout .woocommerce-PaymentMethod label {
	display: inline;
	margin: 0 0 0 .5rem;
}