/*
 * Batch 3 layout styles: features_list, counters, video_layout, links_layout,
 * sizes_layout and history_layout were fully rewritten with Tailwind
 * utilities directly in their markup (see template-parts/flexible/layouts/)
 * and no longer need dedicated rules here — the only exception is the
 * sizes_layout availability badge below, kept for the reason noted there.
 *
 * tabbed_boxes and accordion_layout keep the .tabs/.tabs-nav/.tab-panel and
 * .accordion-item/.accordion-toggle/.accordion-panel primitives — structural
 * mechanics + JS wiring live in flexible-base.css/flexible.js and are shared
 * with other, not-yet-modernized layouts (e.g. faq_layout), so those stay
 * untouched. These rules only re-skin the *cosmetic* look of the two
 * primitives, scoped under .flex-tabbed_boxes / .flex-accordion_layout so
 * nothing else reusing the same primitives is affected. They're plain,
 * unlayered CSS (same origin as flexible-base.css) with higher specificity
 * than the shared defaults — and, importantly, higher priority than any
 * Tailwind utility class too, since Tailwind's utilities live inside
 * `layer(utilities)` in src/tailwind.css and unlayered rules always beat
 * layered ones regardless of specificity. That's why this stays hand-written
 * CSS (using the same var(--color-*) tokens as everywhere else) rather than
 * Tailwind classes on the button/panel elements themselves.
 */

/* ----------------------------------------------------------------------
 * Tabbed Boxes
 * -------------------------------------------------------------------- */
.flex-tabbed_boxes .tabs-nav {
  margin-bottom: 32px;
}

.flex-tabbed_boxes .tabs-nav button {
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.flex-tabbed_boxes .tabs-nav button:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.flex-tabbed_boxes .tabs-nav button.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.flex-tabbed_boxes .tab-panel {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.8;
  padding-top: 8px;
}

@media (min-width: 640px) {
  .flex-tabbed_boxes .tab-panel {
    font-size: 1.05rem;
  }
}

.flex-tabbed_boxes .tab-panel p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------
 * Collapsible Content (accordion)
 * -------------------------------------------------------------------- */
.flex-accordion_layout .accordion {
  max-width: 860px;
  margin: 0 auto;
}

.flex-accordion_layout .accordion-toggle {
  padding: 24px 4px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: color 0.2s ease;
}

.flex-accordion_layout .accordion-toggle:hover {
  color: var(--color-primary);
}

.flex-accordion_layout .accordion-toggle::after {
  content: "+";
  color: var(--color-primary);
  font-size: 1.6rem;
}

.flex-accordion_layout .accordion-item.is-open .accordion-toggle {
  color: var(--color-primary);
}

.flex-accordion_layout .accordion-panel-inner {
  padding-bottom: 24px;
  padding-right: 32px;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.8;
}

.flex-accordion_layout .accordion-panel-inner p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------
 * Icons Grid — carousel mode only. Non-carousel grid mode is plain
 * Tailwind now; the horizontal scroll-snap carousel still needs each
 * item pinned to a fixed width, which is structural, not cosmetic.
 * -------------------------------------------------------------------- */
.flex-icons_layout .carousel-track > .icon-item {
  width: 220px;
  flex: 0 0 220px;
}

/* ----------------------------------------------------------------------
 * Sizes — availability status badge only. Kept under its original
 * classnames (size-item-status / status-in-stock / status-last-few /
 * status-sold-out) because flexible-base.css brightens these specific
 * selectors for legibility on dark-bg sections; changing the classnames
 * would silently break that existing dark-mode fix.
 * -------------------------------------------------------------------- */
.flex-sizes_layout .size-item-status {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #ffffff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.flex-sizes_layout .size-item-status.status-in-stock {
  color: #0a7d3c;
  border-color: rgba(10, 125, 60, 0.3);
  background: rgba(10, 125, 60, 0.08);
}

.flex-sizes_layout .size-item-status.status-last-few {
  color: #b56a00;
  border-color: rgba(181, 106, 0, 0.3);
  background: rgba(181, 106, 0, 0.08);
}

.flex-sizes_layout .size-item-status.status-sold-out {
  color: #b3261e;
  border-color: rgba(179, 38, 30, 0.3);
  background: rgba(179, 38, 30, 0.08);
}