/* =========================================================
   ERG — PDP helpers (Woo tabs + attributes + reviews)
   NOTE: No :root tokens here. Uses ERG tokens from 00/50.
   ========================================================= */

/* ---------- Woo Tabs: remove default “white box” look ---------- */
body.single-product .woocommerce-tabs{
  margin-top: 26px;
}

body.single-product .woocommerce-tabs ul.tabs{
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after{
  display: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.single-product .woocommerce-tabs ul.tabs li a{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--erg-line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  color: var(--erg-text-dim) !important;

  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}

body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li a:hover{
  color: var(--erg-text) !important;
  border-color: color-mix(in srgb, var(--erg-cta) 55%, rgba(255,255,255,.14));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--erg-cta) 20%, transparent);
}

/* Panel wrapper (steel card parity) */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel{
  background: color-mix(in srgb, var(--erg-panel) 80%, #000 20%);
  border: 1px solid var(--erg-line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* ---------- Additional Information: table -> 2-col card grid ---------- */
body.single-product .woocommerce-product-attributes{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  border: 0 !important;
  margin: 0 !important;
}

body.single-product .woocommerce-product-attributes tbody{
  display: contents !important;
}

body.single-product .woocommerce-product-attributes tr{
  display: flex !important;
  flex-direction: column;
  gap: 8px;

  background: color-mix(in srgb, var(--erg-panel-2) 88%, #000 12%);
  border: 1px solid var(--erg-line);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

body.single-product .woocommerce-product-attributes th,
body.single-product .woocommerce-product-attributes td{
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.single-product .woocommerce-product-attributes th{
  color: var(--erg-text-dim) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: 12px;
}

body.single-product .woocommerce-product-attributes td{
  color: var(--erg-text) !important;
  font-size: 15px;
  line-height: 1.5;
}

/* Responsive attributes */
@media (max-width: 860px){
  body.single-product .woocommerce-product-attributes{
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Reviews: prevent light inputs + keep contrast ---------- */
body.single-product #reviews input[type="text"],
body.single-product #reviews input[type="email"],
body.single-product #reviews textarea{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid var(--erg-line) !important;
  color: var(--erg-text) !important;
  border-radius: 14px !important;
}

body.single-product #reviews input[type="text"]:focus,
body.single-product #reviews input[type="email"]:focus,
body.single-product #reviews textarea:focus{
  outline: none !important;
  border-color: color-mix(in srgb, var(--erg-cta) 55%, rgba(255,255,255,.14)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--erg-cta) 18%, transparent) !important;
}

body.single-product #reviews label,
body.single-product #reviews .comment-text{
  color: var(--erg-text) !important;
}

/* =========================================================
   PDP TABS TYPO — calm the big headings
   Add to END of 40-pdp.css
   ========================================================= */

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2{
  font-family: "Oswald", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 900;
  font-size: clamp(18px, 1.7vw, 26px);
  margin: 0 0 14px;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h3,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3{
  font-family: "Oswald", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  font-size: 16px;
  margin: 18px 0 10px;
}
/* =========================================================
   PDP: Replace tabs UI with stacked sections (sales-friendly)
   Requires wrapper class: .erg-single-tabs
   ========================================================= */

.erg-single-tabs .woocommerce-tabs ul.tabs{
  display: none !important; /* hide the tab nav */
}

/* Show ALL panels stacked */
.erg-single-tabs .woocommerce-tabs .woocommerce-Tabs-panel{
  display: block !important;
  margin-top: 18px;
}

/* Each panel becomes a consistent ERG card */
.erg-single-tabs .woocommerce-tabs .woocommerce-Tabs-panel{
  background: color-mix(in srgb, var(--erg-panel) 80%, #000 20%);
  border: 1px solid var(--erg-line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Panel headings look like section headers, not giant yelling */
.erg-single-tabs .woocommerce-tabs .woocommerce-Tabs-panel > h2{
  font-family: var(--erg-head);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 900;
  font-size: clamp(16px, 1.6vw, 22px);
  margin: 0 0 14px;
}

/* Clean paragraph rhythm */
.erg-single-tabs .woocommerce-tabs .woocommerce-Tabs-panel p{
  margin: 0 0 12px;
}