/* ==========================================================================
   HOCO REDESIGN — 42 PRODUCT TABS + RELATED/UPSELL HEADINGS
   Single product page only. Restyles:
   (a) the tabs area (.woocommerce-tabs / .wc-tabs / .wd-nav-tabs) into a clean
       modern tab bar with brand-purple active underline + rounded content card.
   (b) the related / up-sells section heading with the /test brand accent bar.
   Does NOT touch summary(40), gallery(41), CTA(43), or .product-grid-item(35).
   RTL-safe (logical props), responsive.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   (a) TABS AREA
   --------------------------------------------------------------------------- */
.single-product .woocommerce-tabs,
.single-product .wd-single-tabs{
  margin-block-start:34px;
}

/* --- tab nav bar (desktop) --- */
.single-product .woocommerce-tabs .wd-nav-tabs-wrapper{
  border-block-end:2px solid var(--hoco-line);
  margin-block-end:0;
  text-align:start;                 /* override Woodmart .text-center → left-aligned bar */
}
.single-product .woocommerce-tabs ul.wd-nav-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:flex-start;
  align-items:flex-end;
  margin:0;
  padding:0;
  border:0;
  list-style:none;
}
.single-product .woocommerce-tabs ul.wd-nav-tabs > li{
  margin:0;
  padding:0;
  border:0;
}
/* neutralise Woodmart's own underline-reverse animation line */
.single-product .woocommerce-tabs ul.wd-nav-tabs.wd-style-underline-reverse::before,
.single-product .woocommerce-tabs ul.wd-nav-tabs.wd-style-underline-reverse::after,
.single-product .woocommerce-tabs ul.wd-nav-tabs > li::before,
.single-product .woocommerce-tabs ul.wd-nav-tabs > li::after{
  display:none !important;
}
.single-product .woocommerce-tabs ul.wd-nav-tabs .wd-nav-link{
  position:relative;
  display:block;
  padding:12px 20px;
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  line-height:1.4;
  color:var(--hoco-muted);
  border:0;
  border-radius:var(--hoco-radius-sm) var(--hoco-radius-sm) 0 0;
  transition:color .2s,background .2s;
}
.single-product .woocommerce-tabs ul.wd-nav-tabs .wd-nav-link .wd-tabs-title,
.single-product .woocommerce-tabs ul.wd-nav-tabs .wd-nav-link .nav-link-text{
  color:inherit;
  font-weight:inherit;
}
.single-product .woocommerce-tabs ul.wd-nav-tabs > li:hover .wd-nav-link{
  color:var(--hoco-brand);
  background:rgba(84,4,87,.05);
}
.single-product .woocommerce-tabs ul.wd-nav-tabs > li.active .wd-nav-link{
  color:var(--hoco-brand);
  background:transparent;
}
/* brand-purple active underline (overlaps the 2px baseline rule) */
.single-product .woocommerce-tabs ul.wd-nav-tabs > li.active .wd-nav-link::after{
  content:"";
  display:block !important;
  position:absolute;
  inset-inline:14px;
  inset-block-end:-2px;
  height:3px;
  background:var(--hoco-brand);
  border-radius:3px 3px 0 0;
}

/* --- tab content panel → rounded card --- */
.single-product .woocommerce-tabs .wc-tab,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel,
.single-product .woocommerce-tabs .entry-content{
  background:var(--hoco-surface);
  border:1px solid var(--hoco-line);
  border-block-start:0;
  border-radius:0 0 var(--hoco-radius) var(--hoco-radius);
  padding:26px 28px;
  color:var(--hoco-ink);
  line-height:1.9;
  box-shadow:var(--hoco-shadow);
}
.single-product .woocommerce-tabs .wc-tab-inner > *:first-child,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > *:first-child{
  margin-block-start:0;
}
.single-product .woocommerce-tabs .wc-tab-inner > *:last-child,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > *:last-child{
  margin-block-end:0;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3{
  font-size:19px;
  font-weight:800;
  color:var(--hoco-ink);
  margin-block:0 14px;
}
/* additional-info spec table inside a panel */
.single-product .woocommerce-tabs table.shop_attributes,
.single-product .woocommerce-tabs table.woocommerce-product-attributes{
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius-sm);
  overflow:hidden;
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}
.single-product .woocommerce-tabs table.shop_attributes th,
.single-product .woocommerce-tabs table.shop_attributes td,
.single-product .woocommerce-tabs table.woocommerce-product-attributes th,
.single-product .woocommerce-tabs table.woocommerce-product-attributes td{
  padding:11px 16px;
  border-block-end:1px solid var(--hoco-line);
}
.single-product .woocommerce-tabs table.shop_attributes th{
  background:var(--hoco-bg);
  font-weight:700;
  color:var(--hoco-ink);
  width:34%;
}

/* --- mobile accordion titles (Woodmart shows these < tablet) --- */
.single-product .woocommerce-tabs .wd-accordion-title{
  background:var(--hoco-surface);
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius-sm);
  padding:14px 16px;
  margin-block-start:10px;
  font-weight:700;
  color:var(--hoco-ink);
  transition:color .2s;
}
.single-product .woocommerce-tabs .wd-accordion-title.wd-active{
  color:var(--hoco-brand);
  border-color:#e6d8ea;
}
.single-product .woocommerce-tabs .wd-accordion-title .wd-accordion-opener::before{
  color:var(--hoco-brand);
}
/* when accordion is in use, the panel below a title gets top corners rounded too */
.single-product .woocommerce-tabs .wd-accordion-item .wd-accordion-title + .woocommerce-Tabs-panel{
  border-block-start:1px solid var(--hoco-line);
  border-radius:0 0 var(--hoco-radius) var(--hoco-radius);
  margin-block-start:-1px;
}

/* ---------------------------------------------------------------------------
   (b) RELATED / UP-SELLS SECTION HEADINGS (accent bar like /test)
   Card grid inside is owned by agent 35 — headings + wrapper spacing only.
   --------------------------------------------------------------------------- */
.single-product .related-and-upsells,
.single-product .related.products,
.single-product .up-sells{
  margin-block-start:46px;
}
.single-product .related-products,
.single-product .up-sells{
  margin-block-start:34px;
}
.single-product .related-products > .title,
.single-product .related.products > .title,
.single-product .up-sells > .title,
.single-product .related-products > h2,
.single-product .related.products > h2,
.single-product .up-sells > h2,
.single-product .related-products > h3.title,
.single-product .up-sells > h3.title{
  display:flex;
  align-items:center;
  margin:0 0 18px;
  padding:0;
  font-size:23px;
  font-weight:800;
  line-height:1.3;
  color:var(--hoco-ink);
}
.single-product .related-products > .title::before,
.single-product .related.products > .title::before,
.single-product .up-sells > .title::before,
.single-product .related-products > h2::before,
.single-product .related.products > h2::before,
.single-product .up-sells > h2::before,
.single-product .related-products > h3.title::before,
.single-product .up-sells > h3.title::before{
  content:"";
  flex:0 0 auto;
  width:6px;
  height:22px;
  background:var(--hoco-brand);
  border-radius:3px;
  margin-inline-end:12px;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:1024px){
  .single-product .woocommerce-tabs .wc-tab,
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel,
  .single-product .woocommerce-tabs .entry-content{
    padding:20px 18px;
    border-radius:var(--hoco-radius);
    border-block-start:1px solid var(--hoco-line);
  }
  .single-product .related-products > .title,
  .single-product .up-sells > .title,
  .single-product .related-products > h3.title{
    font-size:20px;
  }
}
@media (max-width:576px){
  .single-product .woocommerce-tabs ul.wd-nav-tabs .wd-nav-link{
    padding:10px 14px;
    font-size:14px;
  }
  .single-product .woocommerce-tabs .wc-tab,
  .single-product .woocommerce-tabs .woocommerce-Tabs-panel,
  .single-product .woocommerce-tabs .entry-content{
    padding:16px 15px;
  }
}