/*
 * ═══════════════════════════════════════════════════════════════════
 *  RENTORZO — RESPONSIVE LAYER
 *  Loaded LAST, after rz-orange-theme.css.
 *
 *  Layout and sizing only. It sets no brand colours: the theme owns those,
 *  and a sheet loaded after it must not quietly take them over.
 *
 *  Device classes this covers:
 *    320–374   iPhone SE (1st gen), small Android
 *    375–413   iPhone SE 2/3, 12/13 mini, 13/14/15/16
 *    414–430   iPhone Plus / Pro Max
 *    744–834   iPad mini / iPad / iPad Air / iPad Pro 11 (portrait)
 *    1024–1366 iPad Pro 12.9 portrait, all iPads landscape
 *    1440–1599 laptop displays
 *    1600–1919 24–27" monitors
 *    1920+     1080p, 1440p, 4K and ultrawide
 * ═══════════════════════════════════════════════════════════════════
 */

/* ── 0. Header and footer type, one step up ─────────────────────────
   The header and footer sit on every page, and their sizes were spread across
   four stylesheets (rz-pro-v2, rz-advanced, rz-premium-polish and the theme),
   each winning for different selectors. Editing them in place would mean
   chasing the cascade through all four and would still not be the last word.

   So the final size for each element is stated once, here, in the sheet that
   loads last. One step up throughout: roughly +1px on body-sized text and +2px
   on the logos. To change the scale again, change it here — nowhere else. */

/* Top utility strip */
.rz-hdr-top, .topbar                                   { font-size: 14px !important; }
.rz-hdr-top a, .rz-hdr-top span                        { font-size: 14px !important; }
.rz-hdr-city                                           { font-size: 13.5px !important; }

/* Primary navigation */
.rz-hdr-nav a, .rz-hdr-nav .nav-link, .rz-hdr-nav ul li a { font-size: 15px !important; }

/* Logo — the one place a 2px step is noticeable rather than cosmetic. */
.rz-hdr-logo, .rz-logo                                 { font-size: 24px !important; }

/* Buttons and account menu in the header bar */
.rz-hdr-cta, .rz-hdr-actions .btn-rent,
.rz-hdr-login-cta, .rz-hdr-account-btn                 { font-size: 15px !important; }
.rz-hdr-account-hi                                     { font-size: 13px !important; }
.rz-hdr-account-drop a, .rz-hdr-logout                 { font-size: 14px !important; }

/* City picker list */
.rz-hdr-loc-item                                       { font-size: 14px !important; }

/* Slide-out mobile menu */
.rz-menu-nav > ul > li > a                             { font-size: 15px !important; }
.rz-menu-sub li a                                      { font-size: 14px !important; }
.rz-menu-user div a                                    { font-size: 13.5px !important; }

/* Fixed bottom bar on phones */
.bottom-menu-title                                     { font-size: 11px !important; }

/* Footer */
.rz-ftr-logo                                           { font-size: 24px !important; }
.rz-ftr-logo-mark                                      { font-size: 19px !important; }
.rz-ftr-brand p                                        { font-size: 15px !important; }
.rz-ftr-col h4, .rz-ftr .footer-heading                { font-size: 14.5px !important; }
.rz-ftr-col ul a, .rz-ftr-col ul li a, .rz-ftr a       { font-size: 14.5px !important; }
.rz-ftr-contact li                                     { font-size: 14.5px !important; }
.rz-ftr-subcities a                                    { font-size: 13.5px !important; }
.rz-ftr-cta-inner p, .rz-ftr-cta-btn                   { font-size: 15px !important; }
.rz-ftr-cta h3, .rz-ftr-cta-inner h3                   { font-size: clamp(22px, 3vw, 30px) !important; }

/* The bottom bar is the smallest text on the page; it gains the same step. */
.rz-ftr-bottom span, .rz-ftr-bottom p,
.rz-ftr-bottom a, .rz-ftr-bottom-links a               { font-size: 13px !important; }

/* Small phones: the step would start pushing the nav onto a second line and
   crowding the bottom bar, so it is trimmed back — still larger than before. */
@media (max-width: 374px) {
    .rz-hdr-top, .topbar,
    .rz-hdr-top a, .rz-hdr-top span                    { font-size: 13px !important; }
    .rz-hdr-nav a, .rz-hdr-nav .nav-link,
    .rz-hdr-nav ul li a                                { font-size: 14px !important; }
    .rz-hdr-logo, .rz-logo, .rz-ftr-logo               { font-size: 21px !important; }
    .bottom-menu-title                                 { font-size: 10.5px !important; }
    .rz-ftr-col ul a, .rz-ftr-col ul li a, .rz-ftr a   { font-size: 14px !important; }
}

/* ── 1. Nothing may scroll sideways ─────────────────────────────────
   A single over-wide child puts the whole page on a horizontal scrollbar,
   and on a phone that reads as "the site is broken". */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* `overflow-x: hidden` makes an ancestor a scroll container, which stops
   `position: sticky` working on the header inside it. `clip` does the same
   clipping without that side effect, so modern browsers get the sticky header
   back; older ones keep the hidden behaviour they have today. */
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }

/* Long unbroken strings — order ids, emails, URLs — are the usual culprit. */
p, li, dd, dt, td, th, label, .rz-prod-name, .tp-card-name, .rz-name {
    overflow-wrap: break-word;
}

/* ── 2. iOS: never zoom the page when a field is focused ────────────
   Safari zooms in on any input whose font-size is under 16px, and does not
   zoom back out. Twelve rules across the older sheets set 13–15px, so every
   search box, checkout field and login form did this on every iPhone and
   iPad. Scoped to touch pointers, so desktop typography is untouched. */
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── 3. iPhone notch, Dynamic Island and home indicator ─────────────
   Fixed panels and the mobile bottom bar otherwise run under the home
   indicator, so their last row of controls cannot be tapped. */
.bottom-menu {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
.mobile-menu,
.cart-drawer,
.sidebar-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Landscape on a notched iPhone puts the notch beside the content. */
@media (orientation: landscape) {
    body {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* ── 4. Touch targets ───────────────────────────────────────────────
   44×44 CSS px is the figure Apple's own guidance uses. */
@media (hover: none) and (pointer: coarse) {
    a.rz-btn, button, .btn, [role="button"],
    input[type="submit"], input[type="button"],
    .tp-card-btn, .ap-apply, .ap-more, .rz-chip {
        min-height: 44px;
    }

    /* Checkbox rows in the catalogue filter are tapped, not clicked. */
    .ap-opt { min-height: 40px; }
    .ap-opt input { width: 18px; height: 18px; }
}

/* ── 5. Tables always scroll inside themselves ──────────────────────
   A table is the one element that legitimately cannot reflow, so it gets
   its own scroll area rather than widening the page. */
.rz-table-scroll,
.rzp-table-wrap,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Every table on the site is inside one of the wrappers above, so this is
   only a safety net for one added later. Deliberately not written as
   `table:not(.wrapper table)`: a complex selector inside :not() is Selectors
   Level 4, which iOS Safari below 16.4 drops — taking the whole rule with it
   on exactly the older iPhones this needs to work on. */
@media (max-width: 767px) {
    main table { max-width: 100%; }
}

/* ── 6. Small phones: 320–374 ───────────────────────────────────────
   iPhone SE (1st gen) is 320 CSS px wide. Below 375 the shared sheets stop
   adapting, so headings, padding and two-up grids are tightened here. */
@media (max-width: 374px) {
    .container, .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .rz-hero, section.rz-hero { padding: 44px 14px 34px !important; }
    .rz-hero h1, section.rz-hero h1 { font-size: 26px !important; }
    .rz-hero p, section.rz-hero p { font-size: 14px !important; }

    .rz-section-title { font-size: 22px !important; }
    .rz-section { padding: 36px 0 !important; }

    /* One card per row: two 160px tracks plus a gap do not fit in 296px. */
    .ap-grid,
    .rz-subcity-grid,
    .product-grid-wrap {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .tp-card-body { padding: 14px !important; }
    .tp-card-name { font-size: 14px !important; }
    .price-val { font-size: 18px !important; }

    /* The card footer stacks so the price and the button both stay legible. */
    .tp-card-footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }
    .tp-card-btn { text-align: center; }

    .rz-breadcrumb { font-size: 12px !important; flex-wrap: wrap; }
}

/* ── 7. Phones: up to 575 ───────────────────────────────────────────
   Applies to every iPhone in portrait. */
@media (max-width: 575px) {
    .rz-sec-head {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    /* A filter sidebar above a grid should not be taller than the results. */
    .ap-side { max-height: none; }

    /* Chip rows scroll rather than stacking into a tall block. */
    .ap-chips {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .ap-chips > * { flex: 0 0 auto; }
}

/* ── 8. Phone landscape ─────────────────────────────────────────────
   A short viewport should not spend half its height on a hero. */
@media (max-height: 500px) and (orientation: landscape) {
    .rz-hero, section.rz-hero { padding: 28px 20px 22px !important; }
    .rz-hero h1, section.rz-hero h1 { font-size: 24px !important; }
    .rz-hero p, section.rz-hero p { display: none; }
}

/* ── 9. iPad portrait: 768–1023 ─────────────────────────────────────
   iPad mini (744), iPad (810), iPad Air / Pro 11 (820–834). Wide enough for
   two or three cards, too narrow for a sidebar beside them. */
@media (min-width: 768px) and (max-width: 1023px) {
    .ap-shell { grid-template-columns: 1fr !important; }

    /* The filter becomes a horizontal band rather than a tall column. */
    .ap-side {
        position: static !important;
        border: 1px solid var(--rz-line, #e5e7eb);
        border-radius: 14px;
        padding: 18px;
        background: #fff;
    }
    .ap-side form {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 24px;
        align-items: start;
    }
    .ap-side-head, .ap-apply { grid-column: 1 / -1; }

    .ap-grid,
    .rz-subcity-grid,
    .product-grid-wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ── 10. iPad Pro 12.9 portrait and iPads landscape: 1024–1365 ──────
   Desktop layout, but the sidebar is trimmed so the grid keeps three
   comfortable columns instead of two wide ones. */
@media (min-width: 1024px) and (max-width: 1365px) {
    .ap-shell {
        grid-template-columns: 232px minmax(0, 1fr) !important;
        gap: 22px !important;
    }
}

/* ── 11. Monitors ───────────────────────────────────────────────────
   The container capped at 1240px everywhere, so a 27" display showed the
   same column as a laptop with a third of the screen empty either side.
   The steps below widen it with the display and stop at a comfortable
   reading measure rather than filling an ultrawide edge to edge. */
/* Laptops: 1200-1599.
   style.css carries an inverted ladder here - 1320px at <=1499, 1140px at
   <=1399, but only 1200px above 1500 - so a 1536px laptop got a narrower
   column than a 1440px one and sat inside ~170px of dead space either side.
   These steps replace it with a ladder that only ever widens, and fluid
   gutters so the container uses the screen it is given.

   This sheet is loaded last, so a plain .container rule here already wins on
   source order; !important additionally beats the per-page sheets (other-pages,
   product-page, collection) that set their own container width. */
@media (min-width: 1200px) {
    .container {
        width: 100%;
        max-width: 1320px !important;
        padding-left: clamp(20px, 2.5vw, 40px);
        padding-right: clamp(20px, 2.5vw, 40px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1500px) {
    .container { max-width: 1420px !important; }
}

@media (min-width: 1600px) {
    .container { max-width: 1500px !important; }
    .rz-section { padding: 96px 0; }
}

@media (min-width: 1920px) {
    .container { max-width: 1680px !important; }

    /* More columns rather than ever-wider cards. */
    .ap-grid,
    .rz-subcity-grid {
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
    }
    .product-grid-wrap { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (min-width: 2560px) {
    .container { max-width: 1840px !important; }

    .ap-grid,
    .rz-subcity-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    }
    .product-grid-wrap { grid-template-columns: repeat(5, 1fr) !important; }

    /* Body copy that stays 15px on a 2560px display reads as tiny. */
    body { font-size: 16px; }
}

/* ── 12. Retina / high-DPI ──────────────────────────────────────────
   Hairline borders disappear or double up on 2x and 3x screens. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .tp-card, .rz-subcity-card, .ap-side {
        border-width: 1px;
    }
}

/* ── 13. Respect a reduced-motion preference ────────────────────────
   An accessibility setting people actually turn on, and free to honour. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 14. Print ──────────────────────────────────────────────────────
   Invoices and order pages get printed. */
@media print {
    .rz-hdr, .bottom-menu, .ap-side, .rz-links-section,
    footer, .cart-drawer, .mobile-menu { display: none !important; }

    body { background: #fff !important; }
    .container { max-width: 100% !important; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* ── 15. Hero banner crop ──────────────────────────────────────────
   The mobile hero image is portrait (1024×1536) but its container is
   wider than that ratio, so object-fit: cover has to crop it — with the
   default center position, that crop cut straight through the headline
   text baked into the banner image ("BUSINESS LAPTOP RENTALS"). Anchoring
   the crop to the top keeps the text intact; admin-uploaded banners
   conventionally put their headline near the top third for this reason. */
.slider-content .home-slider .slider-image img.mobile-img {
    object-position: 50% 0%;
}