/*
 * Layout fixes on top of the imported theme.
 */

/* Industry pages (/pages/industries-*): their container had only 1.5rem side padding and a max-width
 * (--page-width, 115rem) wider than most screens, so every section sat flush against the left edge.
 * Same gutters as the home page's "Industries We Serve" section and the header. */
.indp .indp__wrap {
  max-width: var(--page-width) !important;
  margin: 0 auto !important;
  padding-left: clamp(1.5rem, 4vw, 4.5rem) !important;
  padding-right: clamp(1.5rem, 4vw, 4.5rem) !important;
}

/* Product cards at 70% of their former size on tablet and desktop: the grid takes 70% of the width,
 * centred, and each card's contents (image, title, labels, buttons, borders, spacing) are zoomed by the
 * same factor so they keep their proportions. Phones keep the theme's two-column cards, which are
 * already small. */
@media screen and (min-width: 750px) {
  .product-grid-container ul.product-grid,
  .collection ul.product-grid,
  ul.product-grid.contains-card--product {
    width: 70% !important;
    max-width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    column-gap: calc(var(--grid-desktop-horizontal-spacing, 8px) * .7) !important;
    row-gap: calc(var(--grid-desktop-vertical-spacing, 8px) * .7) !important;
  }
  ul.product-grid.contains-card--product > .grid__item > .card-wrapper { zoom: .7; }
}

/* Rent vs. Buy comparison (home): 20% smaller, with wider gutters at the page edge and between the two
   columns. `zoom` scales the section's own CSS proportionally, as the product cards do. */
@media screen and (min-width: 761px) {
  .rvb-template--29099220500612__rent-vs-buy .rvb__wrap { zoom: .8; padding-left: 4rem; padding-right: 4rem; }
  .rvb-template--29099220500612__rent-vs-buy .rvb__cols { gap: 4rem; }
  .rvb-template--29099220500612__rent-vs-buy .rvb__col { padding-left: 3.6rem; padding-right: 3.6rem; }
}

/* Hero search fields: the theme's global :focus-visible ring (outline + box-shadow) drew a second grey
   frame inside the white field. The field itself shows focus instead. */
.hero-rent__search .hero-rent__select:focus,
.hero-rent__search .hero-rent__select:focus-visible { outline: none !important; box-shadow: none !important; }
.hero-rent__search .hero-rent__field:focus-within { box-shadow: inset 0 -2px 0 #d51c2a; }

/* Header: a little less height (20px → 12px top and bottom on desktop, 10px → 6px on mobile). */
.section-header .header { padding-top: 6px !important; padding-bottom: 6px !important; }
@media screen and (min-width: 990px) {
  .section-header .header { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* Dropdowns: Questrial everywhere — native selects, their options, and the custom list that
   public/site/lendl-select.js draws in place of the browser's own popup. */
select, select option, select optgroup { font-family: 'Questrial', var(--font-body-family), sans-serif !important; }
.lsel { position: relative; display: block; width: 100%; }
.lsel > select { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none; }
.lsel__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: inherit; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-family: 'Questrial', sans-serif; text-align: left; cursor: pointer; }
.lsel__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsel__btn { white-space: nowrap; }
.lsel__btn::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform .2s ease; }
.lsel.is-open .lsel__btn::after { transform: translateY(2px) rotate(-135deg); }
.lsel__btn:focus-visible { outline: 2px solid rgba(213, 28, 42, .45); outline-offset: 2px; box-shadow: none; }
.lsel__list { position: fixed; z-index: 12000; top: 0; left: 0; max-height: 320px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #e6e7ea; border-radius: 12px; box-shadow: 0 18px 44px -18px rgba(15, 18, 24, .35);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.lsel__list.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease; }
.lsel__opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-family: 'Questrial', sans-serif; font-size: 1.5rem; line-height: 1.3; color: #121212; white-space: nowrap; cursor: pointer; }
.lsel__opt[aria-selected="true"] { font-weight: 600; color: #c8102e; }
.lsel__opt.is-active { background: #f5f6f8; }
.lsel__opt[aria-disabled="true"] { color: #9aa0a8; cursor: default; }

/* Footer: one grid, one type scale. Column titles are small caps-style labels; every link and address line
   shares the same size and line height; columns line up with the logo and the page gutters. */
.footer-dh .footer-dh__inner { padding: 64px clamp(2rem, 4vw, 5rem) 40px; }
.footer-dh .footer-dh__logo-wrap { margin-bottom: 48px; }
.footer-dh .footer-dh__logo-img { height: 64px; }
.footer-dh .footer-dh__cols { display: grid; grid-template-columns: 1.35fr 1fr 1.25fr 1fr; gap: 40px 56px; padding-bottom: 48px; }
.footer-dh .footer-dh__col { min-width: 0; }
.footer-dh .footer-dh__col-title { font-size: 1.2rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; margin: 0 0 2rem;
  color: rgba(255, 255, 255, .72); -webkit-text-stroke: 0; text-shadow: none; }
.footer-dh .footer-dh__col ul { gap: 1.2rem; }
.footer-dh .footer-dh__col ul li a,
.footer-dh .footer-dh__col > div[style] { font-size: 1.5rem !important; line-height: 1.45 !important; letter-spacing: .01em !important; }
.footer-dh .footer-dh__col ul li a { display: inline-block; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s ease, opacity .2s; }
.footer-dh .footer-dh__col ul li a:hover { opacity: 1; background-size: 100% 1px; }
.footer-dh .footer-dh__col > div[style] p { margin: 0 0 1.2rem; }
.footer-dh .footer-dh__col > div[style] p:first-child { font-size: 1.6rem; }
.footer-dh .footer-dh__col > div[style] a { color: #fff; text-underline-offset: 3px; }
.footer-dh .footer-dh__bottom:empty { display: none; }
@media screen and (max-width: 989px) { .footer-dh .footer-dh__cols { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 559px) {
  .footer-dh .footer-dh__inner { padding: 48px 2rem 32px; }
  .footer-dh .footer-dh__cols { grid-template-columns: 1fr; gap: 32px; }
  .footer-dh .footer-dh__logo-wrap { margin-bottom: 32px; }
}