/* Filter Everything Pro renders the shop's own current category as a checked + disabled checkbox (see wpc-clear-locked-category.js for why), with no built-in way to leave it. The grey/washed-out look isn't from the plugin's own CSS (confirmed: no accent-color or opacity rule targets it) — it's Chrome/Safari's native UA styling for , applied as a desaturating filter regardless of author opacity/accent-color rules. Since that JS makes the whole row clickable to clear the filter, this checkbox isn't really "disabled" from the visitor's perspective — filter:none strips that native dimming, restoring the exact same solid blue checked look every other selected filter term already has (verified directly: this alone, no accent-color override needed, matches pixel-for- pixel). No visual marker beyond the pointer cursor. */ .wpc-term-disabled.wccm-term-locked-clearable { cursor: pointer; } .wpc-term-disabled.wccm-term-locked-clearable input[type="checkbox"]:disabled { opacity: 1 !important; -webkit-filter: none !important; filter: none !important; } @media (max-width: 1023px) { .shop-content { padding-left: 16px; padding-right: 16px; } /* PDP overflowing wider than the mobile viewport on products with a long name/breadcrumb (e.g. "S-SMACAS – Aluminium Crossover Access Step for Containers", 4-level category breadcrumb). Root cause: the parent theme (plant3, style-m.css) sets `body{display:flex;flex-direction: column}`, and
is body's direct flex child. A flex item's default min-width is `auto`, NOT 0 — meaning the browser refuses to shrink it narrower than its longest unbreakable run of content, even though every element in the chain has normal (non-nowrap) white-space and .wccm-pdp-breadcrumb has no white-space:nowrap either. Long Thai compound phrases with no natural break point (like the breadcrumb trail here) become that unbreakable run, silently forcing
— and everything inside it — wider than the screen. This is the textbook flexbox "min-width:auto" sizing bug (CSS Flexbox spec ยง4.5), confirmed by testing with JS disabled entirely (rules out any script resizing anything) and reproducing a 537px effective viewport on a 390px device. Only shows up on products with unusually long names/categories, which is why testing on other products didn't surface it. Fix: override the flex item's min-width back to 0 (mobile only — body is only flex at this breakpoint, per the desktop layout in plant3's other CSS) so it's free to shrink to the viewport and let its own content wrap normally instead. UPDATE: min-width:0 alone was not enough — confirmed by testing with real WebKit (not Chromium's mobile *emulation*, which was silently giving false-positive "fixed" results this whole investigation until switched to an actual WebKit engine to match real iOS Safari). Because .shop-main is a flex item, its `width:auto` uses flex shrink-to-fit sizing, not "fill the containing block" sizing — min-width:0 only removes the floor on how far it CAN shrink, it doesn't make it actually shrink to fit. Explicit `width:100%` is what makes it (and the block descendants inside it, like .wccm-pdp-inner, which inherit the same shrink-to-fit behavior transitively once any block ancestor up the chain is sized by content) treat 100% of the flex container's cross size as their basis instead of their own content width. Re-verified with WebKit after this change: window.scrollX stays 0 even after scrollTo(9999,0) — the page cannot be scrolled sideways at all any more, on the actual product that exposed this bug. */ .shop-main { min-width: 0; width: 100%; } } /* The parent theme (plant3, woo-m.css) puts `margin: 0 auto 40px` on every
— which covers ALL WooCommerce pages, including the PDP and any page hosting [wccm_related_grid]. That 40px is meant as generic breathing room before the footer, but it stacks with related's own bottom spacing (padding-bottom + the dots' margin-top) into what reads as one large dead gap on pages where the related-products section is the very last thing before the footer — which is always true for the PDP, and true for /add-to-quote-product-list/ once the shortcode replaces the old carousel in that spot. Removing it globally would affect every other WooCommerce page (shop, cart, account…), so instead zero it out only when a .wccm-pdp-related is the last element in
. */ main.shop-main:has(.wccm-pdp-related:last-child) { margin-bottom: 0; } /* Same problem, different wrapper: /add-to-quote-product-list/ (a plain page, not a WooCommerce template) uses
with
inside — and .page-content carries its own `margin-bottom: var(--s-space)` (16px on mobile) from the parent theme. Zero it out under the same condition. */ .page-content:has(> .wccm-pdp-related:last-child), .page-content:has(.wccm-pdp-related.wccm-related-standalone:last-child) { margin-bottom: 0; } /* [wccm_related_grid] shortcode (inc/related-products-grid.php) reuses the PDP's .wccm-pdp-related markup verbatim to get its track/arrows/dots styling for free. On the PDP, that section sits inside .wccm-pdp-inner (max-width:1200px, not full-bleed), so pdp.css intentionally breaks it out to 100vw (width:100vw; position:relative; left:50%; margin-left:-50vw) to span the full viewport width there. On /add-to-quote-product-list/ the shortcode instead sits inside a GenerateBlocks wrapper that already has an `alignfull` class — already full-bleed — so stacking a SECOND 100vw breakout on top of an already-full-bleed parent produced a too-wide box, causing page-wide horizontal overflow (the broken/non-responsive layout: the quote form above it visibly distorted too, because one oversized element widens the whole page's scrollable area). Undo the breakout only in this context (marked by wccm-related-standalone) — its parent is already full width, so this section just needs to fill 100% of it, not reach past it. Content max-width/centering (.wccm-pdp-related > *, .wccm-related-head, the track) is untouched and still applies. */ .wccm-pdp-related.wccm-related-standalone { width: 100% !important; position: static !important; left: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* The GenerateBlocks wrapper this shortcode sits in (.gb-element-dd9584df, dynamic per-page CSS at /wp-content/uploads/generateblocks/style-*.css) is itself `display:flex; flex-direction:column; align-items:center`. Its .woocommerce child (added so the shop-card CSS selectors match — see related-products-grid.php) is a flex item with no width rule, so with align-items:center it shrank to fit its content instead of filling the row — which in turn gave .wccm-pdp-related's own children a narrower box than intended, so the "2 cards per row, fixed calc() width" math in pdp.css's mobile block (max-width:767px) computed against that shrunk width and the cards fell back to wrapping like a grid instead of forming one scrollable row. Force the flex item to fill the row. */ .gb-element-dd9584df > .woocommerce { width: 100%; align-self: stretch; } /* .gb-element-dd9584df itself carries 16px of its own left/right padding on mobile (GenerateBlocks' own generated CSS, style-727.css). pdp.css's mobile block ALSO gives .wccm-pdp-related ul.products.wccm-related-track 16px of left/right padding of its own (line ~541), intended to be the ONLY inset — on the PDP that track sits inside a 100vw breakout with no other ancestor padding in play. Stacked here, the two 16px paddings compounded into 32px per side (64px total) instead of 16px per side, narrowing the row enough that the fixed-width card math left too little room for the button label — "เพิ่มในใบเสนอราคา" got truncated with an ellipsis on this page but not on the PDP, despite identical button CSS. Zero out the outer padding here so only the track's own 16px applies, matching the PDP's actual usable width exactly. */ @media (max-width: 767px) { .gb-element-dd9584df:has(> .woocommerce .wccm-related-standalone) { padding-left: 0; padding-right: 0; } } /* wc-carousel-manager's fe-filter.css pins the "เพิ่มในใบเสนอราคา" button to the card bottom via `margin-top: auto` on .elex-rqst-quote-front-wrap, but that only works if .products li.product is itself a flex column — the parent theme (plant3) never makes it one (.products is a grid, and .products li has no display:flex), so the auto-margin is a no-op and the button ends up right under the (variable-length) title instead. */ .woocommerce ul.products li.product { display: flex; flex-direction: column; } /* Product photos have different native aspect ratios (a flat single sachet vs. two tall bottles side-by-side), and .products img only sets width:100% with no fixed height — so the image area's height varies per card, pushing the title/button of shorter-image cards to start higher than their same-row neighbours. Fix the image area to a shared square so every card's title starts at the same y-position regardless of the photo's shape. IMPORTANT: WooCommerce's own markup puts the AND the

title INSIDE THE SAME (confirmed by inspecting the real rendered DOM, not assumed from the template source) — an earlier version of this rule set aspect-ratio/background/padding on that itself, which squeezed the title text into the same fixed square as the image instead of leaving it below (visible as the white background bleeding down over the title, and the title overlapping the image by ~8px). Fixed by wrapping just the server-side in a (see inc/product-card-transparency.php) and styling only that span — the title, sitting after the span inside the same link, is completely unaffected now. */ .woocommerce ul.products li.product .wccm-thumb { display: block; flex-shrink: 0; aspect-ratio: 1 / 1; /* Inset from the card's own edges (not just padding around the photo inside the box) — user's reference screenshot showed the image square nearly touching the card border on all sides and asked for a visible gap there instead, on top of the existing internal padding around the photo itself. */ margin: 0 12px 12px; width: calc(100% - 24px); padding: 8px; box-sizing: border-box; border-radius: 12px; overflow: hidden; /* White backdrop on every card regardless of the photo's own transparency — an earlier version only added this for photos with no real alpha channel (data-wccm-opaque="1"), reasoning that a genuinely transparent PNG already blends into whatever's behind it. User explicitly asked for uniform white on every card instead, for visual consistency across the grid regardless of which photos happen to be cut-outs. The data-wccm-opaque attribute (see inc/product-card-transparency.php) is still written to each card by the PHP filter — kept in case a future need for the distinction comes back — it's just not read by this rule anymore. */ background: #fff; } .woocommerce ul.products li.product .wccm-thumb img { width: 100%; height: 100%; object-fit: contain; } /* wc-carousel-manager's fe-filter.css shrinks the quote-button label to font-size:11px + line-height:1.2 + nowrap so it stays on one line on mobile — but with long labels ("เพิ่มในใบเสนอราคา" / "ดูใบเสนอราคา") that line-height still clips the descenders, and text-overflow:ellipsis can truncate mid-word. Raise the button to a fixed height (vertical centering comes from the plugin's own `display:flex; align-items:center` on this element) and shrink the font so the label still fits one line without triggering the ellipsis truncation. line-height:normal (a prior version of this fix) turned out to still clip Thai glyphs specifically: "normal" computes to roughly 1.15-1.2x the font-size in most browsers, tuned for Latin script's shorter ascender/ descender range — Thai tone marks and above/below vowel signs (ไม้เอก, สระอิ, สระอุ, etc., e.g. the ไ in "ใบเสนอราคา") need more like 1.5x to render without visually clipping against the line box edge. Switched to an explicit 1.5 and bumped the button 2px taller (32px -> 34px) to give that taller line-box room without changing how the row looks next to the icon — align-items:center absorbs the height increase. */ @media (max-width: 767px) { .woocommerce ul.products li.product .elex-rqst-quote-front-wrap .button, .woocommerce ul.products li.product .elex-rqst-quote-front-wrap .w-100 > a, .woocommerce ul.products li.product .elex-rqst-quote-front-wrap .w-100 > button, .woocommerce ul.products li.product .elex-rqst-quote-front-wrap .w-100 > a > button, .woocommerce ul.products li.product .elex-rqst-quote-front-wrap a.button, .woocommerce ul.products li.product .elex-rqst-quote-front-wrap a > button { min-height: 34px !important; height: 34px !important; } .woocommerce ul.products li.product .elex-rqst-quote-front-wrap button, .woocommerce ul.products li.product .elex-rqst-quote-front-wrap a, .woocommerce ul.products li.product .elex-rqst-quote-front-wrap button span, .woocommerce ul.products li.product .elex-rqst-quote-front-wrap a span { font-size: 10px !important; line-height: 1.5 !important; } /* The "ดูใบเสนอราคา" (View Quote List) button sits one DOM level deeper than "เพิ่มในใบเสนอราคา": .w-100 > A > button, vs. add_to_quote's .w-100 > button directly. The rule above stretches the