/* ===== LAYOUT STYLES - آی چی ===== */
/* ===== GLOBAL LAYOUT ===== */
/* Main container layout */
.app-wrapper {

  width: 100%;
  margin: 0 auto;
}
.content-wrapper {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}
.home-items .wrapper {
  margin: auto;
  max-width: var(--layout-max-width);
}
/* ===== HEADER NAVBAR LAYOUT ===== */
/* ===== NAV LOGOBAR LAYOUT - TOP MENU ===== */
#nav-logobar {
  display: flex;
  position: relative;
  z-index: inherit;
  height: 48px;
  width: 100%;
  border-bottom: 1px solid #141920;
  background-color: #141920;
  flex-flow: row nowrap;
  justify-content: space-between;
}
#nav-logobar .nav-left {
  flex-shrink: 0;
  flex-flow: row nowrap;
}
.nav-left,
.nav-right {
  display: flex;
  position: relative;
  width: auto;
}
[dir="rtl"] .nav-left {
  float: right;
}
#nav-hamburger-menu {
  float: right;
  padding: 14px 14px;
}
#nav-hamburger-menu .nav-icon-a11y.nav-sprite {
  display: block;
  width: 20px;
  height: 20px;
  background-position: -20px -378px;
}
#nav-logo {
  position: relative;
  float: left;
  z-index: 20;

}
#nav-logo .nav-logo-link {
  clear: both;
  display: inline-block;
  cursor: pointer;
}
/* HMENU-start */
#nav-gwbar.nav-genz {
  height: 40px;
  padding-top: 12px;
}
/* HMENU-tot-start */
#accountMenu-container #accountMenu-canvas #accountMenu-content div.hmenu a,
#accountMenu-container #accountMenu-canvas #accountMenu-content div.hmenu a:hover,
#accountMenu-container #accountMenu-canvas #accountMenu-content div.hmenu a:visited,
#accountMenu-container #accountMenu-canvas #hmenu-content div.hmenu a,
#accountMenu-container #accountMenu-canvas #hmenu-content div.hmenu a:hover,
#accountMenu-container #accountMenu-canvas #hmenu-content div.hmenu a:visited,
#accountMenu-container #hmenu-canvas #accountMenu-content div.hmenu a,
#accountMenu-container #hmenu-canvas #accountMenu-content div.hmenu a:hover,
#accountMenu-container #hmenu-canvas #accountMenu-content div.hmenu a:visited,
#accountMenu-container #hmenu-canvas #hmenu-content div.hmenu a,
#accountMenu-container #hmenu-canvas #hmenu-content div.hmenu a:hover,
#accountMenu-container #hmenu-canvas #hmenu-content div.hmenu a:visited,
#hmenu-container #accountMenu-canvas #accountMenu-content div.hmenu a,
#hmenu-container #accountMenu-canvas #accountMenu-content div.hmenu a:hover,
#hmenu-container #accountMenu-canvas #accountMenu-content div.hmenu a:visited,
#hmenu-container #accountMenu-canvas #hmenu-content div.hmenu a,
#hmenu-container #accountMenu-canvas #hmenu-content div.hmenu a:hover,
#hmenu-container #accountMenu-canvas #hmenu-content div.hmenu a:visited,
#hmenu-container #hmenu-canvas #accountMenu-content div.hmenu a,
#hmenu-container #hmenu-canvas #accountMenu-content div.hmenu a:hover,
#hmenu-container #hmenu-canvas #accountMenu-content div.hmenu a:visited,
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu a,
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu a:hover,
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu a:visited {
  text-decoration: none;
  color: #111;
}
container a:hover,
#accountMenu-container a:link,
#accountMenu-container a:visited,
#hmenu-container a,
#hmenu-container a:hover,
#hmenu-container a:link,
#hmenu-container a:visited {
  font-family: inherit;
}
#accountMenu-container #accountMenu-canvas #accountMenu-content .hmenu .hmenu-separator,
#hmenu-container #hmenu-canvas #hmenu-content .hmenu .hmenu-separator {
  border-bottom: 5px solid #d5dbdb;
  padding: 0;
  margin: 5px 0 0;
  display: block;
}
#accountMenu-container #accountMenu-canvas #accountMenu-content .category-section,
#accountMenu-container #accountMenu-canvas #hmenu-content .category-section,
#accountMenu-container #hmenu-canvas #accountMenu-content .category-section,
#accountMenu-container #hmenu-canvas #hmenu-content .category-section,
#hmenu-container #accountMenu-canvas #accountMenu-content .category-section,
#hmenu-container #accountMenu-canvas #hmenu-content .category-section,
#hmenu-container #hmenu-canvas #accountMenu-content .category-section,
#hmenu-container #hmenu-canvas #hmenu-content .category-section {
  height: auto;
  transition: height .4s cubic-bezier(.4, 0, .2, 1), opacity .4s cubic-bezier(.4, 0, .6, 1);
}
#accountMenu-container #accountMenu-canvas #accountMenu-content .category-section ul,
#accountMenu-container #accountMenu-canvas #hmenu-content .category-section ul,
#accountMenu-container #hmenu-canvas #accountMenu-content .category-section ul,
#accountMenu-container #hmenu-canvas #hmenu-content .category-section ul,
#hmenu-container #accountMenu-canvas #accountMenu-content .category-section ul,
#hmenu-container #accountMenu-canvas #hmenu-content .category-section ul,
#hmenu-container #hmenu-canvas #accountMenu-content .category-section ul,
#hmenu-container #hmenu-canvas #hmenu-content .category-section ul {
  margin-left: 0;
}
#accountMenu-container #accountMenu-canvas #accountMenu-content div.hmenu li,
#accountMenu-container #accountMenu-canvas #hmenu-content div.hmenu li,
#accountMenu-container #hmenu-canvas #accountMenu-content div.hmenu li,
#accountMenu-container #hmenu-canvas #hmenu-content div.hmenu li,
#hmenu-container #accountMenu-canvas #accountMenu-content div.hmenu li,
#hmenu-container #accountMenu-canvas #hmenu-content div.hmenu li,
#hmenu-container #hmenu-canvas #accountMenu-content div.hmenu li,
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu li {
  list-style: none;
  padding-bottom: 2px;
}
#accountMenu-container #accountMenu-canvas #accountMenu-content div.hmenu a.hmenu-item,
#accountMenu-container #accountMenu-canvas #hmenu-content div.hmenu a.hmenu-item,
#accountMenu-container #hmenu-canvas #accountMenu-content div.hmenu a.hmenu-item,
#accountMenu-container #hmenu-canvas #hmenu-content div.hmenu a.hmenu-item,
#hmenu-container #accountMenu-canvas #accountMenu-content div.hmenu a.hmenu-item,
#hmenu-container #accountMenu-canvas #hmenu-content div.hmenu a.hmenu-item,
#hmenu-container #hmenu-canvas #accountMenu-content div.hmenu a.hmenu-item,
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu a.hmenu-item {
  display: flex;
}
element.style {}
#accountMenu-container #accountMenu-canvas #accountMenu-content div.hmenu a.hmenu-item,
#accountMenu-container #accountMenu-canvas #hmenu-content div.hmenu a.hmenu-item,
#accountMenu-container #hmenu-canvas #accountMenu-content div.hmenu a.hmenu-item,
#accountMenu-container #hmenu-canvas #hmenu-content div.hmenu a.hmenu-item,
#hmenu-container #accountMenu-canvas #accountMenu-content div.hmenu a.hmenu-item,
#hmenu-container #accountMenu-canvas #hmenu-content div.hmenu a.hmenu-item,
#hmenu-container #hmenu-canvas #accountMenu-content div.hmenu a.hmenu-item,
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu a.hmenu-item {
  display: flex;
}
#accountMenu-container #accountMenu-canvas #accountMenu-content div.hmenu .hmenu-item,
#accountMenu-container #accountMenu-canvas #hmenu-content div.hmenu .hmenu-item,
#accountMenu-container #hmenu-canvas #accountMenu-content div.hmenu .hmenu-item,
#accountMenu-container #hmenu-canvas #hmenu-content div.hmenu .hmenu-item,
#hmenu-container #accountMenu-canvas #accountMenu-content div.hmenu .hmenu-item,
#hmenu-container #accountMenu-canvas #hmenu-content div.hmenu .hmenu-item,
#hmenu-container #hmenu-canvas #accountMenu-content div.hmenu .hmenu-item,
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu .hmenu-item {
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
#accountMenu-container #accountMenu-canvas #accountMenu-content .hmenu .hmenu-item,
#hmenu-container #hmenu-canvas #hmenu-content .hmenu .hmenu-item {
  padding: 15px 20px 15px 20px;
  font-size: 16px;
}
/* HMENU-tot-end */
#accountMenu-container.hmenu-visible,
#hmenu-container.hmenu-visible {
  visibility: visible;
}
#accountMenu-container,
#hmenu-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  z-index: 100000;
}
#hmenu-container #hmenu-canvas-background.hmenu-opaque {
  opacity: 1;
}
#hmenu-container #hmenu-canvas-background.hmenu-dark-bkg-color {
  background-color: rgba(0, 0, 0, .8);
}
#hmenu-container #hmenu-canvas-background {
  position: absolute;
  will-change: opacity;
  height: 100%;
  width: 100%;
  -webkit-tap-highlight-color: #00000000;
}
#hmenu-container div:not(.hmenu) {
  display: flex;
}
#hmenu-container #hmenu-canvas {
  position: fixed;
  background-color: #fff;
  flex-direction: column;
  height: 100%;
  box-shadow: 4px 0 10px 0 rgba(0, 0, 0, .4);
  will-change: transform;
}
/* Backdrop transparency states */
#hmenu-container #hmenu-canvas-background.hmenu-transparent {
  opacity: 0;
  pointer-events: none;
}
#hmenu-container .hmenu-translateX {
  transform: translateX(0);
}
/* Canvas transform states */
#hmenu-container .hmenu-translateX-left {
  transform: translateX(-100%);
}
#hmenu-canvas {
  width: 365px;
  min-width: 270px;
}
@media (max-width: 768px) {
  #hmenu-canvas {
    min-width: 265px;
    max-width: calc(100vw - 50px);
    width: 80vw;
  }
}
#hmenu-container #hmenu-canvas #hmenu-content {
  position: relative;
  overflow-x: hidden;
  height: 100%;
}
#hmenu-content {
  flex-shrink: 10;
  overflow-y: scroll;
}
.a-android h1 {
  text-rendering: auto;
}
.nav-hidden-aria {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#hmenu-container #hmenu-canvas .hmenu-close-icon {
  position: fixed;
  width: 20px;
  height: 20px;
}
.hmenu-close-icon {
  right: -12vw;
  top: 40px;
}
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu.header-enabled {
  padding-top: 0;
}
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu.hmenu-visible {
  visibility: visible;
}
#hmenu-container #hmenu-canvas #hmenu-content div.hmenu {
  padding-top: 7px;
  padding-bottom: 30px;
  margin: 0;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: scroll;
  will-change: transform;
  visibility: hidden;
  display: block;
}
#hmenu-container.hmenu-visible {
  visibility: visible;
}
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-header {
  flex-direction: column;
  justify-content: flex-end;
  background-color: #141920;
  color: #fff;
}
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-header #hmenu-header-top {
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 16px;
}
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-header #hmenu-header-top #hmenu-header-account {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 20px 0 20px;
}
#hmenu-container a,
#hmenu-container a:link {
  font-family: inherit;
}
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-header #hmenu-header-top #hmenu-header-account #hmenu-header-account-text {
  padding-right: 4px;
  font-size: 14px;
  line-height: 14px;
  color: #fff;
}
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-header #hmenu-header-top #hmenu-header-account #hmenu-header-account-icon {
  background-position: -170px -268px;
  height: 24px;
  width: 24px;
}
/*---*/
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-header #hmenu-header-bottom {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-header #hmenu-header-bottom #hmenu-header-title {
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  padding: 0 20px 20px 20px;
}
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-header #hmenu-header-bottom #hmenu-header-title #hmenu-header-title-line1 {
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
}
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-header #hmenu-header-bottom #hmenu-header-title #hmenu-header-title-line2 {
  font-size: 28px;
  line-height: 28px;
}
/*---*/
#hmenu-container #hmenu-canvas #hmenu-content #hmenu-home-link #hmenu-home-container {
  justify-content: space-between;
  background-color: #fff;
  padding: 18px 20px 13px 20px;
}
/*---*/
#hmenu-container #hmenu-canvas #hmenu-content .hmenu .hmenu-item.hmenu-title {
  font-weight: 700;
  color: #111;
  font-size: 19px;
  line-height: 24px;
  display: inline-block;
}
/* top-menu styles  */
#top-menu .user:hover {
  color: #116ca2
}
#top-menu .user>.left.menu {
  background: #f5f5f5;
  border-radius: 1rem;
  font-size: 1.1rem;
  margin-top: -1rem;
  min-width: 200px
}
#nav-logobar .wrapper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--layout-max-width);
  padding: 0 var(--spacing-lg);
  width: 100%;
}
#nav-logobar .logo {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-start;
}
#nav-logobar .logo img {
  height: auto;
  max-width: 140px;
  width: auto;
}
#nav-logobar .right.menu {
  align-items: center;
  display: flex;
  gap: var(--spacing-md);
  height: 100%;
  justify-content: flex-end;
}
#navbar {
  position: relative;
  z-index: 208;
  font-family: inherit;

  line-height: 1em;
  min-width: 200px;
}
.nav-searchbar {
  display: block;
  padding: 2px 10px 5px 10px;
  position: relative;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid rgba #0000000d (0, 0, 0, .05);
  margin-bottom: 0;
  flex: 1;
  z-index: inherit;
}
.nav-search-field {
  height: 44px;
  margin: 0;
  position: relative;
  background: #fff;
}
.nav-fill {
  width: auto;
  overflow: hidden;
  white-space: nowrap;
}
.nav-right {
  width: auto;
  overflow: hidden;
  white-space: nowrap;
}
.nav-searchbar .nav-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.nav-search-submit {
  position: relative;
  height: 44px;
  width: 50px;
  margin: 2px 10px 5px 5px;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .15);
}
.nav-search-field {
  height: 44px;
  margin: 0;
  position: relative;
  background: #fff;
}
.nav-search-field .nav-input {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  direction: ltr;
  display: block;
  padding: 0 65px 0 10px;
  color: #000;
  font-size: 1rem;
  font-family: inherit;
  border: 0;
  outline: 0;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .5), inset 0 1px 0 0 rgba(0, 0, 0, .07);
}
.nav-search-field,
.nav-search-field .nav-input {
  border-radius: 8px 12px 12px 8px;
  border-radius: 0\9;
}
.nav-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
  border: 0;
  background-color: transparent;
  text-indent: -1000px;
  line-height: 1px;
}
.nav-search-submit,
.nav-search-submit .nav-input {
  border-radius: 8px 8px 8px 8px;
  border-radius: 0\9;
}
.nav-search-submit {
  position: relative;
  height: 44px;
  width: 50px;
  margin: 2px 10px 5px 5px;
  border: 0;
  cursor: pointer;
  background-color: #dddddd;
  box-shadow: inset, 0, 1px, 0, 0, rgba(255, 255, 255, .15);
}
.nav-search-submit .nav-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
  border: 0;
  background-color: #00000000;
  text-indent: -1000px;
  line-height: 1px;
}
.nav-search-submit .nav-icon {
  position: absolute;
  top: 10px;
  left: 12px;
  pointer-events: none;
  background-position: -73px -239px;
  width: 27px;
  height: 25px;

}
/* THIRD PARTY NAVIGATION  */
#nav-disco-bar.nav-gwbar-scroll {
  height: 42px;
  width: 100%;
  overflow: hidden;
  background: #141920;
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}
#nav-wrapper.nav-gwbar-wrapper {
  display: inline-flex;
  min-width: -moz-max-content;
  min-width: max-content;
  background: #141920;
}
#nav-gwbar.nav-gwbar-scroll {
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}
#nav-gwbar .nav-ul {
  display: contents;
}
#nav-gwbar .nav-ul .nav-li {
  list-style-type: none;
}
#nav-gwbar.nav-bluebeacon.nav-gwbar-white {
  color: #fff;
}
.nav-gwbar-wrapper>#nav-gwbar.nav-gwbar-single-row.nav-genz.nav-gwbar-scroll .nav-ul .nav-li .nav-a {
  margin: 0 0 20px 15px;
  padding-right: 3px;
}
/* ===== DROPDOWN BASE STYLES ===== */
/* Common dropdown container styles */
#nav-logobar .dropdown .menu,
.ua-account-dropdown .left.menu {
  background-color: var(--ua-dropdown-bg);

  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 12px var(--ua-dropdown-shadow);
  margin-top: var(--spacing-sm);
  min-width: 200px;
  padding: var(--spacing-sm) 0;
  position: absolute;
  top: 100%;
  z-index: var(--z-index-dropdown);
}
/* Common dropdown item styles */
#nav-logobar .dropdown .menu .item,
.ua-account-dropdown .left.menu .item {
  background-color: transparent;
  border: none;
  color: var(--ua-dropdown-text);
  cursor: pointer;
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  text-decoration: none;
  transition: all var(--transition-duration) ease;
  width: 100%;
}
/* Dropdown item hover states */
#nav-logobar .dropdown .menu .item:hover,
.ua-account-dropdown .left.menu .item:hover {
  background-color: var(--ua-dropdown-hover);
  color: var(--ua-dropdown-text);
  font-weight: var(--font-weight-medium);
  
}
/* Dropdown item active states */
#nav-logobar .dropdown .menu .item.active,
.ua-account-dropdown .left.menu .item.active {
  background-color: var(--ua-dropdown-hover);
  color: var(--ua-dropdown-text);
  font-weight: var(--font-weight-semibold);
}
/* Dropdown dividers */
#nav-logobar .dropdown .menu .divider,
.ua-account-dropdown .left.menu .divider {
  background-color: var(--ua-dropdown-divider);
  border: none;
  height: 1px;
  margin: var(--spacing-xs) 0;
  opacity: 0.3;
}
/* Dropdown headers */
#nav-logobar .dropdown .menu .header,
.ua-account-dropdown .left.menu .header {
  background-color: var(--ua-dropdown-header);
  color: var(--ua-dropdown-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  
  width: 100%;
}
/* ===== RESPONSIVE LAYOUT ===== */
/* Mobile layout adjustments */
@media (max-width: 768px) {
  #nav-logobar .wrapper {
    padding: 0 var(--spacing-md);
  }

  #nav-logobar .logo img {
    max-width: 150px;
  }

  #nav-logobar .right.menu {
    gap: var(--spacing-sm);
  }

  /* Mobile dropdown adjustments */
  #nav-logobar .dropdown .menu,
  .ua-account-dropdown .left.menu {
    left: 0;
    min-width: 180px;
    right: auto;
  }
}
/* Tablet layout adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  #nav-logobar .wrapper {
    padding: 0 var(--spacing-lg);
  }

  #nav-logobar .logo img {
    max-width: 180px;
  }
}
/* ===== UTILITY CLASSES ===== */
/* Flexbox utilities */
.d-flex {
  display: flex !important;
}
.d-inline-flex {
  display: inline-flex !important;
}
.flex-column {
  flex-direction: column !important;
}
.flex-row {
  flex-direction: row !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.justify-content-end {
  justify-content: flex-end !important;
}
.align-items-center {
  align-items: center !important;
}
.align-items-start {
  align-items: flex-start !important;
}
.align-items-end {
  align-items: flex-end !important;
}
/* Spacing utilities */
.m-0 {
  margin: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.ml-0 {
  margin-left: 0 !important;
}
.p-0 {
  padding: 0 !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pr-0 {
  padding-right: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pl-0 {
  padding-left: 0 !important;
}
/* Text utilities */
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
/*
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
*/
/* Display utilities */
.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
.d-inline-block {
  display: inline-block !important;
}
/* Position utilities */
.position-relative {
  position: relative !important;
}
.position-absolute {
  position: absolute !important;
}
.position-fixed {
  position: fixed !important;
}
/* Overflow utilities */
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-auto {
  overflow: auto !important;
}
.overflow-scroll {
  overflow: scroll !important;
}
/* Border utilities */
.border-0 {
  border: 0 !important;
}
.border-radius {
  border-radius: var(--border-radius-sm) !important;
}
.border-radius-lg {
  border-radius: var(--border-radius-lg) !important;
}
.border-radius-xl {
  border-radius: var(--border-radius-xl) !important;
}
/* Shadow utilities */
.shadow-none {
  box-shadow: none !important;
}
.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}
.shadow-md {
  box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}
/* ===== PRODUCT PAGE LAYOUT ===== */
/* Product page main layout structure */
.product-page {
  background: var(--product-header-bg);
  min-height: 100vh;
  width: 100%;
}
/* Product header layout */
.product-header {
  display: flex;
  flex-direction: column;
  gap: var(--product-content-gap);
  padding: var(--spacing-md);
}
.product-header .content {
  display: flex;
  flex-direction: column;
  gap: var(--product-content-gap);
}
/* Product rating and engagement layout */
.product-rating-section {
  display: flex;
  gap: var(--rating-gap);
  align-items: end;
  flex-wrap: wrap;
  margin-top: 3.9px;
}
.product-rating {
  display: flex;
  gap: var(--rating-stars-gap);
  align-items: end;
}
.product-stars {
  display: flex;
  gap: 4px;
}
.product-comments {
  display: flex;
  gap: var(--rating-stars-gap);
  align-items: end;
}
.product-action-buttons {
  display: flex;
  gap: var(--action-buttons-gap);
  align-items: center;
}
/* Purchase section layout */
.purchase-section {
  text-align: center;
  margin-bottom: var(--purchase-margin-bottom);
  padding: var(--purchase-padding);
  background: var(--purchase-bg);
  border-radius: var(--purchase-radius);
  border: 1px solid var(--purchase-border);
}
.purchase-actions {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: var(--spacing-lg);
  width: 100%;
}
/* Sticky purchase bar layout */
.sticky-purchase-bar {
  background: var(--sticky-bar-bg);
  border: 1px solid var(--sticky-bar-border);
  border-radius: var(--sticky-bar-radius);
  padding: var(--sticky-bar-padding);
  box-shadow: var(--sticky-bar-shadow);
  margin-top: var(--spacing-xl);
}
.price-pill {
  background: var(--price-pill-bg);
  border: 1px solid var(--price-pill-border);
  border-radius: var(--price-pill-radius);
  padding: var(--price-pill-padding);
  display: flex;
  align-items: center;
  gap: var(--price-pill-gap);
}
/* License selection layout */
.license-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.license-option {
  display: flex;
  align-items: center;
  gap: var(--license-option-gap);
  padding: var(--license-option-padding);
  border: 1px solid var(--license-option-border);
  border-radius: var(--license-option-radius);
  background: var(--license-option-bg);
  cursor: pointer;
  transition: all 0.2s ease;
}
/* Group buy progress layout */
.group-buy-progress {
  margin-top: 0.5rem;
  display: block;
}
.group-buy-progress-bar {
  position: relative;
  width: 100%;
  height: var(--group-buy-progress-height);
  background: var(--group-buy-progress-bg);
  border-radius: 9999px;
  overflow: hidden;
}
.group-buy-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--group-buy-progress-fill);
  transition: width 0.25s ease;
}
/* ===== MOBILE LAYOUT COMPONENTS ===== */
/* Mobile search bar layout */
#mobile-search-bar {
  background: var(--mobile-menu-bg);
  display: none !important;
  height: var(--search-bar-height);
  right: 0;
  padding: var(--spacing-md);
  position: fixed;
  top: var(--mobile-search-top);
  width: 100%;
  z-index: var(--search-bar-z-index);
}
/* Mobile menu layout */
#mobile-menu {
  background: var(--mobile-menu-bg);
  border: 0;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--mobile-menu-shadow);
  height: var(--mobile-menu-height);
  right: var(--mobile-menu-right);
  margin: 0;
  overflow-y: auto;
  padding: var(--spacing-sm);
  position: fixed;
  top: var(--mobile-menu-top);
  visibility: hidden;
  width: var(--mobile-menu-width);
  z-index: var(--mobile-menu-z-index);
}
#mobile-menu .wrapper {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
/* Mobile menu 2 layout */
#mobile-menu-2 {
  align-items: center;
  background: var(--mobile-menu-2-bg);
  bottom: 0;
  display: none;
  height: var(--mobile-menu-2-height);
  justify-content: space-between;
  margin: 0;
  position: fixed;
  width: 100%;
  z-index: var(--mobile-menu-2-z-index);
}
/* Blur overlay layout */
#blur {
  background: var(--blur-bg);
  height: 100%;
  top: 0;
  z-index: var(--blur-z-index);
}
#blur,
#items-menu {
  right: 0;
  position: fixed;
  width: 100%;
}
/* Items menu layout */
#items-menu {
  background: var(--items-menu-bg);
  display: none;
  top: var(--items-menu-top);
  z-index: var(--items-menu-z-index);
}
#items-menu:after,
#items-menu:before {
  bottom: 20px;
  content: "";
  height: 50%;
  position: absolute;
  width: 50%;
  z-index: -1;
}
#items-menu:before {
  box-shadow: -3px 11px 9px 3px var(--items-menu-shadow);
  right: 0;
  transform: rotate(2deg);
}
#items-menu:after {
  box-shadow: 3px 11px 9px 3px var(--items-menu-shadow);
  left: 0;
  transform: rotate(-2deg);
}
/* 
 * FIX: MOBILE HORIZONTAL SCROLL ISSUE
 * تاریخ: 2025-01-16
 * مشکل: استفاده از 100vw باعث horizontal shift در موبایل می‌شد
 * راه‌حل: تبدیل به 100% و sync با Tailwind v4
 * 
 * نکات فنی:
 * - 100vw شامل scrollbar width نیست
 * - در موبایل باعث shift به راست می‌شود
 * - 100% relative به parent container است
 * - هماهنگ با overflow-x: hidden در Tailwind v4
 * 
 * @see resources/css/app.css - GLOBAL LAYOUT FIX
 */
/* Items menu categories layout */
#items-menu .categories {
  background: var(--items-menu-bg);
  display: flex;
  height: 47px;
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
  width: 100%;
  /* FIX: تبدیل از 100vw به 100% برای جلوگیری از horizontal overflow */
}
#items-menu .categories .wrapper>.item {
  color: var(--items-menu-text);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--items-category-font-size);
  margin: 0;
  padding: var(--items-category-padding);
  position: relative;
}
#items-menu .categories .wrapper>.item:last-child {
  margin-left: var(--spacing-md);
}
#items-menu .categories .wrapper>.item:not(:first-child) {
  margin-right: -0.25rem;
}
#items-menu .categories .wrapper>.item:not(:last-child):after {
  background: var(--items-menu-divider);
  content: "";
  height: 20px;
  right: auto;
  position: absolute;
  left: 0;
  top: 13.5px;
  width: 1px;
}
#items-menu .categories .wrapper>.item>span {
  border: 1px solid var(--items-menu-border);
  border-radius: var(--border-radius-sm);
  display: block;
  padding: var(--items-category-padding);
}
#items-menu .categories .wrapper>.item .items {
  background: var(--items-menu-bg);
  display: none;
  right: 0;
  max-height: calc(100vh - 113px);
  min-width: 200px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  z-index: var(--items-submenu-z-index);
}
#items-menu .categories .wrapper>.item .items .item {
  display: block;
  margin: 0;
  padding: var(--items-submenu-padding);
  position: relative;
}
#items-menu .categories .wrapper>.item .items .item:not(:last-child):after {
  background: #f7f7f7;
  bottom: 0;
  content: "";
  height: 1px;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}
#items-menu .categories .wrapper>.item.active .items {
  display: block;
}

/*# sourceMappingURL=layout.css.map*/