/* Mobile-only layout layer. Desktop styles are intentionally untouched. */
@media (max-width: 900px) {
  :root {
    --mobile-page-gutter: clamp(18px, 5vw, 24px);
    --mobile-hero-image-height: clamp(220px, 62vw, 360px);
    --mobile-hero-surface: #fffaf5;
    --mobile-hero-ink: #2b130b;
  }

  html,
  body {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body,
  main,
  section,
  header,
  footer,
  nav,
  article,
  aside,
  form,
  fieldset,
  div {
    min-width: 0;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  :where(h1, h2, h3, h4, p, a, button, label, span) {
    overflow-wrap: anywhere;
  }

  :where(h1, h2, h3, h4) {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  :where(button, a, input, select, textarea) {
    max-width: 100%;
  }

  :where(
    button[aria-label*="Close"],
    button[aria-label*="close"],
    .cookie-story-close,
    .gallery-close,
    .general-enquiry-close
  ) {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Reference-inspired mobile hero shell: image first, copy second. */
  .home-main-hero,
  #cake-view > .cake-hero,
  #breads-view > .bread-hero,
  #breads-view > .rusk-hero,
  #khari-view > .khari-hero,
  #beverages-view > .beverage-hero,
  #butter-view > .cake-hero,
  #cakes-view > .cake-hero,
  #cookies-view > .cake-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: var(--mobile-hero-surface) !important;
  }

  .home-main-hero::after,
  #cake-view > .cake-hero::after,
  #cakes-view > .cake-hero::after,
  #cookies-view > .cake-hero::after {
    display: none !important;
    content: none !important;
  }

  /* Heroes with their own image/slide layer. */
  .home-main-hero-slide,
  #cake-view .cake-hero-slider,
  #cake-view .cake-hero-slide,
  #cakes-view .cake-hero-slide,
  #cookies-view .cookie-hero-slide {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: var(--mobile-hero-image-height) !important;
    min-height: 0 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  .home-main-hero-slide,
  .home-main-hero-slide.home-first-image-load {
    background-size: contain !important;
    background-color: #fff4e7 !important;
  }

  #cake-view .cake-hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .home-main-hero-content,
  #cake-view > .cake-hero > .max-w-container-max,
  #cakes-view > .cake-hero > .cake-hero-content,
  #cookies-view > .cake-hero > .cookie-hero-content {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(var(--mobile-hero-image-height) + 28px) var(--mobile-page-gutter) 30px !important;
    background: transparent !important;
  }

  .home-main-hero-copy,
  #cake-view .cake-hero-content,
  #cakes-view .cake-hero-copy,
  #cookies-view .cookie-hero-content > div {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  .home-main-hero-title,
  #cake-view .cake-hero-content h3,
  #cakes-view .cakes-hero-title,
  #cookies-view .cookie-hero-title {
    display: block !important;
    margin: 0 0 14px !important;
    color: var(--mobile-hero-ink) !important;
    font-size: clamp(1.8rem, 8.6vw, 3rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  .home-main-hero-legacy-title {
    margin: 0 0 10px !important;
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  .home-hero-line {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .home-main-hero-content :where(h1, h2, h3, p, a, div, span, strong) {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  :where(
    .home-main-hero-content,
    .cake-hero-content,
    .cookie-hero-content,
    .bread-hero > div,
    .khari-hero > div,
    .beverage-hero > div,
    .butter-hero-content,
    .rusk-hero-actions
  ) :where(h1, h2, h3, p, a, button, div, span, strong) {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  :where(
    .home-main-hero-copy,
    .home-main-hero-copy > *,
    .cake-hero-content,
    .cake-hero-content > *,
    .cookie-hero-content,
    .cookie-hero-content > *,
    .bread-hero > div,
    .bread-hero > div > div,
    .khari-hero > div,
    .khari-hero > div > div,
    .beverage-hero > div,
    .beverage-hero > div > div,
    .butter-hero-content,
    .butter-hero-copy,
    .rusk-hero-actions,
    .rusk-hero-actions > *
  ) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .home-main-hero-legacy-text,
  #cake-view .cake-hero-copy,
  #cakes-view .cake-hero-copy,
  #cookies-view .cookie-hero-text {
    max-width: none !important;
    margin: 0 0 20px !important;
    color: #5c4b43 !important;
    font-size: 0.96rem !important;
    line-height: 1.58 !important;
    text-shadow: none !important;
  }

  .home-main-hero-highlights {
    display: none !important;
  }

  .home-main-hero-highlight {
    grid-template-columns: 38px 1fr !important;
  }

  .home-main-hero-highlight .material-symbols-outlined {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
  }

  .home-main-hero-cta,
  #cake-view .cake-hero-actions > a,
  #cakes-view .cake-hero-actions > a,
  #cookies-view .cookie-hero-content .flex > a {
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 13px 18px !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 999px !important;
  }

  #cake-view .cake-hero-actions,
  #cakes-view .cake-hero-actions,
  #cookies-view .cookie-hero-content .flex {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
  }

  #cake-view .category-hero-badge,
  #cakes-view .category-hero-badge,
  #cookies-view .category-hero-badge {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    margin: 0 0 14px !important;
    color: #8f1218 !important;
    background: #fff1e7 !important;
    border-color: #eed6c4 !important;
  }

  /* Background-image heroes use a dedicated image band above their copy. */
  #breads-view > .bread-hero,
  #khari-view > .khari-hero,
  #beverages-view > .beverage-hero,
  #butter-view > .cake-hero {
    padding: calc(var(--mobile-hero-image-height) + 28px) var(--mobile-page-gutter) 30px !important;
    background-position: center top !important;
    background-size: 100% var(--mobile-hero-image-height) !important;
    background-repeat: no-repeat !important;
  }

  #breads-view > .bread-hero > div,
  #khari-view > .khari-hero > div,
  #beverages-view > .beverage-hero > div,
  #butter-view > .cake-hero > div {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #breads-view > .bread-hero > div > div,
  #khari-view > .khari-hero > div > div,
  #beverages-view > .beverage-hero > div > div,
  #butter-view .butter-hero-content,
  #butter-view .butter-hero-copy {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #breads-view .category-hero-badge,
  #khari-view .category-hero-badge,
  #beverages-view .category-hero-badge,
  #butter-view .category-hero-badge {
    position: static !important;
    margin: 0 0 14px !important;
    color: #8f1218 !important;
    background: #fff1e7 !important;
    border-color: #eed6c4 !important;
  }

  #breads-view > .bread-hero :where(h1, p, .text-white, .text-white\/80),
  #khari-view > .khari-hero :where(h1, p, .text-primary, .text-primary\/80),
  #beverages-view > .beverage-hero :where(h1, p, .text-primary, .text-primary\/90),
  #butter-view > .cake-hero :where(h1, h2, h3, p) {
    color: var(--mobile-hero-ink) !important;
    text-shadow: none !important;
  }

  #breads-view > .bread-hero h1,
  #khari-view > .khari-hero h1,
  #beverages-view > .beverage-hero h1,
  #butter-view .butter-hero-title {
    margin-bottom: 14px !important;
    font-size: clamp(2.25rem, 11vw, 3.55rem) !important;
    line-height: 1 !important;
  }

  #breads-view > .bread-hero .flex.flex-wrap,
  #khari-view > .khari-hero .flex.flex-wrap,
  #beverages-view > .beverage-hero .flex.flex-wrap,
  #butter-view .butter-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #breads-view > .bread-hero .flex.flex-wrap > a,
  #khari-view > .khari-hero .flex.flex-wrap > a,
  #beverages-view > .beverage-hero .flex.flex-wrap > a,
  #butter-view .butter-hero-actions > a {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .khari-hero .grid.grid-cols-2,
  .butter-hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: none !important;
  }

  /* Poster-led rusk hero: full artwork first, controls below it. */
  #breads-view > .rusk-hero {
    padding: calc(56.25vw + 22px) var(--mobile-page-gutter) 28px !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #1d0b03 !important;
  }

  #breads-view > .rusk-hero > div,
  #breads-view > .rusk-hero > div > div {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #breads-view .rusk-hero-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #breads-view .rusk-hero-cta {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* About hero retains its story, but behaves like a clean mobile editorial card. */
  .about-hero {
    min-height: 0 !important;
    padding: 0 !important;
    background: #fbf4e9 !important;
  }

  .about-legacy-poster {
    width: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .about-legacy-left {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: clamp(290px, 82vw, 390px) !important;
    background-position: center top !important;
  }

  .about-legacy-content {
    width: 100% !important;
    min-height: 0 !important;
    padding: 28px var(--mobile-page-gutter) !important;
    text-align: left !important;
  }

  .about-legacy-title {
    margin-bottom: 12px !important;
    font-size: clamp(2.15rem, 10vw, 3rem) !important;
    line-height: 1 !important;
  }

  .about-legacy-kicker,
  .about-legacy-copy {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .about-legacy-plan {
    grid-template-columns: 1fr !important;
    margin-top: 24px !important;
  }

  .about-legacy-bottom {
    position: relative !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 12px !important;
  }

  .about-legacy-bottom-item {
    min-height: 74px !important;
    padding: 10px !important;
    border: 0 !important;
  }

  /* Compact gallery hero follows the same image-to-copy hierarchy. */
  .gallery-hero {
    min-height: 0 !important;
    padding: clamp(230px, 66vw, 340px) var(--mobile-page-gutter) 32px !important;
    color: var(--mobile-hero-ink) !important;
    text-align: left !important;
    background-image: linear-gradient(180deg, rgba(255,250,245,0) 0%, rgba(255,250,245,.12) 48%, #fffaf5 66%), url('homepage3.png') !important;
    background-position: center top !important;
    background-size: 100% 100%, 100% auto !important;
    background-repeat: no-repeat !important;
    background-color: #fffaf5 !important;
  }

  .gallery-hero h1 {
    margin-top: 8px !important;
    font-size: clamp(2.3rem, 12vw, 3.4rem) !important;
  }

  .gallery-hero p:last-child {
    color: #5c4b43 !important;
  }

  /* Franchise and business artwork already matches the requested poster style. */
  #business-hero,
  section:has(> .hero-gradient) {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  section:has(> .hero-gradient) h1 {
    font-size: clamp(2.4rem, 11vw, 3rem) !important;
    line-height: 1.03 !important;
  }

  section:has(> .hero-gradient) > .relative.z-10 {
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  section:has(> .hero-gradient) .flex.gap-4.md\:gap-8 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 16px !important;
  }

  section:has(> .hero-gradient) .flex.gap-4.md\:gap-8 > div {
    width: 100% !important;
  }

  section:has(> .hero-gradient) button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Full-site responsive safety for common grids, cards, forms and modals. */
  .premium-footer-main,
  .general-enquiry-shell,
  .premium-product-detail,
  .product-detail-shell .premium-product-detail,
  .beverage-detail-grid,
  .custom-cake-grid,
  .business-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.product-card, .brand-card, .business-card, .collab-card, .luxury-card, .surface-card) {
    max-width: 100% !important;
  }

  :where(input, select, textarea) {
    width: 100% !important;
    min-height: 46px;
    font-size: 16px !important;
  }

  table {
    max-width: 100%;
  }

  .overflow-x-auto,
  .table-wrap {
    overscroll-behavior-inline: contain;
  }

  :where(.fixed.inset-0, .general-enquiry-modal, .gallery-lightbox) {
    padding: 12px !important;
  }

  /* Homepage 3D carousel: centered, clipped to the viewport, still truly 3D. */
  #home-view .hero-shell {
    width: 100% !important;
    min-height: 470px !important;
    padding: 24px 0 32px !important;
    overflow: hidden !important;
  }

  #home-view section:has(> div > .hero-shell) > div {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #home-view section:has(> div > .hero-shell) > div > .mb-6 {
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  #home-view .hero-shell > div {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #home-view #hero-stage {
    width: 100% !important;
    min-height: 400px !important;
    margin: 0 0 16px !important;
    overflow: hidden !important;
    perspective: 1100px !important;
    perspective-origin: 50% 46% !important;
  }

  #home-view #hero-slider {
    width: clamp(144px, 40vw, 168px) !important;
    height: 294px !important;
  }

  #home-view #hero-slider .carousel-card-media {
    height: 238px !important;
    border-width: 3px !important;
    border-radius: 16px !important;
  }

  #home-view #hero-slider .product-text-overlay {
    min-height: 42px !important;
    margin-top: 9px !important;
    padding: 0 4px !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  #home-view .floating-panel {
    width: min(74%, 270px) !important;
    min-height: 58px !important;
    margin: 0 auto 0 16px !important;
    padding: 8px 10px !important;
    justify-content: space-between !important;
  }

  #home-view .floating-panel button {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  #home-view .floating-panel span:not(.material-symbols-outlined) {
    font-size: 0.66rem !important;
    letter-spacing: 0.09em !important;
  }

  :root {
    --ring-depth: clamp(245px, 70vw, 285px) !important;
  }
}

@media (max-width: 520px) {
  :root {
    --mobile-hero-image-height: clamp(196px, 60vw, 280px);
  }

  .reference-utility-bar {
    display: none !important;
  }

  body > nav,
  body > nav > div,
  body.reference-header-enabled > nav,
  body.reference-header-enabled > nav > div {
    min-height: 64px !important;
  }

  body.reference-header-enabled .mobile-menu-panel {
    top: 66px !important;
  }

  body.reference-header-enabled .header-logo-button {
    height: 64px !important;
    min-height: 64px !important;
  }

  body.reference-header-enabled .nav-logo-circle {
    width: 70px !important;
    height: 54px !important;
  }

  .about-legacy-bottom {
    grid-template-columns: 1fr !important;
  }

  .about-legacy-copy {
    font-size: 0.9rem !important;
    line-height: 1.58 !important;
  }

  #home-view #hero-stage {
    min-height: 380px !important;
  }

  #home-view #hero-slider {
    width: clamp(136px, 39vw, 152px) !important;
    height: 280px !important;
  }

  #home-view #hero-slider .carousel-card-media {
    height: 226px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-main-hero-slide,
  .cake-hero-slide,
  .cookie-hero-slide,
  #home-view #hero-slider {
    transition-duration: 0.01ms !important;
  }
}