/* Phone-first refinements loaded after the storefront's base and feature styles. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

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

@media (max-width: 850px) {
  .chat-contact-fields {
    grid-template-columns: 1fr;
  }

  .top {
    padding: 8px 12px;
    font-size: 9px;
    line-height: 1.35;
  }

  .nav {
    width: 100%;
    height: auto;
    min-height: 68px;
    gap: 8px;
    padding: 10px 12px;
  }

  .brand {
    flex: 0 0 auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border-right: 0;
  }

  .brand img {
    width: 98px;
    height: auto;
  }

  .nav .nav-links {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    gap: 6px !important;
  }

  .nav .nav-links > a:not(.bag),
  .nav .auth-actions,
  .nav .service-links {
    display: none !important;
  }

  .nav .wishlist-nav,
  .nav .bag {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 9px 10px;
    font-size: 8.5px;
    line-height: 1;
    white-space: nowrap;
  }

  .hero {
    min-height: 430px;
    padding: 54px 18px;
    background-position: 62% center;
  }

  .hero h1 {
    max-width: 340px;
    font-size: clamp(48px, 16vw, 68px);
    line-height: .88;
  }

  .hero p:not(.eyebrow) {
    max-width: 330px;
    font-size: 16px;
  }

  .hero button,
  .search button,
  .load,
  .buy,
  .detail-buy,
  .message-product,
  .detail-message,
  .advanced-filters button,
  .newsletter button {
    min-height: 48px;
  }

  .shop {
    padding: 42px 14px;
  }

  .heading {
    display: block;
  }

  .heading h2 {
    max-width: 280px;
  }

  .heading > p {
    max-width: 430px;
    margin: 18px 0 0;
    line-height: 1.5;
  }

  .search {
    width: 100%;
    max-width: none;
    margin-top: 22px;
  }

  .search input,
  .advanced-filters input,
  .advanced-filters select,
  .options select,
  .newsletter input {
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
  }

  .search button {
    flex: 0 0 auto;
    padding-inline: 16px;
  }

  .filters {
    flex-wrap: nowrap;
    width: calc(100% + 28px);
    margin-inline: -14px;
    padding: 0 14px 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  .filters a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: start;
  }

  .advanced-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 13px;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .card:hover {
    transform: none;
    box-shadow: none;
  }

  .card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  .card-flip {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .card-face img {
    height: 100%;
  }

  .card.has-model:hover .card-flip {
    transform: none;
  }

  .card.has-model.show-model .card-flip,
  .card-flip-link:focus-visible .card-flip {
    transform: rotateY(180deg);
  }

  .card-model-toggle {
    display: block;
    width: 100%;
    min-height: 44px;
    border: 0;
    border-top: 1px solid #ddd;
    background: #eee9e2;
    color: #111;
    font: 700 9px 'DM Mono', monospace;
    letter-spacing: .08em;
    cursor: pointer;
  }

  .card.show-model .card-model-toggle {
    background: #111;
    color: #fff;
  }

  .card-info {
    padding: 12px;
  }

  .product-actions {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .card h3 {
    height: 52px;
    font-size: 17px;
    line-height: 1.02;
  }

  .card .price {
    min-height: 20px;
    margin: 12px 0;
    font-size: 15px;
  }

  .wishlist-button {
    width: 44px;
    height: 44px;
  }

  .modal {
    padding: 0;
    overscroll-behavior: contain;
  }

  .modal.open {
    display: block;
  }

  .box {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 58px 16px calc(30px + env(safe-area-inset-bottom));
  }

  button.close {
    position: fixed;
    z-index: 12;
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    width: 44px;
    height: 44px;
  }

  .details {
    display: block;
  }

  .details > div {
    min-width: 0;
  }

  .main-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 62vh;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  .main-img[hidden] {
    display: none !important;
  }

  .thumbs {
    gap: 10px;
    padding-bottom: 8px;
    scroll-snap-type: inline proximity;
  }

  .thumbs img,
  .thumbs button {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-height: 72px !important;
    scroll-snap-align: start;
  }

  .details h2 {
    margin: 24px 0 12px;
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .description {
    max-height: none;
    font-size: 15px;
  }

  .options {
    margin-block: 18px;
  }

  .detail-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .detail-tools button,
  .review-panel button {
    min-height: 44px;
  }

  .about-section,
  .recent-section,
  .newsletter,
  .footer {
    padding-inline: 18px;
  }

  .about-section {
    padding-block: 52px;
  }

  .about-section p:not(.eyebrow) {
    font-size: 16px;
  }

  .footer {
    display: grid;
    gap: 24px;
  }

  .footer > * {
    min-width: 0;
  }

  .mobile-cart {
    left: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    min-width: 132px;
    min-height: 48px;
    border: 2px solid #fff;
    border-radius: 999px;
  }

  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .cart-drawer,
  .wishlist-drawer {
    width: 100%;
    padding: max(18px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  }

  .cart-head button,
  .wishlist-head button,
  .quantity button,
  .wishlist-remove {
    min-width: 44px;
    min-height: 44px;
  }

  .cart-item,
  .wishlist-item {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .cart-item img,
  .wishlist-item img {
    width: 68px;
    height: 68px;
  }

  .wishlist-item .wishlist-remove {
    grid-column: 2;
    justify-self: start;
  }

  .quantity {
    flex-wrap: wrap;
  }

  .quantity button:last-child {
    margin-left: 0;
  }

  .guide-modal {
    align-items: end;
    padding: 0;
  }

  .guide-modal > section {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 28px 16px calc(28px + env(safe-area-inset-bottom));
  }

  #guideContent {
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .advanced-filters {
    grid-template-columns: 1fr;
  }

  .newsletter form {
    display: grid;
    gap: 8px;
  }

  .newsletter button {
    padding: 14px;
  }
}

@media (max-width: 340px) {
  .brand img {
    width: 82px;
  }

  .nav .wishlist-nav,
  .nav .bag {
    padding-inline: 7px;
    font-size: 8px;
  }

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

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 330px;
  }

  .main-img {
    max-height: 72vh;
  }
}