/* =========================================================
   TOPS Countertops — Elementor bridge stylesheet
   summit.css / nav.css style the ORIGINAL static mockup's custom classes
   (.fcard, .gband, .mat-card, etc.) — Elementor doesn't render any of
   those; its widgets get their own markup (.elementor-icon-box-*, etc).
   The Templates/*.json pages set fonts/key colors per-widget inline via
   Elementor's own controls, but Elementor ALSO generates its own per-
   widget CSS and enqueues it separately — often with selectors of equal
   specificity to plain descendant-class rules, in which case the tiebreak
   goes to whichever stylesheet loads last. functions.php queues this file
   at priority 200 (dead last) specifically so it wins those ties, and
   most rules below use !important as a second line of defense against
   Elementor's own generated per-widget CSS and Global Kit defaults, which
   is what was overriding earlier (unqualified) attempts at this file.
   Only applies inside Elementor-rendered content — header.php/footer.php
   are unaffected.
   ========================================================= */

:root{
 --evergreen:#174A3A;--evergreen-deep:#0F3327;
 --moss:#53735B;
 --charcoal:#202522;
 --warm-stone:#F7F4EC;--warm-stone-2:#FBF9F4;--line:#E4DCC8;
 --gold:#D5A528;--gold-deep:#B98B1F;
 --muted:#5B6259;
}

.elementor a{color:inherit}
.elementor ul{margin:0 0 .9rem 1.2rem}
.elementor li{margin-bottom:.4rem}
.elementor h1,.elementor h2,.elementor h3,.elementor h4{font-family:'Bodoni Moda',Georgia,serif!important}
.elementor p,.elementor span,.elementor a,.elementor li{font-family:'Lato',sans-serif}

/* ---------------------------------------------------------
   Standard image treatment: fixed proportions, rounded corners.
   Applied via the "tn-fixed-image" CSS class on relevant Image widgets.
   --------------------------------------------------------- */
.tn-fixed-image img,
.tn-fixed-image .elementor-widget-container img{
  border-radius:6px!important;aspect-ratio:4/3!important;object-fit:cover!important;width:100%!important;display:block;
}

/* ---------------------------------------------------------
   Tagged image: bottom-left dark pill badge floating over a rounded
   photo — matches the mockup's .tag badge. Built as its own Text Editor
   widget (.tn-tag-badge) absolutely-positioned inside a relatively-
   positioned wrapper Container (.tn-tag-wrap), NOT Elementor's native
   image-caption field: that field wraps the image in a legacy WordPress
   "wp-caption" div carrying an inline pixel width matching the source
   photo's own resolution, which (a) rendered the caption as plain text
   below the image regardless of any CSS repositioning attempted here,
   and (b) silently broke the "all images the same size" sizing below,
   since .tn-fixed-image's width:100% was 100% of that per-photo pixel
   width, not of the actual column. A widget built from scratch avoids
   both problems entirely.
   --------------------------------------------------------- */
.tn-tag-wrap{position:relative}
.tn-tag-badge{
  position:absolute!important;left:14px;bottom:14px;z-index:2;
  width:auto!important;margin:0!important;
  background:rgba(32,37,34,.82);color:#fff;
  font-family:'Lato',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .7rem;border-radius:2px;
}
.tn-tag-badge p,.tn-tag-badge span{margin:0;color:#fff;font:inherit}

/* ---------------------------------------------------------
   "On this page" nav + section anchors — the buying guide's step sidebar
   and the About page's section nav. The nav itself is the mockup's own
   .guide-toc markup in an HTML widget, styled by summit.css (numbered
   circles, gold active bar, card chrome); main.js highlights whichever
   section is in view. All this file adds is clearance for the sticky
   site header, so jumping to an anchor doesn't land with the heading
   hidden underneath it.
   --------------------------------------------------------- */
.tn-step-anchor{display:block;height:0;overflow:hidden;scroll-margin-top:110px}

/* NO sticky/position rules here, by design. The "On this page" nav is
   made sticky through Elementor's own Sticky control on the HTML widget
   (Advanced > Motion Effects), which works by setting position/top on
   the widget itself at runtime — any position:sticky, height:100% or
   position:static!important this stylesheet added to the nav, the widget
   or the wrappers in between would fight that and pin the box in the
   wrong place. Set the stick, the offset, the "stay in column" bound and
   the per-breakpoint on/off in the editor; leave this file out of it.
   Only the stacking order below is layout, not positioning. */
@media (max-width:1024px){
  /* Once the columns stack, the nav would otherwise sit AFTER the copy —
     a nav you reach only by scrolling past everything it links to. */
  .tn-guide-toc-col{order:-1;margin-bottom:28px}
}

/* ---------------------------------------------------------
   Buying-guide promo card — bordered, rounded, light-gold card (matches
   styles.css's .guide .inner) sitting on the section's own lighter
   background; and its cover art shown small, rotated and drop-shadowed
   like a book on a table (.guide .bookpic), not a flat full-width photo.
   --------------------------------------------------------- */
.tn-guide-card{border:1px solid var(--line)!important;border-radius:6px!important}
.tn-guide-book img{
  max-width:150px!important;width:100%!important;aspect-ratio:3/4!important;object-fit:cover!important;
  border-radius:3px!important;box-shadow:0 16px 40px rgba(32,37,34,.25);
  transform:rotate(-20deg);display:block;margin:0 auto;
}

/* ---------------------------------------------------------
   Brand/supplier logo strip (home's "Brands & suppliers we carry", and
   the supplier row inside each materials section) — real Image widgets,
   pinned to a fixed height with auto width so every logo matches
   regardless of its own intrinsic aspect ratio. Elementor's Image widget
   otherwise stretches an image to fill its column, which is what made
   sizes inconsistent when this was column-based; a flex-wrap row of
   content-sized (not percentage) children fixes that at the layout level,
   and this fixes it at the image level. Grayscale fades to full color on
   hover, matching the mockup's .brandstrip/.suppliers img treatment.
   --------------------------------------------------------- */
.tn-brand-logo{flex:0 0 auto!important;width:auto!important}
.tn-brand-logo img{
  height:40px!important;width:auto!important;max-width:none!important;
  object-fit:contain!important;display:block;
  filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s;
}
.tn-brand-logo:hover img{filter:none!important;opacity:1!important}

/* ---------------------------------------------------------
   Button — four brand variants, matching the mockup's .btn-red/-ghost/
   -outline/-cream exactly. Base colors/border/padding are already set
   per-instance via the widget's own settings; this file only adds the
   transition + distinct hover behavior each variant needs (a plain "is
   this transparent" check can't tell ghost and outline apart, so each
   gets its own tn-btn-* class instead — set via the button's "CSS
   Classes" field).
   --------------------------------------------------------- */
.elementor-widget-button .elementor-button{
  transition:background-color .2s,border-color .2s,color .2s,transform .2s;border-radius:2px!important;
  font-family:'Lato',sans-serif!important;font-weight:700!important;font-size:.92rem!important;
  padding:.85rem 1.5rem!important;
}
.elementor-widget-button .elementor-button:hover{transform:translateY(-1px)}
.tn-btn-solid .elementor-button:hover,.elementor-button.tn-btn-solid:hover{filter:brightness(.92)}
.tn-btn-ghost .elementor-button:hover,.elementor-button.tn-btn-ghost:hover{background:rgba(255,255,255,.12)!important}
.tn-btn-outline .elementor-button:hover,.elementor-button.tn-btn-outline:hover{
  background:var(--evergreen)!important;color:#fff!important;border-color:var(--evergreen)!important;
}
.tn-btn-cream .elementor-button:hover,.elementor-button.tn-btn-cream:hover{background:#fff!important}

/* ---------------------------------------------------------
   Slides (hero slideshow) — Elementor's default slide heading/description
   set no font-family at all (inherit the site's generic default), and
   its default slide button is a transparent/white-border ghost style;
   overridden here to match the mockup's hero treatment.
   --------------------------------------------------------- */
.elementor-widget-slides .swiper-slide-bg{background-size:cover!important;background-position:center!important}
.elementor-widget-slides .elementor-background-overlay{background:rgba(14,23,18,.6)}
.elementor-widget-slides .elementor-slide-heading{
  font-family:'Bodoni Moda',Georgia,serif!important;font-weight:600!important;
  font-size:clamp(2.4rem,5vw,3.8rem)!important;line-height:1.08!important;color:#fff!important;
  max-width:640px;
  text-align:start;
}
.elementor-widget-slides .elementor-slide-description{
  font-family:'Lato',sans-serif!important;font-size:1.08rem!important;line-height:1.5!important;color:#E7EFE8!important;max-width:46ch;text-align:start;
}
.elementor-widget-slides .elementor-slide-button{
  background:var(--gold)!important;border:none!important;color:#fff!important;
  font-family:'Lato',sans-serif!important;font-weight:700!important;font-size:.92rem!important;
  padding:.85rem 1.5rem!important;border-radius:2px!important;margin-top:.5rem;transition:.2s;
}
.elementor-widget-slides .elementor-slide-button:hover{background:var(--gold-deep)!important}
.elementor-widget-slides .elementor-swiper-button-next,
.elementor-widget-slides .elementor-swiper-button-prev{color:#fff!important;opacity:.85}
.elementor-widget-slides .swiper-pagination-bullet-active{background:var(--gold)!important}

/* ---------------------------------------------------------
   Product card (photo + heading + text + button) — home page's
   "Countertops & Surfaces / Tile / Sinks & Fixtures" trio. Built as a
   Container > Image, Heading, Text Editor, Button; no native Elementor
   widget matches this shape on its own.
   --------------------------------------------------------- */
.tn-product-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:.25s;height:100%}
.tn-product-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(32,37,34,.12)}
/* The card's text widgets are direct children (no padded inner wrapper —
   see productCard()'s note on container nesting depth), so the body
   padding is applied per-child here and cancelled on the full-bleed
   photo. .elementor-element is the class Elementor puts on every child
   element of a container. */
.tn-product-card > .elementor-element{padding-left:26px;padding-right:26px}
.tn-product-card > .tn-product-card-img{padding-left:0;padding-right:0;margin-bottom:22px}
.tn-product-card > .elementor-element:last-child{padding-bottom:28px}
.tn-product-card-img.tn-fixed-image img{border-radius:0!important;margin:0}
.tn-product-card .elementor-heading-title{font-size:1.25rem!important;margin:0 0 .5rem}
.tn-product-card > .elementor-widget-text-editor{color:var(--muted);font-size:.92rem;margin-bottom:1.1rem}

/* ---------------------------------------------------------
   Person card (About Us > Meet The Team) — same flattened Container >
   Image, Heading, Text Editor shape as the product card above, so the
   body padding is likewise applied per-child. The portrait is cropped
   square-ish (6:7) rather than the site-wide 4:3 landscape, which is the
   crop headshots actually want; the placeholder images the template
   ships with are generated at that ratio too, so dropping in the real
   photos later doesn't reflow the row.
   --------------------------------------------------------- */
.tn-person-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:.25s;height:100%}
.tn-person-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(32,37,34,.12)}
.tn-person-card > .elementor-element{padding-left:24px;padding-right:24px}
.tn-person-card > .tn-person-card-img{padding-left:0;padding-right:0;margin-bottom:20px}
.tn-person-card > .elementor-element:last-child{padding-bottom:26px}
.tn-person-card-img.tn-fixed-image img{border-radius:0!important;aspect-ratio:6/7!important;margin:0}
.tn-person-card .elementor-heading-title{font-size:1.12rem!important;margin:0 0 .3rem}
/* Standalone leadership portrait (not in a card) — same upright crop. */
.tn-portrait.tn-fixed-image img{aspect-ratio:6/7!important}

/* ---------------------------------------------------------
   Icon Box (feature icon grids — segs, guides2, measurement guide)
   --------------------------------------------------------- */
.elementor-widget-icon-box .elementor-icon-box-wrapper{background:#fff;border:1px solid var(--line);border-radius:5px;padding:28px 26px;transition:.25s;height:100%}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(32,37,34,.12)}
.elementor-widget-icon-box .elementor-icon-box-icon{margin-bottom:.9rem}
.elementor-widget-icon-box .elementor-icon-box-icon i,
.elementor-widget-icon-box .elementor-icon-box-icon svg{color:var(--evergreen)}
.elementor-widget-icon-box .elementor-icon-box-title{font-family:'Bodoni Moda',Georgia,serif!important;font-size:1.2rem!important;margin:0 0 .5rem}
.elementor-widget-icon-box .elementor-icon-box-description{font-family:'Lato',sans-serif!important;font-size:.9rem!important;color:var(--muted)!important;margin:0}

/* ---------------------------------------------------------
   Image Box (material cards, project cards)
   --------------------------------------------------------- */
.elementor-widget-image-box .elementor-image-box-wrapper{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.25s;height:100%}
.elementor-widget-image-box .elementor-image-box-wrapper:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(32,37,34,.12)}
.elementor-widget-image-box .elementor-image-box-img{margin:0}
.elementor-widget-image-box .elementor-image-box-img img{aspect-ratio:4/3!important;object-fit:cover!important;width:100%!important;border-radius:0!important}
.elementor-widget-image-box .elementor-image-box-content{padding:16px 18px 20px}
.elementor-widget-image-box .elementor-image-box-title{font-family:'Bodoni Moda',Georgia,serif!important;font-size:1.05rem!important;color:var(--charcoal)!important;margin:0 0 .35rem}
.elementor-widget-image-box .elementor-image-box-description{font-family:'Lato',sans-serif!important;font-size:.86rem!important;color:var(--muted)!important;margin:0}

/* ---------------------------------------------------------
   Accordion (FAQ sections)
   --------------------------------------------------------- */
.elementor-widget-accordion .elementor-accordion-item{border:none;border-bottom:1px solid var(--line)}
.elementor-widget-accordion .elementor-tab-title{font-family:'Bodoni Moda',Georgia,serif!important;font-weight:600!important;font-size:1.08rem!important;color:var(--charcoal)!important;padding:20px 0}
.elementor-widget-accordion .elementor-tab-title.elementor-active{color:var(--evergreen)!important}
.elementor-widget-accordion .elementor-tab-content{font-family:'Lato',sans-serif!important;color:var(--muted)!important;padding:0 0 20px;border:none}
.elementor-widget-accordion .elementor-accordion-icon{color:var(--evergreen)!important}

/* ---------------------------------------------------------
   Testimonial (reviews)
   --------------------------------------------------------- */
.elementor-widget-testimonial .elementor-testimonial-wrapper{background:var(--warm-stone);border:1px solid var(--line);border-radius:8px;padding:28px 26px;height:100%}
.elementor-widget-testimonial .elementor-testimonial-content{font-family:'Lato',sans-serif!important;color:var(--charcoal)!important;font-size:.96rem!important;line-height:1.6}
.elementor-widget-testimonial .elementor-testimonial-name{font-family:'Bodoni Moda',Georgia,serif!important;color:var(--evergreen)!important;font-weight:600!important}

/* ---------------------------------------------------------
   Basic Gallery (idea galleries)
   --------------------------------------------------------- */
.elementor-widget-gallery .e-gallery-item{border-radius:4px;overflow:hidden}
.elementor-widget-gallery .e-gallery-item::after{transition:.25s}
.elementor-widget-gallery .e-gallery-item:hover::after{opacity:.15}

/* ---------------------------------------------------------
   Google Maps
   --------------------------------------------------------- */
.elementor-widget-google_maps .elementor-custom-embed{border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}

/* ---------------------------------------------------------
   Alert (Group Colors dynamic-inventory placeholder note)
   --------------------------------------------------------- */
.elementor-widget-alert .elementor-alert{border:1px dashed var(--moss);border-radius:6px;background:rgba(23,74,58,.06);color:var(--evergreen)}
.elementor-widget-alert .elementor-alert-title{font-family:'Bodoni Moda',Georgia,serif!important}

/* ---------------------------------------------------------
   Posts (blog teasers / blog listing)
   --------------------------------------------------------- */
.elementor-widget-posts article.elementor-post,
.elementor-widget-posts .elementor-post__card{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.25s}
.elementor-widget-posts article.elementor-post:hover,
.elementor-widget-posts .elementor-post__card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(32,37,34,.12)}
.elementor-widget-posts .elementor-post__thumbnail img{aspect-ratio:4/3!important;object-fit:cover!important;width:100%!important}
/* The title text lives in an <a> inside the title. `.elementor a` (Lato)
   above and Elementor Pro's own posts CSS both set the link's font directly,
   which beats inheriting from the title wrapper, so target the link too. */
.elementor-widget-posts .elementor-post__title,
.elementor-widget-posts .elementor-post__title a{font-family:'Bodoni Moda',Georgia,serif!important;font-weight:600!important;font-size:1.15rem!important;line-height:1.28!important;letter-spacing:0!important}
.elementor-widget-posts .elementor-post__title a{color:var(--charcoal)!important}
.elementor-widget-posts .elementor-post__excerpt{font-family:'Lato',sans-serif!important;color:var(--muted)!important;font-size:.88rem!important}
.elementor-widget-posts .elementor-post__read-more{color:var(--gold)!important;font-weight:600!important}

/* ---------------------------------------------------------
   Table of Contents (buying guide sidebar)
   --------------------------------------------------------- */
.elementor-widget-table-of-contents .elementor-toc__header{background:var(--warm-stone);border-bottom:1px solid var(--line)}
.elementor-widget-table-of-contents .elementor-toc__header-title{font-family:'Bodoni Moda',Georgia,serif!important;color:var(--charcoal)!important}
.elementor-widget-table-of-contents .elementor-toc__list-item-text{font-family:'Lato',sans-serif!important}
.elementor-widget-table-of-contents .elementor-toc__list-item-text:hover,
.elementor-widget-table-of-contents a.elementor-toc__list-item-text-active{color:var(--evergreen)!important}

/* ---------------------------------------------------------
   Search Form (blog)
   --------------------------------------------------------- */
.elementor-widget-search-form .elementor-search-form__container{border:1.5px solid var(--line);border-radius:40px;background:#fff}
.elementor-widget-search-form .elementor-search-form__submit{color:var(--muted)}

/* ---------------------------------------------------------
   Floating action buttons (Book An Appointment + chat launcher) — added
   by a separate plugin via an Elementor Custom Code snippet, not by this
   theme. Hidden on mobile per client request; tablet and desktop keep
   them. 767px is Elementor's default mobile breakpoint.
   The chat launcher has no class or id and sets display:flex as an inline
   style, so it's matched by its aria-label, and !important is required: a
   stylesheet !important beats a non-important inline style. If the chat
   plugin ever changes that label, this selector needs updating to match.
   --------------------------------------------------------- */
@media (max-width:767px){
  #book-appointment-btn,
  button[aria-label="Open chat"]{display:none!important}
}