/* ==================================================================
   Jozardan — Modern Design Layer
   ------------------------------------------------------------------
   Loaded AFTER main.css. Purely presentational: it refines
   typography, color, spacing, radii, shadows, motion and adds
   full RTL/LTR polish + a responsive pass.

   IMPORTANT: This file changes NO behaviour. It never touches
   .js-* hooks, the preloader, the custom cursor, GSAP/ScrollMagic
   triggers, Swiper internals or Barba containers — only how things
   look. Contents:

     01. Design tokens
     02. Base & accessibility
     03. Typography scale
     04. Buttons
     05. Header & navigation
     06. Hero / masthead
     07. Section headings & rhythm
     08. About section (previously unstyled)
     09. Categories (portfolio)
     10. Products (blog cards)
     11. Footer
     12. RTL / LTR support
     13. Responsive refinements
     14. Motion & performance
   ================================================================== */

/* ------------------------------------------------------------------
   01. Design tokens
   ------------------------------------------------------------------ */
:root {
  /* Brand — kept recognisable, tuned for contrast */
  --accent-color: #0a4d8c;          /* refined navy */
  --accent-color-strong: #073c6e;
  --accent-color-soft: #e7f0f9;
  --secondary-color: #b88768;       /* earthy tan */
  --brand-green: #3f9d57;           /* agricultural highlight */
  --brand-green-soft: #eaf6ee;
  --color-dark: #16181d;
  --ink-900: #14161a;
  --ink-700: #33383f;
  --ink-500: #5b626b;
  --ink-400: #7a828c;
  --surface: #ffffff;
  --surface-beige: #fcf7f4;
  --surface-muted: #f4f1ee;
  --border-soft: rgba(20, 22, 26, 0.08);
  --border-softer: rgba(20, 22, 26, 0.06);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows — soft, layered, modern */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(16, 24, 40, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(16, 24, 40, 0.28);
  --shadow-accent: 0 14px 30px -12px rgba(10, 77, 140, 0.5);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.32s;

  /* Fonts (families loaded in the head) */
  --font-primary: "Work Sans", "Noto Sans Arabic", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-secondary: "Work Sans", "Noto Sans Arabic", system-ui, sans-serif;
}

/* Arabic-script languages lead with a face that has full coverage */
[dir="rtl"] {
  --font-primary: "Noto Sans Arabic", "Work Sans", system-ui, sans-serif;
  --font-secondary: "Noto Sans Arabic", "Work Sans", system-ui, sans-serif;
}

/* ------------------------------------------------------------------
   02. Base & accessibility
   ------------------------------------------------------------------ */
body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-700);
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
}

a {
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Visible, on-brand focus for keyboard users (kept off for mouse) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

img {
  max-width: 100%;
  height: auto;
}

/* Smooth in-page navigation for the anchor menu + a horizontal-overflow
   safety net. `clip` (not `hidden`) avoids creating a scroll container,
   so sticky headers / scroll triggers keep working. */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* ------------------------------------------------------------------
   03. Typography scale — fluid & modern
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  color: var(--ink-900);
  letter-spacing: -0.015em;
  line-height: 1.18;
  font-weight: 700;
}

.sectionHeading__title {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

@media (max-width: 991px) {
  .sectionHeading__title {
    font-size: clamp(1.55rem, 1.2rem + 2vw, 2rem);
    line-height: 1.2;
  }
}

.sectionHeading__subtitle {
  color: var(--accent-color);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------------
   04. Buttons
   ------------------------------------------------------------------ */

/* About-section CTA — was entirely unstyled */
.theme-btn.btn-style-one,
a.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.95rem 2rem;
  border-radius: var(--r-pill);
  background: var(--accent-color);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  box-shadow: var(--shadow-accent);
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.theme-btn.btn-style-one:hover,
a.theme-btn:hover {
  color: #fff;
  background: var(--accent-color-strong);
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -14px rgba(10, 77, 140, 0.6);
}

.theme-btn.btn-style-one:active,
a.theme-btn:active {
  transform: translateY(-1px);
}

/* Hero "simple" button — refine the animated underline treatment */
.button.-simple {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  gap: 0.2em;
}

.button.-simple::before {
  height: 2px;
  border-radius: var(--r-pill);
}

/* Rounded corners on the boxed button variants */
.button.-md,
.button.-white,
.button.-accent,
.button.-secondary,
.button.-dark,
.button.-grey {
  border-radius: var(--r-pill);
}

/* Language switcher (desktop) — modern segmented control.
   Darker glass so white text stays crisp over any hero image, with the
   current language highlighted as an active pill. */
.lang-item {
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  background: rgba(12, 16, 22, 0.42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.5);
}

.lang-item .lang-btn {
  height: 34px;
  padding: 0 15px;
  border: 0 !important;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.lang-item .lang-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 0 !important;
  color: #fff;
}

/* Active language = solid pill (detected from <html lang> + link href) */
html[lang="ku"] .lang-item .lang-btn[href*="lang=ku"],
html[lang="ar"] .lang-item .lang-btn[href*="lang=ar"],
html[lang="en"] .lang-item .lang-btn[href*="lang=en"] {
  background: #fff !important;
  color: var(--accent-color) !important;
}

/* Sticky (light) header re-colours the switcher */
.header.is-sticky .lang-item {
  border-color: var(--border-soft);
  background: var(--surface-muted);
  box-shadow: none;
}
.header.is-sticky .lang-item .lang-btn {
  color: var(--ink-700);
}
.header.is-sticky .lang-item .lang-btn:hover {
  background: rgba(10, 77, 140, 0.1) !important;
  color: var(--accent-color);
}
html[lang="ku"] .header.is-sticky .lang-item .lang-btn[href*="lang=ku"],
html[lang="ar"] .header.is-sticky .lang-item .lang-btn[href*="lang=ar"],
html[lang="en"] .header.is-sticky .lang-item .lang-btn[href*="lang=en"] {
  background: var(--accent-color) !important;
  color: #fff !important;
}

/* Mobile-menu flag switcher — clean rounded flag chips (drops the
   heavy solid button treatment from the theme's inline styles) */
.lang-nav {
  gap: 12px;
}
.lang-nav a.btn-default {
  height: auto;
  padding: 6px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.lang-nav a.btn-default:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}
.lang-nav .btn-default img {
  width: 34px !important;
  height: 24px;
  object-fit: cover;
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-xs);
}

/* ------------------------------------------------------------------
   05. Header & navigation
   ------------------------------------------------------------------ */
.header__bar {
  padding: 0 3rem;
}

/* Gradient scrim behind the (transparent) header so the white logo, nav
   and language switcher stay legible over light hero imagery. Removed
   once the header goes sticky (it gets its own frosted surface then). */
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 170px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 14, 0.55) 0%,
    rgba(8, 10, 14, 0.22) 45%,
    rgba(8, 10, 14, 0) 100%
  );
  transition: opacity var(--dur) var(--ease);
}
.header.is-sticky::before {
  opacity: 0;
}

/* Crisp white header content over imagery */
.header:not(.is-sticky) .nav li a,
.header:not(.is-sticky) .header__logo,
.header:not(.is-sticky) .header__menu button {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}

/* Logo sizing — compact, tasteful, crisp (theme scaled it up to 240px) */
.header__logo a img {
  max-width: none;
  width: auto;
  height: 52px;
  transition: height var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.header.is-sticky .header__logo a img {
  height: 46px;
}
@media (max-width: 991px) {
  .header__logo a img {
    height: 42px;
  }
}

/* Sticky bar: clean frosted surface instead of a hard slab */
.header.is-sticky .header__bar {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-softer);
}

.header.is-sticky .header__bar .nav li a,
.header.is-sticky .header__bar > *,
.header.is-sticky .header__menu button {
  color: var(--ink-900);
}

.header__logo a img {
  transition: transform var(--dur) var(--ease);
}
.header__logo a:hover img {
  transform: translateY(-1px) scale(1.02);
}

/* Nav links — modern weight + refined animated underline */
.header .nav li a {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.menu .nav > li > a::after {
  height: 2px;
  bottom: -0.5rem;
  border-radius: var(--r-pill);
}

/* Hamburger / close controls become tidy tappable chips */
.header__menu button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.header__menu button:hover {
  background: rgba(255, 255, 255, 0.14);
}
.header.is-sticky .header__menu button:hover {
  background: var(--surface-muted);
}

/* ------------------------------------------------------------------
   06. Hero / masthead
   ------------------------------------------------------------------ */
.masthead {
  background-color: #0e1116;
}

/* The theme doesn't define .container-fluid and isn't globally
   border-box, so .px-32's padding overflows the hero (invisible in LTR,
   but it shifts the whole page in RTL). Contain it safely. */
.container-fluid {
  box-sizing: border-box;
  max-width: 100%;
}
.masthead .swiper-slide,
.masthead .swiper-wrapper {
  max-width: 100%;
}

/* Use the small-viewport unit so the hero never hides behind mobile
   browser chrome (falls back to 100vh where unsupported). */
@supports (height: 100svh) {
  .masthead {
    height: 100svh;
  }
}

/* Make the art-directed hero image cover the whole hero cleanly */
.masthead__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Refined scrim on the hero art — keeps a base darkening everywhere
   (so the white title stays legible) with a little extra top & bottom.
   Overrides the theme's flat rgba(0,0,0,.4) on the same pseudo. */
.masthead__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 14, 0.46) 0%,
    rgba(8, 10, 14, 0.3) 45%,
    rgba(8, 10, 14, 0.55) 100%
  );
}

.masthead__title {
  font-size: clamp(2.6rem, 1.8rem + 5vw, 5rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.masthead-pagination__number {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------
   07. Section headings & rhythm
   ------------------------------------------------------------------ */
.about-section,
#ItemsPath.layout-pt-lg {
  scroll-margin-top: 90px;
}

.sectionHeading.-left-line .sectionHeading__subtitle::before {
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent-color);
}

/* ------------------------------------------------------------------
   08. About section — full modern styling (was unstyled)
   ------------------------------------------------------------------ */
.about-section {
  background: var(--surface-beige) !important;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

/* The heading row sits directly in the section with no .container to
   absorb Bootstrap's -15px side margins, so it overflows 30px (invisible
   in LTR, but it inflates the RTL layout viewport). Neutralise it. */
.about-section > .row {
  margin-left: 0;
  margin-right: 0;
}

.about-section .inner-column {
  padding-inline: 6px;
}

.about-section .sec-title {
  margin-bottom: 1.75rem;
}

.about-section .sec-title .title {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--brand-green-soft);
  color: var(--brand-green);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.about-section .sec-title h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink-900);
}

.about-section .text {
  position: relative;
  margin-top: 1.1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink-500);
  font-size: 0.98rem;
  line-height: 1.85;
}

.about-section .text span[style] {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--brand-green) !important;
  font-size: 1rem !important;
  font-weight: 700;
}

.about-section .btn-box {
  margin-top: 2rem;
}

/* About image — modern framed, rounded, elevated */
.about-section .image-column .inner-column {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.about-section .image-1 {
  margin: 0;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-section .image-1 a,
.about-section .image-1 img {
  display: block;
  width: 100%;
}

.about-section .image-1 img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.about-section .image-1:hover img {
  transform: scale(1.04);
}

/* ------------------------------------------------------------------
   09. Categories (portfolio slider)
   ------------------------------------------------------------------ */
.portfolio__image .ratio {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.portfolio__image .ratio-img {
  transition: transform 0.6s var(--ease);
}

.js-sectionSlider .swiper-slide:hover .portfolio__image .ratio-img {
  transform: scale(1.05);
}

.portfolio__content {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding-top: 28px;
  padding-bottom: 20px;
  box-shadow: 0 -18px 40px -20px rgba(16, 24, 40, 0.22);
}

.portfolio__title {
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
  font-weight: 700;
  color: var(--ink-900);
}

/* ------------------------------------------------------------------
   10. Products (blog cards)
   ------------------------------------------------------------------ */
.blog.-hover {
  height: 100%;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border-softer);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  will-change: transform;
}

.blog.-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-soft);
}

.blog__image {
  border-radius: var(--r-md);
  overflow: hidden;
}

.blog__image .ratio {
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Category badge → modern floating pill */
.blog__category {
  top: 12px;
  right: 12px;
  left: auto;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(10, 77, 140, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-sm);
}

.blog__content {
  padding: 6px 8px 10px;
}

.blog__content.mt-20 {
  margin-top: 14px;
}

.blog__info span {
  color: var(--ink-400);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* The price line */
.blog__title {
  margin-top: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-color) !important;
  letter-spacing: 0;
}

.blog.-hover:hover .blog__title {
  color: var(--accent-color-strong) !important;
}

/* ------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------ */
.footer {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(10, 77, 140, 0.16) 0%, rgba(10, 77, 140, 0) 55%),
    var(--color-dark);
}

.footer__top {
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

.footer__title {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: #fff;
  opacity: 0.95;
}

.footer__item p,
.footer__item a {
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--dur) var(--ease);
}

.footer__item a:hover {
  color: #fff;
}

.footer__content__item span {
  color: var(--secondary-color);
  font-weight: 600;
}

.footer hr {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 14px 0;
}

/* Social icon buttons */
.footer__socials_content a {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  transition: transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.footer__socials_content a:hover {
  transform: translateY(-3px);
  background: var(--accent-color);
  border-color: var(--accent-color) !important;
}

.footer__bottom {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__bottom_text {
  color: rgba(255, 255, 255, 0.55);
}

.footer__bottom_text a:hover {
  color: #fff;
}

/* ------------------------------------------------------------------
   12. RTL / LTR support
   ------------------------------------------------------------------ */

/* Desktop language switcher position (theme uses physical margins) */
[dir="rtl"] .lang-item {
  margin-right: auto;
  margin-left: 36px;
}
@media (min-width: 1400px) {
  [dir="rtl"] .lang-item {
    margin-left: 48px;
    margin-right: auto;
  }
}

/* Nav item spacing uses margin-left in the theme; mirror it for RTL */
[dir="rtl"] .header .nav > li + li {
  margin-left: 0;
  margin-right: 1.5rem;
}
@media (min-width: 1400px) {
  [dir="rtl"] .header .nav > li + li {
    margin-right: 2.5rem;
    margin-left: 0;
  }
}

/* Animated nav underline grows from the correct edge */
[dir="rtl"] .menu .nav > li > a::after {
  left: auto;
  right: 0;
  transform-origin: right;
}

/* Hero "simple" button underline sits before the label in RTL */
[dir="rtl"] .button.-simple::before {
  margin-right: 0;
  margin-left: 0.625rem;
  transform-origin: right;
}

/* Section "left line" heading mirrors to the right edge */
[dir="rtl"] .sectionHeading.-left-line .sectionHeading__subtitle::before {
  margin-right: 0;
  margin-left: 1.25rem;
}

/* Product badge floats to the opposite corner */
[dir="rtl"] .blog__category {
  right: auto;
  left: 12px;
}

/* Product price/meta read from the right */
[dir="rtl"] .blog__title,
[dir="rtl"] .blog__info {
  text-align: right;
}

/* Footer socials/margins */
[dir="rtl"] .footer__socials_content {
  margin-left: 0;
  margin-right: -0.75rem;
}
[dir="rtl"] .footer__socials_content a + a {
  margin-left: 0;
  margin-right: 5px;
}
[dir="rtl"] .footer__content.pr-20 {
  padding-right: 0 !important;
  padding-left: 1.25rem !important;
}

/* Product price sits flush to the reading edge in RTL (theme adds a
   physical right padding via .pr-80) */
[dir="rtl"] .blog__title.pr-80 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* About: keep the tan/eyebrow and text alignment correct in RTL */
[dir="rtl"] .about-section .text,
[dir="rtl"] .about-section .sec-title {
  text-align: right;
}

/* Hero scroll cue + pagination live on sensible sides in RTL */
[dir="rtl"] .masthead__scroll,
[dir="rtl"] .masthead__socials {
  right: auto;
  left: 60px;
}
[dir="rtl"] .masthead__pagination_numbers {
  left: auto;
  right: 60px;
}

/* Phone numbers / prices stay logically LTR even inside RTL text */
[dir="rtl"] .sectionHeading__subtitle span[dir="ltr"] {
  unicode-bidi: embed;
}

/* ------------------------------------------------------------------
   13. Responsive refinements
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
  .header__bar {
    padding: 0 1.5rem;
  }
  .about-section .text {
    padding: 1rem 1.1rem;
  }
  /* The theme's off-canvas mobile menu holds elements wider than the
     viewport (a 100vw background and a calc(100%+60px) "back" bar).
     In LTR they bleed off-screen-right harmlessly, but in RTL they
     inflate the layout viewport and shift the page. Clip them at the
     menu (keeps vertical scroll; open/close animations unaffected). */
  .menu.js-menu {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .menu .mobile__back {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 0.96rem;
  }
  .container {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
  .blog__category {
    top: 8px;
    right: 8px;
    padding: 5px 10px;
    font-size: 0.66rem;
  }
  [dir="rtl"] .blog__category {
    right: auto;
    left: 8px;
  }
  .blog.-hover {
    padding: 8px;
  }
  .footer__bottom .footer__logo {
    margin-bottom: 6px;
  }
}

@media (max-width: 575px) {
  .about-section .sec-title h2 {
    line-height: 1.35;
  }
}

/* Small utility: prevent long product names from breaking the card */
.blog__info span,
.blog__title {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   14. Motion & performance
   ------------------------------------------------------------------ */

/* Respect user preference — quiets the heavy theme animations and
   keeps the site usable/performant for motion-sensitive visitors. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Crisper image scaling for the art-directed hero SVGs/PNGs */
.masthead__image img,
.blog__image img,
.portfolio__image img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ------------------------------------------------------------------
   15. Preloader ("logo loading") — modernised
   ------------------------------------------------------------------ */

/* Deep, on-brand backdrop with a soft glow instead of flat near-black */
.preloader__bg {
  background:
    radial-gradient(90% 120% at 50% 100%, rgba(10, 77, 140, 0.35) 0%, rgba(10, 77, 140, 0) 55%),
    #0b0f14;
}

/* The loader logo is a wide wordmark (viewBox 544×160 ≈ 3.4:1). The theme
   squeezes it into an 8.5rem SQUARE, so it renders small and letter-boxed.
   Match the box to the logo's aspect so it reads large and crisp, and the
   accent "fill-up" progress covers the whole mark. */
.preloader__progress {
  width: min(64vw, 19rem);
  height: min(19vw, 5.6rem);
  -webkit-mask-size: contain;
  mask-size: contain;
}
.preloader__img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/* ------------------------------------------------------------------
   16. Final look polish
   ------------------------------------------------------------------ */

/* Nav links: a touch more air + refined weight */
.header .nav li a {
  font-weight: 600;
}

/* Hairline separators between the light content sections for structure */
.about-section {
  border-top: 1px solid var(--border-softer);
}

/* Category & product sections: consistent generous vertical rhythm */
#ItemsPath.layout-pt-lg {
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* Products: tighter, more balanced meta line */
.blog__content {
  padding-top: 4px;
}

/* Footer logo: slightly more compact, aligned with the header sizing */
.footer__logo img {
  max-width: 170px;
}
@media (min-width: 1200px) {
  .footer__logo img {
    max-width: 180px;
  }
}

/* Buttons & links: never show the raw focus ring loss on click */
.theme-btn:focus:not(:focus-visible),
.button:focus:not(:focus-visible) {
  outline: none;
}