/*!
Theme Name: Penetrit
Theme URI: https://penetrit.com/
Author: ViderLab
Author URI: https://viderlab.com/
Description: Official WordPress theme for Penetrit.
Version: 1.0.2
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: penetrit
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CSS Custom Properties
--------------------------------------------------------------*/
:root {
	--font-family-main: arial, sans-serif;
	--color-primary: #f00;
	--color-primary-hover: #c00;
	--color-black: #332f21;
	--color-white: #fff;
	--color-gray: #808080;
	--color-middle-gray: #ccc;
	--color-ligth-gray: #efefef;
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.7;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: var(--font-family-main);
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
	font-style: normal;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: transparent;
	text-decoration: none;
	font-weight: 600;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--color-black);
	text-decoration: none;
}

a:visited {
	color: var(--color-black);
}

a:hover,
a:focus,
a:active {
	color: var(--color-primary-hover);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: none;
	background-color: var(--color-primary);
	color: white;
	line-height: 1;
	padding: 0.8rem 1rem;
	font-weight: 600;
	min-width: 9rem;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color: var(--color-primary-hover);
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	padding: 24px 13px 8px;
	background-color: transparent;
	border: 1px solid hsla(0, 0%, 7%, .8);
	border-radius: 0;
	box-sizing: border-box;
	color: #2b2d2f;
	font-family: inherit;
	font-size: 16px;
	font-style: inherit;
	font-weight: inherit;
	height: 50px;
	letter-spacing: inherit;
	line-height: 25px;
	margin: 0;
	min-height: 0;
	text-decoration: inherit;
	text-transform: inherit;
	width: 100%;
}

.select2-container--default .select2-selection--single {
	background-color: #fff;
	border: 1px solid hsla(0, 0%, 7%, .8);
	border-radius: 0;
	line-height: 25px;
	height: 50px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 50px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 50px;
}


input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
.site .header-widgets,
.site .header-main,
.site .site-main,
.site .footer-widgets,
.site .site-info,
.penetrit-breadcrumb-wrapper {
    max-width: 1000px;
    margin: 0 1rem;
}

.header-main {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.5rem;
	gap: 1rem;
}


/* Who we are
--------------------------------------------- */

.who-we-are {
	margin-left: 1rem
}

.who-we-are p {
	text-align: justify;
}

/* Contact
--------------------------------------------- */

.contact {
	gap: 3rem;
}

.contact .contact-form {
	flex-basis: 60%;
}
.contact .contact-details {
	flex-basis: 40%;
	gap: 1rem;
}

.contact-form form .nf-form-content > * {
	display: grid;
	grid-template-areas: "name surname" "email phone" "message message" "captcha submit";
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}

.contact-form form .nf-form-content > * > *:nth-child(1) {
	grid-area: name;
}
.contact-form form .nf-form-content > * > *:nth-child(2) {
	grid-area: surname;
}
.contact-form form .nf-form-content > * > *:nth-child(3) {
	grid-area: email;
}
.contact-form form .nf-form-content > * > *:nth-child(4) {
	grid-area: phone;
}
.contact-form form .nf-form-content > * > *:nth-child(5) {
	grid-area: message;
}
.contact-form form .nf-form-content > * > *:nth-child(6) {
	grid-area: captcha;
}
.contact-form form .nf-form-content > * > *:nth-child(7) {
	grid-area: submit;
}

.contact-send {
	float: right;
}
.contact-send input {
	padding: 0.8rem 2rem;
}

.contact-details div {
	width: 100%;
}
.contact-details div i {
	flex-basis: 2rem;
	text-align: center;
	flex-shrink: 0;
}
.contact-details div p {
	flex-grow: 1;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.wp-block-accordion button:hover {
	background-color: transparent;
}

.wp-block-accordion h3 {
	font-size: 1rem;
}

.wp-block-accordion p {
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	font-size: 0.9rem;
	text-align: justify;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

/* Top
--------------------------------------------- */

.header-top {
	padding: 0.5rem;
	background-color: var(--color-primary);
	line-height: 1;
}

.header-top,
.header-top a {
	color: var(--color-white);
	font-size: 0.8rem;
}

.header-widgets {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

.header-widgets p,
.header-widgets ul {
	margin: 0;
}

.header-widgets div:nth-child(3) {
	margin-right: auto;
}

/* Branding
--------------------------------------------- */

.site-branding {
	padding: 0.5rem 1rem;
}

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 0.75rem;
	margin-left: auto; /* en móvil empuja nav+carrito a la derecha */
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

/* Triángulo con sombra - capa de sombra (detrás) */
.main-navigation ul ul::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 1.5rem;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 1;
}

/* Triángulo con sombra - capa blanca (encima, tapa la sombra interior) */
.main-navigation ul ul::after {
    content: "";
    position: absolute;
    top: -7px;
    left: calc(1.5rem + 1px);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--color-white);
    pointer-events: none;
    z-index: 2;
}


.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li {
	font-weight: 400;
	text-transform: none;
	min-width: 6rem;
	width: max-content;
	flex-shrink: 1;
	flex-grow: 1;
	background-color: white;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
	padding: 1rem;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Botón hamburguesa — base
--------------------------------------------- */
.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background-color: transparent!important;
	border: none;
	cursor: pointer;
	color: inherit;
	margin-left: auto;
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.25s ease, opacity 0.25s ease;
	position: relative;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
	content: '';
	position: absolute;
	left: 0;
}

.menu-toggle-icon::before { top: -6px; }
.menu-toggle-icon::after  { top:  6px; }

/* Ícono ✕ cuando el panel está abierto */
.main-navigation.toggled .menu-toggle-icon {
	background-color: transparent;
}

.main-navigation.toggled .menu-toggle-icon::before {
	transform: translateY(6px) rotate(45deg);
}

.main-navigation.toggled .menu-toggle-icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Panel hamburguesa: ul visible cuando abierto */
.main-navigation.toggled ul {
	display: block;
}

/* WhatsApp visible al fondo del panel cuando está abierto */
.main-navigation.toggled .nav-whatsapp-block {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	border-top: 1px solid #e0e0e0;
}

/* Breadcrumbs
--------------------------------------------- */
.woocommerce-breadcrumb {
	font-size: 0.9rem;
	margin-top: 1rem;
}

/* Cart link
--------------------------------------------- */
.header-cart-link {
	display: flex;
	column-gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 700;
}

.header-cart-link span > * {
	vertical-align: middle;
}

.header-cart-link .cart-total .amount {
	vertical-align: middle;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.site-footer {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.site .site-info {
	text-align: center;
	font-size: 0.7rem;
	padding: 0.3rem;
}

/* Footer Widgets
--------------------------------------------- */

.footer-widgets {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.footer-widgets ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
}

.footer-widgets h3 {
	font-size: 0.9rem;
	font-weight: 600;
}

.footer-widgets p {
	font-size: 0.7rem;
}

.footer-widgets ul li,
.footer-widgets h3,
.footer-widgets p {
	padding: 0.5rem 0.9rem 0;
}

.footer-widget-area {
	margin: 0 0 1.5em;
}

.footer-widget-area a {
	color: var(--color-white);
}

/* Footer Payment and Shipping Methods
--------------------------------------------- */
.footer-payment-shipping {
	background-color: white;
	padding: 2rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-payment-shipping span {
	color: var(--color-black)!important;
}

.footer-payment-shipping .payment-shipping-wrapper {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.footer-payment-shipping .payment-methods,
.footer-payment-shipping .shipping-methods {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.footer-payment-shipping .payment-methods {
	flex-basis: 70%;
}

.method-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-white);
}

.method-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.method-icons img {
	display: inline-block;
	vertical-align: middle;
	height: auto;
}

/* Footer payment/shipping responsive rules moved to # Responsive section below. */

/*--------------------------------------------------------------
# Widgets and Plugins
--------------------------------------------------------------*/

/* Advanced Product Search
--------------------------------------------- */

.apsw-search-wrap {
    margin-bottom: 1rem;
}

.apsw-search-wrap .apsw-search-btn {
	background-color: var(--color-primary);
	padding: 3px 5px;
	width: 3rem;
}

.apsw-search-wrap .apsw-search-btn svg {
	fill: var(--color-white);
	margin-top: 0.6rem;
	height: 65%;
}

.apsw-search-wrap .apsw-category-items {
	font-weight: 600;
}

/* Buscador en 2 filas en móvil (< 600px)
--------------------------------------------- */
@media screen and (max-width: 599px) {

	/* Fila 1: selector de categoría a ancho completo con separador inferior */
	.apsw-search-wrap .apsw-select-box-wrap {
		width: 100%;
		border-bottom: 1px solid #e2e1e6;
		border-radius: 5px 5px 0 0;
	}

	/* Ocultar el divisor vertical derecho: no tiene sentido en layout apilado */
	.apsw-search-wrap .apsw-select-box-wrap::after {
		display: none;
	}

	/* Fila 2: resetear el padding izquierdo y empujar el input bajo el selector.
	 * padding-top !important necesario porque el plugin declara padding: 0 !important */
	.apsw-search-wrap .apsw-search-form {
		padding-left: 0;
		padding-top: 50px !important;
		width: 98%;
		margin: 0 auto !important;
	}

	/* Input: anular el margin-left del plugin (!important) y dar todo el ancho menos el botón */
	.apsw-search-wrap .apsw-search-form input[type=search] {
		margin-left: 0 !important;
		max-width: calc(100% - 42px);
	}

	/* Botón: centrado vertical en fila 2 (50px de altura fija), anular translateY del plugin */
	.apsw-search-wrap .apsw-search-btn {
		top: auto;
		bottom: 0;
		height: 50px;
		-ms-transform: none;
		transform: none;
	}

	/* Panel de resultados AJAX: reposicionar bajo ambas filas (50px selector + 50px input + 2px bordes) */
	.apsw-search-wrap .apsw_ajax_result {
		top: 102px;
	}
}

ul.apsw_data_container li .apsw_result_on_sale {
	background: var(--color-primary);
}

.apsw_ajax_result a.apsw_view_all_product {
    color: white;
    border-color: black;
    background-color: black;
		text-transform: uppercase;
		font-weight: 600;
}

/* Ninja Forms
--------------------------------------------- */

.nf-after-field .nf-error-msg {
	font-size: 0.8rem!important;
}

.nf-form-fields-required {
	font-size: 0.7rem;
	margin-bottom: 0.4rem;
}

/* Social Icons
--------------------------------------------- */

:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-whatsapp {
    background-color: var(--color-primary);
}

/* Nav WhatsApp Block
--------------------------------------------- */

/* Oculto por defecto en móvil (panel cerrado) */
.main-navigation .nav-whatsapp-block {
	display: none;
}

/* Mayor especificidad que .main-navigation a { display: block } */
.main-navigation .nav-whatsapp-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
	text-transform: none;
}

/* Ícono circular con fondo del color primario */
.nav-whatsapp-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--color-primary);
	flex-shrink: 0;
}

.nav-whatsapp-icon svg {
	fill: #fff;
	display: block;
}

/* Texto apilado verticalmente */
.nav-whatsapp-text {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.nav-whatsapp-number {
	font-size: 0.7rem;
	font-weight: 800;
	line-height: 1.3;
}

.nav-whatsapp-label {
	font-size: 0.6rem;
	font-weight: 400;
	line-height: 1.3;
}

/* WooCategory Slider
--------------------------------------------- */
.sp-wcsp-slider-area #sp-wcsp-slider-section-58 .sp-wcsp-cat-item .sp-wcsp-cat-details .sp-wcsp-cat-details-content {
	padding: 0!important;
}

/* Thumbnail container with hover effect overlay */
.sp-wcsp-cat-item-thumb-content {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.sp-wcsp-slider-area #sp-wcsp-slider-section-58 .sp-wcsp-cat-item .sp-wcsp-cat-item-thumb-content {
	border: none!important;
}

/* Thumbnail wrapper */
.sp-wcsp-cat-thumbnail {
	position: relative;
	overflow: hidden;
	display: block;
}

/* Thumbnail image */
.sp-wcsp-cat-thumbnail img,
.sp-wcsp-cat-thumb {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 0.3s ease;
	border-radius: 99999px;
}

/* Red overlay with blend mode on hover */
.sp-wcsp-cat-thumbnail::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-primary);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	border-radius: 99999px;
}

/* Hover effects */
.sp-wcsp-cat-item-thumb-content:hover .sp-wcsp-cat-thumbnail::after {
	opacity: 1;
}

.sp-wcsp-cat-item-thumb-content:hover .sp-wcsp-cat-thumb {
	filter: grayscale(100%);
}

/* En mobile el círculo ocupa todo el ancho — reducir el contenedor con margen lateral. */
@media (max-width: 767px) {
	.sp-wcsp-cat-item-thumb-content {
		width: calc(100% - 3rem);
		margin: 0 auto;
	}
}

/* Category details overlay (centered text) */
.sp-wcsp-cat-details {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	text-align: center;
	width: 100%;
}

/* Category name link styling */
.sp-wcsp-slider-area #sp-wcsp-slider-section-58 .sp-wcsp-cat-item .sp-wcsp-cat-details .sp-wcsp-cat-details-content .sp-wcsp-cat-name a,
.sp-wcsp-slider-area #sp-wcsp-slider-section-58 .sp-wcsp-cat-item .sp-wcsp-cat-details .sp-wcsp-cat-details-content .sp-wcsp-cat-name a:hover {
	color: var(--color-white)!important;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.1rem;
	padding: 0.5rem 0.9375rem;
	margin: 0;
	border-radius: 5px;
	transition: background 0.3s ease;
}

/* Featured category heading
--------------------------------------------- */
h2.featured-cat {
	text-align: center;
	position: relative;
	padding-bottom: 0.6rem;
	margin-bottom: 0 !important;
}

h2.featured-cat::after {
	content: '';
	display: block;
	width: 3rem;
	height: 3px;
	background-color: var(--color-primary);
	margin: 0.4rem auto 0;
}

/* Featured products
--------------------------------------------- */
.featured-products {
	display: flex;
	flex-direction: column;
	margin: 0 1rem 2rem;
}

@media (min-width: 768px) {
	.featured-products {
		flex-direction: row;
	}
}

.featured-products > div {
	flex-basis: 33%;
}

.featured-products ul,
.wp-block-woocommerce-product-collection ul {
	margin-left: 0;
	gap: 1rem;
}

.featured-products h2 {
	margin-bottom: 1.5rem!important;
	font-size: 1.1rem!important;
	text-align: left;
	font-weight: 800;
}
.featured-products .featured-products-offers h2 {
	color: var(--color-primary)
}

.featured-products li.product {
	display: grid;
	grid-template-columns: 30% auto;
	grid-template-rows: 30% auto 25%;
	grid-template-areas:
			"image title"
			"image price"
			"image button";
	column-gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-ligth-gray);
}

.featured-products li.product .wc-block-components-product-image {
	grid-area: image;
	margin-bottom: 0;
}

.featured-products li.product .wc-block-components-product-image a {
	background-color: white;
	padding: 0.3rem;
}

.featured-products li.product .wp-block-post-title {
	grid-area: title;
	font-size: 0.7rem !important;
	font-weight: 400;
	text-align: left;
	margin-bottom: 0.2rem !important;
}

.featured-products li.product .wp-block-woocommerce-product-price {
	grid-area: price;
	font-size: 0.95rem !important;
	text-align: left;
	font-weight: 800;
	margin-bottom: 0;
}
.featured-products li.product .wp-block-woocommerce-product-price ins {
	color: var(--color-primary);
	background-color: transparent;
	padding-left: 0.5rem;
}

.featured-products li.product .wc-block-components-product-button {
	grid-area: button;
	align-items: self-start;
}

.featured-products li.product .wc-block-components-product-button button,
.featured-products li.product .wc-block-components-product-button a {
	padding: 0.2rem 0.8rem;
	background-color: var(--color-primary);
	border-radius: 0;
	width: 100%;
	color: white;
	font-weight: 600;
	text-decoration: none;
}
.featured-products li.product .wc-block-components-product-button button:hover,
.featured-products li.product .wc-block-components-product-button a:hover {
	background-color: var(--color-primary-hover);
	color: white;
}

/* Woo Tabbed Category Product Listing
--------------------------------------------- */

.wtcpl_category_nav li a:link, 
.wtcpl_category_nav li a:visited, 
.wtcpl_category_nav li a:active {
	background-color: transparent!important;
	text-transform: none!important;
}

.wtcpl_category_nav li a:hover, 
.wtcpl_category_nav li a.active {
	border: none!important;
	border-bottom: 3px solid var(--color-primary)!important;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Ninja Forms
--------------------------------------------- */

.nf-field-label {
	position: absolute;
	top: 6px;
	left: 3px;
	transform: scale(.82);
	color: #404040;
	font-family: var(--font-family-main);
	font-size: 1rem;
	line-height: 1.5;
}

.nf-field-label label {
	font-weight: 400!important;
}

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Responsive — Mobile First
  --bp-sm:  480px  | teléfonos landscape
  --bp-md:  600px  | tablet pequeña
  --bp-lg:  768px  | tablet portrait — hamburguesa → menú desktop
  --bp-xl: 1024px  | laptop / escritorio
  Regla: solo min-width, solo px, orden sm → md → lg → xl.
--------------------------------------------------------------*/

/* --bp-sm: 480px
--------------------------------------------- */
@media screen and (min-width: 480px) {

	/* Padding lateral mínimo en móvil grande */
	.site .header-widgets,
	.site .header-main,
	.site .site-main,
	.site .footer-widgets,
	.site .site-info,
	.penetrit-breadcrumb-wrapper {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* --bp-md: 600px — header-widgets en fila, contact en fila
--------------------------------------------- */
@media screen and (min-width: 600px) {

	/* Header widgets: apilado → fila */
	.header-widgets {
		flex-direction: row;
		gap: 0;
		column-gap: 1rem;
	}

	/* Contact: formulario e info lado a lado */
	.contact {
		display: flex;
		flex-direction: row;
		gap: 2rem;
	}

	.contact .contact-form {
		flex-basis: 60%;
	}

	.contact .contact-details {
		flex-basis: 40%;
	}
}

/* --bp-lg: 768px — header principal, footer, payment en fila
--------------------------------------------- */
@media screen and (min-width: 768px) {

	/* Menú desktop: ocultar toggle, nav en fila */
	.menu-toggle {
		display: none;
	}

	.main-navigation {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		flex-grow: 1;
		margin-left: 0; /* reset: flex-grow gestiona el espacio en desktop */
	}

	.main-navigation ul {
		display: flex;
	}

	/* WhatsApp visible en línea, empujado a la derecha del nav */
	.main-navigation .nav-whatsapp-block {
		display: flex;
		align-items: center;
		margin-left: auto;
	}

	/* Header main: aumentar gap en desktop */
	.header-main {
		gap: 2rem;
	}

	/* Footer widgets: apilado → fila */
	.footer-widgets {
		flex-direction: row;
		column-gap: 3rem;
	}

	/* Footer payment/shipping (consolidado desde bloque anterior) */
	.payment-shipping-wrapper {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 3rem;
	}

	.payment-methods,
	.shipping-methods {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}
}

/* --bp-xl: 1024px — escritorio
--------------------------------------------- */
@media screen and (min-width: 1024px) {

	/* Quitar padding lateral en wrapper principal (max-width lo contiene) */
	.site .header-widgets,
	.site .header-main,
	.site .site-main,
	.site .footer-widgets,
	.site .site-info,
	.penetrit-breadcrumb-wrapper {
		padding-left: 0;
		padding-right: 0;
		margin: 0 auto;
	}
}