/*
 * Maggie Snuggles: Elementor style kit.
 * In Elementor, type these names into a widget's or section's
 * Advanced > CSS Classes box. Anything set in Elementor's Style tab still wins.
 *
 *   Sections ......... ms-under-collar  ms-honey  ms-paws-bg
 *   Headings ......... ms-woof  ms-big-title  ms-script  ms-section-title
 *   Cards ............ ms-cloud
 *   Buttons .......... ms-btn-bone  ms-btn-text
 *   Photo shapes ..... ms-shape + ms-shape-paw | -heart | -house | -scallop | -blob | -bubble | -tag
 *   Photo extras ..... ms-photo-sticker  ms-hero-photo (inside a container with ms-hero-ears)  ms-tile
 *   Sidebar widget ... ms-jar (stacked tags)  ms-jar-row (tags in a row)
 */

.ms-main { display: block; }
.elementor .ms-under-collar { margin-top: -84px; }
.elementor .ms-honey { background-image: radial-gradient(circle at 12% 18%, rgb(255 255 255 / .55), transparent 28%), radial-gradient(circle at 92% 8%, rgb(255 111 97 / .2), transparent 26%); }
.elementor .ms-paws-bg { isolation: isolate; }
.elementor .ms-paws-bg::before, .elementor .ms-paws-bg::after {
	content: ""; position: absolute; z-index: -1; width: 64px; height: 64px; background: rgb(47 27 20 / .1); clip-path: url(#shape-paw);
}
.elementor .ms-paws-bg::before { left: 3%; bottom: 30%; transform: rotate(-22deg); }
.elementor .ms-paws-bg::after { left: 11%; bottom: 16%; transform: rotate(10deg); }
.elementor .elementor-shape { z-index: 2; }

/* Headings */
.elementor .ms-woof .elementor-heading-title {
	display: inline-block; padding: 0 16px; background: var(--cream); border: var(--line); border-radius: 22px 22px 22px 4px;
	font-family: var(--ms-font-script); font-size: 1.8rem; font-weight: 600; line-height: 1.45; color: var(--cocoa);
	transform: rotate(-4deg); animation: woof 3.2s ease-in-out infinite;
}
.elementor .ms-big-title .elementor-heading-title { font-family: var(--ms-font-display); font-weight: 700; font-size: clamp(2.6rem, 1.5rem + 5vw, 5.4rem); line-height: 1.02; letter-spacing: -.01em; color: var(--cocoa); text-wrap: balance; }
.elementor .ms-script .elementor-heading-title { font-family: var(--ms-font-script); font-weight: 600; font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.8rem); line-height: 1.1; color: var(--harness-deep); }
.elementor .ms-section-title .elementor-heading-title { font-family: var(--ms-font-display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); color: var(--cocoa); }

/* Cloud card */
.elementor .e-con.ms-cloud {
	--padding-top: clamp(24px, 4vw, 52px); --padding-right: clamp(24px, 4vw, 52px); --padding-bottom: clamp(24px, 4vw, 52px); --padding-left: clamp(24px, 4vw, 52px);
	background: #fff; border: var(--line); border-radius: 58px 38px 62px 34px / 42px 60px 36px 58px;
	box-shadow: 7px 9px 0 var(--honey), 7px 9px 0 3px var(--cocoa);
}
.elementor .ms-cloud .elementor-widget-text-editor { font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height: 1.7; color: var(--cocoa); }
.elementor .ms-cloud .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Buttons */
.elementor .ms-btn-bone .elementor-button {
	--c: var(--tongue);
	position: relative; isolation: isolate; margin: 12px 18px; padding: .46em 1.15em;
	background: var(--c); color: var(--cocoa); border: var(--line); border-radius: 12px;
	font-family: var(--ms-font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.35;
	transition: transform .2s cubic-bezier(.3,1.6,.6,1);
}
.elementor .ms-btn-bone .elementor-button::before, .elementor .ms-btn-bone .elementor-button::after {
	content: ""; position: absolute; z-index: -1; top: 50%; width: 30px; height: calc(100% + 20px); transform: translateY(-50%);
	background:
		radial-gradient(circle at 50% 13px, var(--c) 10px, var(--cocoa) 10.5px 13px, transparent 13.5px),
		radial-gradient(circle at 50% calc(100% - 13px), var(--c) 10px, var(--cocoa) 10.5px 13px, transparent 13.5px);
}
.elementor .ms-btn-bone .elementor-button::before { left: -16px; }
.elementor .ms-btn-bone .elementor-button::after { right: -16px; }
.elementor .ms-btn-bone .elementor-button:hover, .elementor .ms-btn-bone .elementor-button:focus-visible { color: var(--cocoa); transform: rotate(-3deg) scale(1.05); }
.elementor .ms-btn-text .elementor-button { background: none; padding: .4em 0; color: var(--cocoa); font-family: var(--ms-font-display); font-size: 1.08rem; font-weight: 500; text-decoration: underline wavy var(--tongue) 2px; text-underline-offset: 6px; }

/* Photo shapes. The outline sits on the link (or the widget) because clipping cuts a filter off. */
.elementor .ms-shape img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.elementor .ms-shape a:has(img), .elementor .ms-shape:not(:has(a)) {
	display: block;
	filter: drop-shadow(3px 0 0 var(--cocoa)) drop-shadow(-3px 0 0 var(--cocoa)) drop-shadow(0 3px 0 var(--cocoa)) drop-shadow(0 -3px 0 var(--cocoa)) drop-shadow(5px 7px 0 var(--honey));
}
.elementor .ms-shape-paw img { clip-path: url(#shape-paw); }
.elementor .ms-shape-heart img { clip-path: url(#shape-heart); }
.elementor .ms-shape-house img { clip-path: url(#shape-house); }
.elementor .ms-shape-scallop img { clip-path: url(#shape-scallop); }
.elementor .ms-shape-blob img { clip-path: url(#shape-blob); }
.elementor .ms-shape-bubble img { clip-path: url(#shape-bubble); }
.elementor .ms-shape-tag img { clip-path: url(#shape-tag); }
.elementor .ms-tile .elementor-widget-image a { transition: transform .3s cubic-bezier(.3,1.6,.6,1); }
.elementor .ms-tile:hover .elementor-widget-image a { transform: rotate(-4deg) scale(1.04); }
.elementor .ms-tile:nth-child(even):hover .elementor-widget-image a { transform: rotate(4deg) scale(1.04); }
.elementor .ms-tile .widget-image-caption { margin-top: 14px; font-family: var(--ms-font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: var(--cocoa); text-align: center; }
.elementor .ms-tile:nth-child(odd) { margin-top: 26px; }

/* Hero photo: cream plate and bouncing ball on the photo, floppy ears on its container */
.elementor .ms-hero-photo { position: relative; isolation: isolate; }
.elementor .ms-hero-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; clip-path: url(#shape-scallop); }
.elementor .ms-hero-photo::before { content: ""; position: absolute; inset: -3.5%; z-index: -1; border-radius: 50%; background: var(--cream); border: var(--line); box-shadow: 8px 11px 0 var(--cocoa); }
.elementor .ms-hero-photo::after {
	content: ""; position: absolute; right: -2%; bottom: 3%; width: 21%; aspect-ratio: 1; border: var(--line); border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #f3ff8a, #d9ec4a 55%, #b8cc2a); box-shadow: 4px 6px 0 rgb(47 27 20 / .9);
	animation: bounce 2.4s cubic-bezier(.3,0,.6,1) infinite;
}
.elementor .ms-hero-ears { isolation: isolate; }
.elementor .ms-hero-ears::before, .elementor .ms-hero-ears::after { content: ""; position: absolute; z-index: -1; top: 6%; width: 27%; height: 50%; background: var(--gold); border: var(--line); }
.elementor .ms-hero-ears::before { left: 0; border-radius: 70% 30% 45% 55% / 28% 22% 78% 72%; transform: rotate(16deg); transform-origin: 80% 0; animation: ear 4.5s ease-in-out infinite; }
.elementor .ms-hero-ears::after { right: 0; border-radius: 30% 70% 55% 45% / 22% 28% 72% 78%; transform: rotate(-16deg); transform-origin: 20% 0; animation: ear-r 4.5s ease-in-out infinite; }

/* Photos inside text */
.elementor .ms-photo-sticker { text-align: center; }
.elementor .ms-photo-sticker img {
	width: min(100%, 760px); padding: 10px; background: var(--cream); border: var(--line);
	border-radius: 44px 28px 48px 26px / 30px 46px 28px 44px; box-shadow: 6px 8px 0 var(--tongue), 6px 8px 0 3px var(--cocoa); transform: rotate(-1.2deg);
}

/* Sidebar widget as hanging collar tags */
.elementor .ms-jar .widget, .elementor .ms-jar-row .widget {
	position: relative; margin: 0 0 34px; padding: 42px 18px 20px; text-align: center;
	background: var(--butter); border: var(--line); border-radius: 34px 34px 80px 80px / 34px 34px 62px 62px; box-shadow: 5px 7px 0 var(--cocoa);
}
.elementor :is(.ms-jar, .ms-jar-row) .widget:nth-child(3n+1) { transform: rotate(-1.2deg); }
.elementor :is(.ms-jar, .ms-jar-row) .widget:nth-child(3n+2) { background: #ffe0dc; transform: rotate(1deg); }
.elementor :is(.ms-jar, .ms-jar-row) .widget:nth-child(3n) { background: #eadff7; transform: rotate(-.6deg); }
.elementor :is(.ms-jar, .ms-jar-row) .widget::before { content: ""; position: absolute; left: 50%; top: 12px; width: 20px; height: 20px; margin-left: -10px; background: var(--cream); border: var(--line); border-radius: 50%; }
.elementor :is(.ms-jar, .ms-jar-row) .widget img { border-radius: 26px; }
.elementor :is(.ms-jar, .ms-jar-row) .widget_media_image img { background: #fff; padding: 8px; }
.elementor .ms-jar-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; align-items: start; }
.elementor .ms-jar-row .widget { margin: 0; }
.elementor :is(.ms-jar, .ms-jar-row) .widget-title { font-family: var(--ms-font-display); font-size: 1.28rem; font-weight: 600; }

@media (max-width: 900px) {
	.elementor .ms-jar-row { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; width: 100%; }
}
@media (max-width: 600px) {

	.elementor .ms-tile:nth-child(odd) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.elementor [class*="ms-"], .elementor [class*="ms-"]::before, .elementor [class*="ms-"]::after, .elementor [class*="ms-"] * { animation: none !important; transition: none !important; }
}