/*
 * Marutama phrase-aware readability layer — v3.3.2
 *
 * This layer only adds safe Japanese phrase breaks, softens decorative
 * heading breaks, and reduces the known oversized page-level headings. It
 * deliberately leaves card typography, paragraph sizes, margins, grids and
 * direct-child structure to each page's original design.
 */

body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content) {
  min-width: 0;
}

/* Added by japanese-readability.js after BudouX has inserted invisible phrase
   opportunities into the element's existing text nodes. Normal wrapping
   keeps every parsed phrase intact; explicit semantic breaks are added in
   JavaScript for the few phrases wider than a narrow card. */
body:is(.mtw-fixed-page-readable, .mtw-home, .mtw-android-fixed-home)
  .mtw-ja-phrase-ready,
.mtw-ja-phrase-ready {
  min-width: 0;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
  hyphens: none;
}

/* Product-detail hero titles can exceed the text grid at desktop widths.
   Preserve phrase protection elsewhere, but let only product H1s wrap. */
body.mtw-fixed-page-readable
  .entry-content
  .mtv-product-detail
  .mtv-hero__copy > h1 {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}


/* Decorative breaks in the plugin's known large-heading systems become soft
   opportunities in JavaScript. Unrelated/current-and-future page headings keep
   any meaningful authored <br> unless their own design opts into this list. */
body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content)
  :where(
    .mtn-pagehead h1,
    .mmx h1,
    .mtn-section h2,
    .mtn-feature h2,
    .mtn-store-mini h2,
    .mselect h1,
    .mselect h2,
    .mtw-frozen-guide h2,
    .mtw-inner-contact h2
  ) br {
  display: none !important;
}

body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content)
  :where(.mtw-keep-breaks, [data-mtw-keep-breaks]) br {
  display: inline !important;
}

body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content)
  br:is(.mtw-keep-breaks, [data-mtw-keep-breaks]) {
  display: inline !important;
}

/* Only the page-heading systems known to be oversized are reduced. Card h2/h3
   outside these existing large-heading systems keep their original sizes. */
body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content)
  :is(.mtn-pagehead h1, .mmx h1, .mselect h1),
body.mtw-fixed-page-readable .mtw-inner-hero h1 {
  max-width: 100%;
  font-size: clamp(36px, 3.5vw, 44px) !important;
  line-height: 1.3 !important;
  text-wrap: pretty !important;
}

body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content)
  :is(
    .mtn-section h2,
    .mtn-feature h2,
    .mtn-store-mini h2,
    .mselect h2,
    .mtw-frozen-guide h2
  ) {
  max-width: 100%;
  font-size: clamp(28px, 3.15vw, 40px) !important;
  line-height: 1.38 !important;
  text-wrap: balance !important;
}

/* The custom homepage was excluded from v3.3.1. Its authored heading breaks
   are now soft and its major section titles use a phone-safe scale. */
body.mtw-home #mtw-main
  :where(
    .marutama-select-copy h2,
    .section-heading h2,
    .liver-copy h2,
    .discovery-copy h2,
    .services h2,
    .access h2,
    .news h2,
    .shipping h2,
    .mtw-frozen-guide h2
  ) br {
  display: none !important;
}

body.mtw-home #mtw-main
  :is(
    .marutama-select-copy h2,
    .section-heading h2,
    .liver-copy h2,
    .discovery-copy h2,
    .services h2,
    .access h2,
    .news h2,
    .shipping h2,
    .mtw-frozen-guide h2
  ) {
  max-width: 100%;
  font-size: clamp(34px, 3.8vw, 56px) !important;
  line-height: 1.34 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance !important;
}

body.mtw-home #mtw-main
  :where(.mtw-keep-breaks, [data-mtw-keep-breaks]) br {
  display: inline !important;
}

body.mtw-home #mtw-main
  br:is(.mtw-keep-breaks, [data-mtw-keep-breaks]) {
  display: inline !important;
}

/* Android's native fixed-page front uses a different body/root contract from
   the full homepage. Cover both legacy #mmw-root and current .mmfp markup. */
body.mtw-android-fixed-home #mmw-root
  :where(
    .mmw-heading h2,
    h2.mmw-heading,
    h2.mmw-title,
    .mmw-liver-copy h2,
    .mmw-discovery-copy h2,
    .mmw-access-copy h2,
    .mmw-news-head h2,
    .mmw-shipping h2
  ) br,
body.mtw-android-fixed-home .mmfp
  :where(
    .mmfp-hero h1,
    .mmfp-heading,
    .mmfp-feature h2,
    .mmfp-story h2,
    .mmfp-access h2,
    .mmfp-online h2
  ) br {
  display: none !important;
}

body.mtw-android-fixed-home :is(#mmw-root, .mmfp)
  :where(.mtw-keep-breaks, [data-mtw-keep-breaks]) br,
body.mtw-android-fixed-home :is(#mmw-root, .mmfp)
  br:is(.mtw-keep-breaks, [data-mtw-keep-breaks]) {
  display: inline !important;
}

@media (max-width: 720px) {
  body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content)
    :is(.mtn-pagehead h1, .mmx h1, .mselect h1),
  body.mtw-fixed-page-readable .mtw-inner-hero h1 {
    font-size: clamp(30px, 8.6vw, 36px) !important;
    line-height: 1.34 !important;
    text-wrap: balance !important;
  }

  body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content)
    :is(
      .mtn-section h2,
      .mtn-feature h2,
      .mtn-store-mini h2,
      .mselect h2,
      .mtw-frozen-guide h2
    ) {
    font-size: clamp(26px, 7.45vw, 31px) !important;
    line-height: 1.42 !important;
  }

  body.mtw-home #mtw-main
    :is(
      .marutama-select-copy h2,
      .section-heading h2,
      .liver-copy h2,
      .discovery-copy h2,
      .services h2,
      .access h2,
      .news h2,
      .shipping h2,
      .mtw-frozen-guide h2
    ) {
    font-size: clamp(28px, 7.6vw, 32px) !important;
    line-height: 1.4 !important;
    letter-spacing: -.02em !important;
  }

  body.mtw-android-fixed-home #mmw-root
    :is(
      .mmw-heading h2,
      h2.mmw-heading,
      h2.mmw-title,
      .mmw-liver-copy h2,
      .mmw-discovery-copy h2,
      .mmw-access-copy h2,
      .mmw-news-head h2,
      .mmw-shipping h2
    ),
  body.mtw-android-fixed-home .mmfp
    :is(
      .mmfp-heading,
      .mmfp-feature h2,
      .mmfp-story h2,
      .mmfp-access h2,
      .mmfp-online h2
    ) {
    max-width: 100%;
    font-size: clamp(28px, 7.6vw, 32px) !important;
    line-height: 1.4 !important;
    letter-spacing: -.02em !important;
    text-wrap: balance !important;
  }

  body.mtw-android-fixed-home .mmfp .mmfp-hero h1 {
    max-width: 100%;
    font-size: clamp(30px, 8.6vw, 36px) !important;
    line-height: 1.34 !important;
    text-wrap: balance !important;
  }
}

/* v3.3.8 — The cooling-ice hero contains only absolutely positioned facts.
   Give its phone presentation an explicit height so Android/iPhone browsers
   cannot collapse the visual when aspect-ratio sizing is unavailable or
   overridden by cached theme CSS. */
@media (max-width: 760px) {
  body.mtw-fixed-page-readable .mtv-ice-hero .mtv-ice-visual {
    display: block !important;
    width: 100% !important;
    min-height: 390px !important;
    height: clamp(390px, 112vw, 440px) !important;
    aspect-ratio: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.mtw-fixed-page-readable .mtv-ice-hero .mtv-ice-numbers {
    top: 24px !important;
    right: 7% !important;
    bottom: 58px !important;
    left: 7% !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 9px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.mtw-fixed-page-readable .mtv-ice-hero .mtv-ice-number {
    display: grid !important;
    align-content: center;
    min-height: 0;
    padding: 11px 15px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.mtw-fixed-page-readable .mtv-ice-hero .mtv-ice-number strong {
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1.05 !important;
  }

  body.mtw-fixed-page-readable .mtv-ice-hero .mtv-ice-number span {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

.mtw-emergency-break {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* v3.4.0 — Keep registered names and long service terms intact on narrow
   phones. Natural break opportunities are inserted by japanese-readability.js. */
@media (max-width: 620px) {
  .mtw-brand-heading {
    font-size: clamp(22px, 6.6vw, 25px) !important;
    letter-spacing: -.04em !important;
  }

  .mtn-phone-number {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: clamp(28px, 9.3vw, 32px) !important;
    letter-spacing: -.03em !important;
  }

  body.marutama-page-beer-server h1.mtw-long-service-heading {
    font-size: clamp(29px, 8.8vw, 35px) !important;
    letter-spacing: -.04em !important;
  }

  body.marutama-page-beer-server h2.mtw-long-service-heading {
    font-size: clamp(23px, 7vw, 28px) !important;
    letter-spacing: -.035em !important;
  }
}

@media (max-width: 360px) {
  .mtw-recruitment-cta {
    padding-inline: 16px !important;
  }

  body.mtw-fixed-page-readable .mselect h1 {
    font-size: 28px !important;
    letter-spacing: -.04em !important;
  }

  body.mtw-fixed-page-readable .mselect .mselect__statement {
    padding-inline: 20px !important;
  }
}

/* Keep the registered English brand intact even inside narrow inline emphasis. */
.mtw-brand-token {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Keep compact business-hour ranges intact inside narrow mobile cards. */
@media (max-width: 620px) {
  .mtw-time-token {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: clamp(14px, 4.9vw, 16px) !important;
    letter-spacing: -.02em !important;
  }
}


/* v3.4.1: Android-only native phrase wrapping; no full-page DOM mutation. */
html.mtw-device-android body.mtw-home #mtw-main :is(h1, h2, h3),
html.mtw-device-android body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content) :is(h1, h2, h3),
html.mtw-device-android body.mtw-fixed-page-readable .mtw-inner-hero h1,
html.mtw-device-android body.mtw-android-fixed-home :is(#mmw-root, .mmfp) :is(h1, h2, h3) {
  min-width: 0;
  max-width: 100%;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  hyphens: none;
}

@supports (word-break: auto-phrase) {
  html.mtw-device-android body.mtw-home #mtw-main :is(h1, h2, h3),
  html.mtw-device-android body.mtw-fixed-page-readable :is(.entry-content, .mtw-entry-content) :is(h1, h2, h3),
  html.mtw-device-android body.mtw-fixed-page-readable .mtw-inner-hero h1,
  html.mtw-device-android body.mtw-android-fixed-home :is(#mmw-root, .mmfp) :is(h1, h2, h3) {
    word-break: auto-phrase;
  }
}

/* Keep registered names intact without applying keep-all to general copy. */
.mtw-nav-select,
.mtw-product-dropdown a[href$="/select/"] strong,
.mtw-mobile-submenu a[href$="/select/"] strong,
.mtw-mobile-select .mtw-mobile-menu-copy strong,
body.mtw-home .market-ticker span,
body.mtw-home .marutama-select-copy > .mtw-eyebrow,
body.mtw-home .marutama-select-statement small,
body.mtw-fixed-page-readable .mselect__brand,
body.mtw-fixed-page-readable .mselect__statement > span {
  white-space: nowrap;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

@media (max-width: 620px) {
  html.mtw-device-android #mtw-recruitment-cta-home,
  html.mtw-device-android #mtw-recruitment-cta-select {
    font-size: clamp(22px, 6.6vw, 25px) !important;
    letter-spacing: -.04em !important;
  }

  html.mtw-device-android body.marutama-page-beer-server .mbeer__hero h1 {
    font-size: clamp(29px, 8.8vw, 35px) !important;
    letter-spacing: -.04em !important;
  }

  html.mtw-device-android body.marutama-page-beer-server main.mbeer > section:nth-last-of-type(2) h2 {
    font-size: clamp(23px, 7vw, 28px) !important;
    letter-spacing: -.035em !important;
  }

  html.mtw-device-android .mtw-footer-store dl > div:first-child dd {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: clamp(14px, 4.9vw, 16px) !important;
    letter-spacing: -.02em !important;
  }
}