/* Public-site mobile layout. Desktop rules intentionally remain untouched. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

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

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

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  /* Shared header, search and cart overlays. */
  .menu-button {
    top: calc(1.25 * var(--header-vw, 1vw));
    left: calc(2.7778 * var(--header-vw, 1vw));
    width: calc(calc(15.7639 * var(--header-vw, 1vw)) + 43.6538px);
    height: calc(calc(13.0556 * var(--header-vw, 1vw)) + 36.1538px);
  }

  .site-header {
    height: calc(calc(7.2222 * var(--header-vw, 1vw)) + 20px);
    align-items: flex-start;
  }

  .home-page > [data-site-header]:empty {
    height: calc(calc(7.2222 * var(--header-vw, 1vw)) + 20px);
    min-height: calc(calc(7.2222 * var(--header-vw, 1vw)) + 20px);
  }

  .header-main {
    height: calc(calc(7.2222 * var(--header-vw, 1vw)) + 20px);
  }

  .header-main.search-open {
    overflow: visible;
  }

  .ticker-tape {
    height: calc(calc(3.6111 * var(--header-vw, 1vw)) + 10px);
    min-height: calc(calc(3.6111 * var(--header-vw, 1vw)) + 10px);
    max-height: calc(calc(3.6111 * var(--header-vw, 1vw)) + 10px);
  }

  .ticker-tape__track,
  .ticker-tape__track img {
    height: calc(calc(3.75 * var(--header-vw, 1vw)) + 10.3846px);
  }

  .cart-badge {
    width: calc(calc(11.1111 * var(--header-vw, 1vw)) + 30.7692px);
    height: calc(calc(7.2222 * var(--header-vw, 1vw)) + 20px);
    align-self: flex-start;
  }

  .cart-badge__overlay {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    max-width: none;
  }

  .site-nav {
    position: absolute;
    top: calc(calc(3.6111 * var(--header-vw, 1vw)) + 10px);
    left: calc(37.7083 * var(--header-vw, 1vw));
    width: calc(calc(19.4444 * var(--header-vw, 1vw)) + 53.8462px);
    height: calc(calc(3.6111 * var(--header-vw, 1vw)) + 10px);
    transform: none;
    justify-content: flex-start;
    overflow: visible;
  }

  .nav-item,
  .nav-search,
  .player-tools,
  .player-tool {
    height: calc(calc(3.6111 * var(--header-vw, 1vw)) + 10px);
  }

  .nav-item,
  .nav-search,
  .nav-item--search,
  .player-tool {
    width: calc(calc(3.8889 * var(--header-vw, 1vw)) + 10.7692px);
    min-width: calc(calc(3.8889 * var(--header-vw, 1vw)) + 10.7692px);
    flex-basis: calc(calc(3.8889 * var(--header-vw, 1vw)) + 10.7692px);
    padding: calc(calc(.6944 * var(--header-vw, 1vw)) + 1.9231px);
  }

  .icon,
  .player-tool img {
    width: calc(calc(2.2222 * var(--header-vw, 1vw)) + 6.1538px);
    height: calc(calc(2.2222 * var(--header-vw, 1vw)) + 6.1538px);
  }

  .nav-item--lang {
    display: flex;
  }

  .site-nav.is-player-open {
    position: absolute;
    inset: auto;
    top: calc(calc(3.6111 * var(--header-vw, 1vw)) + 10px);
    left: calc(37.7083 * var(--header-vw, 1vw));
    width: calc(calc(42.7778 * var(--header-vw, 1vw)) + 118.4615px);
    height: calc(calc(3.6111 * var(--header-vw, 1vw)) + 10px);
    background: transparent;
  }

  .site-nav.is-player-open .player-tools {
    width: calc(calc(23.3333 * var(--header-vw, 1vw)) + 64.6154px);
    flex-basis: calc(calc(23.3333 * var(--header-vw, 1vw)) + 64.6154px);
    overflow: hidden;
  }

  .nav-search__input {
    position: absolute;
    top: 0;
    right: auto;
    left: calc(calc(4.4444 * var(--header-vw, 1vw)) + 12.3077px) !important;
    width: calc(calc(22.7778 * var(--header-vw, 1vw)) + 63.0769px) !important;
    height: calc(calc(2.9167 * var(--header-vw, 1vw)) + 8.0769px);
    padding: 0;
    border-bottom: 1px solid var(--black);
    background: transparent;
    font-size: calc(calc(1.1111 * var(--header-vw, 1vw)) + 3.0769px);
    transform-origin: left center;
    z-index: 1;
  }

  .header-main.search-open .nav-search__input {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1);
  }

  .cart-badge__icon {
    width: calc(calc(2.7778 * var(--header-vw, 1vw)) + 7.6923px);
    height: calc(calc(2.7778 * var(--header-vw, 1vw)) + 7.6923px);
  }

  .cart-badge__line {
    width: calc(calc(6.6667 * var(--header-vw, 1vw)) + 18.4615px);
    height: calc(calc(.2778 * var(--header-vw, 1vw)) + .7692px);
    box-shadow: calc(calc(.2778 * var(--header-vw, 1vw)) + .7692px) calc(calc(.2083 * var(--header-vw, 1vw)) + .5769px) 0 #b50000;
  }

  .cart-badge__line--top { margin-top: calc(-2.0833vw - 5.7692px); }
  .cart-badge__line--bottom { margin-top: calc(calc(2.0833 * var(--header-vw, 1vw)) + 5.7692px); }

  .cart-badge__count {
    font-size: calc(calc(3.0556 * var(--header-vw, 1vw)) + 8.4615px);
    text-shadow: calc(calc(.2083 * var(--header-vw, 1vw)) + .5769px) calc(calc(.1389 * var(--header-vw, 1vw)) + .3846px) 0 #b50000;
    transform: translateY(calc(calc(.2083 * var(--header-vw, 1vw)) + .5769px));
  }

  .cart-badge__total {
    font-size: calc(calc(1.7361 * var(--header-vw, 1vw)) + 4.8077px);
    transform: translateY(calc(calc(.2083 * var(--header-vw, 1vw)) + .5769px));
  }

  .menu-modal__dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: 12px;
    overflow-y: auto;
  }

  .search-results {
    top: calc(7.2222vw + 20px) !important;
    max-height: calc(100dvh - 7.2222vw - 20px);
    overflow-y: auto;
  }

  .cart-overlay {
    top: calc(7.2222vw + 20px);
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100dvh - 7.2222vw - 20px);
    overflow-y: auto;
  }

  .cart-overlay .cart-table {
    min-width: 560px;
  }

  .cart-overlay .cart-table-wrap {
    overflow-x: auto;
  }

  /* Shared newsletter/footer. */
  .newsletter {
    width: 100%;
    min-height: calc(8.9583vw + 45px);
    height: calc(8.9583vw + 45px);
    padding: calc(1.3889vw + 10px) 0;
    gap: 1.1111vw;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
  }

  .newsletter::after {
    display: block;
    left: 50%;
  }

  .newsletter__figure {
    top: -2.0833vw;
    bottom: auto;
    left: 0;
    width: clamp(76px, calc(15.2778vw + 20px), 96px);
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: left top;
  }

  .newsletter__text {
    top: 50%;
    right: calc(50% + 1.6667vw);
    width: auto;
    min-height: 0;
    padding: 0;
    gap: .2778vw;
    align-items: flex-start;
    transform: translateY(-50%);
  }

  .newsletter__title-art {
    width: calc(16.25vw + 20px);
    height: auto;
  }

  .newsletter__subtitle-art {
    width: calc(20.9028vw + 20px);
    height: auto;
  }

  .newsletter__form {
    position: absolute;
    top: 50%;
    right: 0;
    left: 50%;
    width: auto;
    padding: 0 2.7778vw 0 1.6667vw;
    flex-direction: row;
    gap: 1.1111vw;
    box-sizing: border-box;
    transform: translateY(-50%);
  }

  .newsletter__input {
    width: auto;
    min-width: 0;
    max-width: none;
    height: calc(3.3333vw + 20px);
    flex: 1 1 auto;
    padding: 0 .8333vw;
    font-size: calc(1.25vw + 4px);
  }

  .newsletter__submit {
    width: calc(6.9444vw + 20px);
    height: calc(3.3333vw + 20px);
    flex: 0 0 calc(6.9444vw + 20px);
    gap: .2778vw;
    padding: 0 .8333vw .4167vw 1.1111vw;
    font-size: calc(1.3889vw + 4px);
    letter-spacing: -.0278vw;
  }

  .newsletter__enter-icon {
    width: calc(1.2761vw + 5px);
    height: calc(1.6409vw + 5px);
    right: calc(1.25vw + 4px);
    bottom: calc(.5556vw + 4px);
  }

  .newsletter__enter-icon--success {
    width: calc(1.9444vw + 5px);
    height: calc(2.5vw + 5px);
    right: 30%;
    bottom: 50%;
  }

  .site-footer svg,
  .site-footer img {
    height: auto;
  }

  [data-site-footer] {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: #e3eb9a;
    line-height: 0;
  }

  .site-footer {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #e3eb9a;
    line-height: 0;
  }

  .site-footer .site-footer__art {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: -1px 0;
    height: calc(65.9722vw + 20px);
    object-fit: fill;
  }

  /* Let the shop's Queen artwork overlap upward as it does on desktop. */
  .shop-page .newsletter {
    overflow: visible;
  }

  .shop-page .newsletter__figure {
    top: -30px;
    width: 220px;
    z-index: 5;
  }

  html.shop-root {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
  }

  body.shop-page {
    height: auto;
    min-height: 100%;
    overflow-y: visible;
  }

  .site-footer__copyright {
    left: calc(70% + 3.4722vw);
    bottom: .2083vw;
    font-size: calc(1.25vw + .3789px);
  }

  /* Remove the temporary loading spacer so a short mobile page has no white
     band above or below the shared footer. */
  .home-page:has(.home-status:not([hidden])) .home-main {
    min-height: 0;
    height: calc(7.0834vw + 16.1538px);
    flex: 0 0 calc(7.0834vw + 16.1538px);
    overflow: hidden;
    background: #ffd814;
  }

  .home-page:has(.home-status:not([hidden])) .home-status {
    display: none;
    min-height: 0;
  }

  .home-page:has(.home-status:not([hidden])) > [data-site-footer] {
    display: flex;
    min-height: calc(100dvh - 14.3056vw - 36.1538px);
    flex-direction: column;
    background: #e3eb9a;
  }

  .home-page:has(.home-status:not([hidden])) > [data-site-footer] > .site-footer {
    flex: 1 1 auto;
    min-height: 0;
  }

  .home-page:has(.home-status:not([hidden])) > [data-site-footer] > .site-footer .site-footer__art {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  /* Homepage. The requested three selected products stay in one row. */
  .home-products {
    width: 100%;
    padding: 40px 0;
    overflow: hidden;
  }

  .home-products .section-title {
    padding-inline: 16px;
  }

  .home-product-grid.product-grid {
    display: flex;
    width: 100%;
    grid-template-columns: none;
    gap: 0;
    padding: 0 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .home-product-grid.product-grid::-webkit-scrollbar {
    display: none;
  }

  .home-product-grid.product-grid .product-card {
    width: min(82vw, 360px);
    min-width: min(82vw, 360px);
    flex: 0 0 min(82vw, 360px);
    scroll-snap-align: start;
  }

  .home-bottom-grid {
    grid-template-columns: 1fr;
  }

  /* Shop and shared product cards. */
  .shop-page .filters {
    scroll-snap-type: x proximity;
  }

  .shop-page .filters__group,
  .shop-page .filter-dropdown {
    scroll-snap-align: start;
  }

  .shop-page .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card__body {
    min-width: 0;
  }

  /* Product detail becomes a readable document instead of a narrow split. */
  .product-page-body .pdp-top {
    display: block;
    grid-template-columns: none;
  }

  .product-page-body .pdp-top::before,
  .product-page-body .pdp-gallery::after {
    display: none;
  }

  .product-page-body .pdp-gallery,
  .product-page-body .pdp-summary {
    width: 100%;
  }

  .product-page-body .pdp-gallery {
    border-bottom: 1px solid var(--pdp-line, #000);
  }

  .product-page-body .pdp-gallery__item,
  .product-page-body .pdp-gallery__item--short {
    min-height: min(100vw, 520px);
    aspect-ratio: 1 / 1;
  }

  .product-page-body .pdp-summary__inner {
    position: static;
    top: auto;
  }

  .product-page-body .pdp-breadcrumb,
  .product-page-body .pdp-info,
  .product-page-body .pdp-accordion__button,
  .product-page-body .pdp-accordion__body {
    padding-right: 16px;
    padding-left: 16px;
  }

  .product-page-body .pdp-colors {
    max-width: 100%;
    overflow-x: auto;
  }

  .product-page-body .pdp-related__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-page-body .pdp-related .product-card {
    scroll-snap-align: start;
  }

  /* Search results: query, news and products flow vertically. */
  .search-query-row,
  .search-counts,
  .search-result-columns {
    display: block;
  }

  .search-query-row__news-spacer,
  .search-result-columns::after {
    display: none;
  }

  .search-query-row__text {
    min-height: 52px;
    padding: 12px 16px;
    border-left: 0;
    font-size: 13px;
    flex-wrap: wrap;
  }

  .search-counts {
    display: grid;
    height: 52px;
    grid-template-columns: 1fr 1fr;
  }

  .search-counts__news,
  .search-counts__products {
    padding-inline: 12px;
    font-size: clamp(19px, 6vw, 25px);
  }

  .search-counts__products {
    border-left: 1px solid var(--black);
  }

  .search-result-columns {
    min-height: 0;
  }

  .search-news-column {
    border-bottom: 8px double var(--black);
  }

  .search-news-card {
    min-height: 72px;
    height: auto;
  }

  .search-news-card__title {
    min-height: 72px;
    padding: 12px 16px;
    font-size: clamp(24px, 8vw, 34px);
    white-space: normal;
  }

  .search-products-grid {
    grid-template-columns: 1fr;
  }

  .search-products-grid .product-card {
    aspect-ratio: 480 / 608;
    border-left: 0;
  }

  /* News page uses natural document scrolling on phones. */
  .news-page__main {
    overflow: visible;
  }

  .news-masthead {
    height: auto;
    min-height: 150px;
  }

  .news-masthead__title {
    height: auto;
    min-height: 82px;
    white-space: normal;
  }

  .news-board {
    display: flex;
    height: auto;
    min-height: 0;
    flex-direction: column;
  }

  .news-board__visual {
    width: 100%;
    height: auto;
    min-height: 54vw;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--black);
  }

  .news-list {
    width: 100%;
    height: auto;
    overflow: visible;
    border-left: 0;
  }

  .news-list__item {
    height: auto;
    min-height: 68px;
    padding: 10px 16px;
    align-items: center;
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1;
    white-space: normal;
  }

  .news-list__item span,
  .news-list__item:hover span,
  .news-list__item:focus-visible span {
    transform: none;
  }

  /* Account: horizontal tabs above full-width content. */
  .profile-page .login-main,
  .profile-page .login-panel {
    width: 100vw !important;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  .profile-page .login-panel__inner {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    padding: 48px 20px 40px;
    overflow: hidden;
    align-items: flex-start;
    direction: ltr;
  }

  .profile-page .login-title,
  .profile-page .otp-title {
    display: block;
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    font-size: clamp(30px, 8.5vw, 38px);
    direction: rtl;
    text-align: right;
    white-space: normal;
  }

  .profile-page .login-form,
  .profile-page .otp-view,
  .profile-page .otp-form,
  .profile-page .login-links {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    min-width: 0;
  }

  .profile-page .login-form,
  .profile-page .otp-view,
  .profile-page .otp-form {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    min-width: 0;
    direction: rtl;
  }

  .profile-page .login-field {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 104px;
    direction: ltr;
  }

  .profile-page .login-field__label {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding-inline: 8px;
    justify-content: flex-start;
    direction: rtl;
    font-size: 15px;
  }

  .profile-page .login-field__input {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    font-size: 16px;
  }

  .profile-page .login-links a,
  .profile-page .otp-links a,
  .profile-page .otp-links button {
    max-width: 100%;
    direction: rtl;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .profile-page .account {
    display: block;
    height: auto;
    min-height: calc(100dvh - 78px);
    overflow: visible;
  }

  .profile-page .account-nav {
    position: sticky;
    top: 78px;
    z-index: 12;
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid #000;
    background: #f8f7f7;
    scrollbar-width: none;
  }

  .profile-page .account-nav::-webkit-scrollbar {
    display: none;
  }

  .profile-page .account-nav__spacer,
  .profile-page .account-nav > .account-double-line {
    display: none;
  }

  .profile-page .account-nav__items {
    width: max-content;
    flex-direction: row;
  }

  .profile-page .account-nav__item {
    width: 146px;
    height: 58px;
    min-width: 146px;
    grid-template-columns: 42px 104px;
    border-right: 1px solid #000;
    border-bottom: 0;
  }

  .profile-page .account-nav__number {
    padding-inline: 7px;
    font-size: 34px;
  }

  .profile-page .account-nav__item b,
  .profile-page .account-nav__item small {
    font-size: 16px;
    letter-spacing: -.4px;
  }

  .profile-page .account-content {
    width: 100%;
    overflow: visible;
    border-left: 0;
  }

  .profile-page .account-user-header {
    position: static;
  }

  .profile-page .account-user-header__blank {
    display: none;
  }

  .profile-page .account-user-header__identity {
    height: 82px;
    grid-template-columns: 72px 1fr;
  }

  .profile-page .account-view {
    min-height: 420px;
    overflow-x: auto;
  }

  .profile-page .account-overview,
  .profile-page .account-form {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .profile-page .account-info,
  .profile-page .account-form__fields {
    padding: 14px 12px;
  }

  .profile-page .account-input {
    height: auto;
    min-height: 48px;
  }

  .profile-page .account-input > span {
    max-width: 38%;
    white-space: normal;
  }

  .profile-page .wishlist-grid {
    grid-template-columns: 1fr;
  }

  .profile-page .wishlist-grid .product-card,
  .profile-page .wishlist-grid .product-card:nth-child(2n) {
    border-left: 0;
  }

  .profile-page .wishlist-grid .product-card:nth-child(n + 2) {
    border-top: 0 !important;
  }

  .profile-page .address-modal {
    padding: 8px;
  }

  .profile-page .address-dialog {
    width: 100%;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }

  /* Checkout: stack every section and keep forms comfortably tappable. */
  .checkout-page {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .checkout-page .checkout-main {
    display: block;
    height: auto;
    min-height: calc(100dvh - 78px);
    overflow: visible;
    container-type: normal;
  }

  .checkout-page .checkout-products,
  .checkout-page .checkout-details {
    width: 100%;
    height: auto;
    overflow: visible;
    container-type: normal;
  }

  .checkout-page .checkout-products__title,
  .checkout-page .checkout-section-title {
    height: auto;
    min-height: 58px;
    padding: 12px 16px;
    font-size: 22px;
  }

  .checkout-page .checkout-products__list {
    height: auto;
    max-height: 420px;
    overflow-y: auto;
  }

  .checkout-page .checkout-product {
    height: auto;
    min-height: 92px;
  }

  .checkout-page .checkout-product__image {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
  }

  .checkout-page .checkout-product__details {
    height: auto;
    padding: 10px;
  }

  .checkout-page .checkout-details {
    display: block;
  }

  .checkout-page .checkout-address {
    display: grid;
    height: auto;
    min-height: 210px;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
      "edit title"
      "phone phone"
      "recipient recipient"
      "location location";
  }

  .checkout-page .checkout-address__edit { grid-area: edit; padding: 12px; }
  .checkout-page .checkout-address__title { grid-area: title; padding: 12px 16px; }
  .checkout-page .checkout-address__phone { grid-area: phone; }
  .checkout-page .checkout-address__recipient { grid-area: recipient; }
  .checkout-page .checkout-address__location { grid-area: location; }
  .checkout-page .checkout-address__double-line { display: none; }

  .checkout-page .checkout-address__phone,
  .checkout-page .checkout-address__recipient,
  .checkout-page .checkout-address__location,
  .checkout-page .checkout-address__title {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 16px;
  }

  .checkout-page .checkout-address__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: normal;
  }

  .checkout-page .checkout-shipping-methods,
  .checkout-page .checkout-delivery-times,
  .checkout-page .checkout-payments {
    min-height: 64px;
    height: auto;
    overflow-x: auto;
  }

  .checkout-page .checkout-shipping-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .checkout-page .checkout-shipping-methods .checkout-option-x,
  .checkout-page .checkout-payments .checkout-payment-x,
  .checkout-page .checkout-delivery-times__empty {
    display: none;
  }

  .checkout-page .checkout-shipping-option,
  .checkout-page .checkout-delivery-option,
  .checkout-page .checkout-payment-option {
    min-height: 64px;
    height: auto;
    padding: 10px;
    font-size: 14px;
    white-space: normal;
  }

  .checkout-page .checkout-delivery-times {
    display: grid;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    overflow: visible;
  }

  .checkout-page .checkout-delivery-option:nth-child(n) {
    border-bottom: 1px solid var(--black);
  }

  .checkout-page .checkout-payments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .checkout-page .checkout-payment-option {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  .checkout-page .checkout-discount,
  .checkout-page .checkout-total {
    height: auto;
    min-height: 86px;
    padding: 16px;
  }

  .checkout-page .checkout-discount__apply,
  .checkout-page .checkout-discount__input,
  .checkout-page .checkout-pay-button {
    height: 48px;
    min-height: 48px;
    font-size: 18px;
  }

  .checkout-page .checkout-discount__apply,
  .checkout-page .checkout-pay-button {
    width: auto;
    flex: 0 0 112px;
  }

  .checkout-page .checkout-summary {
    height: auto;
    min-height: 250px;
  }

  .checkout-page .checkout-summary__row,
  .checkout-page .checkout-summary__row--payable {
    height: auto;
    min-height: 48px;
  }

  /* Payment result uses natural scrolling and a single column. */
  html.checkout-result-root,
  body.checkout-page--result {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
  }

  .checkout-page--result .checkout-result {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 78px);
    grid-template-columns: none;
    flex-direction: column;
    overflow: visible;
  }

  .checkout-page--result .checkout-result::before,
  .checkout-page--result .checkout-result::after,
  .checkout-page--result .checkout-result__vertical-lines,
  .checkout-page--result .checkout-result__horizontal-lines {
    display: none;
  }

  .checkout-page--result .checkout-result__summary,
  .checkout-page--result .checkout-result__visual {
    width: 100%;
    height: auto;
    transform: none;
  }

  .checkout-page--result .checkout-result__summary {
    display: block;
    grid-template-rows: none;
  }

  .checkout-page--result .checkout-result__summary-top {
    height: auto;
    min-height: 190px;
    padding: 28px 16px;
  }

  .checkout-page--result .checkout-result__success-title {
    width: min(88vw, 430px);
    height: auto;
    margin: 0 auto;
  }

  .checkout-page--result .checkout-result__failed-title {
    padding: 20px 16px;
    font-size: clamp(28px, 9vw, 42px);
  }

  .checkout-page--result .checkout-result__success-details {
    display: block;
    height: auto;
  }

  .checkout-page--result .checkout-result__details-panel {
    width: 100%;
    height: auto;
  }

  .checkout-page--result .checkout-result__success-heading {
    height: auto;
    min-height: 72px;
    padding: 16px;
    font-size: 36px;
  }

  .checkout-page--result .checkout-result__identifier-row {
    height: auto;
    min-height: 58px;
    padding: 12px 16px;
    font-size: 20px;
  }

  .checkout-page--result .checkout-result__failed-copy {
    padding: 20px 16px;
    font-size: clamp(27px, 8vw, 40px);
  }

  .checkout-page--result .checkout-result__visual {
    padding-top: 0;
  }

  .checkout-page--result .checkout-result__media,
  .checkout-page--result .checkout-result[data-state='failed'] .checkout-result__media {
    height: auto;
    padding-top: 0;
  }

  .checkout-page--result .checkout-result__thanks,
  .checkout-page--result .checkout-result__image-frame,
  .checkout-page--result .checkout-result[data-state='failed'] .checkout-result__image-frame {
    width: 100%;
    height: auto;
  }

  .checkout-page--result .checkout-result__thanks {
    min-height: 56px;
    padding: 10px 16px;
  }

  .checkout-page--result .checkout-result__thanks img {
    width: min(70vw, 282px);
    height: auto;
  }

  .checkout-page--result .checkout-result__image-frame {
    aspect-ratio: 1 / 1;
  }

  .checkout-page--result .checkout-result__actions,
  .checkout-page--result .checkout-result[data-state='failed'] .checkout-result__actions {
    width: 100%;
    height: auto;
    min-height: 112px;
    padding: 24px 16px;
    gap: 12px;
  }

  .checkout-page--result .checkout-result__button {
    width: auto;
    height: 48px;
    flex: 1 1 0;
    font-size: 20px;
  }

  /* Customization selection/detail get a native mobile layout. */
  .customization-main.is-selecting,
  .customization-page.is-customizing .customization-main {
    height: auto !important;
    min-height: calc(100dvh - 78px);
    overflow: visible;
  }

  .customization-main.is-selecting .customization-selection,
  .customization-page.is-customizing .customization-detail {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto;
    transform: none !important;
  }

  .customization-main.is-selecting .customization-progress {
    position: relative;
    top: auto;
    height: 76px;
    overflow-x: auto;
  }

  .customization-main.is-selecting .customization-progress__step {
    width: 150px;
    flex-basis: 150px;
    grid-template-columns: 55px 40px 55px;
  }

  .customization-main.is-selecting .customization-progress__tail {
    min-width: 24px;
  }

  .customization-main.is-selecting .customization-filters {
    position: relative;
    top: auto;
    height: 56px;
  }

  .customization-main.is-selecting .customization-filters__spacer:first-child {
    display: none;
  }

  .customization-main.is-selecting .customization-filters__controls {
    width: 100%;
    overflow-x: auto;
  }

  .customization-main.is-selecting .customization-products {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customization-main.is-selecting .customization-product {
    height: 230px;
  }

  .customization-main.is-selecting .customization-product:nth-child(5n + 1) {
    border-left: 0;
  }

  .customization-main.is-selecting .customization-product:nth-child(2n + 1) {
    border-left: 1px solid #000;
  }

  .customization-main.is-selecting .customization-product__name {
    flex-basis: 52px;
    padding: 10px;
    font-size: clamp(22px, 7vw, 30px);
  }

  .customization-page.is-customizing .customization-detail__topbar {
    height: auto;
    flex-wrap: wrap;
  }

  .customization-page.is-customizing .customization-detail__topbar-side:not(.customization-detail__topbar-side--tools),
  .customization-page.is-customizing .customization-toolbar__tail {
    display: none;
  }

  .customization-page.is-customizing .customization-product-heading {
    width: 100%;
    flex-basis: 100%;
    border-left: 0;
    border-bottom: 1px solid #000;
  }

  .customization-page.is-customizing .customization-detail__topbar-side--tools,
  .customization-page.is-customizing .customization-toolbar {
    width: 100%;
    flex-basis: 100%;
  }

  .customization-page.is-customizing .customization-toolbar {
    overflow-x: auto;
  }

  .customization-page.is-customizing .customization-detail__grid {
    position: relative;
    top: auto;
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
  }

  .customization-page.is-customizing .customization-workspace {
    order: 1;
    width: 100%;
    height: min(70dvh, 620px);
    min-height: 420px;
  }

  .customization-page.is-customizing .customization-preview {
    padding: 24px 16px;
  }

  .customization-page.is-customizing .customization-controls {
    order: 2;
    width: 100%;
    height: auto;
    max-height: 520px;
    border-top: 1px solid #000;
    border-left: 0;
  }

  .customization-page.is-customizing .customization-option-list {
    max-height: 420px;
  }

  .customization-page.is-customizing .customization-summary {
    order: 3;
    width: 100%;
    height: auto;
    border-top: 1px solid #000;
    border-right: 0;
  }

  .customization-page.is-customizing .customization-summary__space {
    display: none;
  }

  .customization-page.is-customizing .customization-summary__totals {
    border-right: 0;
    border-left: 0;
  }

  /* Empty informational pages still occupy a useful phone viewport. */
  .shell-page .placeholder-main {
    min-height: calc(100dvh - 78px);
  }
}

@media (max-width: 420px) {
  .search-counts__news,
  .search-counts__products {
    padding-inline: 8px;
    font-size: 18px;
  }

  .home-product-grid.product-grid .product-card {
    width: 86vw;
    min-width: 86vw;
    flex-basis: 86vw;
  }

  .customization-main.is-selecting .customization-products {
    grid-template-columns: 1fr;
  }

  .customization-main.is-selecting .customization-product:nth-child(n) {
    border-left: 0;
  }

  .checkout-page .checkout-discount,
  .checkout-page .checkout-total,
  .checkout-page--result .checkout-result__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .checkout-page .checkout-discount__apply,
  .checkout-page .checkout-pay-button,
  .checkout-page--result .checkout-result__button {
    width: 100%;
    flex-basis: 48px;
  }
}