/* Desktop keeps the existing product cards. All overrides below are mobile-only. */
.wdch-mobile-product { display: none; }

@media (max-width: 767.98px) {
  .product-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }

  .product-item > .wdch-desktop-product { display: none !important; }

  .product-item > .wdch-mobile-product {
    --wdch-mc-bg: #fff;
    --wdch-mc-color: #182334;
    --wdch-mc-muted: #536174;
    --wdch-mc-border: #dde3ec;
    --wdch-mc-cover-bg: #f1f4f8;
    --wdch-mc-accent: #2457c5;
    --wdch-mc-auto-bg: #e6f6ed;
    --wdch-mc-auto-color: #17633b;
    --wdch-mc-manual-bg: #eaf1ff;
    --wdch-mc-manual-color: #2457a9;
    --wdch-mc-soldout-bg: #fff0f0;
    --wdch-mc-soldout-color: #a32132;
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--wdch-mc-border);
    border-radius: 14px;
    background: var(--wdch-mc-bg);
    color: var(--wdch-mc-color);
    line-height: 1.5;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  [data-bs-theme="dark"] .product-item > .wdch-mobile-product {
    --wdch-mc-bg: #222936;
    --wdch-mc-color: #f0f3f8;
    --wdch-mc-muted: #b6c1d0;
    --wdch-mc-border: #3c4656;
    --wdch-mc-cover-bg: #18212d;
    --wdch-mc-accent: #a9cbff;
    --wdch-mc-auto-bg: #183e30;
    --wdch-mc-auto-color: #a3e5bc;
    --wdch-mc-manual-bg: #203957;
    --wdch-mc-manual-color: #b4d3ff;
    --wdch-mc-soldout-bg: #4d2630;
    --wdch-mc-soldout-color: #ffc1c8;
  }

  .wdch-mobile-product .wdch-mc-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    min-height: 68px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: var(--wdch-mc-cover-bg);
  }

  .wdch-mobile-product .wdch-mc-cover > img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  .wdch-mobile-product .wdch-mc-body { min-width: 0; }

  .wdch-mobile-product .wdch-mc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
  }

  .wdch-mobile-product .wdch-mc-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
  }

  .wdch-mobile-product .wdch-mc-label.is-auto {
    background: var(--wdch-mc-auto-bg);
    color: var(--wdch-mc-auto-color);
  }
  .wdch-mobile-product .wdch-mc-label.is-manual {
    background: var(--wdch-mc-manual-bg);
    color: var(--wdch-mc-manual-color);
  }
  .wdch-mobile-product .wdch-mc-label.is-soldout {
    background: var(--wdch-mc-soldout-bg);
    color: var(--wdch-mc-soldout-color);
  }

  .wdch-mobile-product .wdch-mc-title,
  .wdch-mobile-product .wdch-mc-ip-name {
    display: block;
    min-height: 44px;
    margin: 0;
    color: var(--wdch-mc-color);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.5;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .wdch-mobile-product .wdch-mc-ip-name { min-height: 0; }

  .wdch-mobile-product.wdch-mc-enhanced:not(.wdch-mc-expanded) .wdch-mc-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .wdch-mobile-product .wdch-mc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    max-width: 100%;
    margin: 0;
    padding: 5px 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--wdch-mc-accent);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    text-align: left;
    white-space: normal;
  }
  .wdch-mobile-product .wdch-mc-toggle[hidden] { display: none !important; }

  .wdch-mobile-product .wdch-mc-facts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px 8px;
    margin: 7px 0 0;
    padding: 0;
    color: var(--wdch-mc-muted);
    font-size: 13px;
    line-height: 1.6;
    list-style: none;
  }
  .wdch-mobile-product .wdch-mc-facts > li {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }
  .wdch-mobile-product .wdch-mc-title-facts { display: none; }
  .wdch-mobile-product.wdch-mc-title-is-long:not(.wdch-mc-expanded) .wdch-mc-title-facts { display: flex; }

  .wdch-mobile-product .wdch-mc-rates {
    display: grid;
    gap: 4px;
    margin-top: 9px;
    font-size: 13px;
  }
  .wdch-mobile-product .wdch-mc-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1px 9px;
    min-width: 0;
  }
  .wdch-mobile-product .wdch-mc-protocol { color: var(--wdch-mc-muted); }
  .wdch-mobile-product .wdch-mc-price {
    min-width: 0;
    color: var(--wdch-mc-color);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
  }
  .wdch-mobile-product .wdch-mc-rate .wdch-mc-price { font-size: 15px; }
  .wdch-mobile-product .wdch-mc-price small {
    color: var(--wdch-mc-muted);
    font-size: 12px;
    font-weight: 400;
  }
  .wdch-mobile-product .wdch-mc-price del {
    display: inline-block;
    margin-left: 4px;
    color: var(--wdch-mc-muted);
    font-size: 12px;
    font-weight: 400;
  }
  .wdch-mobile-product .wdch-mc-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--wdch-mc-border);
  }
  .wdch-mobile-product .wdch-mc-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    min-height: 44px;
    padding: 4px 0;
    color: var(--wdch-mc-accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
  }
  .wdch-mobile-product .wdch-mc-note {
    margin: 6px 0 0;
    color: var(--wdch-mc-muted);
    font-size: 12px;
    line-height: 1.6;
  }
  .wdch-mobile-product .wdch-mc-original-name {
    margin-top: 3px;
    color: var(--wdch-mc-muted);
    font-size: 12px;
    line-height: 1.6;
    max-width: 100%;
    min-width: 0;
  }
  .wdch-mobile-product .wdch-mc-bottom > .wdch-mc-original-name { margin: 0; }
  .wdch-mobile-product .wdch-mc-bottom > .wdch-mc-original-name[open] { flex-basis: 100%; }
  .wdch-mobile-product .wdch-mc-original-name > summary {
    display: list-item;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    padding: 12px 0 8px;
    color: var(--wdch-mc-accent);
    cursor: pointer;
  }
  .wdch-mobile-product .wdch-mc-original-name > :not(summary) { margin: 0 0 5px; }
  .wdch-mobile-product a:focus-visible,
  .wdch-mobile-product button:focus-visible,
  .wdch-mobile-product summary:focus-visible {
    outline: 2px solid var(--wdch-mc-accent);
    outline-offset: 3px;
  }
}

@media (max-width: 359.98px) {
  .product-item > .wdch-mobile-product {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .wdch-mobile-product .wdch-mc-cover { width: 56px; min-height: 56px; }
}