/* ============================================================
   DYNAPHARM — TARGETED FIXES (loaded after style.css)
   Mobile cart/checkout, dropdown polish, text-wrap safety.
   ============================================================ */

/* ---- Dropdown caret ---- */
.dd-caret { font-size: .7em; opacity: .8; margin-left: 2px; }

/* ------------------------------------------------------------
   MOBILE CART  — fixes the "letter-by-letter vertical text" bug.
   Root cause: a 6-column <table> squeezed into a phone width, so
   each header/word wrapped one character per line. On small
   screens we drop the table grid and render each row as a clean
   labelled card instead.
   ------------------------------------------------------------ */
@media (max-width: 720px) {

  .cart-layout { grid-template-columns: 1fr !important; gap: 22px !important; }

  /* hide the table header row */
  .cart-table thead { display: none; }

  /* each <tr> becomes a card, each <td> a full-width line */
  .cart-table,
  .cart-table tbody { display: block; width: 100%; }

  .cart-table tr {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
  }

  .cart-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 7px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    /* CRITICAL: never let text collapse to one char per line */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
    text-align: right;
    font-size: .95rem;
  }
  .cart-table tr td:last-child { border-bottom: none; }

  /* label pulled from data-label on each cell */
  .cart-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--green);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    flex-shrink: 0;
  }

  /* image + remove cells: no label, left aligned */
  .cart-cell-img,
  .cart-cell-remove { justify-content: flex-start; }
  .cart-cell-img { width: 100% !important; }
  .cart-cell-img img { width: 84px; height: 84px; }

  .cart-cell-info { flex-wrap: wrap; align-items: baseline; }
  .cart-cell-info .cart-item-title { flex: 1; text-align: right; }
  .cart-cell-info .cart-item-cat { width: 100%; text-align: right; margin-top: 2px; }

  /* keep prices on one line */
  .cart-table td[data-label="Price"] strong,
  .cart-table td[data-label="Price"],
  .cart-table td[data-label="Subtotal"] { white-space: nowrap !important; }

  .cart-qty-input { width: 64px; }
  .cart-remove { font-size: 1.3rem; }

  /* summary stretches full width */
  .cart-summary { position: static !important; }
}

/* ------------------------------------------------------------
   MOBILE CHECKOUT  — single column + full-width fields (safety)
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .checkout-layout { grid-template-columns: 1fr !important; gap: 22px !important; }
  .order-summary-box { position: static !important; }
  .checkout-form-section { padding: 20px 16px !important; }
  .form-control { width: 100% !important; font-size: 16px; } /* 16px stops iOS zoom */
  .order-item { flex-wrap: wrap; }
  .order-item-name,
  .order-item-title { white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------
   GENERAL MOBILE TEXT-WRAP SAFETY
   Stops any heading/cell from breaking one letter per line.
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .page-title,
  h1, h2, h3 { overflow-wrap: break-word; word-break: normal; }
  table:not(.cart-table) { display: block; width: 100%; overflow-x: auto; }
}