/* Sawyer Mason homepage-only styles: press bar, featured floors, gallery, visualizer card.
   Claude Code for Jay, 2026-10-04: moved from WPCode snippet 50805 "SM Home 2026 - CSS" (code consolidation,
   no visual change). Loaded on the front page only, after base.css (which defines the --sm-* colors). */
.sm-sec .sm-viz a.button{background:var(--sm-cream)!important;border-color:var(--sm-cream)!important;color:var(--sm-navy)!important}
.sm-sec .sm-viz a.button:hover{background:#fff!important;border-color:#fff!important}

/* ---------- press ---------- */
.sm-press .col{padding-bottom:0}
.sm-press .col-inner{display:flex;align-items:center;justify-content:center;min-height:64px}
.sm-press .sm-eyebrow{color:var(--sm-muted);margin:0}
.sm-press .img{width:auto!important}
.sm-press .img img{max-height:44px;width:auto;max-width:160px;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.85}
.sm-press .sm-press-name{font-size:20px;font-weight:300;color:var(--sm-body);margin:0;white-space:nowrap}

/* ---------- featured products ----------
   Same Flatsome tile as the Wide Plank Flooring page: 540x432 swatch, room photo on hover,
   centered collection + name. Only background/spacing are adjusted here so the tiles pick up
   the same styling that page uses. */
.sm-featured .product-small,.sm-featured .product-small .box,.sm-featured .product-small .box-text,.sm-featured .product-small>.col-inner{background:transparent!important;box-shadow:none!important}
.sm-featured .product-small .box-text{padding:14px 0 0}
.sm-why .sm-viz-row{position:absolute!important;right:40px;bottom:40px;left:auto!important;width:360px!important;max-width:calc(100% - 80px);margin:0!important}
.sm-why .sm-viz{padding:0!important}
.sm-why .sm-viz>.col-inner{background:var(--sm-navy);padding:32px}
.sm-why .sm-viz h2{font-size:28px;font-weight:300;line-height:1.15;color:var(--sm-cream);margin:0 0 12px}
.sm-why .sm-viz p{font-size:14px;font-weight:300;line-height:1.55;color:#cfd6de}
.sm-why .sm-viz .button{margin:6px 0 0}

/* ---------- gallery ---------- */
.sm-gallery.section{padding-bottom:0!important}
.sm-gallery .sm-gallery-row{margin-top:8px}
.sm-gallery .sm-gallery-row>.col{flex:1 1 20%;max-width:20%;padding:0 2px}
.sm-gallery .sm-gallery-row .img-inner{padding-top:0!important;height:280px}
.sm-gallery .sm-gallery-row .img-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:849px){
  .sm-why .sm-viz-row{position:static!important;width:auto!important;max-width:none}
  .sm-why .sm-viz>.col-inner{padding:40px}
  .sm-gallery .sm-gallery-row{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .sm-gallery .sm-gallery-row::-webkit-scrollbar{display:none}
  .sm-gallery .sm-gallery-row>.col{flex:0 0 42%;max-width:42%;scroll-snap-align:start}
  .sm-gallery .sm-gallery-row .img-inner{height:240px}
}
@media (max-width:549px){
  .sm-press .img img{max-height:32px;max-width:120px}
  .sm-press .sm-press-name{font-size:17px}
  .sm-why .sm-viz>.col-inner{padding:32px 20px}
  .sm-gallery .sm-gallery-row>.col{flex:0 0 78%;max-width:78%}
}

/* Slim "As seen in" bar (homepage) */
.sm-press--slim .col,.sm-press--slim .col-inner{padding-top:0;padding-bottom:0}
.sm-press--slim .col-inner{min-height:44px}
.sm-press--slim .col-inner > .row{flex:1 1 auto;width:100%;margin-left:0;margin-right:0}
.sm-press--slim .row .row .col{flex-grow:1}
.sm-press--slim .sm-eyebrow{white-space:nowrap;font-size:11px}
.sm-press--slim .img img{max-height:26px;max-width:104px}
.sm-press--slim .img img[src*="remodelista"]{max-height:16px;max-width:132px}
.sm-press--slim .img img[src*="luxe-interiors"]{max-height:19px}
.sm-press--slim .img img[src*="elle-decor-logo"]{max-height:21px}
.sm-press--slim .sm-press-name{font-size:16px}
@media (max-width:849px){
.sm-press--slim .col-inner{min-height:36px}
.sm-press--slim .img img{max-height:22px;max-width:88px}
.sm-press--slim .img img[src*="remodelista"]{max-height:12px;max-width:104px}
.sm-press--slim .img img[src*="luxe-interiors"]{max-height:15px}
.sm-press--slim .img img[src*="elle-decor-logo"]{max-height:17px}
.sm-press--slim .sm-press-name{font-size:14px}
}

/* "As seen in" logos balanced by eye, not by box. Claude Code for Jay, 2026-10-07.
   Why: the old rule gave every file the same 26px box, but the files differ: Architectural Digest and Forbes are
   300 x 130 pictures with a lot of white around the mark (AD's mark fills 63% x 85% of its file, Forbes' 82% x 50%),
   so they came out at about half the visible size of the others. Each height below is the file's height that gives
   the mark itself the intended size: compact marks taller, long wordmarks lower.
   Visible mark on desktop: AD 51 x 31, Martha Stewart 60 x 22, Forbes 61 x 16 (10% under equal weight, Jay 2026-10-07), Elle Decor 84 x 20, Remodelista 123 x 11.5.
   The selectors also match data-src, because LiteSpeed lazy-loads these pictures. */
.sm-press--slim .img img[src*="architectural-digest"],.sm-press--slim .img img[data-src*="architectural-digest"]{height:36px;max-height:none;max-width:none}
.sm-press--slim .img img[src*="martha-stewart"],.sm-press--slim .img img[data-src*="martha-stewart"]{height:24px;max-height:none;max-width:none}
.sm-press--slim .img img[src*="forbes"],.sm-press--slim .img img[data-src*="forbes"]{height:32.5px;max-height:none;max-width:none}
.sm-press--slim .img img[src*="elle-decor-logo"],.sm-press--slim .img img[data-src*="elle-decor-logo"]{height:20.5px;max-height:none;max-width:none}
.sm-press--slim .img img[src*="remodelista"],.sm-press--slim .img img[data-src*="remodelista"]{height:13px;max-height:none;max-width:none}
/* 2026-10-09 (Claude Code for Jay): the AD and Forbes logos are transparent PNGs now (made from the old white-background
   JPEGs, ink #222 like the other three), so the extra contrast filter that the JPEGs needed is gone. On Jay's iPhone the
   filtered JPEGs showed as a white box. */
@media (max-width:849px){
.sm-press--slim .img img[src*="architectural-digest"],.sm-press--slim .img img[data-src*="architectural-digest"]{height:31px}
.sm-press--slim .img img[src*="martha-stewart"],.sm-press--slim .img img[data-src*="martha-stewart"]{height:20.5px}
.sm-press--slim .img img[src*="forbes"],.sm-press--slim .img img[data-src*="forbes"]{height:28px}
.sm-press--slim .img img[src*="elle-decor-logo"],.sm-press--slim .img img[data-src*="elle-decor-logo"]{height:17.5px}
.sm-press--slim .img img[src*="remodelista"],.sm-press--slim .img img[data-src*="remodelista"]{height:11px}
}

/* Gallery tiles: frame, hover zoom, spacing. Claude Code for Jay, 2026-10-05: was a <style> block pasted into the
   Home page content (gallery section); rules unchanged. Kept last, as it came after everything else before. */
.sm-gallery .sm-gal .img{margin:0!important}.sm-gallery .sm-gal .img-inner{overflow:hidden;background:#e9e2d7}.sm-gallery .sm-gal img{transition:transform .8s cubic-bezier(.2,.7,.2,1)!important}.sm-gallery .sm-gal .img:hover img{transform:scale(1.04)}.sm-gallery .row.sm-gal-row>.col{padding-bottom:16px!important}@media(max-width:549px){.sm-gallery .row.sm-gal-row>.col{padding-bottom:10px!important}}

/* Featured floors carousel ("A curated look at our wide plank."): prev / next arrows.
   Claude Code for Jay, 2026-10-06. Why: the product row uses Flatsome's "reveal" arrow style, which draws each arrow as a
   30px-wide, full-height white strip with a shadow INSIDE the slider. It covered the edge of the first and last
   cards and faded their text. Here the arrows become small round buttons instead: on desktop in the side margin
   outside the cards, on tablets and phones over the image edge. Swiping, card size, spacing and the number of
   cards are untouched. The top margin is a percentage of the slider's width, which is what keeps the button
   centred on the card images at every width (image height = 0.8 x card width; 5, 3 or 2 cards per row).
   The slider stops clipping only once it has started (.flickity-enabled): visitors get the slider script after their
   first scroll or touch, and until then the next card must stay clipped at the slider's edge, as it always was. */
.sm-featured .row-slider.slider-nav-reveal.flickity-enabled{overflow:visible}
.sm-featured .row-slider .flickity-prev-next-button,
.sm-featured .row-slider .flickity-prev-next-button:hover{top:0!important;bottom:auto!important;width:38px!important;height:38px!important;min-height:0!important;margin:calc(8% - 27px) 0 0!important;padding:0!important;border:1px solid #d8cfc1!important;border-radius:50%!important;background:#fff!important;box-shadow:none!important;color:#1b3553!important;opacity:1!important;transform:none!important;transition:border-color .2s}
.sm-featured .row-slider .flickity-prev-next-button:hover{border-color:#1b3553!important}
.sm-featured .row-slider .flickity-prev-next-button.previous{left:-46px!important;right:auto!important}
.sm-featured .row-slider .flickity-prev-next-button.next{right:-46px!important;left:auto!important}
.sm-featured .row-slider .flickity-prev-next-button svg{position:absolute!important;left:50%!important;top:50%!important;width:14px!important;height:14px!important;margin:0!important;padding:0!important;max-width:none!important;transform:translate(-50%,-50%)!important;fill:currentColor}
.sm-featured .row-slider .flickity-prev-next-button[disabled]{opacity:.35!important}
@media(max-width:849px){
  .sm-featured .row-slider .flickity-prev-next-button,
  .sm-featured .row-slider .flickity-prev-next-button:hover{width:34px!important;height:34px!important;margin:calc(13.333% - 25px) 0 0!important;background:rgba(255,255,255,.92)!important}
  .sm-featured .row-slider .flickity-prev-next-button.previous{left:16px!important}
  .sm-featured .row-slider .flickity-prev-next-button.next{right:16px!important}
}
@media(max-width:549px){
  .sm-featured .row-slider .flickity-prev-next-button,
  .sm-featured .row-slider .flickity-prev-next-button:hover{margin:calc(20% - 25px) 0 0!important}
}

/* ---- "Setting the Tone in Spaces": photo tiles that link to a project or a floor ([sm_gal_photo], inc/home.php).
   Claude Code for Jay, 2026-10-09. The frame keeps the old picture's shape (padding-top = its height in percent),
   the picture fills it, and zooms a little on hover as before. Caption: over the bottom of the picture on hover or
   keyboard focus where there is a mouse; always shown under the picture on touch screens and narrow windows. ---- */
.sm-gallery .sm-galx{display:block;position:relative;color:#fff;text-decoration:none!important}
.sm-gallery .sm-galx-frame{display:block;position:relative;overflow:hidden;background:#e9e2d7}
.sm-gallery .sm-galx-frame picture{display:block;position:absolute;inset:0}
.sm-gallery .sm-galx-img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:50% 50%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sm-gallery a.sm-galx:hover .sm-galx-img,.sm-gallery a.sm-galx:focus-visible .sm-galx-img{transform:scale(1.04)}
.sm-gallery .sm-galx-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;background:linear-gradient(to top,rgba(13,25,38,.72),rgba(13,25,38,0));font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.sm-gallery a.sm-galx:hover .sm-galx-cap,.sm-gallery a.sm-galx:focus-visible .sm-galx-cap{opacity:1;transform:none}
.sm-gallery a.sm-galx:focus-visible{outline:2px solid #1b3553;outline-offset:3px}
@media(hover:none),(max-width:849px){
  .sm-gallery .sm-galx-cap{position:static;display:block;padding:8px 0 4px;background:none;color:#2d3438;font-size:11px;letter-spacing:.1em;opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.sm-gallery .sm-galx-img,.sm-gallery .sm-galx-cap{transition:none}}