/* ============================================================
   UA PRODUCT V6 SKIN — client-approved 2026-08-07
   Ported from mockups/product-v6/v7-combined (FINAL snapshot).

   This file is a SKIN layer. It loads AFTER ua-product-v3.css and
   only overrides visual properties — colour, surface, depth, radius
   and type scale. It changes no layout, no markup and no WooCommerce
   behaviour, so v3 remains the structural base and this stays
   reversible by simply not enqueueing it.

   Design:
     Product section  -> maroon detailing (eyebrow strip, maroon title,
                         orange price rule, maroon selected-price plate)
     Tabs onwards     -> "Aurora" soft brand light wash + frosted glass
     Spec table       -> solid maroon label column

   Selectors are the REAL v3 ones, verified against local product #273.
   ============================================================ */

/* ------------------------------------------------------------
   PAGE GROUND — Aurora wash replaces v3's flat #f7f5f3
   ------------------------------------------------------------ */
body.ua3-product{
  background:#f7f5f8;
  background-image:
    radial-gradient(46% 30% at 8% 2%,rgba(252,134,21,.16),transparent 62%),
    radial-gradient(42% 28% at 92% 12%,rgba(99,0,0,.12),transparent 64%),
    radial-gradient(50% 26% at 60% 52%,rgba(252,134,21,.10),transparent 66%),
    radial-gradient(46% 26% at 12% 84%,rgba(99,0,0,.10),transparent 66%);
  background-attachment:fixed;
}

body.ua3-product .wd-breadcrumbs{color:#8b8189}
body.ua3-product .wd-breadcrumbs a:hover{color:var(--ua3-maroon)}

/* ------------------------------------------------------------
   GALLERY + HIGHLIGHTS — light cards on the wash
   ------------------------------------------------------------ */
body.ua3-product .woocommerce-product-gallery,
body.ua3-product .ua3-highlights{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 50px rgba(74,40,52,.10), 0 3px 10px rgba(74,40,52,.05),
             inset 0 1px 0 rgba(255,255,255,.9);
}
body.ua3-product .woocommerce-product-gallery:hover{
  box-shadow:0 26px 64px rgba(74,40,52,.15);
}
/* image fills to the card edge so the gallery's top line matches the
   buy box's eyebrow strip — see the alignment note in the buy box below */
body.ua3-product .woocommerce-product-gallery{padding:0}
body.ua3-product .ua3-highlights{border-top:3px solid var(--ua3-orange)}
body.ua3-product .ua3-hl-k{color:#a08f83}
body.ua3-product .ua3-hl-v{color:var(--ua3-maroon)}

/* ------------------------------------------------------------
   BUY BOX
   The eyebrow runs flush to the card's top edge, so the summary must
   not carry its own top padding. v3 pads .summary-inner — zero the top
   and re-inset each child instead.
   ------------------------------------------------------------ */
body.ua3-product .summary-inner{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 50px rgba(74,40,52,.10), 0 3px 10px rgba(74,40,52,.05),
             inset 0 1px 0 rgba(255,255,255,.9);
  padding-top:0;
  overflow:hidden;
  background:#fff;
}

/* maroon eyebrow strip, edge to edge */
body.ua3-product .ua3-eyebrow{
  display:block;
  margin:0 -28px 22px;          /* cancel .summary-inner's side padding */
  padding:14px 28px;
  background:linear-gradient(120deg,#630000,#7d1414);
  color:#ffcf9e;
  letter-spacing:.16em;
  font-size:10.5px;
}

/* `!important` on the colour/size only: v3 declares both of these !important
   at base level (not inside a media query), so a plain rule here can never
   win regardless of source order. Everything else stays plain. */
body.ua3-product .product_title.entry-title{
  font-size:25px;
  letter-spacing:-.5px;
  color:var(--ua3-maroon)!important;
}

/* price: display figure with an orange rule beneath */
body.ua3-product .summary p.price,
body.ua3-product .summary .price{
  font-size:32px!important;
  letter-spacing:-1px;
  color:var(--ua3-maroon);
  padding:0 0 16px;
  margin-bottom:20px;
  position:relative;
}
body.ua3-product .summary p.price::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:52px;
  height:4px;
  border-radius:4px;
  background:var(--ua3-orange);
}
/* The variation price is injected inside the form and also matches
   `.summary .price`, so it must beat the !important display size above —
   otherwise the selected price renders at 32px inside the maroon plate. */
body.ua3-product .single_variation .price,
body.ua3-product .woocommerce-variation-price .price{
  font-size:19px!important;
  padding:0;
  margin:0;
}
body.ua3-product .single_variation .price::after,
body.ua3-product .woocommerce-variation-price .price::after{content:none}

body.ua3-product .woocommerce-product-details__short-description strong{
  color:var(--ua3-maroon);
}
body.ua3-product .woocommerce-product-details__short-description li::before{
  background:rgba(99,0,0,.09);
  box-shadow:inset 0 0 0 1.5px var(--ua3-maroon);
}
body.ua3-product .ua3-more-link{color:var(--ua3-maroon)}

/* ------------------------------------------------------------
   VARIATION FORM — native <select> kept exactly as WooCommerce emits it
   ------------------------------------------------------------ */
body.ua3-product form.variations_form{
  border:1px solid #f3e8dd;
  border-radius:16px;
  background:#fdf9f4;
  box-shadow:none;
}
body.ua3-product table.variations th.label label{
  color:var(--ua3-maroon);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.ua3-product .variations select{
  border:1.5px solid #ecdfd1;
  border-radius:12px;
  box-shadow:none;
  padding:13px 40px 13px 15px;
}
body.ua3-product .variations select:hover{border-color:#ddc9b4;box-shadow:none}
body.ua3-product .variations select:focus{
  border-color:var(--ua3-maroon);
  box-shadow:0 0 0 3px rgba(99,0,0,.11);
}

/* selected-price plate — solid maroon */
body.ua3-product .woocommerce-variation-price{
  border:0;
  border-radius:12px;
  box-shadow:none;
  padding:15px 17px;
  background:linear-gradient(120deg,#630000,#7d1414);
}
/* "Selected price" label. v3 renders it as a ::before on a flex row; against
   the maroon plate the inherited muted grey read as washed-out pink, so it is
   restated as a warm cream that matches the eyebrow strip's text.
   `line-height:1` on both the label and the price makes their line-boxes the
   same height, so `align-items:center` optically centres them — otherwise the
   price's taller line-box pushes the label low. */
body.ua3-product .woocommerce-variation-price::before{
  color:#f0cdae!important;
  font-size:12.5px!important;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1;
}
body.ua3-product .woocommerce-variation-price{align-items:center}
/* `margin:0` !important because the display-price rule above sets
   margin-bottom:20px on `.summary .price`, which this element also matches.
   Flex centring accounts for margins, so a 16px bottom margin was lifting the
   price 8px above the plate's centre while the label stayed put. */
body.ua3-product .woocommerce-variation-price .price,
body.ua3-product .single_variation .price{
  line-height:1;
  margin:0!important;
}
/* !important for the same reason as the display price: the maroon plate sits
   inside .summary, so v3's `.summary .price{color:...}` would otherwise paint
   this maroon-on-maroon and make the selected price unreadable. */
body.ua3-product .woocommerce-variation-price .price,
body.ua3-product .woocommerce-variation-price .price .woocommerce-Price-amount,
body.ua3-product .woocommerce-variation-price .woocommerce-Price-amount,
body.ua3-product .woocommerce-variation-price .woocommerce-Price-currencySymbol,
body.ua3-product .single_variation .price,
body.ua3-product .single_variation .woocommerce-Price-amount{
  color:#fff!important;
  letter-spacing:-.3px;
}

/* ------------------------------------------------------------
   QUANTITY + BUTTONS
   The v3 file notes that the old ua-product.css ships a higher-specificity
   `.single-product .single_add_to_cart_button.button.alt` rule, so the
   compound selector is repeated here to stay ahead of it.
   ------------------------------------------------------------ */
body.ua3-product .quantity{border:1.5px solid #ecdfd1;border-radius:12px}
body.ua3-product .quantity .btn:hover,
body.ua3-product .quantity button:hover{
  color:var(--ua3-maroon);
  background:rgba(99,0,0,.05);
}

/* Colour/border are !important here because v3 and the older ua-product.css
   both declare them !important on these buttons; the plain rules that were
   here first lost silently and left Woodmart's accent orange showing. Layout
   properties stay plain — nothing contests those. */
body.ua3-product .single_add_to_cart_button,
body.ua3-product .single_add_to_cart_button.button.alt{
  border-radius:12px;
  min-height:52px;
  border:1.5px solid #ecdfd1!important;
  color:var(--ua3-maroon)!important;
  background:#fff!important;
  background-image:none!important;
}
body.ua3-product .single_add_to_cart_button:hover,
body.ua3-product .single_add_to_cart_button.button.alt:hover{
  border-color:var(--ua3-maroon)!important;
  background:#fdf5ee!important;
  color:var(--ua3-maroon)!important;
}

body.ua3-product .wd-buy-now-btn{
  border-radius:12px;
  min-height:52px;
  border:0!important;
  color:#fff!important;
  background:linear-gradient(135deg,#fc8615,#ff9d3d)!important;
  background-image:linear-gradient(135deg,#fc8615,#ff9d3d)!important;
  box-shadow:0 12px 26px rgba(252,134,21,.32);
}
body.ua3-product .wd-buy-now-btn:hover{
  background:linear-gradient(135deg,#e8760c,#fc8615)!important;
  background-image:linear-gradient(135deg,#e8760c,#fc8615)!important;
}

body.ua3-product .ua3-chip{
  background:#fdf5ee;
  border:1px solid #f3e8dd;
  color:var(--ua3-maroon);
}

/* ------------------------------------------------------------
   COURSE DETAILS TABLE — maroon label column

   SELECTOR NOTE: v3 carries `.ua3-spec-*` rules, but nothing on this site
   renders that markup any more — it is dead styling inherited from an earlier
   plugin (verified: 0 occurrences in the DOM of product #273). The table that
   actually renders in the tab is WooCommerce's own `table.shop_attributes`,
   so that is what this block targets.

   LAYOUT NOTE: Woodmart's woo-mod-shop-attributes part-stylesheet throws the
   table layout away — `tbody` becomes `display:grid`, each `tr` a flex row with
   `justify-content:space-between`, and `:is(th,td){padding:0;border:none}`. The
   result is a label-left / value-right rule list, so a background on the `<th>`
   would only paint behind the label's own text width and read as a ragged
   stripe, not the mockup's solid column.

   Restoring `display:table` on the table and `table-row`/`table-cell` on the
   rows and cells gives the fixed-width label column the approved design needs.
   This is layout of the theme's own default styling — the WooCommerce markup
   and its content are untouched.
   ------------------------------------------------------------ */
body.ua3-product .woocommerce-product-attributes.shop_attributes,
body.ua3-product .ua3-spec-table{
  display:table;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 30px rgba(74,40,52,.07);
}
/* undo Woodmart's grid/flex reflow so the label column can be a real column */
body.ua3-product .woocommerce-product-attributes.shop_attributes tbody{
  display:table-row-group;
  grid-template-columns:none;
  margin-bottom:0;
  column-gap:0;
}
body.ua3-product .woocommerce-product-attributes.shop_attributes tr{
  display:table-row;
  gap:0;
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:0;
}
body.ua3-product .woocommerce-product-attributes.shop_attributes th,
body.ua3-product .woocommerce-product-attributes.shop_attributes td,
body.ua3-product .ua3-spec-table th,
body.ua3-product .ua3-spec-table td{
  display:table-cell;
  vertical-align:middle;
  padding:14px 18px;
  text-align:start;      /* Woodmart right-aligns the value cell */
}
body.ua3-product .woocommerce-product-attributes.shop_attributes th,
body.ua3-product .ua3-spec-table th{
  /* flat fill for the same reason as the description table's label column —
     a vertical gradient washes out on tall multi-value rows */
  background:#630000;
  background-image:linear-gradient(90deg,#630000,#6e0808);
  color:#ffcf9e;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  border-right:1px solid rgba(0,0,0,.18);
  font-size:12.5px;
  font-weight:600;
  font-style:normal;
  letter-spacing:.04em;
  width:210px;
}
/* Woodmart wraps the label text in spans that carry their own colour */
body.ua3-product .woocommerce-product-attributes.shop_attributes .wd-attr-label,
body.ua3-product .woocommerce-product-attributes.shop_attributes .wd-attr-name{
  color:#ffcf9e;
}
/* any zebra-striping on the label column is replaced by the solid panel */
body.ua3-product .woocommerce-product-attributes.shop_attributes tr:nth-child(even) th,
body.ua3-product .ua3-spec-table tr:nth-child(even) th{
  background:#630000;
  background-image:linear-gradient(90deg,#630000,#6e0808);
}
body.ua3-product .woocommerce-product-attributes.shop_attributes tr:last-child th,
body.ua3-product .ua3-spec-table tr:last-child th{border-bottom-color:transparent}
body.ua3-product .woocommerce-product-attributes.shop_attributes td,
body.ua3-product .ua3-spec-table td{
  background:transparent;
  color:#241019;
  border:0;
  border-bottom:1px solid rgba(99,0,0,.07);
  font-size:13.5px;
}
body.ua3-product .woocommerce-product-attributes.shop_attributes tr:last-child td,
body.ua3-product .ua3-spec-table tr:last-child td{border-bottom-color:transparent}
body.ua3-product .woocommerce-product-attributes.shop_attributes td a,
body.ua3-product .ua3-spec-table td a{color:var(--ua3-maroon)}
body.ua3-product .woocommerce-product-attributes.shop_attributes td a:hover,
body.ua3-product .ua3-spec-table td a:hover{color:var(--ua3-orange)}

/* ------------------------------------------------------------
   TAB STRIP — frosted capsule with pill tabs (mockup: Option 5 Aurora)

   Woodmart renders the tab titles as a plain underline nav. The approved
   design puts them in a rounded frosted bar with the active tab as an
   orange->maroon gradient pill.
   ------------------------------------------------------------ */
body.ua3-product .wd-nav-tabs,
body.ua3-product .wc-tabs,
body.ua3-product ul.tabs.wc-tabs{
  border-bottom:0!important;
  gap:6px;
  padding:6px;
  border-radius:16px;
  /* inline-flex alone loses to the theme's `display:flex`; `width:auto` +
     `justify-content:flex-start` keeps the capsule hugging its pills instead
     of stretching the full content width */
  display:inline-flex!important;
  width:auto!important;
  justify-content:flex-start;
  flex-wrap:wrap;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 20px rgba(74,40,52,.08);
}
/* The theme's `.wd-nav-wrapper` draws the 2px rule under the tab strip with
   padding-bottom:0, so the frosted capsule sat flush on the line (only the 2px
   border separated them) and the pill looked welded to it. Pad the wrapper, not
   the capsule — the rule is the wrapper's own border-bottom, so padding here is
   what actually opens the gap; a margin on the <ul> would move the line too. */
body.ua3-product .wd-nav-wrapper.wd-nav-tabs-wrapper{padding-bottom:18px}
body.ua3-product .wd-nav-tabs li,
body.ua3-product .wc-tabs li{border:0!important;background:none!important;margin:0!important}
body.ua3-product .wd-nav-tabs li > a,
body.ua3-product .wc-tabs li > a{
  border-radius:12px;
  padding:12px 22px!important;
  border:0!important;
  background:none!important;
  color:#8b8189!important;
  font-weight:600;
}
body.ua3-product .wd-nav-tabs li > a:hover,
body.ua3-product .wc-tabs li > a:hover{color:#241019!important}
/* Woodmart marks the open tab with .active / .wd-active on the <li> */
body.ua3-product .wd-nav-tabs li.active > a,
body.ua3-product .wd-nav-tabs li.wd-active > a,
body.ua3-product .wc-tabs li.active > a{
  background:linear-gradient(120deg,#fc8615,#630000)!important;
  color:#fff!important;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(99,0,0,.24);
}
/* Kill the theme's underline marker. The `wd-style-underline-reverse` layout
   draws it on the inner `.nav-link-text:after` (top:0; height:3px) — NOT on
   the <a> — so suppressing the anchor's ::after alone left an orange bar
   sitting across the top of the active pill. */
body.ua3-product .wd-nav-tabs li > a::after,
body.ua3-product .wc-tabs li > a::after,
body.ua3-product .wd-nav-tabs li.active > a::after,
body.ua3-product .wd-nav-tabs li > a > .nav-link-text::after,
body.ua3-product .wd-nav-tabs li > a > .nav-link-text::before,
body.ua3-product .wc-tabs li > a > .nav-link-text::after{
  display:none!important;
  content:none!important;
}

/* Smooth the tab switch: the theme swaps the active state instantly, so the
   pill's gradient and colour snapped in. Transition both, and fade the panel
   in rather than having it appear fully formed. */
/* !important: the theme declares `transition:color .18s, background-color .18s`
   on these anchors from a later stylesheet, which replaced this shorthand and
   left the switch feeling abrupt. */
body.ua3-product .wd-nav-tabs li > a,
body.ua3-product .wc-tabs li > a{
  transition:background-color .28s ease, background-image .28s ease,
             color .28s ease, box-shadow .28s ease!important;
}
/* ---- sliding pill -------------------------------------------------------
   The rules above give the ACTIVE <li> its own gradient, which cannot travel:
   each tab paints its own pill, so switching tabs hard-swaps between two of
   them (and `background-image` gradients don't interpolate anyway).

   So the pill becomes a single ::before on the <ul> that moves between tabs.
   Its position/width come from two custom properties that ua-product-v6-tabs.js
   measures per tab — CSS can't do it alone because the tabs are NOT equal
   width (127.5 / 209.8 / 130.1 / 186.3px measured live; labels are per-product
   and "Reviews (N)" changes width with the count), so no `--i * width` offset
   is possible.

   Everything here is gated on `.ua6-pill-ready`, which the script only adds
   once it has real measurements. Without JS the per-<li> pill above stays and
   the strip looks exactly as it did — this is an enhancement, not a dependency.
   -------------------------------------------------------------------------- */
body.ua3-product .wd-nav-tabs{position:relative}
body.ua3-product .wd-nav-tabs.ua6-pill-ready > li{position:relative}
/* text must sit above the travelling pill */
body.ua3-product .wd-nav-tabs.ua6-pill-ready > li > a{position:relative;z-index:2}
body.ua3-product .wd-nav-tabs.ua6-pill-ready::before{
  content:'';position:absolute;z-index:1;
  /* 6px = the <ul>'s own padding, so the pill matches the old per-li height */
  top:6px;bottom:6px;
  left:var(--ua6-pill-x,0);
  width:var(--ua6-pill-w,0);
  background:linear-gradient(120deg,#fc8615,#630000);
  border-radius:12px;
  box-shadow:0 6px 16px rgba(99,0,0,.24);
  transition:left .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
/* Hand the gradient over to the travelling pill: the active <li> keeps only its
   white text. Without this the static pill would show through underneath and
   the moving one would appear to slide over a duplicate. */
body.ua3-product .wd-nav-tabs.ua6-pill-ready > li.active > a,
body.ua3-product .wd-nav-tabs.ua6-pill-ready > li.wd-active > a{
  background:none!important;
  box-shadow:none!important;
  color:#fff!important;
}
body.ua3-product .woocommerce-Tabs-panel,
body.ua3-product .wd-tab-content{
  animation:ua6-tab-fade .32s ease both;
}
@keyframes ua6-tab-fade{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
/* respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  body.ua3-product .woocommerce-Tabs-panel,
  body.ua3-product .wd-tab-content{animation:none}
  body.ua3-product .wd-nav-tabs li > a,
  body.ua3-product .wc-tabs li > a{transition:none}
  /* the pill still relocates, it just jumps instead of travelling */
  body.ua3-product .wd-nav-tabs.ua6-pill-ready::before{transition:none}
}

/* ------------------------------------------------------------
   DESCRIPTION-TAB CONTENT TABLE — the real "Course Details" table

   IMPORTANT: this is NOT the shop_attributes table. The product description
   (authored in the CSV content) contains a bare <table> whose label column is
   `<td><strong>` — no <th>, no classes. That is the table the approved mockup
   styles as "Course Details", so it is matched via the tab panel it lives in
   rather than by a class of its own.
   ------------------------------------------------------------ */
/* SCOPING — READ BEFORE EDITING THESE SELECTORS.
   Across the 211 live products, 126 have a description table and they are NOT
   all label/value:
     - 30 have no label column at all (e.g. #1911 is a two-column
       subject/faculty data table). Painting its first column maroon would put
       cream-on-maroon panels behind real content.
     - 2 are 3-column tables (#515, #505) that a fixed 230px first column
       would break.
     - some nest a second table inside a value cell (#515), which descendant
       selectors would style as well.
   So the maroon treatment is applied ONLY where the first cell of a row is a
   label — matched via `:has(> strong, > b)` on that cell — and only to the
   OUTERMOST table, never a nested one. Everything else keeps a neutral card.
   `:has()` is supported in all current browsers; where it is not, the table
   simply keeps the neutral card, which is the safe fallback. */
body.ua3-product .woocommerce-Tabs-panel--description > .wc-tab-inner > table,
body.ua3-product .woocommerce-Tabs-panel--description > table,
body.ua3-product #tab-description > .wc-tab-inner > table,
body.ua3-product #tab-description > table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 30px rgba(74,40,52,.07);
  margin-bottom:26px;
}
body.ua3-product .woocommerce-Tabs-panel--description > .wc-tab-inner > table > tbody > tr > td,
body.ua3-product .woocommerce-Tabs-panel--description > table > tbody > tr > td,
body.ua3-product #tab-description > .wc-tab-inner > table > tbody > tr > td,
body.ua3-product #tab-description > table > tbody > tr > td{
  padding:14px 18px;
  border:0;
  border-bottom:1px solid rgba(99,0,0,.07);
  vertical-align:top;
  font-size:13.5px;
  color:#241019;
}
/* ---- LABEL COLUMN, now server-classified -------------------------------
   ua-product-v3.php tags each authored table at render time as either
   `.ua3-labelled` (every row is <strong>Label</strong> + value) or `.ua3-data`
   (subject/faculty content). See ua3_classify_table_body() for the test and
   the measurements behind it.

   This replaces the old positional treatment: v3's base CSS paints
   `.ua3-authored td:first-child` regardless of content, which is right on the
   256 genuine spec tables and WRONG on the other 67 — subject names were
   rendered maroon-bold as if they were field labels, while the table's real
   header row ("CMA Inter Subject" / "Faculty") sat above them in plain black,
   inverting the hierarchy. (323 outermost description tables across live.)

   Only `.ua3-labelled` gets the maroon column, matching the approved mockup
   and the shop_attributes table. `.ua3-data` gets a neutral first column and
   its true header row styled as the header instead. */
body.ua3-product .ua3-authored.ua3-labelled td:first-child{
  background:linear-gradient(120deg,#630000,#7d1414)!important;
  color:#ffcf9e!important;
  border-right-color:rgba(0,0,0,.18)!important;
  /* Rows vary hugely in height here (one line vs a 20-line spec list), so the
     label must ride at the top of its row rather than float in the middle of a
     tall maroon panel. */
  vertical-align:top!important;
}
body.ua3-product .ua3-authored.ua3-labelled tr:nth-child(even) td:first-child{
  background:linear-gradient(120deg,#630000,#7d1414)!important;
}
body.ua3-product .ua3-authored.ua3-labelled td:first-child strong{
  color:#ffcf9e!important;
}
/* Data tables: undo v3's positional label column. The first column is content,
   so it gets the same ground and weight as every other cell. */
body.ua3-product .ua3-authored.ua3-data td:first-child,
body.ua3-product .ua3-authored.ua3-data tr:nth-child(even) td:first-child{
  background:transparent!important;
  color:#3a2c25!important;
  font-weight:500!important;
  width:auto!important;
}
body.ua3-product .ua3-authored.ua3-data td:first-child strong{
  color:#3a2c25!important;font-weight:600!important;
}
/* ...and promote the row that IS the header. Only the first row, and only when
   it isn't already a <th> row. */
body.ua3-product .ua3-authored.ua3-data tr:first-child td{
  background:rgba(99,0,0,.05)!important;
  color:#630000!important;
  font-weight:600!important;
  font-size:12.5px!important;
  letter-spacing:.02em;
}

/* Nested tables. The CSV content puts a small table inside some faculty cells;
   ua3_style_authored_tables() deliberately leaves those unwrapped and unclassed
   (a scroll container inside a <td> would be wrong), so without this they keep
   the theme's default card — a white inset box with its own border and radius,
   which reads as a separate element floating inside one cell. Flatten it so the
   value looks like every other cell's value. */
body.ua3-product .ua3-authored td table{
  width:100%!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}
body.ua3-product .ua3-authored td table td,
body.ua3-product .ua3-authored td table tr{
  border:0!important;
  background:transparent!important;
  padding:0!important;
  color:inherit!important;
  font-size:inherit!important;
}

/* HISTORY — why this was CSS-impossible before.
   ------------------------------------------------------------------
   The maroon label column used to be omitted here entirely. A CSS-only gate
   cannot distinguish a label from content: the subject/faculty tables also use
   <b>/<strong> in the first cell, so a row-level rule
   (`tr:has(> td:first-child > strong)`) painted real subject names
   cream-on-maroon. And every "style the table only if EVERY row is labelled"
   formulation needs :has() inside :has()/:not(:has()), which is INVALID CSS —
   it passes querySelector() but the stylesheet parser silently DROPS the whole
   rule. (Verify selectors against the CSSOM, not with querySelector.)
   Resolved by classifying server-side instead; see the block above. */
body.ua3-product .woocommerce-Tabs-panel--description > .wc-tab-inner > table > tbody > tr:last-child > td,
body.ua3-product #tab-description > .wc-tab-inner > table > tbody > tr:last-child > td{border-bottom-color:transparent}

/* ------------------------------------------------------------
   VERIFIED-PHONE ROW  (owned by the ua-phone-gate mu-plugin)

   `ua-phone-gate.css` styles .ua-pg-change as a borderless orange underlined
   link, but Woodmart's generic button rule
       :is(.btn, .button, button, [type="submit"], [type="button"])
   loads AFTER it and overrides background/color/padding/radius wholesale —
   so the button actually rendered as a square grey #F3F3F3 plate with #3E3E3E
   text and border-radius:0, which clipped the parent pill's rounded corner.
   Woodmart also sets `text-decoration:none !important`, so the gate's
   underline never applied either.

   Fixed here rather than in ua-phone-gate.css because this skin is the only
   stylesheet that loads after Woodmart's part-stylesheets (see the loader's
   dual enqueue+inline strategy). !important throughout is required: every
   property below is one Woodmart's rule also sets.

   Scoped to body.ua3-product so the gate is untouched on non-product pages
   (it also renders on the sticky bar and in the cart).

   NOTE: ua-phone-gate.js re-renders this markup client-side after an AJAX
   save, so this must stay CSS-only on those class names — no markup changes.
   ------------------------------------------------------------ */
body.ua3-product .ua-pg-saved{
  /* content-width, not a full-width bar: the row holds one short number, and
     stretching it to 380px left a large empty gap before the button */
  display:inline-flex!important;
  width:auto!important; max-width:100%!important;
  height:auto!important; min-height:52px;
  padding:0 6px 0 14px!important;   /* 6px right — the button sits inset */
  gap:12px!important;
  background:linear-gradient(180deg,#fffdfb,#fdf4ea)!important;
  border:1px solid #f0ddc9!important;
  border-radius:14px!important;
  box-shadow:0 1px 2px rgba(99,0,0,.04), inset 0 1px 0 #fff!important;
}
/* green tick, not the brand orange: this is a confirmation state, and orange
   on a cream ground reads as decoration rather than "verified" */
body.ua3-product .ua-pg-tick{
  width:22px!important; height:22px!important; flex:0 0 22px!important;
  background:linear-gradient(135deg,#3ea06a,#54b97f)!important;
  box-shadow:0 3px 8px rgba(62,160,106,.30)!important;
  font-size:12px!important;
}
body.ua3-product .ua-pg-num{
  font-size:14px!important; letter-spacing:.2px!important;
  /* `0 1 auto` (not `1 1`) keeps the pill hugging the number; it may shrink on
     a narrow screen but never pads the row out to full width */
  flex:0 1 auto!important;
  padding-right:4px!important; white-space:nowrap!important;
}
body.ua3-product .ua-pg-change{
  background:#fff!important; background-image:none!important;
  color:#630000!important;
  border:1px solid #ecdcc9!important;
  border-radius:10px!important;
  padding:8px 16px!important;
  font-size:11px!important; font-weight:600!important;
  letter-spacing:.08em!important; text-transform:uppercase!important;
  text-decoration:none!important;
  flex:0 0 auto!important;
  box-shadow:0 1px 2px rgba(99,0,0,.05)!important;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease!important;
}
body.ua3-product .ua-pg-change:hover{
  background:#630000!important; border-color:#630000!important; color:#fff!important;
}
body.ua3-product .ua-pg-change:focus-visible{
  outline:2px solid #fc8615!important; outline-offset:2px!important;
}

/* ------------------------------------------------------------
   RESPONSIVE

   v3 restates the title/price sizes with !important inside its two media
   queries, because the old ua-product.css shrinks them at those widths. Those
   !important declarations beat this skin's plain rules, so below 1024px the
   page reverted to v3's 25/27px and 21/23px scale instead of the approved
   32px price. Restate the skin's scale at the same breakpoints.
   ------------------------------------------------------------ */
@media(max-width:1024px){
  body.ua3-product .product_title.entry-title{font-size:25px!important}
  body.ua3-product .summary p.price,
  body.ua3-product .summary .price{font-size:32px!important}
  /* the injected variation price must stay small at every width */
  body.ua3-product .single_variation .price,
  body.ua3-product .woocommerce-variation-price .price{font-size:19px!important}
}
@media(max-width:767px){
  body.ua3-product .product_title.entry-title{font-size:21px!important}
  body.ua3-product .summary p.price,
  body.ua3-product .summary .price{font-size:27px!important}
  body.ua3-product .single_variation .price,
  body.ua3-product .woocommerce-variation-price .price{font-size:17px!important}

  /* the eyebrow's -28px side margins assume the desktop padding; v3 drops
     .summary-inner to 20px side padding on phones */
  body.ua3-product .ua3-eyebrow{margin:0 -20px 18px;padding:12px 20px}

  /* a fixed 210px label column doesn't fit a phone — stack each attribute
     so long values get the full width */
  body.ua3-product .woocommerce-product-attributes.shop_attributes th,
  body.ua3-product .woocommerce-product-attributes.shop_attributes td{
    display:block;
    width:auto;
    padding:11px 14px;
  }
  body.ua3-product .woocommerce-product-attributes.shop_attributes th{
    border-right:0;
    border-bottom:0;
  }

  /* same stacking for the description content table */
  body.ua3-product .woocommerce-Tabs-panel--description table tr > td:first-child,
  body.ua3-product #tab-description table tr > td:first-child{
    display:block;
    width:auto;
    border-right:0;
    border-bottom:0;
  }
  body.ua3-product .woocommerce-Tabs-panel--description table td,
  body.ua3-product #tab-description table td{
    display:block;
    width:auto!important;
    padding:11px 14px;
  }

  /* tab capsule wraps to full width on phones */
  body.ua3-product .wd-nav-tabs,
  body.ua3-product .wc-tabs{display:flex;width:100%}
  body.ua3-product .wd-nav-tabs li > a,
  body.ua3-product .wc-tabs li > a{padding:10px 16px!important;font-size:13px}
}

/* ------------------------------------------------------------
   RELATED PRODUCTS — Aurora frosted cards
   ------------------------------------------------------------ */
body.ua3-product .related-products .wd-product{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(74,40,52,.10), 0 3px 10px rgba(74,40,52,.05),
             inset 0 1px 0 rgba(255,255,255,.9);
}
body.ua3-product .related-products .wd-product:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(74,40,52,.14);
}
body.ua3-product .related-products .price,
body.ua3-product .related-products .price .woocommerce-Price-amount{
  color:var(--ua3-maroon);
}
body.ua3-product .related-products .wd-add-btn>a,
body.ua3-product .related-products .add-to-cart-loop{
  border-radius:11px;
  background:linear-gradient(120deg,#fc8615,#630000);
  box-shadow:0 6px 16px rgba(99,0,0,.22);
}
body.ua3-product .related-products .wd-add-btn>a:hover,
body.ua3-product .related-products .add-to-cart-loop:hover{
  background:linear-gradient(120deg,#ff9d3d,#7d1414);
}

/* ==========================================================================
   REVIEWS TAB — Aurora treatment
   --------------------------------------------------------------------------
   The reviews panel shipped unstyled: WooCommerce's default square textarea,
   flat orange submit, 14px grey stars and no surface at all, sitting inside
   the Aurora tab body. This brings it onto the same frosted-card language as
   the description tab and the spec table.

   Structure notes (Woodmart, measured — do not assume the plain WooCommerce
   markup):
     - Panel is #tab-reviews.wd-single-reviews.wd-layout-two-column.wd-form-pos-after
     - #reviews has exactly two children: #comments and #review_form_wrapper.
       At desktop widths Woodmart splits them 616px/616px; at <=1024px the whole
       tab strip becomes an accordion and they stack. Both get the card so the
       treatment holds in either mode.
     - #comments wraps .wd-reviews-heading / .wd-reviews-content, and the H2
       .woocommerce-Reviews-title lives in .wd-reviews-tools.

   The "Reviews (0)" line ABOVE the card is Woodmart's tab (desktop) or
   accordion (mobile) label — a different element, not a duplicate of the H2
   inside. Both are intentional; the H2 is left visible so the card is never
   headingless if Woodmart's layout mode changes.

   p.stars a::before draws the glyph from woodmart-font — size and colour are
   safe to restyle, `content` must NOT be touched or the stars disappear.

   !important is used only where Woodmart's generic button/input rules set the
   same property; they load after this file's enqueue but before its wp_footer
   inline copy, so unflagged values would be a coin-flip.
   ========================================================================== */
body.ua3-product #tab-reviews #reviews{gap:26px!important}
body.ua3-product #tab-reviews #comments,
body.ua3-product #tab-reviews #review_form_wrapper{
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.85);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(74,40,52,.07);
  padding:26px 28px;
}
body.ua3-product #tab-reviews .woocommerce-Reviews-title{
  font-size:18px;color:#630000;margin:0 0 18px;
}
/* empty state: a dashed orange-tinted well, so "no reviews yet" reads as a
   deliberate state rather than a rendering gap in the card */
body.ua3-product #tab-reviews .woocommerce-noreviews{
  margin:0;padding:26px 18px;text-align:center;
  background:rgba(252,134,21,.05);
  border:1px dashed rgba(252,134,21,.35);
  border-radius:12px;color:#8b8189;font-size:13.5px;
}
body.ua3-product #tab-reviews #reply-title{
  display:block;font-size:15px;font-weight:600;color:#241019;
  margin:0 0 6px;line-height:1.45;
}
body.ua3-product #tab-reviews .comment-notes{
  font-size:12px;color:#8b8189;margin:0 0 20px;
}
/* field labels share the uppercase maroon eyebrow style used in the buy box */
body.ua3-product #tab-reviews .comment-form-rating label,
body.ua3-product #tab-reviews .comment-form-comment label,
body.ua3-product #tab-reviews .comment-form-author label,
body.ua3-product #tab-reviews .comment-form-email label{
  display:block;font-size:11px;font-weight:600;color:#630000;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;
}
body.ua3-product #tab-reviews p.stars a::before{
  font-size:22px!important;color:#e3d3c4!important;
  transition:color .18s ease;
}
body.ua3-product #tab-reviews p.stars:hover a::before,
body.ua3-product #tab-reviews p.stars a.active::before,
body.ua3-product #tab-reviews p.stars a:hover::before{color:#fc8615!important}
body.ua3-product #tab-reviews p.stars a{width:26px!important}
body.ua3-product #tab-reviews textarea#comment,
body.ua3-product #tab-reviews .comment-form-author input,
body.ua3-product #tab-reviews .comment-form-email input{
  border:1.5px solid #ecdfd1!important;border-radius:12px!important;
  background:#fff!important;
  font-family:Poppins,sans-serif;font-size:13.5px!important;
  box-shadow:none!important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
body.ua3-product #tab-reviews textarea#comment{
  padding:14px 16px!important;min-height:150px;
}
body.ua3-product #tab-reviews .comment-form-author input,
body.ua3-product #tab-reviews .comment-form-email input{
  padding:12px 15px!important;min-height:48px;
}
body.ua3-product #tab-reviews textarea#comment:focus,
body.ua3-product #tab-reviews .comment-form-author input:focus,
body.ua3-product #tab-reviews .comment-form-email input:focus{
  border-color:#630000!important;
  box-shadow:0 0 0 3px rgba(99,0,0,.11)!important;outline:none!important;
}
body.ua3-product #tab-reviews .comment-form-cookies-consent label{
  font-size:12.5px;color:#8b8189;
}
/* matches .btn-buy in the buy box so the page has one primary-action look */
body.ua3-product #tab-reviews .form-submit input#submit{
  border-radius:12px!important;min-height:48px;padding:0 30px!important;
  border:0!important;color:#fff!important;
  background:linear-gradient(135deg,#fc8615,#ff9d3d)!important;
  background-image:linear-gradient(135deg,#fc8615,#ff9d3d)!important;
  box-shadow:0 12px 26px rgba(252,134,21,.32)!important;
  font-size:12px!important;font-weight:600!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
  transition:background-image .25s ease, box-shadow .25s ease, transform .15s ease!important;
}
body.ua3-product #tab-reviews .form-submit input#submit:hover{
  background-image:linear-gradient(135deg,#e8760c,#fc8615)!important;
  box-shadow:0 14px 30px rgba(252,134,21,.40)!important;
}