/* ===================================================================
   MONR / ROFFOOD — refinement over Orvana styles.css.
   COLOUR: keep the template's teal brand + cream base (60-30-10).
   Red is used ONLY as a 10% accent — CTAs (the "action" colour) and
   the logo — to tie in the red ROFFOOD sign without cheapening.
   Headings, nav, footer, structure stay teal (original).
   =================================================================== */
:root{
  --monr-red:   #E11723;   /* accent — exact red sampled from the ROFFOOD sign */
  --monr-red-2: #B8121C;   /* accent hover (darker) */
}

[id]{ scroll-margin-top:120px; }
html{ scroll-behavior:smooth; }

/* -------------------------------------------------------------------
   RED ACCENT — filled call-to-action buttons + logo only
   ------------------------------------------------------------------- */
.tf-btn.style-btn-fill-pri{ background-color:var(--monr-red) !important; color:#fff !important; }
.tf-btn.style-btn-fill-sec{ background-color:var(--monr-red) !important; color:#fff !important; }
.tf-btn.style-btn-fill-pri:hover,
.tf-btn.style-btn-fill-sec:hover{ background-color:var(--monr-red-2) !important; }

/* ROFFOOD wordmark — red on the white header pill, white in the footer */
.brand-mark{ display:inline-flex; align-items:center; text-decoration:none; }
.brand-mark .brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-mark .brand-name{
  font-family:"Unbounded",sans-serif; font-weight:800; font-size:22px;
  letter-spacing:-.02em; color:var(--monr-red); text-transform:uppercase;
}
.brand-mark .brand-sub{
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:8.5px;
  letter-spacing:.34em; margin-top:5px; color:#9AA7A2; text-transform:uppercase;
}
.brand-mark.is-white .brand-name{ color:#fff; }
.brand-mark.is-white .brand-sub{ color:rgba(255,255,255,.5); }

/* -------------------------------------------------------------------
   HONESTY — hide fabricated reviews / discounts / cart count
   ------------------------------------------------------------------- */
.rate-product,
.infor_rate,
.list-badge,
.badge-sale,
.price-old,
.number-count,
.section-testimonial .rate-list{ display:none !important; }
.price-new{ font-family:"Sora",sans-serif; }

/* footer phone on one line */
.infor-phone{ white-space:nowrap; }

/* -------------------------------------------------------------------
   QUALITY FLOOR
   ------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6,.text-display,.title_sld,.sect-head{ text-wrap:balance; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--monr-red); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ===================================================================
   TYPOGRAPHY — Onest (body, full Cyrillic) + Unbounded (display).
   Bolder, tighter headings with a clear scale.
   =================================================================== */
body{ font-family:"Onest",sans-serif; letter-spacing:-0.01em; }

/* display headings — Unbounded, bold, tight */
.title_sld, .sect-head, .b-title, h1, h2, .h1, .h2{
  font-family:"Unbounded",sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-0.03em;
  line-height:1.08;
}
/* sub-headings / card titles — Onest, bold (Unbounded too wide for small sizes) */
h3, h4, h5, h6, .h3, .h4, .h5, .h6, .name-product, .title-pop, .product-infor-name{
  font-family:"Onest",sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
}

/* type scale (Unbounded runs wide, so display sizes are tuned down) */
.title_sld{ font-size:clamp(33px, 4.2vw, 54px) !important; }
.sect-head{ font-size:clamp(27px, 3vw, 39px) !important; }
.b-title{ font-size:clamp(26px, 2.8vw, 38px) !important; }
.sect-head{ margin-bottom:14px; }

/* ===================================================================
   SPACING — one consistent vertical rhythm for every section
   =================================================================== */
.flat-spacing{ padding-top:100px; padding-bottom:100px; }
.flat-spacing-2{ padding-top:100px; padding-bottom:100px; }
@media (max-width:1199px){
  .flat-spacing, .flat-spacing-2{ padding-top:72px; padding-bottom:72px; }
}
@media (max-width:767px){
  .flat-spacing, .flat-spacing-2{ padding-top:56px; padding-bottom:56px; }
}

/* ===================================================================
   FINISHING TOUCHES
   =================================================================== */
/* readable body rhythm */
body{ line-height:1.6; }
p{ line-height:1.7; }

/* small red accent underline beneath centred section headings */
.sect-head{ position:relative; padding-bottom:20px; }
.sect-head::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:54px; height:3px; border-radius:2px; background:var(--monr-red);
}

/* hero heading breathing room */
.sld_content .title_sld{ margin-bottom:22px; }

/* buttons: a touch more presence + consistent radius */
.tf-btn{ letter-spacing:-0.01em; }

/* ===================================================================
   ROUND 2 TWEAKS
   =================================================================== */
/* hero — full viewport height */
.tf-slideshow{ height:100vh; min-height:600px; }
.tf-slideshow .swiper, .tf-slideshow .swiper-wrapper, .tf-slideshow .swiper-slide,
.tf-slideshow .slider-wrap, .tf-slideshow .sld_image{ height:100%; }
.tf-slideshow .sld_image img{ height:100%; width:100%; object-fit:cover; }

/* slider arrows — a bit smaller */
.tf-sw-nav{ width:44px !important; height:44px !important; font-size:20px !important; }

/* nav hover underline — red instead of mint */
.item-link .text::before{ background-color:var(--monr-red) !important; }

/* header icons — red on hover (search / wishlist / cart / account) */
.box-nav-icon .nav-icon-item:hover,
.box-nav-icon .nav-icon-item:hover i{ color:var(--monr-red) !important; }

/* product card titles — ~50% larger */
.name-product{ font-size:24px !important; line-height:1.25; }

/* ===================================================================
   INNER-PAGE HEADER — solid teal bar (no hero behind it)
   =================================================================== */
.tf-header.inner-solid{ position:sticky; top:0; background:var(--primary); box-shadow:0 6px 24px -14px rgba(9,32,30,.5); }
.tf-header.inner-solid .header-inner{ background:transparent !important; border:none !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.tf-header.inner-solid .brand-name{ color:#fff !important; }
.tf-header.inner-solid .brand-sub{ color:rgba(255,255,255,.55) !important; }
.tf-header.inner-solid .item-link .text,
.tf-header.inner-solid .item-link .text i,
.tf-header.inner-solid .box-nav-support .info .title,
.tf-header.inner-solid .box-nav-support .info a,
.tf-header.inner-solid .nav-icon-item,
.tf-header.inner-solid .nav-icon-item i{ color:#fff !important; }
.tf-header.inner-solid .box-nav-support .ic-wrap{ background:rgba(255,255,255,.16) !important; }
.tf-header.inner-solid .br-line{ background:rgba(255,255,255,.25) !important; }
.tf-header.inner-solid .btn-mobile-menu span,
.tf-header.inner-solid .btn-mobile-menu span::before,
.tf-header.inner-solid .btn-mobile-menu span::after{ background-color:#fff !important; }
/* keep the red hover accent on inner header too */
.tf-header.inner-solid .box-nav-icon .nav-icon-item:hover,
.tf-header.inner-solid .box-nav-icon .nav-icon-item:hover i{ color:var(--monr-secondary) !important; }

/* clip testimonial carousel off-screen slides (targeted — keeps sticky/body intact) */
.section-tesimonial, .section-testimonial{ overflow:hidden; }

/* eliminate the tiny real horizontal scroll from off-screen offcanvas (inner sticky already static; homepage header is absolute) */
html, body{ overflow-x:hidden; }

/* ===================================================================
   HEADER CTA BUTTON + reduced-nav layout
   =================================================================== */
.header-cta{ padding:11px 22px; margin-left:6px; white-space:nowrap; }
.header-cta .text-btn, .header-cta span{ color:#fff !important; }
/* on the solid teal inner header, keep the red CTA crisp */
.tf-header.inner-solid .header-cta{ box-shadow:0 8px 20px -10px rgba(0,0,0,.45); }

/* ===================================================================
   PHASE 1 — HEADER FIXES (override earlier rules)
   =================================================================== */
/* phone block sits on its MINT (--secondary) pill -> dark green text, not white */
.tf-header.inner-solid .box-nav-support .info .title{ color:var(--primary) !important; opacity:.85; }
.tf-header.inner-solid .box-nav-support .info a,
.tf-header.inner-solid .box-nav-support .info a:hover{ color:var(--primary) !important; }
.tf-header.inner-solid .box-nav-support .ic-wrap{ background:var(--primary) !important; }
.tf-header.inner-solid .box-nav-support .ic-wrap .icon{ color:#fff !important; }
/* icons -> RED on hover (both header variants) */
.tf-header .box-nav-icon .nav-icon-item:hover,
.tf-header .box-nav-icon .nav-icon-item:hover i,
.tf-header.inner-solid .box-nav-icon .nav-icon-item:hover,
.tf-header.inner-solid .box-nav-icon .nav-icon-item:hover i{ color:var(--monr-red) !important; }

/* ===================================================================
   PHASE 7 — RED ACCENT on secondary pages (harmonious, subtle)
   =================================================================== */
/* consistent red underline beneath the H1 of every inner page-title */
.s-page-title h1.page-title{ position:relative; display:inline-block; }
.s-page-title h1.page-title::after{
  content:""; display:block; width:64px; height:4px; margin-top:18px;
  border-radius:2px; background:var(--monr-red);
}
/* left-aligned section-heading accent for inner content sections */
.sect-head-left{ position:relative; padding-bottom:16px; }
.sect-head-left::after{
  content:""; position:absolute; left:0; bottom:0;
  width:48px; height:3px; border-radius:2px; background:var(--monr-red);
}

/* ===================================================================
   PHASE 8 fixes — price/old, about intro title, stray accent
   =================================================================== */
/* hide crossed-out "old price" (all say "Под заказ" now -> looks silly) */
.price-old{ display:none !important; }
/* about intro heading ~25% smaller so it fits on two lines */
.intro-title-sm{ font-size:clamp(26px,2.4vw,38px) !important; line-height:1.15 !important; }

/* ===================================================================
   INNER HEADER — contain the phone pill (was sticking out / clipped)
   =================================================================== */
.tf-header.inner-solid .header-inner{ padding-left:40px !important; padding-right:40px !important; }
.tf-header.inner-solid .box-nav-support{
  margin-right:0 !important;
  border-radius:100px !important;
  padding:10px 24px 10px 12px !important;
  align-self:center !important;
  gap:12px !important;
}
.tf-header.inner-solid .box-nav-support .ic-wrap{ width:46px !important; height:46px !important; }
.tf-header.inner-solid .box-nav-support .ic-wrap .icon{ font-size:22px !important; }

/* ===================================================================
   INNER PAGES now use the homepage floating white-pill header
   -> push page-title content below the floating pill
   =================================================================== */
.s-page-title{ padding-top:180px !important; }
@media (max-width:1200px){ .s-page-title{ padding-top:120px !important; } }
@media (max-width:768px){  .s-page-title{ padding-top:100px !important; } }

/* ===================================================================
   HERO SLIDESHOW — soft colour overlay so white text stays readable
   (different tone per slide, ~35% — teal / red / amber)
   =================================================================== */
.tf-slideshow .sld_image{ position:relative; }
.tf-slideshow .sld_image::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
}
.tf-slideshow .swiper-slide:nth-child(3n+1) .sld_image::after{
  background:linear-gradient(90deg, rgba(11,87,85,.46) 0%, rgba(11,87,85,.14) 60%, rgba(11,87,85,.05) 100%);
}
.tf-slideshow .swiper-slide:nth-child(3n+2) .sld_image::after{
  background:linear-gradient(90deg, rgba(225,23,35,.42) 0%, rgba(225,23,35,.12) 60%, rgba(225,23,35,.04) 100%);
}
.tf-slideshow .swiper-slide:nth-child(3n+3) .sld_image::after{
  background:linear-gradient(90deg, rgba(240,176,0,.40) 0%, rgba(240,176,0,.12) 60%, rgba(240,176,0,.04) 100%);
}
/* keep the template's absolute centering — just ensure text sits above overlay */
.tf-slideshow .sld_content{ z-index:3; }

/* ===================================================================
   ABOUT page — first hero image fixed to 550px height (client request)
   =================================================================== */
.monr-about-hero .image{ border-radius:16px; overflow:hidden; }
.monr-about-hero .image img{
  width:100% !important; height:550px !important;
  object-fit:cover !important; object-position:center; display:block;
}
@media (max-width:991px){ .monr-about-hero .image img{ height:420px !important; } }
@media (max-width:575px){ .monr-about-hero .image img{ height:320px !important; } }

/* ===================================================================
   Rounded corners on homepage imagery (client request)
   - "Оптовые поставки под ваш бренд" banner photo
   - "Направления производства" category tiles (~18px)
   =================================================================== */
.banner-v01 .banner-image{ border-radius:20px; overflow:hidden; }
.banner-v01 .banner-image img{ border-radius:20px; display:block; width:100%; height:100%; object-fit:cover; }
.section-category .category-v01 .cate-image{ border-radius:18px; overflow:hidden; }
.section-category .category-v01 .cate-image img{ border-radius:18px; }