/* --------------------------------------------------------------
   IRANSans for Persian typography
   The font files are served from the project's configured web font source.
   Vazirmatn/Tahoma remain fallbacks if the remote font is unavailable.
   -------------------------------------------------------------- */
@font-face {
  font-family: "IRANSans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://raw.githubusercontent.com/akiarostami/iransans/main/files/IRANSansWeb.woff2") format("woff2");
}

@font-face {
  font-family: "IRANSans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://raw.githubusercontent.com/akiarostami/iransans/main/files/IRANSansWeb_Bold.woff2") format("woff2");
}

/**
* Template Name: Yummy
* Template URL: https://bootstrapmade.com/yummy-bootstrap-restaurant-website-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Amatic SC",  sans-serif;
  --nav-font: "Inter",  sans-serif;
}

/*
 * SHOKOOH BLUE PALETTE
 * Primary: #2E67B2 | Hover: #245B9F | Deep blue: #1F4F91
 * Soft surfaces: #F5F9FE / #EAF2FC | Dark mode remains deep navy with blue accents.
 * Existing selector order and component overrides are intentionally preserved to avoid regressions.
 */
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #172554; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #1E293B; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #2E67B2; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #64748B;  /* The default color of the main navmenu links */
  --nav-hover-color: #2E67B2; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #64748B; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #2E67B2; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

:root {
  --shokooh-white: #FFFFFF;
  --shokooh-navy: #172554;
  --shokooh-purple: #2E67B2;
  --shokooh-purple-dark: #1F4F91;

  --background-color: var(--shokooh-white);
  --default-color: var(--shokooh-navy);
  --heading-color: var(--shokooh-navy);
  --accent-color: var(--shokooh-purple);
  --surface-color: var(--shokooh-white);
  --contrast-color: var(--shokooh-white);
  --nav-color: var(--shokooh-navy);
  --nav-hover-color: var(--shokooh-purple);

  /* Bootstrap utility colors used by the public/login UI */
  --bs-danger: var(--shokooh-purple);
  --bs-danger-rgb: 46, 103, 178;
  --bs-success: var(--shokooh-purple-dark);
  --bs-success-rgb: 31, 79, 145;
  --bs-warning: var(--shokooh-purple);
  --bs-warning-rgb: 46, 103, 178;
    scroll-behavior: smooth;

  --radius-lg: 10vw;

}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #F5F9FE;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #0F172A;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #1E293B;
  --contrast-color: #ffffff;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(46, 103, 178, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #245B9F;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #312E81;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
  font-family: var(--default-font);
}

.header .logo span {
  color: var(--accent-color);
  font-size: 36px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 20px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: color-mix(in srgb, var(--nav-color) 80%, black 50%);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --heading-font: var(--default-font);
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 40px 0;
  position: relative;
}

.footer .icon {
  color: var(--accent-color);
  margin-right: 15px;
  font-size: 24px;
  line-height: 0;
}

.footer h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
}

.footer .address p {
  margin-bottom: 0px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer .copyright {
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 5px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 400;
  margin-bottom: 10px;
  font-family: var(--default-font);
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 92px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 56px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 400;
  padding: 0;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--default-font);
}

.section-title p {
  color: var(--heading-color);
  margin: 10px 0 0 0;
  font-size: 48px;
  font-weight: 500;
  font-family: var(--heading-font);
}

.section-title p .description-title {
  color: var(--accent-color);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 0;
  height: auto;
  display: block;
  padding: 0;              /* ⬅️ چسبیدن کامل به هدر */
  margin: 0;
}

/* کادر مستقل ویدیو — چسبیده به هدر، فقط گوشهٔ پایین-راست گرد */
.hero-media-box {
  position: relative;
  height: clamp(480px, 80vh, 760px);
  min-height: 0;
  overflow: hidden;

  /* ⬅️ فقط گوشهٔ پایین-راست گرد (سبک Unilever) */
  border-radius: 0;
   border-end-end-radius: var(--radius-lg);

  background: #ffffff !important;
  box-shadow: var(--shadow);
}

.hero-main-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 22px;
  background: linear-gradient(180deg,
      rgba(8,10,25,.50) 0%,
      transparent 34%,
      transparent 60%,
      rgba(8,10,25,.55) 100%);
  pointer-events: none;
}

.hero-brand-logo {
  height: clamp(44px, 7vw, 76px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.40));
}

/* ============ HERO — RESPONSIVE ============ */
@media (max-width: 767px) {
  .hero-media-box {
    height: clamp(240px, 46vh, 320px);
    border-radius: 0 0 var(--radius-lg) 0;   /* گردی فقط پایین-راست حفظ می‌شود */
  }
  .hero-video-overlay { padding-top: 14px; }
  .hero-brand-logo { height: clamp(36px, 11vw, 54px); }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about h3 {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
}

.about .book-a-table {
  text-align: center;
  border: 4px solid color-mix(in srgb, var(--default-color), transparent 30%);
  padding: 22px;
}

.about .book-a-table h3 {
  font-family: var(--default-font);
  margin: 0 0 0 0;
  font-size: 24px;
}

.about .book-a-table p {
  color: var(--accent-color);
  font-weight: 500;
  font-size: 28px;
  margin: 0;
}

.about .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 0 0 10px 30px;
  position: relative;
}

.about .content ul i {
  position: absolute;
  font-size: 20px;
  left: 0;
  top: -3px;
  color: var(--accent-color);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us .why-box {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 30px;
}

.why-us .why-box h3 {
  color: var(--contrast-color);
  font-family: var(--default-font);
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}

.why-us .why-box p {
  margin-bottom: 30px;
}

.why-us .why-box .more-btn {
  display: inline-block;
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  padding: 8px 40px 10px 40px;
  color: var(--contrast-color);
  transition: all ease-in-out 0.4s;
  border-radius: 50px;
}

.why-us .why-box .more-btn i {
  font-size: 14px;
}

.why-us .why-box .more-btn:hover {
  color: var(--accent-color);
  background: var(--surface-color);
}

.why-us .icon-box {
  background-color: var(--surface-color);
  text-align: center;
  padding: 40px 30px;
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.why-us .icon-box i {
  color: var(--accent-color);
  font-size: 32px;
  margin-bottom: 30px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  transition: 0.3s;
}

.why-us .icon-box h4 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 30px 0;
  font-family: var(--default-font);
}

.why-us .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.why-us .icon-box:hover i {
  color: var(--contrast-color);
  background: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  position: relative;
  padding: 0;
  min-height: 430px;
  overflow: hidden;
  isolation: isolate;
  background-color: transparent !important;
  background-image: url("../img/bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.stats-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 430px;
  display: flex;
  align-items: center;
  background: var(--background-color);
  border-radius: 0 0 110px 110px;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.12);
}

.stats-panel .container {
  width: 100%;
}

.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--default-color);
  font-weight: 700;
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

@media (max-width: 767px) {
  .stats {
    min-height: 560px;
    background-attachment: scroll;
  }

  .stats-panel {
    min-height: 560px;
    border-radius: 0 0 70px 70px;
  }
}

/*--------------------------------------------------------------
# Menu Section
--------------------------------------------------------------*/
.menu .nav-tabs {
  border: 0;
}

.menu .nav-link {
  background-color: var(--background-color);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 15px;
  padding: 10px 5px;
  transition: 0.3s;
  border-radius: 0;
  cursor: pointer;
  height: 100%;
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

@media (max-width: 575px) {
  .menu .nav-link {
    margin: 0 10px;
    padding: 10px 0;
  }
}

.menu .nav-link i {
  padding-right: 15px;
  font-size: 48px;
}

.menu .nav-link h4 {
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  font-family: var(--default-font);
}

@media (max-width: 575px) {
  .menu .nav-link h4 {
    font-size: 16px;
  }
}

.menu .nav-link:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.menu .nav-link.active {
  background-color: var(--background-color);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.menu .tab-content .tab-header {
  padding: 30px 0;
}

.menu .tab-content .tab-header p {
  font-size: 14px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 0;
}

.menu .tab-content .tab-header h3 {
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-color);
}

.menu .tab-content .menu-item {
  text-align-last: center;
}

.menu .tab-content .menu-item .menu-img {
  padding: 0 60px;
  margin-bottom: 15px;
}

.menu .tab-content .menu-item h4 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 5px;
  font-family: var(--default-font);
}

.menu .tab-content .menu-item .ingredients {
  font-family: var(--nav-font);
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 5px;
}

.menu .tab-content .menu-item .price {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item .testimonial-content {
  border-left: 3px solid var(--accent-color);
  padding-left: 30px;
}

.testimonials .testimonial-item .testimonial-img {
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0 0 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #477FC4;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Events Section
--------------------------------------------------------------*/
.events .container-fluid {
  padding: 0;
}

.events .event-item {
  background-size: cover;
  background-position: cente;
  min-height: 600px;
  padding: 30px;
}

@media (max-width: 575px) {
  .events .event-item {
    min-height: 500px;
  }
}

.events .event-item:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  inset: 0;
}

.events .event-item h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #ffffff;
  position: relative;
}

.events .event-item .price {
  color: #ffffff;
  border-bottom: 2px solid var(--accent-color);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  position: relative;
}

.events .event-item .description {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
}

.events .swiper-wrapper {
  height: auto;
}

.events .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.events .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.events .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Chefs Section
--------------------------------------------------------------*/
.chefs .team-member {
  background-color: var(--surface-color);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  transition: 0.3s;
}

.chefs .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.chefs .team-member .member-img:after {
  position: absolute;
  content: "";
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 100%;
  background-color: var(--surface-color);
  -webkit-mask: url("../img/team-shape.svg") no-repeat center bottom;
  mask: url("../img/team-shape.svg") no-repeat center bottom;
  -webkit-mask-size: contain;
  mask-size: contain;
  z-index: 1;
}

.chefs .team-member .social {
  position: absolute;
  right: -100%;
  top: 30px;
  opacity: 0;
  border-radius: 4px;
  transition: 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 60%);
  z-index: 2;
}

.chefs .team-member .social a {
  transition: color 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin: 15px 12px;
  display: block;
  line-height: 0;
  text-align: center;
}

.chefs .team-member .social a:hover {
  color: var(--default-color);
}

.chefs .team-member .social i {
  font-size: 18px;
}

.chefs .team-member .member-info {
  padding: 10px 15px 20px 15px;
}

.chefs .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
  font-family: var(--default-font);
}

.chefs .team-member .member-info span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.chefs .team-member .member-info p {
  font-style: italic;
  font-size: 14px;
  padding-top: 15px;
  line-height: 26px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.chefs .team-member:hover {
  transform: scale(1.08);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.chefs .team-member:hover .social {
  right: 8px;
  opacity: 1;
}

/*--------------------------------------------------------------
# Book A Table Section
--------------------------------------------------------------*/
.book-a-table .reservation-img {
  min-height: 500px;
  background-size: cover;
  background-position: center;
}

.book-a-table .reservation-form-bg {
  background: color-mix(in srgb, var(--default-color), transparent 97%);
}

.book-a-table .php-email-form {
  padding: 30px;
}

@media (max-width: 575px) {
  .book-a-table .php-email-form {
    padding: 20px;
  }
}

.book-a-table .php-email-form input[type=text],
.book-a-table .php-email-form input[type=email],
.book-a-table .php-email-form input[type=number],
.book-a-table .php-email-form input[type=date],
.book-a-table .php-email-form input[type=time],
.book-a-table .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 20%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.book-a-table .php-email-form input[type=text]:focus,
.book-a-table .php-email-form input[type=email]:focus,
.book-a-table .php-email-form input[type=number]:focus,
.book-a-table .php-email-form input[type=date]:focus,
.book-a-table .php-email-form input[type=time]:focus,
.book-a-table .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.book-a-table .php-email-form input[type=text]::placeholder,
.book-a-table .php-email-form input[type=email]::placeholder,
.book-a-table .php-email-form input[type=number]::placeholder,
.book-a-table .php-email-form input[type=date]::placeholder,
.book-a-table .php-email-form input[type=time]::placeholder,
.book-a-table .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.book-a-table .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 14px 60px;
  transition: 0.4s;
  border-radius: 4px;
}

.book-a-table .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
.gallery {
  overflow: hidden;
}

.gallery .swiper-wrapper {
  height: auto;
}

.gallery .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.gallery .swiper-pagination .swiper-pagination-bullet {
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  border: 0;
  width: 12px;
  height: 12px;
  opacity: 1;
}

.gallery .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
  opacity: 1;
}

.gallery .swiper-slide-active {
  text-align: center;
}

@media (min-width: 992px) {
  .gallery .swiper-wrapper {
    padding: 40px 0;
  }

  .gallery .swiper-slide-active {
    background: var(--background-color);
    border: 6px solid var(--accent-color);
    padding: 4px;
    z-index: 1;
    transform: scale(1.2);
    transition: none;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 20px 30px;
}

.contact .info-item .icon {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  margin-right: 15px;
}

.contact .info-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 5px 0;
  font-family: var(--default-font);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item .social-links a {
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  margin: 4px 6px 0 0;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.contact .info-item .social-links a:hover {
  color: var(--accent-color);
}

.contact .php-email-form {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-top: 30px;
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--surface-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px;
}

.header .lang-flag-btn,
.header .lang-flag-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
  background: transparent;
  text-decoration: none;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: 0.3s ease;
}

.header .lang-flag-btn.active {
  opacity: 1;
  filter: none;
  transform: scale(1);
}

.header .lang-flag-btn.inactive {
  opacity: 0.42;
  filter: grayscale(1);
  transform: scale(0.92);
}

.header .lang-flag-btn:hover {
  opacity: 1;
  filter: none;
  transform: scale(1.04);
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}

html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .text-center {
  text-align: center !important;
}

html[dir="rtl"] .section-title,
html[dir="rtl"] .contact,
html[dir="rtl"] .about,
html[dir="rtl"] .why-us {
  direction: rtl;
}

/* ==============================================================
   Shokooh bilingual typography & product presentation
   ============================================================== */

html[lang="fa"] body,
html[lang="fa"] input,
html[lang="fa"] textarea,
html[lang="fa"] select,
html[lang="fa"] button,
html[lang="fa"] option,
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4,
html[lang="fa"] h5,
html[lang="fa"] h6,
html[lang="fa"] p,
html[lang="fa"] a,
html[lang="fa"] span,
html[lang="fa"] li,
html[lang="fa"] label,
html[lang="fa"] .section-title,
html[lang="fa"] .menu .tab-header,
html[lang="fa"] .gslide-title,
html[lang="fa"] .gslide-description {
  font-family: "IRANSans", "Vazirmatn", Tahoma, sans-serif;
}

html[lang="fa"] .section-title,
html[lang="fa"] .menu .tab-header,
html[lang="fa"] .gslide-description {
  direction: rtl;
}

.product-card {
  height: 100%;
  background: var(--surface-color);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  transition: transform .3s ease, box-shadow .3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.11);
}

.product-card > a {
  display: block;
  overflow: hidden;
}

.product-img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  transition: transform .45s ease;
}

.product-card:hover .product-img {
  transform: scale(1.035);
}

.product-content {
  padding: 22px 22px 20px;
}

.product-content h4 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: var(--heading-color);
}

.product-detail {
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.product-detail-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
}

.product-detail p {
  margin: 0;
  color: var(--default-color);
  line-height: 1.8;
  font-size: 14px;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 15px;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.product-meta > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-meta i {
  color: var(--accent-color);
}

.product-empty {
  padding: 35px 15px;
}

.gallery-empty {
  width: 100%;
  padding: 55px 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.gallery-empty i {
  font-size: 42px;
  display: block;
  margin-bottom: 10px;
}

.gallery-empty p {
  margin: 0;
}

@media (max-width: 767px) {
  .product-img {
    height: 240px;
  }

  .product-content {
    padding: 18px;
  }

  .product-content h4 {
    font-size: 20px;
  }

  .language-switcher {
    margin: 0 6px;
  }

  .header .lang-flag-btn {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
}

/* ==============================================================
   SHOKOOH COLOR SYSTEM - WHITE / NAVY / PURPLE ONLY
   ==============================================================
   The original Yummy red/green/yellow accents are intentionally
   overridden here. This file is loaded after Bootstrap.
*/

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.text-danger,
.text-danger:hover,
.bg-danger,
.border-danger {
  --bs-btn-color: #FFFFFF !important;
  --bs-btn-bg: var(--shokooh-purple) !important;
  --bs-btn-border-color: var(--shokooh-purple) !important;
  --bs-btn-hover-color: #FFFFFF !important;
  --bs-btn-hover-bg: var(--shokooh-purple-dark) !important;
  --bs-btn-hover-border-color: var(--shokooh-purple-dark) !important;
  color: var(--shokooh-purple) !important;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.bg-danger {
  background-color: var(--shokooh-purple) !important;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.border-danger {
  border-color: var(--shokooh-purple) !important;
}

/* Full-page section flow for the one-screen storytelling layout */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

body {
  overflow-x: hidden;
}

main.main {
  scroll-snap-type: y proximity;
}

.section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Keep the existing header behavior but avoid overlap with full-viewport sections */
#hero.section,
#about.section,
#menu.section,
#testimonials.section,
#gallery.section,
#contact.section {
  min-height: 100vh;
  padding-top: clamp(72px, 8vh, 110px);
  padding-bottom: clamp(56px, 6vh, 90px);
}

@media (max-width: 1199px) {
  #hero.section,
  #about.section,
  #menu.section,
  #testimonials.section,
  #gallery.section,
  #contact.section {
    min-height: 100svh;
    padding-top: 88px;
    padding-bottom: 56px;
  }
}

.hero-brand {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  line-height: 1;
}

.hero-brand-fa {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 6px;
}

.hero-brand-en {
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  opacity: 0.88;
  letter-spacing: 0;
  text-transform: lowercase;
}

/* Products */
.menu-tabs-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 18px;
}

.menu-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 10px;
  min-width: max-content;
}

.menu-tabs .nav-item {
  flex: 0 0 auto;
}

.menu-content {
  overflow: hidden;
}

.product-scroll-shell {
  overflow: hidden;
}

.product-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.product-scroll-item {
  flex: 0 0 clamp(280px, 30vw, 360px);
  scroll-snap-align: start;
}

.product-scroll-row .product-card {
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
}

.product-scroll-row .product-img-link {
  display: block;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}

.product-scroll-row .product-img {
  border-radius: 18px 18px 0 0;
}

.product-card-body {
  padding: 18px 18px 20px;
}

.product-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
  line-height: 1.35;
}

.product-ingredients {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(23, 37, 84, 0.82);
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-meta-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(46, 103, 178, 0.08);
  color: #1f4f91;
  font-size: 0.85rem;
  font-weight: 600;
}

.product-scroll-empty {
  padding: 28px 0;
  color: rgba(23, 37, 84, 0.7);
}

@media (max-width: 767px) {
  .product-scroll-item {
    flex-basis: 84vw;
  }

  .product-card-body {
    padding: 16px 16px 18px;
  }

  .product-title {
    font-size: 1rem;
  }
}

/* Keep existing product hover behavior while preserving rounded corners */
.product-scroll-row .product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.11);
}

/* Light cleanup for sections that should remain visually consistent */
.about .content img,
.gallery .gallery-item img,
.testimonials .testimonial-item img {
  border-radius: 18px;
}

/* Product Horizontal Scroll Logic */
.product-scroll-shell {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.product-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  padding-bottom: 15px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.product-scroll-row::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.product-scroll-row {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.product-scroll-item {
  flex: 0 0 320px; /* عرض هر کارت محصول */
  scroll-snap-align: start;
}

@media (max-width: 576px) {
  .product-scroll-item {
    flex: 0 0 85%; /* در موبایل کمی عریض‌تر برای نمایش بهتر */
  }
}

/* Product Card Improvements */
.product-card {
  background: #fff;
  border-radius: 18px; /* طبق درخواست شما برای گوشه‌های گرد */
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.product-img-box {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-img {
  transform: scale(1.08);
}

.product-card-body {
  padding: 20px;
  flex-grow: 1;
}

.product-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #172554;
}

.ingredients {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.badge-meta {
  display: inline-block;
  padding: 5px 12px;
  background: #f0f4ff;
  color: #2E67B2;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 5px;
}

/* Ensure Gallery and other square items have border-radius */
.gallery-item, .gallery-item img, .about-img img {
  border-radius: 18px !important;
}

/* --- Horizontal Scroll Layout Updates --- */
.product-scroll-shell {
  width: 100%;
  overflow: hidden;
  padding: 10px 0 30px;
}

.product-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 15px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* Custom Scrollbar */
.product-scroll-row::-webkit-scrollbar {
  height: 6px;
}
.product-scroll-row::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.product-scroll-row::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 10px;
}

.product-scroll-item {
  flex: 0 0 300px; /* عرض ثابت برای هر کارت در سطر */
  scroll-snap-align: start;
}

@media (max-width: 576px) {
  .product-scroll-item {
    flex: 0 0 260px; /* کمی کوچک‌تر برای موبایل */
  }
}

.product-card {
  height: 100%;
  background: var(--surface-color);
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.product-img-box {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-body {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.ingredients {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-meta {
  margin-top: auto;
  display: flex;
  gap: 8px;
}

.badge-meta {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* LTR — انگلیسی */
html[dir="ltr"] .hero-media-box,
html:not([dir="rtl"]) .hero-media-box {
  border-radius: 0 0 var(--radius-lg) 0; /* پایین-راست */
}

/* RTL — فارسی */
html[dir="rtl"] .hero-media-box {
  border-radius: 0 0 0 var(--radius-lg); /* پایین-چپ */
}

html[dir="rtl"] #hero.hero-unilever-style .hero-video-overlay,
body.rtl #hero.hero-unilever-style .hero-video-overlay {
  justify-content: flex-start;
  direction: rtl;
}

/*
 * نسخه انگلیسی:
 * عنوان در پایین سمت چپ قرار می‌گیرد.
 */
html[dir="ltr"] #hero.hero-unilever-style .hero-video-overlay,
body.ltr #hero.hero-unilever-style .hero-video-overlay {
  justify-content: flex-start;
  direction: ltr;
}

/* ==========================================================================
   SHOKOOH THEME SWITCHER & DEEP NAVY DARK MODE ENGINE
   ========================================================================== */

/* Theme Switcher Header Controls */
.header-actions {
  display: flex;
  align-items: center;
}

.theme-switcher-dropdown {
  position: relative;
}

.theme-switcher-btn {
  background: transparent;
  border: none;
  color: var(--nav-color);
  font-family: var(--nav-font);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 20px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.theme-switcher-btn:hover,
.theme-switcher-btn[aria-expanded="true"] {
  color: var(--accent-color);
  background-color: rgba(46, 103, 178, 0.08);
}

.theme-switcher-btn .current-theme-icon {
  font-size: 1.15rem;
  color: #0284c7; /* Sky blue tone for icons */
}

.theme-switcher-btn .dropdown-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.theme-switcher-btn[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

/* Theme Dropdown Menu Styled like Provided Reference */
.theme-menu {
  min-width: 170px;
  padding: 6px;
  background-color: #0c1a3b !important;
  border: 1px solid #1e3567 !important;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  margin-top: 8px !important;
  z-index: 1050;
}

.theme-menu .dropdown-item {
  color: #e2e8f0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.theme-menu .dropdown-item .text-info-icon {
  font-size: 1.1rem;
  color: #38bdf8;
}

.theme-menu .dropdown-item .active-check {
  font-size: 1.1rem;
  color: #38bdf8;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.2s ease;
}

.theme-menu .dropdown-item:hover {
  background-color: #162c60;
  color: #ffffff;
}

.theme-menu .dropdown-item.active {
  background-color: #162c60;
  color: #ffffff;
}

.theme-menu .dropdown-item.active .active-check {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   DARK THEME PALETTE (Deep Navy Blue Palette)
   ========================================================================== */
html.dark-theme,
[data-theme="dark"] {
  --shokooh-navy-bg: #070d1e;
  --shokooh-surface: #0f1c3f;
  --shokooh-surface-alt: #152756;
  --shokooh-border: #1e3567;
  --shokooh-text: #f8fafc;
  --shokooh-text-muted: #94a3b8;

  --background-color: var(--shokooh-navy-bg);
  --surface-color: var(--shokooh-surface);
  --default-color: var(--shokooh-text);
  --heading-color: #ffffff;
  --nav-color: #cbd5e1;
  --nav-hover-color: #8eb7e8;
  --contrast-color: #ffffff;
}

html.dark-theme body,
[data-theme="dark"] body {
  background-color: var(--shokooh-navy-bg);
  color: var(--shokooh-text);
}

/* Header in Dark Theme */
html.dark-theme .header,
[data-theme="dark"] .header {
  background-color: rgba(7, 13, 30, 0.92);
  border-bottom: 1px solid var(--shokooh-border);
}

html.dark-theme .header.scrolled,
[data-theme="dark"] .header.scrolled {
  background-color: rgba(7, 13, 30, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Section Backgrounds Override in Dark */
html.dark-theme .light-background,
[data-theme="dark"] .light-background {
  background-color: var(--shokooh-surface) !important;
}

html.dark-theme .dark-background,
[data-theme="dark"] .dark-background {
  background-color: var(--shokooh-navy-bg) !important;
}

/* Cards & Modals */
html.dark-theme .modal-content,
[data-theme="dark"] .modal-content {
  background-color: var(--shokooh-surface);
  color: var(--shokooh-text);
  border: 1px solid var(--shokooh-border);
}

html.dark-theme .card,
html.dark-theme .product-card,
html.dark-theme .info-item,
[data-theme="dark"] .card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .info-item {
  background-color: var(--shokooh-surface);
  border-color: var(--shokooh-border);
  color: var(--shokooh-text);
}

/* Forms in Dark Theme */
html.dark-theme .form-control,
[data-theme="dark"] .form-control {
  background-color: var(--shokooh-surface-alt);
  border-color: var(--shokooh-border);
  color: #ffffff;
}

html.dark-theme .form-control:focus,
[data-theme="dark"] .form-control:focus {
  background-color: var(--shokooh-surface-alt);
  border-color: var(--shokooh-purple);
  color: #ffffff;
}

/* Language switcher in Dark */
html.dark-theme .lang-flag-btn,
[data-theme="dark"] .lang-flag-btn {
  border-color: var(--shokooh-border);
}

/* --------------------------------------------------------------
   Shokooh Light Theme
   Explicit light only. Default follows OS (see theme patch).
-------------------------------------------------------------- */
html[data-theme="light"] {
  --shokooh-navy-bg: #ffffff;
  --shokooh-surface: #ffffff;
  --shokooh-surface-alt: #f8fafc;
  --shokooh-border: #e2e8f0;
  --shokooh-text: #1f2937;
  --shokooh-text-muted: #64748b;

  --background-color: #ffffff;
  --surface-color: #ffffff;
  --default-color: #1f2937;
  --heading-color: #111827;
  --nav-color: #374151;
  --nav-hover-color: var(--shokooh-purple);
  --contrast-color: #ffffff;
}

/* Default + OS light: same light variables as explicit light */
@media (prefers-color-scheme: light) {
  html[data-theme="default"] {
    --shokooh-navy-bg: #ffffff;
    --shokooh-surface: #ffffff;
    --shokooh-surface-alt: #f8fafc;
    --shokooh-border: #e2e8f0;
    --shokooh-text: #1f2937;
    --shokooh-text-muted: #64748b;
    --background-color: #ffffff;
    --surface-color: #ffffff;
    --default-color: #1f2937;
    --heading-color: #111827;
    --nav-color: #374151;
    --nav-hover-color: var(--shokooh-purple);
    --contrast-color: #ffffff;
  }
}

html[data-theme="light"] body {
  background-color: var(--background-color);
  color: var(--default-color);
}

html[data-theme="light"] .header {
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--shokooh-border);
}

html[data-theme="light"] .theme-menu,
html[data-theme="default"]:not(.dark-theme) .theme-menu {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .theme-menu .dropdown-item,
html[data-theme="default"]:not(.dark-theme) .theme-menu .dropdown-item {
  color: #334155;
}

html[data-theme="light"] .theme-menu .dropdown-item:hover,
html[data-theme="light"] .theme-menu .dropdown-item.active,
html[data-theme="default"]:not(.dark-theme) .theme-menu .dropdown-item:hover,
html[data-theme="default"]:not(.dark-theme) .theme-menu .dropdown-item.active {
  color: #111827;
  background-color: #f1f5f9;
}

html[data-theme="light"] .light-background {
  background-color: #f8fafc !important;
}

html[data-theme="light"] .dark-background {
  background-color: #ffffff !important;
}

/* Default + no dark-theme class: only force light surfaces when OS is light.
   When OS is dark (or when we style partners/gallery as dark), do NOT paint white panels. */
@media (prefers-color-scheme: light) {
  html[data-theme="default"]:not(.dark-theme) .light-background:not(.partners-section):not(#partners):not(#gallery):not(.gallery) {
    background-color: #f8fafc !important;
  }
  html[data-theme="default"]:not(.dark-theme) .dark-background:not(.partners-section):not(#partners):not(#gallery):not(.gallery) {
    background-color: #ffffff !important;
  }
}

html[data-theme="light"] .modal-content,
html[data-theme="light"] .card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .info-item,
html[data-theme="default"]:not(.dark-theme) .modal-content,
html[data-theme="default"]:not(.dark-theme) .card,
html[data-theme="default"]:not(.dark-theme) .product-card,
html[data-theme="default"]:not(.dark-theme) .info-item {
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: var(--shokooh-border);
}

html[data-theme="light"] .form-control,
html[data-theme="default"]:not(.dark-theme) .form-control {
  color: var(--default-color);
  background-color: #ffffff;
  border-color: var(--shokooh-border);
}

html[data-theme="light"] .form-control:focus,
html[data-theme="default"]:not(.dark-theme) .form-control:focus {
  color: var(--default-color);
  background-color: #ffffff;
  border-color: var(--shokooh-purple);
}

/* ==============================================================
   1. Fix Footer Contrast & Colors in Light Mode
   ============================================================== */
html[data-theme="light"] .footer,
html[data-theme="default"]:not(.dark-theme) .footer {
  --background-color: #ffffff;
  --surface-color: #ffffff;
  --default-color: #1f2937;
  --heading-color: #111827;
  --contrast-color: #ffffff;

  color: #1f2937 !important;
  background-color: #ffffff !important;
}

html[data-theme="light"] .footer h4,
html[data-theme="default"]:not(.dark-theme) .footer h4 {
  color: #111827 !important;
}

html[data-theme="light"] .footer p,
html[data-theme="light"] .footer strong,
html[data-theme="light"] .footer span,
html[data-theme="default"]:not(.dark-theme) .footer p,
html[data-theme="default"]:not(.dark-theme) .footer strong,
html[data-theme="default"]:not(.dark-theme) .footer span {
  color: #374151;
}

html[data-theme="light"] .footer .social-links a,
html[data-theme="default"]:not(.dark-theme) .footer .social-links a {
  color: #4b5563;
  border-color: rgba(31, 41, 55, 0.2);
}

html[data-theme="light"] .footer .social-links a:hover,
html[data-theme="default"]:not(.dark-theme) .footer .social-links a:hover {
  color: var(--shokooh-purple, #2E67B2);
  border-color: var(--shokooh-purple, #2E67B2);
  background-color: rgba(46, 103, 178, 0.08);
}

html[data-theme="light"] .footer .copyright,
html[data-theme="default"]:not(.dark-theme) .footer .copyright {
  border-top: 1px solid rgba(31, 41, 55, 0.1);
  color: #6b7280;
}

html[data-theme="light"] .footer .credits,
html[data-theme="light"] .footer .credits a,
html[data-theme="default"]:not(.dark-theme) .footer .credits,
html[data-theme="default"]:not(.dark-theme) .footer .credits a {
  color: #6b7280;
}

html[data-theme="light"] .footer .credits a:hover,
html[data-theme="default"]:not(.dark-theme) .footer .credits a:hover {
  color: var(--shokooh-purple, #2E67B2);
}

/* ==============================================================
   2. Professional Alternating Gradient Backgrounds for Sections
   Only for explicit LIGHT theme — never for default (follows OS).
   ============================================================== */

html[data-theme="light"] .light-background:not(#about):not(.about):not(.stats):not(#stats),
html[data-theme="light"] main.main > section:nth-of-type(even):not(#about):not(.about):not(.stats):not(#stats),
html[data-theme="light"] #gallery,
html[data-theme="light"] #gallery.section,
html[data-theme="light"] #partners,
html[data-theme="light"] #partners.section,
html[data-theme="light"] #news,
html[data-theme="light"] #news.section,
html[data-theme="light"] .partners-section,
html[data-theme="light"] section.gallery {
    background-image: linear-gradient(135deg, #0055b8 0%, #0077d4 45%, #1aa8d8 100%) !important;
    background-color: #0077d4 !important;
}

/* Default + OS light: soft surface for About only.
   Gallery follows the dark panel treatment under Default (see end of file). */
@media (prefers-color-scheme: light) {
  html[data-theme="default"] #about.section {
    background-image: none !important;
    background-color: #F5F9FE !important;
  }
}

/* News & Articles */
.news { overflow: hidden; }
.news-scroll-shell { width: 100%; overflow: hidden; padding: 6px 2px 18px; }
.news-scroll-row { display: flex; gap: 24px; overflow-x: auto; padding: 8px 2px 16px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.news-card { flex: 0 0 calc((100% - 48px) / 3); min-width: 280px; scroll-snap-align: start; background: var(--surface-color, #fff); border-radius: 14px; overflow: hidden; box-shadow: 0 5px 24px rgba(0,0,0,.08); transition: transform .3s ease, box-shadow .3s ease; }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.news-image-wrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eee; }
.news-image-wrap img { width: 100%; height: 100%; object-fit: cover; display:block; transition: transform .45s ease; }
.news-card:hover .news-image-wrap img { transform: scale(1.06); }
.news-overlay { position:absolute; inset:0; display:flex; align-items:flex-end; padding:22px; color:#fff; opacity:0; transition:opacity .35s ease; background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.04) 100%); }
.news-card:hover .news-overlay { opacity:1; }
.news-overlay p { margin:0; font-size:.95rem; line-height:1.9; transform:translateY(10px); transition:transform .35s ease; }
.news-card:hover .news-overlay p { transform:translateY(0); }
.news-card-body { padding:18px 18px 20px; }
.news-kicker { color: var(--accent-color, #ce1212); font-size:.82rem; font-weight:700; margin-bottom:7px; }
.news-card h3 { margin:0; font-size:1.12rem; line-height:1.7; font-weight:800; color:var(--heading-color, #37373f); }
@media (max-width: 991px) { .news-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 575px) { .news-card { flex-basis: 85%; } .news-overlay { opacity:1; } }

/* Product scroll controls */
.product-scroll-shell { position: relative; overflow: visible; }
.product-scroll-row { cursor: grab; scroll-behavior: smooth; scrollbar-width: thin; padding-inline: 4px; }
.product-scroll-row:active { cursor: grabbing; }
.product-scroll-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border:0; border-radius:50%; background:var(--accent-color); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,.18); }
.product-scroll-prev { left:-20px; }
.product-scroll-next { right:-20px; }
[dir="rtl"] .product-scroll-prev { left:auto; right:-20px; }
[dir="rtl"] .product-scroll-next { right:auto; left:-20px; }
@media (max-width: 768px) { .product-scroll-btn { display:none; } }

/* Comments */
.comment-card { max-width:620px; background:var(--surface-color); padding:28px; border-radius:18px; box-shadow:0 8px 28px rgba(0,0,0,.08); }
.comment-card-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.comment-avatar { width:52px; height:52px; border-radius:50%; background:color-mix(in srgb,var(--accent-color),transparent 85%); color:var(--accent-color); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.comment-card h3 { font-size:1.05rem; margin:0 0 3px; font-weight:700; }
.comment-card-header span { color:color-mix(in srgb,var(--default-color),transparent 35%); font-size:.9rem; }
.comment-card-content { line-height:1.9; margin:0 0 16px; }
.comment-card time { font-size:.82rem; color:color-mix(in srgb,var(--default-color),transparent 45%); }

/* =============================================================
   Gallery Lightbox title / caption
   ============================================================= */
.glightbox-container .ginner-container.desc-bottom {
  align-items: center;
}

.glightbox-container .ginner-container.desc-bottom .gslide-description {
  width: min(92vw, 900px);
  margin: 12px auto 0;
  padding: 0;
  background: transparent;
}

.glightbox-container .ginner-container.desc-bottom .gdesc-inner {
  padding: 14px 22px 16px;
  border-radius: 14px;
  background: rgba(18, 18, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.glightbox-container .ginner-container.desc-bottom .gslide-title {
  margin: 0;
  color: #fff;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.9;
  text-align: left;
  letter-spacing: 0;
}

html[lang="fa"] .glightbox-container .ginner-container.desc-bottom .gslide-description {
  direction: rtl;
  text-align: right;
}

html[lang="fa"] .glightbox-container .ginner-container.desc-bottom .gslide-title {
  font-family: "IRANSans", "Vazirmatn", Tahoma, sans-serif;
  direction: rtl;
  text-align: right;
}

html[lang="en"] .glightbox-container .ginner-container.desc-bottom .gslide-description {
  direction: ltr;
  text-align: left;
}

@media (max-width: 767px) {
  .glightbox-container .ginner-container.desc-bottom .gslide-description {
    width: 94vw;
    margin-top: 8px;
  }

  .glightbox-container .ginner-container.desc-bottom .gdesc-inner {
    padding: 11px 15px 12px;
    border-radius: 12px;
  }

  .glightbox-container .ginner-container.desc-bottom .gslide-title {
    font-size: 14px;
    line-height: 1.8;
  }
}

/* About Us: video only, large and centered */
#about.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#about .about-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#about .about-video-wrapper {
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
  background: #000;
}

#about .about-video-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  #about .about-video-wrapper {
    width: 100%;
    border-radius: 14px;
  }
}

/* Explicit dark-mode contrast fixes for Why Choose Shokooh and Comments */
html.dark-theme .why-us .icon-box,
[data-theme="dark"] .why-us .icon-box,
html.dark-theme .comment-card,
[data-theme="dark"] .comment-card {
  background-color: var(--shokooh-surface-alt);
  border-color: var(--shokooh-border);
  color: var(--shokooh-text);
}

html.dark-theme .why-us .icon-box h4,
[data-theme="dark"] .why-us .icon-box h4,
html.dark-theme .why-us .icon-box p,
[data-theme="dark"] .why-us .icon-box p,
html.dark-theme .testimonials .section-title h2,
[data-theme="dark"] .testimonials .section-title h2,
html.dark-theme .testimonials .section-title p,
[data-theme="dark"] .testimonials .section-title p,
html.dark-theme .testimonials .section-title .description-title,
[data-theme="dark"] .testimonials .section-title .description-title,
html.dark-theme .comment-card h3,
[data-theme="dark"] .comment-card h3,
html.dark-theme .comment-card-content,
[data-theme="dark"] .comment-card-content {
  color: var(--shokooh-text) !important;
  opacity: 1;
}

html.dark-theme .comment-card-header span,
[data-theme="dark"] .comment-card-header span,
html.dark-theme .comment-card time,
[data-theme="dark"] .comment-card time {
  color: #cbd5e1 !important;
}

html.dark-theme .why-us .why-box p,
[data-theme="dark"] .why-us .why-box p {
  color: #ffffff !important;
}

#about .about-video-wrapper {
  position: relative;
  cursor: pointer;
}

#about .video-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#about .video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: none;

  background: rgba(255, 255, 255, 0.9);
  color: #6f42c1;
  font-size: 30px;

  cursor: pointer;
  transition: 0.3s;
}

#about .video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.hero,
.hero-media-box,
main.main,
.site-main,
main > section:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Our Story video: smaller, centered, with native play + seek controls */
#about .about-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#about .about-video-wrapper {
  width: min(100%, 820px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
}

#about .about-story-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

@media (max-width: 767px) {
  #about .about-video-wrapper {
    width: 100%;
    border-radius: 14px;
  }
}

/* Product and News titles: Shokooh navy */
.product-title,
.news-card h3 {
  color: #172554 !important;
}

html.dark-theme .product-title,
[data-theme="dark"] .product-title,
html.dark-theme .news-card h3,
[data-theme="dark"] .news-card h3 {
  color: #172554 !important;
}

/* Curved section edge: mirror the reference design for both languages. */
main.main > section:not(#hero) {
  border-bottom-right-radius: 120px;
  border-bottom-left-radius: 0;
}
html[dir="rtl"] main.main > section:not(#hero) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 120px;
}

#news.news-curved-section,
#all-news.news-curved-section {
  overflow: hidden;
  padding-bottom: 72px;
}

.news-section-title {
  text-align: start;
  padding-bottom: 42px;
}
.news-section-title h2 {
  display: block;
  margin: 0;
  text-transform: none;
  font-size: clamp(36px, 4vw, 50px);
  line-height: 1.15;
  letter-spacing: -1px;
  font-weight: 800;
  color: #0b2e6f;
}
html[dir="rtl"] .news-section-title { text-align: right; }

.news-scroll-shell { overflow: visible; padding: 0; }
.news-scroll-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  overflow: visible;
  padding: 0;
}
.news-card {
  min-width: 0;
  background: #fff;
  border-radius: 18px 18px 92px 18px;
  overflow: hidden;
  box-shadow: 0 3px 18px rgba(23,37,84,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
html[dir="rtl"] .news-card { border-radius: 18px 18px 18px 92px; }
.news-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(23,37,84,.11); }
.news-image-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #eef2f7;
}
.news-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.news-card:hover .news-image-wrap img {
  transform: scale(1.035);
}
.news-card-body {
  min-height: 235px;
  padding: 24px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
html[dir="rtl"] .news-card-body { align-items: flex-end; text-align: right; }
.news-date {
  display: block;
  margin: 0 0 14px;
  color: #2346c5;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .news-date { direction: rtl; text-align: right; }
.news-card h3 {
  margin: 0 0 16px;
  color: #172554 !important;
  font-size: clamp(1.25rem, 1.65vw, 1.65rem);
  line-height: 1.55;
  font-weight: 800;
  text-decoration: none;
}
.news-summary {
  margin: 0;
  color: #657084;
  font-size: 1rem;
  line-height: 1.95;
}
.news-read-more {
  margin-top: auto;
  padding-top: 28px;
  color: #2346c5 !important;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.news-read-more:hover { color: #172554 !important; }
.news-read-more span { font-size: 1.2em; line-height: 1; }
.news-view-all-wrap { text-align: center; padding-top: 38px; }
.news-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  padding: 16px 26px;
  border-radius: 0 32px 32px 0;
  background: #0067c5;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  transition: .25s ease;
}
html[dir="rtl"] .news-view-all { border-radius: 32px 0 0 32px; }
.news-view-all:hover { background: #0055a5; transform: translateY(-2px); }
.news-all-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }

/* Keep product titles in navy as requested. */
.product-title { color: #0b2e6f !important; }

@media (max-width: 991px) {
  .news-scroll-row, .news-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 575px) {
  main.main > section:not(#hero) { border-bottom-right-radius: 60px; }
  html[dir="rtl"] main.main > section:not(#hero) { border-bottom-right-radius: 0; border-bottom-left-radius: 60px; }
  .news-scroll-row, .news-all-grid { grid-template-columns: 1fr; }
  .news-card { border-radius: 16px 16px 16px 70px; }
  html[dir="rtl"] .news-card { border-radius: 16px 16px 70px 16px; }
  .news-card-body { min-height: 280px; padding: 24px 22px 22px; }
  .news-section-title { padding-bottom: 30px; }
}

/* Gallery image treatment: match the rounded news-card visual language */
.gallery .swiper-slide {
  overflow: hidden;
  border-radius: 18px 18px 92px 18px;
  background: transparent;
  border: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
html[dir="rtl"] .gallery .swiper-slide { border-radius: 18px 18px 18px 92px; }
.gallery .swiper-slide:hover { transform: translateY(-4px) !important; }
.gallery .swiper-slide > a { display: block; width: 100%; overflow: hidden; border-radius: inherit; }
.gallery .swiper-slide img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: inherit !important;
  transition: transform .4s ease;
}
.gallery .swiper-slide:hover img { transform: scale(1.04); }
@media (min-width: 992px) {
  .gallery .swiper-slide img { height: 230px; }
}
@media (max-width: 767px) {
  .gallery .swiper-slide { border-radius: 16px 16px 70px 16px; }
  html[dir="rtl"] .gallery .swiper-slide { border-radius: 16px 16px 16px 70px; }
  .gallery .swiper-slide img { height: 240px; }
}

/* News card: image has its own large directional lower corner. */
.news-card {
  border-radius: 18px 18px 92px 18px;
  background: #fff;
  overflow: hidden;
}
html[dir="rtl"] .news-card {
  border-radius: 18px 18px 18px 92px;
}
.news-image-wrap {
  height: 235px;
  border-radius: 18px 18px 92px 18px;
  overflow: hidden;
}
html[dir="rtl"] .news-image-wrap {
  border-radius: 18px 18px 18px 92px;
}
.news-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-body {
  min-height: 300px;
  padding: 22px 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
html[dir="rtl"] .news-card-body {
  align-items: flex-end;
  text-align: right;
}

/* Small publication date anchored at the bottom of the content area. */
.news-date {
  order: 3;
  margin: 20px 0 0;
  padding-top: 10px;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  opacity: .9;
  direction: rtl;
  text-align: right;
}
.news-card h3 {
  order: 1;
  width: 100%;
  margin: 0 0 12px;
  color: #172554 !important;
  font-size: clamp(1.2rem, 1.5vw, 1.52rem);
  line-height: 1.65;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.news-summary {
  order: 2;
  width: 100%;
  margin: 0;
  color: #697386;
  font-size: .96rem;
  line-height: 1.95;
  font-weight: 400;
}
.news-read-more {
  order: 4;
  margin-top: auto;
  padding-top: 22px;
  color: #2346c5 !important;
  font-size: .98rem;
  font-weight: 800;
}
html[dir="rtl"] .news-read-more {
  align-self: flex-end;
}

/* The publication date is visually subordinate to title/summary. */
.news-date::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 8px;
  background: rgba(23,37,84,.08);
}

/* Gallery: same directional rounded language as news images. */
.gallery .swiper-slide,
.gallery .swiper-slide > a,
.gallery .swiper-slide img {
  border-radius: 18px 18px 92px 18px !important;
}
html[dir="rtl"] .gallery .swiper-slide,
html[dir="rtl"] .gallery .swiper-slide > a,
html[dir="rtl"] .gallery .swiper-slide img {
  border-radius: 18px 18px 18px 92px !important;
}
.gallery .swiper-slide {
  overflow: hidden;
}
.gallery .swiper-slide img {
  height: 235px;
  object-fit: cover;
}

@media (max-width: 991px) {
  .news-image-wrap,
  .gallery .swiper-slide img {
    height: 225px;
  }
}
@media (max-width: 575px) {
  .news-card {
    border-radius: 16px 16px 70px 16px;
  }
  html[dir="rtl"] .news-card {
    border-radius: 16px 16px 16px 70px;
  }
  .news-image-wrap {
    height: 220px;
    border-radius: 16px 16px 70px 16px;
  }
  html[dir="rtl"] .news-image-wrap {
    border-radius: 16px 16px 16px 70px;
  }
  .news-card-body {
    min-height: 285px;
    padding: 20px 20px 18px;
  }
  .news-date {
    font-size: .68rem;
  }
  .gallery .swiper-slide,
  .gallery .swiper-slide > a,
  .gallery .swiper-slide img {
    border-radius: 16px 16px 70px 16px !important;
  }
  html[dir="rtl"] .gallery .swiper-slide,
  html[dir="rtl"] .gallery .swiper-slide > a,
  html[dir="rtl"] .gallery .swiper-slide img {
    border-radius: 16px 16px 16px 70px !important;
  }
  .gallery .swiper-slide img {
    height: 220px;
  }
}

/* Contact is now intentionally part of the footer. */
.footer {
  position: relative;
  margin-top: 0;
  padding: 0;
  background: #0b1738;
  color: rgba(255,255,255,.78);
  overflow: hidden;
}

.footer-contact-shell {
  padding: clamp(54px, 7vw, 88px) 0 36px;
  background:
    radial-gradient(circle at 10% 0%, rgba(22,119,255,.20), transparent 34%),
    radial-gradient(circle at 92% 30%, rgba(123,92,255,.16), transparent 30%),
    #0b1738;
}

.footer-contact-card {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}

.footer-contact-intro { min-width: 0; }
.footer-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(94,177,255,.30);
  border-radius: 999px;
  color: #8cc7ff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.footer-contact-intro h2 {
  margin: 18px 0 10px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  font-weight: 800;
}

.footer-contact-intro > p {
  max-width: 470px;
  margin: 0 0 28px;
  color: rgba(255,255,255,.70);
  font-size: 1rem;
  line-height: 1.9;
}

.footer-contact-intro > p strong { color: #fff; }

.footer-contact-points { display: grid; gap: 12px; }
.footer-contact-point {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  text-decoration: none;
  padding: 12px 0;
}
.footer-contact-point:hover { color: #fff; }
.footer-contact-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: #8cc7ff;
  font-size: 18px;
}
.footer-contact-point small,
.footer-contact-point strong { display:block; }
.footer-contact-point small { color: rgba(255,255,255,.48); font-size:.75rem; margin-bottom:2px; }
.footer-contact-point strong { color:#fff; font-size:.94rem; font-weight:700; }

.footer-contact-form-wrap {
  min-width: 0;
  padding: clamp(20px, 3vw, 34px);
  border-radius: 22px;
  background: rgba(255,255,255,.97);
}

.footer-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.footer-field-full { grid-column: 1 / -1; }
.footer-field label {
  display: block;
  margin-bottom: 7px;
  color: #172554;
  font-size: .78rem;
  font-weight: 800;
}
.footer-contact-form .form-control {
  min-height: 48px;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  background: #fff;
  color: #172554;
  padding: 12px 14px;
  box-shadow: none;
}
.footer-contact-form textarea.form-control { min-height: 112px; resize: vertical; }
.footer-contact-form .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 4px rgba(13,110,253,.09);
}
.footer-form-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:18px;
}
.footer-form-status { flex:1; }
.footer-form-status .loading,
.footer-form-status .error-message,
.footer-form-status .sent-message { margin:0; }
.footer-send-btn {
  border:0;
  min-height:48px;
  padding:0 22px;
  border-radius:14px;
  background:#0d6efd;
  color:#fff;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.footer-send-btn:hover { transform:translateY(-2px); background:#095fc7; box-shadow:0 10px 24px rgba(13,110,253,.22); }

.footer-main {
  padding: 44px 0 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-brand { display:inline-flex; align-items:center; }
.footer-brand img { width:auto; height:150px; max: width 300px; object-fit:contain; }
.footer-brand-text { max-width:520px; margin:18px 0 20px; color:rgba(255,255,255,.58); line-height:1.9; }
.footer h4 { color:#fff; font-size:1rem; margin:8px 0 16px; font-weight:800; }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.footer-links li { color:rgba(255,255,255,.58); line-height:1.7; }
.footer-links a { color:rgba(255,255,255,.68); text-decoration:none; transition:color .2s ease, transform .2s ease; display:inline-flex; align-items:center; gap:8px; }
.footer-links a:hover { color:#fff; }
.footer-contact-links li { display:flex; align-items:flex-start; gap:7px; }
.footer-contact-links li i { color:#8cc7ff; margin-top:4px; }
.footer-hours { color:rgba(255,255,255,.62); line-height:2; }
.footer-hours strong { color:#fff; }
.footer-contact-link { display:inline-flex; align-items:center; gap:8px; color:#8cc7ff; text-decoration:none; font-weight:800; margin-top:4px; }
.footer-contact-link:hover { color:#fff; }
.footer .social-links { gap:9px; }
.footer .social-links a { margin:0; width:42px; height:42px; border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.70); background:rgba(255,255,255,.04); }
.footer .social-links a:hover { color:#fff; border-color:#8cc7ff; background:rgba(140,199,255,.10); }
.footer-bottom { margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.footer-bottom p, .footer-bottom .credits { margin:0; color:rgba(255,255,255,.48); font-size:.82rem; }
.footer-bottom .sitename { color:#fff; }
.footer-bottom .credits span { color:rgba(255,255,255,.72); }

html[dir="rtl"] .footer,
html[lang="fa"] .footer { direction:rtl; }
html[dir="rtl"] .footer-contact-intro,
html[dir="rtl"] .footer-main,
html[lang="fa"] .footer-contact-intro,
html[lang="fa"] .footer-main { text-align:right; }
html[dir="rtl"] .footer-form-bottom,
html[lang="fa"] .footer-form-bottom { flex-direction:row-reverse; }
html[dir="rtl"] .footer-send-btn i,
html[lang="fa"] .footer-send-btn i { transform:rotate(90deg); }
html[dir="rtl"] .footer-bottom,
html[lang="fa"] .footer-bottom { flex-direction:row-reverse; }
html[dir="rtl"] .footer-contact-point,
html[lang="fa"] .footer-contact-point { flex-direction:row; }

@media (max-width: 991px) {
  .footer-contact-card { grid-template-columns:1fr; }
  .footer-contact-intro > p { max-width:none; }
}

@media (max-width: 767px) {
  .footer-contact-shell { padding-top:40px; }
  .footer-contact-card { padding:22px; border-radius:22px; gap:24px; }
  .footer-form-grid { grid-template-columns:1fr; }
  .footer-field-full { grid-column:auto; }
  .footer-form-bottom { align-items:stretch; flex-direction:column; }
  html[dir="rtl"] .footer-form-bottom,
  html[lang="fa"] .footer-form-bottom { flex-direction:column; }
  .footer-send-btn { width:100%; }
  .footer-bottom,
  html[dir="rtl"] .footer-bottom,
  html[lang="fa"] .footer-bottom { flex-direction:column; align-items:flex-start; }
  html[dir="rtl"] .footer-bottom,
  html[lang="fa"] .footer-bottom { align-items:flex-end; }
}

/* The contact form now lives in the footer; keep the old standalone section hidden if referenced by cached markup. */
#contact.contact.section { display:none !important; }

/* =============================================================
   Final Shokooh visual alignment — light footer + RTL news fixes
   ============================================================= */

/* The footer belongs to the same visual system as the rest of Shokooh.
   Light mode uses white / soft lavender / navy / purple; dark mode keeps
   the deep-navy treatment. */
html[data-theme="light"] .footer,
html[data-theme="default"]:not(.dark-theme) .footer {
  --footer-bg: #f7fafe;
  --footer-surface: #ffffff;
  --footer-soft: #eaf2fc;
  --footer-border: #d8e6f6;
  --footer-navy: #172554;
  --footer-muted: #64748b;
  --footer-purple: #2e67b2;
  --footer-purple-dark: #1f4f91;

  background: var(--footer-bg) !important;
  color: var(--footer-navy) !important;
}

html[data-theme="light"] .footer .footer-contact-shell,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-shell {
  background:
    radial-gradient(circle at 7% 0%, rgba(46,103,178,.10), transparent 32%),
    radial-gradient(circle at 94% 25%, rgba(23,37,84,.055), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7fafe 100%) !important;
}

html[data-theme="light"] .footer .footer-contact-card,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-card {
  border: 1px solid var(--footer-border);
  background: linear-gradient(135deg, #ffffff 0%, #f1f6fd 100%);
  box-shadow: 0 22px 60px rgba(23,37,84,.08);
}

html[data-theme="light"] .footer .footer-eyebrow,
html[data-theme="default"]:not(.dark-theme) .footer .footer-eyebrow {
  border-color: rgba(46,103,178,.18);
  background: rgba(46,103,178,.055);
  color: var(--footer-purple);
}

html[data-theme="light"] .footer .footer-contact-intro h2,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-intro h2 {
  color: var(--footer-navy) !important;
}

html[data-theme="light"] .footer .footer-contact-intro > p,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-intro > p {
  color: var(--footer-muted) !important;
}

html[data-theme="light"] .footer .footer-contact-intro > p strong,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-intro > p strong {
  color: var(--footer-navy) !important;
}

html[data-theme="light"] .footer .footer-contact-point,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-point {
  color: var(--footer-navy) !important;
}

html[data-theme="light"] .footer .footer-contact-icon,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-icon {
  background: var(--footer-soft);
  color: var(--footer-purple);
}

html[data-theme="light"] .footer .footer-contact-point small,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-point small {
  color: #94a3b8 !important;
}

html[data-theme="light"] .footer .footer-contact-point strong,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-point strong {
  color: var(--footer-navy) !important;
}

html[data-theme="light"] .footer .footer-contact-form-wrap,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-form-wrap {
  background: #ffffff;
  border: 1px solid #eee8f7;
  box-shadow: 0 14px 36px rgba(23,37,84,.06);
}

html[data-theme="light"] .footer .footer-field label,
html[data-theme="default"]:not(.dark-theme) .footer .footer-field label {
  color: var(--footer-navy) !important;
}

html[data-theme="light"] .footer .footer-contact-form .form-control,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-form .form-control {
  border-color: #e2e8f0;
  background: #ffffff;
  color: var(--footer-navy);
}

html[data-theme="light"] .footer .footer-contact-form .form-control::placeholder,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-form .form-control::placeholder {
  color: #a0a9b8;
}

html[data-theme="light"] .footer .footer-contact-form .form-control:focus,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-form .form-control:focus {
  border-color: var(--footer-purple);
  box-shadow: 0 0 0 4px rgba(46,103,178,.10);
}

html[data-theme="light"] .footer .footer-send-btn,
html[data-theme="default"]:not(.dark-theme) .footer .footer-send-btn {
  background: var(--footer-purple);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(46,103,178,.18);
}

html[data-theme="light"] .footer .footer-send-btn:hover,
html[data-theme="default"]:not(.dark-theme) .footer .footer-send-btn:hover {
  background: var(--footer-purple-dark);
}

html[data-theme="light"] .footer .footer-main,
html[data-theme="default"]:not(.dark-theme) .footer .footer-main {
  border-top-color: var(--footer-border);
  background: #ffffff;
}

html[data-theme="light"] .footer h4,
html[data-theme="default"]:not(.dark-theme) .footer h4 {
  color: var(--footer-navy) !important;
}

html[data-theme="light"] .footer .footer-brand-text,
html[data-theme="default"]:not(.dark-theme) .footer .footer-brand-text {
  color: #64748b !important;
}

html[data-theme="light"] .footer .footer-links li,
html[data-theme="default"]:not(.dark-theme) .footer .footer-links li {
  color: #64748b !important;
}

html[data-theme="light"] .footer .footer-links a,
html[data-theme="default"]:not(.dark-theme) .footer .footer-links a {
  color: #64748b !important;
}

html[data-theme="light"] .footer .footer-links a:hover,
html[data-theme="default"]:not(.dark-theme) .footer .footer-links a:hover {
  color: var(--footer-purple) !important;
}

html[data-theme="light"] .footer .footer-contact-links li i,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-links li i,
html[data-theme="light"] .footer .footer-contact-link,
html[data-theme="default"]:not(.dark-theme) .footer .footer-contact-link {
  color: var(--footer-purple) !important;
}

html[data-theme="light"] .footer .footer-hours,
html[data-theme="default"]:not(.dark-theme) .footer .footer-hours {
  color: #64748b !important;
}

html[data-theme="light"] .footer .footer-hours strong,
html[data-theme="default"]:not(.dark-theme) .footer .footer-hours strong {
  color: var(--footer-navy) !important;
}

html[data-theme="light"] .footer .social-links a,
html[data-theme="default"]:not(.dark-theme) .footer .social-links a {
  color: #64748b !important;
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
}

html[data-theme="light"] .footer .social-links a:hover,
html[data-theme="default"]:not(.dark-theme) .footer .social-links a:hover {
  color: var(--footer-purple) !important;
  border-color: rgba(46,103,178,.35) !important;
  background: var(--footer-soft) !important;
}

html[data-theme="light"] .footer .footer-bottom,
html[data-theme="default"]:not(.dark-theme) .footer .footer-bottom {
  border-top-color: var(--footer-border);
}

html[data-theme="light"] .footer .footer-bottom p,
html[data-theme="light"] .footer .footer-bottom .credits,
html[data-theme="default"]:not(.dark-theme) .footer .footer-bottom p,
html[data-theme="default"]:not(.dark-theme) .footer .footer-bottom .credits {
  color: #94a3b8 !important;
}

html[data-theme="light"] .footer .footer-bottom .sitename,
html[data-theme="default"]:not(.dark-theme) .footer .footer-bottom .sitename {
  color: var(--footer-navy) !important;
}

html[data-theme="light"] .footer .footer-bottom .credits span,
html[data-theme="default"]:not(.dark-theme) .footer .footer-bottom .credits span {
  color: var(--footer-purple) !important;
}

/* Keep the dark theme intentionally deep-navy while using Shokooh purple
   for interactive accents. */
html.dark-theme .footer .footer-send-btn,
html[data-theme="dark"] .footer .footer-send-btn {
  background: #2e67b2;
}
html.dark-theme .footer .footer-send-btn:hover,
html[data-theme="dark"] .footer .footer-send-btn:hover {
  background: #1f4f91;
}

/* =============================================================
   News — Persian metadata/actions must occupy the full right edge
   ============================================================= */
html[dir="rtl"] .news-card-body,
html[lang="fa"] .news-card-body {
  width: 100%;
  align-items: stretch !important;
  text-align: right !important;
}

html[dir="rtl"] .news-card-body .news-date,
html[lang="fa"] .news-card-body .news-date {
  width: 100% !important;
  align-self: stretch !important;
  display: block !important;
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .news-card-body .news-read-more,
html[lang="fa"] .news-card-body .news-read-more {
  width: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  justify-content: flex-start !important;
  flex-direction: row-reverse;
  text-align: right !important;
  direction: rtl !important;
}

html[dir="rtl"] .news-card-body .news-read-more span,
html[lang="fa"] .news-card-body .news-read-more span {
  margin-right: 0;
}

/* Stats fixed-background safeguard: keep the image visible in both themes. */
.stats.dark-background {
  background-color: transparent !important;
}

/* ==========================================================
   PREMIUM BRAND PRODUCTS - IMAGE FIRST DESIGN
   ========================================================== */
.brand-products-section { overflow: hidden; }
.brand-products-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,30px); align-items:stretch; }
.brand-product-card { position:relative; overflow:hidden; isolation:isolate; aspect-ratio:1.5/1; border-radius:22px 22px 104px 22px; background:#0f172a; box-shadow:0 18px 50px rgba(15,23,42,.14); transform:translateZ(0); transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s ease; }
html[dir="rtl"] .brand-product-card,html[lang="fa"] .brand-product-card { border-radius:22px 22px 22px 104px; }
.brand-product-card:hover { transform:translateY(-7px); box-shadow:0 28px 65px rgba(15,23,42,.20); }
.brand-product-media { position:absolute; inset:0; display:block; overflow:hidden; border-radius:inherit; z-index:0; }
.brand-product-image { display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; transition:transform .75s cubic-bezier(.2,.75,.2,1),filter .5s ease; }
.brand-product-card:hover .brand-product-image { transform:scale(1.025); }
.brand-product-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,10,30,.34) 0%,rgba(5,10,30,.13) 34%,transparent 63%); pointer-events:none; }
html[dir="rtl"] .brand-product-media::after,html[lang="fa"] .brand-product-media::after { background:linear-gradient(270deg,rgba(5,10,30,.34) 0%,rgba(5,10,30,.13) 34%,transparent 63%); }
.brand-product-content { position:absolute; z-index:2; top:12%; left:8%; width:44%; display:flex; flex-direction:column; align-items:flex-start; color:#fff; text-align:left; }
html[dir="rtl"] .brand-product-content,html[lang="fa"] .brand-product-content { left:8%; right:auto; align-items:flex-end; text-align:right; direction:rtl; }
.brand-product-kicker { display:block; margin-bottom:4px; font-family:"Inter",sans-serif; font-size:clamp(.62rem,.72vw,.78rem); font-weight:600; letter-spacing:.22em; line-height:1.2; color:rgba(255,255,255,.84); }
.brand-product-content h3 { margin:0; color:#fff; font-family:"IRANSans","Vazirmatn",Tahoma,sans-serif; font-size:clamp(1.65rem,2.6vw,2.65rem); font-weight:800; line-height:1.15; text-shadow:0 3px 16px rgba(0,0,0,.22); }
html[lang="en"] .brand-product-content h3,html:not([dir="rtl"]) .brand-product-content h3 { font-family:"Inter",sans-serif; letter-spacing:-.02em; }
.brand-product-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-width:160px; margin-top:18px; padding:11px 15px; border:1px solid rgba(255,255,255,.62); border-radius:999px; background:rgba(255,255,255,.93); color:var(--brand-accent,#2e67b2); font-family:"IRANSans","Vazirmatn",Tahoma,sans-serif; font-size:.9rem; font-weight:800; line-height:1.2; text-decoration:none!important; box-shadow:0 8px 25px rgba(0,0,0,.16); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); transition:transform .3s ease,background .3s ease,box-shadow .3s ease; }
html[lang="en"] .brand-product-button,html:not([dir="rtl"]) .brand-product-button { font-family:"Inter",sans-serif; }
.brand-product-button i { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; background:var(--brand-accent,#2e67b2); color:#fff; font-size:.78rem; transition:transform .3s ease; }
.brand-product-button:hover { color:var(--brand-accent,#2e67b2); background:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.22); }
.brand-product-button:hover i { transform:translate(2px,-2px); }
html[dir="rtl"] .brand-product-button:hover i,html[lang="fa"] .brand-product-button:hover i { transform:translate(-2px,-2px); }
.brand-product-card,.brand-product-media,.brand-product-image { border-bottom-right-radius:104px; }
html[dir="rtl"] .brand-product-card,html[dir="rtl"] .brand-product-media,html[dir="rtl"] .brand-product-image,html[lang="fa"] .brand-product-card,html[lang="fa"] .brand-product-media,html[lang="fa"] .brand-product-image { border-bottom-right-radius:22px; border-bottom-left-radius:104px; }
@media (max-width:991px) { .brand-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .brand-product-card:last-child{grid-column:1/-1;width:min(100%,calc((100% - 18px)/2));justify-self:center;} }
@media (max-width:767px) { .brand-products-grid{grid-template-columns:1fr;gap:20px;} .brand-product-card,.brand-product-card:last-child{width:100%;aspect-ratio:1.5/1;} .brand-product-content{top:11%;left:7%;width:49%;} html[dir="rtl"] .brand-product-content,html[lang="fa"] .brand-product-content{left:7%;right:auto;width:49%;} .brand-product-button{min-width:145px;margin-top:14px;padding:10px 12px;font-size:.82rem;} .brand-product-card,.brand-product-media,.brand-product-image{border-bottom-right-radius:72px;} html[dir="rtl"] .brand-product-card,html[dir="rtl"] .brand-product-media,html[dir="rtl"] .brand-product-image,html[lang="fa"] .brand-product-card,html[lang="fa"] .brand-product-media,html[lang="fa"] .brand-product-image{border-bottom-right-radius:18px;border-bottom-left-radius:72px;} }

/* =============================================================
   FINAL SHOKOOH UI CONSISTENCY PASS
   ============================================================= */

/* Stats bg image: always visible in light and default themes */
html[data-theme="light"] section.stats,
html[data-theme="light"] #stats,
html[data-theme="default"] section.stats,
html[data-theme="default"] #stats {
  background-color: transparent !important;
  background-image: url("../img/bg.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Products: real images remain completely visible; CTA sits BELOW the image. */
.brand-products-section .brand-products-grid {
  align-items: start;
}

.brand-products-section .brand-product-card {
  position: relative;
  overflow: visible;
  isolation: isolate;
  aspect-ratio: auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.brand-products-section .brand-product-card:hover {
  transform: none;
  box-shadow: none;
}

.brand-products-section .brand-product-media {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 22px 22px 104px 22px;
  background: #eef2ff;
  box-shadow: 0 18px 45px rgba(23,37,84,.12);
  z-index: 1;
}

html[dir="rtl"] .brand-products-section .brand-product-media,
html[lang="fa"] .brand-products-section .brand-product-media {
  border-radius: 22px 22px 22px 104px;
}

.brand-products-section .brand-product-media picture {
  display: block;
  width: 100%;
}

.brand-products-section .brand-product-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
  transition: transform .6s cubic-bezier(.2,.75,.2,1), filter .4s ease;
}

.brand-products-section .brand-product-card:hover .brand-product-image {
  transform: scale(1.018);
  filter: saturate(1.035);
}

.brand-products-section .brand-product-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5,10,30,.34) 0%, rgba(5,10,30,.10) 27%, transparent 48%);
}

html[dir="rtl"] .brand-products-section .brand-product-media::after,
html[lang="fa"] .brand-products-section .brand-product-media::after {
  background: linear-gradient(90deg, transparent 48%, rgba(5,10,30,.10) 73%, rgba(5,10,30,.34) 100%);
}

/* Brand name stays in the deliberately empty area of the source images. */
.brand-products-section .brand-product-overlay {
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 7%;
  width: 39%;
  color: #fff;
  text-align: left;
  pointer-events: none;
  text-shadow: 0 3px 18px rgba(0,0,0,.28);
}

html[dir="rtl"] .brand-products-section .brand-product-overlay,
html[lang="fa"] .brand-products-section .brand-product-overlay {
  left: 7%;
  right: auto;
  text-align: right;
  direction: rtl;
}

.brand-products-section .brand-product-kicker {
  display: block;
  margin: 0 0 5px;
  color: rgba(255,255,255,.88);
  font-family: "Inter", sans-serif;
  font-size: clamp(.62rem,.72vw,.78rem);
  font-weight: 700;
  letter-spacing: .20em;
  line-height: 1.2;
}

.brand-products-section .brand-product-overlay h3 {
  margin: 0;
  color: #fff;
  font-family: "IRANSans", "Vazirmatn", Tahoma, sans-serif;
  font-size: clamp(1.6rem,2.5vw,2.5rem);
  font-weight: 800;
  line-height: 1.2;
}

html[lang="en"] .brand-products-section .brand-product-overlay h3,
html:not([dir="rtl"]) .brand-products-section .brand-product-overlay h3 {
  font-family: "Inter", sans-serif;
  letter-spacing: -.02em;
}

/* CTA is now physically outside the image. */
.brand-products-section .brand-product-actions {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-start;
  padding: 16px 4px 0;
}

html[dir="rtl"] .brand-products-section .brand-product-actions,
html[lang="fa"] .brand-products-section .brand-product-actions {
  justify-content: flex-end;
}

.brand-products-section .brand-product-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 190px;
  margin: 0;
  padding: 12px 17px;
  border: 1px solid color-mix(in srgb, var(--brand-accent,#2e67b2), transparent 72%);
  border-radius: 16px;
  background: var(--surface-color, #fff);
  color: var(--brand-accent,#2e67b2);
  font-family: "IRANSans", "Vazirmatn", Tahoma, sans-serif;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(23,37,84,.08);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}

html[lang="en"] .brand-products-section .brand-product-button,
html:not([dir="rtl"]) .brand-products-section .brand-product-button {
  font-family: "Inter", sans-serif;
}

.brand-products-section .brand-product-button i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-accent,#2e67b2);
  color: #fff;
  font-size: .78rem;
  transition: transform .3s ease;
}

.brand-products-section .brand-product-button:hover {
  color: #fff;
  background: var(--brand-accent,#2e67b2);
  transform: translateY(-3px);
  box-shadow: 0 15px 30px color-mix(in srgb, var(--brand-accent,#2e67b2), transparent 76%);
}

.brand-products-section .brand-product-button:hover i {
  background: rgba(255,255,255,.22);
  transform: translate(2px,-2px);
}

html[dir="rtl"] .brand-products-section .brand-product-button:hover i,
html[lang="fa"] .brand-products-section .brand-product-button:hover i {
  transform: translate(-2px,-2px);
}

/* Product section follows the same visual rhythm as News/Gallery. */
.brand-products-section .section-title {
  padding-bottom: 42px;
}

/* News title now uses the same eyebrow + large heading hierarchy as the other sections. */
.news-section-title {
  text-align: start !important;
  padding-bottom: 42px !important;
}

.news-section-title h2 {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--default-color), transparent 50%) !important;
  font-family: var(--default-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.news-section-title p {
  margin: 10px 0 0 !important;
  color: var(--heading-color) !important;
  font-family: var(--heading-font) !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.news-section-title p .description-title {
  color: var(--accent-color) !important;
}

html[dir="rtl"] .news-section-title,
html[lang="fa"] .news-section-title {
  text-align: right !important;
  direction: rtl !important;
}

/* Robust RTL alignment for the read-more action. */
html[dir="rtl"] .news-card-body .news-read-more,
html[lang="fa"] .news-card-body .news-read-more {
  width: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  direction: rtl !important;
  text-align: right !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] .news-card-body .news-read-more-label,
html[lang="fa"] .news-card-body .news-read-more-label {
  display: inline-block !important;
  text-align: right !important;
}

html[dir="rtl"] .news-card-body .news-read-more-arrow,
html[lang="fa"] .news-card-body .news-read-more-arrow {
  display: inline-block !important;
  margin-right: 8px !important;
  margin-left: 0 !important;
}

/* Dark mode: all shared surfaces remain readable and consistent. */
html.dark-theme .brand-products-section .brand-product-button,
html[data-theme="dark"] .brand-products-section .brand-product-button {
  background: #1e293b;
  color: #a9c8ec;
  border-color: rgba(169,200,236,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

html.dark-theme .brand-products-section .brand-product-button:hover,
html[data-theme="dark"] .brand-products-section .brand-product-button:hover {
  background: var(--brand-accent,#2e67b2);
  color: #fff;
}

html.dark-theme .news-card,
html[data-theme="dark"] .news-card {
  background: #1e293b;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

html.dark-theme .news-card h3,
html[data-theme="dark"] .news-card h3 {
  color: #f8fafc !important;
}

html.dark-theme .news-summary,
html[data-theme="dark"] .news-summary {
  color: #cbd5e1;
}

html.dark-theme .news-date,
html[data-theme="dark"] .news-date {
  color: #a5b4fc;
}

html.dark-theme .news-date::before,
html[data-theme="dark"] .news-date::before {
  background: rgba(255,255,255,.10);
}

@media (max-width: 767px) {
  .brand-products-section .brand-product-media {
    border-radius: 18px 18px 72px 18px;
  }

  html[dir="rtl"] .brand-products-section .brand-product-media,
  html[lang="fa"] .brand-products-section .brand-product-media {
    border-radius: 18px 18px 18px 72px;
  }

  .brand-products-section .brand-product-overlay {
    top: 9%;
    left: 7%;
    width: 43%;
  }

  html[dir="rtl"] .brand-products-section .brand-product-overlay,
  html[lang="fa"] .brand-products-section .brand-product-overlay {
    left: 7%;
    width: 43%;
  }

  .brand-products-section .brand-product-actions {
    padding-top: 13px;
  }

  .brand-products-section .brand-product-button {
    min-width: 170px;
    padding: 11px 14px;
    font-size: .84rem;
  }

  .news-section-title p {
    font-size: clamp(34px, 9vw, 44px) !important;
  }
}

.news-card-body {
  min-height: auto !important; /* لغو min-height: 300px قبلی */
  padding-bottom: 14px !important;
}

/* ۲. صفر/کم کردن فاصله بالای تاریخ */
.news-date {
  margin-top: 6px !important;    /* قبلاً 20px بود */
  padding-top: 6px !important;   /* قبلاً 10px بود */
}

/* ۳. متناسب‌سازی خط جداکننده بالای تاریخ */
.news-date::before {
  margin-bottom: 4px !important; /* قبلاً 8px بود */
}

/* ۴. بهینه‌سازی فاصله و لاین هایت خلاصه خبر */
.news-summary {
  margin-bottom: 4px !important;
  line-height: 1.6 !important;   /* خطوط متن به هم نزدیک‌تر می‌شوند */
}

.news-section-title,
html[dir="rtl"] .news-section-title,
html[lang="fa"] .news-section-title {
  text-align: center !important;
}

.news-section-title h2,
.news-section-title p {
  text-align: center !important;
}

/* ========================================================
   تنظیم موقعیت دکمه محصولات:
   فارسی -> پایین راست | انگلیسی -> پایین چپ
   ======================================================== */
.brand-products-section .brand-product-actions {
  display: flex !important;
  justify-content: flex-start !important;
  padding: 16px 4px 0 !important;
  width: 100%;
}

/* انگلیسی (LTR): پایین سمت چپ */
html[dir="ltr"] .brand-products-section .brand-product-actions,
html[lang="en"] .brand-products-section .brand-product-actions {
  justify-content: flex-start !important;
}

/* فارسی (RTL): پایین سمت راست */
html[dir="rtl"] .brand-products-section .brand-product-actions,
html[lang="fa"] .brand-products-section .brand-product-actions {
  justify-content: flex-start !important; /* در RTL، مقدار flex-start یعنی دقیقا سمت راست */
}

/* ==========================================================================
   SHOKOOH PRODUCT CATALOG & UNILEVER CAPSULE SYSTEM (FULLY INTEGRATED)
   ========================================================================== */

/* 1. Main Page & Layout Controls */
.ul-catalog-page {
    background-color: var(--background-color, #f4f7fb);
    color: var(--default-color, #212529);
    min-height: 80vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.ul-catalog-header .breadcrumb {
    font-size: 0.88rem;
    background: transparent;
    padding: 0;
}

.ul-catalog-header .breadcrumb-item a {
    color: var(--accent-color, #004586);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ul-catalog-header .breadcrumb-item a:hover {
    opacity: 0.8;
}

.ul-catalog-header .breadcrumb-item.active {
    color: var(--default-color, #6c757d);
    opacity: 0.75;
}

.ul-catalog-heading {
    color: var(--heading-color, #002b49);
    font-family: var(--heading-font, inherit);
    letter-spacing: -0.5px;
}

/* 2. Filter Capsule Bar (Search & Sort) */
.ul-filter-bar {
    background-color: var(--surface-color, #ffffff);
    border: 1px solid rgba(128, 128, 128, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.ul-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.ul-search-box i.bi-search {
    position: absolute;
    color: var(--default-color, #64748b);
    opacity: 0.6;
    pointer-events: none;
}

[dir="rtl"] .ul-search-box i.bi-search {
    right: 18px;
    left: auto;
}

[dir="ltr"] .ul-search-box i.bi-search {
    left: 18px;
    right: auto;
}

.ul-search-box input {
    background-color: var(--background-color, #ffffff);
    color: var(--default-color, #212529);
    border-radius: 50px;
    border: 1.5px solid rgba(128, 128, 128, 0.2);
    transition: all 0.25s ease;
}

[dir="rtl"] .ul-search-box input {
    padding: 10px 45px 10px 40px;
}

[dir="ltr"] .ul-search-box input {
    padding: 10px 40px 10px 45px;
}

.ul-search-box input:focus {
    background-color: var(--surface-color, #ffffff);
    color: var(--default-color, #212529);
    border-color: var(--accent-color, #004586);
    box-shadow: 0 0 0 4px rgba(0, 69, 134, 0.15);
}

.ul-search-box #clearSearchBtn {
    position: absolute;
    color: var(--default-color, #94a3b8);
    opacity: 0.7;
    background: transparent;
    border: none;
    padding: 4px 8px;
}

[dir="rtl"] .ul-search-box #clearSearchBtn {
    left: 12px;
    right: auto;
}

[dir="ltr"] .ul-search-box #clearSearchBtn {
    right: 12px;
    left: auto;
}

.ul-search-box #clearSearchBtn:hover {
    opacity: 1;
    color: var(--accent-color, #004586);
}

#filterSortSelect {
    background-color: var(--background-color, #ffffff);
    color: var(--default-color, #212529);
    border: 1.5px solid rgba(128, 128, 128, 0.2);
    transition: all 0.25s ease;
}

#filterSortSelect:focus {
    border-color: var(--accent-color, #004586);
    box-shadow: 0 0 0 4px rgba(0, 69, 134, 0.15);
}

/* 3. Sidebar Categories Styling */
.ul-sidebar-card {
    background-color: var(--surface-color, #ffffff);
    border: 1px solid rgba(128, 128, 128, 0.12);
    position: sticky;
    top: 100px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.ul-sidebar-card h5 {
    color: var(--heading-color, #002b49);
}

.ul-cat-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

.ul-cat-item:hover {
    background-color: rgba(0, 69, 134, 0.06);
}

.ul-cat-item .cat-title {
    color: var(--default-color, #334155);
    font-size: 0.95rem;
    font-weight: 500;
}

.ul-cat-item .form-check-input {
    cursor: pointer;
    margin: 0;
    border-color: rgba(128, 128, 128, 0.3);
}

.ul-cat-item .form-check-input:checked {
    background-color: var(--accent-color, #004586);
    border-color: var(--accent-color, #004586);
}

/* 4. Unilever Pod Product Card */
/* ==========================================================================
   UNILEVER COMPACT PRODUCT POD & SIZING
   ========================================================================== */

/* ارتفاع بهینه‌شده و کمتر برای کادر تصویر */
.ul-pod-visual {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 170px; /* کاهش ارتفاع به مقدار دلخواه */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    margin-bottom: 8px;
    overflow: hidden;
}

/* حذف هرگونه هاله و پس‌زمینه پشتی */
.ul-pod-visual::before,
.ul-pod-visual::after {
    display: none !important;
    content: none !important;
}

/* تصویر اورجینال محصول با انحنای جهت‌دار */
.ul-pod-visual img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* جهت‌دهی انحناها: انگلیسی -> پایین راست / فارسی -> پایین چپ */
[dir="ltr"] .ul-pod-visual img,
html[lang="en"] .ul-pod-visual img {
    border-radius: 12px 12px 48px 12px;
}

[dir="rtl"] .ul-pod-visual img,
html[lang="fa"] .ul-pod-visual img,
body[dir="rtl"] .ul-pod-visual img {
    border-radius: 12px 12px 12px 48px;
}

.ul-pod-wrapper:hover .ul-pod-visual img {
    transform: scale(1.04);
}

/* پدینگ جمع‌وجورتر برای بدنه اطلاعات */
.ul-pod-details {
    padding: 8px 4px 4px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* فونت عنوان محصول (خیلی کوچک‌تر و ظریف‌تر) */
.ul-pod-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--heading-color, #002b49);
    margin-bottom: 5px;
    line-height: 1.35;
}

/* فونت توضیحات محصول */
.ul-pod-desc {
    font-size: 0.78rem;
    color: var(--default-color, #64748b);
    opacity: 0.85;
    line-height: 1.45;
    margin-bottom: 8px;
    flex-grow: 1;
}

/* مشخصات و برچسب‌های متادیتا (وزن، تعداد و ...) */
.ul-pod-meta {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ul-pod-meta .badge {
    font-size: 0.72rem;
    padding: 3px 7px;
    font-weight: 500;
    border-radius: 6px;
    background-color: var(--background-color, #f1f5f9) !important;
    color: var(--default-color, #334155) !important;
    border: 1px solid rgba(128, 128, 128, 0.12);
}

/* دکمه اکشن گوشه تصویر */
.ul-pod-action {
    position: absolute;
    bottom: 8px;
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    background-color: var(--surface-color, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color, #004586);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.25s ease;
    z-index: 3;
}

[dir="rtl"] .ul-pod-action {
    left: 8px;
    right: auto;
}

[dir="ltr"] .ul-pod-action {
    right: 8px;
    left: auto;
}

.ul-pod-wrapper:hover .ul-pod-action {
    opacity: 1;
    transform: translateY(0);
}

/* 5. Rounded Pagination */
.pagination-rounded .page-link {
    border-radius: 50% !important;
    margin: 0 4px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: var(--default-color, #334155);
    background-color: var(--surface-color, #ffffff);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
}

.pagination-rounded .page-link:hover {
    background-color: var(--accent-color, #004586);
    color: #ffffff;
}

.pagination-rounded .page-item.active .page-link {
    background-color: var(--accent-color, #004586);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 69, 134, 0.3);
}

.pagination-rounded .page-item.disabled .page-link {
    opacity: 0.4;
    background-color: var(--background-color, #f1f5f9);
}

/* 6. Quick View Modal Overrides */
#productQuickModal .modal-content {
    background-color: var(--surface-color, #ffffff);
    color: var(--default-color, #212529);
    border: 1px solid rgba(128, 128, 128, 0.15);
}

#productQuickModal .modal-image-pod {
    background-color: var(--background-color, #f8fafc) !important;
    border: 1px solid rgba(128, 128, 128, 0.1);
}

#productQuickModal #modalProductTitle {
    color: var(--heading-color, #002b49);
}

#productQuickModal #modalProductDesc,
#productQuickModal #modalProductIngredients {
    color: var(--default-color, #64748b) !important;
    opacity: 0.9;
}

/* 7. Dark Mode Overrides (Explicit Data-Theme Attribute) */
[data-theme="dark"] .ul-catalog-page {
    background-color: var(--background-color, #0b1526);
}

[data-theme="dark"] .ul-filter-bar,
[data-theme="dark"] .ul-sidebar-card,
[data-theme="dark"] .ul-pod-wrapper,
[data-theme="dark"] #productQuickModal .modal-content {
    background-color: var(--surface-color, #132238) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ul-pod-visual,
[data-theme="dark"] #productQuickModal .modal-image-pod {
    background-color: var(--background-color, #0d1a2d) !important;
}

[data-theme="dark"] .ul-pod-title,
[data-theme="dark"] .ul-catalog-heading,
[data-theme="dark"] #modalProductTitle,
[data-theme="dark"] .ul-sidebar-card h5 {
    color: var(--heading-color, #e2e8f0);
}

[data-theme="dark"] .ul-cat-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .ul-cat-item .cat-title {
    color: var(--default-color, #cbd5e1);
}

[data-theme="dark"] .ul-search-box input,
[data-theme="dark"] #filterSortSelect {
    background-color: var(--background-color, #0d1a2d);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--default-color, #ffffff);
}

[data-theme="dark"] .ul-pod-meta .badge {
    background-color: var(--background-color, #0d1a2d) !important;
    color: var(--default-color, #cbd5e1) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pagination-rounded .page-link {
    background-color: var(--surface-color, #132238);
    color: var(--default-color, #cbd5e1);
}

/* =============================================================
   NEWS ARCHIVE + ARTICLE DETAIL — Shokooh editorial system
   ============================================================= */
.news-archive-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:58px; align-items:start; }
.news-results-column { min-width:0; }
.news-search-form { display:grid; grid-template-columns:210px minmax(0,1fr); gap:22px; align-items:center; margin-bottom:48px; }
.news-search-form > label { color:var(--accent-color,#2e67b2); font-size:1.7rem; font-weight:800; line-height:1.15; }
.news-search-control { height:64px; border:1px solid color-mix(in srgb,var(--default-color),transparent 55%); border-radius:34px; display:flex; overflow:hidden; background:var(--surface-color,#fff); }
.news-search-control input { flex:1; min-width:0; border:0; outline:0; padding:0 25px; background:transparent; color:var(--default-color); font:inherit; font-size:1rem; }
.news-search-control button { width:82px; border:0; background:var(--accent-color,#2e67b2); color:#fff; font-size:1.15rem; cursor:pointer; }
.news-results-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.news-results-toolbar h3 { margin:0; color:var(--accent-color,#2e67b2); font-size:1.65rem; font-weight:800; }
.news-sort-control { display:flex; align-items:center; gap:14px; color:var(--default-color); font-weight:600; }
.news-sort-control select { min-width:185px; height:48px; border:1px solid color-mix(in srgb,var(--default-color),transparent 60%); border-radius:25px; padding:0 18px; background:var(--surface-color,#fff); color:var(--default-color); outline:0; }
.news-archive-divider { height:1px; background:color-mix(in srgb,var(--accent-color,#2e67b2),transparent 55%); margin:44px 0 50px; }
.news-filter-sidebar { position:sticky; top:120px; }
.news-filter-sidebar h3 { margin:0; color:var(--accent-color,#2e67b2); font-size:1.65rem; font-weight:800; }
.news-filter-line { height:1px; background:color-mix(in srgb,var(--accent-color,#2e67b2),transparent 55%); margin:26px 0 0; }
.news-filter-group { border-bottom:1px solid color-mix(in srgb,var(--default-color),transparent 80%); }
.news-filter-toggle { width:100%; border:0; background:transparent; padding:25px 0; display:flex; justify-content:space-between; align-items:center; color:var(--heading-color); font:inherit; font-size:1.15rem; font-weight:800; cursor:pointer; text-align:start; }
.news-filter-content { padding:0 0 12px; }
.news-range-block > span { display:block; margin:5px 0 16px; color:var(--default-color); font-weight:600; }
.news-range-block + .news-range-block { margin-top:28px; }
.news-range-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.news-range-row label small { display:block; margin-bottom:8px; color:color-mix(in srgb,var(--default-color),transparent 15%); }
.news-range-row select { width:100%; height:48px; border:1px solid color-mix(in srgb,var(--default-color),transparent 58%); border-radius:25px; padding:0 13px; background:var(--surface-color,#fff); color:var(--default-color); outline:0; }
.news-filter-apply { width:100%; margin-top:22px; height:48px; border:0; border-radius:25px; background:var(--accent-color,#2e67b2); color:#fff; font-weight:800; cursor:pointer; }
.news-clear-filters { display:block; margin-top:17px; color:var(--accent-color,#2e67b2); text-decoration:underline; font-weight:600; }
.news-archive-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 32px; }
.news-archive-card { cursor:pointer; background:color-mix(in srgb,var(--surface-color,#fff),transparent 0%); box-shadow:0 7px 26px rgba(23,37,84,.08); }
.news-archive-card .news-image-link { display:block; }
.news-archive-card .news-image-wrap { height:auto; aspect-ratio:1.36/1; }
.news-card-title-link { color:inherit; text-decoration:none; }
.news-card-title-link h3 { color:var(--accent-color,#2e67b2) !important; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.news-archive-card .news-card-body { padding:21px 24px 25px; min-height:330px !important; }
.news-archive-card .news-kicker { color:var(--accent-color,#2e67b2); }
.news-archive-card .news-date { order:2; margin-top:8px !important; padding-top:12px !important; width:100%; }
.news-archive-card .news-date::before { background:color-mix(in srgb,var(--accent-color,#2e67b2),transparent 60%); }
.news-archive-card .news-summary { order:3; margin-top:0; }
.news-archive-card .news-read-more { order:4; margin-top:auto; width:100%; }
html[dir="rtl"] .news-archive-card .news-read-more, html[lang="fa"] .news-archive-card .news-read-more { justify-content:flex-start !important; text-align:right !important; }
.news-empty-state { padding:70px 20px; text-align:center; color:var(--default-color); }
.news-pagination-wrap { display:flex; justify-content:space-between; align-items:center; gap:25px; border-top:1px solid color-mix(in srgb,var(--accent-color,#2e67b2),transparent 55%); margin-top:65px; padding:38px 0 20px; }
.news-per-page { display:flex; align-items:center; gap:15px; font-weight:700; color:var(--default-color); }
.news-per-page select { height:46px; min-width:90px; border:1px solid color-mix(in srgb,var(--default-color),transparent 55%); border-radius:24px; background:var(--surface-color,#fff); color:var(--default-color); padding:0 14px; }
.news-pagination { display:flex; align-items:center; gap:20px; }
.news-pagination a { color:var(--accent-color,#2e67b2); text-decoration:underline; font-weight:700; min-width:24px; text-align:center; }
.news-pagination a.active { color:var(--default-color); text-decoration:none; }
.news-detail-page { background:var(--background-color); color:var(--default-color); }
.news-detail-article { padding:70px 0 90px; }
.news-detail-container { max-width:980px; }
.news-detail-back { display:inline-flex; gap:9px; align-items:center; color:var(--accent-color,#2e67b2); font-weight:800; margin-bottom:45px; text-decoration:none; }
.news-detail-meta-row { display:flex; align-items:center; gap:18px; margin-bottom:20px; color:color-mix(in srgb,var(--default-color),transparent 20%); font-size:.92rem; font-weight:600; }
.news-detail-kicker { color:var(--accent-color,#2e67b2); }
.news-detail-article h1 { max-width:900px; margin:0; color:var(--heading-color); font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.15; font-weight:800; letter-spacing:-1px; }
.news-detail-lead { max-width:820px; margin:28px 0 0; color:color-mix(in srgb,var(--default-color),transparent 12%); font-size:1.25rem; line-height:2; }
.news-detail-rule { height:1px; background:color-mix(in srgb,var(--accent-color,#2e67b2),transparent 45%); margin:42px 0 38px; }
.news-detail-hero { margin:0 0 55px; overflow:hidden; border-radius:18px 18px 92px 18px; }
html[dir="rtl"] .news-detail-hero, html[lang="fa"] .news-detail-hero { border-radius:18px 18px 18px 92px; }
.news-detail-hero img { width:100%; max-height:620px; object-fit:cover; display:block; }
.news-detail-content { max-width:820px; margin:0 auto; }
.news-detail-content p { margin:0 0 28px; color:color-mix(in srgb,var(--default-color),transparent 8%); font-size:1.12rem; line-height:2.15; }
.news-related-section { padding:70px 0 100px; background:color-mix(in srgb,var(--background-color),var(--accent-color) 3%); }
.news-detail-related-heading { margin-bottom:30px; color:var(--heading-color); font-size:1.55rem; font-weight:800; border-bottom:1px solid color-mix(in srgb,var(--accent-color),transparent 55%); padding-bottom:18px; }
.news-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.news-related-card { color:inherit; text-decoration:none; }
.news-related-image { aspect-ratio:1.45/1; overflow:hidden; border-radius:18px 18px 92px 18px; }
html[dir="rtl"] .news-related-image, html[lang="fa"] .news-related-image { border-radius:18px 18px 18px 92px; }
.news-related-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.news-related-card:hover .news-related-image img { transform:scale(1.04); }
.news-related-card h3 { margin:17px 0 9px; color:var(--accent-color,#2e67b2); text-decoration:underline; text-underline-offset:3px; font-size:1.15rem; line-height:1.55; }
.news-related-card time { color:color-mix(in srgb,var(--default-color),transparent 25%); font-size:.88rem; }
.news-detail-empty { padding:120px 0; text-align:center; font-size:1.3rem; }
html.dark-theme .news-archive-card, html[data-theme="dark"] .news-archive-card { box-shadow:0 12px 30px rgba(0,0,0,.22); }
html.dark-theme .news-search-control, html.dark-theme .news-sort-control select, html.dark-theme .news-range-row select, html.dark-theme .news-per-page select,
html[data-theme="dark"] .news-search-control, html[data-theme="dark"] .news-sort-control select, html[data-theme="dark"] .news-range-row select, html[data-theme="dark"] .news-per-page select { background:#1e293b; border-color:rgba(169,200,236,.25); }

@media (max-width:1199px) {
  .news-archive-layout { grid-template-columns:minmax(0,1fr) 290px; gap:35px; }
  .news-archive-grid { gap:30px 22px; }
}
@media (max-width:991px) {
  .news-archive-layout { grid-template-columns:1fr; }
  .news-filter-sidebar { position:static; order:-1; }
  .news-filter-sidebar form { background:color-mix(in srgb,var(--surface-color,#fff),transparent 0%); padding:24px; border-radius:18px 18px 70px 18px; box-shadow:0 7px 26px rgba(23,37,84,.07); }
  html[dir="rtl"] .news-filter-sidebar form, html[lang="fa"] .news-filter-sidebar form { border-radius:18px 18px 18px 70px; }
  .news-archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
  .news-search-form { grid-template-columns:1fr; gap:12px; }
  .news-search-form > label { font-size:1.4rem; }
  .news-results-toolbar { align-items:flex-start; flex-direction:column; }
  .news-archive-grid { grid-template-columns:1fr; }
  .news-pagination-wrap { flex-direction:column; align-items:flex-start; }
  .news-related-grid { grid-template-columns:1fr; }
  .news-detail-article { padding:45px 0 65px; }
  .news-detail-article h1 { font-size:2.25rem; }
  .news-detail-lead { font-size:1.05rem; }
  .news-detail-content p { font-size:1rem; line-height:2; }
}

/* NEWS ARTICLE — Unilever-inspired editorial structure, adapted for Shokooh */
.news-editorial{padding:72px 0 96px;background:var(--background-color);}
.news-editorial-header{max-width:1060px;margin:0 auto;}
.news-editorial-header h1{max-width:1040px;margin:8px 0 34px;color:var(--heading-color);font-size:clamp(2.4rem,5.4vw,5rem);line-height:1.08;font-weight:800;letter-spacing:-1.8px;}
.news-editorial-highlights{max-width:900px;margin:0;padding-inline-start:1.3rem;display:grid;gap:11px;color:var(--default-color);font-size:1.08rem;line-height:1.85;font-weight:650;}
.news-editorial-highlights li::marker{color:var(--accent-color,#2e67b2);}
.news-editorial-rule{height:1px;background:color-mix(in srgb,var(--default-color),transparent 75%);margin:48px auto 42px;max-width:1060px;}
.news-editorial-intro{max-width:820px;margin:0 auto 48px;font-size:1.22rem;line-height:2.05;color:var(--default-color);font-weight:550;}
.news-detail-hero{max-width:1060px;margin:0 auto 66px;overflow:hidden;border-radius:18px 18px 92px 18px;}
html[dir="rtl"] .news-detail-hero,html[lang="fa"] .news-detail-hero{border-radius:18px 18px 18px 92px;}
.news-detail-hero img{width:100%;height:min(62vw,620px);object-fit:cover;display:block;}
.news-editorial-body{max-width:820px;margin:0 auto;}
.news-editorial-section{margin:0 0 58px;}
.news-editorial-section h2{margin:0 0 22px;color:var(--heading-color);font-size:clamp(1.65rem,3vw,2.45rem);line-height:1.2;font-weight:800;}
.news-editorial-section p{margin:0;color:color-mix(in srgb,var(--default-color),transparent 5%);font-size:1.08rem;line-height:2.15;}
.news-inline-image{margin:18px 0 62px;overflow:hidden;border-radius:18px 18px 70px 18px;}
html[dir="rtl"] .news-inline-image,html[lang="fa"] .news-inline-image{border-radius:18px 18px 18px 70px;}
.news-inline-image img{width:100%;max-height:540px;object-fit:cover;display:block;}
.news-inline-image figcaption{padding:12px 4px 0;color:color-mix(in srgb,var(--default-color),transparent 28%);font-size:.86rem;line-height:1.7;}
.news-editorial-quote{margin:62px 0 70px;padding:26px 0 26px;border-block:1px solid color-mix(in srgb,var(--accent-color,#2e67b2),transparent 55%);color:var(--heading-color);}
.news-editorial-quote p{margin:0;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.55;font-weight:750;}
.news-editorial-quote cite{display:block;margin-top:20px;color:color-mix(in srgb,var(--default-color),transparent 25%);font-size:.92rem;font-style:normal;font-weight:650;}
html[dir="rtl"] .news-editorial,html[lang="fa"] .news-editorial{text-align:right;}
html[dir="ltr"] .news-editorial,html[lang="en"] .news-editorial{text-align:left;}
html[data-theme="dark"] .news-admin-card{}
@media(max-width:767px){.news-editorial{padding:44px 0 65px}.news-editorial-header h1{font-size:2.45rem;letter-spacing:-.8px;margin-bottom:26px}.news-editorial-highlights{font-size:1rem}.news-editorial-rule{margin:34px auto}.news-editorial-intro{font-size:1.05rem;line-height:1.95}.news-detail-hero{margin-bottom:45px}.news-detail-hero img{height:62vw;min-height:240px}.news-editorial-body{padding-inline:4px}.news-editorial-section{margin-bottom:44px}.news-editorial-section p{font-size:1rem;line-height:2}.news-inline-image{margin-bottom:45px}.news-editorial-quote{margin:45px 0 50px}.news-editorial-quote p{font-size:1.45rem}}

/* NEWS EDITORIAL — extended article blocks */
.news-editorial-list ul{margin:0;padding-inline-start:1.35rem;display:grid;gap:12px;}
.news-editorial-list li{font-size:1.06rem;line-height:1.95;color:color-mix(in srgb,var(--default-color),transparent 4%);padding-inline-start:6px;}
.news-editorial-list li::marker{color:var(--accent-color,#2e67b2);font-weight:800;}
.news-editorial-callout{margin:8px 0 66px;padding:28px 32px;border:1px solid color-mix(in srgb,var(--accent-color,#2e67b2),transparent 62%);border-radius:18px 18px 64px 18px;background:color-mix(in srgb,var(--accent-color,#2e67b2),var(--background-color) 92%);}
html[dir="rtl"] .news-editorial-callout,html[lang="fa"] .news-editorial-callout{border-radius:18px 18px 18px 64px;}
.news-editorial-callout h3{margin:0 0 10px;color:var(--heading-color);font-size:1.35rem;font-weight:800;}
.news-editorial-callout p{margin:0;color:var(--default-color);font-size:1.02rem;line-height:1.95;}
.news-editorial-divider{height:1px;background:color-mix(in srgb,var(--default-color),transparent 78%);margin:18px 0 58px;}
.news-editorial-quote cite{display:block;margin-top:16px;color:color-mix(in srgb,var(--default-color),transparent 28%);font-size:.92rem;font-style:normal;font-weight:700;}
@media (max-width:767px){.news-editorial-list li{font-size:1rem}.news-editorial-callout{padding:22px 20px;margin-bottom:48px}.news-editorial-callout h3{font-size:1.18rem}}

/* =============================================================
   SHOKOOH 2026 VISUAL REFINEMENT — PRODUCT / NEWS / FOOTER / INNER NAV
   ============================================================= */

/* Global theme atmosphere: soft gradients for explicit light only.
   Default follows OS preference (see theme patch below). */
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% 8%, rgba(46,103,178,.09), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(99,102,241,.07), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f1f6fd 48%, #f3efff 100%) !important;
  background-attachment: fixed;
}
html[data-theme="dark"] body,
html.dark-theme body {
  background:
    radial-gradient(circle at 8% 5%, rgba(46,103,178,.20), transparent 28%),
    radial-gradient(circle at 92% 20%, rgba(59,130,246,.12), transparent 28%),
    linear-gradient(135deg, #050a18 0%, #0a1230 48%, #111a3b 100%) !important;
  background-attachment: fixed;
}

/* Inner-page navigation is intentionally smaller: these pages do not contain
   the five home-page sections, so the header only exposes useful destinations. */
.inner-page .navmenu ul { gap: 8px; }
.inner-page .navmenu a { padding: 9px 13px; }
.inner-page .navmenu a.active { color: var(--nav-hover-color, #2e67b2); }
@media (max-width:1199px) {
  .inner-page .navmenu ul { gap: 0; }
  .inner-page .navmenu a { padding: 10px 20px; }
}

/* Product cards: a consistent Shokooh surface in both themes. */
.ul-catalog-page {
  background: transparent !important;
  padding-top: 52px !important;
  padding-bottom: 80px;
}
.ul-pod-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 24px 24px 72px 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(249,246,255,.96));
  border: 1px solid rgba(46,103,178,.10);
  box-shadow: 0 16px 42px rgba(23,37,84,.08);
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
html[dir="rtl"] .ul-pod-wrapper, html[lang="fa"] .ul-pod-wrapper { border-radius: 24px 24px 24px 72px; }
.ul-pod-wrapper:hover { transform: translateY(-5px); box-shadow: 0 22px 52px rgba(46,103,178,.13); border-color: rgba(46,103,178,.20); }
.ul-pod-visual { height: 210px; border-radius: 18px 18px 56px 18px; }
html[dir="rtl"] .ul-pod-visual, html[lang="fa"] .ul-pod-visual { border-radius: 18px 18px 18px 56px; }
.ul-pod-visual img { border-radius: 18px 18px 56px 18px !important; }
html[dir="rtl"] .ul-pod-visual img, html[lang="fa"] .ul-pod-visual img { border-radius: 18px 18px 18px 56px !important; }
.ul-pod-details { padding: 12px 4px 2px; }
.ul-pod-title { font-size: 1rem; }
.ul-pod-desc { font-size: .82rem; }

/* Product quick view: image floats directly on the modal surface. */
#productQuickModal .modal-dialog { max-width: 940px; }
#productQuickModal .modal-content {
  border-radius: 30px !important;
  overflow: hidden;
  background: linear-gradient(145deg, var(--surface-color,#fff), color-mix(in srgb, var(--surface-color,#fff), #2e67b2 5%));
  border: 1px solid rgba(46,103,178,.14) !important;
  box-shadow: 0 30px 90px rgba(23,37,84,.20) !important;
}
#productQuickModal .modal-header { padding: 18px 22px 0; }
#productQuickModal .modal-body { padding: 10px 32px 36px !important; }
#productQuickModal .modal-image-pod { background: transparent !important; border: 0 !important; padding: 0 !important; display:flex; align-items:center; justify-content:center; }
#productQuickModal .modal-image-pod img {
  display:block; width:100%; max-width:390px; height:330px; object-fit:contain;
  border-radius: 24px 24px 82px 24px !important;
  box-shadow: 0 18px 45px rgba(23,37,84,.12);
}
html[dir="rtl"] #productQuickModal .modal-image-pod img, html[lang="fa"] #productQuickModal .modal-image-pod img { border-radius:24px 24px 24px 82px !important; }
#productQuickModal #modalProductBrand { border-radius:999px; padding:7px 12px; background:rgba(46,103,178,.10) !important; color:#245b9f !important; }
#productQuickModal #modalProductTitle { font-size:clamp(1.55rem,3vw,2.15rem); }
#productQuickModal #modalProductDesc { font-size:.98rem !important; line-height:1.9; }
.product-modal-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.product-modal-spec {
  min-height:76px; padding:14px 16px; border-radius:16px;
  background:color-mix(in srgb, var(--surface-color,#fff), #2e67b2 6%);
  border:1px solid rgba(46,103,178,.14); display:flex; flex-direction:column; justify-content:center; gap:4px;
}
.product-modal-spec-label { color:color-mix(in srgb,var(--default-color),transparent 25%); font-size:.76rem; font-weight:700; }
.product-modal-spec strong { color:var(--heading-color); font-size:1rem; }
#productQuickModal #modalProductIngredientsBox { border-color:rgba(46,103,178,.16) !important; }
#productQuickModal #modalProductIngredientsBox h6 { color:var(--heading-color) !important; }
#productQuickModal #modalProductIngredients { color:var(--default-color) !important; line-height:1.9; }

/* Product dark mode: no pale navy rectangles and no dark-on-dark text. */
html[data-theme="dark"] .ul-filter-bar,
html.dark-theme .ul-filter-bar,
html[data-theme="dark"] .ul-sidebar-card,
html.dark-theme .ul-sidebar-card,
html[data-theme="dark"] .ul-pod-wrapper,
html.dark-theme .ul-pod-wrapper {
  background:linear-gradient(145deg,#111d3d 0%,#0d1732 100%) !important;
  border-color:rgba(142,183,232,.18) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
html[data-theme="dark"] .ul-pod-title, html.dark-theme .ul-pod-title,
html[data-theme="dark"] .ul-catalog-heading, html.dark-theme .ul-catalog-heading,
html[data-theme="dark"] .ul-sidebar-card h5, html.dark-theme .ul-sidebar-card h5 { color:#fff !important; }
html[data-theme="dark"] .ul-pod-desc, html.dark-theme .ul-pod-desc,
html[data-theme="dark"] .ul-cat-item .cat-title, html.dark-theme .ul-cat-item .cat-title { color:#cbd5e1 !important; opacity:1; }
html[data-theme="dark"] .ul-pod-meta .badge, html.dark-theme .ul-pod-meta .badge { color:#e2e8f0 !important; background:#18274d !important; }
html[data-theme="dark"] #productQuickModal .modal-content, html.dark-theme #productQuickModal .modal-content {
  background:linear-gradient(145deg,#111d3d 0%,#0a1430 100%) !important;
  border-color:rgba(142,183,232,.24) !important;
}
html[data-theme="dark"] #productQuickModal #modalProductTitle, html.dark-theme #productQuickModal #modalProductTitle,
html[data-theme="dark"] #productQuickModal #modalProductIngredientsBox h6, html.dark-theme #productQuickModal #modalProductIngredientsBox h6,
html[data-theme="dark"] .product-modal-spec strong, html.dark-theme .product-modal-spec strong { color:#fff !important; }
html[data-theme="dark"] #productQuickModal #modalProductDesc, html.dark-theme #productQuickModal #modalProductDesc,
html[data-theme="dark"] #productQuickModal #modalProductIngredients, html.dark-theme #productQuickModal #modalProductIngredients,
html[data-theme="dark"] .product-modal-spec-label, html.dark-theme .product-modal-spec-label { color:#cbd5e1 !important; }
html[data-theme="dark"] .product-modal-spec, html.dark-theme .product-modal-spec { background:rgba(46,103,178,.10); border-color:rgba(142,183,232,.18); }
html[data-theme="dark"] #productQuickModal .btn-close, html.dark-theme #productQuickModal .btn-close { filter:invert(1) grayscale(1); }

/* News archive: every card has a predictable equal-height content area. */
.news-archive-grid { align-items:stretch; }
.news-archive-card { height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; border-radius:20px 20px 72px 20px; }
html[dir="rtl"] .news-archive-card, html[lang="fa"] .news-archive-card { border-radius:20px 20px 20px 72px; }
.news-archive-card .news-image-wrap { height:235px; aspect-ratio:auto; flex:0 0 235px; }
.news-archive-card .news-card-body { min-height:360px !important; height:360px; display:flex; flex-direction:column; }
.news-archive-card .news-card-title-link { display:block; min-height:58px; }
.news-archive-card .news-card-title-link h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-archive-card .news-summary { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; min-height:92px; }
.news-archive-card .news-read-more { margin-top:auto !important; }

/* Editorial article sections: replace hard-edged lavender blocks with soft
   rounded gradient surfaces and directional curved corners. */
.news-detail-page { background:transparent !important; }
.news-editorial { background:transparent !important; }
.news-editorial-section {
  position:relative; padding:28px 30px 30px; margin-bottom:34px;
  border:1px solid rgba(46,103,178,.12);
  border-radius:24px 24px 76px 24px;
  background:linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(249,245,255,.94) 55%, rgba(239,233,255,.90) 100%);
  box-shadow:0 16px 40px rgba(76,29,149,.07);
}
html[dir="rtl"] .news-editorial-section, html[lang="fa"] .news-editorial-section { border-radius:24px 24px 24px 76px; }
.news-editorial-section h2 { margin-bottom:16px; }
.news-editorial-callout { background:linear-gradient(135deg, rgba(46,103,178,.09), rgba(99,102,241,.05)) !important; border-radius:24px 24px 72px 24px !important; box-shadow:0 14px 38px rgba(76,29,149,.07); }
html[dir="rtl"] .news-editorial-callout, html[lang="fa"] .news-editorial-callout { border-radius:24px 24px 24px 72px !important; }
.news-editorial-quote { padding:30px 32px !important; border:1px solid rgba(46,103,178,.12); border-radius:24px 24px 72px 24px; background:linear-gradient(135deg, rgba(46,103,178,.07), rgba(255,255,255,.82)); box-shadow:0 14px 38px rgba(76,29,149,.06); }
html[dir="rtl"] .news-editorial-quote, html[lang="fa"] .news-editorial-quote { border-radius:24px 24px 24px 72px; }
.news-editorial-list { padding-bottom:28px; }
html[data-theme="dark"] .news-editorial-section, html.dark-theme .news-editorial-section {
  background:linear-gradient(135deg,#111d3d 0%,#151c42 58%,#1d1745 100%);
  border-color:rgba(142,183,232,.16); box-shadow:0 18px 48px rgba(0,0,0,.22);
}
html[data-theme="dark"] .news-editorial-section h2, html.dark-theme .news-editorial-section h2,
html[data-theme="dark"] .news-editorial-section p, html.dark-theme .news-editorial-section p,
html[data-theme="dark"] .news-editorial-list li, html.dark-theme .news-editorial-list li { color:#f8fafc; }
html[data-theme="dark"] .news-editorial-callout, html.dark-theme .news-editorial-callout { background:linear-gradient(135deg,rgba(46,103,178,.16),rgba(30,41,59,.72)) !important; border-color:rgba(142,183,232,.22); }
html[data-theme="dark"] .news-editorial-quote, html.dark-theme .news-editorial-quote { background:linear-gradient(135deg,rgba(46,103,178,.15),rgba(15,28,63,.90)); border-color:rgba(142,183,232,.20); }

/* Footer contact form — deliberate dark glass surface with bright controls. */
html[data-theme="dark"] .footer .footer-contact-form-wrap,
html.dark-theme .footer .footer-contact-form-wrap {
  background:linear-gradient(145deg,#111d3d 0%,#0d1733 100%) !important;
  border:1px solid rgba(142,183,232,.20) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .footer .footer-field label,
html.dark-theme .footer .footer-field label { color:#e9e7ff !important; }
html[data-theme="dark"] .footer .footer-contact-form .form-control,
html.dark-theme .footer .footer-contact-form .form-control {
  background:#17264d !important; color:#f8fafc !important; border:1px solid rgba(142,183,232,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="dark"] .footer .footer-contact-form .form-control::placeholder,
html.dark-theme .footer .footer-contact-form .form-control::placeholder { color:#94a3b8 !important; }
html[data-theme="dark"] .footer .footer-contact-form .form-control:focus,
html.dark-theme .footer .footer-contact-form .form-control:focus { border-color:#8eb7e8 !important; box-shadow:0 0 0 4px rgba(142,183,232,.13) !important; }
html[data-theme="dark"] .footer .footer-send-btn,
html.dark-theme .footer .footer-send-btn { background:linear-gradient(135deg,#2e67b2,#1f4f91) !important; box-shadow:0 12px 28px rgba(46,103,178,.25); }

/* Inner-page filter/surface gradients. */
html[data-theme="light"] .news-filter-sidebar form,
html[data-theme="default"]:not(.dark-theme) .news-filter-sidebar form,
html[data-theme="light"] .news-pagination-wrap,
html[data-theme="default"]:not(.dark-theme) .news-pagination-wrap { background:rgba(255,255,255,.38); }
html[data-theme="dark"] .news-filter-sidebar form, html.dark-theme .news-filter-sidebar form,
html[data-theme="dark"] .news-pagination-wrap, html.dark-theme .news-pagination-wrap { background:rgba(8,15,34,.38); }

@media (max-width:767px) {
  .product-modal-specs { grid-template-columns:1fr; }
  #productQuickModal .modal-body { padding:6px 20px 26px !important; }
  #productQuickModal .modal-image-pod img { height:250px; }
  .news-archive-card .news-image-wrap { height:210px; flex-basis:210px; }
  .news-archive-card .news-card-body { height:340px; min-height:340px !important; padding:18px 20px 22px; }
  .news-editorial-section { padding:22px 20px 24px; }
}

/* Make the archive itself transparent so the new theme atmosphere can breathe through. */
html[data-theme="light"] .news-archive-page,
html[data-theme="default"]:not(.dark-theme) .news-archive-page { background: transparent !important; }
html[data-theme="dark"] .news-archive-page,
html.dark-theme .news-archive-page { background: transparent !important; }

/* Dark-mode gradient atmosphere for the main site's non-hero sections. */
html[data-theme="dark"] .section:not(.hero),
html.dark-theme .section:not(.hero) {
  background: linear-gradient(135deg, rgba(8,15,34,.98) 0%, rgba(13,22,49,.98) 52%, rgba(25,18,55,.96) 100%) !important;
}

/* ======================================================================
   FINAL INNER-PAGE REFINEMENT — PRODUCTS + NEWS EDITORIAL
   ====================================================================== */

/* Contextual inner navigation: each page exposes only destinations that
   are meaningful on that page. */
.inner-page-nav { gap: 6px !important; }

/* Products header follows the same centered editorial hierarchy as News. */
.ul-catalog-section-title { margin-top: 12px; margin-bottom: 34px !important; text-align:center !important; }
.ul-catalog-section-title h2 { margin-bottom: 10px !important; }
.ul-catalog-section-title p { margin-bottom: 0 !important; }
.ul-catalog-intro {
  max-width: 760px;
  margin: 16px auto 0;
  color: color-mix(in srgb, var(--default-color), transparent 18%);
  font-size: 1rem;
  line-height: 1.95;
}
html[data-theme="dark"] .ul-catalog-intro,
html.dark-theme .ul-catalog-intro { color:#cbd5e1; }

/* Product cards: quantity/weight are intentionally shown only in Quick View. */
.ul-pod-meta { display:none !important; }

/* Quick View image: absolutely no visual panel behind the product image. */
#productQuickModal .modal-image-pod,
#productQuickModal .modal-image-pod::before,
#productQuickModal .modal-image-pod::after {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
#productQuickModal .modal-image-pod img {
  background:transparent !important;
  box-shadow:none !important;
  width:auto !important;
  max-width:100% !important;
  height:330px;
  object-fit:contain;
  border-radius:24px 24px 82px 24px !important;
}
html[dir="rtl"] #productQuickModal .modal-image-pod img,
html[lang="fa"] #productQuickModal .modal-image-pod img {
  border-radius:24px 24px 24px 82px !important;
}

/* A restrained, publication-style article page: whitespace, typography,
   rules and hierarchy replace the previous card-like text containers. */
.news-editorial {
  background: transparent !important;
  padding: 76px 0 100px;
}
.news-editorial-header { max-width: 1080px; }
.news-editorial-header h1 {
  max-width: 1000px;
  font-size:clamp(2.35rem,5.2vw,4.8rem);
  line-height:1.08;
  letter-spacing:-1.6px;
  margin-bottom:30px;
}
.news-editorial-meta-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.news-detail-kicker {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0;
  border:0 !important;
  background:none !important;
  color:var(--accent-color,#2e67b2) !important;
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.04em;
}
.news-editorial-highlights {
  max-width:900px;
  margin-top:28px;
  padding-inline-start:1.2rem;
  color:color-mix(in srgb,var(--default-color),transparent 4%);
  font-size:1.02rem;
  line-height:1.95;
}
.news-editorial-rule {
  max-width:1080px;
  margin:42px auto 38px;
  background:color-mix(in srgb,var(--default-color),transparent 82%);
}
.news-editorial-intro {
  max-width:820px;
  margin:0 auto 48px;
  font-size:1.22rem;
  line-height:2;
  font-weight:500;
  color:color-mix(in srgb,var(--default-color),transparent 5%);
}
.news-editorial-body {
  max-width:800px;
  margin:0 auto;
}
.news-editorial-section {
  margin:0 0 58px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.news-editorial-section h2 {
  position:relative;
  margin:0 0 20px;
  padding-top:0;
  font-size:clamp(1.55rem,2.5vw,2.15rem);
  line-height:1.28;
  font-weight:800;
}
.news-editorial-section h2::before {
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin-bottom:14px;
  border-radius:99px;
  background:linear-gradient(90deg,#2e67b2,#8eb7e8);
}
html[dir="rtl"] .news-editorial-section h2::before,
html[lang="fa"] .news-editorial-section h2::before {
  background:linear-gradient(90deg,#8eb7e8,#2e67b2);
}
.news-editorial-section p,
.news-editorial-list li {
  font-size:1.08rem !important;
  line-height:2.2 !important;
  color:color-mix(in srgb,var(--default-color),transparent 4%) !important;
}
.news-editorial-section + .news-editorial-section {
  padding-top:8px !important;
}
.news-editorial-divider {
  width:100%;
  height:1px !important;
  margin:54px 0 !important;
  background:color-mix(in srgb,var(--default-color),transparent 84%) !important;
}
.news-inline-image {
  margin:20px 0 62px !important;
  border-radius:18px 18px 72px 18px !important;
  background:transparent !important;
}
html[dir="rtl"] .news-inline-image,
html[lang="fa"] .news-inline-image { border-radius:18px 18px 18px 72px !important; }
.news-inline-image img {
  border-radius:inherit;
}
.news-inline-image figcaption {
  padding:12px 2px 0;
  font-size:.82rem;
  line-height:1.7;
  color:color-mix(in srgb,var(--default-color),transparent 38%);
}
.news-editorial-list ul { padding-inline-start:1.25rem; }
.news-editorial-list li { padding-inline-start:5px; }
.news-editorial-callout {
  margin:12px 0 64px !important;
  padding:22px 0 22px !important;
  border:0 !important;
  border-inline-start:4px solid #477fc4 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html[dir="rtl"] .news-editorial-callout,
html[lang="fa"] .news-editorial-callout {
  border-inline-start:0 !important;
  border-inline-end:4px solid #477fc4 !important;
}
.news-editorial-callout h3 { font-size:1.22rem; margin-bottom:8px; }
.news-editorial-callout p { font-size:1rem; line-height:2; }
.news-editorial-quote {
  margin:64px 0 72px !important;
  padding:20px 28px !important;
  border-block:0 !important;
  border-inline-start:4px solid #477fc4 !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,rgba(46,103,178,.055),transparent) !important;
  box-shadow:none !important;
}
html[dir="rtl"] .news-editorial-quote,
html[lang="fa"] .news-editorial-quote {
  border-inline-start:0 !important;
  border-inline-end:4px solid #477fc4 !important;
  background:linear-gradient(270deg,rgba(46,103,178,.055),transparent) !important;
}
.news-editorial-quote p {
  font-size:clamp(1.4rem,2.7vw,2rem) !important;
  line-height:1.65 !important;
  font-weight:700;
}
.news-editorial-quote cite { font-size:.86rem; margin-top:14px; }
.news-detail-hero {
  margin-bottom:68px;
  border-radius:18px 18px 92px 18px !important;
  box-shadow:0 18px 50px rgba(23,37,84,.10);
}
html[dir="rtl"] .news-detail-hero,
html[lang="fa"] .news-detail-hero { border-radius:18px 18px 18px 92px !important; }
html[data-theme="dark"] .news-detail-hero,
html.dark-theme .news-detail-hero { box-shadow:0 20px 60px rgba(0,0,0,.25); }
.news-related-section {
  border-top:1px solid color-mix(in srgb,var(--default-color),transparent 86%);
  padding-top:50px;
}
.news-detail-related-heading {
  border:0 !important;
  padding-bottom:14px !important;
}

/* Dark mode keeps the same publication-like hierarchy instead of turning
   article sections into dark boxes. */
html[data-theme="dark"] .news-editorial-section p,
html.dark-theme .news-editorial-section p,
html[data-theme="dark"] .news-editorial-list li,
html.dark-theme .news-editorial-list li { color:#e5e7eb !important; }
html[data-theme="dark"] .news-editorial-intro,
html.dark-theme .news-editorial-intro { color:#e2e8f0; }
html[data-theme="dark"] .news-editorial-divider,
html.dark-theme .news-editorial-divider { background:rgba(226,232,240,.16) !important; }
html[data-theme="dark"] .news-editorial-quote,
html.dark-theme .news-editorial-quote,
html[data-theme="dark"] .news-editorial-callout,
html.dark-theme .news-editorial-callout { background:linear-gradient(90deg,rgba(46,103,178,.10),transparent) !important; }
html[dir="rtl"][data-theme="dark"] .news-editorial-quote,
html[lang="fa"][data-theme="dark"] .news-editorial-quote,
html[dir="rtl"].dark-theme .news-editorial-quote,
html[lang="fa"].dark-theme .news-editorial-quote { background:linear-gradient(270deg,rgba(46,103,178,.10),transparent) !important; }

@media (max-width:767px) {
  .ul-catalog-section-title { margin-bottom:26px !important; }
  .ul-catalog-intro { font-size:.92rem; padding-inline:10px; }
  #productQuickModal .modal-image-pod img { height:260px; }
  .news-editorial { padding:46px 0 68px; }
  .news-editorial-header h1 { font-size:2.3rem; }
  .news-editorial-intro { font-size:1.06rem; }
  .news-editorial-body { padding-inline:5px; }
  .news-editorial-section { margin-bottom:46px !important; }
  .news-editorial-section p,
  .news-editorial-list li { font-size:1rem !important; line-height:2.05 !important; }
  .news-editorial-quote { margin:48px 0 54px !important; padding-inline:20px !important; }
}

/* ===== SHOKOOH ULTIMATE HEADER SCROLL FIX ===== */

/* در حالت عادی در صفحه اصلی، هدر کاملاً شفاف و بدون حاشیه */
body.index-page #header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease !important;
}

/* وقتی کلاس scrolled اضافه میشه یا در صفحات داخلی هستیم */
body.index-page #header.scrolled,
body.inner-page #header {
    background: rgba(255, 255, 255, 0.92) !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* رنگ متن‌ها و آیکون‌ها در هدر شفاف صفحه اصلی */
body.index-page #header:not(.scrolled) .navmenu a,
body.index-page #header:not(.scrolled) .logo img,
body.index-page #header:not(.scrolled) .theme-switcher-btn,
body.index-page #header:not(.scrolled) .lang-flag-btn {
    color: #ffffff !important;
}

/* اگر تم دارک فعال باشه */
[data-theme="dark"] body.index-page #header.scrolled,
[data-theme="dark"] body.inner-page #header {
    background: rgba(18, 18, 18, 0.92) !important;
    background-color: rgba(18, 18, 18, 0.92) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* === Homepage hero: full first viewport with the transparent header layered above it === */
body.index-page #header{position:absolute!important;top:0;left:0;right:0;width:100%;z-index:1050;margin-top:0!important}
body.index-page #hero.hero-unilever-style{height:100vh;height:100svh;min-height:620px;padding:0;margin:0}
body.index-page #hero .hero-media-box{height:100%;min-height:100%;border-radius:0 0 0 0;box-shadow:none}
body.index-page #hero .hero-main-video{object-fit:cover}
body.index-page #header.scrolled{position:fixed!important;top:0}
@media(max-width:767px){body.index-page #hero.hero-unilever-style{min-height:560px;height:100svh}body.index-page #hero .hero-media-box{height:100%}}

/* Brand logo marquee replacing the generic Why Choose block */
.partners-section{overflow:hidden;background:linear-gradient(135deg,rgba(46,103,178,.045),rgba(255,255,255,.92) 48%,rgba(14,165,233,.055))}
.partners-slider{overflow:hidden;position:relative;padding:20px 0 30px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.partners-track{display:flex;direction:ltr;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:clamp(28px,5vw,80px);width:max-content;animation:shokoohPartnerScroll 34s linear infinite}
.partners-slider:hover .partners-track{animation-play-state:paused}
.partner-logo{width:clamp(150px,18vw,230px);height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex-shrink:0;border-radius:22px 22px 60px 22px;background:color-mix(in srgb,var(--surface-color,#fff),transparent 12%);border:1px solid rgba(46,103,178,.12);box-shadow:0 14px 36px rgba(23,37,84,.06);padding:18px}
html[dir="rtl"] .partner-logo{border-radius:22px 22px 22px 60px}
.partner-logo img{width:100%;height:70px;object-fit:contain}
.partner-logo span{font-weight:800;color:var(--heading-color);font-size:1.05rem}
.partner-wordmark span{font-size:clamp(1rem,2vw,1.35rem);letter-spacing:.06em;color:var(--accent-color,#2e67b2)}
.partner-wordmark small{color:var(--default-color);text-align:center}
@keyframes shokoohPartnerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[data-theme="dark"] .partners-section,
html.dark-theme .partners-section,
html[data-theme="default"].dark-theme .partners-section {
  background: linear-gradient(135deg, rgba(46,103,178,.15), rgba(15,23,42,.98) 55%, rgba(14,165,233,.08)) !important;
}
html[data-theme="dark"] .partner-logo,
html.dark-theme .partner-logo,
html[data-theme="default"].dark-theme .partner-logo {
  background: rgba(30, 41, 59, 0.75) !important;
  border-color: rgba(142, 183, 232, 0.24) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2) !important;
}

/* Representatives map */
.representatives-section{background:linear-gradient(145deg,rgba(46,103,178,.04),transparent 55%)}
.representatives-note{max-width:850px;margin:18px auto 0;font-size:.9rem;line-height:1.9;color:var(--default-color);opacity:.82}
.representatives-map{height:480px;border-radius:24px 24px 100px 24px;overflow:hidden;border:1px solid rgba(46,103,178,.18);box-shadow:0 20px 55px rgba(23,37,84,.12);z-index:1}
html[dir="rtl"] .representatives-map{border-radius:24px 24px 24px 100px}
html[data-theme="dark"] .representatives-map,html.dark-theme .representatives-map{border-color:rgba(142,183,232,.3);box-shadow:0 20px 55px rgba(0,0,0,.28)}
@media(max-width:767px){.representatives-map{height:360px;border-radius:18px 18px 60px 18px}}

/* Quick view close button: keep the hit target exactly on the visible icon */
#productQuickModal .modal-content{position:relative;overflow:visible}
#productQuickModal .modal-header{position:absolute;top:10px;right:10px;left:auto;z-index:10;padding:0!important;border:0!important;min-height:0}
html[dir="rtl"] #productQuickModal .modal-header{right:auto;left:10px}
#productQuickModal .modal-header .btn-close{width:42px;height:42px;padding:12px;margin:0;opacity:1;display:grid;place-items:center;background-color:var(--surface-color,#fff);border-radius:50%;box-shadow:0 4px 16px rgba(15,23,42,.15);background-position:center;cursor:pointer}
#productQuickModal .modal-body{padding-top:54px!important}
#productQuickModal .modal-dialog{padding:8px}

/* ==========================================================================
   SHOKOOH DESIGN TOKENS — final unified palette
   Change these variables to tune the site's shared blue/white visual identity.
   ========================================================================== */
:root {
  --shokooh-blue: #2E67B2;
  --shokooh-blue-hover: #245B9F;
  --shokooh-blue-deep: #1F4F91;
  --shokooh-blue-soft: #EAF2FC;
  --shokooh-blue-pale: #F5F9FE;
  --shokooh-blue-border: #D8E6F6;
  --shokooh-purple: var(--shokooh-blue);
  --shokooh-purple-dark: var(--shokooh-blue-deep);
  --accent-color: var(--shokooh-blue);
  --nav-hover-color: var(--shokooh-blue);
  --nav-dropdown-hover-color: var(--shokooh-blue);
}

/* ==========================================================================
   SHOKOOH RESPONSIVE POLISH — fluid layouts for phones, tablets and desktops
   Appended intentionally so existing component rules and features remain intact.
   ========================================================================== */
:root {
  --page-gutter: clamp(1rem, 4vw, 3.5rem);
  --content-max:  min(100% - (var(--page-gutter) * 2), 1320px);
  --section-space-y: clamp(2.75rem, 6vw, 6rem);
  --card-radius: clamp(1rem, 2vw, 1.5rem);
}

html { scroll-padding-top: clamp(4.5rem, 9vh, 7rem); }
body { overflow-wrap: break-word; }
img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }

/* Shared section/container sizing */
.container,
.container-fluid {
  width: 100%;
  padding-inline: var(--page-gutter);
}
section,
.section {
  scroll-margin-top: clamp(4.5rem, 9vh, 7rem);
}
section:not(#hero),
.section:not(#hero) {
  padding-block: var(--section-space-y);
}
.row { --bs-gutter-x: clamp(1rem, 2.6vw, 2rem); }

/* Fluid typography: avoid oversized headings and tiny mobile copy */
h1, .h1 { font-size: clamp(2rem, 5.2vw, 3.75rem); line-height: 1.16; }
h2, .h2 { font-size: clamp(1.65rem, 4vw, 2.75rem); line-height: 1.25; }
h3, .h3 { font-size: clamp(1.15rem, 2.3vw, 1.65rem); line-height: 1.4; }
p, li { overflow-wrap: anywhere; }

/* Header and navigation */
#header { max-width: 100%; }
#header .container,
#header .container-fluid { min-width: 0; }
#header .logo { min-width: 0; max-width: 70%; }
#header .logo img,
.header .logo .site-logo {
  width: auto;
  max-width: min(126vw, 795px);
  height: clamp(8.25rem, 18vw, 14.625rem);
  object-fit: contain;
}
.navmenu a { white-space: normal; }

/* Hero keeps the first viewport filled without forcing a fixed desktop height */
body.index-page #hero.hero-unilever-style {
  min-height: 100svh;
  min-height: 100dvh;
  height: 100svh;
  height: 100dvh;
}
body.index-page #hero .hero-media-box,
body.index-page #hero .hero-main-video {
  width: 100%;
  height: 100%;
  background: #ffffff !important;
}
body.index-page #hero .hero-main-video { object-fit: cover; }

/* Products catalog and cards */
.products-section .container,
#menu .container,
.product-catalog .container { max-width: 100%; }
.products-grid,
.product-grid,
.brand-products-grid,
#menu .row { min-width: 0; }
.product-card,
.product-item,
.brand-product-card,
.product-catalog-card { min-width: 0; max-width: 100%; }
.product-card img,
.product-item img,
.brand-product-card img,
.product-catalog-card img { max-width: 100%; object-fit: contain; }
.ul-catalog-section-title { width: 100%; padding-inline: var(--page-gutter); }
.ul-catalog-section-title h2 { font-size: clamp(1.75rem, 4.5vw, 3rem); line-height: 1.25; }
.ul-catalog-section-title p { max-width: 65ch; margin-inline: auto; font-size: clamp(.95rem, 1.6vw, 1.1rem); line-height: 1.9; }

/* Product quick-view modal: fit the viewport and keep the close control reachable */
#productQuickModal .modal-dialog {
  width: min(94vw, 980px);
  max-width: 980px;
  margin: 1rem auto;
}
#productQuickModal .modal-content {
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: clamp(1rem, 3vw, 1.75rem);
}
#productQuickModal .modal-body { min-width: 0; }
#productQuickModal .modal-header { position: sticky; top: 0; }
#productQuickModal .modal-header .btn-close {
  width: clamp(2.5rem, 8vw, 2.75rem);
  height: clamp(2.5rem, 8vw, 2.75rem);
  flex: 0 0 auto;
  touch-action: manipulation;
}

/* News archive: equal-height cards on larger screens, natural content on phones */
.news-archive-page .container,
.news-archive-layout,
.news-archive-main,
.news-filter-sidebar { min-width: 0; }
.news-archive-layout {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.news-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.news-archive-card { min-width: 0; }
.news-archive-card .news-card-body { padding: clamp(1rem, 2vw, 1.5rem); }
.news-archive-card .news-card-title-link h3 { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; }
.news-archive-card .news-summary { font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.85; }
.news-search-form,
.news-filter-sidebar form,
.news-archive-toolbar { min-width: 0; }
.news-archive-toolbar input,
.news-archive-toolbar select,
.news-search-form input,
.news-filter-sidebar input,
.news-filter-sidebar select { max-width: 100%; min-width: 0; }

/* Editorial article: readable measure and scalable media */
.news-detail-article,
.news-editorial { padding-inline: var(--page-gutter); }
.news-detail-container,
.news-editorial-container { width: 100%; max-width: 980px; margin-inline: auto; }
.news-detail-article h1,
.news-editorial-header h1 { font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.18; letter-spacing: -.025em; }
.news-detail-lead,
.news-editorial-intro { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.95; }
.news-detail-content,
.news-editorial-body { width: 100%; max-width: 78ch; margin-inline: auto; }
.news-detail-content p,
.news-editorial-section p { font-size: clamp(1rem, 1.45vw, 1.125rem); line-height: 2.05; }
.news-detail-hero,
.news-inline-image { width: 100%; }
.news-detail-hero img,
.news-inline-image img { width: 100%; height: auto; max-height: min(65vw, 620px); object-fit: cover; }

/* Logo slider and representative map */
.partners-slider { width: 100%; padding-block: clamp(1rem, 3vw, 1.75rem); }
.partner-logo { width: clamp(9rem, 20vw, 14.5rem); min-width: 0; padding: clamp(.75rem, 2vw, 1.125rem); }
.partner-logo img { max-width: 100%; height: clamp(3rem, 7vw, 4.375rem); }
.representatives-section .container { width: 100%; }
.representatives-map { width: 100%; height: clamp(19rem, 48vw, 30rem); }

/* Footer/contact: stack naturally and prevent narrow form fields */
.footer .container,
.footer .footer-contact-form-wrap,
.footer .footer-contact-form { min-width: 0; max-width: 100%; }
.footer .footer-contact-form .form-control,
.footer .footer-contact-form select,
.footer .footer-contact-form textarea,
.footer input,
.footer textarea,
.footer select { width: 100%; min-width: 0; max-width: 100%; }
.footer textarea { min-height: 8rem; resize: vertical; }

/* Tablet */
@media (max-width: 991.98px) {
  :root { --page-gutter: clamp(1rem, 3.2vw, 1.75rem); --section-space-y: clamp(2.5rem, 6vw, 4.5rem); }
  .news-archive-layout { grid-template-columns: minmax(0, 1fr); }
  .news-filter-sidebar { order: -1; position: static; }
  .news-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-archive-card .news-card-body { height: auto; min-height: 21rem !important; }
  .news-archive-card .news-card-title-link { min-height: 0; }
  .news-archive-card .news-summary { min-height: 0; }
  .partners-track { gap: clamp(1.25rem, 4vw, 2.5rem); }
  #productQuickModal .modal-dialog { width: min(94vw, 760px); }
}

/* Phones */
@media (max-width: 767.98px) {
  :root { --page-gutter: 1rem; --section-space-y: clamp(2.25rem, 9vw, 3.5rem); }
  body { font-size: 15px; }
  .container,
  .container-fluid { padding-inline: var(--page-gutter); }
  section:not(#hero),
  .section:not(#hero) { padding-block: var(--section-space-y); }
  #header .logo { max-width: 68%; }
  #header .logo img,
  .header .logo .site-logo { max-width: min(126vw, 795px); height: clamp(8.25rem, 18vw, 14.625rem); }
  body.index-page #hero.hero-unilever-style { min-height: 100svh; min-height: 100dvh; height: 100svh; height: 100dvh; }
  body.index-page #hero .hero-media-box { min-height: 100%; }

  .ul-catalog-section-title { padding-inline: 0; margin-bottom: 1.5rem !important; }
  .ul-catalog-section-title h2 { font-size: clamp(1.6rem, 7vw, 2.15rem); }
  .ul-catalog-section-title p { font-size: .95rem; line-height: 1.85; }

  .news-archive-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .news-archive-card { border-radius: 1rem 1rem 3.25rem 1rem; }
  html[dir="rtl"] .news-archive-card,
  html[lang="fa"] .news-archive-card { border-radius: 1rem 1rem 1rem 3.25rem; }
  .news-archive-card .news-image-wrap { height: auto; aspect-ratio: 16 / 10; flex-basis: auto; }
  .news-archive-card .news-card-body { height: auto; min-height: 0 !important; padding: 1.1rem; gap: .5rem; }
  .news-archive-card .news-card-title-link { min-height: 0; }
  .news-archive-card .news-card-title-link h3 { font-size: 1.05rem; line-height: 1.65; }
  .news-archive-card .news-summary { display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; min-height: 0; font-size: .94rem; }
  .news-archive-card .news-read-more { margin-top: .75rem !important; }

  .news-filter-sidebar form { padding: 1rem; }
  .news-archive-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; }
  .news-archive-toolbar > *,
  .news-search-form { width: 100%; max-width: 100%; }
  .news-archive-toolbar input,
  .news-archive-toolbar select,
  .news-search-form input,
  .news-filter-sidebar input,
  .news-filter-sidebar select { width: 100%; min-height: 2.75rem; }
  .news-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }

  .news-detail-article,
  .news-editorial { padding-inline: 0; }
  .news-detail-article { padding-block: 2.5rem 3.5rem; }
  .news-detail-back { margin-bottom: 1.5rem; }
  .news-detail-meta-row { flex-wrap: wrap; gap: .5rem .85rem; font-size: .85rem; }
  .news-detail-article h1,
  .news-editorial-header h1 { font-size: clamp(1.85rem, 8vw, 2.65rem); letter-spacing: -.02em; line-height: 1.3; }
  .news-detail-lead,
  .news-editorial-intro { margin-top: 1.25rem; font-size: 1.02rem; line-height: 1.95; }
  .news-detail-rule { margin: 1.75rem 0; }
  .news-detail-hero,
  .news-inline-image { margin-bottom: 2rem; border-radius: 1rem 1rem 3.5rem 1rem; }
  html[dir="rtl"] .news-detail-hero,
  html[lang="fa"] .news-detail-hero,
  html[dir="rtl"] .news-inline-image,
  html[lang="fa"] .news-inline-image { border-radius: 1rem 1rem 1rem 3.5rem; }
  .news-detail-hero img,
  .news-inline-image img { height: auto; max-height: none; aspect-ratio: 16 / 10; }
  .news-detail-content p,
  .news-editorial-section p { margin-bottom: 1.25rem; font-size: 1rem; line-height: 2; }
  .news-editorial-section { margin-bottom: 2.5rem; }
  .news-editorial-quote { margin: 2.5rem 0; padding-inline: 1rem; }
  .news-editorial-quote p { font-size: clamp(1.2rem, 5.5vw, 1.5rem); line-height: 1.8; }
  .news-detail-related-heading { font-size: 1.3rem; margin-bottom: 1.25rem; }

  .partner-logo { width: clamp(8.5rem, 42vw, 11rem); height: auto; min-height: 7rem; border-radius: 1rem 1rem 2.75rem 1rem; }
  html[dir="rtl"] .partner-logo { border-radius: 1rem 1rem 1rem 2.75rem; }
  .partner-logo span { font-size: .95rem; text-align: center; }
  .partner-logo img { height: 3.25rem; }
  .representatives-map { height: clamp(17rem, 75vw, 23rem); border-radius: 1rem 1rem 3.5rem 1rem; }
  html[dir="rtl"] .representatives-map { border-radius: 1rem 1rem 1rem 3.5rem; }
  .representatives-note { font-size: .88rem; line-height: 1.8; }

  #productQuickModal .modal-dialog { width: calc(100% - 1rem); max-width: none; margin: .5rem auto; }
  #productQuickModal .modal-content { max-height: calc(100dvh - 1rem); border-radius: 1rem; }
  #productQuickModal .modal-body { padding: 3.75rem 1rem 1.25rem !important; }
  #productQuickModal .modal-header { right: .5rem; }
  html[dir="rtl"] #productQuickModal .modal-header { right: auto; left: .5rem; }

  .footer .footer-contact-form-wrap { padding: clamp(1rem, 5vw, 1.5rem); }
  .footer .footer-contact-form .form-control,
  .footer input,
  .footer select { min-height: 2.8rem; }
  .footer .footer-contact-form textarea,
  .footer textarea { min-height: 7.5rem; }
}

/* Narrow phones */
@media (max-width: 380px) {
  :root { --page-gutter: .8rem; }
  body { font-size: 14px; }
  .news-detail-article h1,
  .news-editorial-header h1 { font-size: 1.75rem; }
  .partner-logo { width: 8rem; }
  #productQuickModal .modal-body { padding-inline: .8rem !important; }
}

/* Respect users who prefer reduced motion and improve touch interaction */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

button, a, input, select, textarea { touch-action: manipulation; }

/* ======================================================================
   SHOKOOH THEME PATCH — browser dark preference + light canvas
   default = follow OS. No forced light-blue gradients on default.
   ====================================================================== */

:root {
  --shokooh-blue-soft: #DCEBFA;
  --shokooh-blue-pale: #E8F2FD;
  --shokooh-blue-border: #C5DAF2;
}

/* Soft blue tint ONLY when user explicitly chose Light. */
html[data-theme="light"] body {
  background-color: #F7FAFF;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #E8F2FD 48%, #DCEBFA 100%);
  background-attachment: fixed;
}

/* Default + OS dark: full dark palette (variables + surfaces), no light blue. */
@media (prefers-color-scheme: dark) {
  html[data-theme="default"],
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --shokooh-navy-bg: #070d1e;
    --shokooh-surface: #0f1c3f;
    --shokooh-surface-alt: #152756;
    --shokooh-border: #1e3567;
    --shokooh-text: #f8fafc;
    --shokooh-text-muted: #94a3b8;
    --background-color: #070d1e;
    --surface-color: #0f1c3f;
    --default-color: #f8fafc;
    --heading-color: #ffffff;
    --nav-color: #cbd5e1;
    --nav-hover-color: #8eb7e8;
    --contrast-color: #ffffff;
  }

  html[data-theme="default"] body,
  html:not([data-theme="light"]):not([data-theme="dark"]) body {
    background-color: #080F22 !important;
    background-image: linear-gradient(135deg, #080F22 0%, #101B38 54%, #172447 100%) !important;
    background-attachment: fixed;
    color: #E8EEF8 !important;
  }

  html[data-theme="default"] body.index-page #header,
  html:not([data-theme="light"]):not([data-theme="dark"]) body.index-page #header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="default"] body.index-page #header.scrolled,
  html[data-theme="default"] body.inner-page #header,
  html:not([data-theme="light"]):not([data-theme="dark"]) body.index-page #header.scrolled,
  html:not([data-theme="light"]):not([data-theme="dark"]) body.inner-page #header {
    background: rgba(8, 15, 34, .94) !important;
    background-color: rgba(8, 15, 34, .94) !important;
    color: #F8FAFC !important;
    border-bottom: 1px solid rgba(142, 183, 232, .16) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  html[data-theme="default"] body.inner-page #header .navmenu a,
  html[data-theme="default"] body.inner-page #header .logo,
  html[data-theme="default"] body.inner-page #header .theme-switcher-btn,
  html:not([data-theme="light"]):not([data-theme="dark"]) body.inner-page #header .navmenu a,
  html:not([data-theme="light"]):not([data-theme="dark"]) body.inner-page #header .logo,
  html:not([data-theme="light"]):not([data-theme="dark"]) body.inner-page #header .theme-switcher-btn {
    color: #F1F5F9 !important;
  }

  /* Remove ONLY forced blue section gradients under default + OS dark.
     Do NOT wipe intentional backgrounds (stats bg.jpg, about/gallery surfaces). */
  html[data-theme="default"] .light-background:not(.stats):not(#stats),
  html[data-theme="default"] main.main > section:nth-of-type(even):not(.stats):not(#stats):not(#about):not(#gallery),
  html:not([data-theme="light"]):not([data-theme="dark"]) .light-background:not(.stats):not(#stats),
  html:not([data-theme="light"]):not([data-theme="dark"]) main.main > section:nth-of-type(even):not(.stats):not(#stats):not(#about):not(#gallery) {
    background-image: none !important;
    background-color: var(--background-color, #070d1e) !important;
  }

  /* About + Gallery: readable dark surface on default + OS dark */
  html[data-theme="default"] #about.section,
  html[data-theme="default"] #gallery.section,
  html:not([data-theme="light"]):not([data-theme="dark"]) #about.section,
  html:not([data-theme="light"]):not([data-theme="dark"]) #gallery.section {
    background-image: none !important;
    background-color: var(--shokooh-surface, #0f1c3f) !important;
  }

  /* Stats background image must remain visible on default + OS dark */
  html[data-theme="default"] section.stats,
  html[data-theme="default"] #stats,
  html:not([data-theme="light"]):not([data-theme="dark"]) section.stats,
  html:not([data-theme="light"]):not([data-theme="dark"]) #stats {
    background-color: transparent !important;
    background-image: url("../img/bg.jpg") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
  }

  html[data-theme="default"] .card,
  html[data-theme="default"] .product-card,
  html[data-theme="default"] .info-item,
  html[data-theme="default"] .news-card,
  html[data-theme="default"] .comment-card,
  html[data-theme="default"] .ul-pod-wrapper,
  html[data-theme="default"] .ul-filter-bar,
  html[data-theme="default"] .ul-sidebar-card {
    background-color: var(--surface-color, #0f1c3f) !important;
    color: var(--default-color, #f8fafc) !important;
    border-color: var(--shokooh-border, #1e3567) !important;
  }
}

/* Explicit dark theme should always win, independent of the browser preference. */
html[data-theme="dark"] body.index-page #header:not(.scrolled) {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-theme="dark"] body.index-page #header.scrolled,
html[data-theme="dark"] body.inner-page #header,
html.dark-theme body.index-page #header.scrolled,
html.dark-theme body.inner-page #header {
  background: rgba(8, 15, 34, .94) !important;
  background-color: rgba(8, 15, 34, .94) !important;
  color: #F8FAFC !important;
  border-bottom: 1px solid rgba(142, 183, 232, .16) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* FIX: Make the Shokooh site logo visibly larger */
#header .logo {
  max-width: 80% !important;
  flex-shrink: 0;
}

#header .logo img.site-logo,
#header .logo .site-logo {
  width: auto !important;
  height: 90px !important;
  max-width: min(50vw, 350px) !important;
  max-height: none !important;
  object-fit: contain;
}

/* Mobile logo size */
@media (max-width: 765.98px) {
  #header .logo {
    max-width: 70% !important;
  }

  #header .logo img.site-logo,
  #header .logo .site-logo {
    height: 60px !important;
    max-width: min(50vw, 220px) !important;
  }
}

/* =========================================
   PARTNERS SLIDER — THEME AND RTL FIX
   ========================================= */

/* Light mode: recolor white logos for visibility. */
html[data-theme="light"] #partners .partner-logo img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(30%) saturate(1400%) hue-rotate(180deg) brightness(85%) contrast(95%);
}

/* Dark mode: preserve the original logo colors. */
html[data-theme="dark"] #partners .partner-logo img {
  filter: none;
}


/* Partners marquee: identical motion in LTR and RTL.
   Each duplicate is a separate equal-width group, so -50% is an exact loop distance. */
#partners .partners-slider {
  direction: ltr !important;
  overflow: hidden;
}

#partners .partners-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  direction: ltr !important;
  width: max-content !important;
  gap: 0 !important;
  animation: partners-marquee 34s linear infinite !important;
  will-change: transform;
}

#partners .partners-group {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  direction: ltr;
  gap: clamp(28px, 5vw, 80px);
  padding-inline-end: clamp(28px, 5vw, 80px);
}

#partners .partner-logo {
  flex: 0 0 clamp(150px, 18vw, 230px);
}

#partners .partners-slider:hover .partners-track {
  animation-play-state: paused !important;
}

@keyframes partners-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767.98px) {
  #partners .partners-group {
    gap: clamp(20px, 4vw, 32px);
    padding-inline-end: clamp(20px, 4vw, 32px);
  }
  #partners .partner-logo {
    flex-basis: clamp(8.5rem, 42vw, 11rem);
  }
}


/* Video section surface: only for explicit light / dark.
   Never override .stats / #stats here. */
/* Only strip gradient from video sections — NOT about/gallery/partners/news */
html[data-theme="light"] main.main > section:has(video):not(.stats):not(#stats):not(#about):not(#gallery):not(#partners):not(#news):not(.partners-section) {
    background-image: none !important;
    background-color: #ffffff !important;
}

html[data-theme="dark"] main.main > section:has(video):not(.stats):not(#stats),
html.dark-theme main.main > section:has(video):not(.stats):not(#stats) {
    background-image: none !important;
    background-color: #0f1c3f !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="default"] main.main > section:has(video):not(.stats):not(#stats),
  html[data-theme="default"] .light-background:not(.stats):not(#stats) {
    background-image: none !important;
    background-color: #0f1c3f !important;
  }
}

/* Final safeguard: stats background image always wins */
html[data-theme="default"] section.stats,
html[data-theme="default"] #stats,
html[data-theme="light"] section.stats,
html[data-theme="light"] #stats,
html[data-theme="dark"] section.stats,
html[data-theme="dark"] #stats,
html.dark-theme section.stats,
html.dark-theme #stats {
  background-color: transparent !important;
  background-image: url("../img/bg.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

@media (max-width: 767px) {
  html[data-theme="default"] section.stats,
  html[data-theme="default"] #stats,
  html[data-theme="light"] section.stats,
  html[data-theme="light"] #stats,
  html[data-theme="dark"] section.stats,
  html[data-theme="dark"] #stats,
  html.dark-theme section.stats,
  html.dark-theme #stats {
    background-attachment: scroll !important;
  }
}

/* ======================================================================
   ROOT CAUSE FIX — white rounded rectangle under brands / gallery
   ======================================================================
   The white panel is the PARENT <section> (with border-radius 120px from
   main.main > section:not(#hero)). That section often does NOT have
   id="partners" or class="partners-section" — so previous selectors missed it.

   Solution: target any section that CONTAINS the slider via :has().
   ====================================================================== */

/* ---- Default theme: any section that holds brand logos ---- */
html[data-theme="default"] section:has(.partner-logo),
html[data-theme="default"] section:has(.partners-slider),
html[data-theme="default"] section:has(.partners-track),
html[data-theme="default"] section:has(.partners-group),
html[data-theme="default"] .section:has(.partner-logo),
html[data-theme="default"] .section:has(.partners-slider),
html[data-theme="default"] .light-background:has(.partner-logo),
html[data-theme="default"] .light-background:has(.partners-slider),
html[data-theme="default"] main.main > section:has(.partner-logo),
html[data-theme="default"] main.main > section:has(.partners-slider),
html[data-theme="default"]:not(.dark-theme) section:has(.partner-logo),
html[data-theme="default"]:not(.dark-theme) section:has(.partners-slider),
html[data-theme="default"]:not(.dark-theme) .light-background:has(.partner-logo),
html[data-theme="default"]:not(.dark-theme) .light-background:has(.partners-slider),
html[data-theme="default"]:not(.dark-theme) main.main > section:has(.partner-logo),
html[data-theme="default"]:not(.dark-theme) main.main > section:has(.partners-slider),
/* also keep id/class based rules */
html[data-theme="default"] #partners,
html[data-theme="default"] .partners-section,
html[data-theme="default"]:not(.dark-theme) #partners,
html[data-theme="default"]:not(.dark-theme) .partners-section {
  background: #0f172a !important;
  background-color: #0f172a !important;
  background-image: linear-gradient(135deg, rgba(46, 103, 178, 0.18), #0f172a 50%, #0a1228 100%) !important;
  color: #f8fafc !important;
}

/* ---- Default theme: any section that holds gallery slider ---- */
html[data-theme="default"] section:has(.gallery),
html[data-theme="default"] section:has(.gallery .swiper),
html[data-theme="default"] section:has(.gallery .swiper-wrapper),
html[data-theme="default"] section:has(.gallery-item),
html[data-theme="default"] .section:has(.gallery),
html[data-theme="default"] .light-background:has(.gallery),
html[data-theme="default"] main.main > section:has(.gallery),
html[data-theme="default"]:not(.dark-theme) section:has(.gallery),
html[data-theme="default"]:not(.dark-theme) .light-background:has(.gallery),
html[data-theme="default"]:not(.dark-theme) main.main > section:has(.gallery),
html[data-theme="default"] #gallery,
html[data-theme="default"] .gallery.section,
html[data-theme="default"]:not(.dark-theme) #gallery {
  background: #0f1c3f !important;
  background-color: #0f1c3f !important;
  background-image: none !important;
  color: #f8fafc !important;
}

/* Logo cards on the dark panel */
html[data-theme="default"] .partner-logo,
html[data-theme="default"] section:has(.partner-logo) .partner-logo,
html[data-theme="default"]:not(.dark-theme) .partner-logo {
  background: rgba(30, 41, 59, 0.92) !important;
  border: 1px solid rgba(142, 183, 232, 0.30) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.30) !important;
}
html[data-theme="default"] .partner-logo span,
html[data-theme="default"]:not(.dark-theme) .partner-logo span {
  color: #f8fafc !important;
}
html[data-theme="default"] .partner-logo img,
html[data-theme="default"]:not(.dark-theme) .partner-logo img {
  filter: none !important;
}

/* Gallery slides: never a white plate */
html[data-theme="default"] .gallery .swiper-slide,
html[data-theme="default"] .gallery .swiper-slide-active,
html[data-theme="default"] section:has(.gallery) .swiper-slide,
html[data-theme="default"]:not(.dark-theme) .gallery .swiper-slide,
html[data-theme="default"]:not(.dark-theme) .gallery .swiper-slide-active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Readable titles on the dark rounded panel */
html[data-theme="default"] section:has(.partner-logo) h2,
html[data-theme="default"] section:has(.partner-logo) h3,
html[data-theme="default"] section:has(.partner-logo) p,
html[data-theme="default"] section:has(.partners-slider) h2,
html[data-theme="default"] section:has(.partners-slider) p,
html[data-theme="default"] section:has(.gallery) h2,
html[data-theme="default"] section:has(.gallery) p,
html[data-theme="default"]:not(.dark-theme) section:has(.partner-logo) h2,
html[data-theme="default"]:not(.dark-theme) section:has(.partner-logo) p,
html[data-theme="default"]:not(.dark-theme) section:has(.partners-slider) h2,
html[data-theme="default"]:not(.dark-theme) section:has(.partners-slider) p {
  color: #f8fafc !important;
}
html[data-theme="default"] section:has(.partner-logo) .description-title,
html[data-theme="default"] section:has(.partners-slider) .description-title,
html[data-theme="default"] section:has(.gallery) .description-title {
  color: #8eb7e8 !important;
}

/* Explicit Dark — same treatment via :has() for consistency */
html[data-theme="dark"] section:has(.partner-logo),
html[data-theme="dark"] section:has(.partners-slider),
html.dark-theme section:has(.partner-logo),
html.dark-theme section:has(.partners-slider),
html[data-theme="dark"] #partners,
html[data-theme="dark"] .partners-section,
html.dark-theme #partners,
html.dark-theme .partners-section {
  background: #0f172a !important;
  background-color: #0f172a !important;
  background-image: linear-gradient(135deg, rgba(46, 103, 178, 0.18), #0f172a 50%, #0a1228 100%) !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] section:has(.gallery),
html.dark-theme section:has(.gallery),
html[data-theme="dark"] #gallery,
html.dark-theme #gallery {
  background: #0f1c3f !important;
  background-color: #0f1c3f !important;
}

/* Explicit Light must stay light (wins over Default rules when user picks Light) */
html[data-theme="light"] section:has(.partner-logo),
html[data-theme="light"] section:has(.partners-slider),
html[data-theme="light"] #partners,
html[data-theme="light"] .partners-section {
  background: linear-gradient(135deg, rgba(46, 103, 178, 0.045), #F5F9FE 48%, rgba(14, 165, 233, 0.055)) !important;
  background-color: #F5F9FE !important;
  color: #172554 !important;
}
html[data-theme="light"] .partner-logo {
  background: #e8eef6 !important;
  border: 1px solid rgba(46, 103, 178, 0.14) !important;
  box-shadow: 0 10px 28px rgba(23, 37, 84, 0.08) !important;
}
html[data-theme="light"] .partner-logo span { color: #172554 !important; }
html[data-theme="light"] section:has(.gallery),
html[data-theme="light"] #gallery {
  background: #F5F9FE !important;
  background-color: #F5F9FE !important;
  color: #172554 !important;
}
html[data-theme="light"] section:has(.partner-logo) h2,
html[data-theme="light"] section:has(.partner-logo) p,
html[data-theme="light"] section:has(.partners-slider) h2,
html[data-theme="light"] section:has(.partners-slider) p {
  color: #172554 !important;
}

/* Also kill the generic section white fill when Default + these children exist.
   section/.section { background-color: var(--background-color) } is the base white. */
html[data-theme="default"] section:has(.partner-logo),
html[data-theme="default"] section:has(.partners-slider),
html[data-theme="default"] section:has(.gallery) {
  --background-color: #0f172a;
  --surface-color: #0f1c3f;
  --default-color: #f8fafc;
  --heading-color: #ffffff;
}

/* ======================================================================
   GALLERY ONLY — Default must not keep the white rounded panel
   Partners already fixed via :has(.partner-logo).
   Gallery often is <section id="gallery" class="gallery section"> so we need
   #gallery.section (id+class) to beat older #F5F9FE rules.
   ====================================================================== */

html[data-theme="default"] #gallery,
html[data-theme="default"] #gallery.section,
html[data-theme="default"] #gallery.gallery,
html[data-theme="default"] section#gallery,
html[data-theme="default"] section.gallery,
html[data-theme="default"] section.gallery.section,
html[data-theme="default"] .gallery.section,
html[data-theme="default"] .gallery.light-background,
html[data-theme="default"] #gallery.light-background,
html[data-theme="default"] main.main > #gallery,
html[data-theme="default"] main.main > section#gallery,
html[data-theme="default"] main.main > section.gallery,
html[data-theme="default"]:not(.dark-theme) #gallery,
html[data-theme="default"]:not(.dark-theme) #gallery.section,
html[data-theme="default"]:not(.dark-theme) #gallery.gallery,
html[data-theme="default"]:not(.dark-theme) section#gallery,
html[data-theme="default"]:not(.dark-theme) section.gallery,
html[data-theme="default"]:not(.dark-theme) .gallery.section,
html[data-theme="default"]:not(.dark-theme) #gallery.light-background,
html[data-theme="default"]:not(.dark-theme) main.main > #gallery,
/* :has() for gallery markup without id on the section */
html[data-theme="default"] section:has(.gallery),
html[data-theme="default"] section:has(.gallery .swiper-slide img),
html[data-theme="default"] section:has(.glightbox),
html[data-theme="default"] section:has(.gallery-item),
html[data-theme="default"] section:has(.swiper.gallery-slider),
/* removed overly broad section:has(.swiper-wrapper) */
html[data-theme="default"] .light-background:has(.gallery),
html[data-theme="default"] .light-background:has(.glightbox),
html[data-theme="default"] .light-background:has(.swiper-slide),
html[data-theme="default"]:not(.dark-theme) section:has(.gallery),
html[data-theme="default"]:not(.dark-theme) section:has(.glightbox),
html[data-theme="default"]:not(.dark-theme) section:has(.swiper-slide img),
html[data-theme="default"]:not(.dark-theme) .light-background:has(.gallery),
html[data-theme="default"]:not(.dark-theme) .light-background:has(.glightbox) {
  background: #0f1c3f !important;
  background-color: #0f1c3f !important;
  background-image: none !important;
  color: #f8fafc !important;
  --background-color: #0f1c3f;
  --surface-color: #0f1c3f;
  --default-color: #f8fafc;
  --heading-color: #ffffff;
}

/* Gallery slides / active slide: no white card */
html[data-theme="default"] #gallery .swiper-slide,
html[data-theme="default"] #gallery .swiper-slide-active,
html[data-theme="default"] .gallery .swiper-slide,
html[data-theme="default"] .gallery .swiper-slide-active,
html[data-theme="default"] section:has(.glightbox) .swiper-slide,
html[data-theme="default"] section:has(.glightbox) .swiper-slide-active,
html[data-theme="default"]:not(.dark-theme) #gallery .swiper-slide,
html[data-theme="default"]:not(.dark-theme) #gallery .swiper-slide-active,
html[data-theme="default"]:not(.dark-theme) .gallery .swiper-slide,
html[data-theme="default"]:not(.dark-theme) .gallery .swiper-slide-active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
}

@media (min-width: 992px) {
  html[data-theme="default"] .gallery .swiper-slide-active,
  html[data-theme="default"] #gallery .swiper-slide-active,
  html[data-theme="default"]:not(.dark-theme) .gallery .swiper-slide-active {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
}

/* Titles on dark gallery panel */
html[data-theme="default"] #gallery h2,
html[data-theme="default"] #gallery h3,
html[data-theme="default"] #gallery p,
html[data-theme="default"] #gallery .section-title h2,
html[data-theme="default"] #gallery .section-title p,
html[data-theme="default"] .gallery .section-title h2,
html[data-theme="default"] .gallery .section-title p,
html[data-theme="default"] section:has(.glightbox) h2,
html[data-theme="default"] section:has(.glightbox) p,
html[data-theme="default"]:not(.dark-theme) #gallery h2,
html[data-theme="default"]:not(.dark-theme) #gallery p,
html[data-theme="default"]:not(.dark-theme) #gallery .section-title p {
  color: #f8fafc !important;
}
html[data-theme="default"] #gallery .description-title,
html[data-theme="default"] .gallery .description-title {
  color: #8eb7e8 !important;
}

/* Light theme gallery uses blue gradient (same as news) — see end block */

/* ======================================================================
   LIGHT MODE FULL RESTORE
   Must win over every Default/dark force rule above when user picks Light.
   ====================================================================== */

html[data-theme="light"] {
  color-scheme: light;
  --shokooh-navy-bg: #ffffff;
  --shokooh-surface: #ffffff;
  --shokooh-surface-alt: #f8fafc;
  --shokooh-border: #e2e8f0;
  --shokooh-text: #1f2937;
  --shokooh-text-muted: #64748b;
  --background-color: #ffffff;
  --surface-color: #ffffff;
  --default-color: #1f2937;
  --heading-color: #111827;
  --nav-color: #374151;
  --nav-hover-color: #2e67b2;
  --contrast-color: #ffffff;
}

html[data-theme="light"] body {
  background-color: #ffffff !important;
  background-image: linear-gradient(135deg, #ffffff 0%, #f1f6fd 48%, #f3efff 100%) !important;
  background-attachment: fixed;
  color: #1f2937 !important;
}

html[data-theme="light"] .header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1f2937 !important;
}

html[data-theme="light"] .header .navmenu a,
html[data-theme="light"] .header .theme-switcher-btn {
  color: #374151 !important;
}

/* Partners — blue gradient rounded panel (Light theme) */
html[data-theme="light"] section:has(.partner-logo),
html[data-theme="light"] section:has(.partners-slider),
html[data-theme="light"] section:has(.partners-track),
html[data-theme="light"] #partners,
html[data-theme="light"] #partners.section,
html[data-theme="light"] .partners-section,
html[data-theme="light"] .partners-section.light-background,
html[data-theme="light"] .light-background:has(.partner-logo),
html[data-theme="light"] main.main > #partners,
html[data-theme="light"] main.main > .partners-section,
html[data-theme="light"] main.main > section:has(.partner-logo),
html[data-theme="light"] main.main > section:has(.partners-slider) {
  background: linear-gradient(135deg, #0055b8 0%, #0077d4 45%, #1aa8d8 100%) !important;
  background-color: #0077d4 !important;
  background-image: linear-gradient(135deg, #0055b8 0%, #0077d4 45%, #1aa8d8 100%) !important;
  color: #ffffff !important;
  --background-color: transparent;
  --surface-color: rgba(255, 255, 255, 0.18);
  --default-color: #ffffff;
  --heading-color: #ffffff;
}

html[data-theme="light"] .partner-logo,
html[data-theme="light"] #partners .partner-logo,
html[data-theme="light"] section:has(.partner-logo) .partner-logo {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 14px 36px rgba(0, 40, 100, 0.22) !important;
  color: #ffffff !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html[data-theme="light"] .partner-logo span,
html[data-theme="light"] #partners .partner-logo span {
  color: #ffffff !important;
}

/* Logos stay original / white-friendly on blue gradient */
html[data-theme="light"] #partners .partner-logo img,
html[data-theme="light"] .partner-logo img {
  filter: none !important;
}

html[data-theme="light"] section:has(.partner-logo) h2,
html[data-theme="light"] section:has(.partner-logo) h3,
html[data-theme="light"] section:has(.partner-logo) p,
html[data-theme="light"] section:has(.partners-slider) h2,
html[data-theme="light"] section:has(.partners-slider) p,
html[data-theme="light"] #partners h2,
html[data-theme="light"] #partners h3,
html[data-theme="light"] #partners p,
html[data-theme="light"] #partners .section-title h2,
html[data-theme="light"] #partners .section-title p,
html[data-theme="light"] .partners-section h2,
html[data-theme="light"] .partners-section p {
  color: #ffffff !important;
}

html[data-theme="light"] #partners .description-title,
html[data-theme="light"] .partners-section .description-title,
html[data-theme="light"] section:has(.partner-logo) .description-title {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Gallery — blue gradient rounded panel (Light theme) */
html[data-theme="light"] #gallery,
html[data-theme="light"] #gallery.section,
html[data-theme="light"] #gallery.gallery,
html[data-theme="light"] section#gallery,
html[data-theme="light"] section.gallery,
html[data-theme="light"] .gallery.section,
html[data-theme="light"] .gallery.light-background,
html[data-theme="light"] #gallery.light-background,
html[data-theme="light"] section:has(.gallery),
html[data-theme="light"] section:has(.glightbox),
html[data-theme="light"] section:has(.gallery-item),
html[data-theme="light"] .light-background:has(.gallery),
html[data-theme="light"] .light-background:has(.glightbox),
html[data-theme="light"] main.main > #gallery,
html[data-theme="light"] main.main > section#gallery,
html[data-theme="light"] main.main > section.gallery {
  background: linear-gradient(135deg, #0055b8 0%, #0077d4 45%, #1aa8d8 100%) !important;
  background-color: #0077d4 !important;
  background-image: linear-gradient(135deg, #0055b8 0%, #0077d4 45%, #1aa8d8 100%) !important;
  color: #ffffff !important;
  --background-color: transparent;
  --surface-color: transparent;
  --default-color: #ffffff;
  --heading-color: #ffffff;
}

html[data-theme="light"] #gallery h2,
html[data-theme="light"] #gallery h3,
html[data-theme="light"] #gallery p,
html[data-theme="light"] #gallery .section-title h2,
html[data-theme="light"] #gallery .section-title p,
html[data-theme="light"] .gallery .section-title h2,
html[data-theme="light"] .gallery .section-title p,
html[data-theme="light"] section:has(.gallery) h2,
html[data-theme="light"] section:has(.gallery) p,
html[data-theme="light"] section:has(.glightbox) h2,
html[data-theme="light"] section:has(.glightbox) p {
  color: #ffffff !important;
}

html[data-theme="light"] #gallery .description-title,
html[data-theme="light"] .gallery .description-title {
  color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="light"] .gallery .swiper-slide,
html[data-theme="light"] .gallery .swiper-slide-active,
html[data-theme="light"] #gallery .swiper-slide,
html[data-theme="light"] #gallery .swiper-slide-active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* General light surfaces — do NOT override about/gallery/partners/news blue panels */
html[data-theme="light"] .light-background:not(#about):not(#gallery):not(#partners):not(#news):not(.partners-section):not(.gallery) {
  background-color: #f8fafc !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .news-card,
html[data-theme="light"] .info-item,
html[data-theme="light"] .comment-card {
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

html[data-theme="light"] section.section,
html[data-theme="light"] main.main > section {
  color: #1f2937;
}

/* ======================================================================
   LIGHT: About = white rounded rectangle under the video
   Gallery + Partners/News = blue gradient (unchanged)
   ====================================================================== */

/* About section: white curved panel */
html[data-theme="light"] #about,
html[data-theme="light"] #about.section,
html[data-theme="light"] #about.about,
html[data-theme="light"] section#about,
html[data-theme="light"] main.main > #about,
html[data-theme="light"] main.main > section#about,
html[data-theme="light"] .about.section,
html[data-theme="light"] section.about {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #172554 !important;
}

/* About text readable on white */
html[data-theme="light"] #about h1,
html[data-theme="light"] #about h2,
html[data-theme="light"] #about h3,
html[data-theme="light"] #about p,
html[data-theme="light"] #about .section-title h2,
html[data-theme="light"] #about .section-title p,
html[data-theme="light"] #about .description-title {
  color: #172554 !important;
}

html[data-theme="light"] #about .description-title {
  color: #2e67b2 !important;
}

/* Gallery + Partners stay blue gradient */
html[data-theme="light"] #gallery,
html[data-theme="light"] #gallery.section,
html[data-theme="light"] #gallery.gallery,
html[data-theme="light"] section#gallery,
html[data-theme="light"] section.gallery,
html[data-theme="light"] main.main > #gallery,
html[data-theme="light"] #partners,
html[data-theme="light"] #partners.section,
html[data-theme="light"] .partners-section,
html[data-theme="light"] section:has(.partner-logo),
html[data-theme="light"] section:has(.partners-slider),
html[data-theme="light"] main.main > #partners,
html[data-theme="light"] main.main > section:has(.partner-logo) {
  background: linear-gradient(135deg, #0055b8 0%, #0077d4 45%, #1aa8d8 100%) !important;
  background-color: #0077d4 !important;
  background-image: linear-gradient(135deg, #0055b8 0%, #0077d4 45%, #1aa8d8 100%) !important;
  color: #ffffff !important;
}

html[data-theme="light"] #gallery h1,
html[data-theme="light"] #gallery h2,
html[data-theme="light"] #gallery h3,
html[data-theme="light"] #gallery p,
html[data-theme="light"] #gallery .section-title h2,
html[data-theme="light"] #gallery .section-title p,
html[data-theme="light"] #partners h1,
html[data-theme="light"] #partners h2,
html[data-theme="light"] #partners h3,
html[data-theme="light"] #partners p,
html[data-theme="light"] #partners .section-title h2,
html[data-theme="light"] #partners .section-title p,
html[data-theme="light"] .partners-section h2,
html[data-theme="light"] .partners-section p {
  color: #ffffff !important;
}

html[data-theme="light"] #gallery .description-title,
html[data-theme="light"] #partners .description-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] .partner-logo,
html[data-theme="light"] #partners .partner-logo {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
}
html[data-theme="light"] .partner-logo span {
  color: #ffffff !important;
}
html[data-theme="light"] #partners .partner-logo img {
  filter: none !important;
}

html[data-theme="light"] #gallery .swiper-slide,
html[data-theme="light"] #gallery .swiper-slide-active,
html[data-theme="light"] .gallery .swiper-slide {
  background: transparent !important;
  border: 0 !important;
}

/* ======================================================================
   LIGHT: stats background image must always show (bg.jpg)
   ====================================================================== */
html[data-theme="light"] section.stats,
html[data-theme="light"] section.stats.section,
html[data-theme="light"] #stats,
html[data-theme="light"] #stats.section,
html[data-theme="light"] main.main > section.stats,
html[data-theme="light"] main.main > #stats,
html[data-theme="light"] .stats.dark-background,
html[data-theme="light"] .stats.light-background {
  background-color: transparent !important;
  background-image: url("../img/bg.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

@media (max-width: 767px) {
  html[data-theme="light"] section.stats,
  html[data-theme="light"] #stats {
    background-attachment: scroll !important;
  }
}