/* Phone layout. Desktop styles and brand palettes stay in style.css. */
.location-description { display: none; }
/* Invisible, translated hover decorations must not widen tablet viewports. */
@media (min-width: 761px) and (max-width: 1100px) {
  .brand-logo-visual:not(.logo-active) .logo-fx { display: none; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 96px; }
  .header { gap: 10px; }
  .header > .wordmark { font-size: clamp(22px, 6.4vw, 30px); }
  .header-cta { flex: none; min-height: 44px; font-size: 10px; padding: 12px; gap: 8px; }
  .nav-toggle { flex: none; align-items: center; width: 44px; height: 44px; }
  .mobile-nav {
    top: 100%; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px);
    overflow-y: auto; overscroll-behavior: contain; gap: 8px;
    padding: 16px 5% calc(24px + env(safe-area-inset-bottom));
  }
  .mobile-nav a { display: flex; align-items: center; min-height: 48px; font-size: clamp(23px, 6vw, 29px); }
  .section > *, .contact-section > div, .brand-intro > *, .footer-brands a { min-width: 0; }
  .page-home main > .group-home .group-opening h1 { font-size: clamp(30px, 9.5vw, 64px); }
  .page-home .story-band h2 { font-size: clamp(34px, 10.5vw, 64px); }
  .page-home .about-hero > h2 { font-size: clamp(38px, 11.5vw, 76px); }
  .group-opening .about-paragraph { font-size: 16px; line-height: 1.7; }
  .location-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 14px; }
  .location-row > span { grid-column: 1; padding-left: 0; font-size: 14px; line-height: 1.5; }
  .location-row > a:last-child { grid-column: 1; grid-row: auto; justify-self: start; min-height: 44px; font-size: 11px; }
  .location-row h3 { font-size: 28px; }
  .brand-hero > .brand-logo-visual { width: calc(100% - 24px); margin: 4px 12px 24px; }
  .brand-visual.brand-logo-visual > img { height: clamp(220px, 70vw, 340px); padding: 24px; }
  .brand-character { right: -10px; width: 65px; height: 75px; }
  .brand-visual .photo-caption { flex-wrap: wrap; gap: 8px; line-height: 1.5; }
  .brand-intro > p:not(.walk-in-inline) { font-size: 16px; line-height: 1.7; }
  .brand-intro > .actions, .page-bros-basic .brand-intro > .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .brand-intro .actions .pill, .page-bros-basic .brand-intro .actions .pill {
    min-width: 0; min-height: 48px; font-size: 11px; padding: 14px 12px; gap: 8px; justify-content: center; text-align: center;
  }
  .brand-intro .actions .pill:last-child { grid-column: 1 / -1; }
  .brand-quick-links, .page-bros-basic .brand-quick-links { gap: 8px 18px; font-size: 12px; }
  .brand-quick-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .brand-manifesto .manifesto-copy h2 { overflow-wrap: anywhere; }
  .reel-player { margin-inline: auto; }
  .menu-filters { max-width: 100%; scroll-padding-inline: 4px; }
  /* A full-width count plus its left margin used to widen every store page. */
  .menu-category-count { width: auto; flex-basis: calc(100% - 46px); }
  .menu-item-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; }
  .menu-item h4 { font-size: clamp(21px, 5.6vw, 25px); }
  .menu-price { font-size: 19px; }
  .menu-variants li { max-width: 100%; }
  .contact-section h2 { font-size: clamp(32px, 9.5vw, 48px); overflow-wrap: anywhere; }
  .page-impasto .contact-section h2 { font-size: clamp(28px, 8.5vw, 44px); }
  .contact-section address { font-size: 20px; overflow-wrap: anywhere; }
  .contact-section .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .contact-section .actions .pill { min-width: 0; min-height: 48px; font-size: 12px; }
  .social-links { flex-wrap: wrap; gap: 8px 22px; }
  .social-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .map-placeholder { padding: 20px 14px; min-width: 0; }
  .map-placeholder .pill { max-width: 100%; gap: 12px; min-height: 48px; }
  .mobile-actions, .page-bros-basic .mobile-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    padding: 8px 4% calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-actions a, .page-bros-basic .mobile-actions a { min-height: 44px; padding: 8px 2px; font-size: 11px; }
  /* Bros Basic: same flat bar as the other stores, in its own pink and black. */
  .page-bros-basic .mobile-actions { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); box-shadow: none; font-family: inherit; font-size: 11px; font-weight: bold; }
  .page-bros-basic .mobile-actions a, .page-bros-basic .mobile-actions a:nth-child(2), .page-bros-basic .mobile-actions a:last-child { background: none; color: var(--ink); border-radius: 0; }
  body[class*="page-bros"] .footer, .page-impasto .footer, .page-piacere-toto .footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .closing h2 { font-size: clamp(38px, 11.5vw, 80px); padding-right: 28px; }
  .closing h2 > span { top: 4px; font-size: 32px; }
  .page-impasto .closing h2 { font-size: clamp(30px, 9vw, 64px); }
  .closing > p { font-size: 10px; line-height: 1.6; }
  .footer-brands strong { font-size: clamp(17px, 4.8vw, 22px); overflow-wrap: anywhere; }
  .footer-brands span { font-size: 12px; }
  .footer-bottom { font-size: 10px; line-height: 1.6; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Touch-first brand stickers, coloured location cards and the group story. */
@media (max-width: 760px) {
  .group-home .brand-grid { gap: 22px 16px; padding: 12px 3px 24px; }
  .group-home .store-tile {
    --sticker-turn: -4deg;
    border-radius: 22px 8px 22px 8px; border: 1px solid var(--brand);
    box-shadow: 4px 5px 0 var(--brand); aspect-ratio: .94;
  }
  .group-home .store-tile:nth-child(even) { --sticker-turn: 4deg; top: 16px; border-radius: 8px 22px 8px 22px; }
  .group-home .store-tile::before { opacity: 1; border-radius: inherit; background-size: 22px 22px; }
  .group-home .store-logo {
    inset: 12px; border-radius: 12px; border: 1px solid #111110;
    transform: rotate(var(--sticker-turn)); box-shadow: 3px 4px 0 #111110;
  }
  .group-home .store-logo img { padding: 10px; }
  .group-home .store-tile.bros-basic .store-logo img { padding: 0; }
  .group-home .store-tile:active .store-logo { animation: none; transform: rotate(0) scale(.94); }
  .group-home .store-tile:active { box-shadow: 1px 2px 0 var(--brand); }

  .page-home .locations .section-head { text-align: center; margin-bottom: 32px; }
  .page-home .location-row {
    position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center;
    gap: 12px; padding: 32px 22px; margin-top: 18px; text-align: center;
    background: var(--row-color); color: var(--row-ink); border: 0;
    border-radius: 24px 24px 8px 24px;
  }
  .page-home .location-row:nth-of-type(odd) { border-radius: 24px 24px 24px 8px; }
  .page-home .location-row > a:first-child { justify-content: center; }
  .page-home .location-row h3 { font-family: Garnet, Impact, sans-serif; font-size: clamp(28px, 8vw, 40px); line-height: 1.15; letter-spacing: 0; }
  .page-home .location-piacere-toto h3 { font-family: Fifties, Impact, sans-serif; font-style: italic; font-weight: 600; }
  .page-home .location-impasto h3 { font-family: Climate, Impact, sans-serif; font-weight: 400; font-size: clamp(25px, 7vw, 36px); letter-spacing: .025em; line-height: 1.3; }
  .page-home .location-description { display: block; font-family: Coolvetica, Arial, sans-serif; font-size: 21px; line-height: 1.4; }
  .page-home .location-row > span { opacity: 1; font-size: 13px; line-height: 1.5; }
  .page-home .location-row > a:last-child {
    justify-self: center; justify-content: center; min-height: 48px; min-width: 170px;
    margin-top: 10px; padding: 14px 22px; font-size: 11px;
    color: var(--row-color); background: var(--row-ink); border: 2px solid var(--row-ink); border-radius: 100px;
  }
  .page-home .location-row > a:last-child:active { transform: scale(.97); }
  .page-home .location-row > a:last-child:focus-visible { outline-color: var(--row-ink); }


  /* Put the entire mascot in front of the logo frame, clear of the caption. */
  .brand-logo-visual .brand-character { z-index: 6; width: 86px; height: 96px; right: -8px; bottom: 52px; pointer-events: none; }
  .page-bros .brand-character { color: #f2e30c; --character-fill: #111110; filter: drop-shadow(0 2px 0 #111110); }
  .page-bros-basic .brand-character { color: #111110; --character-fill: #f53695; }
  .page-impasto .brand-character { color: #ff792c; --character-fill: #111110; filter: drop-shadow(0 2px 0 #111110); }

  /* Climate's wide lettering needs positive spacing and a smaller scale. */
  .page-impasto .brand-intro :is(h1, h2),
  .page-impasto .contact-section h2,
  .page-impasto .brand-manifesto h2,
  .page-impasto .reels-copy h2,
  .page-impasto .menu-section h2,
  .page-impasto .closing h2 { letter-spacing: .06em; word-spacing: .08em; line-height: 1.3; font-weight: 400; font-kerning: none; }
  .page-impasto .brand-intro h1 { font-size: clamp(32px, 10vw, 64px); margin-bottom: 24px; overflow-wrap: normal; }
  .page-impasto .brand-intro h2 { font-size: clamp(19px, 5.5vw, 30px); line-height: 1.45; }
  .page-impasto .contact-section h2 { font-size: clamp(28px, 8.4vw, 46px); line-height: 1.35; overflow-wrap: normal; }
  .footer-brands .footer-impasto strong { font-family: Coolvetica, Arial, sans-serif; font-weight: 400; letter-spacing: .04em; line-height: 1.4; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .group-home .store-logo { animation: mobileStickerFloat 5s ease-in-out infinite; }
  .group-home .store-tile:nth-child(2) .store-logo { animation-delay: -1.25s; }
  .group-home .store-tile:nth-child(3) .store-logo { animation-delay: -2.5s; }
  .group-home .store-tile:nth-child(4) .store-logo { animation-delay: -3.75s; }
}
@keyframes mobileStickerFloat {
  0%, 100% { transform: translateY(1px) rotate(var(--sticker-turn)); }
  50% { transform: translateY(-3px) rotate(calc(var(--sticker-turn) * -.5)); }
}

/* "Dal 2012" uses the same card layout on every screen size; phone sizes above. */
.page-home .about-hero { position: relative; }
.page-home .about-hero::before { content: '↗\FE0E'; position: absolute; top: 70px; right: 4%; font: 96px/1 Arial, sans-serif; }
.page-home .about-hero > .eyebrow { line-height: 1.6; }
.page-home .about-hero > h2 { padding-bottom: 40px; border-bottom: 3px solid #111110; }
.page-home .about-origin {
  background: #111110; color: #fff; padding: 38px 36px 20px;
  border-radius: 28px 28px 28px 6px; box-shadow: 12px 12px 0 #e6e6e2;
}
.page-home .about-origin::before { content: '01 / LE ORIGINI'; display: block; font: 700 10px/1.5 Arial, sans-serif; letter-spacing: .12em; margin-bottom: 26px; color: #d6d6ce; }
.page-home .about-hero .about-origin p { color: #fff; }
.page-home .about-origin p:first-child { line-height: 1.45; }
.page-home .about-ideas::before { content: '02 / LE IDEE'; display: block; font: 700 10px/1.5 Arial, sans-serif; letter-spacing: .12em; margin-bottom: 18px; }
.page-home .about-ideas .ideas-process { border-left: 3px solid #111110; padding: 8px 0 8px 18px; }
.page-home .ideas-formats { border-top: 0; padding-top: 0; margin-top: 34px; }
.page-home .ideas-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 30px; }
.page-home .ideas-brands a {
  min-width: 0; padding: 18px 16px; border: 1px solid #111110; border-radius: 6px;
  font-size: 20px; line-height: 1.3; transition: transform .2s, box-shadow .2s;
}
.page-home .ideas-brands a:nth-child(1) { background: #df2536; color: #fff5e8; }
.page-home .ideas-brands a:nth-child(2) { background: #f9e329; }
.page-home .ideas-brands a:nth-child(3) { background: #ff792c; }
.page-home .ideas-brands a:nth-child(4) { background: #f53695; }
.page-home .ideas-brands a span { flex: none; }
@media (hover: hover) {
  .page-home .ideas-brands a:hover { text-decoration: none; transform: translate(-2px, -3px); box-shadow: 4px 5px 0 #111110; }
}
@media (min-width: 761px) {
  .page-home .about-copy { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 7%; align-items: start; }
  .page-home .about-origin p { max-width: none; }
}
@media (max-width: 760px) {
  .page-home .about-hero { padding-top: 35px; padding-bottom: 60px; }
  .page-home .about-hero::before { top: 22px; right: 5%; font-size: 52px; }
  .page-home .about-hero > .eyebrow { padding-right: 58px; max-width: 280px; }
  .page-home .about-hero > h2 { margin-top: 44px; padding-bottom: 28px; font-size: clamp(40px, 12vw, 78px); }
  .page-home .about-copy { gap: 38px; margin-top: 28px; }
  .page-home .about-origin { padding: 26px 22px 14px; margin-right: 18px; box-shadow: 8px 8px 0 #e6e6e2; }
  .page-home .about-origin p:first-child { font-size: 21px; }
  .page-home .about-ideas { padding-left: 18px; }
  .page-home .about-ideas .ideas-lead { font-size: clamp(29px, 8.5vw, 44px); line-height: 1.15; }
  .page-home .ideas-brands { margin: 20px 0 28px; }
  .page-home .ideas-brands a { padding: 14px 10px; font-size: 16px; }
}