/*
 * Two mobile presentations for the PHP export.
 * The desktop layout and the default mobile layout remain untouched unless
 * ?mobile=carousel or ?mobile=vertical is present.
 */

.brand-directory {
  display: none;
}

.mobile-flyer-gallery {
  display: none;
}

/* 2026-09-11: strengthen the venue-scale message and place the supplied
   4.7-times venue badge as a real image. */
html.mobile-vertical .scale-showcase-copy {
  width: min(710px, calc(100% - 48px));
}

html.mobile-vertical .scale-showcase-copy h1 {
  font-size: clamp(42px, 4.2vw, 60px);
}

html.mobile-vertical .scale-showcase-highlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(140px, 15vw, 178px);
  align-items: center;
  gap: 14px;
  margin: 12px 0 22px;
  padding: 18px 18px 18px 24px;
  overflow: hidden;
  color: #fff;
  background: #ff1f3b;
  border-radius: 12px 3px 12px 3px;
  box-shadow: 0 12px 26px rgb(116 10 28 / .2);
}

html.mobile-vertical .scale-showcase-facts {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  margin: 0;
}

html.mobile-vertical .scale-showcase-facts strong {
  color: #fff;
  font-size: clamp(52px, 6vw, 80px);
  line-height: .95;
  text-shadow: 0 3px 0 rgb(123 9 26 / .3);
}

html.mobile-vertical .scale-showcase-facts b {
  order: -1;
  padding: 8px 12px;
  color: #fff;
  background: #bc001d;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.15;
  box-shadow: 5px 5px 0 rgb(123 9 26 / .28);
}

html.mobile-vertical .scale-showcase-badge {
  display: block;
  width: 100%;
  height: auto;
}

html.mobile-vertical .gift-section-priority {
  scroll-margin-top: 88px;
}

html.mobile-vertical .daily-title-image {
  position: relative;
  overflow: hidden;
  border-radius: 20px 6px 20px 6px;
  box-shadow: 0 18px 42px rgb(83 15 25 / .18);
}

html.mobile-vertical .daily-title-image img {
  display: block;
  width: 100%;
  height: auto;
}

html.mobile-vertical .daily-title-assistive {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 900px) {
  html.mobile-vertical .scale-showcase {
    min-height: clamp(800px, 62vw, 860px);
  }
}

@media (max-width: 899px) {
  html.mobile-vertical .scale-showcase-copy {
    width: auto;
    padding: 28px 20px 30px;
  }

  html.mobile-vertical .scale-showcase-copy h1 {
    font-size: clamp(36px, 10.5vw, 47px);
    line-height: 1.2;
  }

  html.mobile-vertical .scale-showcase-highlight {
    grid-template-columns: minmax(0, 1fr) clamp(88px, 26vw, 106px);
    gap: 5px;
    margin-top: 20px;
    padding: 12px 8px 12px 12px;
  }

  html.mobile-vertical .scale-showcase-facts {
    gap: 9px;
  }

  html.mobile-vertical .scale-showcase-facts strong {
    font-size: clamp(31px, 8.8vw, 40px);
    letter-spacing: -.07em;
    white-space: nowrap;
  }

  html.mobile-vertical .scale-showcase-facts b {
    padding: 6px 7px;
    font-size: clamp(17px, 4.9vw, 20px);
    letter-spacing: -.06em;
    white-space: nowrap;
  }

  html.mobile-vertical .daily-title-image {
    width: calc(100% + 32px);
    margin-inline: -16px;
    border-radius: 12px 3px 12px 3px;
    box-shadow: 0 10px 24px rgb(83 15 25 / .15);
  }
}

.mobile-bargain-stock {
  display: none;
}

html.mobile-vertical .product-card .special-price {
  display: inline;
  padding: 0;
  color: #9f1727;
  background: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", Arial, sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .04em;
  text-shadow: none;
}

@media (min-width: 900px) {
  html.mobile-vertical .hero.hero-approved {
    width: min(1470px, 100%);
    aspect-ratio: 1470 / 1070;
    background: #061a2d;
  }

  html.mobile-vertical .hero-approved-picture,
  html.mobile-vertical .hero-approved-picture img {
    width: 100%;
    height: 100%;
  }

  html.mobile-vertical .hero-approved-picture img {
    object-fit: cover;
    object-position: left top;
  }

  html.mobile-vertical .hero-approved .invitation-form.compact label {
    top: 81.22%;
    height: 4.49%;
  }

  html.mobile-vertical .hero-approved .invitation-form.compact label:nth-of-type(1) {
    left: 29.86%;
    width: 21.98%;
  }

  html.mobile-vertical .hero-approved .invitation-form.compact label:nth-of-type(2) {
    left: 53.06%;
    width: 21.57%;
  }

  html.mobile-vertical .hero-approved .invitation-form.compact label:nth-of-type(3) {
    left: 75.85%;
    width: 22.66%;
  }

  html.mobile-vertical .hero-approved .invitation-form.compact input {
    padding: 6px 14px;
    background: rgb(255 255 255 / .98);
    border: 1px solid #c7b9a3;
    border-radius: 4px;
    font-size: clamp(13px, 1.05vw, 17px);
  }

  html.mobile-vertical .hero-approved .submit-invitation {
    left: 28%;
    top: 85.5%;
    width: 53.9%;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    filter: none;
    opacity: 1;
    transform: none;
  }

  html.mobile-vertical .hero-approved .submit-invitation:hover,
  html.mobile-vertical .hero-approved .submit-invitation:active {
    filter: none;
    transform: none;
  }

  html.mobile-vertical .hero-approved .submit-invitation:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -4px;
  }

  html.mobile-vertical .hero-approved .submit-invitation picture,
  html.mobile-vertical .hero-approved .submit-invitation img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 899px) {
  html.mobile-carousel .hero-approved-picture,
  html.mobile-vertical .hero-approved-picture {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
    background: #061a2d;
  }

  html.mobile-carousel .hero-approved-picture img,
  html.mobile-vertical .hero-approved-picture img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: center top;
  }

  html.mobile-carousel .lineup-carpet-promo > img,
  html.mobile-vertical .lineup-carpet-promo > img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }
}

.mobile-index-menu {
  display: none;
}

@media (max-width: 620px) {
  html.mobile-carousel,
  html.mobile-vertical {
    --ivory: #f7f2e9;
    --paper: #ffffff;
    --ink: #242321;
    --teal: #061a2d;
    --turquoise: #c8a04a;
    --red: #7e1824;
    --yellow: #c8a04a;
    --muted: #6b655d;
    --line: #ded2bf;
    color: var(--ink);
    background: var(--ivory);
  }

  html.mobile-carousel body,
  html.mobile-vertical body {
    padding-top: 0;
    padding-bottom: 76px;
    background: var(--ivory);
  }

  html.mobile-carousel.has-mobile-index body,
  html.mobile-vertical.has-mobile-index body {
    padding-top: 44px;
  }

  html.mobile-carousel main section[id],
  html.mobile-vertical main section[id] {
    scroll-margin-top: 52px;
  }

  html.mobile-carousel .mobile-index-menu,
  html.mobile-vertical .mobile-index-menu {
    position: fixed;
    z-index: 120;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    min-height: 44px;
    padding: 5px 10px;
    background: #0e0e0e;
    border-bottom: 1px solid #343434;
    box-shadow: 0 5px 16px rgb(0 0 0 / .2);
  }

  .mobile-index-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 10px;
    color: #fff;
    background: #111;
    border: 1px solid #777;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
  }

  .mobile-music-toggle {
    /* Temporarily hidden; keep the markup and playback code for possible reuse. */
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 10px;
    color: #fff;
    background: #111;
    border: 1px solid #777;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-music-toggle.is-playing {
    background: #7e1824;
    border-color: #d3a844;
  }

  .mobile-music-toggle-icon {
    display: inline-grid;
    place-items: center;
    width: 14px;
    color: #fff;
    font-size: 12px;
    text-align: center;
  }

  .mobile-index-toggle-icon {
    width: 14px;
    color: #fff;
    font-size: 15px;
    text-align: center;
  }

  .mobile-index-panel {
    position: absolute;
    top: calc(100% - 1px);
    right: 10px;
    width: max-content;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 5px;
    visibility: hidden;
    opacity: 0;
    background: #111;
    border: 1px solid #343434;
    box-shadow: 0 16px 34px rgb(0 0 0 / .38);
    transform: translateY(-8px) scaleY(.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .2s ease, transform .24s ease, visibility 0s linear .24s;
  }

  .mobile-index-menu.is-open .mobile-index-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scaleY(1);
    pointer-events: auto;
    transition-delay: 0s;
  }

  .mobile-index-panel a {
    display: block;
    padding: 14px 12px;
    color: #fff;
    border-bottom: 1px solid #343434;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
  }

  .mobile-index-panel a:last-child {
    border-bottom: 0;
  }

  .mobile-index-panel a.mobile-index-external::after {
    content: "↗";
    margin-left: 8px;
    color: #f1cc71;
    font-family: sans-serif;
    font-size: .85em;
  }

  .mobile-index-panel a:focus-visible,
  .mobile-index-panel a:active {
    padding-left: 17px;
    color: #f1cc71;
    background: #1c1c1c;
    outline: none;
  }

  html.mobile-carousel main,
  html.mobile-vertical main {
    overflow-x: clip;
  }

  html.mobile-carousel .mobile-flyer-gallery,
  html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  html.mobile-carousel .mobile-flyer-gallery img,
  html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    scroll-margin-top: 52px;
  }

  html.mobile-carousel .mobile-flyer-gallery ~ section,
  html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery ~ section,
  html.mobile-carousel .mobile-flyer-gallery ~ footer,
  html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery ~ footer {
    display: none !important;
  }

  html.mobile-carousel .section-shell,
  html.mobile-vertical .section-shell {
    width: calc(100% - 32px);
  }

  html.mobile-carousel .lineup-carpet-promo,
  html.mobile-vertical .lineup-carpet-promo {
    width: calc(100% - 32px);
    margin-right: auto;
    margin-left: auto;
  }

  html.mobile-carousel .lineup-carpet-promo > div,
  html.mobile-vertical .lineup-carpet-promo > div {
    padding: 14px 14px 16px;
  }

  html.mobile-carousel .lineup-carpet-promo p,
  html.mobile-vertical .lineup-carpet-promo p {
    margin-bottom: 6px;
    font-size: 9px;
    line-height: 1.2;
  }

  html.mobile-carousel .lineup-carpet-promo h3,
  html.mobile-vertical .lineup-carpet-promo h3 {
    font-size: 22px;
    line-height: 1.2;
  }

  html.mobile-carousel .lineup-carpet-promo > div > span,
  html.mobile-vertical .lineup-carpet-promo > div > span {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
  }

  html.mobile-carousel .lineup-carpet-promo a,
  html.mobile-vertical .lineup-carpet-promo a {
    margin-top: 10px;
    padding-bottom: 3px;
    font-size: 12px;
    line-height: 1.3;
  }

  html.mobile-carousel .hero.hero-approved,
  html.mobile-vertical .hero.hero-approved {
    background: #061a2d;
  }

  html.mobile-carousel .hero-approved .hero-form-wrap,
  html.mobile-vertical .hero-approved .hero-form-wrap {
    padding: 0 16px 26px;
    background: #fff;
  }

  html.mobile-carousel .hero-approved .invitation-form.compact,
  html.mobile-vertical .hero-approved .invitation-form.compact {
    gap: 12px;
    padding: 18px;
    background: #fffaf1;
    border: 1px solid #c8a04a;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgb(0 0 0 / .18);
  }

  html.mobile-carousel .hero-approved .invitation-form.compact .form-speed,
  html.mobile-vertical .hero-approved .invitation-form.compact .form-speed {
    display: none;
  }

  html.mobile-carousel .hero-approved .invitation-form.compact label,
  html.mobile-vertical .hero-approved .invitation-form.compact label {
    gap: 5px;
    color: #342f2a;
    font-size: 14px;
  }

  html.mobile-carousel .hero-approved .invitation-form.compact input,
  html.mobile-vertical .hero-approved .invitation-form.compact input {
    min-height: 52px;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid #cbbda8;
    border-radius: 8px;
    font-size: 16px;
  }

  html.mobile-carousel .invitation-form input:focus,
  html.mobile-vertical .invitation-form input:focus {
    border-color: #7e1824;
    box-shadow: 0 0 0 3px rgb(126 24 36 / .14);
  }

  html.mobile-carousel .hero-approved .invitation-form.compact input.submit-invitation,
  html.mobile-vertical .hero-approved .invitation-form.compact input.submit-invitation {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    object-fit: contain;
    transform: none;
  }

  html.mobile-carousel .hero-approved .invitation-form.compact input.submit-invitation:hover,
  html.mobile-carousel .hero-approved .invitation-form.compact input.submit-invitation:active,
  html.mobile-vertical .hero-approved .invitation-form.compact input.submit-invitation:hover,
  html.mobile-vertical .hero-approved .invitation-form.compact input.submit-invitation:active {
    background: transparent;
    box-shadow: none;
    filter: none;
    transform: none;
  }

  /* Keep the vertical CTA flat even if a previously exported page still has
     the legacy <button><img></button> wrapper. */
  html.mobile-vertical .hero-approved form.invitation-form.compact > input.submit-invitation,
  html.mobile-vertical .hero-approved form.invitation-form.compact > button.submit-invitation {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  html.mobile-vertical .hero-approved form.invitation-form.compact > button.submit-invitation > picture,
  html.mobile-vertical .hero-approved form.invitation-form.compact > button.submit-invitation img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
  }

  html.mobile-carousel .hero-approved .invitation-form.compact .form-note,
  html.mobile-vertical .hero-approved .invitation-form.compact .form-note {
    display: block;
    margin: 7px 0 0;
    color: #342f2a;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
  }

  html.mobile-carousel .page-index,
  html.mobile-vertical .page-index {
    display: none;
  }

  html.mobile-carousel .page-index::-webkit-scrollbar,
  html.mobile-vertical .page-index::-webkit-scrollbar,
  html.mobile-carousel .variant-rail-track::-webkit-scrollbar,
  html.mobile-vertical .product-index::-webkit-scrollbar,
  html.mobile-carousel .daily-tabs::-webkit-scrollbar,
  html.mobile-vertical .daily-tabs::-webkit-scrollbar {
    display: none;
  }

  html.mobile-carousel .overview,
  html.mobile-vertical .overview {
    display: block;
    width: 100%;
    margin: 0;
    background: #fff;
    box-shadow: none;
  }

  html.mobile-carousel .overview-image,
  html.mobile-vertical .overview-image {
    min-height: 0;
    height: 240px;
  }

  html.mobile-carousel .overview-panel,
  html.mobile-vertical .overview-panel {
    padding: 34px 18px 42px;
  }

  html.mobile-carousel .overview-panel h1,
  html.mobile-vertical .overview-panel h1 {
    margin-bottom: 25px;
    font-size: 30px;
  }

  html.mobile-carousel .overview-facts > div,
  html.mobile-vertical .overview-facts > div {
    grid-template-columns: 28px 72px 1fr;
    gap: 7px;
  }

  html.mobile-carousel .overview-facts strong,
  html.mobile-vertical .overview-facts strong {
    font-size: 15px;
  }

  html.mobile-carousel .venue-scale,
  html.mobile-vertical .venue-scale {
    background: #f2e8d6;
  }

  html.mobile-carousel .venue-scale strong,
  html.mobile-vertical .venue-scale strong,
  html.mobile-carousel .text-link,
  html.mobile-vertical .text-link {
    color: #7e1824;
  }

  html.mobile-carousel .section-heading h2,
  html.mobile-vertical .section-heading h2,
  html.mobile-carousel .gift-intro h2,
  html.mobile-vertical .gift-intro h2 {
    font-size: 30px;
    line-height: 1.35;
  }

  html.mobile-carousel .section-heading > span,
  html.mobile-vertical .section-heading > span {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.8;
  }

  html.mobile-carousel .gift-section,
  html.mobile-vertical .gift-section,
  html.mobile-carousel .brand-section,
  html.mobile-vertical .brand-section {
    color: #fffaf1;
    background: #061a2d;
  }

  html.mobile-carousel .brand-section .section-heading > span,
  html.mobile-vertical .brand-section .section-heading > span,
  html.mobile-carousel .brand-note,
  html.mobile-vertical .brand-note,
  html.mobile-carousel .brand-disclaimer,
  html.mobile-vertical .brand-disclaimer,
  html.mobile-carousel .gift-section .gift-intro > p,
  html.mobile-vertical .gift-section .gift-intro > p,
  html.mobile-carousel .gift-picker > p,
  html.mobile-vertical .gift-picker > p,
  html.mobile-carousel .voices-section .section-heading > span,
  html.mobile-vertical .voices-section .section-heading > span {
    color: #d6dfe6;
  }

  html.mobile-carousel .gift-section,
  html.mobile-vertical .gift-section,
  html.mobile-carousel .brand-section,
  html.mobile-vertical .brand-section,
  html.mobile-carousel .benefit-section,
  html.mobile-vertical .benefit-section,
  html.mobile-carousel .daily-section,
  html.mobile-vertical .daily-section,
  html.mobile-carousel .bargain-section,
  html.mobile-vertical .bargain-section,
  html.mobile-carousel .story-section,
  html.mobile-vertical .story-section,
  html.mobile-carousel .simultaneous-section,
  html.mobile-vertical .simultaneous-section,
  html.mobile-carousel .service-section,
  html.mobile-vertical .service-section,
  html.mobile-carousel .campaign-section,
  html.mobile-vertical .campaign-section,
  html.mobile-carousel .voices-section,
  html.mobile-vertical .voices-section,
  html.mobile-carousel .access-section,
  html.mobile-vertical .access-section,
  html.mobile-carousel .faq-section,
  html.mobile-vertical .faq-section,
  html.mobile-carousel .event-details-section,
  html.mobile-vertical .event-details-section {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  html.mobile-carousel .gift-section .section-shell,
  html.mobile-vertical .gift-section .section-shell {
    display: block;
  }

  html.mobile-carousel .gift-intro,
  html.mobile-vertical .gift-intro {
    margin-bottom: 30px;
    text-align: left;
  }

  html.mobile-carousel .gift-intro > p:first-child,
  html.mobile-vertical .gift-intro > p:first-child,
  html.mobile-carousel .section-heading > p,
  html.mobile-vertical .section-heading > p,
  html.mobile-carousel .eyebrow,
  html.mobile-vertical .eyebrow {
    color: #c8a04a;
  }

  html.mobile-carousel .solid-link,
  html.mobile-vertical .solid-link {
    color: #061a2d;
    background: #f3d487;
    border-radius: 8px;
  }

  html.mobile-carousel .benefit-section,
  html.mobile-vertical .benefit-section,
  html.mobile-carousel .simultaneous-section,
  html.mobile-vertical .simultaneous-section,
  html.mobile-carousel .faq-section,
  html.mobile-vertical .faq-section {
    background: #f1e8da;
  }

  html.mobile-carousel .benefit-count,
  html.mobile-vertical .benefit-count {
    color: #fffaf1;
    background: #7e1824;
    box-shadow: 6px 7px 0 #c8a04a;
  }

  html.mobile-carousel .benefit-title,
  html.mobile-vertical .benefit-title {
    gap: 16px;
  }

  html.mobile-carousel .benefit-story,
  html.mobile-vertical .benefit-story {
    overflow: hidden;
    background: #fff;
    border: 1px solid #ded2bf;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgb(50 31 18 / .08);
  }

  html.mobile-carousel .benefit-story + .benefit-story,
  html.mobile-vertical .benefit-story + .benefit-story {
    margin-top: 18px;
  }

  html.mobile-carousel .benefit-story-head,
  html.mobile-vertical .benefit-story-head {
    grid-template-columns: 1fr;
  }

  html.mobile-carousel .benefit-story-image,
  html.mobile-vertical .benefit-story-image {
    min-height: 190px;
    height: 190px;
  }

  html.mobile-carousel .benefit-story-copy,
  html.mobile-vertical .benefit-story-copy {
    padding: 23px 19px;
  }

  html.mobile-carousel .benefit-story-copy h3,
  html.mobile-vertical .benefit-story-copy h3 {
    font-size: 25px;
  }

  html.mobile-carousel .sale-seal,
  html.mobile-vertical .sale-seal {
    width: 118px;
    color: #fffaf1;
    background: #7e1824;
    border-width: 4px;
    border-color: #c8a04a;
    border-radius: 14px;
    box-shadow: none;
    transform: none;
  }

  html.mobile-carousel .daily-title-row,
  html.mobile-vertical .daily-title-row {
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  html.mobile-carousel .daily-tabs,
  html.mobile-vertical .daily-tabs {
    display: flex;
    gap: 8px;
    margin: 30px -16px 18px;
    padding: 4px 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  html.mobile-carousel .daily-tabs button,
  html.mobile-vertical .daily-tabs button {
    flex: 0 0 84px;
    min-height: 54px;
    scroll-snap-align: start;
  }

  html.mobile-carousel .daily-tabs button[aria-selected="true"],
  html.mobile-vertical .daily-tabs button[aria-selected="true"] {
    background: #7e1824;
    border-color: #7e1824;
  }

  html.mobile-carousel .daily-feature,
  html.mobile-vertical .daily-feature {
    border-radius: 12px;
    box-shadow: 0 10px 26px rgb(33 25 17 / .08);
  }

  html.mobile-carousel .daily-copy,
  html.mobile-vertical .daily-copy {
    padding: 24px 18px;
  }

  html.mobile-carousel .daily-copy h3,
  html.mobile-vertical .daily-copy h3 {
    font-size: 29px;
  }

  html.mobile-carousel .price-row strong,
  html.mobile-vertical .price-row strong,
  html.mobile-carousel .supporting-products strong,
  html.mobile-vertical .supporting-products strong {
    color: #d63b2c;
    font-variant-numeric: tabular-nums;
  }

  html.mobile-carousel .product-price-row strong,
  html.mobile-vertical .product-price-row strong {
    color: #c74435;
    font-variant-numeric: tabular-nums;
  }

  html.mobile-carousel .brand-filters,
  html.mobile-vertical .brand-filters,
  html.mobile-carousel .product-index,
  html.mobile-vertical .product-index {
    display: flex;
    gap: 8px;
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html.mobile-carousel .brand-filters button,
  html.mobile-vertical .brand-filters button,
  html.mobile-carousel .product-index a,
  html.mobile-vertical .product-index a {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  html.mobile-carousel .brand-filters button.selected,
  html.mobile-vertical .brand-filters button.selected {
    color: #061a2d;
    background: #c8a04a;
  }

  html.mobile-carousel .brand-filters button:disabled,
  html.mobile-vertical .brand-filters button:disabled {
    opacity: 1;
    cursor: default;
    pointer-events: none;
  }

  html.mobile-carousel .brand-filters,
  html.mobile-vertical .brand-filters {
    display: none;
  }

  html.mobile-vertical .brand-cloud,
  html.mobile-vertical .brand-more,
  html.mobile-vertical .brand-note {
    display: none;
  }

  html.mobile-vertical .brand-directory {
    position: relative;
    z-index: 2;
    display: block;
    width: calc(100% + 16px);
    margin: 0 -8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 40px rgb(6 26 45 / .16);
    opacity: 1;
    filter: none;
    transform: none;
  }

  html.mobile-vertical .brand-directory img {
    display: block;
    width: 100%;
    height: auto;
  }

  html.mobile-carousel .product-index,
  html.mobile-vertical .product-index {
    top: 58px;
    z-index: 14;
    margin-top: 34px;
    margin-bottom: 44px;
    background: rgb(255 250 241 / .96);
    border-color: #ded2bf;
    border-radius: 0;
  }

  html.mobile-carousel .product-index a:hover,
  html.mobile-vertical .product-index a:hover {
    color: #fffaf1;
    background: #061a2d;
  }

  html.mobile-carousel .product-chapters,
  html.mobile-vertical .product-chapters {
    gap: 36px;
  }

  html.mobile-carousel .product-chapter > header,
  html.mobile-vertical .product-chapter > header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
    padding: 17px 16px;
    color: #fffaf1;
    background: #061a2d;
    border: 0;
    border-left: 5px solid #c8a04a;
  }

  html.mobile-carousel .product-chapter > header p,
  html.mobile-vertical .product-chapter > header p {
    color: #c8a04a;
  }

  html.mobile-carousel .product-chapter > header span,
  html.mobile-vertical .product-chapter > header span {
    color: #e7dcc8;
  }

  html.mobile-carousel .product-card,
  html.mobile-vertical .product-card,
  html.mobile-carousel .simultaneous-grid article,
  html.mobile-vertical .simultaneous-grid article,
  html.mobile-carousel .service-grid article,
  html.mobile-vertical .service-grid article,
  html.mobile-carousel .voice-cards article,
  html.mobile-vertical .voice-cards article,
  html.mobile-carousel .venue-cards article,
  html.mobile-vertical .venue-cards article {
    border-radius: 12px;
    box-shadow: 0 10px 26px rgb(34 24 15 / .09);
  }

  html.mobile-carousel .product-media img,
  html.mobile-vertical .product-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  html.mobile-carousel .simultaneous-section,
  html.mobile-vertical .simultaneous-section,
  html.mobile-carousel .service-section,
  html.mobile-vertical .service-section,
  html.mobile-carousel .campaign-section,
  html.mobile-vertical .campaign-section {
    background: #f7f2e9;
  }

  html.mobile-carousel .voices-section,
  html.mobile-vertical .voices-section {
    color: #fffaf1;
    background: #061a2d;
  }

  html.mobile-carousel .access-section,
  html.mobile-vertical .access-section {
    background: #eee5d6;
  }

  html.mobile-carousel .faq-section .faq,
  html.mobile-vertical .faq-section .faq,
  html.mobile-carousel .event-details,
  html.mobile-vertical .event-details {
    padding: 10px 16px;
    background: #fff;
    border-top-color: #7e1824;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgb(36 26 17 / .08);
  }

  html.mobile-carousel .event-details,
  html.mobile-vertical .event-details {
    margin-top: 42px;
    padding: 24px 18px;
  }

  html.mobile-carousel .event-details dl,
  html.mobile-vertical .event-details dl {
    grid-template-columns: 1fr;
  }

  html.mobile-carousel .event-details dl > div,
  html.mobile-vertical .event-details dl > div {
    grid-template-columns: 86px 1fr;
    gap: 10px;
  }

  html.mobile-carousel .event-details dt,
  html.mobile-vertical .event-details dt {
    color: #7e1824;
  }

  html.mobile-carousel footer,
  html.mobile-vertical footer {
    padding-bottom: 32px;
    color: #fffaf1;
    background: #061a2d;
    border-top: 1px solid #c8a04a;
  }

  html.mobile-carousel .quick-invitation,
  html.mobile-vertical .quick-invitation {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    min-height: 62px;
    color: #fffaf1;
    background: #7e1824;
    border: 1px solid #c8a04a;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgb(56 8 15 / .28);
  }

  html.mobile-carousel .quick-invitation strong,
  html.mobile-vertical .quick-invitation strong {
    color: #fff;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", Arial, sans-serif;
    font-size: 20.4px;
    font-weight: 900;
  }

  html.mobile-carousel .quick-invitation b,
  html.mobile-vertical .quick-invitation b {
    color: #5d111c;
    background: #f3d487;
  }

  html.mobile-carousel .back-to-top,
  html.mobile-vertical .back-to-top {
    right: 12px;
    bottom: 88px;
    background: #061a2d;
    border-color: #c8a04a;
  }

  html.mobile-carousel .music-player,
  html.mobile-vertical .music-player {
    bottom: 88px;
  }

  html.mobile-carousel .music-player:not(.open),
  html.mobile-vertical .music-player:not(.open) {
    display: none;
  }

  /* Horizontal-carousel version */
  html.mobile-carousel .variant-rail {
    position: relative;
    display: block !important;
    width: 100%;
    min-width: 0;
  }

  html.mobile-carousel .variant-rail-controls {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    min-height: 44px;
    margin-bottom: 6px;
  }

  html.mobile-carousel .variant-rail-controls button {
    min-width: 64px;
    min-height: 40px;
    padding: 7px 12px;
    color: #fffaf1;
    background: #7e1824;
    border: 1px solid #c8a04a;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }

  html.mobile-carousel .variant-rail-track {
    display: flex;
    gap: 14px;
    width: auto;
    margin-right: -16px;
    margin-left: -16px;
    padding: 4px 16px 20px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  html.mobile-carousel .variant-rail-track > * {
    flex: 0 0 min(82vw, 330px) !important;
    width: min(82vw, 330px) !important;
    max-width: none !important;
    min-width: 0 !important;
    scroll-snap-align: start;
  }

  html.mobile-carousel .gift-picker .variant-rail-track > button {
    min-height: 360px;
  }

  html.mobile-carousel .gift-picker > p {
    margin-top: 4px;
    color: #e7dcc8;
    text-align: left;
  }

  html.mobile-carousel .brand-cloud {
    padding: 18px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  html.mobile-carousel .brand-cloud .variant-rail-track > .brand-logo {
    flex-basis: 148px !important;
    width: 148px !important;
    min-height: 90px;
    padding: 12px;
    background: #fff;
  }

  html.mobile-carousel .benefit-card-grid {
    padding: 16px 0 8px;
  }

  html.mobile-carousel .benefit-card-grid .variant-rail-track > .benefit-card {
    flex-basis: min(72vw, 270px) !important;
    width: min(72vw, 270px) !important;
    min-height: 126px;
  }

  html.mobile-carousel .daily-products {
    grid-template-columns: 1fr;
  }

  html.mobile-carousel .daily-carousel-window {
    height: 176px;
  }

  html.mobile-carousel .bargain-grid .variant-rail-track > article {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 220px 1fr;
    height: auto;
    min-height: 510px;
  }

  html.mobile-carousel .bargain-grid .bargain-image {
    width: 100%;
    height: 220px;
  }

  html.mobile-carousel .product-card-row.variant-rail {
    padding: 0;
    overflow: visible;
  }

  html.mobile-carousel .product-card-row .variant-rail-track > .product-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }

  html.mobile-carousel .product-card-row .product-media {
    height: auto;
    min-height: 0;
  }

  html.mobile-carousel .simultaneous-grid .variant-rail-track > article,
  html.mobile-carousel .service-grid .variant-rail-track > article {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }

  html.mobile-carousel .simultaneous-grid .variant-rail-track > article > img,
  html.mobile-carousel .service-grid .variant-rail-track > article > img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }

  html.mobile-carousel .voice-cards .variant-rail-track > article {
    min-height: 330px;
  }

  html.mobile-carousel .venue-cards .variant-rail-track > article {
    min-height: 560px;
  }

  html.mobile-carousel .access-guides .variant-rail-track > figure {
    height: 390px;
  }

  /* Long vertical version */
  html.mobile-vertical .variant-disclosure-toggle {
    justify-self: stretch;
    min-height: 46px;
    margin: 0 18px 18px;
    padding: 10px 14px;
    color: #fffaf1;
    background: #7e1824;
    border: 1px solid #c8a04a;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }

  html.mobile-vertical .benefit-editorial {
    overflow: hidden;
    background: #fff;
    border: 1px solid #ded2bf;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgb(50 31 18 / .08);
  }

  html.mobile-vertical .benefit-story,
  html.mobile-vertical .benefit-story + .benefit-story {
    overflow: visible;
    margin-top: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  html.mobile-vertical .benefit-story-head {
    display: none;
  }

  html.mobile-vertical .benefit-card-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 18px;
  }

  html.mobile-vertical .benefit-card-grid .benefit-card {
    display: grid;
    grid-template-columns: auto 34px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 10px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e1d6c5;
    border-radius: 0;
    box-shadow: none;
  }

  html.mobile-vertical .benefit-card-grid .benefit-card:last-child {
    border-bottom: 0;
  }

  html.mobile-vertical .benefit-story:not(:last-child) .benefit-card-grid .benefit-card:last-child {
    border-bottom: 1px solid #e1d6c5;
  }

  html.mobile-vertical .benefit-card-number {
    position: static;
    white-space: nowrap;
  }

  html.mobile-vertical .benefit-card svg {
    position: static;
    width: 28px;
    height: 28px;
    color: #7e1824;
  }

  html.mobile-vertical .benefit-card span {
    font-size: 15px;
    font-weight: 800;
  }

  html.mobile-vertical .benefit-card b {
    color: #7e1824;
  }

  html.mobile-vertical .brand-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 16px 10px;
    border: 1px solid rgb(200 160 74 / .45);
    border-radius: 10px;
  }

  html.mobile-vertical .brand-logo {
    min-height: 76px;
    padding: 9px;
  }

  html.mobile-vertical .daily-products {
    grid-template-columns: 1fr;
  }

  html.mobile-vertical .daily-carousel-window {
    height: 184px;
    margin-top: 18px;
  }

  html.mobile-vertical .daily-product-card-copy > strong {
    font-size: 16px;
    line-height: 1.4;
  }

  html.mobile-vertical .bargain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  html.mobile-vertical .bargain-grid article,
  html.mobile-vertical .bargain-grid article.featured {
    position: relative;
    grid-column: auto;
    display: grid;
    grid-template-columns: 42% 58%;
    grid-template-rows: 1fr;
    height: auto;
    min-height: 272px;
  }

  html.mobile-vertical .bargain-grid .bargain-image {
    height: 100%;
    min-height: 272px;
    padding: 8px;
  }

  html.mobile-vertical .bargain-image .mobile-bargain-stock {
    position: absolute;
    z-index: 4;
    top: 10px;
    right: 90px;
    display: block;
    padding: 5px 7px;
    color: #fff;
    background: #315d7a;
    border-radius: 4px;
    font: 900 10px/1.2 Arial, "Noto Sans JP", sans-serif;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgb(6 26 45 / .16);
  }

  html.mobile-vertical .bargain-grid article > div:last-child {
    gap: 0;
    min-height: 0;
    padding: 13px 13px 12px;
  }

  html.mobile-vertical .bargain-grid article > div:last-child > span:first-child {
    display: none;
  }

  html.mobile-vertical .bargain-grid h3 {
    margin: 0 0 6px;
    overflow: hidden;
    font-family: Arial, "Noto Sans JP", "Yu Gothic", sans-serif;
    font-size: clamp(17px, 4.6vw, 20px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.035em;
    white-space: normal;
  }

  html.mobile-vertical .bargain-grid article > div:last-child > p {
    margin: 0 0 6px;
    color: #57514b;
    font-size: 16px;
    line-height: 1.42;
  }

  html.mobile-vertical .bargain-grid article > div:last-child > small {
    margin: 0;
    color: #716a63;
    font-size: 11px;
    line-height: 1.35;
  }

  html.mobile-vertical .bargain-grid article > div:last-child > small:has(s) {
    display: block;
    width: max-content;
    margin-top: 6px;
    color: #3f3a36;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
  }

  html.mobile-vertical .bargain-grid article > div:last-child > small:has(s)::after {
    display: block;
    content: "▼";
    margin-top: 2px;
    color: #56504a;
    font-size: 9px;
    line-height: 1;
    text-align: center;
  }

  html.mobile-vertical .bargain-grid article > div:last-child > small s {
    color: inherit;
    font-weight: 900;
    text-decoration: none;
  }

  html.mobile-vertical .bargain-grid article > div:last-child > strong {
    margin: 0;
    padding-top: 3px;
    color: #d7192d;
    font-family: Arial, "Noto Sans JP", sans-serif;
    font-size: clamp(25px, 7.3vw, 31px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
    text-decoration: none;
    white-space: nowrap;
  }

  html.mobile-vertical .bargain-grid article > div:last-child > strong small {
    margin-left: 2px;
    color: inherit;
    font-size: 9px;
    font-weight: 900;
  }

  html.mobile-vertical .product-card-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0;
    overflow: visible;
  }

  html.mobile-vertical .product-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  html.mobile-vertical .product-card .product-media,
  html.mobile-vertical .product-card.featured .product-media {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  html.mobile-vertical .product-card-body {
    padding: 17px 18px 19px;
  }

  html.mobile-vertical .product-card h4 {
    margin-right: 0;
    font-size: 22px;
  }

  html.mobile-vertical .product-card p {
    min-height: 0;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.55;
  }

  html.mobile-carousel .product-card .product-price-row > strong,
  html.mobile-vertical .product-card .product-price-row > strong {
    display: inline;
    padding: 0;
    color: #c74435;
    background: transparent;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", Arial, sans-serif;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.045em;
    text-shadow: none;
  }

  /* Match every mobile daily-deal price to the desktop price red. */
  html.mobile-carousel .daily-section .price-row > strong,
  html.mobile-vertical .daily-section .price-row > strong,
  html.mobile-carousel .daily-section .supporting-products strong,
  html.mobile-vertical .daily-section .supporting-products strong,
  html.mobile-carousel .daily-section .daily-product-card-copy > em,
  html.mobile-vertical .daily-section .daily-product-card-copy > em,
  html.mobile-carousel .daily-section .daily-day-thumbs strong,
  html.mobile-vertical .daily-section .daily-day-thumbs strong {
    color: #d63b2c !important;
    -webkit-text-fill-color: #d63b2c;
  }

  html.mobile-carousel .daily-section .price-row > strong small,
  html.mobile-vertical .daily-section .price-row > strong small,
  html.mobile-carousel .daily-section .supporting-products strong small,
  html.mobile-vertical .daily-section .supporting-products strong small,
  html.mobile-carousel .daily-section .daily-product-card-copy > em small,
  html.mobile-vertical .daily-section .daily-product-card-copy > em small,
  html.mobile-carousel .daily-section .daily-day-thumbs strong small,
  html.mobile-vertical .daily-section .daily-day-thumbs strong small {
    color: #d63b2c !important;
    -webkit-text-fill-color: #d63b2c;
  }

  html.mobile-vertical .simultaneous-grid,
  html.mobile-vertical .service-grid,
  html.mobile-vertical .voice-cards,
  html.mobile-vertical .venue-cards,
  html.mobile-vertical .access-guides {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  html.mobile-vertical .simultaneous-grid article,
  html.mobile-vertical .simultaneous-grid article:nth-child(3),
  html.mobile-vertical .simultaneous-grid article:nth-child(4) {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  html.mobile-vertical .simultaneous-grid article > img,
  html.mobile-vertical .service-grid article > img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }

  html.mobile-vertical .service-grid article {
    grid-template-rows: auto auto;
    min-height: 0;
  }

  html.mobile-vertical .simultaneous-grid article > div,
  html.mobile-vertical .service-grid article > div,
  html.mobile-vertical .service-grid .repair-card > div {
    padding: 18px 18px 20px;
  }

  html.mobile-vertical .simultaneous-grid h3,
  html.mobile-vertical .service-grid h3,
  html.mobile-vertical .service-grid .repair-card h3 {
    margin-top: 9px;
    margin-bottom: 8px;
    font-size: 23px;
    line-height: 1.35;
  }

  html.mobile-vertical .voice-cards article {
    min-height: 0;
  }

  html.mobile-vertical .venue-cards article {
    min-height: 0;
  }

  html.mobile-vertical .access-guides figure {
    height: 390px;
  }
}

/* 2026-09-18: shared flyer-based content for desktop and mobile.
   The former live HTML sections remain in the document so the layout can be
   restored quickly, but are hidden after the continuous 13-image gallery. */
html.mobile-vertical .page-index-html {
  display: none;
}

html.mobile-vertical .hero-approved-picture-html,
html.mobile-vertical .submit-artwork-html {
  display: none !important;
}

html.mobile-vertical.content-mode-html .hero-approved-picture-flyer,
html.mobile-vertical.content-mode-html .submit-artwork-flyer {
  display: none !important;
}

html.mobile-vertical.content-mode-html .hero-approved-picture-html,
html.mobile-vertical.content-mode-html .submit-artwork-html {
  display: block !important;
}

@media (min-width: 621px) {
  html.mobile-vertical.content-mode-html .page-index-flyer {
    display: none;
  }

  html.mobile-vertical.content-mode-html .page-index-html {
    display: grid;
  }
}

html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery {
  display: block;
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 0;
  background: #fff;
}

.mobile-flyer-gallery picture {
  display: block;
}

html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  scroll-margin-top: 78px;
}

html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery ~ section,
html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery ~ footer {
  display: none !important;
}

@media (min-width: 621px) {
  html.mobile-vertical:not(.content-mode-html) .hero.hero-approved {
    width: min(1080px, 100%);
    aspect-ratio: 1470 / 1070;
    overflow: hidden;
    background: #061a2d;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved-picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved-picture img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: left top;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .hero-form-wrap {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    pointer-events: none;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact .form-speed,
  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact .form-note,
  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact .form-consent,
  html.mobile-vertical:not(.content-mode-html) .hero-approved .hero-gift {
    display: none;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact label {
    position: absolute;
    top: 81.22%;
    display: block;
    height: 4.49%;
    pointer-events: auto;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact label:nth-of-type(1) {
    left: 29.86%;
    width: 21.98%;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact label:nth-of-type(2) {
    left: 53.06%;
    width: 21.57%;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact label:nth-of-type(3) {
    left: 75.85%;
    width: 22.66%;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .invitation-form.compact input {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 5px 10px;
    color: #40362f;
    background: rgb(255 255 255 / .98);
    border: 1px solid #c7b9a3;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgb(54 41 28 / .06);
    font-size: clamp(11px, 1.05vw, 15px);
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .submit-invitation {
    position: absolute;
    left: 28%;
    top: 85.5%;
    display: block;
    width: 53.9%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    filter: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  html.mobile-vertical:not(.content-mode-html) .hero-approved .submit-invitation picture,
  html.mobile-vertical:not(.content-mode-html) .hero-approved .submit-invitation img {
    display: block;
    width: 100%;
    height: auto;
  }

  html.mobile-vertical:not(.content-mode-html) .page-index-flyer {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    justify-content: stretch;
    overflow: visible;
  }

  html.mobile-vertical:not(.content-mode-html) .page-index-flyer a {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    min-height: 62px;
    padding: 6px 4px;
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
  }

  html.mobile-vertical:not(.content-mode-html) .page-index-flyer a + a::before {
    height: 28px;
  }

  html.mobile-vertical:not(.content-mode-html) .page-index-flyer b {
    width: 22px;
    font-size: 9px;
  }

  html.mobile-vertical:not(.content-mode-html) .page-index-theme b {
    background: #7e1824;
  }

  html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery img {
    scroll-margin-top: 132px;
  }
}

@media (min-width: 1280px) {
  html.mobile-vertical:not(.content-mode-html) .page-index-flyer {
    grid-template-columns: repeat(15, minmax(0, 1fr));
  }

  html.mobile-vertical:not(.content-mode-html) .page-index-flyer a {
    min-height: 72px;
  }

  html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery img {
    scroll-margin-top: 80px;
  }
}

@media (max-width: 620px) {
  html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery {
    width: 100%;
  }

  html.mobile-vertical:not(.content-mode-html) .mobile-flyer-gallery img {
    scroll-margin-top: 52px;
  }
}

/* Keep the invitation heading and primary action in one red-and-gold palette. */
.invitation-layer-copy h2 {
  color: #7e1824;
}

.invitation-layer-card .form-speed {
  display: none;
}

.invitation-layer-card .submit-invitation {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 8px 9px rgb(31 67 42 / .2));
}

.invitation-layer-card .submit-invitation:hover {
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 10px 10px rgb(31 67 42 / .24));
  transform: translateY(-2px);
}

.invitation-layer-card .submit-invitation:active {
  box-shadow: none;
  transform: translateY(2px);
}

.invitation-layer-card .submit-invitation picture,
.invitation-layer-card .submit-invitation img {
  display: block;
  width: 100%;
  height: auto;
}

/* The supplied MP3 only needs a compact stop control; no video frame is shown. */
.music-player .music-embed {
  display: none;
}

.music-player.open,
.music-player.open.raised,
.music-player.open.minimized,
.music-player.open.minimized.raised {
  width: 190px;
  height: 40px;
  grid-template-rows: 40px;
}

.music-player.open .music-controls {
  grid-row: 1;
  min-height: 40px;
}

.music-player.open .music-stop {
  width: 100%;
}

@media (max-width: 620px) {
  html.mobile-carousel .music-player,
  html.mobile-vertical .music-player {
    display: none !important;
  }
}