/*

Theme Name: moboniaz2026

Theme URI: https://moboniaz.com

Description: Child theme of moboniaz — Digikala-style mobile product gallery

Author: Morteza aghaie

Author URI: https://moboniaz.com

Template: moboniaz

Version: 1.13.54

Text Domain: moboniaz2026

*/

/* Font performance overrides (parent theme fonts, loaded after parent style.css) */
@font-face {
  font-family: 'sans-bold';
  src: url('../moboniaz/assets/fonts/iransanse/IRANSansWeb_Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'sans-light';
  src: url('../moboniaz/assets/fonts/iransanse/IRANSansWeb_Light.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: bold;
  src: url('../moboniaz/assets/fonts/Woff2/IRANSansXFaNum-Bold.woff2') format('woff2');
  /* optional reduces #main-content font CLS on mobile */
  font-display: optional;
}
@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: normal;
  src: url('../moboniaz/assets/fonts/Woff2/IRANSansXFaNum-Regular.woff2') format('woff2');
  font-display: optional;
}

/* Top promo GIF (#mobile-ghesti) — reserve ratio so #main-content does not jump */
#ghesti {
  line-height: 0;
}
@media (min-width: 279px) and (max-width: 680px) {
  #ghesti:has(#mobile-ghesti) {
    width: 100%;
    aspect-ratio: 664 / 48;
    overflow: hidden;
  }
  #ghesti > img#mobile-ghesti {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 664 / 48;
  }
}

/* Remove card shadows on price box + tabs — mobile only */

@media (max-width: 991.98px) {
  /* Header → slider / brands spacing (mobile) */
  #header {
    padding-top: 6px !important;
    padding-bottom: 2px !important;
    min-height: 50px !important;
  }
  #home-slider {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #main-content #home-category {
    margin: 0 !important;
    padding: 16px 0 !important;
    contain: layout;
  }

  #main-content #home-category .home-category-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 8px !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  #main-content #home-offer {
    margin-top: 0 !important;
  }

  /* Brand icons — slightly smaller on mobile */
  #home-category .home-brand-swiper,
  #home-category .swiper-wrapper {
    min-height: 92px;
  }
  #home-category .each-cat a span {
    min-height: 1.15em;
    display: block;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    line-height: 1.15;
    font-size: 11px !important;
  }
  #home-category .each-cat a img,
  #main-content #home-category .home-category-wrapper .container-fluid .row > div .each-cat a img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain;
    box-sizing: border-box;
    padding: 3px !important;
    flex: 0 0 auto;
  }

  /*
   * Brands pre-Swiper: fit exactly 5 slides in viewport (match slidesPerView: 5).
   * Do NOT use max-content + 20vw — that overflows and clips the 5th brand until JS.
   */
  #home-category .home-brand-swiper:not(.swiper-initialized) {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #home-category .home-brand-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    gap: 5px;
  }
  #home-category .home-brand-swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc((100% - 20px) / 5) !important;
    width: calc((100% - 20px) / 5) !important;
    max-width: none !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  #home-category .home-brand-swiper .swiper-slide .each-cat {
    width: 100%;
    margin: 0 auto;
  }
  #home-category .home-brand-swiper .swiper-slide .each-cat a {
    align-items: center;
    width: 100%;
  }

  /*
   * Pre-Swiper (Delay JS): show brands / offers as native horizontal scroll
   * so content is visible before any interaction loads Swiper.
   * Hide scrollbar — it flashes during load until .swiper-initialized.
   */
  #home-category .home-brand-swiper:not(.swiper-initialized),
  #home-offer .home-offer-swiper:not(.swiper-initialized),
  #main-content .home-products-row:not(.swiper-initialized),
  #home-best-selling-swiper:not(.swiper-initialized) {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* pan-y allowed so vertical page scroll works while finger is on carousel */
    touch-action: pan-x pan-y;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
  }
  /* Brands: clip instead of scroll — 5 fit exactly, no half-brand flash */
  #home-category .home-brand-swiper:not(.swiper-initialized) {
    overflow: hidden !important;
  }
  #home-category .home-brand-swiper:not(.swiper-initialized)::-webkit-scrollbar,
  #home-offer .home-offer-swiper:not(.swiper-initialized)::-webkit-scrollbar,
  #main-content .home-products-row:not(.swiper-initialized)::-webkit-scrollbar,
  #home-best-selling-swiper:not(.swiper-initialized)::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  #home-offer .home-offer-swiper:not(.swiper-initialized) .swiper-wrapper,
  #main-content .home-products-row:not(.swiper-initialized) .swiper-wrapper,
  #home-best-selling-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    width: max-content !important;
    max-width: none !important;
    transform: none !important;
    gap: 4px; /* match Swiper spaceBetween: 4 */
  }
  /*
   * Match ~3.25 cards after Swiper init. Use vw (not %) — wrapper is
   * max-content and % of that collapses / causes horizontal page scroll.
   * 16px ≈ section padding 8+8; 12px ≈ three gaps of 4px.
   */
  #home-offer .home-offer-swiper:not(.swiper-initialized) .swiper-slide,
  #main-content .home-products-row:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 auto;
    width: calc((100vw - 16px - 12px) / 3.25);
    max-width: none;
    height: auto !important;
  }
  #home-best-selling-swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 auto;
    width: 22vw;
    max-width: 96px;
    height: auto !important;
  }

  /* Countdown boxes: fixed size so placeholder → live digits does not shift bar */
  #main-content #home-offer .home-offer-time ul li {
    min-width: 25px;
    width: 25px;
    min-height: 18px;
    height: 18px;
    box-sizing: border-box;
  }
  #main-content #home-offer .home-offer-time ul li span {
    display: block;
    line-height: 1;
    min-height: 1em;
  }

  /* Homepage product cards only — CLS locks (do not apply to archive) */
  #main-content #home-offer .product-item,
  #main-content .home-row .product-item,
  #main-content #home-best-selling-swiper .product-item {
    display: flex;
    flex-direction: column;
    contain: layout;
  }
  #main-content #home-offer .product-item .product-image,
  #main-content .home-row .product-item .product-image,
  #main-content #home-best-selling-swiper .product-item .product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    contain: layout;
  }
  #main-content #home-offer .product-item .product-image a,
  #main-content .home-row .product-item .product-image a,
  #main-content #home-best-selling-swiper .product-item .product-image a {
    display: block !important;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
  }
  #main-content #home-offer .product-item .product-image a img,
  #main-content #home-offer .product-item .product-image a img.img-fluid,
  #main-content .home-row .product-item .product-image a img,
  #main-content .home-row .product-item .product-image a img.img-fluid,
  #main-content #home-best-selling-swiper .product-item .product-image a img,
  #main-content #home-best-selling-swiper .product-item .product-image a img.img-fluid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
  /*
   * Title box: parent base rule is height:70px + margin-bottom:14px (no media query).
   * Exactly 2 lines (14px / 18px × 2 = 36px) — 40px left a sliver of line 3 visible.
   */
  #main-content #home-offer .product-item .product-title,
  #main-content .home-row .product-item .product-title,
  #main-content #home-best-selling-swiper .product-item .product-title {
    padding: 0 5px !important;
    margin: 0 0 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    overflow: hidden;
    flex: 0 0 36px;
    contain: layout style;
    box-sizing: border-box;
  }
  #main-content #home-offer .product-item .product-title h3,
  #main-content .home-row .product-item .product-title h3,
  #main-content #home-best-selling-swiper .product-item .product-title h3 {
    margin: 0 !important;
    padding: 0 !important;
    height: 36px !important;
    max-height: 36px !important;
    line-height: 18px !important;
    font-size: 14px !important;
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #main-content #home-offer .product-item .product-title h3 a,
  #main-content .home-row .product-item .product-title h3 a,
  #main-content #home-best-selling-swiper .product-item .product-title h3 a {
    line-height: 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline !important;
    text-decoration: none;
  }

  /*
   * Delivery badge on cards uses .ma-delivery-badge-wrap (product-page styles).
   * Reset so it does not force width:100% / margin / border and push .product-price.
   */
  #main-content #home-offer .product-item .product-rate,
  #main-content .home-row .product-item .product-rate,
  #main-content #home-best-selling-swiper .product-item .product-rate {
    min-height: 28px;
    align-items: center;
    flex: 0 0 auto;
    margin-bottom: 8px !important;
  }
  #main-content #home-offer .product-item .product-rate .ma-delivery-badge-wrap,
  #main-content #home-offer .product-item .product-rate .ma-delivery-badge-wrap--loop,
  #main-content .home-row .product-item .product-rate .ma-delivery-badge-wrap,
  #main-content .home-row .product-item .product-rate .ma-delivery-badge-wrap--loop,
  #main-content #home-best-selling-swiper .product-item .product-rate .ma-delivery-badge-wrap,
  #main-content #home-best-selling-swiper .product-item .product-rate .ma-delivery-badge-wrap--loop {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: inline-flex !important;
    flex-direction: row-reverse;
    align-items: center;
    flex: 0 0 auto;
  }
  #main-content #home-offer .product-item .product-rate .ma-delivery-badge-wrap--loop > i,
  #main-content .home-row .product-item .product-rate .ma-delivery-badge-wrap--loop > i,
  #main-content #home-best-selling-swiper .product-item .product-rate .ma-delivery-badge-wrap--loop > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2em;
    height: 1.2em;
    line-height: 1;
    font-size: 10px;
  }
  #main-content #home-offer .product-item .product-rate > a img,
  #main-content .home-row .product-item .product-rate > a img,
  #main-content #home-best-selling-swiper .product-item .product-rate > a img {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0;
  }
  #main-content #home-offer .product-item .product-price,
  #main-content .home-row .product-item .product-price,
  #main-content #home-best-selling-swiper .product-item .product-price {
    min-height: 48px;
    flex: 0 0 auto;
    contain: layout;
  }

  /* Archive list cards: restore parent spacing (undo any global product-item overrides) */
  .product-archive-wrapper .product-item {
    contain: none;
  }
  .product-archive-wrapper .product-info-wrapper .product-title {
    padding: 0 10px !important;
    margin: 10px 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none;
    contain: none;
    overflow: visible;
  }
  .product-archive-wrapper .product-info-wrapper .product-title h3 {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    line-height: 1.45 !important;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
  }
  .product-archive-wrapper .product-info-wrapper .product-title h3 a {
    line-height: 1.45 !important;
    display: inline !important;
  }
  .product-archive-wrapper .product-info-wrapper .product-rate {
    min-height: 0;
    margin-bottom: 5px !important;
  }
  .product-archive-wrapper .product-info-wrapper .product-price {
    min-height: 0;
    contain: none;
  }

  /* Blog thumbs: reserve 2:1 before Rocket lazy SVG swaps in */
  #home-blog {
    contain: layout style;
  }
  #home-blog .home-blog-item {
    contain: layout;
    min-height: calc(90vw * 210 / 420);
  }
  #home-blog .home-blog-item-image {
    width: 100%;
    aspect-ratio: 420 / 210;
    overflow: hidden;
    contain: layout;
  }
  #home-blog .home-blog-item-image a {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 420 / 210;
  }
  #home-blog .home-blog-item-image img,
  #home-blog .home-blog-item-image img.img-fluid {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 420 / 210;
    object-fit: cover;
    border-radius: 10px;
  }

  .single-product-view-wrapper .container-fluid > .product .summary > div form.variations_form,
  .simple-product-price-wrapper,
  .single-product-view-wrapper .container-fluid > .product .woocommerce-tabs .woocommerce-Tabs-panel {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  .single-product-view-wrapper .container-fluid > .product .summary > div form.variations_form {
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Eager paint for price box — avoid deferred render until scroll */
  .single-product-view-wrapper .container-fluid > .product .entry-summary,
  .single-product-view-wrapper .simple-product-price-wrapper,
  .single-product-view-wrapper .woocommerce-variation-price {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }
}