/** * View customizer for WC Product Table Pro tables. * * Two clusters of UI: * 1) "View" button (popover) lets visitors toggle column visibility. * Hides cells matching [data-wcpt-column-name="X"] when the WCPT * root has class `tvc-hide--`. * 2) "Expand all / Collapse all" buttons toggle the WCPT sidebar * filter dropdowns en masse. * * `tvc` = tacuna view customizer. */ /* ---- Column-customizer trigger button + popover ------------------------ */ .tvc-controls { display: flex; gap: 8px; align-items: center; margin: 8px 0 16px; flex-wrap: wrap; /* Wrapper sits BEFORE the WCPT sidebar (float:left) and table * (float:right) in document order, so it takes a full row at the * top with the floats picking up below. width:100% guarantees the * row width regardless of intrinsic content size. */ width: 100%; box-sizing: border-box; } .tvc-btn { display: inline-flex; align-items: center; gap: 6px; background: #f9f9f9; border: 1px solid #d4d4d4; color: #333; padding: 6px 12px; font-size: 0.85rem; font-weight: 500; border-radius: 4px; cursor: pointer; line-height: 1.3; } .tvc-btn:hover, .tvc-btn:focus-visible { background: #ededed; border-color: #b8b8b8; } .tvc-btn[aria-expanded='true'] { background: #ededed; border-color: #aaa; } /* The "popover" name is historical — it now renders as an in-flow * block panel above the table, full-width, that pushes the table * down when expanded. Keeps the same JS open/close mechanics. */ .tvc-popover { display: block; width: 100%; box-sizing: border-box; margin: 8px 0 12px; background: #fff; border: 1px solid #d4d4d4; border-radius: 4px; padding: 16px; } .tvc-popover[hidden] { display: none; } .tvc-popover__title { margin: 0 0 12px; font-size: 0.9rem; font-weight: 600; color: #333; } .tvc-popover__list { list-style: none; margin: 0; padding: 0; /* Multi-column grid so 13+ column names lay out compactly. Each * cell is at least 160px wide; columns auto-fit to the panel * width. On a wide viewport that's ~5–6 columns; narrow ~2. */ display: grid; grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) ); gap: 4px 16px; } .tvc-popover__item { margin: 0; padding: 0; } .tvc-popover__label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.9rem; color: #444; cursor: pointer; } .tvc-popover__label:hover { color: #000; } .tvc-popover__label input[type='checkbox'] { flex: 0 0 auto; margin: 0; } .tvc-popover__actions { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; } .tvc-popover__reset { background: transparent; border: 0; color: #666; font-size: 0.85rem; cursor: pointer; padding: 0; text-decoration: underline; } .tvc-popover__reset:hover { color: #000; } /* ---- Sidebar expand/collapse-all buttons ------------------------------- */ .tvc-sidebar-controls { display: flex; gap: 4px; margin: 0 0 12px; } .tvc-sidebar-btn { flex: 1 1 0; background: transparent; border: 1px solid #d4d4d4; color: #555; padding: 6px 8px; font-size: 0.78rem; font-weight: 500; border-radius: 4px; cursor: pointer; line-height: 1.2; min-height: 32px; } .tvc-sidebar-btn:hover, .tvc-sidebar-btn:focus-visible { background: #f4f4f4; border-color: #aaa; color: #000; } /* ---- Column hide-rules ------------------------------------------------- */ /* * The class `tvc-hide--` is added to the WCPT root when a column is * hidden. We hide both the cell in each row AND the matching heading. * `` is the slugified `data-wcpt-column-name` (e.g. "name-and-descp" * for the column named "name and descp."). * * We use attribute-suffix matching with esc'd values via the * `[data-wcpt-column-name="..."]` selector so the rule is stable even * when WCPT renames a column. The JS computes the slug at runtime. */ [data-wcpt-table-id] [data-wcpt-column-name] { /* anchor — overridden per-column when hidden */ } /* Note: sidebar Expand/Collapse-all does NOT need CSS overrides. The JS * toggles WCPT's own `wcpt-open` class directly on each filter parent; * WCPT's stylesheet handles the height/opacity/transform transitions. */ /* ---- Horizontal scroll for wide tables ----------------------------- */ /* * When visitors opt into multiple attribute columns the natural table * width can exceed the page container. WCPT already wraps the table in * `.wcpt-table-scroll-wrapper-outer` with `overflow-x: auto`. We add: * * 1. `min-width: 100%` on the table (no `width: max-content` — * that's too greedy and balloons name+descp / Capacity columns * to fit their LONGEST single-line content, even when wrapping * would produce a far better layout). * 2. Per-column min-widths so cells don't squish below useful sizes. * 3. Per-column max-widths on cells with potentially long content * (description text, comma-separated attribute term lists) so * they wrap cleanly instead of stretching the table. * * Browser auto-layout grows the table past 100% only when min-widths * collectively can't fit — which is exactly when horizontal scroll * should kick in. * * Scope to the laptop/tablet WCPT views — phone view uses a * single-column compact layout that already handles its own width. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer, [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer > .wcpt-table-scroll-wrapper { overflow-x: auto !important; overflow-y: hidden !important; } /* WCPT injects a rule like * #wcpt- ... .wcpt-table-scroll-wrapper-outer { width: calc(100% - 330px); } * to leave room for the left sidebar. At narrow viewports (the * tablet breakpoint where WCPT collapses the sidebar to Filter/Sort * buttons in the responsive navigation) the calc still subtracts * 330px even though the sidebar is hidden — leaving a wide strip of * empty space on the right of the table. Force full width whenever * the responsive navigation is in use. */ @media ( max-width: 1199px ) { [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer, [data-wcpt-table-id] .wcpt-pagination { width: 100% !important; } } /* Footer row: result_count + pagination + per-page dropdown on the * same line directly below the table. Mirrors the header so visitors * who reach the bottom of a long results list don't have to scroll * back up to change page size. The clones are inserted by * mirrorHeaderToFooter() in JS *inside* `.wcpt-table-scroll-wrapper-outer`, * the right-floated column container — that's what keeps the row * within the table's column instead of dropping below the (often * taller) sidebar. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer > .tvc-footer-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; width: 100%; } /* Per-child main-axis placement. Works for both single-line and wrapped * layouts: when the row fits on one line, the auto-margins push pagination * to center and dropdown to right. When the row wraps to multiple lines, * each item still aligns within its own line via the same auto-margins, * so the dropdown stays right-aligned with the table edge. */ [data-wcpt-table-id] .tvc-footer-row > .wcpt-result-count.tvc-footer-clone { flex: 0 0 auto; margin: 0; } [data-wcpt-table-id] .tvc-footer-row > .wcpt-pagination { flex: 0 0 auto; margin: 0 auto; } [data-wcpt-table-id] .tvc-footer-row > .wcpt-dropdown.tvc-footer-clone { flex: 0 0 auto; margin: 0 0 0 auto; } /* WCPT scopes the dropdown-heading "box" (white bg + border + subtle * shadow + 4px radius) to `.wcpt-header .wcpt-filter-heading`. The * footer clone lives outside `.wcpt-header`, so without these matching * rules the heading renders as a transparent text run. Replicate the * WCPT-default look so footer + header dropdowns are visually * identical. min-height keeps the clone at the same 41px the header * gets from its surrounding bar. */ [data-wcpt-table-id] .tvc-footer-row .wcpt-dropdown.tvc-footer-clone .wcpt-filter-heading { min-height: 41px; background: #fff; border: 1px solid rgba( 0, 0, 0, 0.2 ); border-radius: 4px; box-shadow: rgba( 0, 0, 0, 0.06 ) 2px 2px 2px 0; } /* WCPT sets `user-select: none` on rows and headings to prevent * accidental selection when click-dragging — but this also blocks * visitors from copying SKUs, prices, attribute values, or product * names. Allow text selection on cell content. */ [data-wcpt-table-id] .wcpt-row, [data-wcpt-table-id] .wcpt-heading-row, [data-wcpt-table-id] .wcpt-cell, [data-wcpt-table-id] .wcpt-heading, [data-wcpt-table-id] thead th, [data-wcpt-table-id] tbody td { user-select: text; -webkit-user-select: text; } /* Center card contents in WCPT phone (mobile) view. The phone-view * cell template stacks each row's elements left-to-right by default; * centering looks better on a narrow card. Only applies in * wcpt-device-phone — laptop/tablet keep their column-aligned * layouts. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-row .wcpt-cell { text-align: center; } [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-row .wcpt-cell .wcpt-item-row { justify-content: center; } /* Hide phone-view attribute rows when the product has no value * for that attribute. WCPT skips rendering the .wcpt-attribute * element entirely when there's no term — but the row's * text__col label ("Brand:", "Capacity:", "Style:") still shows, * leaving a dangling label. The three rows are identified by * stable wcpt_data ids (set when the rows were added). */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-row .wcpt-item-row.wcpt-88509287:not(:has(.wcpt-attribute)), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-row .wcpt-item-row.wcpt-1743244094314:not(:has(.wcpt-attribute)), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-row .wcpt-item-row.wcpt-1743244196616:not(:has(.wcpt-attribute)) { display: none; } /* Hide leftover prototype icons in phone view: the freelancer's * placeholder hashtag / truck / thermometer / activity icons in * the SKU/Brand/Capacity/Style rows don't match the labels they * sit next to and add visual noise. Keep the in-stock check icon * (it's a meaningful availability indicator) and the cart icon * inside the button. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-icon-hash, [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-icon-truck, [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-icon-thermometer, [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-icon-activity { display: none; } /* Phone-view cart button: switch the bright-blue WCPT default to * the Tacuna navy that matches the rest of the desktop theme. * Applies to BOTH simple and variable products. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone a.wcpt-button.wcpt-button-cart_ajax, [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone a.wcpt-button.wcpt-button-cart_ajax:hover, [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone a.wcpt-button.wcpt-button-cart_ajax:focus { background: rgb( 11, 60, 73 ) !important; color: #fff !important; } /* For VARIABLE products in phone view, hide the qty +/- input. * The Configure click opens a variation/options popup where * the visitor sets quantity per variation, so an inline qty * control on the listing is redundant and confusing. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-row.wcpt-product-type-variable .quantity { display: none; } /* For VARIABLE products only, replace "Add to cart" with * "Configure" — clicking opens the variation/options selector, * so "Configure" is more accurate. Simple products keep the * standard "Add to cart" wording. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-row.wcpt-product-type-variable a.wcpt-button.wcpt-button-cart_ajax .wcpt-button-label .wcpt-item-row { font-size: 0; } [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-row.wcpt-product-type-variable a.wcpt-button.wcpt-button-cart_ajax .wcpt-button-label .wcpt-icon { font-size: initial; } [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-phone .wcpt-row.wcpt-product-type-variable a.wcpt-button.wcpt-button-cart_ajax .wcpt-button-label::after { content: "Configure"; font-size: 14px; color: #fff; margin-left: 6px; vertical-align: middle; } /* `table-layout: fixed` is the key — auto-layout sizes columns to * content (no matter what width you set on a ), so visitor drag- * resize on the th heading didn't actually change column width. * Fixed-layout uses thead widths exclusively — each column is * exactly the width assigned to its . Setting width via the * native `resize` handle then directly drives the column. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer > .wcpt-table-scroll-wrapper, [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer table { table-layout: fixed !important; min-width: 100% !important; } /* Default + minimum widths per column. With table-layout:fixed the * width IS the column width; min-width is the floor when visitors * drag-resize via the handle. We set both equal here so the * column is at its minimum sensible width by default and the * visitor can only drag WIDER, never narrower than the floor. * * Right-sized per typical content. Capacity gets extra room because * load cells often list many capacities (e.g. "30lb/15kg, 60lb/30kg, * 100lb/60kg, 250lb/125kg") and visitors should see them inline. */ [data-wcpt-table-id] th[data-tvc-col-name="image"] { width: 100px; min-width: 100px; } [data-wcpt-table-id] th[data-tvc-col-name="name and descp."] { width: 280px; min-width: 240px; } [data-wcpt-table-id] th[data-tvc-col-name="add to cart"] { width: 100px; min-width: 100px; } /* All cells word-break so long single-token content (currency * "$1,000.00" or attribute terms) wraps at the column edge instead * of overflowing horizontally. The inner price element in WCPT can * carry its own white-space rules — explicit override here. */ [data-wcpt-table-id] td[data-wcpt-column-name], [data-wcpt-table-id] td[data-wcpt-column-name] * { overflow-wrap: break-word; word-break: break-word; white-space: normal; } /* Attribute columns — right-sized defaults per content profile. */ [data-wcpt-table-id] th[data-tvc-col-name="Brand"] { width: 120px; min-width: 100px; } [data-wcpt-table-id] th[data-tvc-col-name="Capacity"] { width: 220px; min-width: 180px; } [data-wcpt-table-id] th[data-tvc-col-name="Style"] { width: 110px; min-width: 90px; } [data-wcpt-table-id] th[data-tvc-col-name="Full-Scale Output"] { width: 120px; min-width: 100px; } [data-wcpt-table-id] th[data-tvc-col-name="Output Resistance"] { width: 120px; min-width: 100px; } [data-wcpt-table-id] th[data-tvc-col-name="Connector Style"] { width: 140px; min-width: 120px; } [data-wcpt-table-id] th[data-tvc-col-name="IP Rating"] { width: 90px; min-width: 80px; } [data-wcpt-table-id] th[data-tvc-col-name="Material"] { width: 120px; min-width: 100px; } [data-wcpt-table-id] th[data-tvc-col-name="Hole Size"] { width: 100px; min-width: 90px; } [data-wcpt-table-id] th[data-tvc-col-name="Cal. Direction"] { width: 110px; min-width: 90px; } /* Force WCPT's per-term and per-separator divs to render INLINE inside * attribute cells. WCPT defaults each term to `display: flex` so when * the cell is narrow, every term and every "," separator drops to its * own line — producing ugly stacks like: * * 30lb/15kg * , * 60lb/30kg * , * ... * * Inline rendering makes them wrap as natural text with separators * flowing between values. Scope to attribute cols only — the existing * Capacity / Brand / etc. terms render as text, no flex layout needed. */ [data-wcpt-table-id] td[data-wcpt-column-name]:not([data-wcpt-column-name="image"]):not([data-wcpt-column-name="name and descp."]):not([data-wcpt-column-name="properties"]):not([data-wcpt-column-name="add to cart"]) .wcpt-attributes, [data-wcpt-table-id] td[data-wcpt-column-name]:not([data-wcpt-column-name="image"]):not([data-wcpt-column-name="name and descp."]):not([data-wcpt-column-name="properties"]):not([data-wcpt-column-name="add to cart"]) .wcpt-attribute-term, [data-wcpt-table-id] td[data-wcpt-column-name]:not([data-wcpt-column-name="image"]):not([data-wcpt-column-name="name and descp."]):not([data-wcpt-column-name="properties"]):not([data-wcpt-column-name="add to cart"]) .wcpt-attribute-term-separator { display: inline !important; } /* ---- Sticky horizontal scrollbar at viewport bottom ---------------- */ /* * When a tall WCPT table overflows the viewport vertically, its * native horizontal scrollbar lives below the fold and is unreachable * without scrolling vertically first. We attach a fixed-position * mirror scrollbar pinned to the viewport bottom (JS in * wcpt-view-customizer.js handles the wiring; this CSS is just the * visual layer). It's only shown when the WCPT table is in viewport * AND its natural scrollbar is below the fold. */ .tvc-sticky-hscroll { position: fixed; bottom: 0; height: 24px; overflow-x: auto; overflow-y: hidden; background: rgba( 255, 255, 255, 0.96 ); border-top: 1px solid #d4d4d4; z-index: 999; display: none; } .tvc-sticky-hscroll[hidden] { display: none; } .tvc-sticky-hscroll > div { height: 1px; /* arbitrary — only matters that it's > 0 so the parent's overflow is calculated correctly. The width of this inner div is set in JS to match table.scrollWidth. */ } /* ---- Visitor column resize ----------------------------------------- */ /* * Native CSS column resize via the table heading. `resize: horizontal` * gives the browser-default corner drag handle on each ; with * auto-layout tables, setting width on a influences the column * preferred width, so dragging actually resizes the column visually. * * Headings need `overflow: hidden` for `resize` to take effect — long * heading text may clip at small widths, but visitors who care about * a column can just drag it wider. Default min-width on the th * matches the cell min-widths defined above. * * Note: native resize does not persist across reloads. A future * enhancement could store widths in localStorage on resize-end. For * now: per-session is enough. */ [data-wcpt-table-id] th[data-tvc-col-name] { resize: horizontal; overflow: hidden; min-width: 80px; } /* No resize on the three required columns (image / name+descp / * add-to-cart). The combined Price+Cart column is fixed-width * sticky-right; image and name+descp are layout-driving. */ [data-wcpt-table-id] th[data-tvc-col-name="image"], [data-wcpt-table-id] th[data-tvc-col-name="name and descp."], [data-wcpt-table-id] th[data-tvc-col-name="add to cart"] { resize: none; } /* ---- Heading-row visual styling -------------------------------------- * * Sticky/pinned heading on vertical scroll is delivered by WCPT's * own FrzTbl integration via shortcode attrs `_freeze_heading` * + `_freeze_heading_offset` (set on the page's product_table * shortcode — see migrations/parametric-products/shortcode.txt). FrzTbl * clones the thead into a `position: fixed` overlay * (.frzTbl-fixed-heading-wrapper-outer) above the table; CSS-only * `position: sticky` doesn't work here because WCPT's * `.wcpt-table-scroll-wrapper` has `overflow: auto/hidden` for * horizontal scrolling and that establishes a scroll container for * sticky descendants — they get trapped inside it instead of pinning * to the viewport. * * The styles below (white bg + 1px inset bottom shadow) apply to the * original in-flow heading AND get carried over into the FrzTbl clone * because FrzTbl deep-clones the thead element. */ [data-wcpt-table-id] thead th, [data-wcpt-table-id] tr.wcpt-heading-row th { background: #fff; box-shadow: inset 0 -1px 0 #e0e0e0; } /* ---- Product title and short description font sizes -------------- */ /* * The laptop name+descp cell renders the product title via a * `title` element type (rendered as a.wcpt-title-link inside * .wcpt-title) and the short description via a `content` element * type (rendered as `.wcpt-content` with `.wcpt-pre-toggle` / * `.wcpt-post-toggle` children when WCPT's "more/less" toggle is * enabled). Title at 16px, short description at 14px. * !important to override any inline style WCPT writes from * postmeta. * * Scope the description rule to the name+descp cell so we don't * accidentally hit `.wcpt-content` instances elsewhere in WCPT * (filter chips, modals, etc.). */ [data-wcpt-table-id] .wcpt-title-link, [data-wcpt-table-id] .wcpt-title, [data-wcpt-table-id] a[class*="wcpt-title"] { font-size: 16px !important; } [data-wcpt-table-id] td[data-wcpt-column-name*="name and descp"] .wcpt-content, [data-wcpt-table-id] td[data-wcpt-column-name*="name and descp"] .wcpt-pre-toggle, [data-wcpt-table-id] td[data-wcpt-column-name*="name and descp"] .wcpt-post-toggle, [data-wcpt-table-id] .wcpt-short-description, [data-wcpt-table-id] .wcpt-short_description { font-size: 14px !important; } /* Hide WCPT's preset price-range radio options ("Any price", * "Up to $25", "$26 - $50", etc.) — the slider widget below them * (with class .wcpt-range-options-wrapper) is the keeper. The * presets duplicate filtering capability and clutter the sidebar. */ [data-wcpt-table-id] .wcpt-range-filter .wcpt-dropdown-option:not(.wcpt-range-options-wrapper) { display: none; } /* Toolbar dropdowns (per-page selector etc.) need a higher z-index * than our sticky thead, otherwise their menus open underneath the * column-headers row when scrolled. */ [data-wcpt-table-id] .wcpt-navigation .wcpt-dropdown-menu, [data-wcpt-table-id] .wcpt-navigation .wcpt-dropdown-menu-wrap { z-index: 10; } /* ---- Icon-only "Add to cart" button -------------------------------- */ /* * WCPT renders the cart button as containing * a with both an SVG icon and the * text "Add to cart". With the column narrowed to ~70px, the text is * unnecessary noise — the cart icon alone is universally understood * and we save a lot of horizontal space. * * font-size: 0 on the label collapses the text to zero width while * the SVG icon (explicit width/height) stays visible. */ [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] a.wcpt-button .wcpt-button-label { font-size: 0; } [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] a.wcpt-button .wcpt-icon { font-size: initial; } /* Cart button width = qty box width, so the column reads as a tidy * 2-row stack of equal-width controls. WCPT's inner containers * (.wcpt-cell-val, .wcpt-item-row, .quantity) all need explicit * width:100% — without it, .wcpt-button shrinks to icon width (~6px) * and .quantity fits content (~28px) inside an 80px cell. */ [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .wcpt-cell-val, [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .wcpt-item-row { display: block; width: 100%; box-sizing: border-box; } /* Lock the qty wrapper and the cart button to the SAME explicit * width, centered in the cell. The qty wrapper renders larger than * 100% by default because the +/- spans add their natural widths * to whatever the input takes. Forcing the same fixed width on * both makes them visually paired (and stops qty from overflowing * the cell). */ [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .quantity, [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] a.wcpt-button { width: 70px !important; max-width: 70px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Price rendering rules: * * - Single price ($3.52): one line. * - Sale price (regular crossed out + sale): one line. * - Variable price RANGE ($1,000–$10,000): low+dash on line 1, * high on line 2 — stacks naturally without making the column * too wide. * * WCPT renders `.wcpt-price` as `display: inline-flex` and * `.wcpt-price > .wcpt-item-row` as `display: contents !important`, * so the price spans become flex items of the .wcpt-price flex * container. To wrap the high price onto its own line: * - `.wcpt-price` gets `flex-wrap: wrap` * - `.wcpt-highest-price` gets `flex-basis: 100%` so it forces * itself onto a new flex line below the lowest+dash. * * Each price piece keeps `nowrap` so amounts don't break mid-number. */ [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .wcpt-price { flex-wrap: wrap !important; justify-content: center; } [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .wcpt-price .wcpt-regular-price, [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .wcpt-price .wcpt-sale-price, [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .wcpt-price .wcpt-lowest-price, [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .wcpt-price .wcpt-highest-price, [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .wcpt-price .wcpt-text { white-space: nowrap; } [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .wcpt-price .wcpt-highest-price { flex-basis: 100%; text-align: center; } [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .quantity { display: flex; align-items: center; padding: 0; } [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] .quantity input.qty { flex: 1 1 auto; min-width: 0; width: auto; text-align: center; } [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"] a.wcpt-button { display: flex !important; align-items: center; justify-content: center; min-height: 34px; padding-left: 0; padding-right: 0; } /* ---- Sticky right columns (Price + Add to cart) -------------------- */ /* * Pin the two rightmost columns so they remain visible while visitors * horizontal-scroll the wider attribute table. Add-to-cart sticks at * right: 0 (the very edge); Price sticks at right: * so it sits flush against the cart column. * * White background + box-shadow on the left edge gives a subtle * separation from scrolling content. z-index layering: * thead non-sticky-right cells: z-index 5 (sticky top) * thead sticky-right cells: z-index 6 (sticky top + right) * tbody sticky-right cells: z-index 3 (sticky right only) * tbody non-sticky cells: default */ [data-wcpt-table-id] td[data-wcpt-column-name="add to cart"], [data-wcpt-table-id] th[data-tvc-col-name="add to cart"] { position: sticky; right: 0; background: #fff; z-index: 3; box-shadow: -2px 0 4px rgba( 0, 0, 0, 0.04 ); padding-left: 10px !important; padding-right: 10px !important; } /* Sticky-right thead cells need to be ABOVE the non-sticky thead row * during horizontal scroll AND above the body sticky cells during * vertical scroll. */ [data-wcpt-table-id] thead th[data-tvc-col-name="add to cart"], [data-wcpt-table-id] tr.wcpt-heading-row th[data-tvc-col-name="add to cart"] { z-index: 6; } /* ---- Model number / SKU font size --------------------------------- */ /* * The SKU element under the product image was stored in wcpt_data * with `font-size: 11px` (set by the original migration). Bump to * 12px so the model number is more readable. !important overrides * the inline style WCPT writes from wcpt_data. */ [data-wcpt-table-id] .wcpt-sku { font-size: 12px !important; } /* ---- Column dividers ---------------------------------------------- */ /* * Light vertical grey lines between cells in laptop / tablet view to * make column boundaries easier to follow on dense rows. Skip the * sticky-right Add-to-cart column (its left edge already has a * box-shadow as separator) and the last cell. Phone view (stacked * cards) doesn't need column dividers — every card is its own * boundary. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-laptop tbody td:not(:last-child):not([data-wcpt-column-name="add to cart"]), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-laptop thead th:not(:last-child):not([data-tvc-col-name="add to cart"]), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-laptop tr.wcpt-heading-row th:not(:last-child):not([data-tvc-col-name="add to cart"]), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-tablet tbody td:not(:last-child):not([data-wcpt-column-name="add to cart"]), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-tablet thead th:not(:last-child):not([data-tvc-col-name="add to cart"]), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-tablet tr.wcpt-heading-row th:not(:last-child):not([data-tvc-col-name="add to cart"]) { border-right: 1px solid #ececec; } /* ---- Row separator: cell border instead of row box-shadow -------- * * WCPT draws a `box-shadow: 2px 2px 2px rgba(0,0,0,0.05)` on each * row to separate products. The shadow paints across the FULL row * width — which equals the wrapper width (~1170px) — even when * visible columns only sum to e.g. 820px. Result: the horizontal * separator extends past the rightmost visible cell into empty * space. * * Suppress the row shadow and put a 1px bottom border on each cell * instead. Hidden cells (display:none) render nothing → no border * → the line naturally ends at the last visible cell. * * Skip the sticky-right Add-to-cart cell so the border doesn't * disagree with its existing left-edge box-shadow. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-laptop .wcpt-row, [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-tablet .wcpt-row { box-shadow: none !important; } [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-laptop tbody td:not([data-wcpt-column-name="add to cart"]):not([data-tvc-col-name="add to cart"]), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-tablet tbody td:not([data-wcpt-column-name="add to cart"]):not([data-tvc-col-name="add to cart"]) { border-bottom: 1px solid #ececec !important; } /* ---- Tighten row spacing ------------------------------------------- * * WCPT injects `margin-bottom: 15px` on every `.wcpt-row` and * `.wcpt-heading-row` for visual breathing room between rows. With * the cell-border row separator above, the 15px gap pushes the * border down into empty space between rows, so the divider reads * as a thin line floating mid-gap instead of pinned to the bottom * of each row's content. Collapse the gap so the border reads * tight against the row content. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-laptop :is(.wcpt-row, .wcpt-heading-row), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-tablet :is(.wcpt-row, .wcpt-heading-row) { margin-bottom: 0 !important; } /* ---- Compact cell padding ------------------------------------------ * * WCPT defaults to `padding: 20px 15px` on every cell — too generous * for a dense parametric comparison table where the user wants to * scan many products quickly. Drop to 5px on all sides for both * heading cells and body cells in laptop and tablet device classes. */ [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-laptop :is(.wcpt-cell, .wcpt-heading), [data-wcpt-table-id] .wcpt-table-scroll-wrapper-outer.wcpt-device-tablet :is(.wcpt-cell, .wcpt-heading) { padding: 5px !important; } /* ---- Price-filter range inputs: $ currency prefix ------------------ * * The price filter renders two boxes for min/max * with placeholders "Min" and "Max". Bake a "$" into each input's own * left-padding zone via an SVG background-image — the "$" stays * inside each input regardless of layout (no absolute-positioning * math against an unpredictable flex/grid layout, which previously * caused the max-input "$" to drift over the value text). */ .wcpt-range-filter .wcpt-range-input-wrapper .wcpt-range-input-min, .wcpt-range-filter .wcpt-range-input-wrapper .wcpt-range-input-max { padding-left: 1.3em; background-image: url("data:image/svg+xml;utf8,$"); background-position: 0.4em center; background-repeat: no-repeat; background-size: 0.7em auto; }