/* ==========================================================================
   EXOTIC SNACKS, main stylesheet
   Dark 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, #AEAEC6);
	--es-line:   rgba(255,255,255,.1);
}

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

/* Ambient neon glow backdrop */
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,.20), 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 var(--es-line);
	backdrop-filter: saturate(140%) blur(8px);
	background: rgba(11,11,15,.82) !important;
	padding-top: .5rem !important; padding-bottom: .5rem !important;
}
.es-header__inner { width: 100%; max-width: 1320px; margin-inline: auto; gap: 1.5rem; }
.es-brand { gap: .6rem; }
.es-header .wp-block-site-logo img { width: auto !important; max-height: 88px; display: block; }
@media (max-width: 782px) { .es-header .wp-block-site-logo img { max-height: 62px; } }

.es-wordmark a {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase; letter-spacing: .02em; color: #fff; font-size: 1.6rem; line-height: 1;
}
.es-wordmark a:hover { color: var(--es-lime); }

.es-nav a { color: #fff; font-weight: 600; letter-spacing: .01em; 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; }
.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; }

/* --------------------------------------------------------------------------
   ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */
.es-announce { padding-top: .55rem; padding-bottom: .55rem; }
.es-announce__text { margin: 0; font-weight: 600; letter-spacing: .02em; }
.es-announce__text strong { font-weight: 800; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.wp-element-button, .wp-block-button__link {
	border-radius: 999px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .04em; font-size: 1.02rem; 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 10px 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 10px 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,.28); }
.es-btn--ghost .wp-block-button__link:hover { border-color: var(--es-lime); color: var(--es-lime); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.es-hero { position: relative; text-align: center; }
.es-hero__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.es-hero__img { margin: 0 auto 1.8rem; }
.es-hero__img img { width: 100%; height: auto; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 70px rgba(124,0,255,.3); display: block; }
.es-hero__btns { gap: 1rem; }
.es-eyebrow { display: inline-block; margin: 0 auto .4rem; padding: .4rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--es-lime); }

/* --------------------------------------------------------------------------
   DELIVERY / SHIPPING STRIP
   -------------------------------------------------------------------------- */
.es-ship { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; width: 100%; max-width: 1000px; margin-inline: auto; }
.es-ship__item { display: flex; align-items: center; gap: 1rem; justify-content: center; }
.es-ship__icon { font-size: 2.1rem; line-height: 1; flex: none; }
.es-ship__txt { display: flex; flex-direction: column; color: var(--es-muted); font-size: 1rem; line-height: 1.35; }
.es-ship__txt strong { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.25rem; color: #fff; margin-bottom: .2rem; }
@media (max-width: 600px) { .es-ship { grid-template-columns: 1fr; gap: 1.1rem; max-width: 440px; } .es-ship__item { justify-content: flex-start; } }

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

/* --------------------------------------------------------------------------
   REGION TILES (continent photos)
   -------------------------------------------------------------------------- */
.es-tiles { display: grid; gap: 1.2rem; 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: 270px; padding: 1.4rem; 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(5,5,8,.12) 0%, rgba(5,5,8,.55) 55%, rgba(5,5,8,.9) 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 16px 44px rgba(0,0,0,.6); }
.es-tile:hover::before { transform: scale(1.07); }
.es-tile--asia::before          { background-image: url(../regions/asia.png); }
.es-tile--europe::before        { background-image: url(../regions/europe.png); }
.es-tile--north-america::before { background-image: url(../regions/north-america.png); }
.es-tile--south-america::before { background-image: url(../regions/south-america.png); }
.es-tile__kicker { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; opacity: .9; font-weight: 700; }
.es-tile__name { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; font-size: 2rem; line-height: 1; margin: .2rem 0 .55rem; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.es-tile__go { font-weight: 800; font-size: .95rem; 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: .7rem;
	padding: 1.8rem 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,.2); }
.es-cat__emoji { font-size: 2.7rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.es-cat__name { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.2rem; }

/* --------------------------------------------------------------------------
   WOOCOMMERCE PRODUCTS
   -------------------------------------------------------------------------- */
.woocommerce ul.products, .woocommerce-page ul.products { display: grid; gap: 1.4rem; margin: 0; padding: 0; }
/* Kill WooCommerce's clearfix pseudo-elements, which otherwise become empty grid items */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none; display: none; }
.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 16px 36px rgba(0,0,0,.55); }
.woocommerce ul.products li.product a img { border-radius: 12px; margin-bottom: .8rem; background: #fff; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--body) !important; font-weight: 700 !important;
	font-size: 1.12rem !important; color: #fff !important; padding: 0 0 .25rem !important; text-transform: none;
}
.woocommerce ul.products li.product .price { color: var(--es-lime) !important; font-weight: 800; font-size: 1.2rem; }
.woocommerce ul.products li.product .price del { color: var(--es-muted) !important; opacity: .7; font-weight: 500; }
.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; font-size: 1rem; transition: all .18s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover { transform: translateY(-2px); box-shadow: 0 10px 26px 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 chrome on dark */
.woocommerce .woocommerce-ordering { display: none !important; }
.woocommerce .woocommerce-result-count { 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); font-weight: 800; }
.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; color: #fff; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.es-footer { border-top: 1px solid var(--es-line); }
.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; font-size: 1.2rem; }
.es-footer__list { list-style: none; margin: 0; padding: 0; }
.es-footer__list li { margin-bottom: .5rem; }
.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 var(--es-line); }
.es-footer__tag { max-width: 44ch; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   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; }
}