@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#faf7ef;--ink:#49382f;--purple:#477764;--lime:#f3d594;--line:#dedbd3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #74a99a;outline-offset:5px}.skip{position:absolute;top:-100px}.skip:focus{top:10px;background:white;padding:15px;z-index:10}header{max-width:1320px;margin:auto;padding:28px 54px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:700;letter-spacing:-1.3px;line-height:1}.brand-home{display:block;letter-spacing:1px;font-weight:500;font-size:18px}.brand-icon{background:var(--purple);color:var(--paper);border-radius:45% 45% 40% 40%;width:47px;height:52px;display:grid;place-content:center;font-size:45px;position:relative}.brand-icon span{position:absolute;font-size:18px;right:4px;top:5px;color:var(--lime)}nav{display:flex;gap:32px;align-items:center;font-size:13px;font-weight:600}.shop-nav{border:1px solid var(--ink);border-radius:30px;padding:13px 20px}.hero{max-width:1320px;margin:auto;display:grid;grid-template-columns:1fr 1fr;padding:67px 54px 70px;min-height:565px;align-items:center}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px}.hero h1{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(42px,4.6vw,68px);letter-spacing:-3px;line-height:1.05;margin:24px 0 20px;position:relative;font-weight:600}.hero h1 span{color:var(--purple)}.hero h1 svg{display:block;width:78%;height:20px;fill:none;stroke:var(--purple);stroke-width:3;position:absolute;bottom:-12px}.intro{font-size:16px;line-height:1.65;color:#6b6057;margin:30px 0 25px}.button{background:var(--ink);color:white;border:0;display:inline-flex;align-items:center;gap:28px;padding:17px 23px;border-radius:5px;font-size:13px;font-weight:600;transition:transform .2s}.button:hover{transform:translateY(-3px)}.button span{font-size:20px}.hero-note{font-size:11px;color:#7b7066;margin-top:16px}.hero-art{position:relative;height:420px;margin-left:25px}.orbit{position:absolute;width:390px;height:390px;background:#e3ece2;border-radius:50%;top:5px;left:20px}.hero-book{position:absolute;left:35px;top:30px;width:210px;transform:rotate(-12deg);box-shadow:8px 14px 22px #49382f30;border-radius:3px;overflow:hidden}.hero-book img{width:100%;display:block}.hero-shirt{position:absolute;right:0;top:120px;width:255px;transform:rotate(10deg);border:9px solid white;border-bottom-width:25px;box-shadow:3px 10px 25px #49382f25}.hero-shirt img{width:100%;display:block}.spark{position:absolute;font-size:68px;z-index:2}.s1{right:24px;top:0;color:var(--purple)}.s2{left:-10px;top:200px;color:#df8e7a;font-size:40px}.hand-note{position:absolute;right:8px;bottom:0;font-size:15px;font-style:italic;transform:rotate(-7deg)}.ticker{background:var(--purple);color:white;padding:18px 0;white-space:nowrap;overflow:hidden;font-size:13px;letter-spacing:2px;font-weight:600;word-spacing:10px}.ticker span{color:var(--lime);margin:0 22px;font-size:20px}.worlds{max-width:1320px;margin:auto;padding:48px 54px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.world{border-radius:9px;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:transform .2s}.world:hover{transform:translateY(-4px)}.punk{background:var(--lime)}.kids{background:#e1ece3}.world h2{font-family:'Space Grotesk',Arial,sans-serif;font-size:32px;letter-spacing:-1.5px;margin:13px 0 8px}.world h2 span{margin-left:15px;font-size:24px}.world p{font-size:12px;margin:0}.world .eyebrow{font-size:9px}.world-symbol{font-size:95px;line-height:1;transform:rotate(10deg);color:var(--purple)}.punk .world-symbol{color:var(--ink)}.catalog{max-width:1320px;margin:auto;padding:12px 54px 70px}.catalog-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:30px}.catalog h2{font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-1px;font-size:30px;margin:12px 0}.catalog h2 i{color:var(--purple);font-style:normal}.search{display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid var(--line);border-radius:5px;background:#fffdfa}.search span{font-size:24px;line-height:1}.search input{border:none;background:transparent;width:210px;font-size:12px;outline-offset:10px}.filter-top,.filter-bottom{display:flex;justify-content:space-between;gap:15px;align-items:center}.filter-top{padding-bottom:20px;border-bottom:1px solid var(--line)}.world-filters{display:flex;gap:8px}.world-filters button{background:transparent;border:1px solid var(--line);padding:10px 17px;border-radius:25px;font-size:12px}.world-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}.sort-label{font-size:11px;color:#7b7066}.sort-label select{border:0;background:transparent;font-size:12px;margin-left:8px;max-width:150px}.filter-bottom{margin:18px 0 24px}.category-filters{display:flex;gap:22px}.category-filters button{border:0;background:transparent;padding:7px 0;font-size:12px;color:#7b7066;border-bottom:2px solid transparent}.category-filters button[aria-pressed=true]{color:var(--purple);border-color:var(--purple);font-weight:700}.category-filters span{font-size:9px;margin-left:4px;background:#e4ebe1;padding:2px 5px;border-radius:9px}#count{font-size:11px;color:#7b7066}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}.product{min-width:0}.product-image{position:relative;background:#eee9df;border-radius:7px;aspect-ratio:1/1.1;overflow:hidden;display:flex;align-items:center;justify-content:center}.product:nth-child(4n+2) .product-image{background:#f2e4d7}.product:nth-child(4n+3) .product-image{background:#e3eade}.product-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.product.books .product-image img{height:82%;width:76%;object-fit:contain;filter:drop-shadow(4px 7px 5px #0002)}.product a:hover img{transform:scale(1.04)}.badge{position:absolute;left:12px;top:12px;background:var(--paper);padding:6px 9px;border-radius:20px;font-size:9px;z-index:1}.badge.rebel{background:var(--lime)}.product-meta{display:flex;justify-content:space-between;color:#7b7066;font-size:9px;text-transform:uppercase;letter-spacing:.8px;margin:14px 0 8px}.product h3{font-size:15px;line-height:1.4;margin:0 0 6px;font-weight:700}.product p{font-size:11px;line-height:1.5;color:#7b7066;min-height:34px;margin:0 0 12px}.product-link{font-size:11px;font-weight:700;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}.product-link span{font-size:16px;color:var(--purple)}#empty{text-align:center;padding:60px 0}#reset{background:var(--ink);color:white;border:0;padding:14px;border-radius:5px}.endnote{max-width:1212px;margin:0 auto 60px;padding:42px;background:#e5ece0;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:28px}.endnote>span{font-size:100px;color:var(--purple)}.endnote h2{font-family:'Space Grotesk',Arial,sans-serif;font-size:30px;letter-spacing:-1px;margin:12px 0}.endnote p:not(.eyebrow){font-size:12px;line-height:1.7;color:#75695e}footer{max-width:1320px;margin:auto;border-top:1px solid var(--line);padding:30px 54px;display:flex;align-items:center;gap:25px;font-size:11px}.footer-brand{font-size:18px;font-weight:700}footer p{flex:1;color:#7b7066}.demo-note{background:#ede9df;text-align:center;padding:15px 30px;font-size:10px;line-height:1.6;color:#75695e} @media(min-width:1500px){.hero{padding-top:80px;padding-bottom:90px}}@media(max-width:1000px){header,.hero,.worlds,.catalog,footer{padding-left:28px;padding-right:28px}.hero h1{font-size:49px}.hero-art{transform:scale(.8);transform-origin:center;margin-left:-20px}.orbit{width:340px;height:340px}.hero-shirt{right:-15px}.catalog-heading{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.endnote{margin:0 28px 40px}.endnote>span{display:none}.endnote .button{white-space:nowrap}.category-filters{gap:15px}}@media(max-width:650px){header{padding:18px 20px}nav{gap:16px;font-size:11px}.shop-nav{display:none}.brand{font-size:20px}.brand-icon{width:36px;height:42px}.brand-home{font-size:14px}.hero{padding:35px 24px 30px;display:flex;flex-direction:column;align-items:stretch}.hero h1{font-size:51px;letter-spacing:-2.5px}.hero h1 svg{width:270px}.intro{font-size:14px}.hero-art{height:340px;transform:scale(.85);transform-origin:top center;margin:20px -5px -40px}.hero-shirt{width:205px;right:0;top:95px}.hero-book{width:180px;left:25px}.orbit{width:290px;height:290px;left:20px}.s1{right:0}.hand-note{bottom:0;font-size:13px}.ticker{font-size:10px;padding:10px 0}.worlds{grid-template-columns:1fr;gap:12px;padding:28px 20px}.world{padding:22px}.world h2{font-size:28px}.world-symbol{font-size:65px}.catalog{padding:15px 20px 40px}.catalog h2{font-size:26px}.catalog-heading{margin-bottom:22px;gap:12px}.search{width:100%}.search input{width:100%}.filter-top{align-items:flex-start;flex-direction:column}.world-filters{gap:6px}.world-filters button{font-size:11px;padding:9px 12px}.filter-bottom{align-items:flex-start;flex-direction:column;gap:0}.category-filters{gap:13px;flex-wrap:wrap}.category-filters button{font-size:11px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.product h3{font-size:13px}.product p{font-size:10px}.product-meta{font-size:8px;letter-spacing:.2px}.badge{left:7px;top:7px;font-size:8px;padding:5px 7px}.endnote{flex-direction:column;align-items:flex-start;padding:25px;margin:0 20px 30px}.endnote h2{font-size:27px}footer{padding:24px 20px;flex-wrap:wrap;gap:18px}footer p{flex-basis:100%;order:3;margin:0}.demo-note{padding:14px 20px}.product-link{font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Shared paper background, original brand marks and clearly grouped products. */
body {
  background-color: #faf7ef;
  background-image: url('assets/playful-pattern.svg'),
    radial-gradient(ellipse at 8% 4%, #f4dbc877, transparent 38%),
    radial-gradient(ellipse at 95% 29%, #cddfce66, transparent 42%),
    radial-gradient(ellipse at 12% 74%, #f2d8c866, transparent 40%);
  background-size: 600px 600px, 100% 1800px, 100% 2400px, 100% 2200px;
  background-repeat: repeat, no-repeat, repeat-y, repeat-y;
}
header { gap: 26px; padding-top: 20px; padding-bottom: 20px; }
.brand { flex: 0 0 auto; }
.brand-logo { display: block; width: 218px; height: auto; }
nav { gap: 22px; }
.shop-nav { background: #fffaf2c9; white-space: nowrap; }
.amazon-nav { background: #e4ece2c9; }
.world { min-height: 188px; gap: 22px; border: 1px solid #ffffffa6; }
.world > div { flex: 1; }
.world .world-symbol { display: block; width: 112px; height: 112px; object-fit: contain; flex: 0 0 112px; transform: rotate(7deg); }
.world .punk-symbol { transform: rotate(-8deg); }
.world h2 { font-size: 30px; }
.world.punk { background: #f2d5c6eb; }
.world.kids { background: #dce9dfeb; }
.catalog-heading { align-items: center; }
.catalog h2 { font-size: 32px; }
.grid { gap: 32px 22px; align-items: stretch; }
.product {
  background: #fffcf7;
  border: 1px solid #ded8d0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px #49382f10;
  transition: transform .2s, box-shadow .2s;
}
.product:hover { transform: translateY(-4px); box-shadow: 0 10px 24px #49382f1b; }
.product > a { display: flex; flex-direction: column; height: 100%; }
.product > a:focus-visible { outline-offset: -4px; border-radius: 12px; }
.product-image { border-radius: 0; aspect-ratio: 1 / 1.08; flex-shrink: 0; }
.product-details { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.product-meta { margin: 0 0 10px; gap: 8px; flex-wrap: wrap; }
.product h3 { font-size: 15px; margin-bottom: 8px; }
.product p { margin-bottom: 18px; min-height: 0; line-height: 1.6; }
.product-link {
  margin-top: auto;
  background: #e6eee5;
  border: 1px solid #c9daca;
  border-radius: 6px;
  padding: 11px 12px;
  align-items: center;
  color: #3d6655;
  gap: 6px;
}
.product-link span { line-height: 1; }
.product a:hover .product-link { background: #d8e6d8; }
.image-fallback { padding: 24px; text-align: center; font-size: 14px; }
.endnote { background: #e4ece1eb; border: 1px solid #ffffffb8; }
.footer-brand img { display: block; width: 160px; height: auto; }
.demo-note { background: #ede9dfb8; }
@media(max-width:1100px) {
  nav { gap: 14px; font-size: 12px; }
  .brand-logo { width: 185px; }
  .shop-nav { padding: 11px 14px; }
  .world { padding: 24px; gap: 14px; }
  .world .world-symbol { width: 90px; height: 90px; flex-basis: 90px; }
  .world h2 { font-size: 27px; }
}
@media(max-width:850px) {
  header { flex-wrap: wrap; justify-content: center; gap: 16px; }
  header nav { justify-content: center; flex-wrap: wrap; }
  .worlds { gap: 16px; }
  .world { flex-wrap: wrap; }
  .world .world-symbol { margin-left: auto; }
}
@media(max-width:650px) {
  header { padding: 16px 20px 20px; }
  .brand-logo { width: 190px; }
  header nav { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; }
  header nav > a:not(.shop-nav) { padding: 4px 0; }
  header .shop-nav { display: block; padding: 10px 12px; font-size: 11px; }
  .world { flex-wrap: nowrap; min-height: 155px; padding: 22px; }
  .world .world-symbol { width: 82px; height: 82px; flex-basis: 82px; }
  .world h2 { font-size: 27px; }
  .world h2 span { margin-left: 6px; font-size: 21px; }
  .world p { font-size: 11px; line-height: 1.5; }
  .world .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .catalog-heading { align-items: stretch; }
  .catalog h2 { font-size: 27px; }
  .grid { gap: 22px 12px; }
  .product-details { padding: 12px 10px 10px; }
  .product h3 { font-size: 13px; }
  .product p { font-size: 10px; margin-bottom: 14px; }
  .product-link { padding: 10px 8px; font-size: 10px; }
  .product-link span { font-size: 14px; }
  .footer-brand img { width: 140px; }
  body { background-size: 450px 450px, 100% 1300px, 100% 1600px, 100% 2000px; }
}
@media(max-width:360px) {
  .world .world-symbol { width: 64px; height: 64px; flex-basis: 64px; }
  .world h2 { font-size: 23px; }
}

/* Illustrated closing panel, inspired by the Etsy banner. */
.endnote { display: grid; grid-template-columns: 1fr auto; padding: 0 0 32px; gap: 24px 32px; overflow: hidden; background: #fcf7ec; }
.endnote-art { display: block; grid-column: 1 / -1; width: 100%; height: auto; }
.endnote-copy { margin-left: 40px; }
.endnote > .button { margin-right: 40px; }
@media(max-width:650px) {
  .endnote { display: flex; flex-direction: column; gap: 18px; padding: 0 0 24px; }
  .endnote-copy { margin: 0 22px; }
  .endnote > .button { margin: 0 22px; }
}

/* Give the shirt the same visual weight as the coloring book. */
.hero-shirt {
  width: 310px;
  height: 320px;
  top: 65px;
  right: -5px;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transform: rotate(8deg);
  box-shadow: 3px 12px 28px #49382f25;
}
.hero-shirt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.28);
}
.hero-book { left: 8px; top: 20px; }
@media(min-width:651px) and (max-width:1000px) {
  .hero-shirt { width: 270px; height: 300px; right: -25px; }
  .hero-book { left: -10px; }
}
@media(max-width:650px) {
  .hero-art { height: 380px; transform: scale(.9); margin: 25px -5px -35px; }
  .hero-shirt { width: 225px; height: 255px; top: 75px; right: 0; }
  .hero-shirt img { transform: scale(1.25); }
  .hero-book { width: 160px; left: 0; top: 15px; }
  .hand-note { bottom: 8px; }
}

/* Separate shop links keep multiple destinations accessible without nested links. */
.product { display: flex; flex-direction: column; }
.product > .product-main { height: auto; flex: 1; }
.product-details { padding-bottom: 0; }
.product-actions { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; margin-top: auto; }
.product-actions .product-link { margin-top: 0; }
.secondary-shop-link { background: #e7f0e8; border-color: #c7dccc; color: #315f4e; }
.secondary-shop-link:hover { background: #d6e8dc; }
.endnote-actions { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; margin: 0 40px; }
.endnote-actions .button { padding: 14px 20px; gap: 12px; }
.spreadshop-button { background: #477764; }
@media(max-width:650px) {
 .product-actions { padding: 0 10px 10px; gap: 7px; }
 .endnote-actions { margin: 0 22px; display: flex; flex-direction: column; align-self: stretch; }
 .endnote-actions .button { justify-content: space-between; padding: 14px 16px; }
}

/* Sage, coral and warm cream connect the original artwork with the page. */
.hero { position: relative; isolation: isolate; }
.hero::before {
 content: ''; position: absolute; z-index: -1; inset: 0;
 background-image: url('assets/giggle-home-creative-banner-sage-coral.png');
 background-repeat: no-repeat; background-position: right center; background-size: auto 100%;
 opacity: .2; mask-image: linear-gradient(to right, transparent 22%, #000 68%);
 pointer-events: none;
}
.orbit { background: #e4ece178; }
.ticker { padding: 18px 30px; background: #477764; }
.ticker span { color: #f4d49b; }
.amazon-nav { background: #f2d8cbba; }
.product:nth-child(4n+2) .product-image { background: #f0e3d8; }
.product:nth-child(4n+3) .product-image { background: #e3ecdf; }
.badge.rebel { background: #f3d4c4; }
@media(max-width:650px) {
 .ticker { padding: 10px 20px; }
 .hero::before { background-size: auto 58%; background-position: 58% 93%; opacity: .19; mask-image: linear-gradient(to bottom, transparent 34%, #000 68%); }
}

/* A light illustrated ribbon replaces the dark all-caps strip. */
.ticker {
 display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
 gap: 10px 38px; padding: 15px 30px;
 white-space: normal; overflow: visible; letter-spacing: 0; word-spacing: 0;
 background: linear-gradient(100deg, #f5e2d3, #f8ecd9 56%, #f1e0d4);
 border-top: 1px solid #e8d2bd; border-bottom: 1px solid #e8d2bd;
}
.ticker .ticker-item { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: #604637; font: 600 21px/1.2 'Baloo 2', 'DM Sans', sans-serif; }
.ticker-item img { width: 32px; height: 32px; object-fit: contain; }
.ticker-item:nth-child(2) { transform: rotate(-2deg); }
.ticker-item:nth-child(3) { transform: rotate(1.5deg); }
.hero-art .spark { width: 53px; height: 53px; object-fit: contain; opacity: .84; transform: rotate(9deg); }
.hero-art .s2 { width: 34px; height: 34px; transform: rotate(-12deg); }
.hand-note { width: 285px; height: 52px; right: -2px; bottom: -5px; transform: rotate(-5deg); }
.hand-note img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media(max-width:1000px) and (min-width:651px) { .ticker { gap: 14px 26px; } }
@media(max-width:650px) {
 .ticker { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 12px; padding: 17px 20px; }
 .ticker .ticker-item { gap: 7px; font-size: 16px; }
 .ticker-item img { width: 25px; height: 25px; flex-shrink: 0; }
 .hand-note { width: 235px; height: 44px; bottom: -1px; right: 1px; }
 .hero-art .s1 { width: 43px; height: 43px; }
}

/* Compact language choice, usable without changing the active catalog filters. */
.language-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid #d4c6b7; border-radius: 22px; background: #fff9ef; }
.language-switch button { border: 0; border-radius: 18px; background: transparent; padding: 7px 9px; font-size: 11px; font-weight: 700; color: #786858; }
.language-switch button[aria-pressed=true] { color: #fffaf0; background: #477764; }
header nav { gap: 16px; }
html[lang=en] .hero h1 { font-size: clamp(42px,4.2vw,61px); }
@media(min-width:851px) and (max-width:1100px) { .brand-logo { width: 165px; } header nav { gap: 10px; } .shop-nav { padding: 10px 12px; } }
@media(max-width:650px) { .language-switch { grid-column: 1 / -1; justify-self: center; } html[lang=en] .hero h1 { font-size: 46px; } }