, and wraps the
"Clear" link in .wd-reset-var INSIDE the LAST | (verified) — so it
must be pulled out of that cell to sit under the whole row instead of
stretching the third select's column. */
body.ua3-product table.variations{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
width:100%;margin:0 0 14px;border:0;align-items:end;
}
body.ua3-product table.variations tbody{display:contents}
body.ua3-product table.variations tbody link{display:none}
body.ua3-product table.variations tr{display:block;margin:0;border:0}
body.ua3-product table.variations th,
body.ua3-product table.variations td{
display:block;padding:0;border:0;text-align:left;background:none;
}
body.ua3-product table.variations th.label label{
font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
color:var(--ua3-muted);margin:0 0 6px;display:block;
}
body.ua3-product .variations select{
width:100%;appearance:none;-webkit-appearance:none;
border:1.5px solid #e8e2dc;border-radius:10px;background-color:#fff;
padding:12px 40px 12px 14px;font-family:Poppins,sans-serif;
font-size:13px;font-weight:500;color:var(--ua3-ink);cursor:pointer;
box-shadow:var(--ua3-sh-xs);height:auto;min-height:0;
transition:border-color .18s,box-shadow .18s;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;
/* Woodmart's `.wd select` sets background-size:auto 18px, which scaled the
12x8 chevron up to 27x18 (thick + dark vs the mockup's thin grey mark).
Pin the intrinsic size so it renders exactly as drawn. */
background-size:12px 8px;
}
body.ua3-product .variations select:hover{border-color:#dcd4cc;box-shadow:var(--ua3-sh-sm)}
body.ua3-product .variations select:focus{
outline:none;border-color:var(--ua3-orange);box-shadow:0 0 0 3px rgba(252,134,21,.13);
}
/* .wd-reset-var lives inside the 3rd | ; float it below the grid row so
"Clear" reads as belonging to the whole option set, like the mockup. */
body.ua3-product .wd-reset-var{
position:absolute;left:0;top:100%;margin-top:8px;width:max-content;
}
body.ua3-product table.variations tr:last-child td.value{position:relative}
body.ua3-product .reset_variations{
font-size:12px;color:var(--ua3-muted);display:inline-block;
}
body.ua3-product .reset_variations:hover{color:var(--ua3-orange)}
/* room under the selects for the absolutely-placed Clear link */
body.ua3-product table.variations{padding-bottom:26px}
/* Woo's own variation price block (appears after a full selection).
.single_variation is inline-level in Woodmart, so the box collapses to
its text width (measured 109px) — force it to fill the card and lay it
out as the mockup's "Selected price" row. */
body.ua3-product .woocommerce-variation{display:block;width:100%}
body.ua3-product .woocommerce-variation-price{
display:flex;align-items:center;justify-content:space-between;gap:10px;
width:100%;background:#fff;border:1px solid #efe9e3;border-radius:10px;
padding:13px 15px;margin-bottom:14px;box-shadow:var(--ua3-sh-xs);
}
/* label on the left, matching the mockup */
body.ua3-product .woocommerce-variation-price::before{
content:"Selected price";font-size:12px;color:var(--ua3-muted);font-weight:500;
}
body.ua3-product .woocommerce-variation-price .price{
font-size:19px;font-weight:700;color:var(--ua3-maroon);margin:0;
}
body.ua3-product .woocommerce-variation-price .price del{display:none}
/* qty + add to cart */
body.ua3-product .woocommerce-variation-add-to-cart,
body.ua3-product form.cart:not(.variations_form){
display:flex!important;gap:10px;align-items:stretch;flex-wrap:nowrap;width:100%;
}
/* the variation form itself is flex in Woodmart — keep its children full width */
body.ua3-product form.variations_form{flex-direction:column;align-items:stretch}
body.ua3-product .single_variation_wrap{width:100%}
/* Woodmart puts a 2px border on EACH +/- button, which sat inside the
wrapper border and made the stepper read as three boxed segments.
The wrapper owns the border; the buttons are flat. */
body.ua3-product .quantity{
order:1;
display:flex;align-items:stretch;
border:1.5px solid #e8e2dc;border-radius:10px;background:#fff;
box-shadow:none;overflow:hidden;flex:0 0 auto;
}
body.ua3-product .quantity .btn,
body.ua3-product .quantity button{
border:0!important;background:transparent!important;box-shadow:none!important;
width:34px;min-width:34px;padding:0;border-radius:0;
color:var(--ua3-muted);font-size:16px;font-weight:500;line-height:1;
display:flex;align-items:center;justify-content:center;
transition:color .15s ease,background-color .15s ease;
}
body.ua3-product .quantity .btn:hover,
body.ua3-product .quantity button:hover{
color:var(--ua3-orange);background:rgba(252,134,21,.06)!important;
}
body.ua3-product .quantity input.qty{
font-family:Poppins,sans-serif;font-size:14px;font-weight:600;color:var(--ua3-ink);
background:transparent;border:0;box-shadow:none;width:38px;min-width:38px;
text-align:center;padding:0;
}
body.ua3-product .quantity input.qty:focus{outline:none;box-shadow:none}
/* Buy Now is Woodmart's native #wd-add-to-cart (Theme Settings > Buy now),
hooked onto woocommerce_after_add_to_cart_button, so it lands in the same
flex row as .quantity and the cart button.
Buy Now = primary (filled). Add to cart = secondary (outline) — two
identical orange buttons side by side would compete for the same click. */
body.ua3-product .single_add_to_cart_button,
body.ua3-product .wd-buy-now-btn{
/* Woodmart constrains .button width, so flex-grow alone leaves it ~91px.
min-width:0 + explicit width lets them fill the row beside the qty box. */
flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;
border-radius:10px;cursor:pointer;
font-family:Poppins,sans-serif;font-size:14px;font-weight:600;
letter-spacing:.02em;padding:15px 18px;text-transform:none;
transition:box-shadow .22s ease,transform .18s ease,filter .18s ease,
background-color .18s ease,color .18s ease,border-color .18s ease;
}
/* Buy Now's fill is a gradient (background-image), which cannot animate.
Transitioning background-color only fades the layer *behind* it, so any
stray colour change shows through mid-transition. Exclude it. */
body.ua3-product .wd-buy-now-btn{
transition:box-shadow .22s ease,transform .18s ease,filter .18s ease;
}
/* --- Primary: Buy Now --- */
body.ua3-product .wd-buy-now-btn{
order:3;flex-grow:1.4!important;
/* transparent 1.5px border, not border:0 — Add to cart has a real 1.5px
border, so a borderless Buy Now renders 3px shorter and the two buttons
misalign when stacked (measured 47px vs 45px). */
border:1.5px solid transparent!important;
background:linear-gradient(180deg,#fd9331 0%,var(--ua3-orange) 55%,#f07d0a 100%)!important;
/* paint the gradient under the transparent border too, so the button reads
as a solid block rather than showing a 1.5px lighter edge */
background-clip:border-box!important;
color:#fff!important;
box-shadow:var(--ua3-sh-accent);
}
/* The old ua-product.css still prints inline on every product and ships
`.single-product .wd-buy-now-btn:hover{background:#fc8615!important}`.
`background` is a shorthand, so it resets background-image to `initial` —
wiping the gradient and cross-fading to a flat colour on hover (reads as a
white/pale flash). Restate the gradient here so hover only changes depth. */
body.ua3-product .wd-buy-now-btn:hover{
background:linear-gradient(180deg,#fd9331 0%,var(--ua3-orange) 55%,#f07d0a 100%)!important;
color:#fff!important;
filter:brightness(1.04);transform:translateY(-1px);
box-shadow:0 12px 28px rgba(252,134,21,.38);
}
body.ua3-product .wd-buy-now-btn:active{
transform:translateY(0);box-shadow:0 4px 12px rgba(252,134,21,.28);
}
/* --- Secondary: Add to cart ---
The old ua-product.css ships `.single-product .single_add_to_cart_button.button.alt`
with !important. On pilot products its inline block is still in the page, and
that selector out-specifies a plain `body.ua3-product .single_add_to_cart_button`,
so the button rendered solid orange. Matching the .button.alt specificity is
what actually wins — printing later is not enough. */
body.ua3-product .single_add_to_cart_button,
body.ua3-product .single_add_to_cart_button.button.alt{
order:2;
border:1.5px solid var(--ua3-orange)!important;
background:#fff!important;
background-image:none!important;
color:var(--ua3-orange)!important;
box-shadow:var(--ua3-sh-xs);
}
body.ua3-product .single_add_to_cart_button:hover,
body.ua3-product .single_add_to_cart_button.button.alt:hover{
background:rgba(252,134,21,.07)!important;
background-image:none!important;
color:#e0730a!important;border-color:#e0730a!important;
transform:translateY(-1px);box-shadow:var(--ua3-sh-sm);
}
body.ua3-product .single_add_to_cart_button:active{
transform:translateY(0);box-shadow:var(--ua3-sh-xs);
}
/* Variable product with no variation chosen yet. Woo adds .disabled +
.wc-variation-selection-needed to the cart button only, so Buy Now is
dimmed off the FORM's state (.variations_form gets no such hook) — use the
sibling cart button instead: ~ matches Buy Now when it follows a disabled
cart button in the same flex row. */
body.ua3-product .single_add_to_cart_button.disabled,
body.ua3-product .single_add_to_cart_button:disabled,
body.ua3-product .single_add_to_cart_button.disabled ~ .wd-buy-now-btn,
body.ua3-product .single_add_to_cart_button:disabled ~ .wd-buy-now-btn,
body.ua3-product .wd-buy-now-btn:disabled{
opacity:.5;cursor:not-allowed;
transform:none!important;box-shadow:none!important;filter:none!important;
}
/* ...and neutralise their hover states while disabled. */
body.ua3-product .single_add_to_cart_button.disabled:hover,
body.ua3-product .single_add_to_cart_button:disabled:hover,
body.ua3-product .single_add_to_cart_button.disabled ~ .wd-buy-now-btn:hover,
body.ua3-product .single_add_to_cart_button:disabled ~ .wd-buy-now-btn:hover{
transform:none!important;box-shadow:none!important;filter:none!important;
background:#fff!important;color:var(--ua3-orange)!important;
}
body.ua3-product .single_add_to_cart_button.disabled ~ .wd-buy-now-btn:hover,
body.ua3-product .single_add_to_cart_button:disabled ~ .wd-buy-now-btn:hover{
background:linear-gradient(180deg,#fd9331 0%,var(--ua3-orange) 55%,#f07d0a 100%)!important;
color:#fff!important;
}
body.ua3-product .ua3-micro{
display:flex;gap:16px;margin-top:14px;padding-top:14px;
border-top:1px solid #ece6e0;flex-wrap:wrap;width:100%;
}
body.ua3-product .ua3-micro span{
font-size:11.5px;color:var(--ua3-muted);display:flex;align-items:center;gap:6px;
}
/* Poppins is the sitewide face, but Woodmart's own headings/tab labels
inherit its system-ui stack. The old ua-product.css forced Poppins on
these; suppressing it left the product title, "Course Details", the tab
labels and the spec-table headers rendering in -apple-system while
everything around them stayed Poppins. Family only — sizes, weights and
colours are untouched. */
body.ua3-product .product_title.entry-title,
body.ua3-product .ua-spec-title,
body.ua3-product .ua-spec-table th,
body.ua3-product .ua-spec-table td,
body.ua3-product .wd-tabs-title,
body.ua3-product .nav-link-text,
body.ua3-product .woocommerce-Tabs-panel h1,
body.ua3-product .woocommerce-Tabs-panel h2,
body.ua3-product .woocommerce-Tabs-panel h3,
body.ua3-product .woocommerce-Tabs-panel h4,
body.ua3-product .woocommerce-Tabs-panel th,
body.ua3-product .woocommerce-Tabs-panel td,
body.ua3-product .woocommerce-Tabs-panel li,
body.ua3-product .woocommerce-Tabs-panel p{
font-family:Poppins,sans-serif;
}
/* ---------------------------------------------------------------
Markup still emitted by the OLD ua-product.php (chips, WhatsApp CTA,
spec table). v3 suppresses that plugin's stylesheet, so these would
otherwise render completely unstyled — the WhatsApp icon sat flush
against its label with no gap. Restyled here to v3's tokens.
--------------------------------------------------------------- */
/* highlight chips under the short description */
body.ua3-product .ua-course-chips{
display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;
}
body.ua3-product .ua-chip{
display:inline-flex;align-items:center;gap:7px;
font-size:12.5px;font-weight:500;color:#5a4a42;
background:var(--ua3-bg-soft);border:1px solid #f0e2d8;
padding:7px 14px;border-radius:30px;line-height:1.2;
}
body.ua3-product .ua-chip .ua-chip-ico{font-size:14px;line-height:1}
/* WhatsApp "Talk to a Counsellor" CTA under the buy row */
body.ua3-product .ua-wa-cta{
display:flex;align-items:center;justify-content:center;
gap:10px; /* the missing gap: icon was flush to text */
width:100%;box-sizing:border-box;margin-top:12px;
background:#f2fbf5;color:#128c47;
border:1.5px solid #25D366;border-radius:10px;
font-family:Poppins,sans-serif;font-weight:600;font-size:14px;
padding:13px 20px;text-decoration:none;line-height:1.2;
transition:background .2s ease,box-shadow .2s ease,transform .18s ease;
}
body.ua3-product .ua-wa-cta:hover{
background:#e2f7ea;color:#0f7a3d;
transform:translateY(-1px);box-shadow:0 8px 18px rgba(37,211,102,.2);
}
/* line-height:0 keeps the inline SVG from adding phantom descender space,
which would push the icon off-centre against the text */
body.ua3-product .ua-wa-cta .ua-wa-ico{
display:inline-flex;align-items:center;line-height:0;flex:0 0 auto;
}
body.ua3-product .ua-wa-cta .ua-wa-ico svg{display:block;width:20px;height:20px}
/* "Course Details" spec table at the top of the Description tab */
body.ua3-product .ua-spec-wrap{margin:0 0 26px}
body.ua3-product .ua-spec-title{
color:var(--ua3-maroon);font-weight:700;font-size:18px;
margin:0 0 14px;padding-bottom:10px;
border-bottom:2px solid #fff0e0;position:relative;
}
body.ua3-product .ua-spec-title::after{
content:"";position:absolute;left:0;bottom:-2px;
width:46px;height:2px;background:var(--ua3-orange);
}
body.ua3-product .ua-spec-table{
width:100%;border-collapse:separate;border-spacing:0;
border:1px solid #f0e2d8;border-radius:12px;overflow:hidden;margin:0;
}
body.ua3-product .ua-spec-table th{
background:var(--ua3-bg-soft);color:var(--ua3-maroon);font-weight:600;
text-align:left;padding:13px 18px;font-size:13.5px;width:34%;
border-bottom:1px solid #f0e2d8;border-right:1px solid #f0e2d8;
vertical-align:top;text-transform:none;letter-spacing:0;
}
body.ua3-product .ua-spec-table td{
padding:13px 18px;color:#3a2c25;font-size:13.5px;font-weight:500;
border-bottom:1px solid #f0e2d8;vertical-align:top;line-height:1.55;
}
body.ua3-product .ua-spec-table td a{color:var(--ua3-maroon);font-weight:500}
body.ua3-product .ua-spec-table td a:hover{color:var(--ua3-orange)}
body.ua3-product .ua-spec-table .woocommerce-Price-amount{
color:var(--ua3-orange);font-weight:700;
}
body.ua3-product .ua-spec-table tr:last-child th,
body.ua3-product .ua-spec-table tr:last-child td{border-bottom:0}
body.ua3-product .ua-spec-table tr:nth-child(even) th{background:#fdf2e6}
/* ---------------------------------------------------------------
v3 Course Details table (.ua3-spec-*). Replaces the old .ua-spec-*
markup, which only ever had attributes + price + category to show.
The old selectors above are left in place so any non-v3 context that
still renders the old table keeps its styling.
--------------------------------------------------------------- */
body.ua3-product .ua3-spec-wrap{margin:0 0 30px}
body.ua3-product .ua3-spec-title{
color:var(--ua3-maroon);font-weight:700;font-size:18px;
font-family:Poppins,sans-serif;
margin:0 0 14px;padding-bottom:10px;
border-bottom:2px solid #fff0e0;position:relative;
}
body.ua3-product .ua3-spec-title::after{
content:"";position:absolute;left:0;bottom:-2px;
width:46px;height:2px;background:var(--ua3-orange);
}
/* Long values (device policy, delivery) can force a wide table on small
screens — let it scroll inside its own box instead of the page. */
body.ua3-product .ua3-spec-scroll{
overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid #f0e2d8;border-radius:12px;
}
body.ua3-product .ua3-spec-table{
width:100%;border-collapse:separate;border-spacing:0;margin:0;
font-family:Poppins,sans-serif;background:#fff;
}
body.ua3-product .ua3-spec-table th{
background:var(--ua3-bg-soft);color:var(--ua3-maroon);font-weight:600;
text-align:left;padding:13px 18px;font-size:13.5px;width:32%;
border-bottom:1px solid #f0e2d8;border-right:1px solid #f0e2d8;
vertical-align:top;text-transform:none;letter-spacing:0;
font-family:Poppins,sans-serif;white-space:nowrap;
}
body.ua3-product .ua3-spec-table td{
padding:13px 18px;color:#3a2c25;font-size:13.5px;font-weight:500;
border-bottom:1px solid #f0e2d8;vertical-align:top;line-height:1.55;
font-family:Poppins,sans-serif;
}
body.ua3-product .ua3-spec-table tr:nth-child(even) th{background:#fdf2e6}
body.ua3-product .ua3-spec-table tr:last-child th,
body.ua3-product .ua3-spec-table tr:last-child td{border-bottom:0}
body.ua3-product .ua3-spec-table td a{color:var(--ua3-maroon);font-weight:500}
body.ua3-product .ua3-spec-table td a:hover{color:var(--ua3-orange)}
body.ua3-product .ua3-spec-table .woocommerce-Price-amount{
color:var(--ua3-orange);font-weight:700;
}
/* price row: strike-through original stays muted, not orange */
body.ua3-product .ua3-spec-table del .woocommerce-Price-amount{
color:#9b8c85;font-weight:500;
}
body.ua3-product .ua3-spec-table ins{text-decoration:none}
/* ---------------------------------------------------------------
Client-authored description tables (.ua3-authored).
These use | Label | value | rather than
, so the label column is styled by :first-child, not th.
Content is never modified — only presentation.
--------------------------------------------------------------- */
body.ua3-product .ua3-authored{table-layout:fixed}
body.ua3-product .ua3-authored td{
padding:13px 18px;color:#3a2c25;font-size:13.5px;font-weight:500;
border-bottom:1px solid #f0e2d8;vertical-align:top;line-height:1.6;
font-family:Poppins,sans-serif;
}
/* label column — the authored markup hardcodes width="468" on every cell,
which is stripped in PHP so this can take effect */
body.ua3-product .ua3-authored td:first-child{
width:30%;background:var(--ua3-bg-soft);color:var(--ua3-maroon);
font-weight:600;border-right:1px solid #f0e2d8;
}
body.ua3-product .ua3-authored tr:nth-child(even) td:first-child{background:#fdf2e6}
body.ua3-product .ua3-authored td:first-child strong{
color:var(--ua3-maroon);font-weight:600;
}
body.ua3-product .ua3-authored tr:last-child td{border-bottom:0}
/* value column: authored cells hold loose lines, lists and subheads */
body.ua3-product .ua3-authored td:last-child strong{
color:var(--ua3-ink);font-weight:600;display:inline-block;margin:6px 0 2px;
}
body.ua3-product .ua3-authored td ul,
body.ua3-product .ua3-authored td ol{margin:4px 0 4px 18px;padding:0}
body.ua3-product .ua3-authored td li{margin:0 0 4px;line-height:1.55}
body.ua3-product .ua3-authored td p{margin:0 0 7px}
body.ua3-product .ua3-authored td p:last-child{margin-bottom:0}
body.ua3-product .ua3-authored td a{color:var(--ua3-maroon);font-weight:500}
body.ua3-product .ua3-authored td a:hover{color:var(--ua3-orange)}
/* the authored content sets inline colours (notably bright red warnings) —
left intact deliberately, they are the client's own emphasis */
body.ua3-product .product_meta{
margin-top:16px;padding-top:15px;border-top:1px solid #f1eeeb;
font-size:12px;color:var(--ua3-muted);
}
body.ua3-product .product_meta a{color:var(--ua3-muted)}
body.ua3-product .product_meta a:hover{color:var(--ua3-orange)}
/* =========================================================
TABS — native Woo tabs, restyled to match the LIVE product page
(hbxstudio.in/uniquecommerce/product/...) exactly.
Values below were measured off live's computed styles, not guessed.
========================================================= */
body.ua3-product .product-tabs-wrapper{
/* padding-top was 8px (40px total gap under the summary card, most of it
the card's own margin) — the tabs row read as attached to the card above */
margin-top:0;padding:32px 0 40px;background:none;
border-top:0;box-shadow:none;
}
/* Left-aligned nav on a 2px warm track. Woodmart's default is centered
inline-flex, so both the wrapper's text-align and the ul's own
justify-content have to be reset or the tabs re-center. */
body.ua3-product .wd-nav-tabs-wrapper{
border-bottom:2px solid #f0e2d8;text-align:left;
}
body.ua3-product ul.wd-nav-tabs{
display:flex!important;justify-content:flex-start!important;
gap:6px;width:100%;
}
body.ua3-product ul.wd-nav-tabs>li{margin:0;padding:0}
body.ua3-product ul.wd-nav-tabs>li>a{
position:relative;
padding:13px 24px;border-radius:10px 10px 0 0;
/* was #8a7267 — a washed-out warm grey that read as disabled. Use the same
ink as the product title so inactive tabs are clearly legible. */
color:var(--ua3-ink);font-size:14px;font-weight:600;
letter-spacing:.2px;text-transform:none;
transition:color .18s ease,background-color .18s ease;
}
body.ua3-product ul.wd-nav-tabs>li>a:hover{color:var(--ua3-orange)}
/* Active tab = cream pill + 3px orange bar. bottom:-2px lifts the bar over
the wrapper's 2px border so they read as one line, matching live. */
body.ua3-product ul.wd-nav-tabs>li.active>a{
color:var(--ua3-orange);background:#fff7ef;
}
body.ua3-product ul.wd-nav-tabs>li.active>a::after{
content:"";position:absolute;left:0;bottom:-2px;
width:100%;height:3px;background:var(--ua3-orange);
}
/* Panel runs the full container width on live — no reading-width clamp. */
body.ua3-product .woocommerce-Tabs-panel{
padding:0;max-width:none;margin:0;
font-size:13.5px;color:#767676;
}
body.ua3-product .woocommerce-Tabs-panel h2,
body.ua3-product .woocommerce-Tabs-panel h3{
font-size:20px;font-weight:700;margin:0 0 14px;
color:var(--ua3-maroon);text-transform:none;
}
body.ua3-product .woocommerce-Tabs-panel p,
body.ua3-product .woocommerce-Tabs-panel li{
font-size:13.5px;line-height:1.6;color:#4a3c34;margin:0 0 12px;
}
body.ua3-product .woocommerce-Tabs-panel table,
body.ua3-product table.woocommerce-product-attributes{
border-radius:var(--ua3-radius-sm);overflow:hidden;
box-shadow:var(--ua3-sh-sm);border:1px solid rgba(0,0,0,.04);
border-collapse:separate;border-spacing:0;width:100%;
}
body.ua3-product .woocommerce-Tabs-panel th,
body.ua3-product .woocommerce-Tabs-panel td{
padding:14px 18px;border:0;border-bottom:1px solid #f1eeeb;
text-align:left;vertical-align:top;background:#fff;font-size:13.5px;
}
body.ua3-product .woocommerce-Tabs-panel tr:last-child th,
body.ua3-product .woocommerce-Tabs-panel tr:last-child td{border-bottom:0}
body.ua3-product .woocommerce-Tabs-panel th{
background:var(--ua3-bg-soft);font-weight:600;width:34%;color:var(--ua3-ink);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1024px){
body.ua3-product table.variations{grid-template-columns:repeat(2,1fr)}
/* old ua-product.css shrinks title/price to 22/23px !important at THIS
breakpoint — restate v3's desktop sizes or 768-1024px inherits its scale */
body.ua3-product .product_title.entry-title{font-size:25px!important}
body.ua3-product .summary p.price,
body.ua3-product .summary .price{font-size:27px!important}
/* 768-1024px: Woodmart keeps the 2-column gallery/summary layout, so the
buy-box sits in a ~330px column. qty + both buttons on one row crushed
them to ~99-167px. Wrap here too — this rule previously started only at
767px, which is below where the squeeze actually happens. */
body.ua3-product .woocommerce-variation-add-to-cart,
body.ua3-product form.cart:not(.variations_form){flex-wrap:wrap!important}
body.ua3-product .single_add_to_cart_button,
body.ua3-product .single_add_to_cart_button.button.alt,
body.ua3-product .wd-buy-now-btn{
flex:1 1 100%!important;width:100%!important;min-width:0!important;
padding:14px 16px!important;
}
}
@media(max-width:767px){
body.ua3-product .summary-inner{
position:static;padding:22px 20px 20px;box-shadow:var(--ua3-sh-sm);
}
body.ua3-product table.variations{grid-template-columns:1fr;gap:13px}
/* qty + 2 buttons in one row is too tight on phones: wrap so the qty box
sits alone and each button gets a full-width tap target.
.button.alt is needed here too — the old ua-product.css sets flex/padding
on that higher-specificity selector, which otherwise squeezed Add to cart
down to 18px while Buy Now (no such old rule) went full width. */
body.ua3-product .woocommerce-variation-add-to-cart,
body.ua3-product form.cart:not(.variations_form){flex-wrap:wrap!important}
body.ua3-product .single_add_to_cart_button,
body.ua3-product .single_add_to_cart_button.button.alt,
body.ua3-product .wd-buy-now-btn{
flex:1 1 100%!important;width:100%!important;min-width:0!important;
padding:14px 16px!important;
}
body.ua3-product .product_title.entry-title{font-size:21px!important}
body.ua3-product .summary p.price,
body.ua3-product .summary .price{font-size:23px!important}
body.ua3-product .ua-course-chips{gap:6px}
body.ua3-product .ua-chip{font-size:12px;padding:6px 11px}
body.ua3-product .ua-spec-table th{width:42%;padding:11px 12px;font-size:12.5px}
body.ua3-product .ua-spec-table td{padding:11px 12px;font-size:12.5px}
/* v3 table: stack each row so long values get the full width instead of
being squeezed into a ~40% column against a nowrap label. */
body.ua3-product .ua3-spec-title{font-size:16px}
body.ua3-product .ua3-spec-scroll{overflow-x:visible}
body.ua3-product .ua3-spec-table,
body.ua3-product .ua3-spec-table tbody,
body.ua3-product .ua3-spec-table tr,
body.ua3-product .ua3-spec-table th,
body.ua3-product .ua3-spec-table td{display:block;width:auto}
body.ua3-product .ua3-spec-table th{
width:auto;white-space:normal;border-right:0;border-bottom:0;
padding:11px 14px 3px;font-size:11.5px;
text-transform:uppercase;letter-spacing:.4px;background:transparent;
}
body.ua3-product .ua3-spec-table tr:nth-child(even) th{background:transparent}
body.ua3-product .ua3-spec-table td{
padding:0 14px 12px;font-size:13px;color:#3a2c25;
border-bottom:1px solid #f4e8e0;
}
body.ua3-product .ua3-spec-table tr:last-child td{border-bottom:0}
/* authored tables stack the same way; their label is td:first-child */
body.ua3-product .ua3-authored{table-layout:auto}
body.ua3-product .ua3-authored td:first-child{
width:auto;background:transparent;border-right:0;border-bottom:0;
padding:11px 14px 3px;font-size:11.5px;
text-transform:uppercase;letter-spacing:.4px;
}
body.ua3-product .ua3-authored tr:nth-child(even) td:first-child{background:transparent}
body.ua3-product .ua3-authored td:first-child strong{font-size:11.5px}
body.ua3-product .ua3-authored td:last-child{
padding:0 14px 12px;font-size:13px;border-bottom:1px solid #f4e8e0;
}
body.ua3-product .ua3-authored tr:last-child td:last-child{border-bottom:0}
body.ua3-product .woocommerce-product-gallery{padding:10px}
body.ua3-product .product-tabs-wrapper{margin-top:0}
/* Woodmart swaps the tab nav for an accordion below 768px. Give the open
row the same cream + orange treatment the active tab uses on desktop. */
body.ua3-product .wd-accordion-title{
font-size:14px;font-weight:600;color:var(--ua3-ink);
border-bottom:1px solid #f0e2d8;
}
body.ua3-product .wd-accordion-title.wd-active{
color:var(--ua3-orange);background:#fff7ef;
}
}
/* =========================================================
RELATED PRODUCTS
Woodmart renders these bare: no card surface, no radius, no
shadow, and both the section heading and the product name
inherit its system-ui stack (measured -apple-system) while
everything around them is Poppins. Give them the same card
treatment the rest of v3 uses.
========================================================= */
body.ua3-product .related-and-upsells{
margin-top:8px;padding-top:34px;border-top:1px solid #f2ece8;
}
body.ua3-product .related-products .wd-el-title,
body.ua3-product .related-and-upsells .wd-el-title{
font-family:Poppins,sans-serif;
font-size:20px;font-weight:700;color:var(--ua3-maroon);
margin:0 0 22px;padding-bottom:10px;
position:relative;text-align:left;
}
body.ua3-product .related-products .wd-el-title::after{
content:"";position:absolute;left:0;bottom:0;
width:46px;height:2px;background:var(--ua3-orange);
}
/* --- card surface --- */
body.ua3-product .related-products .wd-product{
background:#fff;border:1px solid #f0e2d8;border-radius:var(--ua3-radius-sm);
padding:10px 10px 14px;overflow:hidden;
transition:box-shadow .22s ease,transform .18s ease,border-color .22s ease;
}
body.ua3-product .related-products .wd-product:hover{
border-color:#f6d3ae;box-shadow:0 10px 26px rgba(38,20,8,.10);
transform:translateY(-2px);
}
/* image sits on the soft tint so white course art has a defined edge */
body.ua3-product .related-products .wd-product .product-image-link,
body.ua3-product .related-products .wd-product .wd-product-img{
border-radius:10px;overflow:hidden;background:var(--ua3-bg-soft);
margin-bottom:12px;
}
body.ua3-product .related-products .wd-product img{
border-radius:10px;
}
/* --- text --- */
body.ua3-product .related-products .wd-entities-title{
font-family:Poppins,sans-serif;
font-size:13.5px;font-weight:600;line-height:1.42;
margin:0 0 6px;
}
body.ua3-product .related-products .wd-entities-title a{
color:var(--ua3-ink);
/* course names are long — cap at 2 lines so every card is the same height */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
}
body.ua3-product .related-products .wd-entities-title a:hover{color:var(--ua3-orange)}
/* the category list runs to three taxonomies and competes with the name */
body.ua3-product .related-products .wd-product-cats{
font-family:Poppins,sans-serif;
font-size:11.5px;font-weight:500;color:#a09590;
margin:0 0 7px;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
body.ua3-product .related-products .wd-product-cats a{color:inherit}
body.ua3-product .related-products .price,
body.ua3-product .related-products .price .woocommerce-Price-amount{
font-family:Poppins,sans-serif;
font-size:15px;font-weight:700;color:var(--ua3-maroon);
}
body.ua3-product .related-products .price del,
body.ua3-product .related-products .price del .woocommerce-Price-amount{
color:#a09590;font-weight:500;font-size:.75em;opacity:.8;
}
body.ua3-product .related-products .price ins{text-decoration:none}
/* --- button --- */
body.ua3-product .related-products .wd-add-btn>a,
body.ua3-product .related-products .add-to-cart-loop{
font-family:Poppins,sans-serif;
font-size:12.5px!important;font-weight:600!important;
color:var(--ua3-maroon)!important;
border:1.5px solid #f0e2d8!important;border-radius:8px!important;
background:#fff!important;
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
body.ua3-product .related-products .wd-add-btn>a:hover,
body.ua3-product .related-products .add-to-cart-loop:hover{
background:var(--ua3-orange)!important;border-color:var(--ua3-orange)!important;
color:#fff!important;
}
/* --- carousel arrows --- */
body.ua3-product .related-products .wd-btn-arrow{
background:#fff;border:1px solid #f0e2d8;color:var(--ua3-maroon);
box-shadow:var(--ua3-sh-sm);
}
body.ua3-product .related-products .wd-btn-arrow:hover{
background:var(--ua3-orange);border-color:var(--ua3-orange);color:#fff;
}
@media(max-width:767px){
body.ua3-product .related-and-upsells{padding-top:26px}
body.ua3-product .related-products .wd-el-title{font-size:17px;margin-bottom:16px}
body.ua3-product .related-products .wd-product{padding:8px 8px 12px}
body.ua3-product .related-products .wd-entities-title{font-size:13px}
body.ua3-product .related-products .price,
body.ua3-product .related-products .price .woocommerce-Price-amount{font-size:14px}
}
/* Stragglers found by a computed-style sweep: product names inside the
summary column (mini-cart / upsell lists) and the review form's
"Cancel reply" link still inherited Woodmart's system-ui stack.
Family only — sizes and colours untouched. */
body.ua3-product .summary .wd-entities-title,
body.ua3-product .summary .wd-entities-title a,
body.ua3-product .summary-inner .wd-entities-title,
body.ua3-product .summary-inner .wd-entities-title a,
body.ua3-product #cancel-comment-reply-link,
body.ua3-product .comment-reply-title,
body.ua3-product .comment-reply-title a,
body.ua3-product .product-tabs-wrapper a{
font-family:Poppins,sans-serif;
}
/* Woodmart's mobile "more description" panel on related cards renders the
product excerpt, whose runs fell back to system-ui. */
body.ua3-product .related-products .wd-more-desc,
body.ua3-product .related-products .wd-more-desc-inner,
body.ua3-product .related-products .wd-more-desc *{
font-family:Poppins,sans-serif;
}
/* ==========================================================================
19. Sticky add-to-cart bar
Woodmart's own bar (.wd-sticky-btn), untouched by v3 until now. It renders
outside the product summary, so none of the section-scoped rules above
reached it: the bar, thumbnail, title, price and the "Select variation"
button were all still on the theme's -apple-system stack, and the two
buttons disagreed on height (42 vs 49) and radius (0 vs 10).
========================================================================== */
body.ua3-product .wd-sticky-btn,
body.ua3-product .wd-sticky-btn *{
font-family:Poppins,sans-serif;
}
body.ua3-product .wd-sticky-btn{
background:#fff;
/* the 9px ambient shadow alone left the bar floating over light page
content with no defined edge */
border-top:1px solid #f0e2d8;
box-shadow:0 -4px 18px rgba(38,20,8,.10);
padding:10px 0;
}
/* ---- thumbnail ---- */
body.ua3-product .wd-sticky-btn-thumbnail{
border:1px solid #f0e2d8;
border-radius:var(--ua3-radius-sm);
overflow:hidden;
background:#fff;
}
body.ua3-product .wd-sticky-btn-thumbnail img{
border-radius:0;
object-fit:cover;
}
/* ---- title ---- */
body.ua3-product .wd-sticky-btn-info .wd-entities-title,
body.ua3-product .wd-sticky-btn-info .wd-entities-title a{
font-size:14px;
font-weight:600;
color:var(--ua3-ink);
line-height:1.4;
/* course names run long; one line keeps the bar at a fixed height */
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
/* ---- price ---- */
body.ua3-product .wd-sticky-btn-cart .price,
body.ua3-product .wd-sticky-btn-cart .price .amount,
body.ua3-product .wd-sticky-btn-cart .price bdi{
/* was #fc8615 — every other price in v3 is maroon, and orange here
competed with the two orange buttons sitting beside it */
color:var(--ua3-maroon);
font-size:17px;
font-weight:700;
white-space:nowrap;
}
body.ua3-product .wd-sticky-btn-cart .price del,
body.ua3-product .wd-sticky-btn-cart .price del .amount,
body.ua3-product .wd-sticky-btn-cart .price del bdi{
color:#a09590;
font-size:14px;
font-weight:500;
}
body.ua3-product .wd-sticky-btn-cart .price .screen-reader-text{
position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}
/* ---- buttons: one shared shape ---- */
body.ua3-product .wd-sticky-btn-cart .wd-sticky-add-to-cart,
body.ua3-product .wd-sticky-btn-cart .single_add_to_cart_button,
body.ua3-product .wd-sticky-btn-cart .wd-buy-now-btn{
height:46px;
min-height:46px;
padding:0 24px!important;
display:inline-flex;align-items:center;justify-content:center;
border-radius:10px!important;
font-size:13.5px!important;
font-weight:600!important;
/* the theme sets uppercase on .wd-sticky-add-to-cart only, so the pair
read as two different button styles */
text-transform:none!important;
letter-spacing:.2px;
line-height:1;
white-space:nowrap;
transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
/* primary — solid orange.
In the summary, Add to cart is deliberately the OUTLINED secondary (Buy now
is primary there). In this bar it is the only cart action, so it goes solid.
The .button.alt classes are required: the summary rule above carries them
and would otherwise out-specify this one, leaving the button white. */
body.ua3-product .wd-sticky-btn-cart .wd-sticky-add-to-cart,
body.ua3-product .wd-sticky-btn-cart .single_add_to_cart_button,
body.ua3-product .wd-sticky-btn-cart .single_add_to_cart_button.button.alt{
background:var(--ua3-orange)!important;
background-image:none!important;
border:1px solid var(--ua3-orange)!important;
color:#fff!important;
box-shadow:none!important;
}
body.ua3-product .wd-sticky-btn-cart .wd-sticky-add-to-cart:hover,
body.ua3-product .wd-sticky-btn-cart .single_add_to_cart_button:hover,
body.ua3-product .wd-sticky-btn-cart .single_add_to_cart_button.button.alt:hover{
background:#e57608!important;
background-image:none!important;
border-color:#e57608!important;
color:#fff!important;
transform:none;
}
/* secondary — maroon, so the bar has one clear primary action */
body.ua3-product .wd-sticky-btn-cart .wd-buy-now-btn{
background:var(--ua3-maroon)!important;
border:1px solid var(--ua3-maroon)!important;
color:#fff!important;
margin-left:10px;
}
body.ua3-product .wd-sticky-btn-cart .wd-buy-now-btn:hover{
background:#4a0000!important;
border-color:#4a0000!important;
color:#fff!important;
}
body.ua3-product .wd-sticky-btn-cart{
display:flex;
align-items:center;
}
/* the theme sets flex:1.4 on Buy now, so the secondary action stretched
wider than the primary one whenever the row had spare space */
body.ua3-product .wd-sticky-btn-cart .wd-buy-now-btn{
flex:0 0 auto;
}
/* ---- simple products ----
Woodmart clones the summary's whole form.cart into the bar, which drags in
the v3 trust block with it. Stacked, it made the bar 158px tall instead of
~85. Hide it here — it belongs in the summary, not in a one-line bar. */
body.ua3-product .wd-sticky-btn .ua3-micro,
body.ua3-product .wd-sticky-btn .ua3-price-note,
body.ua3-product .wd-sticky-btn .ua3-stage-badges{
display:none!important;
}
/* Woodmart's own responsive rules set flex-wrap:wrap on this form below
1024px, which dropped Buy now onto a second row and doubled the bar's
height. !important is needed to beat those media-query rules. */
body.ua3-product .wd-sticky-btn-cart form.cart{
display:flex!important;
align-items:center!important;
gap:10px;
margin:0!important;
flex-wrap:nowrap!important;
width:auto;
}
body.ua3-product .wd-sticky-btn-cart .quantity{
flex:0 0 auto;
margin:0!important;
/* the stepper stretched to 102px and set the row height */
height:46px;
}
/* Woodmart gives the cloned form's buttons width:100%, which made each one
as wide as the bar and wrapped the row onto two lines at <=1024px. Inside
this bar they are always content-width. */
body.ua3-product .wd-sticky-btn-cart form.cart .single_add_to_cart_button,
body.ua3-product .wd-sticky-btn-cart form.cart .wd-buy-now-btn{
flex:0 0 auto;
width:auto!important;
max-width:none;
}
body.ua3-product .wd-sticky-btn-cart .price{
margin:0 16px 0 0;
display:flex;align-items:center;
}
/* ---- mobile ----
Woodmart hides the thumbnail and title here but keeps the price and BOTH
buttons on one row. The price is 142px and nowrap, and the theme gives
Buy now flex-basis:100%; together they starved "Select Variation" down to
26px. Drop the price (the summary above already shows it) and give the two
buttons an equal basis that outranks the theme's. */
@media(max-width:767px){
body.ua3-product .wd-sticky-btn{
padding:5px 0;
border-top:1px solid #f0e2d8;
}
body.ua3-product .wd-sticky-btn-cart{
width:100%;
gap:8px;
}
body.ua3-product .wd-sticky-btn-cart .price{
display:none!important;
}
body.ua3-product .wd-sticky-btn-cart .wd-sticky-add-to-cart,
body.ua3-product .wd-sticky-btn-cart .single_add_to_cart_button,
body.ua3-product .wd-sticky-btn-cart .wd-buy-now-btn{
/* width:auto is not enough on simple products — Woodmart sets an explicit
100% on the cloned form's buttons, which made both 390px and wrapped
the bar onto two rows */
flex:1 1 50%!important;
width:50%!important;
max-width:50%;
min-width:0;
height:46px;min-height:46px;
padding:0 12px!important;
font-size:13.5px!important;
}
body.ua3-product .wd-sticky-btn-cart .wd-buy-now-btn{
margin-left:0;
}
/* simple products keep the cloned form.cart as the flex row */
body.ua3-product .wd-sticky-btn-cart form.cart{
width:100%!important;
gap:8px;
}
body.ua3-product .wd-sticky-btn-cart form.cart .single_add_to_cart_button,
body.ua3-product .wd-sticky-btn-cart form.cart .wd-buy-now-btn{
flex:1 1 50%!important;
width:50%!important;
max-width:50%;
}
/* the quantity stepper costs ~108px of a 390px row; the summary above
already carries one, so the bar only needs the two actions */
body.ua3-product .wd-sticky-btn-cart .quantity{
display:none!important;
}
}
|