/* EXPERIMENTAL: alternative layouts for the opened-product view.
   Loaded by includes/class-mrw-detail-layout.php (+ assets/js/detail-layout.js for the short description and the
   discount badge). Delete these files + the require line in merch-rack-woo.php to remove the feature.
   - .mrw-dl-bottom         : bottom box on every device
   - .mrw-dl-bottom_mobile  : bottom box on phones only
   The rack keeps its normal height. The box (height = --mr-dl-h) hangs BELOW the rack and, while a product is
   open, the rack gets the same amount of bottom margin so the page content below moves down.
   All colours come from --mr-dl-* variables (set by the Elementor controls); the fallbacks below are the defaults
   of the design. */

/* ===== bottom box: all devices ===== */
.mrw-dl-bottom .mrw {
  /* the rack keeps its height; the box hangs below it (clip only the other three sides) */
  overflow: visible;
  clip-path: inset(0 0 calc(var(--mr-dl-h, 210px) * -1 - 60px) 0);
  transition: margin-bottom .45s var(--mr-ease);
}

/* push the following page content down by the box height while a product is open */
.mrw-dl-bottom .mrw.is-detail {
  margin-bottom: var(--mr-dl-h, 210px);
}

.mrw-dl-bottom .mrw-info {
  top: 100%;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: var(--mr-dl-h, 210px);
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 22px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--mr-dl-bg, #fff7e6);
  border-radius: var(--mr-dl-radius, 28px) var(--mr-dl-radius, 28px) 0 0;
  box-shadow: 0 -8px 26px rgba(60, 40, 10, .13);
}

/* grab handle */
.mrw-dl-bottom .mrw-info::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 38px;
  height: 4px;
  margin-left: -19px;
  border-radius: 4px;
  background: var(--mr-dl-handle, rgba(60, 40, 10, .2));
}

/* ignore the manual X/Y offsets set for the default layout (Elementor "position" controls) */
.mrw-dl-bottom .mrw-info .mrw-title,
.mrw-dl-bottom .mrw-info .mrw-price,
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-details-btn,
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add,
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-qty {
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

/* ---- title / short description ---- */
.mrw-dl-bottom .mrw-info .mrw-title {
  max-width: 100%;
  min-width: 0;
  justify-self: center;
  overflow-wrap: anywhere;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--mr-dl-title, #2b2118) !important;
}

.mrw-dl-bottom .mrw-info .mrw-dl-desc {
  max-width: 100%;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mr-dl-desc, #7c7567) !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.mrw-dl-bottom .mrw-info .mrw-dl-desc:empty {
  display: none;
}

/* ---- price row: [sale price pill] [old price] [-21%] ---- */
.mrw-dl-bottom .mrw-info .mrw-price {
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  justify-self: stretch;
  margin: 4px 0 0;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--mr-dl-price, #2b2118) !important;
}

.mrw-dl-bottom .mrw-info .mrw-price ins,
.mrw-dl-bottom .mrw-info .mrw-price>.amount,
.mrw-dl-bottom .mrw-info .mrw-price>.woocommerce-Price-amount {
  direction: rtl;
  order: 1;
  text-decoration: none;
  background: var(--mr-dl-price-bg, #fde08a);
  color: var(--mr-dl-price, #2b2118);
  padding: 5px 18px;
  border-radius: 999px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.mrw-dl-bottom .mrw-info .mrw-price ins .amount {
  color: inherit;
}

.mrw-dl-bottom .mrw-info .mrw-price .woocommerce-Price-currencySymbol {
  margin-inline-start: 4px;
  font-size: 13px;
  font-weight: 600;
}

.mrw-dl-bottom .mrw-info .mrw-price del {
  direction: rtl;
  order: 2;
  margin: 0;
  opacity: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--mr-dl-old, #8c8576);
}

.mrw-dl-bottom .mrw-info .mrw-price del .woocommerce-Price-currencySymbol {
  font-size: inherit;
  font-weight: inherit;
}

.mrw-dl-bottom .mrw-info .mrw-price .mrw-dl-badge {
  order: 3;
  direction: ltr;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--mr-dl-badge-bg, #fde3e6);
  color: var(--mr-dl-badge, #e0394a);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

/* ---- slide counter / message chips (on the photo, just above the box) ---- */
.mrw-dl-bottom .mrw-info .mrw-count {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  inset-inline-start: 16px !important;
  width: max-content;
  justify-self: start;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  color: #fff;
  font-size: 13px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mrw-dl-bottom .mrw-info .mrw-msg {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  inset-inline-end: 16px !important;
  width: max-content;
  justify-self: end;
  max-width: calc(100% - 120px);
  min-height: 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--mr-dl-bg, #fff7e6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.mrw-dl-bottom .mrw-info .mrw-msg:not(.is-on) {
  pointer-events: none;
}

/* ---- buttons row: [quantity] [add to cart] ---- */
.mrw-dl-bottom .mrw-info .mrw-actions {
  box-sizing: border-box;
  direction: rtl;
  flex-wrap: nowrap;
  justify-content: stretch;
  width: 100%;
  max-width: 100%;
  gap: 12px;
  margin-top: 8px;
}

.mrw-dl-bottom .mrw-info .mrw-actions>* {
  min-width: 0;
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add {
  flex: 1 1 0;
  min-height: 54px;
  padding-inline: 10px;
  gap: 8px;
  white-space: nowrap;
  border-radius: 18px;
  border-color: transparent !important;
  background: var(--mr-dl-add-bg, #f4b12e) !important;
  color: var(--mr-dl-add-text, #2b2118) !important;
  font-size: 16px;
  font-weight: 800;
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add:hover {
  background: var(--mr-dl-add-hover, #e6a21e) !important;
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add.is-done {
  background: var(--mr-dl-success, var(--mr-success)) !important;
  color: #fff !important;
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add .mrw-add__txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* built-in bag icon (used unless an icon is enabled in the add-to-cart button settings) */
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add:not(.mrw-add--t-has-ico)::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%208h12l1%2012H5L6%208z'/%3E%3Cpath%20d='M9%208V6a3%203%200%200%201%206%200v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%208h12l1%2012H5L6%208z'/%3E%3Cpath%20d='M9%208V6a3%203%200%200%201%206%200v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add.is-busy::before,
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add.is-done::before {
  display: none;
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-qty {
  order: 1;
  flex: 0 0 auto;
  min-height: 54px;
  gap: 0;
  padding: 0 4px;
  border-radius: 18px;
  border: 1px solid var(--mr-dl-qty-border, #e6dcc7);
  background: var(--mr-dl-qty-bg, #fff) !important;
  color: var(--mr-dl-qty, #2b2118) !important;
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-qty .mrw-qty__btn {
  width: 32px;
  height: 36px;
  font-size: 24px;
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-qty .mrw-qty__val {
  font-size: 19px;
  font-weight: 600;
  min-width: 1.4em;
}

/* "details" button: hidden here unless enabled in Elementor; shown as a round icon button */
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-details-btn {
  display: none !important;
  flex: 0 0 auto;
  min-width: 54px;
  min-height: 54px;
  padding-inline: 14px;
  border-radius: 18px;
}


/* ===== bottom box: phones only ===== */
@media (max-width: 767px) {
  .mrw-dl-bottom_mobile .mrw {
    /* the rack keeps its height; the box hangs below it (clip only the other three sides) */
    overflow: visible;
    clip-path: inset(0 0 calc(var(--mr-dl-h, 210px) * -1 - 60px) 0);
    transition: margin-bottom .45s var(--mr-ease);
  }

  /* push the following page content down by the box height while a product is open */
  .mrw-dl-bottom_mobile .mrw.is-detail {
    margin-bottom: var(--mr-dl-h, 210px);
  }

  .mrw-dl-bottom_mobile .mrw-info {
    top: 100%;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: var(--mr-dl-h, 210px);
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    gap: 6px;
    text-align: center;
    padding: 22px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--mr-dl-bg, #fff7e6);
    border-radius: var(--mr-dl-radius, 28px) var(--mr-dl-radius, 28px) 0 0;
    box-shadow: 0 -8px 26px rgba(60, 40, 10, .13);
  }

  /* grab handle */
  .mrw-dl-bottom_mobile .mrw-info::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 4px;
    background: var(--mr-dl-handle, rgba(60, 40, 10, .2));
  }

  /* ignore the manual X/Y offsets set for the default layout (Elementor "position" controls) */
  .mrw-dl-bottom_mobile .mrw-info .mrw-title,
  .mrw-dl-bottom_mobile .mrw-info .mrw-price,
  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-details-btn,
  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-add,
  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-qty {
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }

  /* ---- title / short description ---- */
  .mrw-dl-bottom_mobile .mrw-info .mrw-title {
    max-width: 100%;
    min-width: 0;
    justify-self: center;
    overflow-wrap: anywhere;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--mr-dl-title, #2b2118) !important;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-dl-desc {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mr-dl-desc, #7c7567) !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-dl-desc:empty {
    display: none;
  }

  /* ---- price row: [sale price pill] [old price] [-21%] ---- */
  .mrw-dl-bottom_mobile .mrw-info .mrw-price {
    display: flex;
    direction: ltr;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    justify-self: stretch;
    margin: 4px 0 0;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--mr-dl-price, #2b2118) !important;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-price ins,
  .mrw-dl-bottom_mobile .mrw-info .mrw-price>.amount,
  .mrw-dl-bottom_mobile .mrw-info .mrw-price>.woocommerce-Price-amount {
    direction: rtl;
    order: 1;
    text-decoration: none;
    background: var(--mr-dl-price-bg, #fde08a);
    color: var(--mr-dl-price, #2b2118);
    padding: 5px 18px;
    border-radius: 999px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-price ins .amount {
    color: inherit;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-price .woocommerce-Price-currencySymbol {
    margin-inline-start: 4px;
    font-size: 13px;
    font-weight: 600;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-price del {
    direction: rtl;
    order: 2;
    margin: 0;
    opacity: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--mr-dl-old, #8c8576);
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-price del .woocommerce-Price-currencySymbol {
    font-size: inherit;
    font-weight: inherit;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-price .mrw-dl-badge {
    order: 3;
    direction: ltr;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--mr-dl-badge-bg, #fde3e6);
    color: var(--mr-dl-badge, #e0394a);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
  }

  /* ---- slide counter / message chips (on the photo, just above the box) ---- */
  .mrw-dl-bottom_mobile .mrw-info .mrw-count {
    position: absolute !important;
    left: auto !important;
    top: auto !important;
    bottom: calc(100% + 12px) !important;
    inset-inline-start: 16px !important;
    width: max-content;
    justify-self: start;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    font-size: 13px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-msg {
    position: absolute !important;
    left: auto !important;
    top: auto !important;
    bottom: calc(100% + 12px) !important;
    inset-inline-end: 16px !important;
    width: max-content;
    justify-self: end;
    max-width: calc(100% - 120px);
    min-height: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--mr-dl-bg, #fff7e6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-msg:not(.is-on) {
    pointer-events: none;
  }

  /* ---- buttons row: [quantity] [add to cart] ---- */
  .mrw-dl-bottom_mobile .mrw-info .mrw-actions {
    box-sizing: border-box;
    direction: rtl;
    flex-wrap: nowrap;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    gap: 12px;
    margin-top: 8px;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions>* {
    min-width: 0;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-add {
    flex: 1 1 0;
    min-height: 54px;
    padding-inline: 10px;
    gap: 8px;
    white-space: nowrap;
    border-radius: 18px;
    border-color: transparent !important;
    background: var(--mr-dl-add-bg, #f4b12e) !important;
    color: var(--mr-dl-add-text, #2b2118) !important;
    font-size: 16px;
    font-weight: 800;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-add:hover {
    background: var(--mr-dl-add-hover, #e6a21e) !important;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-add.is-done {
    background: var(--mr-dl-success, var(--mr-success)) !important;
    color: #fff !important;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-add .mrw-add__txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* built-in bag icon (used unless an icon is enabled in the add-to-cart button settings) */
  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-add:not(.mrw-add--t-has-ico)::before {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%208h12l1%2012H5L6%208z'/%3E%3Cpath%20d='M9%208V6a3%203%200%200%201%206%200v2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%208h12l1%2012H5L6%208z'/%3E%3Cpath%20d='M9%208V6a3%203%200%200%201%206%200v2'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-add.is-busy::before,
  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-add.is-done::before {
    display: none;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-qty {
    order: 1;
    flex: 0 0 auto;
    min-height: 54px;
    gap: 0;
    padding: 0 4px;
    border-radius: 18px;
    border: 1px solid var(--mr-dl-qty-border, #e6dcc7);
    background: var(--mr-dl-qty-bg, #fff) !important;
    color: var(--mr-dl-qty, #2b2118) !important;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-qty .mrw-qty__btn {
    width: 32px;
    height: 36px;
    font-size: 24px;
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-qty .mrw-qty__val {
    font-size: 19px;
    font-weight: 600;
    min-width: 1.4em;
  }

  /* "details" button: hidden here unless enabled in Elementor; shown as a round icon button */
  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-details-btn {
    display: none !important;
    flex: 0 0 auto;
    min-width: 54px;
    min-height: 54px;
    padding-inline: 14px;
    border-radius: 18px;
  }

}


/* ===== backdrop behind the box =====
   The box hangs below the rack, so the two top corners (outside the rounded radius) and the sides show whatever is
   behind the widget (often a flat grey). .mrw::after paints a blurred copy of the rack's template background in the
   box area (+ a soft fade-in over the bottom 28px of the rack), so those corners match the photo above.
   The box colour itself is NOT changed.
   Tune with: --mr-dl-blur (default 14px) and --mr-dl-back-dim (brightness, default .92). */
.mrw-dl-bottom .mrw::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(100% - 28px);
  left: -28px;
  right: -28px;
  height: calc(var(--mr-dl-h, 210px) + 56px);
  pointer-events: none;
  background-image: var(--mr-template-bg, none);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: blur(var(--mr-dl-blur, 14px)) brightness(var(--mr-dl-back-dim, .92)) saturate(1.1);
  /* cut the blur bleed on the sides / bottom; the top edge is faded into the rack photo */
  clip-path: inset(0 28px 28px 28px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
  opacity: 0;
  transition: opacity .45s var(--mr-ease);
}

.mrw-dl-bottom .mrw.is-detail::after {
  opacity: 1;
  transition-delay: .1s;
}

@media (max-width: 767px) {
  .mrw-dl-bottom .mrw::after {
    background-image: var(--mr-template-bg-mobile, var(--mr-template-bg, none));
  }

  /* phones-only template: same backdrop, only on phones */
  .mrw-dl-bottom_mobile .mrw::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(100% - 28px);
    left: -28px;
    right: -28px;
    height: calc(var(--mr-dl-h, 210px) + 56px);
    pointer-events: none;
    background-image: var(--mr-template-bg-mobile, var(--mr-template-bg, none));
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    filter: blur(var(--mr-dl-blur, 14px)) brightness(var(--mr-dl-back-dim, .92)) saturate(1.1);
    clip-path: inset(0 28px 28px 28px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
    opacity: 0;
    transition: opacity .45s var(--mr-ease);
  }

  .mrw-dl-bottom_mobile .mrw.is-detail::after {
    opacity: 1;
    transition-delay: .1s;
  }
}


/* ===== manual X / Y offsets (Elementor «جایگاه» controls of the template) =====
   Written as variables by the dl_pos_* controls; `translate` is used so the layout of the box is not affected. */
.mrw-dl-bottom .mrw-info .mrw-count {
  translate: var(--mr-dl-px-count, 0px) var(--mr-dl-py-count, 0px);
}

.mrw-dl-bottom .mrw-info .mrw-title {
  translate: var(--mr-dl-px-title, 0px) var(--mr-dl-py-title, 0px);
}

.mrw-dl-bottom .mrw-info .mrw-price {
  translate: var(--mr-dl-px-price, 0px) var(--mr-dl-py-price, 0px);
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-details-btn {
  translate: var(--mr-dl-px-details, 0px) var(--mr-dl-py-details, 0px);
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add {
  translate: var(--mr-dl-px-add, 0px) var(--mr-dl-py-add, 0px);
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-qty {
  translate: var(--mr-dl-px-qty, 0px) var(--mr-dl-py-qty, 0px);
}

@media (max-width: 767px) {
  .mrw-dl-bottom_mobile .mrw-info .mrw-count {
    translate: var(--mr-dl-px-count, 0px) var(--mr-dl-py-count, 0px);
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-title {
    translate: var(--mr-dl-px-title, 0px) var(--mr-dl-py-title, 0px);
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-price {
    translate: var(--mr-dl-px-price, 0px) var(--mr-dl-py-price, 0px);
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-details-btn {
    translate: var(--mr-dl-px-details, 0px) var(--mr-dl-py-details, 0px);
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-add {
    translate: var(--mr-dl-px-add, 0px) var(--mr-dl-py-add, 0px);
  }

  .mrw-dl-bottom_mobile .mrw-info .mrw-actions .mrw-qty {
    translate: var(--mr-dl-px-qty, 0px) var(--mr-dl-py-qty, 0px);
  }

}


/* ===== twins of the default options (same options, separate values) =====
   .mrw-dl-bottom = template on every device, .mrw-dl-m = phones-only template while the viewport is <= 767px
   (the class is toggled on the widget wrapper by detail-layout.js).
   The Elementor controls of the default layout are scoped to «template NOT active»; the dl_* twins to «template active».
   The rules below only handle the options that change the markup (quantity box, button icons, details button). */

/* ---- quantity box: shown when the template's own switch is on, whatever the default layout says ---- */
.mrw-dl-bottom .mrw .mrw-qty.mrw-qty--off-d:not([hidden]),
.mrw-dl-m .mrw .mrw-qty.mrw-qty--off-d:not([hidden]) {
  display: inline-flex;
}

.mrw-dl-bottom .mrw .mrw-qty.mrw-qty--off-t,
.mrw-dl-m .mrw .mrw-qty.mrw-qty--off-t {
  display: none !important;
}

/* ---- add-to-cart icon: the template prints its own icon span (--t); the default one (--d) is hidden here ---- */
.mrw-dl-bottom .mrw .mrw-add .mrw-add__ico--d,
.mrw-dl-m .mrw .mrw-add .mrw-add__ico--d {
  display: none !important;
}

.mrw-dl-bottom .mrw .mrw-add:not(.is-busy) .mrw-add__ico--t,
.mrw-dl-m .mrw .mrw-add:not(.is-busy) .mrw-add__ico--t {
  display: inline-flex;
}

/* "icon only" of the default layout must not hide the text inside the template ... */
.mrw-dl-bottom .mrw .mrw-add--icon-only:not(.mrw-add--t-icon-only) .mrw-add__txt,
.mrw-dl-m .mrw .mrw-add--icon-only:not(.mrw-add--t-icon-only) .mrw-add__txt {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
}

/* ... the template has its own switch */
.mrw-dl-bottom .mrw .mrw-add--t-icon-only .mrw-add__txt,
.mrw-dl-m .mrw .mrw-add--t-icon-only .mrw-add__txt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mrw-dl-bottom .mrw .mrw-add--t-icon-only.is-done .mrw-add__ico--t,
.mrw-dl-m .mrw .mrw-add--t-icon-only.is-done .mrw-add__ico--t {
  display: none;
}

.mrw-dl-bottom .mrw .mrw-info .mrw-actions .mrw-add--t-icon-only.is-done::before,
.mrw-dl-m .mrw .mrw-info .mrw-actions .mrw-add--t-icon-only.is-done::before {
  display: inline-block !important;
  content: "\2713";
  font-size: 18px;
  line-height: 1;
}

/* ---- details button: own icon span + own "icon only on phones / icon beside the text on desktop" switches ---- */
.mrw-dl-bottom .mrw .mrw-details-btn .mrw-details-btn__ico--d,
.mrw-dl-m .mrw .mrw-details-btn .mrw-details-btn__ico--d {
  display: none;
}

.mrw-dl-bottom .mrw .mrw-details-btn .mrw-details-btn__txt,
.mrw-dl-m .mrw .mrw-details-btn .mrw-details-btn__txt {
  display: inline;
}

.mrw-dl-bottom .mrw .mrw-details-btn--t-icon-d .mrw-details-btn__ico--t,
.mrw-dl-m .mrw .mrw-details-btn--t-icon-d .mrw-details-btn__ico--t {
  display: inline-flex;
}

@media (max-width: 767px) {

  .mrw-dl-bottom .mrw .mrw-details-btn--t-icon-m .mrw-details-btn__txt,
  .mrw-dl-m .mrw .mrw-details-btn--t-icon-m .mrw-details-btn__txt {
    display: none;
  }

  .mrw-dl-bottom .mrw .mrw-details-btn--t-icon-m .mrw-details-btn__ico--t,
  .mrw-dl-m .mrw .mrw-details-btn--t-icon-m .mrw-details-btn__ico--t {
    display: inline-flex;
  }
}

/* ===== template controls wired to the CSS (sizes, icon, colours of the details button) =====
   Everything below uses the --mr-dl-* variables written by the «قالب» controls in Elementor.
   `.mrw-dl-m` = phones-only template while the viewport is <= 767px (class set by detail-layout.js), so no media query is needed.
   The fallbacks are the original fixed values of the design. */

/* ---- add-to-cart button ---- */
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add,
.mrw-dl-m .mrw-info .mrw-actions .mrw-add {
  box-sizing: border-box;
  height: var(--mr-dl-add-h, 54px);
  min-height: var(--mr-dl-add-h, 54px);
  padding-block: 0;
  padding-inline: var(--mr-dl-add-px, 10px);
  gap: var(--mr-dl-add-gap, 8px);
  border-radius: var(--mr-dl-add-radius, 18px);
}

/* built-in bag icon: size + "no icon" switch */
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add:not(.mrw-add--t-has-ico)::before,
.mrw-dl-m .mrw-info .mrw-actions .mrw-add:not(.mrw-add--t-has-ico)::before {
  width: var(--mr-dl-add-ico, 24px);
  height: var(--mr-dl-add-ico, 24px);
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-add.mrw-add--t-no-ico::before,
.mrw-dl-m .mrw-info .mrw-actions .mrw-add.mrw-add--t-no-ico::before {
  display: none !important;
}

/* custom (Elementor) icon of the template */
.mrw-dl-bottom .mrw .mrw-add .mrw-add__ico--t svg,
.mrw-dl-bottom .mrw .mrw-add .mrw-add__ico--t i,
.mrw-dl-m .mrw .mrw-add .mrw-add__ico--t svg,
.mrw-dl-m .mrw .mrw-add .mrw-add__ico--t i {
  width: var(--mr-dl-add-ico, 24px);
  height: var(--mr-dl-add-ico, 24px);
  font-size: var(--mr-dl-add-ico, 24px);
}

/* ---- quantity box ---- */
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-qty,
.mrw-dl-m .mrw-info .mrw-actions .mrw-qty {
  box-sizing: border-box;
  height: var(--mr-dl-qty-h, 54px);
  min-height: var(--mr-dl-qty-h, 54px);
  border-width: var(--mr-dl-qty-bw, 1px);
  border-radius: var(--mr-dl-qty-radius, 18px);
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-qty .mrw-qty__btn,
.mrw-dl-m .mrw-info .mrw-actions .mrw-qty .mrw-qty__btn {
  width: var(--mr-dl-qty-btn, 32px);
  height: var(--mr-dl-qty-btn, 36px);
}

/* ---- details button ---- */
.mrw-dl-bottom .mrw-info .mrw-actions .mrw-details-btn,
.mrw-dl-m .mrw-info .mrw-actions .mrw-details-btn {
  min-width: var(--mr-dl-details-h, 54px);
  min-height: var(--mr-dl-details-h, 54px);
  border-radius: var(--mr-dl-details-radius, 18px);
  color: var(--mr-dl-details-color, var(--mr-text));
  background: var(--mr-dl-details-bg, color-mix(in srgb, var(--mr-sheet-bg) 60%, transparent));
  border-color: var(--mr-dl-details-border, currentColor);
}

.mrw-dl-bottom .mrw-info .mrw-actions .mrw-details-btn:hover,
.mrw-dl-m .mrw-info .mrw-actions .mrw-details-btn:hover {
  color: var(--mr-dl-details-hover-color, var(--mr-sheet-bg));
  background: var(--mr-dl-details-hover-bg, var(--mr-text));
}

/* ---- price pill ---- */
.mrw-dl-bottom .mrw-info .mrw-price ins,
.mrw-dl-bottom .mrw-info .mrw-price>.amount,
.mrw-dl-bottom .mrw-info .mrw-price>.woocommerce-Price-amount,
.mrw-dl-m .mrw-info .mrw-price ins,
.mrw-dl-m .mrw-info .mrw-price>.amount,
.mrw-dl-m .mrw-info .mrw-price>.woocommerce-Price-amount {
  padding: var(--mr-dl-price-py, 5px) var(--mr-dl-price-px, 18px);
  border-radius: var(--mr-dl-price-radius, 30px);
}

/* ---- the short description / discount badge are created for the phones-only template too: hide them on desktop / tablet ---- */
@media (min-width: 768px) {

  .mrw-dl-bottom_mobile .mrw-dl-desc,
  .mrw-dl-bottom_mobile .mrw-dl-badge {
    display: none !important;
  }
}


/* ===== Floating: short description + discount badge (same extras as the box template) ===== */
.mrw-dl-default .mrw-info .mrw-dl-desc {
  max-width: min(640px, 92%);
  margin: 0 auto 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mr-muted);
  text-align: center;
}

.mrw-dl-default .mrw-info .mrw-dl-desc:empty {
  display: none;
}

.mrw-dl-default .mrw-info .mrw-price .mrw-dl-badge {
  display: inline-block;
  margin-inline-start: .5em;
  padding: 2px 9px;
  border-radius: 10px;
  background: #fde3e6;
  color: #e0394a;
  font-size: .8em;
  font-weight: 800;
  line-height: 1.4;
  direction: ltr;
  vertical-align: middle;
}

/* Floating: قیمت قبل از تخفیف (خط‌خورده) */
.mrw-dl-default .mrw-info .mrw-price {
  position: relative;
}

.mrw-dl-default .mrw-info .mrw-price del {
  position: absolute;
  top: 35px;
}


/* ===== «پیش‌فرض» template: slide dots instead of the "01 / 05" counter (child of .mrw-stage, so it never moves with the box) ===== */
.mrw-dl-bottom .mrw-info .mrw-count {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mrw-dl-bottom .mrw-stage>.mrw-dl-dots {
  position: absolute;
  z-index: 5;
  bottom: 12px;
  left: 50%;
  translate: calc(-50% + var(--mr-dl-px-count, 0px)) var(--mr-dl-py-count, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mr-dl-dot-gap, 8px);
  max-width: 92%;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--mr-dl-dots-bg, rgba(0, 0, 0, .38));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  direction: ltr;
}

.mrw-dl-bottom .mrw-stage>.mrw-dl-dots[hidden] {
  display: none;
}

.mrw-dl-bottom .mrw-stage>.mrw-dl-dots span {
  flex: none;
  box-sizing: border-box;
  width: var(--mr-dl-dot-size, 14px);
  height: var(--mr-dl-dot-size, 14px);
  border-radius: 50%;
  background: var(--mr-dl-dot, #d9d9d9);
  border: var(--mr-dl-dot-ring, 2px) solid var(--mr-dl-dot-ring-color, #ffffff);
  transition: width .25s, height .25s, background-color .25s;
}

.mrw-dl-bottom .mrw-stage>.mrw-dl-dots span.is-active {
  width: var(--mr-dl-dot-active-size, 20px);
  height: var(--mr-dl-dot-active-size, 20px);
  background: var(--mr-dl-dot-active, #f4b12e);
  border-color: var(--mr-dl-dot-active, #f4b12e);
}

/* Floating keeps the plain text counter */
.mrw-dl-default .mrw-stage>.mrw-dl-dots {
  display: none !important;
}

/* ===== «پیش‌فرض» template, DESKTOP (>= 1025px): the box becomes a card docked to the right of the shirt =====
   Tune with: --mr-dl-side-w (card width, default 340px), --mr-dl-side-gap (gap to the shirt, default 28px) */
@media (min-width: 1025px) {

  /* the rack keeps its size: nothing hangs below it, nothing is pushed down / clipped */
  .mrw-dl-bottom .mrw {
    overflow: hidden !important;
    clip-path: none !important;
  }

  .mrw-dl-bottom .mrw.is-detail {
    margin-bottom: 0 !important;
  }

  .mrw-dl-bottom .mrw::after {
    display: none !important;
  }

  .mrw-dl-bottom .mrw .mrw-info {
    top: 50% !important;
    bottom: auto !important;
    left: calc(50% + var(--mr-u, 300px) * .5 + var(--mr-dl-side-gap, 28px)) !important;
    right: auto !important;
    translate: 0 -50%;
    width: clamp(240px, var(--mr-dl-side-w, 340px), calc(50% - var(--mr-u, 300px) * .5 - var(--mr-dl-side-gap, 28px) - 16px)) !important;
    height: auto !important;
    padding: 28px 22px 22px !important;
    border-radius: var(--mr-dl-radius, 28px) !important;
    box-shadow: 0 18px 50px rgba(60, 40, 10, .22);
  }

  .mrw-dl-bottom .mrw .mrw-info::before {
    display: none !important;
  }

  /* slide dots stay right under the shirt */
  .mrw-dl-bottom .mrw-stage>.mrw-dl-dots {
    bottom: auto;
    top: min(var(--mr-under-y, 70%), calc(100% - 44px));
  }
}