/* ============================================================================
   P2 PRODUCT — accessories tab grid, admin-widget installment chips + delivery
   estimate pill, shipping info folded under the Опис tab.
   "dt" monochrome system. Tokens come from theme.css:
   --accent #111 / --accent-contrast #fff / --radius 12px / --pill 999px /
   --font Jost / --surface #f5f5f5 / --line #e5e5e5.
   Specificity note: base `.dt a{color:inherit}` beats single-class colors, so
   every color rule here is prefixed `.dt .cls`.
   Linked from shop/product.twig (product page only), not from main.twig.
   ========================================================================== */

/* ---- 1) Accessories tab panel: dt-card grid ------------------------------ */
/* .dt-grid / .dt-grid--4 (incl. responsive 4→3→2 columns) come from theme.css;
   only the in-panel spacing lives here. */
.dt .dt-acc-grid {
  margin-top: 4px;
}

/* ---- 2) Installment chips (HTML widget dt_product_installments) ----------
   Design: "Оплата частинами: [ПриватБанк · 4 платежі] [monobank · 4 платежі]".
   The wrapper styles the widget's plain-text label; chips are
   <span class="chip">…</span> inside the widget HTML. */
.dt .dt-instchips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
  color: #555;
}
.dt .dt-instchips .chip {
  display: inline-block;
  background: var(--surface, #f5f5f5);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #555;
  white-space: nowrap;
}
.dt .dt-instchips a.chip {
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.dt .dt-instchips a.chip:hover {
  background: var(--accent, #111);
  color: var(--accent-contrast, #fff);
}

/* ---- 3) Delivery estimate pill (HTML widget dt_product_delivery_estimate) -
   Design: grey rounded pill "Орієнтовна доставка: 22–24 липня" with a truck
   icon. Widget markup: <div class="dt-delivery-pill">(svg?) текст <b>дата</b></div>. */
.dt .dt-delivery-est {
  margin-top: 14px;
}
.dt .dt-delivery-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface, #f5f5f5);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: #444;
  width: fit-content;
  max-width: 100%;
}
.dt .dt-delivery-pill b,
.dt .dt-delivery-pill strong {
  font-weight: 600;
  color: var(--accent, #111);
}
.dt .dt-delivery-pill svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ---- 4) Shipping & payment info folded under the Опис tab ---------------- */
.dt .dt-descr-shipping {
  max-width: 860px;
}
/* separate from the description text above it (only when both render) */
.dt .typo + .dt-descr-shipping {
  margin-top: 24px;
  padding-top: 6px;
  border-top: 1px solid var(--line, #e5e5e5);
}