/* Desktop preview overrides. Mobile retains its current stacked layout. */
@media (min-width: 761px) {
  .page-home .nav, .page-our-treats .nav, .page-gallery .nav, .page-events .nav { width: 100%; max-width: none !important; padding-inline: clamp(24px, 4vw, 72px) !important; }

  /* Home artwork scales proportionally to the viewport, never stretched. */
  .page-home .hero {
    width: 100% !important; max-width: none !important; height: auto !important;
    min-height: 0 !important; aspect-ratio: 1024 / 447; margin: 0 !important;
    padding: 0 !important; background-size: 100% 100% !important; border-radius: 0 !important;
  }
  .page-home .feature-band {
    width: 100% !important; max-width: none !important; height: auto !important;
    min-height: 0 !important; aspect-ratio: 1024 / 187; margin: 0 !important;
    padding-inline: 4vw !important; background-size: 100% 100% !important;
  }
  .page-home .treats-section {
    width: 100% !important; max-width: none !important; margin: 0 !important;
    padding: 0 clamp(28px, 4vw, 72px) 34px !important; background: #fff !important;
  }
  .page-home .treats-section .reference-treats-heading {
    width: calc(100% + 2 * clamp(28px, 4vw, 72px)) !important;
    margin: 0 calc(-1 * clamp(28px, 4vw, 72px)) 18px !important;
    padding: 0 !important; height: auto !important; aspect-ratio: 1024 / 110 !important;
    position: relative !important; display: grid !important; place-content: center !important;
    overflow: hidden !important; visibility: visible !important; line-height: normal !important;
    background: url('brand/reference-treats-heading.webp') center / 100% 100% no-repeat !important;
  }
  .page-home .treats-section .reference-treats-heading::before {
    content: ''; position: absolute; z-index: 1; inset: 0 25% 0 25%;
    background-color: #fbf7ff;
    background-image: linear-gradient(90deg, rgba(235,221,248,.45) 50%, transparent 50%),
      linear-gradient(rgba(235,221,248,.45) 50%, transparent 50%);
    background-size: clamp(24px, 3.2vw, 64px) clamp(24px, 3.2vw, 64px); pointer-events: none;
  }
  .page-home .reference-treats-heading h2,
  .page-home .reference-treats-heading p,
  .page-home .reference-treats-heading .heading-heart,
  .page-home .reference-treats-heading .heading-squiggle { position: relative; z-index: 2; }
  .page-home .reference-treats-heading h2 {
    margin: 0 !important; color: #552279; text-align: center;
    font: 700 clamp(1.7rem, 3.1vw, 3.5rem)/1.05 'Comic Sans MS','Segoe Print',cursive !important;
    letter-spacing: .01em; transform: rotate(-1.3deg);
  }
  .page-home .reference-treats-heading p {
    margin: .35em 0 0 !important; color: #604b73; text-align: center;
    font-size: clamp(.72rem, 1.05vw, 1.06rem); line-height: 1.25;
  }
  .page-home .reference-treats-heading .heading-heart { position: absolute; top: 25%; color: #552279; font-size: clamp(14px, 1.8vw, 24px); }
  .page-home .reference-treats-heading .heading-heart-left { left: 28%; }
  .page-home .reference-treats-heading .heading-heart-right { right: 28%; }
  .page-home .reference-treats-heading .heading-squiggle { position: absolute; top: 31%; color: #552279; font-size: clamp(20px, 2.5vw, 35px); line-height: 1; }
  .page-home .reference-treats-heading .heading-squiggle-left { left: 22%; }
  .page-home .reference-treats-heading .heading-squiggle-right { right: 22%; }
  .page-home .treats-section .category-gallery {
    width: 100% !important; max-width: none !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: clamp(14px, 1.5vw, 28px) !important; margin: 0 auto !important;
  }
  .page-home .about-section {
    width: 100% !important; max-width: none !important; margin: 0 !important;
    height: auto !important; min-height: 0 !important; aspect-ratio: 1024 / 313 !important;
    position: relative !important; display: block !important; overflow: hidden !important; padding: 0 !important;
    background-color: #fffafc !important;
    background-image: url('brand/reference-family-textless.webp'), url('brand/reference-family-layout.webp') !important;
    background-size: 52% 100%, 100% 100% !important;
    background-position: left center, right center !important; background-repeat: no-repeat !important;
  }
  .page-home .about-section > .reference-family-copy {
    display: block !important; visibility: visible !important; position: absolute !important;
    left: 8% !important; top: 12% !important; width: 32% !important; z-index: 4 !important;
  }
  .page-home .reference-family-copy .eyebrow {
    color: #552279 !important; font: 700 clamp(1.25rem, 2.5vw, 2.6rem)/1.04 'Comic Sans MS','Segoe Print',cursive !important;
    letter-spacing: 0 !important; text-transform: none !important; transform: rotate(-3deg); margin-bottom: .55em;
  }
  .page-home .reference-family-copy p {
    max-width: 100% !important; margin: 0 !important; color: #604b73 !important;
    font-size: clamp(.72rem, 1.02vw, 1.02rem) !important; line-height: 1.42 !important;
  }
  .page-home .reference-family-copy .about-story-button {
    display: inline-flex; gap: 10px; align-items: center; margin-top: .7em; padding: .55em 1.5em;
    border-radius: 999px; background: #6417a5; color: #fff; text-decoration: none;
    font-weight: 800; font-size: clamp(.72rem, .95vw, .96rem);
  }
  .page-home .about-section .about-story-link { display: none !important; }
  .page-home .about-section > img.about-juliana {
    display: block !important; visibility: visible !important; position: absolute !important;
    left: 57% !important; top: 21% !important; width: 26% !important; height: 58% !important;
    max-width: none !important; object-fit: cover !important; object-position: center 34% !important;
    transform: rotate(-3deg) !important; z-index: 3 !important;
  }
  .page-home .about-section > img.about-bear { display: none !important; }

  /* Treats products/cart can use the page width; request forms remain centered. */
  .page-our-treats #shop, .page-our-treats .treats-page-categories,
  .page-our-treats .treats-cake-samples, .page-our-treats .treats-category-note {
    width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    padding-left: clamp(28px, 4vw, 72px) !important; padding-right: clamp(28px, 4vw, 72px) !important;
  }
  .page-our-treats #shop .grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .page-our-treats .treats-page-categories .category-gallery { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .page-our-treats .custom-request-card, .page-gallery .custom-request-card {
    width: min(900px, calc(100% - 48px)) !important; max-width: 900px !important;
    margin: 34px auto 26px !important; border-radius: 26px !important;
  }
  .page-gallery .gallery-page-content { width: 100% !important; max-width: none !important; padding-inline: clamp(28px, 4vw, 72px) !important; }

  /* Event page: full canvas and three event cards across on desktop. */
  .page-events .events-main { width: 100% !important; max-width: none !important; padding: 34px clamp(28px, 4vw, 72px) 60px !important; }
  .page-events .events-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: clamp(14px, 1.6vw, 26px) !important; }
  .page-events .event-card img { height: clamp(180px, 17vw, 300px) !important; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .page-events .events-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 760px) {
  .page-home .treats-section .reference-treats-heading { visibility: visible !important; height: auto !important; aspect-ratio: 1024 / 110 !important; display: grid !important; place-content: center !important; position: relative !important; overflow: hidden !important; background: url('brand/reference-treats-heading.webp') center / 100% 100% no-repeat !important; }
  .page-home .treats-section .reference-treats-heading img { display: none !important; }
  .page-home .treats-section .reference-treats-heading::before { content:''; position:absolute; inset:0 22%; background-color:#fbf7ff; background-image:linear-gradient(90deg,rgba(235,221,248,.45) 50%,transparent 50%),linear-gradient(rgba(235,221,248,.45) 50%,transparent 50%); background-size:clamp(16px,4.5vw,32px) clamp(16px,4.5vw,32px); }
  .page-home .reference-treats-heading h2 { position:relative; z-index:2; margin:0!important; color:#552279; font:700 clamp(1.15rem,5vw,2rem)/1.08 'Comic Sans MS','Segoe Print',cursive!important; text-align:center; transform:rotate(-1deg); }
  .page-home .reference-treats-heading p { position:relative; z-index:2; margin:.25em 0 0!important; color:#604b73; font-size:clamp(.58rem,2.3vw,.86rem); line-height:1.2; text-align:center; }
  .page-home .reference-treats-heading .heading-heart,.page-home .reference-treats-heading .heading-squiggle { display:none!important; }
  .page-home .about-section .reference-family-copy { display:block!important; visibility:visible!important; }
  .page-home .about-section:before { background:url('brand/reference-family-textless.webp') center/100% 100% no-repeat!important; }
  .page-home .about-section .reference-family-copy { position:absolute!important; left:8%!important; top:4vw!important; width:54%!important; z-index:5!important; }
  .page-home .reference-family-copy .eyebrow { color:#552279!important; font:700 4.5vw/1.05 'Comic Sans MS','Segoe Print',cursive!important; text-transform:none!important; letter-spacing:0!important; transform:rotate(-2deg); margin-bottom:2vw!important; }
  .page-home .reference-family-copy p { color:#604b73!important; font-size:2.8vw!important; line-height:1.32!important; margin:0!important; }
  .page-home .reference-family-copy .about-story-button { display:inline-flex!important; margin-top:2vw!important; padding:1.6vw 5vw!important; border-radius:999px!important; background:#6417a5!important; color:white!important; text-decoration:none!important; font-size:2.8vw!important; font-weight:800!important; }
}
/* Mobile-only: preserve the established image-led design. */
@media(max-width:760px) {
  .page-home .about-section>.reference-family-copy { display:none!important;visibility:hidden!important; }
  .page-home .about-section {
    background:none!important;height:123.2vw!important;aspect-ratio:auto!important;
  }
  .page-home .about-section::before {
    content:''!important;display:block!important;position:absolute!important;left:0!important;top:0!important;
    width:100%!important;height:61.13vw!important;
    background:url('brand/reference-family-left.webp') center/100% 100% no-repeat!important;
  }
  .page-home .about-section::after {
    content:''!important;display:block!important;position:absolute!important;left:0!important;top:61.13vw!important;
    width:100%!important;height:62.07vw!important;
    background:url('brand/reference-family-layout.webp') right center/200% 100% no-repeat!important;
  }
  .page-home .reference-cta>.footer-banner-copy,
  .page-home .reference-cta>.cta { display:none!important; }
  .page-home footer.footer .footer-copyright { display:block!important;visibility:visible!important; }
}
