/*
Theme Name:     EvaYQue
Theme URI:
Description:    Storefront child theme for EvaYQue — red / black / white, modeled after the client's reference (anthonyschuman.myshopify.com): black header + hero, white edge-to-edge product grid, light footer.
Author:         EvaYQue
Author URI:
Template:       storefront
Version:        0.2.0
*/

:root {
	--eyq-red: #D6162A;
	--eyq-red-dark: #A80F20;
	--eyq-black: #111111;
	--eyq-white: #FFFFFF;
	--eyq-gray: #F2F2F2;
	--eyq-font-display: 'Archivo Black', 'Oswald', Impact, sans-serif;
	--eyq-font-heading: 'Oswald', 'Archivo Black', Impact, sans-serif;
}

/* Base */
body {
	background-color: var(--eyq-white);
	color: var(--eyq-black);
}

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

a:hover,
a:focus {
	color: var(--eyq-red);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--eyq-black);
	font-family: var(--eyq-font-heading);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ---------- Header: black, like the reference ---------- */
#masthead.site-header {
	background-color: var(--eyq-black);
	border-bottom: 3px solid var(--eyq-red);
	margin-bottom: 0;
	position: relative;
}

/* The mobile drawer menu (.handheld-navigation) toggles open/closed via
   Storefront's own max-height/overflow transition on its inner <ul>, not
   display: none — so even "closed" it stays in normal flow and keeps its
   own preferred width (~186px here, sized off its widest menu label). That
   was invisible in Storefront's original stacked (block) header, but once
   .main-navigation became a flex item sized to shrink-fit its content (for
   the single-line header above), that phantom 186px got counted as part of
   its width — the real reason the social icons didn't have room and wrapped
   to a second line even after the other space fixes. Taking it out of flow
   entirely fixes that, and turns it into the dropdown panel it visually
   already looked like once opened. */
.handheld-navigation {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 999;
	/* Before it was taken out of flow (above), this panel was still
	   physically inside #masthead's own content box, so it picked up that
	   element's black background for free. As an absolutely-positioned
	   overlay it now paints over whatever's behind it on the page instead
	   (the hero photo) with no background of its own — white menu text on
	   top of that was next to unreadable. Give it an explicit one. */
	background-color: var(--eyq-black);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
	padding: 0.25em 1.5em 0.75em;
}

/* Collapse the branding+search row and the nav+cart row into a single line,
   at every width (Storefront normally stacks them: branding/search on row
   1, nav/cart on row 2, each using percentage-based floats). Used to be
   desktop-only (min-width: 768px) — on phones that left the social icons
   stacked on their own second row below the logo/menu button, and kept
   Storefront's default 1.618em top/bottom header padding untouched, adding
   up to a lot of dead vertical space. Applying the same single-line flex
   layout at every width puts the icons on the logo/menu row instead (see
   the margin-left: auto on .eyq-social-icons below) and gets the smaller
   0.6em padding everywhere too. */
#masthead.site-header {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	column-gap: 2em;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	/* Storefront's own .col-full (used below, on both the branding wrapper
	   and the nav wrapper) provides this same centered-max-width-plus-gutter
	   itself — but only because it normally has room to apply its own
	   max-width/auto-margins. Flattening the header into one flex row (this
	   block) strips that from each wrapper (max-width: none below) so they
	   can sit side by side instead of each fighting to center itself, which
	   left the whole row hugging the browser's edges instead of lining up
	   with the centered content below it. Re-added here, on the row itself,
	   with the exact same max-width/gutter figures as core Storefront's
	   .col-full (style.css: max-width 66.4989378333em, gutter 2.617924em),
	   so the header aligns with it again. */
	padding-left: max(2.617924em, calc((100% - 66.4989378333em) / 2));
	padding-right: max(2.617924em, calc((100% - 66.4989378333em) / 2));
}

/* Storefront gives .site-header a ::before/::after clearfix pair (content:
   "", display: table) for its normal float-based layout. Once it's a flex
   container those become real (empty) flex items — each still claiming its
   own column-gap, which silently padded out both ends of the row by an
   extra ~16(-32)px and was most of what was still overflowing the social
   icons on a phone even after fixing the double gutter below. Flex doesn't
   need a clearfix in the first place, so just drop them here. */
#masthead.site-header::before,
#masthead.site-header::after {
	content: none;
}

#masthead > .col-full {
	width: auto;
	flex: 0 0 auto;
	max-width: none;
	/* Gutter now lives on #masthead.site-header itself (above) so the row
	   lines up with the centered content below it — zero this wrapper's own
	   padding AND margin (Storefront's default .col-full carries 2.617924em
	   padding left/right, plus margin-left/right: auto for its own
	   independent centering) so neither is added on top, doubling the
	   gutter and eating into the already-tight space this row needs on a
	   phone. */
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

#masthead .site-branding {
	float: none;
	width: auto;
	margin-right: 0;
	/* Storefront's default margin-bottom: 1.41575em was for the old stacked
	   layout (branding row, then nav row below it) — in this flex row it
	   just makes branding's own flex-item height taller than the logo image
	   inside it, which was quietly keeping the whole header taller than the
	   logo + padding alone would need. */
	margin-bottom: 0;
}

/* Full-width search input doesn't fit a single-line header; drop it here. */
#masthead .site-search {
	display: none;
}

.storefront-primary-navigation {
	clear: none;
	flex: 1 1 auto;
	margin-top: 0;
	width: auto;
}

.storefront-primary-navigation .col-full {
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.5em;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	max-width: none;
	width: 100%;
	margin: 0;
	/* See the margin/padding: 0 comment on #masthead > .col-full above —
	   same double-gutter reason. */
	padding: 0;
}

#site-navigation.main-navigation {
	float: none;
	width: auto;
}

.site-header-cart {
	float: none;
	width: auto;
	margin-left: auto;
	margin-bottom: 0;
}

.site-header-cart,
#masthead .site-search {
	color: var(--eyq-white);
}

/* Social icons: top-right of the nav bar, next to the cart */
.eyq-social-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9em;
	margin-left: 1em;
}

.eyq-social-icons__link {
	display: inline-flex;
	color: var(--eyq-white);
	opacity: 0.85;
	line-height: 0;
}

.eyq-social-icons__link:hover {
	color: var(--eyq-red);
	opacity: 1;
}

.eyq-social-icons__link svg {
	width: 18px;
	height: 18px;
}

/* design_header_desktop.png: the icons sit on their own line above the nav
   menu / cart line, right-aligned — not inline with them like before.
   .storefront-primary-navigation .col-full is already flex-wrap: wrap, so
   giving the icons flex: 0 0 100% forces them onto a line by themselves,
   and order: -1 puts that line first. Client feedback round 2: the nav menu
   was left-aligned under that (cart's own margin-left: auto was the only
   thing pulling right, so it sat far apart from the cart on the far right)
   and the two rows had too much space between them — right-align the whole
   nav+cart line as one group instead (replacing the auto-margin push with
   justify-content on the row, and a small fixed gap between nav and cart
   instead of auto's "push to the far edge"), and shrink the row gap. */
@media (min-width: 769px) {
	.eyq-social-icons {
		order: -1;
		flex: 0 0 100%;
		justify-content: flex-end;
		margin-left: 0;
		margin-bottom: 0.15em;
	}

	.storefront-primary-navigation .col-full {
		justify-content: flex-end;
	}

	.site-header-cart {
		margin-left: 1.5em;
	}

	/* Storefront's own nav-menu link padding (1.618em top/bottom) was sized
	   for the old full-height desktop nav bar, where the nav *was* the
	   header's main row. In this compact second row it just adds dead space
	   above/below the text — which was also throwing off the logo's vertical
	   centering against the combined icons+nav block (its visual weight
	   skewed low). */
	.main-navigation ul.nav-menu > li > a {
		padding: 0.4em 0.9em;
	}

	/* Client feedback round 3: still too tall overall — trim the header's
	   own top/bottom padding too (was 0.6em everywhere; scoped to desktop
	   here since mobile's single-row layout wasn't part of this complaint
	   and is already tighter). */
	#masthead.site-header {
		padding-top: 0.4em;
		padding-bottom: 0.4em;
	}
}

/* design_header_mobile.png: a 2x2 icon grid next to the MENÚ button,
   instead of the 4 icons strung out in a single row — same DOM order
   (Instagram, X, Email, Web) reads as top-left/top-right/bottom-left/
   bottom-right.
   Client feedback round 3: logo left / button centered in the header /
   icons flush right, rather than everything bunched up next to the logo.
   Since the button and the icon grid are siblings inside the same flex
   line (after the logo, which is a separate flex item), a flex-only
   layout can't center one of them against the *whole* header while also
   pushing the other flush to its far edge — centering the button eats
   into the free space the icons would otherwise use to reach the edge.
   Taking the button out of flex flow instead (positioned dead-center of
   #masthead, which is already position: relative — see near the top of
   this file) sidesteps that: it no longer competes for space, so the
   icons' own margin-left: auto (replacing the old fixed 0.75em) can pull
   them all the way to the right edge on its own. */
@media (max-width: 768px) {
	/* button.menu-toggle, not .menu-toggle — Storefront's own core rule sets
	   position: relative at that (element + class) specificity, which beat
	   a plain class selector here regardless of source order (same trap as
	   the padding/background overrides on this button further down): the
	   button stayed in flex flow and top/left/transform ended up offsetting
	   it from its normal in-flow spot instead of centering it in #masthead,
	   pushing it up out of the header entirely. */
	button.menu-toggle {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.eyq-social-icons {
		order: 1;
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: 0.35em 0.7em;
		margin-left: auto;
	}

	.site-header-cart {
		order: 2;
		margin-left: 0;
	}
}

/* design_header_mobile.png: MENÚ button restyled as a bordered box with the
   label above a stacked hamburger icon, instead of Storefront's default
   white pill with the icon to the left of the label. No media query needed
   — Storefront's own core CSS already hides .menu-toggle above 768px, this
   only ever renders on mobile.
   The 3 hamburger bars are Storefront's own ::before/::after/span::before
   pseudo-elements (a hamburger-to-X animation on toggle) — repositioning
   rather than replacing them keeps that animation working. Their base
   position (`button.menu-toggle::before,` etc., matched verbatim so this
   wins on specificity) was top: 50%; left: 1em — centered vertically,
   pinned to the left, for the old label-then-icon layout; moved here to
   bottom: anchored, horizontally centered, for stacked label-above-icon.
   Selector is `button.menu-toggle`, not just `.menu-toggle` — Storefront's
   own core rule is that specific (element + class), so a plain class
   selector loses the non-color properties (padding, background) to it
   regardless of source order. The 2 colors (background, text — border is
   gone, see below) are also each separately set by a Customizer-generated
   stylesheet that loads after this one and matches at that same
   button.menu-toggle specificity, so still need !important to win — same
   reason as the handheld footer bar cart count further down.
   Round 2 of client feedback: no border (was 2px solid white — client
   found it unnecessary now that the label/icon read fine on their own),
   and a little bigger overall — font-size up (0.875em Storefront default
   → 1.15em), padding up to match, and the 3 hamburger bars widened from
   14px to 18px (with the matching -9px margin-left to keep them centered —
   half of the new width, same as before). */
button.menu-toggle {
	float: none;
	max-width: none;
	background-color: transparent !important;
	border: none !important;
	padding: 0.5em 1.5em 1.3em;
	font-size: 1.15em;
	text-align: center;
	color: var(--eyq-white) !important;
}

.menu-toggle span {
	text-transform: none;
	font-weight: 500;
}

button.menu-toggle::before,
button.menu-toggle::after,
button.menu-toggle span::before {
	left: 50%;
	top: auto;
	bottom: 0.65em;
	width: 18px;
	margin-left: -9px;
	margin-top: 0;
	background-color: var(--eyq-white) !important;
}

/* Originally trimmed the icons' own footprint on very narrow phones so a
   single row of 4 wouldn't overflow the screen. They're a 2×2 grid now
   (much narrower already) pinned to the right edge via margin-left: auto
   (see the @media (max-width: 768px) block above) — this used to also set
   a fixed margin-left here, which doesn't just fail to help anymore, it
   actively overrides that auto value back to a small fixed one (both
   .eyq-social-icons rules are the same specificity, and this block comes
   later in the file), pulling the icons back in from the edge. Gap/icon
   size still trimmed a little further for safety on the smallest screens. */
@media (max-width: 480px) {
	#masthead.site-header {
		column-gap: 1em;
	}

	.eyq-social-icons {
		gap: 0.6em;
	}

	.eyq-social-icons__link svg {
		width: 16px;
		height: 16px;
	}
}

.site-branding .site-title a,
.site-branding .site-title a:hover {
	color: var(--eyq-white);
	font-family: var(--eyq-font-display);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 400;
}

.site-branding .site-description {
	color: var(--eyq-white);
	opacity: 0.65;
}

.site-branding .custom-logo-link {
	/* block, not inline-block: an inline-block sits on its container's text
	   baseline, which reserves a few px of descender space below it even at
	   margin/padding: 0 — the last bit of .site-branding being taller than
	   the logo image itself. */
	display: block;
	margin-bottom: 0;
}

/* Sized up from a much smaller logo (56px desktop / 48px mobile) to match
   design_header_desktop.png / design_header_mobile.png — both put the logo
   at roughly 3/4 of the header's own height, a lot more prominent than it
   was. */
.site-header .custom-logo-link img.custom-logo,
.site-branding .custom-logo-link img.custom-logo {
	width: auto !important;
	height: auto !important;
	max-width: 84px !important;
	max-height: 84px !important;
	display: block;
}

@media (max-width: 768px) {
	.site-header .custom-logo-link img.custom-logo,
	.site-branding .custom-logo-link img.custom-logo {
		max-width: 56px !important;
		max-height: 56px !important;
	}
}

#masthead .site-search input[type="search"] {
	border: 2px solid var(--eyq-white);
	background-color: var(--eyq-black);
	color: var(--eyq-white);
}

#masthead .site-search input[type="search"]::placeholder {
	color: rgba(255,255,255,0.6);
}

/* Primary nav */
#primary-navigation {
	background-color: var(--eyq-black);
}

.main-navigation ul li a {
	color: var(--eyq-white);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--eyq-red);
}

.main-navigation ul ul {
	background-color: var(--eyq-black);
	border-color: rgba(255,255,255,0.15);
}

/* Cart in header */
.site-header-cart .cart-contents,
.site-header-cart .amount {
	color: var(--eyq-white);
}

/* Storefront's own padding: 1.618em 0 on this link (in woocommerce.css,
   which loads after this stylesheet — needs !important to win at equal
   specificity, same reason as elsewhere in this file) made it 78px tall —
   sized for the old full-height header, where the cart link filled the
   whole bar — versus 39px for the nav links next to it on the same (now
   compact, two-row) line, so it alone was what kept that row, and the
   header height that gets measured off it, tall. */
.site-header-cart .cart-contents {
	padding: 0 !important;
}

.site-header-cart .cart-contents:hover {
	color: var(--eyq-red);
}

/* ---------- Hero (homepage only) ---------- */
.eyq-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 46vh;
	background-color: var(--eyq-black);
	overflow: hidden;
}

.eyq-hero__inner {
	max-width: 1180px;
	margin: 0 auto;
	height: 100%;
	min-height: 46vh;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2vw;
	padding: 0 5vw;
}

.eyq-hero__content {
	position: relative;
	z-index: 1;
	padding: 2em 0;
	max-width: 640px;
	flex: 1 1 auto;
	min-width: 0;
}

.eyq-hero__portrait {
	flex: 0 0 auto;
	align-self: flex-end;
	height: 100%;
	box-sizing: border-box;
	padding-top: 0.5rem;
	display: flex;
	align-items: flex-end;
}

.eyq-hero__portrait img {
	display: block;
	max-height: calc(min(46vh, 520px) - 0.5rem);
	width: auto;
	max-width: 100%;
}

.eyq-hero__title {
	color: var(--eyq-white);
	font-family: var(--eyq-font-display);
	font-size: clamp(1.9em, 5vw, 3.6em);
	line-height: 1.05;
	margin: 0 0 0.3em;
	text-wrap: balance;
}

.eyq-hero__subtitle {
	color: var(--eyq-white);
	font-size: 1.15em;
	margin: 0 0 1em;
	opacity: 0.9;
}

.eyq-hero__cta {
	display: inline-block;
	color: var(--eyq-red);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.95em;
	border-bottom: 2px solid var(--eyq-red);
	padding-bottom: 0.15em;
}

.eyq-hero__cta:hover {
	color: var(--eyq-white);
	border-color: var(--eyq-white);
}

/* WooCommerce still renders its "Shop" title header wrapper even with the
   title itself hidden (see evayque_hide_shop_title_on_home) — collapse it
   on the homepage now that evayque_homepage_format_banner() fills that
   space instead. */
.home .woocommerce-products-header {
	display: none;
}

/* Mechanics note (format + donation choice) — same message, same card
   styling everywhere it appears (Home banner, Cart, Checkout), so it reads
   as one recurring, deliberate callout rather than three different things. */
.eyq-mechanics-note {
	max-width: 760px;
	margin: 0 auto 1.5em;
	padding: 1em 1.25em;
	background: var(--eyq-gray);
	border-bottom: 3px solid var(--eyq-red);
	font-family: var(--eyq-font-heading);
	font-size: 1.05em;
	line-height: 1.5;
	color: var(--eyq-black);
}

.eyq-mechanics-note strong {
	color: var(--eyq-red);
}

.eyq-mechanics-note .eyq-icon {
	display: inline-block;
	height: 1.3em;
	width: auto;
	vertical-align: text-bottom;
	margin: 0 0.15em;
}

@media (max-width: 600px) {
	.eyq-mechanics-note {
		font-size: 0.95em;
		padding: 1em 1em;
	}
}

/* ---------- Selects: modern pill-style dropdown, site-wide ---------- */
select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-block;
	box-sizing: border-box;
	width: auto;
	min-width: 220px;
	max-width: 100%;
	background-color: var(--eyq-white);
	border: 2px solid var(--eyq-black);
	border-radius: 12px;
	padding: 0.85em 2.6em 0.85em 1.2em;
	font-family: var(--eyq-font-heading);
	font-size: 1em;
	line-height: 1.2;
	color: var(--eyq-black);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1em center;
	background-size: 13px 8px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select:hover {
	border-color: var(--eyq-red);
}

select:focus {
	outline: none;
	border-color: var(--eyq-red);
	box-shadow: 0 0 0 4px rgba(214, 22, 42, 0.14);
}

select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

select::-ms-expand {
	display: none;
}

/* Result count + sort selector: floats top-align by default, which looked
   fine with the browser's tiny native select but not with our taller
   pill-style one — center them on the same line instead. */
.storefront-sorting {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em 1.25em;
}

.woocommerce-ordering,
.woocommerce-result-count {
	float: none;
	margin: 0;
	padding: 0;
}

/* Separate the header from the product title on single-product pages — the
   homepage/shop doesn't need this, the hero already does that job there. */
.single-product #primary {
	margin-top: 2.5em;
}

/* ---------- Buttons: black by default, red on hover ---------- */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page #respond input#submit,
.storefront-product-pagination .page-numbers.current,
.woocommerce a.added_to_cart {
	background-color: var(--eyq-black);
	border-color: var(--eyq-black);
	color: var(--eyq-white);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	border-radius: 0;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page #respond input#submit:hover {
	background-color: var(--eyq-red);
	border-color: var(--eyq-red);
	color: var(--eyq-white);
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button.alt,
.checkout-button {
	background-color: var(--eyq-red);
	border-color: var(--eyq-red);
}

.button.alt:hover,
.woocommerce a.button.alt:hover,
.checkout-button:hover {
	background-color: var(--eyq-red-dark);
	border-color: var(--eyq-red-dark);
}

/* ---------- Cart & Checkout (WooCommerce Blocks) — bring the block-based
   Cart/Checkout pages in line with the rest of the site; by default they use
   WooCommerce's own rounded, blue-accented block styling instead of the
   theme's. ---------- */
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button,
.wp-block-woocommerce-cart .wp-element-button,
.wp-block-woocommerce-checkout .wp-element-button {
	background-color: var(--eyq-black);
	border-color: var(--eyq-black);
	color: var(--eyq-white);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	border-radius: 0;
}

.wp-block-woocommerce-cart .wc-block-components-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-button:hover,
.wp-block-woocommerce-cart .wp-element-button:hover,
.wp-block-woocommerce-checkout .wp-element-button:hover {
	background-color: var(--eyq-red);
	border-color: var(--eyq-red);
	color: var(--eyq-white);
}

.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__button {
	border-radius: 0;
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price .wc-block-components-formatted-money-amount {
	color: var(--eyq-black);
}

.wc-block-cart-item__product-name,
.wc-block-components-product-name {
	color: var(--eyq-black);
	font-weight: 600;
}

/* ---------- Product grid: flat cards with room to breathe + hover motion ---------- */
.woocommerce ul.products {
	margin-left: 0;
}

.woocommerce ul.products li.product {
	padding: 0;
	margin: 0 0 2.8em 0;
	background: var(--eyq-white);
	border: 1px solid var(--eyq-red);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 28px rgba(0, 0, 0, 0.16);
}

.woocommerce ul.products li.product > a:first-child {
	display: block;
	overflow: hidden;
}

.woocommerce ul.products li.product a img {
	border-radius: 0;
	margin-bottom: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.06);
}

.woocommerce ul.products li.product .eyq-product-meta,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
	font-family: var(--eyq-font-heading);
	color: var(--eyq-black);
	font-weight: 600;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background-color: var(--eyq-gray);
	margin: 0;
	padding: 1em 1.1em 0.3em;
}

.woocommerce ul.products li.product .price {
	color: var(--eyq-black);
	background-color: var(--eyq-gray);
	display: block;
	margin: 0;
	padding: 0 1.1em 1em;
	font-size: 0.9em;
}

.woocommerce ul.products li.product .button {
	margin: 0.6em 1.1em 1.1em;
	width: calc(100% - 2.2em);
}

.woocommerce ul.products li.product .price ins .amount,
.woocommerce span.price ins .amount,
.woocommerce div.product p.price ins .amount,
.woocommerce div.product span.price ins .amount {
	color: var(--eyq-red);
	font-weight: 700;
}

.woocommerce span.onsale {
	background-color: var(--eyq-red);
	color: var(--eyq-white);
	border-radius: 0;
}

/* Product page */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--eyq-black);
	font-size: 1.4em;
}

/* Bolsa <-> Camiseta counterpart link (single product page) */
.eyq-counterpart-link {
	display: inline-block;
	background-color: var(--eyq-gray);
	border-left: 3px solid var(--eyq-red);
	padding: 0.7em 1em;
	margin: 0 0 1.2em;
	font-size: 0.92em;
}

.eyq-counterpart-link a {
	color: var(--eyq-red);
	font-weight: 700;
	text-decoration: none;
	margin-left: 0.3em;
}

.eyq-counterpart-link a:hover {
	text-decoration: underline;
}

/* Size guide table (product tab, camiseta products only) */
.eyq-size-guide {
	border-collapse: collapse;
	width: auto;
	max-width: 480px;
	margin: 1em 0;
}

.eyq-size-guide th,
.eyq-size-guide td {
	border: 1px solid #e2e2e2;
	padding: 0.5em 1.2em;
	text-align: center;
}

.eyq-size-guide thead th {
	background-color: var(--eyq-black);
	color: var(--eyq-white);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85em;
}

.eyq-size-guide tbody tr:nth-child(even) {
	background-color: var(--eyq-gray);
}

.eyq-size-guide tbody td:first-child {
	font-weight: 700;
	color: var(--eyq-red);
}

.eyq-size-guide__note {
	font-size: 0.85em;
	opacity: 0.75;
}

/* Messages / notices */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--eyq-red);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--eyq-red);
}

/* ---------- Footer: black, matching the header/hero ---------- */
#colophon.site-footer {
	background-color: var(--eyq-black);
	color: var(--eyq-white);
	border-top: 3px solid var(--eyq-red);
}

#colophon.site-footer a {
	color: var(--eyq-white);
}

#colophon.site-footer a:hover {
	color: var(--eyq-red);
}

#colophon .widget-title {
	color: var(--eyq-white);
	font-family: var(--eyq-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.eyq-footer-legal {
	font-size: 0.85em;
	opacity: 0.8;
	margin-bottom: 0.4em;
}

/* ---------- Handheld (mobile) fixed footer bar ---------- */
/* Storefront's own bar (Mi cuenta / Buscar / Carrito, shown on phones only)
   ships with a white background on its links, and lives inside the site
   footer markup — so the #colophon.site-footer a{color:white} rule above
   made every icon/label white text on a white background, i.e. completely
   invisible (not just an empty cart). Give it its own black/red background
   here so that existing white footer-link color actually shows up. */
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a {
	background-color: var(--eyq-black);
}

.storefront-handheld-footer-bar {
	border-top: 2px solid var(--eyq-red);
}

/* Swap the fixed columns-N percentage widths for flex so the bar reflows
   cleanly when the cart entry below hides itself. */
.storefront-handheld-footer-bar ul {
	display: flex;
}

.storefront-handheld-footer-bar ul li {
	float: none;
	width: auto !important;
	flex: 1 1 0;
}

/* Storefront's default link height (4.235801032em, ~68px) is oversized for
   this bar's actual content (a single icon or short label) — shrink it, and
   scale the icon glyph down to match (it's sized/centered in em's relative
   to its own font-size, not to the link's height, so the two have to move
   together or the glyph ends up mis-centered / clipped by the link's
   overflow:hidden). rem, not em: the cart link below sets its own
   font-size: 0.8em, and CSS resolves an element's own `height: …em` against
   its own font-size — so on that one link 3.25em was silently ~30% shorter
   than on the other two (41.6px vs 52px), the "cart button doesn't fill the
   bar" bug. rem is always relative to the root font-size, so it stays the
   same 52px regardless of any link's own font-size. */
.storefront-handheld-footer-bar ul li > a {
	height: 3.25rem !important;
}

.storefront-handheld-footer-bar ul li > a::before {
	font-size: 1.25em !important;
}

/* First slot: customer self-registration is disabled on this store, so a
   "Mi cuenta" link there is only useful to an admin, not a shopper —
   evayque_handheld_footer_bar_home_link() in functions.php points the link
   itself at the homepage; this just swaps its icon glyph from the default
   person icon to Font Awesome's solid house (\f015), keeping the
   'my-account' slot/class so this and the height rule above still apply. */
.storefront-handheld-footer-bar ul li.my-account > a::before {
	content: "\f015" !important;
}

/* Cart entry: client asked for it to disappear while the cart is empty and
   to read "Carrito: N" instead of Storefront's icon + tiny numeric badge.
   Defaults to visible/shown here — evayque_handheld_cart_bar_script() in
   functions.php adds .eyq-cart-empty once it confirms the count is 0, since
   WooCommerce updates that count via AJAX fragments, not a page reload. */
.storefront-handheld-footer-bar li.cart.eyq-cart-empty {
	display: none;
}

.storefront-handheld-footer-bar ul li.cart > a {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--eyq-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.8em;
}

/* !important here and below: storefront/assets/css/woocommerce/woocommerce.css
   defines these exact selectors too, and (for reasons upstream of this theme)
   ends up output after this stylesheet, so equal-specificity rules alone
   don't win against it. */
.storefront-handheld-footer-bar ul li.cart > a::before {
	content: none !important;
}

.storefront-handheld-footer-bar ul li.cart .count {
	position: static !important;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 1em !important;
	line-height: inherit !important;
	background-color: transparent !important;
}

.storefront-handheld-footer-bar ul li.cart .count::before {
	content: "Carrito: ";
}

/* Page/section titles */
.page-title,
.woocommerce-products-header__title {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 3px solid var(--eyq-red);
	display: inline-block;
	padding-bottom: 0.2em;
}

.eyq-hide-entry-title .entry-header .entry-title {
	display: none;
}

/* "Sobre mí" prints its own H1 as the first content block (Storefront's
   automatic one is hidden above) — give it room to breathe under the
   header instead of butting straight against it. Client noticed Carrito
   and Mi cuenta (and, by the same logic, every other plain WordPress page —
   Aviso Legal, Política de privacidad, Checkout) butted their own title
   straight against the header with no such gap, since this rule only ever
   targeted Sobre mí's specific body class. Scoped to `.page` (the body
   class WordPress adds on every one of those, but not on the shop/homepage
   — that already has its own hero right under the header and doesn't need
   this) so all of them now get the same spacing Sobre mí already had. */
.page #primary {
	padding-top: 2em;
}

/* "Sobre mí" — vertical portrait next to the manifesto text */
.eyq-about-photo img {
	border: 1px solid var(--eyq-red);
	border-radius: 10px;
	width: 100%;
	height: auto;
}

/* Star ratings and misc accents */
.star-rating span:before,
.woocommerce-tabs ul.tabs li.active {
	color: var(--eyq-red);
}

@media (max-width: 768px) {
	.eyq-hero {
		min-height: 0;
	}

	.eyq-hero__inner {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 0 6vw;
	}

	.eyq-hero__content {
		padding: 2.5em 0 1.5em;
		max-width: none;
		text-align: center;
	}

	.eyq-hero__portrait {
		align-self: center;
		height: auto;
		padding: 0 0 1.5em;
	}

	.eyq-hero__portrait img {
		max-height: 46vh;
	}
}