/** * Add to Cart actions row (ADD + wishlist heart, Buy Now). * * Target layout, variable PDP only: * * [ ADD ][ # ] <- ADD flexes, heart is a fixed square * [ BUY NOW ] <- full width, outlined * * The row rides Konte's existing `.variations_button { display:flex; flex-wrap:wrap }` * rather than adding a wrapper element, so Buy Now only needs `flex: 0 0 100%` * to break onto its own line. * * Scoping: `body.konte-variable-pdp .product-type-variable ...`. * Do NOT use the `body.konte-variable-pdp .woocommerce div.product ...` idiom * seen elsewhere in this theme -- it never matches, because WooCommerce puts * `.woocommerce` on itself, so as a descendant it resolves to unrelated * wrappers. (~47 rules in functions.php are inert for exactly this reason.) * * Specificity: Konte's rules are `.woocommerce div.product .variations_button ...` * = (0,3,1). The selectors below are body + 4 classes = (0,4,1), so they win * regardless of stylesheet order. * * @package Konte Child */ /* ------------------------------------------------------------------------- * Row * ---------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* mobile-only rules here */ /*body.konte-variable-pdp .product-type-variable .variations_button .single_add_to_cart_button { flex: 0 0 80%; max-width: 80%; } */ } body.konte-variable-pdp .product-type-variable .variations_button { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; margin-top: 4px; } /* Hidden, not removed: the input still posts its default value of 1, which is * what keeps both ADD and Buy Now working without a quantity field. (display:none * suppresses the field, not its value -- only `disabled` would stop it posting.) * * !important is required here, not defensive: WooCommerce's add-to-cart-variation.js * calls `$qty.show()` on every show_variation (line 428), and jQuery's .show() * writes an inline `display:block` on an element whose stylesheet display is none. * An inline style outranks any selector, so a plain rule is silently undone the * moment a variation is picked. */ body.konte-variable-pdp .product-type-variable .variations_button .quantity { display: none !important; } /* ------------------------------------------------------------------------- * ADD * ---------------------------------------------------------------------- */ body.konte-variable-pdp .product-type-variable .variations_button .single_add_to_cart_button { flex: 1 1 auto; /* Konte sets min-width:200px, narrowed to 160px in its own responsive block. * Both would stop the row shrinking on small screens. */ min-width: 0; height: 46px; line-height: normal; padding: 0 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; font-family: var(--font2); } /* ------------------------------------------------------------------------- * Wishlist heart * * The button is a fixed square beside ADD. It carries WCBoost's `button` class, * which Konte gives `flex:1` (`.variations_button .button`) -- without the fixed * basis below it would stretch to ADD's width. * * The outline -> filled icon swap on save needs no CSS: WCBoost adds `.added` * and swaps the SVG itself, and Konte remaps both icons to its own heart SVGs. * ---------------------------------------------------------------------- */ body.konte-variable-pdp .product-type-variable .variations_button .wcboost-wishlist-button { /* position/top/right and the 50% radius undo Konte's mobile treatment, which * turns this button into a floating circular badge below 991px: * @media (max-width: 991px) { .woocommerce div.product .wcboost-wishlist-button { * position: absolute; inset: -25px 0 auto auto; border-radius: 50%; ... } } * That made sense while the button lived in the summary, but an absolutely * positioned flex item leaves the flow entirely -- the heart floated ~460px * away and ADD took the whole row. Longhands rather than `inset` for browser * support; static rather than relative so no stacking context is created. * These selectors are (0,4,1) vs Konte's (0,3,1), and a media query does not * add specificity, so this wins at every width. */ position: static; top: auto; right: auto; bottom: auto; left: auto; flex: 0 0 46px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; border-radius: 0; background-color: var(--ink_text); color: #fff; line-height: 1; transition: opacity 0.2s ease; } body.konte-variable-pdp .product-type-variable .variations_button .wcboost-wishlist-button:hover, body.konte-variable-pdp .product-type-variable .variations_button .wcboost-wishlist-button:focus { background-color: var(--ink_text); color: #fff; opacity: 0.85; } body.konte-variable-pdp .product-type-variable .variations_button .wcboost-wishlist-button__icon { display: flex; align-items: center; justify-content: center; margin: 0; } body.konte-variable-pdp .product-type-variable .variations_button .wcboost-wishlist-button__icon svg { width: 20px; height: 20px; /* Both of Konte's icons are filled paths -- heart-o draws the hollow outline * as a fill rather than a stroke -- so colouring the fill is enough for both * states. Deliberately no `stroke`: adding one thickens heart-o's outline * toward solid and erodes the unsaved/saved distinction. */ fill: var(--bg_clr1); } /* Icon-only, per the reference. Visually hidden rather than display:none, so the * label ("Add to wishlist" / "View wishlist") still reaches screen readers -- * with the text gone it is the button's only accessible name. */ body.konte-variable-pdp .product-type-variable .variations_button .wcboost-wishlist-button__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- * Buy Now * ---------------------------------------------------------------------- */ body.konte-variable-pdp .product-type-variable .variations_button .konte-child-buy-now { /* Forces its own row inside the wrapping flex container. */ flex: 0 0 100%; width: 100%; min-width: 0; /* 4px comes from the row's gap; 16px on top of it matches the reference. */ margin-top: 6px; height: 46px; line-height: normal; padding: 0 16px; background-color: transparent !important; color: var(--ink_text) !important; border: 1px solid var(--ink_text); border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; } body.konte-variable-pdp .product-type-variable .variations_button .konte-child-buy-now:hover { background-color: var(--ink_text)!important; color:var(--bg_clr1)!important; } body.konte-variable-pdp .product-type-variable .variations_button .konte-child-buy-now:focus { background-color: var(--ink_text)!important; color:var(--bg_clr1)!important; } /* WooCommerce's add-to-cart-variation.js adds `.disabled` to every * `.single_add_to_cart_button` in the form until a variation is picked, which is * how Buy Now inherits the required-variation validation. Keep the disabled look * consistent with ADD, whose `.disabled` styling comes from WooCommerce core. */ body.konte-variable-pdp .product-type-variable .variations_button .konte-child-buy-now.disabled:hover, body.konte-variable-pdp .product-type-variable .variations_button .konte-child-buy-now.disabled:focus { background-color: transparent; color: var(--ink_text); } /* ------------------------------------------------------------------------- * Share * * Hidden for now, per the reference. The parent still renders it on * woocommerce_single_product_summary @35 (konte/inc/woocommerce/template-product.php:260); * nothing is unhooked, so this is reversible by deleting this rule. * ---------------------------------------------------------------------- */ body.konte-variable-pdp .product-share { display: none; } /* ------------------------------------------------------------------------- * Responsive * * ADD + heart stay on one row at every width: ADD is the only flexible item, so * it absorbs the shrink while the heart keeps its square. Buy Now is already * full width. Only the ADD label needs easing on narrow screens. * ---------------------------------------------------------------------- */ @media (max-width: 480px) { body.konte-variable-pdp .product-type-variable .variations_button .single_add_to_cart_button, body.konte-variable-pdp .product-type-variable .variations_button .konte-child-buy-now { font-size: 14px; letter-spacing: 0.06em; } }