/* ==========================================================================
   EXOTIC SNACKS — main stylesheet
   Neon streetwear: electric purple / neon lime / hot pink on black
   ========================================================================== */

:root {
	--es-purple: var(--wp--preset--color--purple, #7C00FF);
	--es-lime:   var(--wp--preset--color--lime, #C6FF00);
	--es-pink:   var(--wp--preset--color--pink, #FF2D95);
	--es-base:   var(--wp--preset--color--base, #0B0B0F);
	--es-surface:var(--wp--preset--color--surface, #15151F);
	--es-surface-2: var(--wp--preset--color--surface-2, #1F1F2E);
	--es-muted:  var(--wp--preset--color--muted, #A6A6C2);
	--es-ring:   0 0 0 2px rgba(198,255,0,.0);
}

html { scroll-behavior: smooth; }
body { background: var(--es-base); color: #fff; -webkit-font-smoothing: antialiased; }

/* Subtle animated grain/glow backdrop on the whole page */
body::before {
	content: "";
	position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(60vw 60vw at 85% -10%, rgba(124,0,255,.18), transparent 60%),
		radial-gradient(50vw 50vw at -10% 20%, rgba(255,45,149,.14), transparent 60%);
}

a { text-decoration: none; }
::selection { background: var(--es-lime); color: #000; }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.es-header {
	position: sticky; top: 0; z-index: 100;
	border-bottom: 1px solid rgba(255,255,255,.08);
	backdrop-filter: saturate(140%) blur(8px);
	background: rgba(11,11,15,.82) !important;
}
.es-header__inner { width: 100%; max-width: 1320px; margin-inline: auto; gap: 1.5rem; }
.es-wordmark a {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase; letter-spacing: .02em; color: #fff;
	font-size: 1.5rem; line-height: 1;
}
.es-wordmark a:hover { color: var(--es-lime); }

.es-nav a { color: #fff; font-weight: 600; letter-spacing: .02em; position: relative; }
.es-nav a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
	background: var(--es-lime); transition: right .25s ease;
}
.es-nav a:hover { color: var(--es-lime); }
.es-nav a:hover::after { right: 0; }

.es-header__actions .wp-block-loginout a { color: var(--es-muted); font-weight: 600; font-size: .9rem; }
.es-header__actions .wp-block-loginout a:hover { color: #fff; }
.wc-block-mini-cart__button { color: #fff !important; }
.wc-block-mini-cart__badge { background: var(--es-pink) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.wp-element-button, .wp-block-button__link {
	border-radius: 999px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .04em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.es-btn--lime .wp-block-button__link { background: var(--es-lime); color: #000; }
.es-btn--lime .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(198,255,0,.4); }
.es-btn--pink .wp-block-button__link { background: var(--es-pink); color: #fff; }
.es-btn--pink .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,45,149,.45); }
.es-btn--ghost .wp-block-button__link {
	background: transparent !important; color: #fff; border: 2px solid rgba(255,255,255,.25);
}
.es-btn--ghost .wp-block-button__link:hover { border-color: var(--es-lime); color: var(--es-lime); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.es-hero { position: relative; overflow: hidden; text-align: center; }
.es-eyebrow {
	display: inline-block; margin: 0 auto .4rem; padding: .35rem 1rem; border-radius: 999px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
	font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--es-lime);
}
.es-hero__title {
	max-width: 15ch; margin: .2em auto .3em;
	background: linear-gradient(100deg, #9A3BFF 0%, var(--es-pink) 48%, var(--es-lime) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 0 60px rgba(124,0,255,.25);
}
.es-hero__sub { max-width: 54ch; margin: 0 auto 1.6rem; }
.es-hero__btns { gap: 1rem; }

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.es-section { position: relative; }
.es-section__head { width: 100%; max-width: 1320px; margin: 0 auto 1.8rem; gap: 1rem; }
.es-section__title { margin: 0; font-size: clamp(1.8rem, 1.2rem + 3vw, 3rem); }
.es-section__link a { color: var(--es-lime); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; font-family: var(--wp--preset--font-family--body); }
.es-section__link a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   REGION TILES
   -------------------------------------------------------------------------- */
.es-tiles { display: grid; gap: 1.1rem; width: 100%; max-width: 1320px; margin-inline: auto; }
.es-tiles--region { grid-template-columns: repeat(4, 1fr); }
.es-tile {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 230px; padding: 1.3rem; border-radius: 20px; overflow: hidden; isolation: isolate;
	color: #fff; border: 1px solid rgba(255,255,255,.1);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.es-tile::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(11,11,15,.1) 0%, rgba(11,11,15,.82) 100%);
}
.es-tile::before { content: ""; position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform .4s ease; }
.es-tile:hover { transform: translateY(-5px); border-color: var(--es-lime); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.es-tile:hover::before { transform: scale(1.06); }
.es-tile--asia::before          { background-image: linear-gradient(135deg, #7C00FF, #FF2D95); }
.es-tile--europe::before        { background-image: linear-gradient(135deg, #FF2D95, #FF7A00); }
.es-tile--north-america::before { background-image: linear-gradient(135deg, #00C2FF, #7C00FF); }
.es-tile--south-america::before { background-image: linear-gradient(135deg, #C6FF00, #00C27A); }
.es-tile__kicker { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; font-weight: 600; }
.es-tile__name { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin: .15rem 0 .5rem; }
.es-tile__go { font-weight: 700; font-size: .85rem; color: var(--es-lime); text-transform: uppercase; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   CATEGORY TILES
   -------------------------------------------------------------------------- */
.es-tiles--category { grid-template-columns: repeat(5, 1fr); }
.es-cat {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
	padding: 1.6rem 1rem; border-radius: 18px; text-align: center;
	background: var(--es-surface-2); border: 1px solid rgba(255,255,255,.08); color: #fff;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.es-cat:hover { transform: translateY(-4px); border-color: var(--es-pink); background: #262636; box-shadow: 0 12px 30px rgba(255,45,149,.18); }
.es-cat__emoji { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.es-cat__name { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   WOOCOMMERCE PRODUCTS
   -------------------------------------------------------------------------- */
.woocommerce ul.products, .woocommerce-page ul.products { display: grid; gap: 1.2rem; margin: 0; padding: 0; }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	background: var(--es-surface-2); border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
	padding: 1rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; list-style: none;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); border-color: var(--es-lime); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.woocommerce ul.products li.product a img { border-radius: 12px; margin-bottom: .8rem; background: #fff; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--body) !important; font-weight: 700 !important;
	font-size: 1rem !important; color: #fff; padding: 0 !important; text-transform: none;
}
.woocommerce ul.products li.product .price { color: var(--es-lime) !important; font-weight: 700; font-size: 1.05rem; }
.woocommerce ul.products li.product .price del { color: var(--es-muted) !important; opacity: .7; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce span.onsale {
	background: var(--es-pink) !important; color: #fff !important; border-radius: 999px;
	min-height: auto; min-width: auto; padding: .25rem .7rem; font-weight: 700;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce .button, .woocommerce #respond input#submit {
	background: var(--es-lime) !important; color: #000 !important; border-radius: 999px !important;
	font-weight: 700 !important; text-transform: uppercase; letter-spacing: .03em; transition: all .18s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover {
	transform: translateY(-2px); box-shadow: 0 8px 24px rgba(198,255,0,.35); background: #d6ff3a !important;
}
.woocommerce a.added_to_cart { color: var(--es-lime) !important; font-weight: 700; }

/* Shop / archive / single product page chrome on dark */
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering select { color: var(--es-muted); }
.woocommerce .product_title, .woocommerce div.product .product_title { color: #fff; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--es-lime); }
.woocommerce .woocommerce-tabs ul.tabs li { background: var(--es-surface-2); border-color: rgba(255,255,255,.08); }
.woocommerce #reviews #comments, .woocommerce-tabs .panel { color: #fff; }

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */
.es-about { position: relative; overflow: hidden; }
.es-about__title { margin: .2em auto .4em; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.es-footer { border-top: 1px solid rgba(255,255,255,.08); }
.es-footer__cols { width: 100%; max-width: 1320px; margin-inline: auto; }
.es-footer h4 { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .6rem; }
.es-footer__list { list-style: none; margin: 0; padding: 0; }
.es-footer__list li { margin-bottom: .45rem; }
.es-footer__list a { color: var(--es-muted); }
.es-footer__list a:hover { color: var(--es-lime); }
.es-footer__bar { width: 100%; max-width: 1320px; margin-inline: auto; border-top: 1px solid rgba(255,255,255,.08); }
.es-footer__tag { max-width: 40ch; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.es-tiles--category { grid-template-columns: repeat(3, 1fr); }
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 782px) {
	.es-tiles--region { grid-template-columns: repeat(2, 1fr); }
	.es-tiles--category { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products.columns-4, .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); }
	.es-header__inner { gap: .6rem; }
	.es-nav { order: 3; width: 100%; }
}
@media (max-width: 480px) {
	.es-tiles--region { grid-template-columns: 1fr; }
	.woocommerce ul.products.columns-4, .woocommerce ul.products.columns-3 { grid-template-columns: 1fr 1fr; }
}