/* ==========================================================================
   Product info sections (inc/product-sections.php)
   --------------------------------------------------------------------------
   Replaces the tab strip with open, stacked sections. The panels keep their
   `.panel` class, so every existing rule in woocommerce.css (spec table, media
   clamping, typography) still applies — only the framing is new.
   ========================================================================== */

/* ⚠️ LOAD-BEARING — do not remove.
   WooCommerce's own single-product JS runs `$('div.woocommerce-tabs').find('.wc-tab,
   .panel:not(.panel .panel)').hide()` on load and then re-shows only the tab whose
   link was clicked. We keep the `.woocommerce-tabs` wrapper because the theme's
   spec-table / media / grid-placement rules are scoped to it — but with no tab
   links to click, that script left every section EMPTY on the live site.
   The inline `style="display:none"` it writes can only be beaten by !important.
   DIRECT children only: a panel nested inside a collapsed <details> (the empty
   reviews form) must stay collapsed, and a blanket !important would force it open.
   ⚠️ This comment used to close TWICE. The second closer ended a comment that was
   already closed, so the parser treated the two comment lines plus the selector
   below as one malformed rule and threw the whole thing away — the load-bearing
   safety net added in the v1.2.53 emergency ("APPI VAATA RUTTU", every product
   section rendering EMPTY on the live site) has been switched off ever since,
   silently. Nothing broke yet only because WooCommerce's tab script had nothing to
   click. The next WC update or any plugin that adds tab links would have blanked
   the descriptions again with no warning. Found by the 2026-08-12 live audit. */
.ostu-psec-wrap > .ostu-psec > .panel,
.ostu-psec-wrap > .ostu-psec > .ostu-psec__body { display: block !important; }

/* Buy-box signpost: tells the shopper at the price that a full spec sheet
   exists further down (rendered by inc/single-product.php key specs). */
.ostu-keyspecs__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  color: var(--green); font-size: 13.5px; font-weight: 700;
  text-decoration: none; border-bottom: 1px solid rgba(4, 120, 87, .3);
  transition: color .16s ease, border-color .16s ease;
}
.ostu-keyspecs__more:hover { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.ostu-keyspecs__more:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-bottom-color: transparent; }

/* Quick links: what's below, at a glance. */
.ostu-psec-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 0 18px; margin: 0 0 4px;
  border-bottom: 1px solid var(--border);
}
.ostu-psec-nav__link {
  display: inline-flex; align-items: center;
  padding: 9px 18px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--slate-600);
  font-family: var(--font-display, 'Space Grotesk'), sans-serif;
  font-size: 13.5px; font-weight: 600; line-height: 1; text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.ostu-psec-nav__link:hover,
.ostu-psec-nav__link:focus-visible {
  background: var(--slate-dark); border-color: var(--slate-dark); color: #fff; transform: translateY(-1px);
}
.ostu-psec-nav__link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Section shell. scroll-margin keeps the sticky header off the heading when a
   quick link jumps here. */
.ostu-psec {
  padding-block: 34px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 96px;
}
.ostu-psec:first-of-type { border-top: 0; }

/* Heading with a small brand accent bar — reads as a real section, not a tab. */
.ostu-psec__title {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-display, 'Space Grotesk'), sans-serif;
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.2;
  color: var(--slate-dark); letter-spacing: -.01em;
}
.ostu-psec__title::before {
  content: ""; flex: none;
  width: 5px; height: 1.05em; border-radius: 999px;
  background: linear-gradient(180deg, var(--green-bright, #34d399), var(--green, #047857));
}

/* Headings INSIDE a section body (the owner writes several per description:
   "Tootekirjeldus", "Peamised omadused", "Tehnilised andmed", "Komplekt sisaldab").
   woocommerce.css:610 sizes them at 22px with zero top margin — a rule from when a
   tab held exactly one heading. Stacked, that turned the description into a wall of
   text with no rhythm, and the first sub-heading collided with our section title.
   Scoped here so the tabs fallback (toggle off) keeps its original styling. */
.ostu-psec__body :is(h1, h2, h3, h4) {
  font-family: var(--font-display, 'Space Grotesk'), sans-serif;
  font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: 0;
  color: var(--slate-dark); margin: 30px 0 10px;
}
.ostu-psec__body > :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.ostu-psec__body p { margin: 0 0 12px; }
.ostu-psec__body ul, .ostu-psec__body ol { margin: 0 0 16px; }
.ostu-psec__body > *:last-child { margin-bottom: 0; }

.ostu-psec__note {
  margin: -8px 0 18px; padding-left: 17px;
  color: var(--slate-500); font-size: 14.5px; line-height: 1.6;
}

/* The reviews template prints its own "Arvustused" title — ours already says it. */
.ostu-psec--reviews .woocommerce-Reviews-title { display: none; }

/* Collapsed "write the first review" — one quiet line until the shopper opts in. */
.ostu-psec__collapse-head {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 2px; cursor: pointer; list-style: none;
  font-family: var(--font-display, 'Space Grotesk'), sans-serif;
  font-size: 14.5px; font-weight: 600; color: var(--green);
}
.ostu-psec__collapse-head::-webkit-details-marker { display: none; }
.ostu-psec__collapse-head::before {
  content: "+"; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--muted); color: var(--green-dark); font-weight: 700; line-height: 1;
}
.ostu-psec__collapse[open] > .ostu-psec__collapse-head::before { content: "−"; }
.ostu-psec__collapse-head:hover { color: var(--green-dark); }
.ostu-psec__collapse-head:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 8px; }
.ostu-psec__collapse > .ostu-psec__body { padding-top: 14px; }

/* Spec sheet: the whole point of the change is that this is READ, so give the
   table room and make rows easy to scan. (Base table styling stays in
   woocommerce.css — this only tunes it inside a section.) */
.ostu-psec--additional_information .panel table.shop_attributes tr:nth-child(even) th,
.ostu-psec--additional_information .panel table.shop_attributes tr:nth-child(even) td { background: #fbfdfe; }
.ostu-psec--additional_information .panel table.shop_attributes th { background: var(--muted); }

@media (max-width: 768px) {
  .ostu-psec { padding-block: 26px; scroll-margin-top: 78px; }
  .ostu-psec__title { margin-bottom: 14px; }
  .ostu-psec-nav { gap: 7px; padding-bottom: 14px; }
  /* 44px minimum tap target — these measured 31px on a 375px phone. */
  .ostu-psec-nav__link { padding: 13px 16px; font-size: 12.5px; }
  .ostu-keyspecs__more { min-height: 44px; }
  /* Phones: a 2-column spec table with labels like "Toote suurus (kokkupanduna,
     ilma voolikuta)" and values like "48.82 x 7.67 x 1240 x 195 x 45 mm" wraps to
     three or four lines in each narrow cell. Stack label over value instead —
     every row stays on one readable block, no horizontal scroll. */
  .ostu-psec--additional_information .panel table.shop_attributes,
  .ostu-psec--additional_information .panel table.shop_attributes tbody,
  .ostu-psec--additional_information .panel table.shop_attributes tr,
  .ostu-psec--additional_information .panel table.shop_attributes th,
  .ostu-psec--additional_information .panel table.shop_attributes td { display: block; width: auto; }
  .ostu-psec--additional_information .panel table.shop_attributes tr { border-top: 1px solid var(--border); padding: 10px 14px; }
  .ostu-psec--additional_information .panel table.shop_attributes tr:first-child { border-top: 0; }
  .ostu-psec--additional_information .panel table.shop_attributes th {
    background: none; padding: 0; border: 0;
    font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--slate-500);
  }
  .ostu-psec--additional_information .panel table.shop_attributes td {
    padding: 2px 0 0; border: 0; font-size: 14.5px; font-weight: 600; color: var(--slate-dark);
  }
  .ostu-psec--additional_information .panel table.shop_attributes tr:nth-child(even) { background: #fbfdfe; }
}

@media (prefers-reduced-motion: reduce) {
  .ostu-psec-nav__link { transition: none; }
  .ostu-psec-nav__link:hover { transform: none; }
}

/* ==========================================================================
   No reviews yet — say it ONCE.
   With zero reviews the page stacked four near-identical lines: the theme's
   "Arvustused" heading, the note under it, the collapsed "Kirjuta esimene
   arvustus" summary, and then — inside the collapse — WooCommerce's own
   "Arvustused" heading and "Tooteülevaateid veel ei ole." again.
   Scoped INSIDE .ostu-psec__collapse on purpose: that wrapper is only printed
   when $review_count is 0, so a product WITH reviews can never lose its
   heading, no matter how this selector is later edited.
   ========================================================================== */
.ostu-psec--reviews .ostu-psec__collapse .woocommerce-Reviews-title,
.ostu-psec--reviews .ostu-psec__collapse .woocommerce-noreviews { display: none; }