/* ===== FF OD Single Product - Description / Additional information tabs =====
   Same construction as redvent.co.za: WooCommerce's native
   woocommerce_output_product_data_tabs() inside a wrapper, skinned to the OD.
   Scoped at html body .ff-od-page.ff-od-pdp.ff-od-pdp (0,4,x) so it outranks
   the Hello/Elementor kit without needing !important. */
/* WIDTH: the tabs shortcode sits OUTSIDE .ff-pdp-wrap in template 92, so it
   inherited the full viewport width and bled edge to edge.
   Measured: page content column is max-width 1200px with 22px side padding,
   giving a 1156px content band at x=149.5 on a 1455px viewport - the same
   band the breadcrumb, product grid and Specifications card occupy.
   Constrain the tabs to exactly that band at every width.

   SPACING: because it is outside the wrap, the wrap's 90px bottom padding
   stacks on top of this margin - measured grid->tabs gap was 150px against an
   intended 40px. Pull the tabs back up by the wrap's bottom padding so the
   visible gap equals the margin.

   BOTTOM MARGIN (Allan): the tabs card had no bottom margin, so it sat flush
   against the section edge with the related row starting immediately under.
   Give it real breathing room below the card. */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs{
  margin:-50px auto 56px;
  width:100%;
  max-width:1200px;
  padding:0 22px;
  box-sizing:border-box;}
/* Card shell: match the OD design system exactly. Measured off the OD PDP's
   Specifications card, which is the OD's canonical panel:
     background rgb(255,255,255)
     border     1px solid rgb(240,237,234)
     radius     16px
     padding    18px
   (the previous 20px/28px values were invented, not measured) */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs .woocommerce-tabs{
  background:rgb(255,255,255);border:1px solid rgb(240,237,234);
  border-radius:16px;padding:18px;}

/* tab strip ---------------------------------------------------------------- */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;
  margin:0 0 24px;padding:0 0 20px;border:0;
  border-bottom:1px solid rgb(240,237,234);overflow:visible;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs::before,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs li::before,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs li::after{display:none;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs li{
  display:block;float:none;border:0;background:transparent;
  border-radius:10px;margin:0;padding:0;box-shadow:none;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs li a,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs li a:hover,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs li a:focus{
  display:block;padding:12px 18px;border:0;border-radius:10px;
  background:rgb(250,248,246);color:rgb(92,92,88);
  font:600 14px/1.2 Inter,system-ui,sans-serif;text-decoration:none;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs li.active a{
  background:rgb(251,133,0);color:rgb(255,255,255);}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs li a:focus-visible{
  outline:2px solid rgb(218,115,0);outline-offset:3px;}

/* panels ------------------------------------------------------------------- */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs .woocommerce-Tabs-panel{
  padding:0;margin:0;border:0;box-shadow:none;}
/* Panel heading: OD design system uses Poppins 14px/600 rgb(0,0,0) for panel
   headings (measured on the Specifications card), not 22px/700. */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs .woocommerce-Tabs-panel h2,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs .woocommerce-Tabs-panel h3{
  font-family:Poppins,sans-serif;font-weight:600;font-size:14px;line-height:1.4;
  color:rgb(0,0,0);margin:0 0 10px;text-decoration:none;}
/* Body copy: OD uses Inter 14px/1.55 rgb(106,103,98) inside cards. */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs .woocommerce-Tabs-panel p,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs .woocommerce-Tabs-panel li{
  font:400 14px/1.55 Inter,system-ui,sans-serif;color:rgb(106,103,98);
  margin:0 0 12px;max-width:76ch;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs .woocommerce-Tabs-panel p:last-child{margin-bottom:0;}

/* attributes table --------------------------------------------------------- */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes{
  width:100%;border-collapse:collapse;margin:0;border:0;}
/* Rows: OD spec-row language - label Inter 14/400 rgb(106,103,98),
   value Inter 14/500 rgb(0,0,0), padding 8px 0, no rules, right-aligned
   value. Measured on the OD Specifications card. */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes th,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes td{
  padding:8px 0;text-align:left;border:0;
  background:transparent;
  font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.4;
  vertical-align:baseline;}
/* Woo ships `.shop_attributes tr:nth-child(even) td{background:#fafafa}` which
   striped the rows grey; the OD table is flat white with hairline rules. */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes tr th,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes tr td,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes tr:nth-child(even) th,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes tr:nth-child(even) td{
  background:transparent;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes th{
  font-weight:400;color:rgb(106,103,98);width:auto;font-style:normal;
  white-space:nowrap;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes td{
  color:rgb(0,0,0);font-weight:500;font-style:normal;text-align:right;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes tr{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes td p{
  margin:0;font-size:14px;line-height:1.4;color:rgb(0,0,0);font-weight:500;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes tr:last-child th,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes tr:last-child td{border-bottom:0;}

@media(max-width:880px){
  /* Mobile/tablet: the page column uses 22px side padding (content band
     x=22, w=346 at 390px), not 16px. Measured mismatch was 6px each side.
     Wrap bottom padding is 60px here, so pull back by 60-28=32px. */
  html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs{margin:-32px auto 40px;padding:0 22px;}
  html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs .woocommerce-tabs{padding:20px;}
  html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs{
    margin-bottom:20px;padding-bottom:16px;}
  html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs ul.tabs li a{padding:10px 12px;font-size:12.5px;}
  html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs .woocommerce-Tabs-panel h2{font-size:20px;}
  html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-tabs table.shop_attributes th{width:42%;}
}