/* Hitzquiat Drop: graffiti re-skin + drop components for hitscart.com (on top of HitsCart Core). */
:root {
	--hzq-yellow: #ffd400; --hzq-pink: #ff3d9a; --hzq-lime: #9dff3c; --hzq-blue: #2f7bff; --hzq-red: #ff2a2a; --hzq-paper: #f4efe3; --hzq-ink: #0a0710;
	--hzq-marker: 'Permanent Marker', 'Comic Sans MS', cursive; --hzq-spray: 'Rubik Spray Paint', 'Unbounded', sans-serif;
	--hzq-scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-width='3' opacity='.55'%3E%3Cpath stroke='%23ffd400' d='M30 90l8-40 18 24 16-34 16 34 18-24 8 40z'/%3E%3Cpath stroke='%23ff3d9a' d='M300 60l30 30M330 60l-30 30'/%3E%3Cpath stroke='%239dff3c' d='M70 300c30-40 60 40 90 0s60 40 90 0'/%3E%3Cpath stroke='%232f7bff' d='M320 260l40 40M360 260l-40 40'/%3E%3Cpath stroke='%23ffd400' d='M220 380l6-30 14 18 12-26 12 26 14-18 6 30z'/%3E%3Ccircle stroke='%23ff3d9a' cx='180' cy='160' r='14'/%3E%3Cpath stroke='%23fff' d='M380 160h24M392 148v24'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Re-skin (body.hzq-skin) ---------- */
body.hzq-skin {
	--fc-bg: #0a0710; --fc-bg-2: #120c1c; --fc-panel: #171024; --fc-panel-2: #22172f;
	--fc-line: rgba(255, 255, 255, .1); --fc-line-2: rgba(255, 212, 0, .45);
	--fc-text: #d9d1e4; --fc-head: #fffaf0; --fc-muted: #a197ae;
	--fc-accent: #ffd400; --fc-accent-2: #ff3d9a; --fc-red: #ff2a2a; --fc-violet: #a66bff; --fc-cyan: #2f7bff; --fc-on-accent: #0a0710;
	--fc-grad: linear-gradient(110deg, #ffd400 0%, #ff3d9a 55%, #9dff3c 100%);
	--fc-sativa: #ffd400; --fc-indica: #a66bff; --fc-hybrid: #9dff3c;
	background-color: #0a0710 !important;
	background-image: var(--hzq-scribble) !important; background-size: 420px 420px !important; background-attachment: fixed !important;
}
body.hzq-skin .site, body.hzq-skin #page { background: transparent !important; }
body.hzq-skin .fc-section h2, body.hzq-skin .fc-hero h1 { text-shadow: 4px 4px 0 rgba(255, 61, 154, .55), -2px -2px 0 rgba(157, 255, 60, .25); }
body.hzq-skin .fc-eyebrow, body.hzq-skin .fc-part { font-family: var(--hzq-marker) !important; letter-spacing: .03em !important; text-transform: none !important; color: var(--hzq-yellow) !important; }
body.hzq-skin .fc-btn:not(.fc-btn-ghost), body.hzq-skin .woocommerce a.button, body.hzq-skin .woocommerce button.button, body.hzq-skin .single_add_to_cart_button {
	background: var(--fc-grad) !important; color: #0a0710 !important; border: 2px solid #0a0710 !important; box-shadow: 4px 4px 0 #fff, 0 0 24px rgba(255, 61, 154, .35) !important; transform: rotate(-1deg); transition: transform .2s, box-shadow .2s !important; }
body.hzq-skin .fc-btn:not(.fc-btn-ghost):hover, body.hzq-skin .woocommerce a.button:hover, body.hzq-skin .single_add_to_cart_button:hover { transform: rotate(0) translateY(-2px); box-shadow: 6px 6px 0 var(--hzq-lime), 0 0 30px rgba(157, 255, 60, .4) !important; }
body.hzq-skin .fc-btn-ghost { border-color: var(--hzq-yellow) !important; color: #fff !important; }
body.hzq-skin .fc-hero { position: relative; }
body.hzq-skin .fc-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 80% 30%, rgba(255, 61, 154, .22), transparent 70%), radial-gradient(40% 40% at 15% 80%, rgba(157, 255, 60, .14), transparent 70%); z-index: 0; }
body.hzq-skin .fc-hero-in { position: relative; z-index: 1; }
body.hzq-skin .fc-ticker { background: linear-gradient(90deg, #ffd400, #ff3d9a, #9dff3c, #2f7bff) !important; color: #0a0710 !important; }
body.hzq-skin .fc-ticker * { color: #0a0710 !important; }
body.hzq-skin .fc-card, body.hzq-skin ul.products li.product, body.hzq-skin .fc-tile, body.hzq-skin .fc-col, body.hzq-skin .fc-post { transition: transform .25s, box-shadow .25s; }
body.hzq-skin .fc-card:hover, body.hzq-skin ul.products li.product:hover, body.hzq-skin .fc-col:hover { transform: rotate(-1deg) translateY(-4px); box-shadow: 0 0 0 2px var(--hzq-yellow), 8px 8px 0 var(--hzq-pink); }
body.hzq-skin .fc-header { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #ffd400, #ff3d9a, #9dff3c, #2f7bff) 1; }
body.hzq-skin .hzq-menu-drop > a, body.hzq-skin .fc-menu a[href*="hitzquiat-edition"] { color: #0a0710 !important; background: var(--hzq-yellow); border-radius: 999px; font-family: var(--hzq-marker) !important; transform: rotate(-2deg); display: inline-block; padding-left: 12px !important; padding-right: 12px !important; }
body.hzq-skin ::selection { background: var(--hzq-pink); color: #fff; }

/* ---------- Shared bits ---------- */
.hzq-crown { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hzq-kicker { display: inline-flex; align-items: center; gap: 8px; font: 400 18px/1.2 var(--hzq-marker) !important; color: var(--hzq-yellow) !important; margin: 0 0 10px !important; text-transform: none !important; letter-spacing: .02em; }
.hzq-kicker .hzq-crown { width: 30px; height: 21px; color: var(--hzq-yellow); filter: drop-shadow(0 0 6px var(--hzq-yellow)); }
.hzq-spray { font-family: var(--hzq-spray) !important; font-weight: 400 !important; letter-spacing: .01em; background: linear-gradient(100deg, #ffd400, #ff3d9a 50%, #9dff3c); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px rgba(255, 61, 154, .45)); }
.hzq-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hzq-small { font-size: 14px; opacity: .85; }
.hzq-wallpaper { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hzq-wallpaper .hzq-crown { position: absolute; width: 120px; height: 84px; opacity: .8; }
.hzq-c1 { left: 3%; top: 8%; color: var(--hzq-yellow); transform: rotate(-10deg); filter: drop-shadow(0 0 10px #ffd400); animation: hzq-flicker 4s infinite; }
.hzq-c2 { right: 6%; bottom: 10%; color: var(--hzq-pink); transform: rotate(12deg); filter: drop-shadow(0 0 10px #ff3d9a); animation: hzq-flicker 5s 1s infinite; }
.hzq-c3 { left: 46%; top: 2%; color: var(--hzq-lime); width: 80px !important; height: 56px !important; filter: drop-shadow(0 0 10px #9dff3c); animation: hzq-flicker 6s 2s infinite; }
.hzq-scrawl { position: absolute; font: 400 clamp(60px, 12vw, 180px)/1 var(--hzq-spray); color: rgba(255, 255, 255, .05); white-space: nowrap; }
.hzq-s1 { left: -2%; bottom: -4%; transform: rotate(-6deg); }
.hzq-s2 { right: 20%; top: 6%; font-size: 90px; color: rgba(255, 212, 0, .12); }
.hzq-s3 { right: 2%; top: 40%; font-size: 70px; transform: rotate(8deg); color: rgba(157, 255, 60, .1); }
.hzq-x { position: absolute; font-size: 44px; color: var(--hzq-pink); opacity: .6; }
.hzq-x1 { left: 38%; bottom: 16%; transform: rotate(14deg); }
.hzq-x2 { right: 34%; top: 14%; color: var(--hzq-blue); }
@keyframes hzq-flicker { 0%, 100% { opacity: .85; } 46% { opacity: .85; } 48% { opacity: .2; } 50% { opacity: .9; } 52% { opacity: .3; } 54% { opacity: .85; } }

/* Ribbon */
.hzq-ribbon { display: block; overflow: hidden; white-space: nowrap; background: #0a0710; border-bottom: 2px solid var(--hzq-yellow); text-decoration: none !important; position: relative; z-index: 60; }
.hzq-ribbon-track { display: inline-flex; gap: 20px; align-items: center; padding: 8px 0; animation: hzq-marquee 34s linear infinite; }
.hzq-ribbon span span { font: 400 15px/1 var(--hzq-marker); color: #fff; }
.hzq-ribbon span span:nth-child(4n+1) { color: var(--hzq-yellow); }
.hzq-ribbon span span:nth-child(4n+3) { color: var(--hzq-lime); }
.hzq-ribbon i { font-style: normal; color: var(--hzq-pink); font-size: 12px; }
.hzq-ribbon:hover .hzq-ribbon-track { animation-play-state: paused; }
@keyframes hzq-marquee { to { transform: translateX(-50%); } }

/* Phone */
.hzq-phone { margin: 0; justify-self: center; transform: rotate(-4deg); position: relative; }
.hzq-phone::before { content: ""; position: absolute; inset: -30px; background: conic-gradient(from 90deg, #ffd400, #ff3d9a, #9dff3c, #2f7bff, #ffd400); filter: blur(50px); opacity: .45; border-radius: 50%; z-index: -1; animation: hzq-spin 12s linear infinite; }
@keyframes hzq-spin { to { transform: rotate(360deg); } }
.hzq-phone-body { position: relative; width: 250px; aspect-ratio: 9 / 16; border-radius: 38px; padding: 9px; background: linear-gradient(145deg, #2c2433, #050307); box-shadow: 0 0 0 2px #3b3046, 0 0 0 4px #000, 0 40px 70px rgba(0, 0, 0, .65); overflow: hidden; }
.hzq-phone-body video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; background: #000; }
.hzq-phone-notch { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: 76px; height: 22px; border-radius: 20px; background: #000; z-index: 2; }
.hzq-live { position: absolute; left: 20px; bottom: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font: 400 13px/1 var(--hzq-marker); }
.hzq-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--hzq-lime); box-shadow: 0 0 10px var(--hzq-lime); animation: hzq-flicker 1.6s infinite; }
.hzq-phone-sm .hzq-phone-body { width: 190px; }

/* Homepage drop section */
.hzq-drop { position: relative; overflow: hidden; padding: 80px 0 60px; background: radial-gradient(70% 60% at 85% 20%, rgba(255, 61, 154, .2), transparent 70%), radial-gradient(60% 60% at 10% 90%, rgba(157, 255, 60, .14), transparent 70%), #0d0914; border-top: 3px solid var(--hzq-yellow); border-bottom: 3px solid var(--hzq-pink); }
.hzq-drop-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 50px; align-items: center; }
.hzq-title { font-size: clamp(40px, 6vw, 84px) !important; line-height: .95 !important; margin: 0 0 18px !important; text-transform: uppercase; }
.hzq-title span { display: inline-block; }
.hzq-title .hzq-spray { font-size: 1.15em; transform: rotate(-3deg); }
.hzq-drop-copy p { max-width: 620px; }
.hzq-tags { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.hzq-tags li a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--c); color: #fff !important; font: 400 15px/1 var(--hzq-marker); text-decoration: none !important; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); transition: background .2s, color .2s; }
.hzq-tags li:nth-child(odd) a { transform: rotate(-2deg); }
.hzq-tags li:nth-child(even) a { transform: rotate(2deg); }
.hzq-tags li a:hover { background: var(--c); color: #0a0710 !important; }

/* Poster wall */
.hzq-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin: 50px 0 10px; }
.hzq-poster { position: relative; display: block; background: var(--hzq-paper); padding: 8px 8px 0; transform: rotate(var(--r)); box-shadow: 0 24px 40px rgba(0, 0, 0, .5); transition: transform .3s, box-shadow .3s; text-decoration: none !important; }
.hzq-poster:hover { transform: rotate(0) translateY(-8px) scale(1.03); box-shadow: 0 0 0 3px var(--c), 0 0 40px color-mix(in srgb, var(--c) 55%, transparent); z-index: 2; }
.hzq-poster img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.hzq-tape { position: absolute; left: 50%; top: -12px; width: 80px; height: 24px; margin-left: -40px; background: rgba(255, 230, 120, .8); transform: rotate(-6deg); z-index: 2; }
.hzq-poster-cap { display: block; padding: 10px 4px 12px; color: #0a0710; }
.hzq-poster-cap b { display: block; font: 400 18px/1.1 var(--hzq-marker); }
.hzq-poster-cap small { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 999px; background: var(--c); color: #0a0710; font: 700 11px/1.2 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .06em; }

/* Banners (shop + category) */
.hzq-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; padding: 30px 34px; margin: 6px 0 26px; border-radius: 26px; background: radial-gradient(70% 90% at 90% 20%, rgba(255, 61, 154, .3), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgba(157, 255, 60, .18), transparent 70%), #120c1c; border: 2px solid var(--hzq-yellow); box-shadow: 8px 8px 0 var(--hzq-pink); }
.hzq-banner-copy { position: relative; z-index: 1; }
.hzq-banner-h { font: 900 clamp(28px, 3.6vw, 46px)/1 'Unbounded', sans-serif !important; color: #fff !important; text-transform: uppercase; margin: 0 0 12px !important; }
.hzq-banner-h a { color: #fff !important; text-decoration: none !important; }
.hzq-banner-big .hzq-banner-h { font-size: clamp(36px, 5vw, 66px) !important; }
.hzq-banner .hzq-phone { transform: rotate(4deg); }

/* Category guide */
.hzq-guide { margin: 40px 0 20px; }
.hzq-guide h2 { margin-top: 30px; }

/* Badges + product page */
.hzq-badge { position: absolute; top: 12px; left: 12px; z-index: 5; padding: 7px 12px; border-radius: 999px; background: var(--hzq-yellow); color: #0a0710; font: 400 14px/1 var(--hzq-marker); transform: rotate(-4deg); box-shadow: 3px 3px 0 #0a0710; }
.hzq-badge-pre { background: var(--hzq-lime); }
ul.products li.product { position: relative; }
.hzq-soon { margin: 16px 0 22px; padding: 18px 20px; border-radius: 18px; border: 2px dashed var(--hzq-yellow); background: rgba(255, 212, 0, .06); }
.hzq-soon p { margin: 0 0 12px; }
.hzq-soon-pre { border-color: var(--hzq-lime); background: rgba(157, 255, 60, .06); }
.hzq-each { display: inline-block; margin-left: 10px; font: 700 14px/1 'Inter', sans-serif; color: var(--hzq-lime); background: rgba(157, 255, 60, .1); border: 1px solid rgba(157, 255, 60, .5); padding: 6px 10px; border-radius: 999px; }

/* Popup */
.hzq-pop { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; padding: 18px; background: rgba(5, 3, 8, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.hzq-pop.is-open { opacity: 1; }
.hzq-pop[hidden] { display: none; }
.hzq-pop-box { position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr); width: min(760px, 100%); border-radius: 26px; overflow: hidden; background: #120c1c var(--hzq-scribble); background-size: 300px; border: 2px solid var(--hzq-yellow); box-shadow: 10px 10px 0 var(--hzq-pink), 0 40px 80px rgba(0, 0, 0, .7); transform: rotate(-1deg) scale(.94); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.hzq-pop.is-open .hzq-pop-box { transform: rotate(-1deg) scale(1); }
.hzq-pop-media { background: #000; min-height: 100%; }
.hzq-pop-media video { display: block; width: 100%; height: 100%; max-height: 460px; object-fit: cover; }
.hzq-pop-copy { padding: 30px 28px 24px; color: #e8e2f0; }
.hzq-pop-copy h2 { font: 900 30px/1.05 'Unbounded', sans-serif !important; color: #fff !important; margin: 0 0 12px !important; text-transform: uppercase; }
.hzq-pop-copy h2 .hzq-spray { display: block; font-size: 1.35em; }
.hzq-pop-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hzq-pop-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff !important; background: #0a0710 !important; color: #fff !important; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 !important; }
.hzq-pop-later { margin-top: 12px; background: none !important; border: 0 !important; color: #a197ae !important; text-decoration: underline; cursor: pointer; padding: 0 !important; font-size: 14px; box-shadow: none !important; }
body.hzq-locked { overflow: hidden; }

/* Blog post */
.hzq-post-video { margin: 24px auto; max-width: 380px; }
.hzq-post-video video { width: 100%; border-radius: 22px; border: 3px solid var(--hzq-yellow); box-shadow: 8px 8px 0 var(--hzq-pink); background: #000; }
.hzq-post-video figcaption { text-align: center; font: 400 15px var(--hzq-marker); margin-top: 10px; }
.hzq-post-fig { margin: 12px 0 16px; max-width: 280px; transform: rotate(-2deg); background: var(--hzq-paper); padding: 8px; box-shadow: 0 18px 30px rgba(0, 0, 0, .45); }
.hzq-post-fig img { display: block; width: 100%; height: auto; }

@media (max-width: 1000px) {
	.hzq-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.hzq-drop { padding: 56px 0 40px; }
	.hzq-drop-in, .hzq-banner { grid-template-columns: 1fr; }
	.hzq-drop-in .hzq-phone, .hzq-banner .hzq-phone { justify-self: center; }
	.hzq-phone-body { width: 210px; }
	.hzq-wall { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 6px 20px; margin-top: 30px; }
	.hzq-poster { scroll-snap-align: center; }
	.hzq-banner { padding: 22px; }
	.hzq-pop-box { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
	.hzq-pop-media video { max-height: 260px; }
	.hzq-pop-copy { padding: 22px 20px; }
	.hzq-pop-copy h2 { font-size: 24px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.hzq-ribbon-track, .hzq-phone::before, .hzq-wallpaper .hzq-crown, .hzq-live i { animation: none !important; }
}