/*
 * Mobile width guard shared by every storefront theme.
 * Theme-specific horizontal scrollers (categories/carousels) remain scrollable,
 * while the document itself never grows wider than the phone viewport.
 */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

body img,
body video,
body iframe,
body canvas {
  max-width: 100%;
}

.header-inner,
.page-wrap,
.products-grid,
.product-card,
.card-body,
.card-footer,
.blue-layout,
.blue-main-content,
.footer-inner,
.footer-top,
.modal-box,
.modal-head,
.modal-body,
.modal-foot,
.price-box,
.shop-custom-grid,
.shop-custom-grid > *,
.se-editable,
.se-editable-inner {
  min-width: 0;
}

.header-inner > *,
.products-grid > *,
.blue-layout > *,
.card-footer > *,
.footer-inner > *,
.footer-top > * {
  min-width: 0;
}

.header-brand-name,
.shop-name-header,
.card-title,
.card-desc,
.card-price,
.card-shipping,
.footer-brand-name,
.promo-text,
.alert-bar {
  overflow-wrap: anywhere;
}

.shop-custom-grid {
  display: grid;
  grid-template-columns: repeat(var(--shop-grid-columns, 4), minmax(0, 1fr));
  gap: 14px;
  overflow-wrap: anywhere;
}

.shop-custom-grid > * {
  overflow: hidden;
}

/* قالب بنفش چند قانون قدیمی هدر دارد؛ هدر دوطبقه جدید باید روی آن‌ها اولویت داشته باشد. */
body.theme-mkt_plum-velvet .site-header.storefront-header {
  height: auto;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
}

body.theme-mkt_plum-velvet .storefront-header .header-top,
body.theme-mkt_plum-velvet .storefront-header .header-nav-row {
  background: #fff;
}

body.theme-mkt_plum-velvet .storefront-header .header-inner {
  width: min(1240px, calc(100% - 32px));
  max-width: 1240px;
  height: auto;
  padding: 0;
}

body.theme-mkt_plum-velvet .storefront-header .header-brand-name {
  color: var(--plum-900);
}

body.theme-mkt_plum-velvet .storefront-header .header-search {
  flex: 0 1 470px;
  max-width: 470px;
  margin-inline: auto;
}

body.theme-mkt_plum-velvet .storefront-header .header-search input {
  height: 48px;
  color: var(--plum-900);
  background: #F5F7FA;
  border-color: transparent;
}

body.theme-mkt_plum-velvet .storefront-header .header-search input::placeholder {
  color: #94A3B8;
}

body.theme-mkt_plum-velvet .storefront-header .header-actions {
  margin-right: 0;
}

body.theme-mkt_digi-red .site-header.dr-storefront-header {
  z-index: 900;
}

@media (max-width: 768px) {
  .header-inner {
    width: 100%;
    padding-inline: 12px;
    gap: 8px;
  }

  .header-brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .header-brand-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    min-width: 0;
    margin-right: 0;
    gap: 6px;
  }

  .header-actions .header-badge-btn {
    min-width: 0;
    max-width: 140px;
    padding-inline: 10px;
    white-space: nowrap;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.theme-blue .products-grid {
    display: flex;
  }

  body.theme-blue .blue-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.theme-blue .product-card {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  body.theme-green .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-custom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-overlay {
    padding: 12px;
  }

  .modal-box {
    width: 100%;
    max-width: 500px;
  }

  .modal-head,
  .modal-body {
    padding-inline: 16px;
  }

  .modal-foot {
    padding-inline: 16px;
  }

  .form-control,
  .sort-bar select {
    min-width: 0;
    max-width: 100%;
  }

  body.theme-mkt_plum-velvet .header-inner {
    width: 100%;
    min-width: 0;
  }

  body.theme-mkt_plum-velvet .shop-logo-wrap {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  body.theme-mkt_plum-velvet .shop-name-header {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.theme-mkt_plum-velvet .header-search {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  body.theme-mkt_plum-velvet .header-actions {
    margin-right: 0;
  }

  body.theme-mkt_plum-velvet .header-cart-btn {
    max-width: 132px;
    padding-inline: 12px;
    white-space: nowrap;
  }

  body.theme-mkt_digi-red .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.theme-mkt_digi-red .card,
  body.theme-mkt_digi-red .card .body,
  body.theme-mkt_digi-red .price-row,
  body.theme-mkt_digi-red .foot-top > * {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .shop-controls-bar {
    align-items: stretch;
    padding: 12px;
  }

  .shop-control-group {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .shop-control-select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .card-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .price-box {
    flex-wrap: wrap;
    gap: 8px;
  }

  .price-box .amount {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .se-bar {
    padding-inline: 10px !important;
    gap: 8px;
  }

  .se-bar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .se-bar-actions {
    flex-shrink: 0;
    gap: 5px !important;
  }

  .se-bar-btn {
    padding-inline: 10px !important;
  }
}

@media (max-width: 380px) {
  .page-wrap,
  body.theme-mkt_plum-velvet .main-container {
    padding-inline: 10px;
  }

  .products-grid {
    gap: 8px !important;
  }

  .card-body,
  body.theme-green .product-card .card-body {
    padding-inline: 10px;
  }

  body.theme-blue .product-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  body.theme-blue .product-card .card-img-wrap {
    width: 76px;
    height: 76px;
  }

  body.theme-mkt_plum-velvet .header-cart-btn {
    padding-inline: 9px;
  }

  body.theme-mkt_digi-red .wrap {
    padding-inline: 10px;
  }
}

@media (max-width: 320px) {
  .products-grid,
  body.theme-green .products-grid,
  body.theme-mkt_plum-velvet .products-grid,
  body.theme-mkt_digi-red .grid,
  .shop-custom-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}