/* * Hides every variation attribute row except Tip's the instant the * stylesheet loads (in , before the body paints) — eliminating the * flash of all rows appearing before assets/frontend.js runs and hides the * irrelevant ones. jQuery's .show()/.hide() there set inline styles, which * override this rule once the correct state is known, so this is purely a * pre-JS default, not a second source of truth. * * Scoped with the leading :has(#pa_tip) so this never touches an unrelated * variable product's attribute rows on a form that has no Tip attribute at * all. */ .variations_form:has(#pa_tip) .variations tr:has(select[id^="pa_"]):not(:has(#pa_tip)) { display: none; } /* * Crossed-out (not hidden) look for a swatch option that isn't purchasable * given the customer's other current selections — e.g. a Dimenzije size * that doesn't exist for the chosen Podloga, or a Podloga a specific * photo's Sale restrictions excluded — toggled by * assets/js/frontend.js's narrowSwatchOptions(). Deliberately its own * class rather than the woo-variation-swatches plugin's own `.disabled` * (see that function's docblock for why re-using it would get clobbered). * * Mirrors the plugin's OWN `.disabled` structure (confirmed by reading its * bundled CSS directly): the dimming/cross visuals go on the inner * `.variable-item-contents` wrapper, not the outer `
  • ` itself. Also * confirmed via live debugging that our own class was always being * toggled correctly by the JS — it just lost to one of the swatches * plugin's own same-specificity rules depending on stylesheet load order, * hence !important throughout (scoped to our own uniquely-named class, so * it can't affect anything outside this one feature). */ .woo-variation-swatches .variable-items-wrapper .variable-item.ps-swatch-unavailable { position: relative !important; pointer-events: none !important; cursor: not-allowed !important; } .woo-variation-swatches .variable-items-wrapper .variable-item.ps-swatch-unavailable .variable-item-contents { opacity: 0.4 !important; } .woo-variation-swatches .variable-items-wrapper .variable-item.ps-swatch-unavailable::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to top right, transparent calc(50% - 1px), currentColor 50%, transparent calc(50% + 1px)) !important; } /* * The photo's own title, printed by PS_Catalog_Photo_Swap::prepend_photo_title() * right under the catalog product's own (always identical) name — kept * visually secondary/quiet so it reads as an identifier, not a second * headline competing with the actual product title. */ .ps-photo-title { margin: -0.5em 0 0.25em; font-size: 1em; font-weight: bold; letter-spacing: 0.02em; color: var(--e-global-color-secondary); } /* * The photo's "PH-" reference code, printed right under * .ps-photo-title above — reuses that same (now-previous) quiet size/color * so it reads as a continuation of the identifier, not a second title. */ .ps-photo-code { margin: 0 0 1em; font-size: 0.75em; letter-spacing: 0.02em; color: #767676; }