/* =============================================================
   Nordic-LED · product tabs (Beskrivelse / Spesifikasjoner / …)
   -------------------------------------------------------------
   Targets your ACTUAL custom tab markup (not standard WooCommerce):
     .wc-tabs-nav > button.wc-tab-nav-item[.is-active]
     .wc-tabs-panels > .wc-tab-panel[.is-active]
       > button.wc-tab-accordion-trigger   (mobile only)
       > .wc-tab-panel-inner
   Pairs with nl-tabs.js (toggles .is-active + aria state).
   ============================================================= */

/* ---- Desktop tab bar ---- */
.wc-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: stretch;
  margin: 44px 0 28px;
  padding: 0;
  border-bottom: 1px solid var(--nl-ink-100, #EEF1EF);
}
.wc-tabs-nav .wc-tab-nav-item {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; border-bottom: 2px solid transparent;
  margin: 0 0 -1px; padding: 0 2px 14px;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  color: var(--nl-ink-500, #5E6964);
  cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.wc-tabs-nav .wc-tab-nav-item:hover { color: var(--nl-ink-900, #0C1311); }
.wc-tabs-nav .wc-tab-nav-item.is-active {
  color: var(--nl-green-700, #0B7A3B);
  border-bottom-color: var(--nl-green-600, #0F9047);
}
.wc-tabs-nav .wc-tab-nav-item:focus-visible {
  outline: 2px solid var(--nl-green-600, #0F9047); outline-offset: 3px; border-radius: 3px;
}

/* The Lipscore reviews tab renders with an empty label — give it one.
   (Set the tab title in PHP if you want the live count, e.g. "Anmeldelser (12)".) */
#tab-btn-lipscorereviews { font-size: 0; }
#tab-btn-lipscorereviews::after { content: "Anmeldelser"; font-size: 15px; }

/* ---- Panels ---- */
.wc-tabs-panels { }
.wc-tab-panel:not(.is-active) { display: none; }           /* hide inactive (desktop) */
.wc-tab-accordion-trigger { display: none; }               /* mobile-only control */

/* ---- Panel content typography ---- */
.wc-tab-panel-inner { max-width: 860px; }
.wc-tab-panel-inner > :first-child { margin-top: 0; }
.wc-tab-panel-inner h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 26px 0 12px; }
.wc-tab-panel-inner h3 { font-size: 17px; font-weight: 700; margin: 22px 0 10px; }
.wc-tab-panel-inner p { line-height: 1.7; color: var(--nl-ink-700, #2E3936); margin: 0 0 14px; }
.wc-tab-panel-inner ul { margin: 0 0 16px; padding-left: 20px; }
.wc-tab-panel-inner li { line-height: 1.6; margin: 5px 0; color: var(--nl-ink-700, #2E3936); }
.wc-tab-panel-inner iframe { max-width: 100%; border-radius: 12px; margin: 10px 0; }

/* Spec table (.shop_attributes) — clean striped rows, no heavy borders */
.wc-tab-panel-inner .shop_attributes {
  width: 100%; border-collapse: collapse; margin: 6px 0 8px;
  font-size: 14px; border: 1px solid var(--nl-ink-100, #EEF1EF); border-radius: 12px; overflow: hidden;
}
.wc-tab-panel-inner .shop_attributes th,
.wc-tab-panel-inner .shop_attributes td {
  padding: 12px 16px; text-align: left; vertical-align: top; border: 0;
  border-bottom: 1px solid var(--nl-ink-100, #EEF1EF);
}
.wc-tab-panel-inner .shop_attributes th {
  width: 38%; font-weight: 700; color: var(--nl-ink-900, #0C1311);
  background: var(--nl-ink-50, #F7F9F8);
}
.wc-tab-panel-inner .shop_attributes td { color: var(--nl-ink-700, #2E3936); }
.wc-tab-panel-inner .shop_attributes tr:last-child th,
.wc-tab-panel-inner .shop_attributes tr:last-child td { border-bottom: 0; }

/* =============================================================
   MOBILE — collapse to an accordion (nav hidden, triggers shown)
   ============================================================= */
@media (max-width: 859px) {
  .wc-tabs-nav { display: none; }

  .wc-tab-panel:not(.is-active) { display: block; }   /* every section visible as an accordion row */
  .wc-tab-panel { border-top: 1px solid var(--nl-ink-100, #EEF1EF); }
  .wc-tab-panel:last-child { border-bottom: 1px solid var(--nl-ink-100, #EEF1EF); }

  .wc-tab-accordion-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: 0; cursor: pointer;
    padding: 18px 4px; text-align: left;
    font: inherit; font-size: 16px; font-weight: 700; color: var(--nl-ink-900, #0C1311);
  }
  .wc-tab-accordion-trigger::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--nl-ink-400, #828D88); }
  .wc-tab-accordion-trigger[aria-expanded="true"]::after { content: "\2013"; }

  /* Reuse the empty-label fix for the mobile trigger too */
  [aria-labelledby="tab-btn-lipscorereviews"] .wc-tab-accordion-trigger { font-size: 0; }
  [aria-labelledby="tab-btn-lipscorereviews"] .wc-tab-accordion-trigger::before { content: "Anmeldelser"; font-size: 16px; font-weight: 700; }

  .wc-tab-panel .wc-tab-panel-inner { display: none; padding: 0 4px 18px; }
  .wc-tab-panel.is-active .wc-tab-panel-inner { display: block; }
}