/** * Model Wearing Details — one sentence above the size selector (konte-child). * * inc/model-wearing-details.php prepends the sentence to the size attribute's * , so it sits below the colour swatch row and above the size * list. The rule underneath it is NOT set here: it is the existing border-top on * .kss .wcboost-variation-swatches__wrapper (css/size-selector.css). * * Selector note: scoped with `body.konte-variable-pdp .product-type-variable`, * matching the working idiom in functions.php (the rule that hides the attribute * label cells). Do NOT write `body.konte-variable-pdp .woocommerce div.product` * here — WooCommerce puts the `woocommerce` class on itself, so that * descendant form never matches on this layout. * * font-family is deliberately omitted — css/typography.css sets * body { font-family:var(--font2), sans-serif !important } and the sentence * inherits it, the same way .kgp-swatch-name does. */ /* The parent theme lays this cell out as a flex row: konte/woocommerce.css — `.swatches-support td.value{display:flex; position:relative;justify-content:space-between}` with the default flex-wrap:nowrap. Without this, the sentence becomes a flex item BESIDE the size list and squeezes it (~315px instead of full width). Letting the cell wrap gives the sentence a line of its own and returns the size list to full width. :has() keeps this scoped to the one cell that holds the sentence, so the colour row — and any product with no value set — is untouched. */ body.konte-variable-pdp .product-type-variable .variations td.value:has(> .konte-child-model-wearing) { flex-wrap: wrap; } body.konte-variable-pdp .product-type-variable .variations td.value .konte-child-model-wearing { /* Own full-width line within the wrapped flex row. */ flex: 0 0 100%; width: 100%; margin: 18px 0 14px; padding: 0; /* Matches .kgp-swatch-name (the colour name on the swatch row) so the two read as one type system. */ letter-spacing: 0; color: var(--ink_text); text-align: left; text-transform: none; color: var(--ink_text); font-family: var(--font2); font-size: 12px; font-style: normal; font-weight: 300; line-height: normal; } @media (max-width: 767.98px) { /* Mobile already shows this sentence inside the size bottom sheet — fillModel() in js/konte-pdp-size-summary.js copies it into p.ksp-model — so the inline copy is a duplicate. Same breakpoint as css/pdp-size-summary.css, where the inline size list is swapped for the trigger, so the two flip together. display:none ONLY. The

must stay in the DOM: fillModel() reads its textContent to fill the sheet, so removing it (or gating the PHP renderer on wp_is_mobile()) would leave the sheet's line blank. The :has() flex-wrap rule above still matches — :has() is unaffected by display:none — so the cell keeps behaving exactly as it does today. */ body.konte-variable-pdp .product-type-variable .variations td.value .konte-child-model-wearing { display: none; } }