/* ==========================================================================
   Stroymagaz — custom visual redesign
   Built purely as an override layer on top of the existing OceanWP /
   WooCommerce / Elementor / WooLentor markup. No HTML was changed —
   only selectors that already exist in index.html are targeted here.
   ========================================================================== */

:root{
  /* ---- Palette: industrial warmth (charcoal + safety orange + warm sand) ---- */
  --sm-ink:        #201c18;   /* near-black charcoal, primary text */
  --sm-ink-soft:   #56504a;   /* secondary text */
  --sm-paper:      #faf6f0;   /* warm off-white page background */
  --sm-paper-alt:  #f0e9df;   /* section alt background */
  --sm-card:       #ffffff;   /* card surface */
  --sm-line:       #e4dccf;   /* hairline borders */
  --sm-brand:      #d9631e;   /* safety-orange primary accent */
  --sm-brand-dark: #b5501a;   /* hover state */
  --sm-brand-ink:  #ffffff;   /* text on brand */
  --sm-navy:       #223142;   /* deep slate-navy secondary accent */
  --sm-navy-dark:  #182430;
  --sm-success:    #2f7d4f;
  --sm-radius-sm:  6px;
  --sm-radius:     12px;
  --sm-radius-lg:  20px;
  --sm-shadow:     0 4px 16px rgba(32,28,24,0.08);
  --sm-shadow-lg:  0 12px 32px rgba(32,28,24,0.14);
  --sm-space-1: 4px;
  --sm-space-2: 8px;
  --sm-space-3: 12px;
  --sm-space-4: 16px;
  --sm-space-5: 24px;
  --sm-space-6: 32px;
  --sm-space-7: 48px;
  --sm-space-8: 64px;
  --sm-font-body: "Roboto", "ABeeZee", Arial, sans-serif;
  --sm-font-head: "Roboto Slab", "Roboto", Georgia, serif;
}

/* ---------------------------------------------------------------------- */
/* 0. Reset / neutralize legacy theme visuals                              */
/* ---------------------------------------------------------------------- */
html{ scroll-behavior:smooth; }

body{
  background:var(--sm-paper) !important;
  color:var(--sm-ink) !important;
  font-family:var(--sm-font-body) !important;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body *{
  box-shadow:none;
}

body, body p, body li, body span, body div{
  font-family:var(--sm-font-body);
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.widget-title,
.woocommerce-loop-product__title,
.product_title{
  font-family:var(--sm-font-head) !important;
  color:var(--sm-ink) !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
}

a{ color:var(--sm-brand); text-decoration:none; transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease; }
a:hover{ color:var(--sm-brand-dark); }

img{ border-radius:var(--sm-radius-sm); }

/* No bullet points anywhere on the page (desktop + mobile), per request */
ul, ol,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.woocommerce ul,
.woocommerce ol{
  list-style:none !important;
  margin-left:0;
  padding-left:0;
}
li::marker{ content:""; }

::selection{ background:var(--sm-brand); color:#fff; }

/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-menu-toggle:focus-visible{
  outline:3px solid var(--sm-brand);
  outline-offset:2px;
}

/* ---------------------------------------------------------------------- */
/* 0.5 Elementor core grid — this static export ships NO Elementor engine  */
/*     CSS at all (assets/css/frontend.min.css, swiper.min.css and         */
/*     elementor-icons.min.css all 404). Without it .elementor-container   */
/*     / .elementor-column have no flex/width rules, so every multi-column */
/*     row on the page (top bar, product highlight rows, banner pairs,     */
/*     feature grid, footer widgets) collapses into stacked full-width     */
/*     blocks instead of sitting side by side. This reimplements the       */
/*     minimum grid the page markup expects.                               */
/* ---------------------------------------------------------------------- */
.elementor *{ box-sizing:border-box; }

.elementor-container{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  width:100%;
  margin:0 auto;
}
.elementor-section-boxed > .elementor-container{ max-width:1200px; }

.elementor-column{
  position:relative;
  min-height:1px;
  width:100%;
}
.elementor-column-gap-default > .elementor-column{ padding:10px; }
.elementor-column-gap-narrow > .elementor-column{ padding:5px; }
.elementor-column-gap-extended > .elementor-column{ padding:15px; }
.elementor-column-gap-wide > .elementor-column{ padding:20px; }
.elementor-column-gap-no > .elementor-column{ padding:0; }

.elementor-col-100{ width:100%; }
.elementor-col-50{ width:50%; }
.elementor-col-33{ width:33.3333%; }
.elementor-col-25{ width:25%; }
.elementor-col-20{ width:20%; }

.elementor-widget-wrap{ width:100%; display:flex; flex-direction:column; }
.elementor-widget{ width:100%; }
.elementor-widget-button.elementor-align-center,
.elementor-align-center{ text-align:center; }

@media (max-width:767px){
  .elementor-container{ flex-wrap:wrap; }
  .elementor-column{ width:100% !important; }
}

/* Elementor's own JS (frontend.min.js) is also 404, so scroll-triggered
   entrance animations (fadeInLeft/fadeInRight/etc.) never fire and the
   affected elements — hero copy, testimonial carousel, contact-bar text —
   stay stuck at their pre-animation opacity:0. Force them visible. */
.elementor-invisible{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* The rotating headline ("Sayat") relies on JS to show only the active
   line; without it both copies of the dynamic text render stacked/inline
   at once. Show only the marked-active one. */
.elementor-headline-dynamic-text{ display:none !important; }
.elementor-headline-dynamic-text.elementor-headline-text-active{
  display:inline !important;
}

/* Swiper's own JS/CSS never load, so carousels (product highlight images,
   testimonials, partner logos) have no slide-sizing rules at all. This
   fallback renders them as a clean single static frame (the first slide)
   instead of a vertical stack of full-size, unclipped images. */
.swiper-container{ position:relative; overflow:hidden; }
.swiper-wrapper{ display:flex; }
.swiper-slide{ flex:0 0 100%; width:100%; }

/* A handful of image widgets (logo mark, banner pair, top-bar image) ship
   with an empty container in this export — the <img> itself was stripped
   out of the static snapshot, so there's no element left to style. Give
   the empty slot a neutral placeholder instead of a jarring blank gap. */
.elementor-widget-image .elementor-widget-container:not(:has(img)){
  min-height:160px;
  border-radius:var(--sm-radius);
  background:var(--sm-paper-alt);
}

#wrapper,
#main,
#content,
.site-content,
.container{
  background:transparent !important;
}

.elementor-section-wrap > .elementor-section,
.elementor-widget-wrap{
  background-color:transparent;
}

/* Generic section spacing rhythm */
.elementor-top-section{
  padding-top:var(--sm-space-2);
  padding-bottom:var(--sm-space-2);
}

/* ---------------------------------------------------------------------- */
/* 2. Header / top bar / navigation                                        */
/*    This page is an Elementor Canvas template — there is no OceanWP     */
/*    #header/#footer chrome in the markup, only a stack of top-level      */
/*    Elementor sections. The first section is the contact/top bar, the   */
/*    second is the nav, and the last is the copyright bar, so those are  */
/*    targeted structurally (:first-of-type / :last-of-type) instead.     */
/* ---------------------------------------------------------------------- */
#header,
.site-header,
#masthead{
  background:var(--sm-card) !important;
  border-bottom:1px solid var(--sm-line) !important;
}

.top-bar,
#top-bar,
.ocean-top-bar{
  background:var(--sm-navy) !important;
  color:#fff !important;
}
.top-bar a, .top-bar span, .top-bar li{ color:#e9edf1 !important; }

/* First top-level section = contact / address strip */
.elementor-3784 > .elementor-section.elementor-top-section:first-of-type,
.elementor-location-header .elementor-top-section:first-of-type{
  background-color:var(--sm-navy) !important;
}
.elementor-3784 > .elementor-section.elementor-top-section:first-of-type,
.elementor-3784 > .elementor-section.elementor-top-section:first-of-type *,
.elementor-location-header .elementor-top-section:first-of-type,
.elementor-location-header .elementor-top-section:first-of-type *{
  color:#e9edf1 !important;
}
.elementor-3784 > .elementor-section.elementor-top-section:first-of-type .elementor-icon,
.elementor-location-header .elementor-top-section:first-of-type .elementor-icon{
  color:var(--sm-brand) !important;
}

/* Second top-level section = main nav bar */
.elementor-3784 > .elementor-section.elementor-top-section:nth-of-type(2),
.elementor-location-header .elementor-top-section:nth-of-type(2){
  background-color:var(--sm-card) !important;
  border-bottom:1px solid var(--sm-line);
}

/* Inner pages (product / product-category) share Elementor header/footer
   templates (elementor-location-header / elementor-location-footer)
   instead of the homepage's inline elementor-3784 sections — mirror the
   same navy/copyright treatment there so every page matches. */
.elementor-location-footer .elementor-top-section{
  background-color:var(--sm-navy-dark) !important;
  padding-top:var(--sm-space-5) !important;
  padding-bottom:var(--sm-space-5) !important;
}
.elementor-location-footer .elementor-top-section,
.elementor-location-footer .elementor-top-section p,
.elementor-location-footer .elementor-top-section span,
.elementor-location-footer .elementor-top-section li,
.elementor-location-footer .elementor-top-section .elementor-heading-title{
  color:#a9b6c2 !important;
}
.elementor-location-footer .elementor-top-section a{
  color:#f2c9a8 !important;
}
.elementor-location-footer .elementor-top-section a:hover{
  color:#fff !important;
}

/* Last top-level section = copyright / footer bar */
.elementor-3784 > .elementor-section.elementor-top-section:last-of-type{
  background-color:var(--sm-navy-dark) !important;
  padding-top:var(--sm-space-5) !important;
  padding-bottom:var(--sm-space-5) !important;
}
.elementor-3784 > .elementor-section.elementor-top-section:last-of-type,
.elementor-3784 > .elementor-section.elementor-top-section:last-of-type p,
.elementor-3784 > .elementor-section.elementor-top-section:last-of-type span,
.elementor-3784 > .elementor-section.elementor-top-section:last-of-type .elementor-heading-title{
  color:#a9b6c2 !important;
}
.elementor-3784 > .elementor-section.elementor-top-section:last-of-type a{
  color:#f2c9a8 !important;
}
.elementor-3784 > .elementor-section.elementor-top-section:last-of-type a:hover{
  color:#fff !important;
}

.elementor-nav-menu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sm-space-2);
}
#menu-2-61b30dc6 {
    padding-left: 10px;
    flex-direction: column;
    align-items: flex-start;
}
#menu-1-e79141d a {
    color: #fff !important;
}

.elementor-nav-menu .menu-item > a.elementor-item,
nav.elementor-nav-menu--main a.elementor-item{
  color:var(--sm-ink) !important;
  font-weight:600;
  font-size:15px;
  padding:10px 14px !important;
  border-radius:var(--sm-radius-sm);
  transition:background-color .18s ease, color .18s ease;
}

.elementor-nav-menu .menu-item > a.elementor-item:hover,
.elementor-nav-menu .menu-item > a.elementor-item.elementor-item-active{
  background:var(--sm-brand) !important;
  color:#fff !important;
}

/* Mobile burger toggle button */
.elementor-menu-toggle{
  color:var(--sm-ink) !important;
  border:2px solid var(--sm-line);
  border-radius:var(--sm-radius-sm);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.elementor-menu-toggle:hover{
  border-color:var(--sm-brand);
  color:var(--sm-brand) !important;
}
.elementor-menu-toggle .elementor-menu-toggle__icon--open,
.elementor-menu-toggle .elementor-menu-toggle__icon--close{
  font-size:20px;
}

/* CSS-drawn hamburger/close icon: the eicon webfont this button relies on
   (elementor-icons.min.css) is not part of this static export, so we draw
   the glyph with pure CSS instead of depending on that missing font file. */
.elementor-menu-toggle{ position:relative; }
.elementor-menu-toggle__icon--open,
.elementor-menu-toggle__icon--close{
  position:absolute;
  top:50%;
  left:50%;
  margin:-10px 0 0 -10px;
  width:20px;
  height:20px;
}
.elementor-menu-toggle__icon--open::before,
.elementor-menu-toggle__icon--open::after,
.elementor-menu-toggle__icon--open{
  background:currentColor;
}
.elementor-menu-toggle__icon--open{
  position:absolute;
  width:20px;
  height:2px;
}
.elementor-menu-toggle__icon--open::before,
.elementor-menu-toggle__icon--open::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:currentColor;
}
.elementor-menu-toggle__icon--open::before{ top:-6px; }
.elementor-menu-toggle__icon--open::after{ top:6px; }
.elementor-menu-toggle__icon--close::before,
.elementor-menu-toggle__icon--close::after{
  content:"";
  position:absolute;
  top:9px;
  left:0;
  width:20px;
  height:2px;
  background:currentColor;
}
.elementor-menu-toggle__icon--close::before{ transform:rotate(45deg); }
.elementor-menu-toggle__icon--close::after{ transform:rotate(-45deg); }

/* Dropdown submenu */
.elementor-nav-menu__container .sub-menu,
.elementor-nav-menu .sub-menu{
  background:var(--sm-card) !important;
  border:1px solid var(--sm-line) !important;
  border-radius:var(--sm-radius);
  box-shadow:var(--sm-shadow-lg) !important;
  overflow:hidden;
}
.elementor-nav-menu .sub-menu a{ color:var(--sm-ink) !important; }
.elementor-nav-menu .sub-menu a:hover{ background:var(--sm-paper-alt) !important; }

/* ---------------------------------------------------------------------- */
/* 2.1 Nav visibility states — Elementor's own core CSS (frontend.min.css) */
/*     is 404 in this export, so NOTHING governs which of the three nav   */
/*     pieces (desktop inline nav / burger button / mobile dropdown nav)  */
/*     shows at a given width. Without these rules all three render at    */
/*     once, permanently, at every breakpoint — this is what made the     */
/*     menu "unusable". custom-theme.js toggles the .sm-menu-open class   */
/*     on the dropdown <nav> and aria-expanded on the toggle button.      */
/* ---------------------------------------------------------------------- */
.elementor-nav-menu__container:not(.elementor-nav-menu--dropdown){
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
}
.elementor-menu-toggle{
  display:none;
  cursor:pointer;
}
.elementor-nav-menu--dropdown{
  display:none !important;
  flex-direction:column;
  position:absolute;
  left:50%;
  top:100%;
  width:100vw;
  transform:translateX(-50%);
  z-index:1000;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
}
.elementor-nav-menu--dropdown.sm-menu-open{
  display:flex !important;
}

@media (max-width:1024px){
  .elementor-nav-menu__container:not(.elementor-nav-menu--dropdown){
    display:none;
  }
  .elementor-menu-toggle{
    display:flex;
  }
  .elementor-element-61b30dc6,
  .elementor-nav-menu--toggle{
    position:relative;
  }
}

/* Mobile dropdown panel (burger open state) */
.elementor-nav-menu--dropdown{
  background:var(--sm-card) !important;
  border-top:1px solid var(--sm-line);
  box-shadow:var(--sm-shadow-lg);
}
.elementor-nav-menu--dropdown a.elementor-item{
  color:var(--sm-ink) !important;
  border-bottom:1px solid var(--sm-line);
  display:block;
  padding:14px 18px !important;
}

/* Mobile-tappable submenus (defensive — no .sub-menu exists in the current
   markup, but custom-theme.js toggles this class if one is ever added) */
@media (max-width:1024px){
  .elementor-nav-menu--dropdown li > .sub-menu{
    display:none;
  }
  .elementor-nav-menu--dropdown li.sm-submenu-open > .sub-menu{
    display:block;
  }
}

/* Burger <-> close icon swap driven by aria-expanded (set by custom-theme.js) */
.elementor-menu-toggle .elementor-menu-toggle__icon--close{
  display:none;
}
.elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open{
  display:none;
}
.elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close{
  display:block;
}

/* Logo area breathing room */
.elementor-widget-theme-site-logo img,
.custom-logo,
#logo img{
  max-height:56px;
  width:auto;
}

/* ---------------------------------------------------------------------- */
/* 3. Buttons (Elementor / WooCommerce / theme)                            */
/* ---------------------------------------------------------------------- */
.elementor-button,
a.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
button.single_add_to_cart_button,
.wp-block-button__link{
  background:var(--sm-brand) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:700 !important;
  font-family:var(--sm-font-body) !important;
  padding:12px 28px !important;
  letter-spacing:.02em;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.elementor-button:hover,
a.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover,
button.single_add_to_cart_button:hover,
.wp-block-button__link:hover{
  background:var(--sm-brand-dark) !important;
  transform:translateY(-2px);
  box-shadow:var(--sm-shadow) !important;
  color:#fff !important;
}
.elementor-button:active,
.woocommerce a.button:active{
  transform:translateY(0);
}

.elementor-button.elementor-button-info,
.elementor-button[href*="tel:"]{
  background:var(--sm-navy) !important;
}
.elementor-button.elementor-button-info:hover,
.elementor-button[href*="tel:"]:hover{
  background:var(--sm-navy-dark) !important;
}

/* ---------------------------------------------------------------------- */
/* 4. Cards / boxed content (Elementor icon-box, WooLentor, etc.)          */
/* ---------------------------------------------------------------------- */
.elementor-icon-box-wrapper,
.woolentor-el-box,
.wl-single-cat,
.elementor-widget-woolentor-product-category-list .cat-item{
  background:var(--sm-card) !important;
  border-radius:var(--sm-radius) !important;
  box-shadow:var(--sm-shadow) !important;
  border:1px solid var(--sm-line);
  transition:transform .2s ease, box-shadow .2s ease;
}
.elementor-icon-box-wrapper:hover,
.woolentor-el-box:hover,
.wl-single-cat:hover{
  transform:translateY(-4px);
  box-shadow:var(--sm-shadow-lg) !important;
}

.elementor-icon-box-icon .elementor-icon{
  color:var(--sm-brand) !important;
}

/* ---------------------------------------------------------------------- */
/* 5. WooCommerce product grid                                             */
/* ---------------------------------------------------------------------- */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
/* OceanWP's own float+percentage grid (.col.span_1_of_2/3/4) fights our
   CSS-grid layout above — under display:grid a percentage width is resolved
   against the grid track, not the row, so cards collapsed to slivers.
   Neutralize it and let the grid own sizing instead. */
.woocommerce ul.products li.product,
body .oceanwp-row .span_1_of_2,
body .oceanwp-row .span_1_of_3,
body .oceanwp-row .span_1_of_4 {
    width: 100% !important;
    float: none !important;
}
.owp-quick-view {

}
ul.products li.product,
.woocommerce ul.products li.product{
  background:var(--sm-card);
  border-radius:var(--sm-radius) !important;
  border:1px solid var(--sm-line);
  padding:var(--sm-space-4) !important;
  box-shadow:var(--sm-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product .woo-entry-inner {
    position: relative;
}.woocommerce ul.products li.product .woo-entry-inner li.image-wrap {position: static;}
ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:var(--sm-shadow-lg);
  border-color:var(--sm-brand);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:16px !important;
  margin:var(--sm-space-2) 0 !important;
}

.woocommerce ul.products li.product .price{
  color:var(--sm-brand-dark) !important;
  font-weight:700;
  font-size:18px;
}
.woocommerce ul.products li.product .price ins{
  color:var(--sm-brand-dark) !important;
  text-decoration:none;
}
.woocommerce ul.products li.product .price del{
  color:var(--sm-ink-soft) !important;
  opacity:.7;
}

.woocommerce span.onsale{
  background:var(--sm-navy) !important;
  border-radius:999px;
  font-weight:700;
}

.star-rating span::before,
.woocommerce .star-rating::before{
  color:#e0b83a !important;
}

/* Quick view / add-to-cart icons on hover overlay */
.oceanwp-woo-quick-view a,
.add_to_cart_button{
  border-radius:999px !important;
}

/* ---------------------------------------------------------------------- */
/* 5.5 Category/product page chrome — banner, sidebar, breadcrumbs         */
/*     (product-category / product templates, not present on the          */
/*     homepage, so these had no styling until now)                       */
/* ---------------------------------------------------------------------- */
.page-header{
  background:var(--sm-paper-alt) !important;
  border-bottom:1px solid var(--sm-line);
  padding:var(--sm-space-6) 0 !important;
}
.woocommerce-breadcrumb,
.elementor-widget-woocommerce-breadcrumb{
  color:var(--sm-ink-soft) !important;
  font-size:14px;
  margin-bottom:var(--sm-space-4) !important;
}
.woocommerce-breadcrumb a,
.elementor-widget-woocommerce-breadcrumb a{ color:var(--sm-ink-soft) !important; }
.woocommerce-breadcrumb a:hover,
.elementor-widget-woocommerce-breadcrumb a:hover{ color:var(--sm-brand) !important; }
.elementor-widget-woocommerce-product-related h2{
  text-align:center;
  margin:var(--sm-space-7) 0 var(--sm-space-5) !important;
}

.sidebar-container .sidebar-box,
.sidebar-container .widget{
  background:var(--sm-card);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  box-shadow:var(--sm-shadow);
  padding:var(--sm-space-4) !important;
  margin-bottom:var(--sm-space-4) !important;
}
.sidebar-container .widget-title{
  font-size:16px !important;
  margin-bottom:var(--sm-space-3) !important;
}

/* Single-product gallery ships with inline opacity:0, waiting for
   WooCommerce's own JS (jQuery, 404 here) to reveal it once loaded. */
.woocommerce-product-gallery{
  opacity:1 !important;
}

/* The WOOF product-filter widget stays visibility:hidden until its own JS
   (jQuery, 404 in this export) reveals it — force it visible so the sidebar
   isn't a blank box on every category page. */
.wpfFilterWrapper{
  visibility:visible !important;
}

.woocommerce-pagination ul,
nav.pagination ul{
  display:flex;
  gap:var(--sm-space-2);
  list-style:none;
}
.woocommerce-pagination .page-numbers,
nav.pagination .page-numbers{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  border-radius:var(--sm-radius-sm);
  border:1px solid var(--sm-line);
  color:var(--sm-ink) !important;
  padding:0 10px;
}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination a.page-numbers:hover,
nav.pagination .page-numbers.current,
nav.pagination a.page-numbers:hover{
  background:var(--sm-brand) !important;
  border-color:var(--sm-brand) !important;
  color:#fff !important;
}

/* ---------------------------------------------------------------------- */
/* 6. Forms / filters / search                                             */
/* ---------------------------------------------------------------------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea{
  background:var(--sm-card) !important;
  border:1.5px solid var(--sm-line) !important;
  border-radius:var(--sm-radius-sm) !important;
  color:var(--sm-ink) !important;
  padding:10px 14px !important;
  font-family:var(--sm-font-body) !important;
  transition:border-color .18s ease;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus{
  border-color:var(--sm-brand) !important;
  outline:none;
}

.chosen-container .chosen-single{
  border-radius:var(--sm-radius-sm) !important;
  border:1.5px solid var(--sm-line) !important;
  background:var(--sm-card) !important;
}

/* ---------------------------------------------------------------------- */
/* 7. Widgets: headings, dividers                                          */
/* ---------------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title{
  position:relative;
}

.elementor-divider-separator{
  border-top-color:var(--sm-line) !important;
}

.elementor-widget-woolentor-section-title .title,
.wl-section-title{
  color:var(--sm-ink) !important;
}

/* ---------------------------------------------------------------------- */
/* 8. Logo showcase / partners strip                                       */
/* ---------------------------------------------------------------------- */
.logoshowcase_wrap{
  background:var(--sm-paper-alt) !important;
  border-radius:var(--sm-radius);
  padding:var(--sm-space-5);
}

/* ---------------------------------------------------------------------- */
/* 9. Tables (TablePress)                                                   */
/* ---------------------------------------------------------------------- */
table.tablepress{
  border-collapse:separate !important;
  border-spacing:0;
  border:1px solid var(--sm-line) !important;
  border-radius:var(--sm-radius);
  overflow:hidden;
  font-family:var(--sm-font-body);
}
table.tablepress thead th{
  background:var(--sm-navy) !important;
  color:#fff !important;
  font-family:var(--sm-font-head);
}
table.tablepress tbody tr:nth-child(even){
  background:var(--sm-paper-alt) !important;
}
table.tablepress tbody tr:hover{
  background:#f3e4d6 !important;
}

/* ---------------------------------------------------------------------- */
/* 10. Footer                                                               */
/* ---------------------------------------------------------------------- */
#footer,
.site-footer,
footer#colophon{
  background:var(--sm-navy) !important;
  color:#dbe2e9 !important;
}
#footer a,
.site-footer a,
footer#colophon a{
  color:#f2c9a8 !important;
}
#footer a:hover,
.site-footer a:hover{
  color:#fff !important;
}
#footer .widget-title,
.site-footer .widget-title,
#footer h1, #footer h2, #footer h3, #footer h4{
  color:#fff !important;
}
#footer-bottom,
.footer-bottom{
  background:var(--sm-navy-dark) !important;
  color:#a9b6c2 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

/* ---------------------------------------------------------------------- */
/* 11. Mini-cart / cart icon                                                */
/* ---------------------------------------------------------------------- */
.cart-icon-count,
.mini-cart-icon .cart-icon-count{
  background:var(--sm-brand) !important;
  color:#fff !important;
}

.widget_shopping_cart .total .amount,
.woocommerce-mini-cart__total .amount{
  color:var(--sm-brand-dark) !important;
  font-weight:700;
}

/* ---------------------------------------------------------------------- */
/* 12. Breadcrumbs / misc                                                   */
/* ---------------------------------------------------------------------- */
.woocommerce-breadcrumb,
.breadcrumbs{
  color:var(--sm-ink-soft) !important;
}
.woocommerce-breadcrumb a{
  color:var(--sm-brand) !important;
}

/* ---------------------------------------------------------------------- */
/* 13. Responsive tweaks                                                    */
/* ---------------------------------------------------------------------- */
@media (max-width:1024px){
  .elementor-top-section{
    padding-top:var(--sm-space-6);
    padding-bottom:var(--sm-space-6);
  }
}

@media (max-width:767px){
  body{ font-size:15px; }

  .elementor-top-section{
    padding-top:var(--sm-space-5);
    padding-bottom:var(--sm-space-5);
  }

  ul.products li.product{
    padding:var(--sm-space-3) !important;
  }

  .elementor-button,
  a.elementor-button{
    width:100%;
    text-align:center;
    padding:14px 20px !important;
  }

  .elementor-menu-toggle{
    width:40px;
    height:40px;
  }
}

@media (max-width:480px){
  h1, .elementor-heading-title{ font-size:26px !important; }
  h2{ font-size:22px !important; }
}

/* ==========================================================================
   14. Full-page section rhythm — every top-level Elementor section below
       the header gets consistent spacing + a container cap so content
       doesn't stretch edge-to-edge on wide screens.
   ========================================================================== */
.elementor-3784 > .elementor-section.elementor-top-section{
  padding-left:var(--sm-space-4);
  padding-right:var(--sm-space-4);
}
.elementor-3784 > .elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container{
  max-width:1200px;
}

/* ---------------------------------------------------------------------- */
/* 15. Hero section (welcome + animated headline + intro copy)             */
/* ---------------------------------------------------------------------- */
.elementor-element-65b06b5b{
  background:linear-gradient(135deg, var(--sm-navy) 0%, var(--sm-navy-dark) 100%) !important;
  border-radius:var(--sm-radius-lg);
  margin:var(--sm-space-6) var(--sm-space-4);
  padding-top:var(--sm-space-8) !important;
  padding-bottom:var(--sm-space-8) !important;
  text-align:center;
}
.elementor-element-65b06b5b .elementor-heading-title,
.elementor-element-65b06b5b .elementor-headline-plain-text{
  color:#fff !important;
}
.elementor-element-65b06b5b .elementor-headline-dynamic-text{
  color:var(--sm-brand) !important;
  font-weight:800;
}
.elementor-element-65b06b5b p{
  color:#dbe2e9 !important;
  max-width:760px;
  margin:var(--sm-space-4) auto 0 !important;
  font-size:17px;
}
.elementor-element-65b06b5b h1,
.elementor-element-65b06b5b h2{
  font-size:clamp(28px, 4vw, 44px) !important;
}

/* ---------------------------------------------------------------------- */
/* 16. Category showcase — custom flip-card grid (raw HTML widget, no      */
/*     bundled stylesheet shipped with this static export, so it renders  */
/*     as an unstyled stack of images/links without these rules)          */
/* ---------------------------------------------------------------------- */
.elementor-element-f368e31 h3.elementor-heading-title{
  text-align:center;
  margin-bottom:var(--sm-space-5);
  position:relative;
}
.elementor-element-f368e31 .wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:var(--sm-space-4);
  padding:0;
  margin:0;
  list-style:none;
}
.elementor-element-f368e31 .wrapper .card{
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:var(--sm-radius);
  overflow:hidden;
  background:var(--sm-card);
  border:1px solid var(--sm-line);
  box-shadow:var(--sm-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.elementor-element-f368e31 .wrapper .card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sm-shadow-lg);
}
.elementor-element-f368e31 .wrapper .card .face{
  position:absolute;
  inset:0;
}
.elementor-element-f368e31 .wrapper .card .face1{
  display:flex;
  flex-direction:column;
}
.elementor-element-f368e31 .wrapper .card .face1 .content{
  display:flex;
  flex-direction:column;
  height:100%;
}
.elementor-element-f368e31 .wrapper .card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  position:absolute;
  inset:0;
}
.elementor-element-f368e31 .wrapper .card h3{
  position:relative;
  margin:0;
  margin-top:auto;
  z-index:1;
  width:100%;
  padding:var(--sm-space-3) var(--sm-space-2);
  background:linear-gradient(to top, rgba(32,28,24,.85), rgba(32,28,24,0));
  color:#fff !important;
  font-size:14px !important;
  text-align:center;
}
.elementor-element-f368e31 .wrapper .card .face2{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(217,99,30,.92);
  opacity:0;
  transition:opacity .2s ease;
  z-index:2;
}
.elementor-element-f368e31 .wrapper .card:hover .face2{
  opacity:1;
}
.elementor-element-f368e31 .wrapper .card .face2 a{
  color:#fff;
  font-weight:700;
  border:2px solid #fff;
  border-radius:999px;
  padding:8px 18px;
  font-size:13px;
}
.elementor-element-f368e31 .wrapper .card .face2 a:hover{
  background:#fff;
  color:var(--sm-brand-dark) !important;
}

/* "Go to store" button row */
.elementor-element-84dcbdf{
  text-align:center;
  padding-top:0 !important;
}

/* ---------------------------------------------------------------------- */
/* 17. Product spotlight rows (Цемент / Пеноплэкс) + testimonials wrapper  */
/* ---------------------------------------------------------------------- */

.elementor-element-4941f22 .elementor-heading-title a,
.elementor-element-60880cf .elementor-heading-title a{
  color:var(--sm-brand-dark) !important;
}
.elementor-element-4941f22 p,
.elementor-element-60880cf p{
  color:var(--sm-ink-soft) !important;
}
.elementor-element-4941f22 .elementor-image-carousel-wrapper,
.elementor-element-60880cf .elementor-image-carousel-wrapper{
  border-radius:var(--sm-radius);
  overflow:hidden;
}
.elementor-widget-image-carousel .swiper-slide-inner{
  border-radius:var(--sm-radius);
  overflow:hidden;
  min-height:220px;
  background-size:cover;
  background-position:center;
}

/* The image-carousel column was removed from each row (data-id 1e99f5d /
   e091bd1 in index.html) — the remaining text column was still a 50%-wide
   grid half, so stretch it to fill the row instead of leaving half empty. */
.elementor-element-3d70b90,
.elementor-element-6072cbc{
  width:100% !important;
}

/* Swiper nav arrows used by product carousels / partners / testimonials */
.elementor-swiper-button{
  background:var(--sm-card) !important;
  color:var(--sm-ink) !important;
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  box-shadow:var(--sm-shadow) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .18s ease, color .18s ease;
}
.elementor-swiper-button:hover{
  background:var(--sm-brand) !important;
  color:#fff !important;
}

/* Testimonials */
.elementor-element-723011a6 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading .elementor-heading-title{
  text-align:center;
  margin-top:var(--sm-space-7);
  margin-bottom:var(--sm-space-5);
}
.elementor-testimonial{
  background:var(--sm-card);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  box-shadow:var(--sm-shadow);
  padding:var(--sm-space-5);
  height:100%;
}
.elementor-testimonial__text{
  color:var(--sm-ink-soft) !important;
  font-style:italic;
  line-height:1.6;
}
.elementor-testimonial__name{
  color:var(--sm-navy) !important;
  font-weight:700;
  font-family:var(--sm-font-head);
}
.elementor-testimonial__footer{
  margin-top:var(--sm-space-3);
  border-top:1px solid var(--sm-line);
  padding-top:var(--sm-space-3);
}

/* ---------------------------------------------------------------------- */
/* 18. Full-width banner image pair                                        */
/* ---------------------------------------------------------------------- */
.elementor-element-2a9d79d{
  margin-bottom:var(--sm-space-6);
}
.elementor-element-2a9d79d .elementor-container{
  gap:var(--sm-space-2);
}
.elementor-element-2a9d79d img{
  width:100%;
  display:block;
  border-radius:0;
  transition:transform .3s ease;
}
.elementor-element-2a9d79d .elementor-column{
  overflow:hidden;
  border-radius:var(--sm-radius);
}
.elementor-element-2a9d79d img:hover{
  transform:scale(1.03);
}

/* ---------------------------------------------------------------------- */
/* 19. Partners logo strip                                                 */
/* ---------------------------------------------------------------------- */
.elementor-element-74619ecb{
  background:var(--sm-paper-alt) !important;
  border-radius:var(--sm-radius-lg);
  margin:var(--sm-space-6) var(--sm-space-4);
  padding-top:var(--sm-space-6) !important;
  padding-bottom:var(--sm-space-6) !important;
}
.elementor-element-74619ecb h3.elementor-heading-title{
  text-align:center;
  margin-bottom:var(--sm-space-5);
}
.elementor-element-74619ecb .swiper-slide img{
  filter:grayscale(1);
  opacity:.7;
  transition:filter .2s ease, opacity .2s ease;
}
.elementor-element-74619ecb .swiper-slide img:hover{
  filter:grayscale(0);
  opacity:1;
}

/* ---------------------------------------------------------------------- */
/* 20. Advantages / feature boxes (image-box widgets, not icon-box — the   */
/*     generic rule in section 4 only targets .elementor-icon-box-wrapper) */
/* ---------------------------------------------------------------------- */
.elementor-element-5a9d5b7a > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading .elementor-heading-title{
  text-align:center;
  margin-bottom:var(--sm-space-5);
}
.elementor-widget-image-box .elementor-image-box-wrapper{
  text-align:center;
  position:relative;
  margin-top:28px;
  transition:transform .2s ease, box-shadow .2s ease;
}

.elementor-widget-image-box .elementor-image-box-description{
  color:var(--sm-ink) !important;
  font-weight:600;
  font-size:15px;
  margin:0;
}
.elementor-column.elementor-col-50.elementor-inner-column{
    margin: 10px;
      background:var(--sm-card);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  box-shadow:var(--sm-shadow);
  padding:var(--sm-space-6) var(--sm-space-4) var(--sm-space-4);
}
.elementor-widget-icon.elementor-absolute{
    margin: 0 auto;
  width:auto !important;
  z-index:2;
  pointer-events:none;
}
/* These two rows (4 badge cards, "Наши преимущества") sit flush against the
   heading above and each other — the badges' -28px offset ate into the
   heading text and into the row above with zero gap. Reserve the space. */
.elementor-element-c2ddc28,
.elementor-element-9bfb256{
  margin-top:32px;
}
.elementor-widget-icon.elementor-absolute .elementor-icon{
  background:var(--sm-brand);
  color:#fff !important;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  box-shadow:var(--sm-shadow);
}

/* ---------------------------------------------------------------------- */
/* 21. Location / map                                                      */
/* ---------------------------------------------------------------------- */
.elementor-element-f8d6679{
  margin-top:var(--sm-space-4);
}
.elementor-element-f8d6679 iframe{
  width:100%;
  min-height:360px;
  border-radius:var(--sm-radius);
  box-shadow:var(--sm-shadow);
  border:1px solid var(--sm-line);
}
.elementor-element-7ab2659a .elementor-heading-title{
  text-align:center;
  margin-top:var(--sm-space-7);
  margin-bottom:var(--sm-space-4);
}

/* ---------------------------------------------------------------------- */
/* 22. Responsive tweaks for the sections above                            */
/* ---------------------------------------------------------------------- */
@media (max-width:1024px){

}

@media (max-width:767px){
    .woocommerce ul.products {
    grid-template-columns: 1fr 1fr;
}
  .elementor-element-65b06b5b{
    margin:var(--sm-space-4);
    padding-top:var(--sm-space-6) !important;
    padding-bottom:var(--sm-space-6) !important;
  }
  .elementor-element-f368e31 .wrapper{
    grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:var(--sm-space-3);
  }
  .elementor-element-2a9d79d .elementor-container{
    flex-direction:column;
  }
  .elementor-widget-image-box .elementor-image-box-wrapper{
    margin-top:24px;
  }
}
@media (max-width:550px){
    .woocommerce ul.products {
    grid-template-columns:  1fr;
}

}
[data-id="75abf206"], [data-id="2a9d79d"], .elementor-screen-only {
    display: none !important;
}
.elementor-container {
    max-width: 1200px;
}
.wpfFilterVerScroll label {
    display: flex;align-items: center;
    flex-direction: row;
}