selected · +$X.XX" */
.product-addon .lafka-addon-summary {
margin-left: auto;
font-size: 11px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--lafka-pdp-muted);
white-space: nowrap;
/* Empty by default — JS populates after selection. Reserve space so the
caret doesn't jump when text appears. */
min-height: 1em;
}
.product-addon .lafka-addon-summary.is-active {
color: var(--lafka-pdp-accent);
font-weight: 600;
}
/*
* Collapsed state: hide the option list entirely. The heading bar
* remains visible (and clickable to re-expand). Padding shrinks so
* the collapsed group is compact.
*/
.product-addon[data-collapsed="true"] {
padding-bottom: 8px;
}
.product-addon[data-collapsed="true"] p.form-row,
.product-addon[data-collapsed="true"] .lafka-addon-limit-message,
.product-addon[data-collapsed="true"] .addon-description {
display: none;
}
/*
* Expanded state on desktop: 2-column grid. Cuts the vertical scroll
* roughly in half for groups with 16+ items. Each form-row becomes one
* grid cell; heading/description span the full width.
*
* Mobile (default block flow) keeps 1 column — narrower viewport,
* legibility priority.
*/
@media (min-width: 721px) {
.product-addon:not([data-collapsed="true"]) {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 16px;
row-gap: 0;
}
.product-addon:not([data-collapsed="true"]) .addon-name,
.product-addon:not([data-collapsed="true"]) .addon-description {
grid-column: 1 / -1;
}
/* In 2-col mode, the visual rhythm comes from the gap, not borders.
Drop the inter-row borders to clean it up. */
.product-addon:not([data-collapsed="true"]) p.form-row {
border-top: none;
}
}
/* Description block (uncommon — only when operator filled it in) */
.product-addon .addon-description {
font-size: 12px;
color: var(--lafka-pdp-muted);
margin: 0 0 8px;
line-height: 1.45;
}
.product-addon .addon-description p {
margin: 0;
}
/* Each option row. Plugin emits
wrapping a single . We override the WC form-row defaults to make
this a clean list item with name on the left and price on the right. */
.product-addon .form-row.addon-wrap-,
.product-addon p.form-row {
margin: 0;
padding: 0;
border-top: 1px solid rgba(0, 0, 0, .06);
}
.product-addon p.form-row:first-of-type {
border-top: none;
}
.product-addon p.form-row > label {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 2px;
cursor: pointer;
/* lafka-theme has site-wide `label { font-size: 12px !important }`
that cascades through. Use !important to win the cascade — this
is intentional, not a smell. */
font-size: 13px !important;
color: var(--lafka-pdp-text);
margin: 0;
line-height: 1.4;
transition: color .12s;
/* Override site-wide `label { text-transform: uppercase }` if the
theme decides addon options should be sentence case. Currently
leaving uppercase to match the rest of the PDP design tokens. */
}
.product-addon p.form-row > label:hover {
color: var(--lafka-pdp-accent-dark);
}
/* Native checkbox/radio: visible, sized to feel tappable on mobile,
accent-tinted when checked. */
.product-addon p.form-row > label input[type="checkbox"],
.product-addon p.form-row > label input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
flex: 0 0 auto;
accent-color: var(--lafka-pdp-accent);
cursor: pointer;
}
/* Option image (when an option has a custom image attachment). */
.product-addon p.form-row > label .lafka-addon-image-icon {
flex: 0 0 auto;
width: 24px;
height: 24px;
object-fit: contain;
}
/* Price block: wraps "($wc_price)" in
(added in lafka-plugin v8.17.3). Targeting the wrapper rather than
the inner .woocommerce-Price-amount keeps the text-node parens part
of the element being right-aligned — without this, flex margin-left:
auto leaves the bare "(" stuck to the left of the label and orphans
")$3.50" on the right with a huge whitespace gap.
Visual choice (theme): drop the parens and present as "+$3.50".
Plugin still emits "(...)" as the back-compat default for themes
that don't override. We hide the parens by zeroing font-size on
the wrapper and restoring it on the inner price span. */
.product-addon p.form-row > label .lafka-addon-price {
margin-left: auto;
font-size: 0;
font-weight: 600;
color: var(--lafka-pdp-muted);
white-space: nowrap;
}
.product-addon p.form-row > label .lafka-addon-price::before {
content: "+";
font-size: 13px;
margin-right: 1px;
font-weight: 500;
color: inherit;
}
.product-addon p.form-row > label .lafka-addon-price .woocommerce-Price-amount {
font-size: 13px;
}
.product-addon p.form-row > label .lafka-addon-price sup {
font-size: 0.7em;
vertical-align: super;
font-weight: 500;
}
.product-addon p.form-row > label:has(:checked) .lafka-addon-price {
color: var(--lafka-pdp-accent);
}
.product-addon p.form-row > label:has(:checked) {
color: var(--lafka-pdp-text);
font-weight: 500;
}
/* Vegan / dietary marker emoji: WP renders 🌱 etc. as Twemoji {name}: {value} , which means empty `name` becomes
* a : — a stray colon on its own line.
*
* lafka-theme already hides this for the legacy .cart-info layout +
* the mini-cart widget. The modern WC cart shortcode uses td.product-
* name directly (no .cart-info wrapper), which the parent rule misses.
* Patch the gap here.
*
* Defense-in-depth: also hide via [class$="variation-"] in case the
* exact class differs across WC versions.
*/
.woocommerce-cart-form td.product-name dl.variation dt.variation-,
.woocommerce-cart-form td.product-name dl.variation dt[class="variation-"],
.cart_item td.product-name dl.variation dt.variation-,
.cart_item td.product-name dl.variation dt[class="variation-"] {
display: none;
}
/* The corresponding for the orphan dt should indent slightly so
it visually associates with the parent group above it, instead of
appearing as a top-level entry. */
.woocommerce-cart-form td.product-name dl.variation dt.variation- + dd,
.cart_item td.product-name dl.variation dt.variation- + dd {
padding-left: 1em;
color: var(--lafka-pdp-muted, #5e5e5e);
}
/* === PDP container (W4-T20) === */
.lafka-pdp__main { max-width: 1280px; margin: 0 auto; padding: 24px 16px; }
.lafka-pdp__breadcrumb { font-size: 11px; color: var(--lafka-pdp-muted); margin-bottom: 16px; }
.lafka-pdp__breadcrumb a { color: inherit; }
.lafka-pdp__hero {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
margin-bottom: 32px;
}
@media (max-width: 960px) {
.lafka-pdp__hero { grid-template-columns: 1fr; gap: 16px; } }
/* === PDP layout polish v5.8.5 — fix spacing issues observed post-deploy === */
/* Hero grid: align both columns at top so right column doesn't get stretched
into a tall empty space below the summary card when the gallery image is
taller than the summary content. */
.lafka-pdp__hero {
align-items: start;
}
/* Cap gallery image height so the right-column summary stays in proportion.
Without this, a 1200x1200 native pizza photo dominates the hero and the
summary card looks like a tiny widget on the side. */
.lafka-pdp__gallery,
.lafka-pdp__gallery .woocommerce-product-gallery,
.lafka-pdp__gallery figure {
align-self: start;
}
.lafka-pdp__gallery img {
max-height: 540px;
width: 100%;
height: auto;
object-fit: contain;
}
/* Summary card: tighten internal spacing so it feels content-dense rather
than padded out with whitespace. */
.lafka-pdp-summary {
padding: 16px 18px;
}
.lafka-pdp-summary__title {
font-size: 24px;
margin: 0 0 4px;
}
.lafka-pdp-summary__short {
margin-bottom: 10px;
}
.lafka-pdp-summary__price {
font-size: 24px;
margin: 6px 0 12px;
}
.lafka-pdp-summary__cart-row {
margin-top: 12px;
}
.lafka-pdp-summary__trust {
margin-top: 10px;
padding-top: 10px;
}
/* Picker block: reduce vertical rhythm */
.lafka-pdp-picker {
margin: 0 0 12px;
}
.lafka-pdp-picker__chips {
gap: 4px;
}
.lafka-pdp-chip__inner {
padding: 6px 10px;
min-width: 56px;
}
.lafka-pdp-chip__name {
font-size: 12px;
}
.lafka-pdp-chip__price {
font-size: 10px;
margin-top: 1px;
}
/* Upsell row: switch to auto-fit so 2-3 cards don't leave a yawning gap on
the right. minmax(180px, 1fr) keeps cards a reasonable size while letting
the row collapse gracefully when fewer than 4 candidates are available. */
.lafka-pdp-upsell__grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (max-width: 720px) {
.lafka-pdp-upsell__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Tabs: adjust padding so panel content doesn't look orphaned */
.lafka-pdp-tabs {
margin: 24px 0;
padding: 16px 20px;
}
.lafka-pdp-tabs__panel {
padding-top: 4px;
}
/* Related products: when the parent theme's template renders an empty
thumbnail (operator hasn't set a featured image), at least give the slot
a subtle background instead of a hard-edged empty rectangle. Doesn't fix
the underlying content gap — that's a wp-admin task. */
.lafka-pdp__main .related.products .product img,
.lafka-pdp__main .upsells.products .product img,
.lafka-pdp__main ul.products .product img {
background: var(--lafka-pdp-bg-soft);
min-height: 100px;
}
/* The full-width below-fold sections (upsell, tabs, related) should not be
constrained by the hero grid — push them to span the container width. */
.lafka-pdp-upsell,
.lafka-pdp-tabs,
.lafka-pdp .related.products,
.lafka-pdp .upsells.products {
grid-column: 1 / -1;
}