/* Shared storefront adjustments for phones, tablets and zoomed layouts. */
@media (max-width: 849px) {
    .service-page-heading h1 { font-size: clamp(2.15rem, 7vw, 3.5rem) }
    .service-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    .service-hero-copy { min-width: 0; padding: clamp(19px, 4.4vw, 32px) }
    .service-hero-copy h1 { font-size: clamp(1.95rem, 5.65vw, 3.4rem); text-wrap: balance }
    .service-hero-photo { min-height: clamp(135px, 34vw, 285px) }
    .service-hero-photo::after { background: linear-gradient(180deg, #290d1b88, transparent 26%) }
    .products-toolbar > * { min-width: 0 }
    .products-toolbar select { max-width: 100%; min-height: 44px }
    .catalogue-crumbs { row-gap: 4px }
}
@media (max-width: 599px) {
    .hero--studio .hero-copy { padding: clamp(15px, 4.5vw, 25px) }
    .hero--studio .hero-actions { gap: 7px }
    .hero--studio .hero-actions .button {
        min-height: 44px;
        padding-inline: 11px;
        font-size: .875rem;
        gap: 5px;
    }
    .hero--studio .hero-actions .icon { width: 15px }
    .hero--studio .hero-media { block-size: clamp(128px, 38vw, 218px) }
    .quick-links > :is(a, button) { min-width: 0; min-height: 53px; line-height: 1.25 }
    .service-tile-image img { aspect-ratio: 2 / 1; min-height: 0; height: auto }
    .service-tile-copy { padding: 15px }
    .service-hero-copy .button { min-height: 44px; max-width: 100%; white-space: normal }
    .catalogue-hero h1, .product-heading { font-size: clamp(1.9rem, 7.3vw, 2.85rem) }
    .catalogue-crumbs { gap: 4px 8px }
    .catalogue-crumbs a { min-height: 34px }
    .drawer-body :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
    main :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
        font-size: 1rem;
        max-width: 100%;
    }
    .bottom-nav :is(a, button) { min-width: 0 }
}
@media (max-height: 500px) and (min-width: 580px) and (max-width: 849px) and (orientation: landscape) {
    .hero.hero--studio, .service-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 0;
    }
    .hero--studio .hero-copy, .service-hero-copy { padding: 18px }
    .hero--studio h1, .service-hero-copy h1 { font-size: clamp(2rem, 5vw, 2.8rem) }
    .hero--studio .hero-media { block-size: auto; min-height: 100%; aspect-ratio: auto }
    .service-hero-photo::after { background: linear-gradient(90deg, #290d1b88, transparent 26%) }
}