/* ==========================================================================
   FrameX — phones only
   Every rule in this file sits inside a phone-width media query, so tablets,
   laptops and desktops never read any of it: their layout stays exactly as
   the other stylesheets define it. This file is loaded last on every page.

   The aim is a shopping-app density on a phone (compact product cards two to
   a row, smaller type and buttons, tighter spacing) instead of the desktop
   layout squeezed into a narrow screen.
   ========================================================================== */

@media (max-width: 639px) {
  /* The site's own scale, one step smaller for a phone ------------------- */
  :root {
    --gutter: 12px;
    --header-h: 60px;
    --grid-gap: 10px;
    --card-pad: 10px;
    --section-gap: 28px;
    --section-head-gap: 14px;
    --hero-pad-top: 18px;
    --hero-pad-bottom: 26px;

    --text-label: 0.65625rem; /* 10.5px: the small uppercase line on a card */
    --text-card: 0.8125rem;   /* 13px: product names */
    --text-price: 0.9375rem;  /* 15px: price on a card */
    --text-price-lg: 1.5rem;  /* price on a product page */
    --text-lg: 0.9375rem;
    --text-h4: 0.95rem;
    --text-h3: 1.0625rem;
    --text-h2: 1.375rem;
    --text-h2-sm: 1.1875rem;
    --text-title-sm: 1.25rem;
    --text-title: 1.3125rem;
    --text-h1: 1.75rem;
  }

  /* Buttons, chips and fields: compact, still easy to tap ---------------- */
  .btn {
    min-height: 44px;
    padding: 0 1.15rem;
    font-size: 0.875rem;
  }

  .btn--sm {
    min-height: 38px;
    padding: 0 0.9rem;
    font-size: 0.8125rem;
  }

  .chip {
    min-height: 36px;
    padding: 0 0.8rem;
    font-size: 0.8125rem;
  }

  .input,
  .select {
    min-height: 44px;
  }

  /* Headings and lead text ----------------------------------------------- */
  .section-lead {
    margin-top: 4px;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .eyebrow {
    margin-bottom: 4px;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }

  /* ---------------------------------------------------------------------
     Product card (frames, wall art, templates): two to a row
     --------------------------------------------------------------------- */
  .product-card {
    border-radius: 10px;
  }

  .product-card__badges {
    top: 6px;
    left: 6px;
    gap: 4px;
    max-width: calc(100% - 46px);
  }

  .product-card .badge {
    min-height: 20px;
    padding: 0 7px;
    font-size: 0.65625rem;
  }

  /* The heart: smaller, so it does not cover the picture */
  .product-card__wish {
    top: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
    min-width: 0;
    min-height: 0;
  }

  .product-card__wish .icon {
    width: 17px;
    height: 17px;
  }

  .product-card__body {
    gap: 3px;
    padding: 8px var(--card-pad) 4px;
  }

  /* One line only: the shop or the collection */
  .product-card__cat {
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card__title {
    min-height: 2.6em;
    font-weight: 600;
    line-height: 1.3;
  }

  .product-card__rating {
    font-size: 0.6875rem;
  }

  .product-card__rating .icon {
    width: 12px;
    height: 12px;
  }

  .product-card__price {
    gap: 0 6px;
    margin-top: 1px;
    line-height: 1.35;
  }

  .product-card__price s,
  .product-card__price span {
    font-size: 0.71875rem;
  }

  .product-card__price em {
    font-size: 0.71875rem;
    font-weight: 600;
  }

  /* Sizes, colours, stock: one quiet line */
  .product-card__meta {
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 16px;
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card__meta > * {
    flex: none;
  }

  .swatch-dot-row {
    gap: 4px;
  }

  .swatch-dot {
    width: 11px;
    height: 11px;
  }

  /* One row of actions: the main button, and the second one as a round icon
     (its words stay for screen readers). "Out of stock" keeps its words. */
  .product-card__actions {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px var(--card-pad) var(--card-pad);
  }

  .product-card__actions > :only-child {
    grid-column: 1 / -1;
  }

  .product-card__actions .btn {
    min-height: 36px;
    padding-inline: 4px;
    font-size: 0.75rem;
  }

  .product-card__actions .btn--outline:not(:disabled) {
    width: 36px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  .product-card__actions .btn--outline:not(:disabled) .icon {
    display: block;
    width: 16px;
    height: 16px;
  }

  .product-card__actions .btn--outline:disabled {
    grid-column: 1 / -1;
    min-height: 28px;
    border-color: transparent;
    background: var(--stone-soft);
    font-size: 0.71875rem;
  }

  /* A row that swipes sideways: the same card size as the two-column grid,
     with a slice of the next card showing so it is clear there is more.
     Swiping replaces the arrow buttons. */
  .product-grid--rail {
    grid-auto-columns: calc((100% - 2 * var(--grid-gap) - 22px) / 2); /* two cards and 22px of the third */
  }

  /* Cards in such a row are a little narrower: less padding and a smaller
     icon button leave the main button room for its words */
  .product-grid--rail .product-card {
    --card-pad: 8px;
  }

  .product-grid--rail .product-card__actions {
    gap: 4px;
  }

  .product-grid--rail .product-card__actions .btn--outline:not(:disabled) {
    width: 32px;
    min-height: 32px;
    align-self: center;
  }

  .rail-arrows {
    display: none;
  }

  .shelf {
    padding: 12px;
    border-radius: 16px;
  }

  .shelf .section-head {
    gap: 8px 12px;
    margin-bottom: 12px;
  }

  .shelf .section-lead {
    font-size: 0.8125rem;
  }

  /* ---------------------------------------------------------------------
     Shop card: a low cover and tight text
     --------------------------------------------------------------------- */
  .shop-grid {
    gap: 12px;
  }

  .shop-card__cover {
    aspect-ratio: 5 / 2;
  }

  .shop-card__top {
    inset: 8px 8px auto;
  }

  .shop-card__body {
    gap: 6px;
    padding: 28px 12px 12px;
  }

  .shop-card__logo {
    top: -22px;
    left: 12px;
    width: 44px;
    height: 44px;
    font-size: 0.8125rem;
  }

  .shop-card__address {
    font-size: 0.8125rem;
  }

  .shop-card__actions {
    padding-top: 2px;
  }

  /* ---------------------------------------------------------------------
     "How it works" steps: a step without a picture uses the full width
     (the phone layout keeps a 96px column for the picture)
     --------------------------------------------------------------------- */
  .how-step > .how-step__body:only-child {
    grid-column: 1 / -1;
  }

  /* ---------------------------------------------------------------------
     Long text: one size down, so more fits on a screen
     --------------------------------------------------------------------- */
  .pp-lead,
  .pp-overview p,
  .pp-info details > p,
  .pp-sections details > p,
  .tpl-info__desc,
  .tpl-how__lead,
  .guide__lead,
  .final-cta__text,
  .hanging__lead,
  .art-panel > p {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  /* Form fields and question rows */
  .form-field input:not([type="checkbox"]):not([type="radio"]):not(.visually-hidden),
  .form-field select {
    min-height: 44px;
  }

  .faq-item__button,
  .guide-item__button {
    min-height: 52px;
    padding-block: 8px;
    font-size: 0.875rem;
  }

  /* ---------------------------------------------------------------------
     Product page: the same order as on a laptop (picture, name, price, key
     facts, options, your photo, buttons, details), with less air between
     --------------------------------------------------------------------- */
  .pp-buy .btn {
    min-height: 46px;
  }

  .pp-section {
    padding-top: 28px;
  }

  .pp-section__head {
    margin-bottom: 12px;
  }

  /* Material, print, front: small tiles */
  .pp-facts {
    gap: 6px;
  }

  .pp-facts div {
    padding: 8px 10px;
  }

  .pp-facts dd {
    font-size: 0.875rem;
  }

  /* ---------------------------------------------------------------------
     Art & Artists, search results
     --------------------------------------------------------------------- */
  .artist-card {
    gap: 8px;
    padding: 12px;
  }

  .artist-head {
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .artist-head__actions .btn {
    flex: 1 1 auto;
  }

  .svc {
    gap: 10px;
    padding: 10px 12px;
  }

  .cp-note {
    padding: 10px 12px;
    font-size: 0.8125rem;
  }

  .cp-row {
    gap: 10px;
    padding: 10px;
  }

  .cp-row strong {
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .cp-row__meta {
    font-size: 0.75rem;
  }

  /* ---------------------------------------------------------------------
     Footer: the same links in less height
     --------------------------------------------------------------------- */
  .site-footer__top {
    gap: 20px 16px;
    padding-block: 28px 20px;
  }

  .site-footer h3 {
    margin-bottom: 6px;
  }

  .site-footer li a {
    min-height: 36px;
    font-size: 0.8125rem;
  }

  .site-footer__brand {
    gap: 10px;
  }

  .site-footer__brand p {
    font-size: 0.8125rem;
  }

  .site-footer__bottom {
    padding-block: 12px;
    font-size: 0.75rem;
  }
}

/* Narrow phones (320px to 374px): a swiping row shows one card and most of the
   next, so the words on the button fit */
@media (max-width: 374px) {
  .product-grid--rail {
    grid-auto-columns: 58%;
  }
}

/* The narrowest phones (320px) */
@media (max-width: 359px) {
  :root {
    --card-pad: 8px;
  }

  /* The round icon button keeps its icon, a little smaller, so "View Product" has room */
  .product-card__actions {
    gap: 4px;
  }

  .product-card__actions .btn {
    font-size: 0.71875rem;
  }

  .product-card__actions .btn--outline:not(:disabled) {
    width: 32px;
    min-height: 32px;
    align-self: center;
  }

  .product-card__actions .btn--outline:not(:disabled) .icon {
    display: block;
  }
}