.elementor-11301 .elementor-element.elementor-element-7441138{--display:flex;}.elementor-11301 .elementor-element.elementor-element-d69729a{margin:100px 0px calc(var(--kit-widget-spacing, 0px) + 100px) 0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-11301 .elementor-element.elementor-element-7441138{--content-width:80%;}}/* Start custom CSS for shortcode, class: .elementor-element-d69729a *//* ---------- VL Sale Styles (original) ---------- */
.vl-sale-variations-box{border:1px solid #eee; background:#fff; padding:14px; margin:18px 0; border-radius:8px; box-sizing:border-box; }
.vl-sale-box-title{font-family:vazir; color:#00305B; text-align:center; margin:0 0 10px; font-size:18px; }
.vl-sale-grid{ display:grid; gap:12px; align-items:start; grid-auto-rows:1fr; }
.vl-sale-cols-1{ grid-template-columns:1fr; }
.vl-sale-cols-2{ grid-template-columns:repeat(2,1fr); }
.vl-sale-cols-3{ grid-template-columns:repeat(3,1fr); }
.vl-sale-item{ display:flex; gap:12px; align-items:flex-start; border-radius:6px; padding:10px; background:#fbfbfb; height:100%; overflow:hidden; }
.vl-sale-thumb img{ width:90px;height:90px;object-fit:cover;border-radius:6px;display:block; }
.vl-sale-info{ flex:1 1 auto; min-width:0; }
.vl-sale-title{ display:block; font-weight:600; margin-bottom:6px; text-decoration:none; color:inherit; line-height:1.2; word-break:break-word; }
.vl-sale-attrs{ font-size:13px;color:#666;margin-bottom:6px; }
.vl-sale-prices{ font-size:14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.vl-regular-price{ text-decoration:line-through; color:#999; }
.vl-sale-price{ font-weight:700; color:#d9534f; }
.vl-add-link{ margin-top:6px; display:inline-block; flex-shrink:0; }
.vl-add-link.vl-loading{ opacity:0.6; pointer-events:none; }

/* Responsive tweaks for vl-sale box — paste in Additional CSS */

/* base safety (in case قبلی نبود) */
.vl-sale-variations-box { box-sizing: border-box; }
.vl-sale-grid { gap:12px; align-items:start; }

/* ensure items don't force overflow */
.vl-sale-item { min-height: 1px; word-break: break-word; }

/* SMALL TABLETS / LARGE PHONES */
@media (max-width: 900px) {
  .vl-sale-grid.vl-sale-cols-4,
  .vl-sale-grid.vl-sale-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .vl-sale-thumb img { width:72px; height:72px; }
  .vl-sale-title { font-size: 15px; }
  .vl-sale-attrs { font-size: 12px; }
  .vl-sale-prices { font-size: 13px; }
  .vl-add-link { padding:8px 10px; font-size:14px; }
}

/* PHONES */
@media (max-width: 600px) {
  .vl-sale-grid.vl-sale-cols-3,
  .vl-sale-grid.vl-sale-cols-2,
  .vl-sale-grid.vl-sale-cols-4 { grid-template-columns: 1fr; }
  .vl-sale-item {
    display: flex;
    flex-direction: row;
    gap:10px;
    align-items: flex-start;
    padding:10px;
  }
  .vl-sale-thumb { flex: 0 0 72px; }
  .vl-sale-thumb img { width:72px; height:72px; }
  .vl-sale-info { flex:1 1 auto; min-width:0; }
  .vl-sale-title { font-size: 15px; margin-bottom:4px; }
  .vl-sale-attrs { font-size:12px; margin-bottom:6px; color:#666; }
  .vl-sale-prices { font-size:14px; gap:6px; display:flex; align-items:center; flex-wrap:wrap; }
  .vl-regular-price { font-size:13px; }
  .vl-sale-price { font-size:15px; font-weight:700; }

  /* make add button more tappable & aligned right */
  .vl-add-link { display:inline-block; padding:8px 10px; margin-top:6px; white-space:nowrap; }
}

/* VERY SMALL PHONES — stack image on top for narrow screens */
@media (max-width: 380px) {
  .vl-sale-item { flex-direction: column; align-items:center; text-align:center; }
  .vl-sale-thumb { flex: 0 0 auto; margin-bottom:8px; }
  .vl-sale-thumb img { width:84px; height:84px; }
  .vl-sale-info { width:100%; }
  .vl-sale-title { font-size: 16px; }
  .vl-sale-attrs { display:block; margin:6px 0; }
  .vl-sale-prices { justify-content:center; }
  .vl-add-link { width:100%; box-sizing:border-box; display:block; text-align:center; padding:10px 12px; }
}

/* prevent long numbers or text from breaking layout */
.vl-sale-title, .vl-sale-attrs, .vl-sale-prices {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
  min-width: 0;
}

/* visual polish: reduce heavy gaps on small screens */
@media (max-width: 480px) {
  .vl-sale-grid { gap:10px; }
  .vl-sale-item { padding:8px; gap:8px; }
}

/* ---------- ADDED: Mobile horizontal scroll and UX polish ---------- */
/* This kicks in on mobile and turns the grid into a single-row horizontal scroller */
@media (max-width: 768px) {
  /* Make single row flex scroller (overrides grid) */
  .vl-sale-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 8px 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  /* Hide native scrollbar for cleaner UX (still reachable) */
  .vl-sale-grid::-webkit-scrollbar { height: 8px; display: none; }

  /* Each card behaves like a horizontal slide */
  .vl-sale-item {
    flex: 0 0 85%;       /* adjust % to show peek of next card; use 70-95% as needed */
    min-width: 220px;    /* fallback min width */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column; /* stack tighter on mobile cards */
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    box-sizing: border-box;
  }

  /* Ensure thumbnail doesn't push layout; place it at top-left area */
  .vl-sale-thumb { flex: 0 0 auto; align-self: flex-start; }
  .vl-sale-thumb img { width:90px; height:90px; }

  /* Keep info flexible */
  .vl-sale-info { flex: 1 1 auto; }

  /* Make item obviously tappable */
  .vl-sale-item { cursor: pointer; }

  /* Prevent grid column rules from reapplying */
  .vl-sale-cols-1, .vl-sale-cols-2, .vl-sale-cols-3, .vl-sale-cols-4 {
    grid-template-columns: none !important;
  }

  /* Optional subtle card elevation */
  .vl-sale-item { box-shadow: 0 6px 18px rgba(0,0,0,0.06); border-radius: 12px; }

  /* Tappable add button should still look tappable */
  .vl-add-link { align-self: flex-end; }

  /* Avoid accidental text selection while swiping */
  .vl-sale-grid, .vl-sale-item { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
}

/* Optional: tiny UX tweak for very small mobile screens */
@media (max-width:420px) {
  .vl-sale-item { flex: 0 0 92%; min-width: 200px; }
  .vl-sale-thumb img { width:72px; height:72px; }
  .vl-sale-title { font-size:15px; }
}/* End custom CSS */