/* ==========================================================================
   Product collections

   Sections built in the admin panel (landing elements) that list products
   through the dynamic-product-tiles component. The redesign has no artwork for
   them, so their old rules from style.css, media.css and landing.css are
   carried over here in the redesign's palette and type.
   ========================================================================== */

/* Sections from the admin panel (kitchen, collections, mini banners) follow the
   same vertical rhythm as the redesign's own sections in home.css. */
.page-container > section.section,
.page-container > section.home-section {
  margin: 0;
  padding-top: 48px;
}

@media (max-width: 991.98px) {
  .page-container > section.section,
  .page-container > section.home-section {
    padding-top: 24px;
  }
}

/* The panel markup adds Bootstrap's my-2 here, which would stretch the gap
   around each collection past the rhythm above. */
.page-container > section.home-section .product-collection-box-style-1 {
  margin-block: 0 !important;
}

.product-collection-box-style-1 {
  position: relative;
  border: 1px solid var(--gray-300);
  border-radius: 16px !important;
  box-shadow: none !important;
}

.title-section {
  border-bottom: 1px solid var(--blue-70);
}

.title-section .title {
  display: inline-block;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2.5px solid var(--orange-400);
  color: var(--blue-800);
  font-size: 20px;
  font-weight: 600;
}

/* Same outlined pill as the header's "سرویس سبد" link. */
a.btn-more-product {
  position: absolute;
  top: 24px;
  left: 24px;
  padding: 4px 14px;
  border: 2px solid var(--orange-400);
  border-radius: 30px;
  background-color: #fff;
  color: var(--orange-400);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* No hover: the pill keeps its outlined look under the pointer. The keyboard ring
   stays, since :focus-visible never fires for a mouse. */
a.btn-more-product:focus-visible {
  background-color: var(--orange-400);
  color: #fff;
}

/* Carousel arrows: the live site's square buttons (landing.css), in the brand
   orange instead of green. Corner radius and spacing come from the Owl theme,
   as they do there. */
.saeed .owl-nav button {
  width: 30px;
  height: 30px;
  background: var(--orange-400) !important;
  color: #fff !important;
  font-size: 25px !important;
  line-height: 0 !important;
}

/* --------------------------------------------------------------------------
   Product tile (elements/product-item)
   -------------------------------------------------------------------------- */

.product-box {
  position: relative;
  margin-bottom: 15px;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background-color: #fff;
  direction: rtl;
}

.product-image img {
  display: block;
  width: 150px;
  max-width: 150px;
  height: 150px;
  margin: auto;
  object-fit: contain;
}

.product-ribbon.discount {
  position: absolute;
  top: 15px;
  right: 0;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 30px 0 0 30px;
  background-color: var(--orange-400);
  color: #fff;
  font-size: 12px;
}

.product-box .title {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 0 6px;
  overflow: hidden;
  border-bottom: 1px solid var(--blue-70);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product-box .title a {
  color: var(--blue-800);
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-box .title a:hover {
  color: var(--orange-400);
}

.product-box-footer {
  min-height: 40px;
}

/* The live site's button (Bootstrap btn-primary at style.css's size), not a
   redesign pill. */
.product-box .add-to-cart {
  font-size: 12px;
}

.product-box .add-to-cart i {
  vertical-align: middle;
}

.product-price {
  height: 40px;
  padding-top: 7px;
  color: var(--blue-800);
  font-size: 14px;
  text-align: center;
}

.product-price.has-discount {
  padding-top: 0;
  font-size: 13px;
}

.product-price.has-discount .current-price {
  font-weight: 700;
}

.product-price .old-price {
  display: block;
  color: #c71c1c;
  text-decoration: line-through;
}

.product-box .text-message {
  display: block;
  padding-block: 8px;
  color: var(--gray-700);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 991.98px) {
  .product-box .title {
    font-size: 14px;
    text-align: center;
  }

  .product-box .add-to-cart {
    display: block;
    margin-top: 5px;
  }

  .product-price .old-price {
    margin: 5px auto;
  }
}