/* Presentation polish. Load after collection.css.
   Product windows and image colours are unchanged; motion lives in motion.css.
   Pink menu photographs are required before enabling this layer in the menu. */
:root { --photo-ground: var(--cream); }

/* Keep the menu itself pink. Photographic margins inherit the same surface. */
.menu-layout {
  --photo-ground: #ffbdcf;
  max-width: 1280px;
  margin-inline: auto;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 22px;
}
.menu-layout .menu-section {
  background: var(--photo-ground);
  padding: clamp(18px, 2vw, 25px);
  border-color: rgb(255 246 228 / .68);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 7px 16px -15px rgb(104 48 64 / .22);
}
.studio-photo,
.catalogue-photo,
.studio-cone,
.single-grid .product-photo {
  background: var(--photo-ground, var(--cream));
}
.studio-photo::after {
  background:
    linear-gradient(90deg, var(--photo-ground), transparent 1.2%, transparent 98.8%, var(--photo-ground)),
    linear-gradient(0deg, var(--photo-ground), transparent 7%, transparent 96.5%, var(--photo-ground));
}
.catalogue-photo::after {
  background:
    linear-gradient(90deg, var(--photo-ground), transparent 2%, transparent 98%, var(--photo-ground)),
    linear-gradient(0deg, var(--photo-ground), transparent 2%, transparent 98%, var(--photo-ground));
}

/* Match the actual pink paper in each approved photograph. The old common
   #ffbdcf mount was more saturated than the single/sundae paper, accentuating
   the rectangle and shadow boundaries. These are measured RGB samples, not
   filters applied to the food. Food colours remain unchanged. */
.menu-layout #single { --photo-ground: #fbc3d2; --photo-floor-rgb: 251 195 210; --floor-fade: 12%; }
.menu-layout #sundaes { --photo-ground: #fcc2d1; --photo-floor-rgb: 252 194 209; --floor-fade: 15%; }
.menu-layout #shakes { --photo-ground: #fcbecf; --photo-floor-rgb: 252 190 207; --floor-fade: 10%; }
.menu-layout :is(#single, #sundaes, #shakes) .catalogue-photo::after {
  background:
    linear-gradient(90deg, var(--photo-ground), transparent 2.5%, transparent 97.5%, var(--photo-ground)),
    linear-gradient(0deg, var(--photo-ground), rgb(var(--photo-floor-rgb) / .7) 2%, rgb(var(--photo-floor-rgb) / .16) 6%, transparent var(--floor-fade)),
    linear-gradient(180deg, var(--photo-ground), transparent 3%);
}
.natural-cone .studio-photo::after {
  background:
    linear-gradient(90deg, var(--photo-ground), transparent 15%, transparent 85%, var(--photo-ground)),
    linear-gradient(0deg, var(--photo-ground), transparent 6%, transparent 95%, var(--photo-ground));
}

/* Reduce image scale and section spacing, not crop bounds or touch targets. */
.page-heading { padding-block: 18px 22px; }
.page-heading > h1 { font-size: clamp(42px, 4.2vw, 62px); }
.page-heading > .script-note { font-size: 22px; margin-bottom: 16px; }
.menu-mosaic { gap: 16px; }
.menu-sidebar { padding: 15px 10px; }
.menu-sidebar h2 { padding-bottom: 12px; }
.menu-filter-buttons { gap: 4px; }
.menu-sidebar .filter-button,
.menu-sidebar .category-nav a { font-size: 14px; min-height: 44px; padding: 10px; }
.menu-layout .menu-section-heading { margin-bottom: 12px; }
.menu-layout .menu-section-heading h2 { font-size: clamp(28px, 2.7vw, 35px); }
.menu-layout .single-grid .product-photo { max-width: 88px; }
.menu-layout .sundae-grid .product-photo { max-width: 124px; }
.menu-layout .shake-photos .product-photo { max-width: 118px; }
.menu-layout .shake-photos { width: 100%; max-width: 402px; margin-inline: auto; }
.menu-layout .product-card h3 { font-size: 15px; margin-top: 10px; line-height: 1.3; }
.menu-layout .shake-flavours h3,
.menu-layout .drink-list h3 { font-size: clamp(20px, 1.9vw, 25px); margin-top: 0; }
.menu-layout .shake-layout { gap: 22px; }
.menu-layout .range-scroll { width: 100%; max-width: 830px; margin-inline: auto; }
.menu-layout .drink-layout > .studio-photo { width: 100%; max-width: 870px; margin-inline: auto; }
.menu-layout .drink-list { gap: 20px; padding-top: 18px; margin-top: 12px; }
.menu-layout .range-card > p { margin-top: 9px; }
.menu-footnote { margin-top: 20px; padding: 16px 18px; }

/* A quieter homepage keeps the category links in the favourites section. */
.sweet-ribbon { display: none; }
.sweet-signoff { margin-top: 30px; padding-top: 23px; font-size: 23px; }

/* Shallow relief behind a legible solid-green face, not a tint or glow wash. */
.hero-title {
  text-shadow:
    1px 1px 0 rgb(255 246 228 / .95),
    2px 3px 0 rgb(218 155 174 / .6),
    3px 5px 0 rgb(104 48 64 / .2),
    0 11px 18px rgb(104 48 64 / .1);
}
.home-hero { padding-bottom: 14px; }
.hero-product {
  isolation: isolate;
  align-self: end;
  margin-bottom: -6px;
}
.hero-product::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 5%;
  bottom: 2.6%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(107 58 63 / .19), rgb(107 58 63 / .07) 43%, transparent 72%);
  filter: blur(7px);
  pointer-events: none;
}
.hero-product > img { position: relative; z-index: 1; }
.hero-product > figcaption { z-index: 2; }

/* Keep the cream homepage photographs and their real baked contact shadows.
   These fades occupy only measured empty margins, never the food silhouette. */
.cream-section { --photo-ground: var(--cream); background: var(--cream); }
.favourite-art.natural-cone,
.favourite-art.catalogue-art { background: var(--photo-ground); box-shadow: none; }
.favourites .catalogue-photo::after {
  background:
    linear-gradient(90deg, var(--photo-ground), transparent 5%, transparent 95%, var(--photo-ground)),
    linear-gradient(0deg, var(--photo-ground), transparent 9%, transparent 92%, var(--photo-ground));
}

/* HTML width/height attributes must not stretch a narrowed contact image. */
.contact-visual {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 24px auto 0;
  aspect-ratio: 3 / 2;
}
.contact-visual > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .menu-layout { grid-template-columns: 145px minmax(0, 1fr); gap: 18px; }
  .menu-layout .single-grid .product-photo { max-width: 82px; }
  .menu-layout .sundae-grid .product-photo { max-width: 112px; }
}
@media (max-width: 700px) {
  .menu-layout { display: block; }
  .menu-layout .menu-section { padding: 18px 12px; }
  .menu-layout .menu-section-heading h2 { font-size: 29px; }
  .menu-layout .single-grid { gap: 18px 8px; }
  .menu-layout .single-grid .product-photo { max-width: 78px; }
  .menu-layout .single-grid .product-card h3 { font-size: 14px; }
  .menu-layout .range-scroll > .studio-photo { min-width: 640px; }
  .menu-layout .drink-list { gap: 20px 14px; }
  .menu-sidebar { padding: 0; }
  .menu-sidebar .filter-button,
  .menu-sidebar .category-nav a { font-size: 12px; padding: 9px 11px; }
  .page-heading > .script-note { font-size: 20px; }
  .hero-title {
    text-shadow: 1px 2px 0 rgb(218 155 174 / .55), 2px 4px 0 rgb(104 48 64 / .15), 0 8px 12px rgb(104 48 64 / .08);
  }
  .hero-product { align-self: auto; margin-bottom: -4px; }
  .hero-product::before { filter: blur(4px); }
  .contact-visual { max-width: 350px; margin-top: 20px; }
}
@media (forced-colors: active) {
  .hero-title { text-shadow: none; }
  .hero-product::before,
  .studio-photo::after,
  .catalogue-photo::after { display: none; }
  .menu-layout .menu-section { box-shadow: none; }
}
@media print {
  .hero-title { text-shadow: none; }
  .hero-product::before { display: none; }
  .menu-layout { max-width: none; }
  .menu-layout .menu-section { background: white; box-shadow: none; }
  .menu-layout .range-scroll > .studio-photo { min-width: 0; }
}

/* Square-cropped, client-supplied badge. Preserve the approved header size. */
.brand-mark > img {
  position: static;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.drink-artwork {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 20px;
  align-items: center;
}
.labelled-cans { width: 100%; max-width: 320px; margin: auto; }
.labelled-cans::after {
  background:
    linear-gradient(90deg, var(--photo-ground), transparent 8%, transparent 92%, var(--photo-ground)),
    linear-gradient(0deg, var(--photo-ground), transparent 12%, transparent 88%, var(--photo-ground));
}
.supporting-drinks { width: 100%; }
.menu-layout .shake-flavours { gap: 6px; }
@media (min-width: 1101px) {
  #sundaes, #shakes { grid-column: span 1; }
  .menu-layout .menu-section-heading { display: block; }
  .menu-layout .menu-section-heading > span { display: block; margin-top: 6px; }
  .menu-layout .shake-layout { display: block; }
  .menu-layout .shake-flavours {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 12px;
  }
  .menu-layout .shake-flavours h3 { font-size: 17px; }
  .menu-layout .shake-photos .product-photo { max-width: 90px; }
}
@media (max-width: 700px) {
  .drink-artwork { grid-template-columns: 1fr; gap: 6px; }
  .labelled-cans { max-width: 240px; }
  .favourite .button { min-height: 44px; }
}

/* Customer-facing contact details replace the unconnected draft form. */
.visit-panel { min-width: 0; }
.visit-panel > p { font-size: 16px; line-height: 1.6; }
.visit-panel address { font-style: normal; font-size: 19px; line-height: 1.6; margin: 22px 0; }
.visit-panel address > span { display: block; }
.visit-panel > .button { gap: 12px; font-size: 14px; max-width: 100%; text-align: center; }
.visit-email, .allergen-note { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 28px; }
.visit-email > h3 { font-size: 27px; margin-bottom: 15px; }
.contact-email { display: inline-block; max-width: 100%; font-weight: 700; overflow-wrap: anywhere; padding-block: 9px; }
.visit-email > p { font-size: 14px; margin-top: 8px; }
.allergen-note > h3, .menu-footnote > h2 { font: 750 14px/1.5 var(--body); letter-spacing: 0; margin-bottom: 6px; }
.allergen-note > p { font-size: 13px; line-height: 1.7; }
.menu-footnote > p { line-height: 1.7; }
.menu-footnote .image-note { margin-top: 12px; font-size: 11px; }
.footer-bottom > a { min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; max-width: 100%; }
.footer-bottom > span { align-self: center; }
@media (max-width: 700px) {
  .visit-panel address { font-size: 17px; }
  .visit-panel .contact-email { font-size: 14px; }
}

/* Cleanup 13: quieter chrome and a balanced menu after retiring both double categories.
   Keep the approved artwork, crop geometry, colours and motion unchanged. */
.header-inner {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 128px;
}
.site-nav { justify-self: center; }
.nav-toggle { min-width: 44px; min-height: 44px; }
.footer-nav { margin-inline: auto; }
.cream-section { padding-bottom: 48px; }
.faq summary { min-height: 44px; display: list-item; align-content: center; }
html[data-menu-category]:not([data-menu-category="all"]) .menu-mosaic > .menu-section { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .header-inner { grid-template-columns: 104px minmax(0, 1fr) 104px; }
}
@media (max-width: 700px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .brand { grid-column: 1; grid-row: 1; }
  .nav-toggle { grid-column: 2; grid-row: 1; }
  .site-nav { grid-column: 1 / -1; justify-self: stretch; }
  .cream-section { padding-bottom: 32px; }
}