@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn[wght].woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bs-font-sans-serif: 'Vazirmatn', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Vazirmatn', sans-serif;
}

/* Every Bootstrap dropdown toggle (mini-cart, currency, language, account -
   anywhere `.dropdown-toggle` is used) is supposed to get its down-arrow
   caret automatically from Bootstrap's own `.dropdown-toggle::after` CSS.
   Confirmed live on 2026-09-17: the site's own `bootstrap.css` (loaded for
   English/LTR pages) is missing that rule entirely - only
   `bootstrap.rtl.min.css` (loaded for Persian/RTL pages) has it - so every
   dropdown toggle sitewide silently loses its arrow in English while
   looking correct in Persian. This isn't something any of our patches
   introduced; the vendor file itself is incomplete. Rather than patch the
   271KB vendor CSS (and risk missing whatever else might be incomplete in
   it), we draw the same caret ourselves here, once, for both directions -
   logical properties (inline-start/end) mean this doesn't need a separate
   RTL variant the way Bootstrap's own two builds do. */
.dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-inline-end: .3em solid transparent;
  border-bottom: 0;
  border-inline-start: .3em solid transparent;
}

h1, h2, h3, h4, h5, h6 {
  color: #444;
}

legend {
  padding: 7px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

label {
  font-size: 12px;
  font-weight: normal;
}

/* Chrome border line */
button:focus {
  outline: none !important;
}

/* container */
#container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  margin-bottom: 300px;
}

/* content */
#content, #column-left, #column-right {
  padding-bottom: 730px;
}

@media (min-width: 576px) {
  #content, #column-left, #column-right {
    padding-bottom: 400px;
  }
}
#alert {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 50%;
  width: 320px;
  margin-left: -160px;
}

@media (min-width: 992px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1140px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1320px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
#alert .alert {
  margin-bottom: 15px;
}

#alert .alert-primary {
  box-shadow: 0 0 0 5px rgb(var(--bs-primary-rgb), 0.1);
}

#alert .alert-secondary {
  box-shadow: 0 0 0 5px rgb(var(--bs-secondary-rgb), 0.1);
}

#alert .alert-success {
  box-shadow: 0 0 0 5px rgb(var(--bs-success-rgb), 0.1);
}

#alert .alert-warning {
  box-shadow: 0 0 0 5px rgb(var(--bs-warning-rgb), 0.1);
}

#alert .alert-danger {
  box-shadow: 0 0 0 5px rgb(var(--bs-danger-rgb), 0.1);
}

#alert .alert-info {
  box-shadow: 0 0 0 5px rgb(var(--bs-info-rgb), 0.1);
}

#alert .alert-light {
  box-shadow: 0 0 0 5px rgb(var(--bs-light-rgb), 0.1);
}

#alert .alert-dark {
  box-shadow: 0 0 0 5px rgb(var(--bs-dark-rgb), 0.1);
}

/* top */
#top {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 5px;
}

#top ul.list-inline {
  margin-bottom: 0;
}

#top .list-inline-item > a, #top .list-inline-item .dropdown > a, #top .list-inline-item .dropdown > span {
  font-size: 1.1em;
  color: var(--bs-gray-600);
  line-height: 40px;
  vertical-align: middle;
  padding: 10px 0px 5px 0px;
}

/* logo */
#logo {
  text-align: center;
  margin: 7px 0 7px 0;
}

#logo img {
  max-width: 200px;
}

@media (min-width: 768px) {
  #logo {
    text-align: left;
  }
}
/* search */
#search {
  margin-bottom: 10px;
}

#search .form-control-lg {
  height: 40px;
  font-size: 12px;
  line-height: 20px;
  padding: 0 10px;
}

#search .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 0.57rem 35px;
  text-shadow: 0 1px 0 #FFF;
}

/* cart */
#cart {
  margin-bottom: 10px;
}

#cart .img-thumbnail {
  min-width: 100px;
}

#cart .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 14px 35px;
}

#cart .dropdown-menu {
  background: #eee;
}

#cart .dropdown-menu li {
  min-width: 300px;
}

@media (max-width: 768px) {
  #cart .dropdown-menu li {
    min-width: 100%;
  }
}
/* menu */
#menu {
  background-color: #229ac8;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
  border: 1px solid #1f90bb;
  border-color: #1f90bb #1f90bb #145e7a;
  min-height: 40px;
  border-radius: 4px;
  padding: 0 1rem;
  margin-bottom: 20px;
}

#menu .navbar-nav > li > a {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  padding: 10px 15px 10px 15px;
  background-color: transparent;
}

#menu .navbar-nav > li > a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#menu .dropdown-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#menu .dropdown-inner {
  display: flex;
  flex-direction: column;
}

#menu .dropdown-inner ul {
  width: 100%;
  min-width: 200px;
}

@media (min-width: 960px) {
  #menu .dropdown:hover .dropdown-menu {
    display: block;
  }
  #menu .dropdown-inner {
    flex-direction: row;
  }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -200px;
  }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -400px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-2 {
    left: -200px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -400px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -600px;
  }
}
#category {
  float: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

#menu .navbar-toggler i {
  color: #fff;
  border-color: #fff;
  font-size: 0.9em;
}

/* default boostrap changes */
div.required .col-form-label:before, div.required .form-label:before {
  content: "* ";
  color: #F00;
  font-weight: bold;
}

.form-switch-lg {
  font-size: 20px;
  min-height: 30px;
  line-height: 30px;
}

.nav-tabs {
  margin-bottom: 15px;
}

.form-check .form-check-input {
  margin-top: 0.25rem;
}

@media (min-width: 768px) {
  .col-form-label {
    text-align: right;
  }
}
/* footer */
footer {
  border: 1px solid #000000;
  position: absolute;
  bottom: -1px;
  width: 100%;
  padding-top: 30px;
  background-color: #303030;
  border-top: 1px solid #ddd;
  color: #e2e2e2;
}

footer hr {
  border-top: none;
  border-bottom: 1px solid #666;
}

footer a {
  color: #ccc;
  text-decoration: none;
}

footer a:hover {
  color: #fff;
}

footer h5 {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* breadcrumb */
.breadcrumb {
  margin: 0 0 20px 0;
  padding: 8px 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
}
.breadcrumb i {
  font-size: 15px;
}
.breadcrumb > li.breadcrumb-item {
  text-shadow: 0 1px 0 #FFF;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
}
.breadcrumb > li.breadcrumb-item > a {
  text-decoration: none;
}
.breadcrumb > li.breadcrumb-item:after {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  right: -5px;
  width: 29px;
  height: 29px;
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  transform: rotate(-45deg);
}
.breadcrumb > li.breadcrumb-item + li:before {
  content: "";
  padding: 0;
}

.product-thumb {
  border: 1px solid #ddd;
  position: relative;
  height: 100%;
}

.product-thumb .image {
  text-align: center;
}

.product-thumb .image a:hover {
  opacity: 0.8;
}

.product-thumb .description {
  padding: 15px;
  margin-bottom: 45px;
}

.product-thumb .description h4 {
  font-weight: bold;
}

.product-thumb .button {
  display: flex;
  position: absolute;
  width: 100%;
  bottom: 0;
}

.product-thumb .button button {
  width: 33.33%;
  border: none;
  border-top: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-gray-600);
  line-height: 38px;
  text-align: center;
}

.product-thumb .button button:hover {
  color: var(--bs-gray-600);
  background-color: #ddd;
  text-decoration: none;
  cursor: pointer;
}

.product-thumb .button button + button {
  border-left: 1px solid var(--bs-border-color);
}

.product-thumb .button .qty-stepper {
  flex: 0 0 auto;
  width: 92px;
  margin: 0;
  border-top: 1px solid var(--bs-border-color);
}

.product-thumb .button .qty-stepper + button {
  border-left: 1px solid var(--bs-border-color);
}

.product-thumb .button .qty-stepper button {
  width: auto;
  flex: 1 1 auto;
  border: none;
  line-height: 1;
  padding: 0;
}

.product-thumb .button .qty-stepper input {
  width: auto;
  flex: 1 1 32px;
  min-width: 0;
  border: none;
  border-radius: 0;
  padding: 0 2px;
  font-size: 12px;
  height: 38px;
}

.product-thumb .button .product-thumb-btn-cart,
.product-thumb .button .product-thumb-btn-wishlist,
.product-thumb .button .product-thumb-btn-compare {
  width: auto;
  flex: 1 1 0;
}

@media (min-width: 960px) {
  .product-list .product-thumb {
    display: flex;
  }
  .product-list .product-thumb .image {
    flex-direction: column;
    margin-bottom: 0px;
  }
  .product-list .product-thumb .content {
    flex-direction: column;
    flex: 75%;
    position: relative;
  }
  .product-list .product-thumb .button {
    border-left: 1px solid #ddd;
    width: calc(100% - 15px);
    margin-left: 15px;
  }
}
.rating .fa-stack {
  width: 20px;
}

.rating .fa-star {
  color: #999;
  font-size: 15px;
}

.rating .fa-star {
  color: #FC0;
  font-size: 15px;
}

.rating .fa-star + .fa-star {
  color: #E69500;
}

/* product list */
.price {
  color: #444;
}

.price-new {
  font-weight: 600;
}

.price-old {
  color: #dc512c;
  text-decoration: line-through;
}

.price-tax {
  color: #999;
  font-size: 12px;
  display: block;
}

/* blog */
.blog-thumb {
  border: 1px solid #ddd;
  margin-bottom: 15px;
}

.blog-thumb h4 {
  font-weight: bold;
}

.blog-thumb .image {
  text-align: center;
  margin-bottom: 15px;
}

.blog-thumb .image a:hover {
  opacity: 0.8;
}

.blog-thumb .description {
  padding: 15px;
}

/* Theme Custom CSS */
#cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9999;
  opacity: 0.95;
  color: #ecf0f1;
  background: #343a40;
}

#cookie div {
  font-size: 16px;
  color: #FFFFFF;
}

/* Product page hover-to-zoom (magnifier), see product.twig's inline script.
   Scoped to #product-info specifically so it never touches the unrelated
   ".product-thumb .image" rules elsewhere (category/search listing cards). */
#product-info .image.magnific-popup {
  position: relative;
}

#product-info .product-zoom-lens {
  display: none;
  position: absolute;
  z-index: 20;
  pointer-events: none;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 .5rem 1.5rem rgba(0, 0, 0, .35);
  background-repeat: no-repeat;
  background-color: #fff;
  box-sizing: border-box;
}

/* Small item-count badge on the header's cart icon (#top), see header.twig
   and common.js's ocSyncCartBadge(). Anchored to the icon's own <a>
   (given "position-relative" in the template) rather than the <li>, so it
   sits right at the icon's corner regardless of the list item's padding. */
/* Product thumbnail "Used" badge (see product/thumb.twig) - a small
   corner ribbon over the image, shown only for condition == 'used' so a
   normal (new) product's thumbnail is unchanged. `.product-thumb .image`
   needs position:relative as the positioning context; that class has no
   other positioning rule today so this is safe to add here rather than
   in a theme file. */
.product-thumb .image {
  position: relative;
}

.product-thumb .condition-badge {
  position: absolute;
  top: .5rem;
  inset-inline-start: .5rem;
  z-index: 1;
}

/* Checkout > payment method list (see payment_method.twig) - was plain
   small Bootstrap .form-check text with no visual identifier per gateway,
   flagged as too hard to read. Each row is now a full clickable card with
   a category icon (see paymentMethodIcons in the twig's script) and a
   larger label. */
#payment-methods .payment-method-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .375rem;
  margin-bottom: .5rem;
  cursor: pointer;
}

#payment-methods .payment-method-option:last-child {
  margin-bottom: 0;
}

#payment-methods .payment-method-option:hover {
  border-color: var(--bs-primary, #0d6efd);
}

#payment-methods .payment-method-option:has(input:checked) {
  border-color: var(--bs-primary, #0d6efd);
  background-color: rgba(13, 110, 253, .06);
}

#payment-methods .payment-method-icon {
  font-size: 1.35rem;
  width: 1.5em;
  text-align: center;
  flex-shrink: 0;
  color: var(--bs-secondary-color, #6c757d);
}

#payment-methods .payment-method-name {
  flex: 1 1 auto;
  font-size: 1.05rem;
}

#cart-count-badge {
  /* Positioned relative to its <li> (see header.twig), not the <a> inside
     it - the icon font's own line-height makes the <a> render a few
     pixels taller than the <li> and shifted upward, which threw this off
     when anchored there instead (confirmed live). The <li>'s own box
     lines up cleanly with #top's top edge.
     top stays >= 0, never a small negative offset: #top sits flush
     against the very top of the page (no margin/padding above it), so
     anything pulled above its own box is pulled off the top of the page
     itself and gets clipped by the viewport, not just by a container. */
  position: absolute;
  top: 0;
  inset-inline-end: -6px;
  font-size: .625rem;
  line-height: 1;
  padding: .25em .4em;
  pointer-events: none;
}