/**
 * Short Description — Expandable Text Block styles
 * Task: 86ewyqztg
 *
 * Sits between Product Title/Meta and Variant selectors.
 * Collapsed: first ~2 sentences + "View More Details" toggle.
 * Expanded: full text + "View Less" toggle.
 */

/* ── Container (entire block is a clickable button) ── */
.anm-short-desc {
  width: 100%;
  margin: 12px 0 4px;
  box-sizing: border-box;
  background: #f8f7f7;
  padding: 16px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anm-short-desc:focus-visible {
  outline: 2px solid #4a4a4a;
  outline-offset: 2px;
}

/* ── Text content ── */
.anm-short-desc-text {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4a4a4a;
  white-space: normal;
}

.anm-short-desc-text p {
  margin: 0;
}

/* ── Toggle link ── */
.anm-short-desc-toggle {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4a4a4a;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  pointer-events: none; /* container handles the click */
}

/* ── Show / hide toggle text ── */
.anm-toggle-less {
  display: none;
}

.anm-expanded .anm-toggle-more {
  display: none;
}

.anm-expanded .anm-toggle-less {
  display: inline;
}

/* ── Collapsed text (hidden via PHP) ── */
.anm-short-desc-full {
  display: none;
}

.anm-expanded .anm-short-desc-truncated {
  display: none;
}

.anm-expanded .anm-short-desc-full {
  display: block;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .anm-short-desc {
    margin: 8px 0 4px;
    padding: 12px;
  }
}