/* Mr. Stickers brand layer. Colours and fonts come from theme.json presets. */
:root {
	--ms-ink: var(--wp--preset--color--contrast, #121318);
	--ms-paper: var(--wp--preset--color--base, #fffdf6);
	--ms-carbon: var(--wp--preset--color--carbon, #101216);
	--ms-mag: var(--wp--preset--color--accent-1, #e8177f);
	--ms-sun: var(--wp--preset--color--accent-2, #ffd21a);
	--ms-cyan: var(--wp--preset--color--accent-3, #0aa6e6);
	--ms-lime: var(--wp--preset--color--accent-4, #7fc23d);
	--ms-tang: var(--wp--preset--color--accent-5, #ff7a1a);
	--ms-grape: var(--wp--preset--color--accent-6, #6b3fd8);
	--ms-on-carbon: #f5f6fa;
	--ms-on-carbon-2: #b4bacb;
	--ms-display: var(--wp--preset--font-family--display, "Arial Black", sans-serif);
	--ms-logo: var(--wp--preset--font-family--logo, Georgia, serif);
	--ms-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
}
body { background: var(--ms-paper); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--ms-cyan); outline-offset: 2px; }
.ms-wrap { max-width: 1200px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }

/* ---------- carbon fibre ---------- */
.ms-carbon {
	background-color: var(--ms-carbon);
	background-image:
		linear-gradient(27deg, #15181e 5px, transparent 5px), linear-gradient(207deg, #15181e 5px, transparent 5px),
		linear-gradient(27deg, #0c0e12 5px, transparent 5px), linear-gradient(207deg, #0c0e12 5px, transparent 5px),
		linear-gradient(90deg, #121419 10px, transparent 10px),
		linear-gradient(#13161b 25%, #101216 25%, #101216 50%, transparent 50%, transparent 75%, #16191f 75%, #16191f);
	background-size: 20px 20px;
	background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
	color: var(--ms-on-carbon);
}

/* ---------- header ---------- */
.ms-site-header { position: relative; overflow: hidden; }
.ms-cubes { position: relative; height: 150px; }
.ms-cubes svg { display: block; width: 100%; height: 150px; }
.ms-drips { position: absolute; left: 0; right: 0; top: 142px; height: 0; pointer-events: none; z-index: 0; }
.ms-drips span { position: absolute; top: 0; width: var(--w, 8px); height: var(--h, 80px); background: var(--c); border-radius: 0 0 999px 999px; opacity: .95; transform-origin: top; animation: ms-ooze 6s ease-in-out infinite alternate; }
.ms-drips span::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: calc(var(--w, 8px) * 1.5); height: calc(var(--w, 8px) * 1.5); transform: translateX(-50%); background: var(--c); border-radius: 50%; }
.ms-topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-top: -58px; padding-block: 0 18px; }

.ms-brand { display: inline-flex; align-items: flex-end; text-decoration: none; color: inherit; }
.ms-mini { width: 50px; height: auto; margin-right: -12px; margin-bottom: -6px; position: relative; z-index: 3; transform: rotate(-4deg);
	filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); } /* the artwork has its own white sticker border */
.ms-logo { display: inline-grid; justify-items: center; background: #121212; color: #f1f1f1; border-radius: 22px 34px 22px 30px; padding: 10px 24px 12px;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #c9ccd4, 0 10px 24px rgba(0,0,0,.45); transform: rotate(-2deg); }
.ms-logo .l1 { font-family: var(--ms-logo); font-weight: 900; font-size: clamp(24px, 3.6vw, 38px); line-height: 1; letter-spacing: .01em; text-shadow: 0 2px 0 #7a7a7a; }
.ms-logo .l2 { font-family: var(--ms-logo); font-weight: 900; font-size: clamp(8.5px, 1.1vw, 11.5px); letter-spacing: .2em; margin-top: 5px; padding-left: .2em; }
a.ms-brand:hover .ms-logo { transform: rotate(-1deg) scale(1.02); }

.ms-navrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ms-nav { display: flex; gap: 2px; flex-wrap: wrap; background: rgba(16,18,22,.88); border-radius: 999px; padding: 4px; box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
.ms-nav a { font-weight: 700; font-size: 15px; color: var(--ms-on-carbon); text-decoration: none; padding: 7px 12px; border-radius: 999px; }
.ms-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.ms-nav a.on { background: var(--ms-sun); color: #111; }
.ms-cartbtn { font-weight: 800; font-size: 15px; background: #fff; color: #111 !important; border-radius: 999px; padding: 7px 15px; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; box-shadow: 3px 3px 0 var(--ms-mag); }
.ms-quickbtn { font-weight: 800; font-size: 15px; background: var(--ms-sun); color: #111 !important; border-radius: 999px; padding: 7px 15px; text-decoration: none; box-shadow: 3px 3px 0 var(--ms-cyan); }
.ms-quickbtn:hover { transform: translate(-1px, -1px); }
.ms-cartbtn span { background: var(--ms-mag); color: #fff; border-radius: 999px; min-width: 22px; padding: 0 6px; font-size: 12px; line-height: 20px; text-align: center; }
.ms-cartbtn span[hidden] { display: none; }

/* ---------- hero ---------- */
.ms-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: end; padding-block: 36px 0; }
.ms-hero-copy { padding-bottom: 56px; min-width: 0; }
.ms-hero h1 { font-family: var(--ms-display); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1; margin: 0 0 18px; color: #fff; text-wrap: balance; }
.ms-hero h1 .y { color: var(--ms-sun); }
.ms-hero h1 .m { color: var(--ms-mag); }
.ms-sub { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--ms-on-carbon-2); max-width: 36em; margin: 0 0 24px; }
.ms-sub b { color: #fff; }
.ms-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.ms-btn-hot, .ms-btn-ghost { display: inline-block; font-weight: 800; font-size: 17px; text-decoration: none; border-radius: 14px; padding: 14px 22px; }
.ms-btn-hot { background: var(--ms-mag); color: #fff !important; box-shadow: 5px 5px 0 var(--ms-sun); }
.ms-btn-hot:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--ms-sun); }
.ms-btn-ghost { color: #fff !important; border: 2px solid #fff; }
.ms-btn-ghost:hover { background: #fff; color: #111 !important; }
.ms-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 0; font-size: 14px; font-weight: 600; color: var(--ms-on-carbon-2); }
.ms-trust li::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); margin-right: 7px; }

.ms-stage { display: grid; justify-items: center; align-self: end; min-width: 0; }
.ms-bubble { position: relative; background: #fff; color: #111; border-radius: 18px; padding: 12px 16px; max-width: 300px; font-weight: 700; font-size: 15px; line-height: 1.35; box-shadow: 5px 5px 0 var(--ms-cyan); margin-bottom: 18px; min-height: 5.5em; }
.ms-bubble small { display: block; font-family: var(--ms-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-mag); margin-bottom: 3px; }
.ms-bubble::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 20px; height: 20px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.ms-umb-wrap { position: relative; width: min(280px, 100%); }
.ms-mascot { position: relative; z-index: 2; width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
/* Paint keeps dripping off the umbrella's drip tips (positions match mascot-umbrella.webp). */
.ms-umb-drops { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ms-umb-drops span { position: absolute; width: 8px; height: 12px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c); opacity: 0; animation: ms-drip-fall 3.2s ease-in infinite; }
@keyframes ms-drip-fall { 0% { transform: translateY(0) scaleY(.6); opacity: 0; } 15% { opacity: 1; } 85% { transform: translateY(70px) scaleY(1.1); opacity: 1; } 100% { transform: translateY(80px) scaleY(.4); opacity: 0; } }
.ms-pdrip { position: absolute; z-index: 3; width: var(--w, 9px); height: var(--h, 22px); background: var(--c); border-radius: 999px 999px 999px 999px / 40% 40% 999px 999px; transform-origin: top; animation: ms-ooze 5s ease-in-out infinite alternate; }
.ms-pdrip::before { content: ""; position: absolute; left: 50%; top: -4px; width: calc(var(--w, 9px) * 2.2); height: calc(var(--w, 9px) * 1.1); transform: translateX(-50%); background: var(--c); border-radius: 50%; }
.ms-puddle { position: absolute; z-index: 1; bottom: -6px; left: 50%; transform: translateX(-50%); width: 210px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(232,23,127,.9), rgba(107,63,216,.85) 45%, rgba(10,166,230,.6) 70%, transparent 72%); }
/* One drip runs all the way down and pools at the bottom of the hero. theme.js snaps it under a cube and takes that cube's colour. */
.ms-longdrip { --c: #ffd21a; position: absolute; z-index: 0; top: 142px; bottom: 30px; left: min(calc(50% + 175px), calc((100% - 64px) * .625 + 58px)); width: 9px; background: var(--c); border-radius: 0 0 999px 999px;
	box-shadow: inset -2px 0 2px rgba(0,0,0,.25), inset 2px 0 2px rgba(255,255,255,.35); }
.ms-longdrip i { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); width: 170px; height: 28px; border-radius: 50%; background: var(--c);
	box-shadow: inset 0 5px 7px rgba(255,255,255,.45), inset 0 -5px 8px rgba(0,0,0,.28), 0 6px 14px rgba(0,0,0,.45); }
.ms-longdrip i::before { content: ""; position: absolute; left: 50%; top: -10px; transform: translateX(-50%); width: 26px; height: 16px; border-radius: 50%; background: var(--c); }
@keyframes ms-ooze { from { transform: scaleY(.85); } to { transform: scaleY(1.08); } }
@keyframes ms-fall { 0% { transform: translateY(-60px) scaleY(1); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(26px) scaleY(1.1); opacity: 1; } 100% { transform: translateY(30px) scaleY(.4); opacity: 0; } }

@media (max-width: 860px) {
	.ms-longdrip { left: calc(100% - 52px); }
	.ms-longdrip i { width: 110px; }
	.ms-hero { grid-template-columns: 1fr; padding-top: 20px; }
	.ms-hero-copy { padding-bottom: 0; }
	.ms-stage { padding-top: 8px; }
}
@media (max-width: 600px) {
	.ms-cubes, .ms-cubes svg { height: 100px; }
	.ms-drips { top: 95px; }
	.ms-topbar { margin-top: -46px; }
	.ms-mini { width: 38px; }
	.ms-navrow { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
	.ms-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
	.ms-nav a { white-space: nowrap; padding: 6px 10px; font-size: 14px; }
}

/* ---------- ticker ---------- */
.ms-ticker { background: var(--ms-sun); color: #111; overflow: hidden; border-block: 3px solid #111; }
.ms-ticker div { display: flex; gap: 28px; width: max-content; padding-block: 9px; font-family: var(--ms-display); font-size: 16px; letter-spacing: .02em; animation: ms-tick 34s linear infinite; }
.ms-ticker i { font-style: normal; color: var(--ms-mag); }
@keyframes ms-tick { to { transform: translateX(-50%); } }

/* ---------- home sections (core blocks with these classes) ---------- */
.ms-section { padding-block: clamp(48px, 7vw, 88px); }
.ms-kicker { font-family: var(--ms-mono); font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-mag); font-weight: 600; margin-bottom: 8px !important; }
.ms-steps .wp-block-column, .ms-types .wp-block-column {
	background: #fff; border: 3px solid var(--ms-ink); border-radius: 20px; padding: 22px 22px 18px; box-shadow: 7px 7px 0 var(--c, var(--ms-ink));
}
.ms-steps .wp-block-column:nth-child(1) { --c: var(--ms-mag); }
.ms-steps .wp-block-column:nth-child(2) { --c: var(--ms-cyan); }
.ms-steps .wp-block-column:nth-child(3) { --c: var(--ms-lime); }
.ms-steps h3::before { counter-increment: ms-step; content: counter(ms-step); display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 10px; border-radius: 9px; background: var(--c); color: #fff; font-size: 20px; vertical-align: middle; box-shadow: inset -3px -3px 0 rgba(0,0,0,.18); }
.ms-steps { counter-reset: ms-step; }
.ms-types .wp-block-column:nth-child(1) { --c: var(--ms-sun); }
.ms-types .wp-block-column:nth-child(2) { --c: var(--ms-tang); }
.ms-types .wp-block-column:nth-child(3) { --c: var(--ms-grape); }
.ms-types .wp-block-column:nth-child(4) { --c: var(--ms-cyan); }
.ms-types .wp-block-column { transition: transform .15s; }
.ms-types .wp-block-column:hover { transform: rotate(-1deg) translateY(-3px); }
.ms-types p { font-size: 15px; }
.ms-card-img { margin: -6px 0 6px; }
.ms-card-img img { display: block; width: 100%; max-width: 220px; height: auto; margin-inline: auto; }
.ms-big .ms-card-img img { max-width: 320px; }
.ms-big .wp-block-column:nth-child(1) { --c: var(--ms-mag); }
.ms-big .wp-block-column:nth-child(2) { --c: var(--ms-sun); }
.ms-big .wp-block-column:nth-child(3) { --c: var(--ms-cyan); }
/* Long nav: let it scroll sideways inside its pill on narrower screens rather than wrap. */
@media (max-width: 1100px) { .ms-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ms-nav a { white-space: nowrap; } }
/* Sticker School list and FAQ */
.wp-block-latest-posts.wp-block-latest-posts__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding: 0; }
.wp-block-latest-posts__list li { background: #fff; border: 3px solid var(--ms-ink); border-radius: 18px; padding: 18px; box-shadow: 6px 6px 0 var(--ms-sun); list-style: none; }
.wp-block-latest-posts__post-title { font-family: var(--ms-display); font-size: 1.15rem; line-height: 1.15; text-decoration: none; }
.wp-block-latest-posts__post-excerpt { font-size: 15px; margin: 8px 0 0; }
.wp-block-details { border: 2px solid var(--ms-ink); border-radius: 14px; padding: 12px 16px; margin-block: 10px; background: #fff; }
.wp-block-details summary { font-weight: 800; cursor: pointer; }
.wp-block-details[open] { box-shadow: 4px 4px 0 var(--ms-mag); }
.ms-types a { font-weight: 800; color: var(--ms-mag); }
.ms-band { background: var(--ms-mag); color: #fff; border-block: 4px solid #111; }
.ms-band h2 { color: #fff; }
.ms-band .wp-block-button__link { background: var(--ms-sun) !important; color: #111 !important; box-shadow: 4px 4px 0 #111 !important; }

/* ---------- footer ---------- */
.ms-site-footer { margin-top: 0; }
.ms-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding-block: 34px 40px; }
.ms-foot .ms-logo { transform: rotate(1deg) scale(.85); transform-origin: left center; }
.ms-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ms-foot-nav a { color: var(--ms-on-carbon); text-decoration: none; font-weight: 600; font-size: 15px; }
.ms-foot-nav a:hover { color: var(--ms-sun); }
.ms-fine { width: 100%; margin: 0; font-size: 13px; color: var(--ms-on-carbon-2); }

/* ---------- WooCommerce touches ---------- */
.wc-block-components-button:not(.is-link), .woocommerce .button, .wp-block-button__link { font-weight: 800; }
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--ms-mag) !important; color: #fff !important; border-radius: 14px !important; box-shadow: 4px 4px 0 var(--ms-sun); }
.ms-thanks { background: var(--ms-sun); border: 3px solid #111; border-radius: 14px; padding: 14px 16px; }

@media (prefers-reduced-motion: reduce) {
	.ms-ticker div, .ms-pdrip, .ms-umb-drops span, .ms-drips span { animation: none !important; }
}
html{scroll-behavior:smooth} .ms-quick-section{scroll-margin-top:12px}

/* Seasonal: Grumpy Christmas promo (front page and Labels page). Remove the front-page group after the season. */
.ms-xmas-promo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: center; background: #b3122d; color: #fff8e7; border-radius: 28px; padding: 26px; box-shadow: 6px 6px 0 #14532d; background-image: radial-gradient(circle, rgba(255,255,255,.18) 1.5px, transparent 2.5px); background-size: 34px 34px; }
.ms-xmas-img img { display: block; width: 100%; height: auto; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.ms-xmas-copy { min-width: 0; }
.ms-xmas-copy .ms-kicker { color: #ffd76a; }
.ms-xmas-copy h2 { color: #ffd76a; margin: 4px 0 12px; font-size: clamp(30px, 4vw, 46px); line-height: 1; }
.ms-xmas-copy p { font-size: 17px; }
.ms-xmas-cta { margin-top: 18px; }
@media (max-width: 800px) { .ms-xmas-promo { grid-template-columns: 1fr; padding: 18px; } }
.ms-stk-xmas { margin: 8px 0 32px; }