/* All Stiles (Oct 28, owner's phone review). Loaded last on every page. */

/* Home: the Tile / Stone choice sits low on the screen, so the photo shows. */
@media (max-width:900px) and (orientation:portrait){
  .stage .choose{top:auto!important;bottom:calc(15vh + env(safe-area-inset-bottom,0px))!important;translate:none!important}
}

/* Photo pop-out on phones: X above the photo, Item / Collection pills below it, photo as big as fits between
   (sized in app.js sizeFull). */
@media (max-width:760px){
  .as-image-viewer.open .as-image-dialog{display:flex!important;flex-direction:column!important;align-items:center!important;padding:0!important}
  .as-image-viewer .as-image-close{position:static!important;align-self:flex-end!important;margin:0 4px 10px 0!important;transform:none!important}
  .as-image-viewer .as-image-stage{position:static!important}
  .as-image-viewer .as-image-links{position:static!important;inset:auto!important;transform:none!important;width:100%!important;margin:14px 0 0!important;padding:0 4px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;background:none!important}
  .as-image-viewer .as-image-links:not(.has-links){display:none!important}
}

/* Oct 28 (owner): "From start to finish." sits above the three service videos. */
#services .services-heading{margin:0 5vw 44px!important}
@media (max-width:700px){#services .services-heading{margin:0 20px 28px!important}}

/* Oct 28 (owner): the line under "See it up close." set as a short paragraph (Home, Tile and Stone front pages). */
.closing-showroom .inner p,.as-sip p{max-width:520px!important;margin-left:auto!important;margin-right:auto!important;line-height:1.6!important}

/* Oct 28 (owner, desktop): Stone front page editorial paragraph on 3 lines; Contact intro paragraph on 2 lines. */
@media (min-width:1024px){
  .stone-editorial-copy p{max-width:560px!important;width:560px}
  .as-cf-intro p{max-width:600px!important}
}
/* Contact intro: one sentence per line on wider screens; normal wrapping on phones. */
@media (max-width:760px){.as-br-wide{display:none}}

/* Oct 28 (owner): "See it up close" banner text smaller overall so the showroom photo shows (Home, Tile, Stone). */
.closing-showroom .inner .section-kicker,.as-sip .as-sip-kicker{font-size:9px!important;letter-spacing:2.6px!important}
.closing-showroom .inner h2,.as-sip h2{font-size:clamp(30px,3vw,44px)!important}
.closing-showroom .inner p,.as-sip p{font-size:13.5px!important;line-height:1.55!important;max-width:440px!important}
.closing-showroom .inner a,.as-sip .as-sip-link{font-size:10px!important}

/* Oct 28 (owner): footer company line on 4 lines (desktop). */
@media (min-width:1024px){.as-footer .as-footer-brand p{max-width:370px!important;text-wrap:balance}}

/* Oct 28 (owner): the logo a bit bigger on the home page only. */
@media (min-width:1024px){img.brand{height:72px!important;width:auto!important}} /* owner: the same 72 px logo as the inner pages (home and About) */
@media (min-width:783px){body.home.admin-bar img.brand{top:36px!important;height:48px!important}} /* signed-in staff: the WordPress toolbar covers the top 32 px of the bar */
@media (max-width:600px){body.home img.brand{height:70px!important}}

/* Oct 28: Inspiration has 8 looks: one row of 8 on desktop, 4 a row on phones. */
.look-picker{grid-template-columns:repeat(8,minmax(0,1fr))!important}
@media (max-width:760px){.look-picker{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
/* Oct 28 (owner): Inspiration photos smaller, 5 a row on desktop (3 on tablets, 2 on phones). */
@media (min-width:1024px){.scene-gallery{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}}
@media (min-width:701px) and (max-width:1023px){.scene-gallery{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* Oct 28 (owner, after a design review): one edge for header and footer on desktop: 3.5vw on every page (the left edge of the home headline "Beautiful", owner).
   Inner pages put the logo and menu 2.5% in from each side (.wrap); the home/About header now does the same,
   and the footer content runs from the logo's edge to the menu's edge (Contact column and bottom line end under the menu). */
@media (min-width:1024px){
  img.brand{left:3.5vw!important}
  .tools{right:3.5vw!important}
  .site-header .wrap{padding-left:3.5vw!important;padding-right:3.5vw!important;max-width:none!important}
  .as-footer{padding-left:3.5vw!important;padding-right:3.5vw!important}
  .as-footer-main,.as-footer-bottom{max-width:none!important}
  /* Visit, Explore and Contact sit as a group on the right with equal gaps; the logo column takes the rest (owner). */
  .as-footer-main{grid-template-columns:minmax(0,1fr) auto auto auto!important;column-gap:clamp(72px,9vw,200px)!important}
  .as-footer-main>:last-child{justify-self:end}
}
/* Stone front page headline: "nature." on its own line, starting where "Surfaces" starts (owner). */
.sv-h .ln:nth-child(3) span{animation-delay:.5s}
/* Home page (owner): logo starts where the "B" of "Beautiful" starts (.hero left 3.5vw); the tools and the footer use the same edge. */
@media (min-width:1024px){
  body.home img.brand{left:3.5vw!important}
  body.home .tools{right:3.5vw!important}
  body.home .as-footer{padding-left:3.5vw!important;padding-right:3.5vw!important}
}
/* A leftover accent bar (homepage-showroom-light-v298: #services > div:last-child::before) landed on the video strip after the heading moved above it (owner asked what it was). */
#services>div.square-stage::before{display:none!important}
.as-footer-brand>a{display:inline-block}
/* Tile front page (own header): same 3.5vw edge for the logo, the tools, the headline and the three cards (owner). */
@media (min-width:1024px){
  .tile-gateway-header{padding-left:3.5vw!important;padding-right:3.5vw!important}
  .tile-cinematic-copy{left:3.5vw!important}
  .tile-cinematic-links>a:first-child{padding-left:3.5vw!important}
  .tile-cinematic-links>a:last-child{padding-right:3.5vw!important}
}
/* Home: "What brings you in today?" without the blue glow that made it look brighter (owner). */
.choose .prompt{text-shadow:none!important;font-weight:700!important;font-size:14px!important} /* owner: bold, slightly bigger, no glow */
/* Quartz product pages: company name + logo under the colour name, photo credit under the photos (IGM's requirement, all quartz companies). */
.as-qbrand{display:flex;align-items:center;gap:12px;margin:10px 0 18px}
.as-qbrand-logo{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:6px 10px;background:#fff;border:1px solid rgba(29,61,76,.14);border-radius:6px}
.as-qbrand-logo.is-dark{background:#1d3d4c}
.as-qbrand-logo img{display:block;max-height:28px;max-width:120px;width:auto;height:auto}
.as-qbrand-name{font:600 11px/1.2 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#1d3d4c}
.as-qcredit{margin:8px 0 0;font:400 12px/1.4 'DM Sans',sans-serif;color:#6b7c80}
@media (min-width:601px){.choose .prompt{margin-bottom:25px!important}} /* owner: a little higher above Tile / Stone so it stands out */
/* Discover (owner): the fan gets a little more room and the room photo sits at the right of its column, so the cards never run into it. */
@media (min-width:901px){
  .dcx-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important}
  .dcx-photo{align-items:flex-end!important}
}