.hero-actions { display: contents; }
.mobile-category-heading { display: none; }

/* Put the headline and product photograph on separate rows on smaller screens. */
@media (max-width: 980px) {
  .hero-banner {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    border: 1px solid #dfeafa;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7faff, #e7f1ff);
  }
  .hero-banner::after { display: none; }
  .hero-copy { max-width: none; }
  .hero-copy .eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: #365886;
    font-size: 10px;
  }
  .hero-copy .eyebrow::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 3px;
    background: conic-gradient(#ed178c 0 25%, #12264b 0 50%, #ffdf21 0 75%, #00aeef 0);
  }
  .hero-copy p { margin: 12px 0 16px; }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
  }
  .hero-actions .button {
    min-height: 44px;
    border-radius: 8px;
    font-size: 12px;
    padding: 9px 12px;
    gap: 8px;
  }
  .hero-secondary {
    min-height: 44px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    gap: 5px;
  }
  .hero-secondary svg { width: 13px; }
  .hero-art {
    position: static;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 1.9;
    object-position: center 43%;
  }
}

@media (max-width: 720px) {
  :root { --phone-gutter: clamp(12px, 4vw, 22px); }
  .container { padding-inline: var(--phone-gutter); }
  .utility .container { min-height: 28px; font-size: 10px; gap: 8px; }
  .header-main {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 9px;
    padding-block: 9px 10px;
  }
  .header-main > a:has(.logo-crop) { min-width: 0; display: flex; align-items: center; min-height: 44px; }
  .header-main .logo-crop {
    width: min(175px, 100%);
    height: auto;
    aspect-ratio: 224 / 54;
  }
  .header-action {
    justify-content: center;
    min-height: 44px;
    min-width: 53px;
    gap: 1px;
    font-size: 9px;
  }
  .header-action > svg { width: 21px; height: 21px; }
  .cart-count { top: 0; right: 7px; }
  .search {
    min-height: 46px;
    height: auto;
    margin: 0;
    padding: 0 3px 0 11px;
    border-radius: 9px;
    gap: 8px;
  }
  .search > svg { width: 17px; }
  .search input:not([type=checkbox]) { font-size: 16px; min-width: 0; }
  .search input::placeholder { font-size: 13px; }
  .search button { width: 42px; min-height: 42px; flex: 0 0 42px; color: #325a91; }
  .category-nav {
    min-height: 51px;
    justify-content: flex-start;
    gap: 14px;
    padding-block: 3px;
    scroll-padding-inline: var(--phone-gutter);
    mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent);
  }
  .category-nav > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .category-nav .all-categories { min-width: max-content; min-height: 40px; font-size: 11px; border-radius: 8px; gap: 6px; }
  .category-nav .all-categories svg { width: 15px; }

  .home { padding-top: 13px; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hero-copy { padding: 19px clamp(16px, 5vw, 28px) 14px; }
  .hero-copy h1 { font-size: clamp(37px, 11vw, 54px); line-height: 1.04; }
  .hero-copy p { font-size: 14px; line-height: 1.48; }
  .hero-art { aspect-ratio: 1.87; height: auto; }
  .hero-actions .button { white-space: normal; text-align: center; }
  .hero-secondary { line-height: 1.3; }

  .quick-print {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: stretch;
    gap: 8px 10px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(140deg, #f6faff, #eef5ff);
  }
  .quick-print > .mini-label,
  .quick-print > h2,
  .quick-print > p,
  .quick-print > .field:has(#quick-binding),
  .quick-print > .button,
  .quick-print > .quick-quote { grid-column: 1 / -1; }
  .quick-print > .mini-label { display: block; font-size: 10px; }
  .quick-print > h2 { font-size: clamp(21px, 6.5vw, 29px); }
  .quick-print > p { grid-row: auto; font-size: 13px; margin: -3px 0 2px; }
  .quick-print .field { font-size: 12px; gap: 4px; min-width: 0; }
  .quick-print select { min-height: 44px; font-size: 16px; padding: 7px 5px 7px 9px; border-radius: 8px; }
  .quick-print .button { min-height: 45px; font-size: 14px; border-radius: 8px; margin: 4px 0 0; }
  .quick-quote { min-height: 36px; font-size: 12px; margin: 0; gap: 6px; align-self: center; }
  .quick-quote svg { display: inline; }

  .category-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 29px;
    padding: 0;
    overflow: visible;
  }
  .mobile-category-heading { display: block; grid-column: 1 / -1; margin-bottom: 2px; }
  .mobile-category-heading .eyebrow { margin-bottom: 4px; font-size: 9px; }
  .mobile-category-heading h2 { font-size: 23px; }
  .category-tile {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f8faff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .category-tile > div { border-radius: 0; aspect-ratio: 1.25; }
  .category-tile h3 {
    margin: auto 0;
    padding: 7px 3px 8px;
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .products-section { margin: 34px 0; }
  .products-section .section-heading { display: grid; gap: 4px; margin-bottom: 11px; }
  .section-heading .eyebrow { font-size: 9px; margin-bottom: 5px; }
  .section-heading h2 { text-wrap: balance; }
  .products-section .section-heading > .text-link {
    justify-self: start;
    min-height: 37px;
    margin: 0;
    font-size: 12px;
    white-space: normal;
  }
  .product-grid.four, .product-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }
  .product-image { aspect-ratio: 1.15; border-radius: 11px 11px 0 0; }
  .product-card-body { flex: 1; display: flex; flex-direction: column; padding: 10px 9px 2px; }
  .product-card-body > small { font-size: 9px; color: #5b6d89; margin-bottom: 4px; }
  .product-card h3 { font-size: clamp(14px, 3.9vw, 18px); overflow-wrap: anywhere; }
  .product-card p { font-size: 12px; line-height: 1.45; margin: 6px 0; }
  .product-link { min-height: 44px; margin-top: auto; align-self: flex-start; font-size: 12px; gap: 5px; }
  .product-link svg { width: 14px; }

  .studio-promo { padding: 16px 12px 12px; border-radius: 15px; }
  .studio-promo .section-heading { margin: 0 3px 15px; }
  .studio-promo .section-heading p { font-size: 13px; line-height: 1.5; }
  .studio-promo .section-heading > .button { font-size: 12px; min-height: 44px; margin-top: 12px; border-radius: 8px; }
  .studio-promo-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .studio-promo-card {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
    padding: 9px;
    gap: 10px;
    border: 1px solid #e5eafa;
    border-radius: 11px;
  }
  .studio-preview { aspect-ratio: auto; min-width: 0; }
  .studio-preview img { aspect-ratio: .95; height: auto; }
  .preview-badge {
    position: static;
    transform: none;
    justify-content: center;
    margin: 6px 0 0;
    padding: 4px 2px;
    font-size: 9px;
    gap: 3px;
    box-shadow: none;
    color: #405879;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
  .preview-badge svg { width: 11px; }
  .studio-promo-card h3 { font-size: clamp(15px, 4.2vw, 19px); overflow-wrap: anywhere; }
  .studio-promo-card > div > small { font-size: 8px; margin-bottom: 4px; }
  .studio-promo-card ol { margin: 6px 0 8px; }
  .studio-promo-card li { font-size: 11px; line-height: 1.35; margin: 5px 0; }
  .studio-promo-card li::before { flex-shrink: 0; }
  .studio-promo-card .button { font-size: 11px; min-height: 44px; white-space: normal; text-align: center; border-radius: 7px; }

  .steps { gap: 16px 12px; }
  .steps b { font-size: 12px; line-height: 1.35; }
  .steps p { font-size: 12px; line-height: 1.4; }
  .help-band {
    width: calc(100% - 2 * var(--phone-gutter));
    padding: 16px;
    margin-top: 20px;
    border-radius: 12px;
  }
  .help-band small { font-size: 12px; line-height: 1.5; }
  .help-band > .button { margin: 12px 0 0; min-height: 44px; font-size: 12px; white-space: normal; border-radius: 8px; }
  .footer-grid h3 { font-size: 14px; }
  .footer-grid a:not(:has(.logo-crop)), .footer-grid p { font-size: 12px; }
  .footer-grid .kii-social a { width: 44px; height: 44px; }
  .footer-bottom { padding-bottom: calc(75px + env(safe-area-inset-bottom)); }
  .footer-bottom > span:last-child { flex-wrap: wrap; }

  .shop-heading { flex-wrap: wrap; }
  .shop-filters > a { min-height: 40px; display: flex; align-items: center; font-size: 12px; }
  .shop-toolbar select { width: min(185px, 100%); font-size: 16px; min-height: 42px; }
  .product-assurance { flex-wrap: wrap; }
  .product-config { min-width: 0; }
  .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 9px; }
  .field { font-size: 12px; min-width: 0; }
  .field input:not([type=checkbox]):not([type=range]):not([type=color]),
  .field select, .field textarea { font-size: 16px; }
  .product-config .button, .quote-actions .button { min-height: 44px; white-space: normal; text-align: center; }
  .design-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-choices .button { padding-inline: 7px; }
  .basket-item-actions { flex-wrap: wrap; gap: 6px 15px; }
  .basket-item-actions button { min-height: 40px; }
  .help-grid summary { font-size: 14px; }
  .help-grid details p { font-size: 13px; }

  .studio-app { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
  .studio-header {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) max-content max-content;
    gap: 7px;
  }
  .studio-header > .button, .studio-header > .icon-button { min-height: 42px; }
  .studio-header > .button { padding: 7px; font-size: 10px; }
  .studio-brand { min-width: 0; line-height: 1.1; }
  .studio-title { grid-column: 1 / -1; gap: 8px; }
  .studio-title input:not([type=checkbox]) { min-width: 0; font-size: 16px; }
  .studio-title small { white-space: normal; font-size: 10px; flex: 0 1 40%; }
  .studio-progress { justify-content: space-between; flex-wrap: wrap; gap: 4px 9px; font-size: 9px; }
  .studio-tools .tool-button { height: 42px; }
}

@media (max-width: 360px) {
  .hero-actions { gap: 2px 8px; }
  .hero-actions .button { padding-inline: 9px; }
  .hero-secondary { font-size: 10px; }
  .category-tiles { gap: 8px; }
  .product-card-body { padding-inline: 8px; }
  .design-choices { grid-template-columns: minmax(0, 1fr); }
  .studio-brand b { display: block; }
}

@media (min-width: 521px) and (max-width: 720px) {
  .quick-print { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-print > .field:has(#quick-binding) { grid-column: auto; }
  .category-tile > div { aspect-ratio: 1.5; }
  .studio-promo { padding: 19px; }
}