.elementor-1818 .elementor-element.elementor-element-u1wq780i{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:40px;--padding-bottom:72px;--padding-left:40px;--padding-right:40px;}.elementor-1818 .elementor-element.elementor-element-ip0v6v6d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-e912q26r{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-atorlg3y{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-cwjv2sx0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-woocommerce-product-meta .product_meta .detail-container:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-woocommerce-product-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.woocommerce .elementor-widget-woocommerce-product-price .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-add-to-cart .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1818 .elementor-element.elementor-element-b94ijw8t .cart button, .elementor-1818 .elementor-element.elementor-element-b94ijw8t .cart .button{transition:all 0.2s;}.elementor-1818 .elementor-element.elementor-element-b94ijw8t .quantity .qty{transition:all 0.2s;}.elementor-1818 .elementor-element.elementor-element-68zf83wk{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-1sdawyyb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1818 .elementor-element.elementor-element-8jc42vr9{text-align:start;}.elementor-1818 .elementor-element.elementor-element-8jc42vr9 .elementor-heading-title{font-family:var( --e-global-typography-042266e-font-family ), Sans-serif;font-size:var( --e-global-typography-042266e-font-size );font-weight:var( --e-global-typography-042266e-font-weight );text-transform:var( --e-global-typography-042266e-text-transform );text-decoration:var( --e-global-typography-042266e-text-decoration );line-height:var( --e-global-typography-042266e-line-height );letter-spacing:var( --e-global-typography-042266e-letter-spacing );color:var( --e-global-color-0a68507 );}.elementor-1818 .elementor-element.elementor-element-2mp2155g{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-owo1xq3z{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products .products > h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-product-upsell.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1818 .elementor-element.elementor-element-634xl2ix.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-1818 .elementor-element.elementor-element-634xl2ix.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-1818 .elementor-element.elementor-element-u1wq780i{--padding-top:28px;--padding-bottom:56px;--padding-left:20px;--padding-right:20px;}.elementor-1818 .elementor-element.elementor-element-ip0v6v6d{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-e912q26r{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-atorlg3y{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-cwjv2sx0{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-68zf83wk{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-1sdawyyb{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-8jc42vr9{text-align:start;}.elementor-1818 .elementor-element.elementor-element-8jc42vr9 .elementor-heading-title{font-size:var( --e-global-typography-042266e-font-size );line-height:var( --e-global-typography-042266e-line-height );letter-spacing:var( --e-global-typography-042266e-letter-spacing );}.elementor-1818 .elementor-element.elementor-element-2mp2155g{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-owo1xq3z{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-634xl2ix.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-1818 .elementor-element.elementor-element-u1wq780i{--padding-top:20px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-1818 .elementor-element.elementor-element-ip0v6v6d{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-e912q26r{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-atorlg3y{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-cwjv2sx0{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-68zf83wk{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-1sdawyyb{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-8jc42vr9{text-align:start;}.elementor-1818 .elementor-element.elementor-element-8jc42vr9 .elementor-heading-title{font-size:var( --e-global-typography-042266e-font-size );line-height:var( --e-global-typography-042266e-line-height );letter-spacing:var( --e-global-typography-042266e-letter-spacing );}.elementor-1818 .elementor-element.elementor-element-2mp2155g{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-owo1xq3z{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1818 .elementor-element.elementor-element-634xl2ix.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}} /* Start custom CSS for container, class: .elementor-element-cwjv2sx0 */.elementor-1818 .elementor-element.elementor-element-cwjv2sx0 .product_meta { margin: 0 0 16px; display: block; } .elementor-1818 .elementor-element.elementor-element-cwjv2sx0 .sku_wrapper { display: none; } .elementor-1818 .elementor-element.elementor-element-cwjv2sx0 .posted_in { font-size: 0; } .elementor-1818 .elementor-element.elementor-element-cwjv2sx0 .posted_in a { display: inline-block; background: var(--e-global-color-e1bb626); color: var(--e-global-color-0a68507); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 14px; border-radius: 99px; text-decoration: none; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-68zf83wk */.elementor-1818 .elementor-element.elementor-element-68zf83wk .posted_in { display: none; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1sdawyyb */.elementor-1818 .elementor-element.elementor-element-1sdawyyb { display: none !important; } .elementor-1818 .elementor-element.elementor-element-1sdawyyb.ldk-care-filled { display: block !important; } .elementor-1818 .elementor-element.elementor-element-1sdawyyb.ldk-care-filled { background: var(--e-global-color-e1bb626); color: var(--e-global-color-0a68507); border-radius: var(--ldk-radius); padding: clamp(20px, 3vw, 28px); margin-top: 16px; } /* -- the collapse, operator 2026-08-22. Twin of the Specifications panel's, and gated the same way: `.ldk-collapsible` is added by `specsToggle()`'s sibling `careToggle()` only after the heading is wired, so a dead snippet leaves Care open rather than invisible. Note this hides `.ldk-care-body` and NOT `.elementor-1818 .elementor-element.elementor-element-1sdawyyb`. Two different things hide this panel now -- its own `display: none` until the text is moved in, and the collapse once it has been -- and they must not be the same rule: collapsing the panel itself would fight the `ldk-care-filled` reveal, and whichever won, one of the two behaviours would be broken. */ .elementor-1818 .elementor-element.elementor-element-1sdawyyb.ldk-collapsible h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; margin: 0 !important; min-height: var(--ldk-tap); user-select: none; } .elementor-1818 .elementor-element.elementor-element-1sdawyyb.ldk-collapsible h2::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D2927' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; transition: transform .2s ease; } .elementor-1818 .elementor-element.elementor-element-1sdawyyb.ldk-collapsible.is-open h2::after { transform: rotate(180deg); } .elementor-1818 .elementor-element.elementor-element-1sdawyyb.ldk-collapsible h2:focus-visible { outline: 2px solid var(--e-global-color-0a68507); outline-offset: 4px; } .elementor-1818 .elementor-element.elementor-element-1sdawyyb.ldk-collapsible .ldk-care-body { display: none; } .elementor-1818 .elementor-element.elementor-element-1sdawyyb.ldk-collapsible.is-open .ldk-care-body { display: block; margin-top: 14px; } /* `!important` on all four, and it is the documented specificity trap rather than the cascade layer. This h2 is a native `heading` widget, so Elementor emits its global typography token at `.elementor-1818 .elementor-element- .elementor-heading-title` -- four classes, unlayered -- which outruns a plain container-scoped `.elementor-1818 .elementor-element.elementor-element-1sdawyyb h2`. Measured after the first deploy: the panel rendered "Care" in large Inria Serif beside its own twin rendering "SPECIFICATIONS" in the small uppercase label face. Same device, two faces. The Specifications panel does not need this because its h2 comes from WooCommerce, not from a heading widget with a token attached. */ .elementor-1818 .elementor-element.elementor-element-1sdawyyb h2 { font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-family: 'Inter', sans-serif !important; color: var(--e-global-color-0a68507); margin: 0 0 14px; } .elementor-1818 .elementor-element.elementor-element-1sdawyyb p { margin: 0; max-width: 68ch; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-atorlg3y *//* -- the variation rows -------------------------------------------- Woo emits `table.variations`, one row per attribute, `th.label` + `td.value`. Stacked rather than tabular so the label sits above its control at every width, as the static design has it. */ .elementor-1818 .elementor-element.elementor-element-atorlg3y table.variations { width: 100%; margin: 0 0 20px; border: 0; background: transparent; } .elementor-1818 .elementor-element.elementor-element-atorlg3y table.variations tr { display: block; margin-bottom: 14px; } .elementor-1818 .elementor-element.elementor-element-atorlg3y table.variations th.label, .elementor-1818 .elementor-element.elementor-element-atorlg3y table.variations td.value { display: block; width: auto; padding: 0; border: 0; text-align: left; } /* item 3: Woo's own rgba(128,128,128,.07) band. See the docstring. */ .elementor-1818 .elementor-element.elementor-element-atorlg3y table.variations th.label, .elementor-1818 .elementor-element.elementor-element-atorlg3y table.variations td.value { background: transparent !important; } .elementor-1818 .elementor-element.elementor-element-atorlg3y table.variations th.label label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--e-global-color-0a68507); margin-bottom: 8px; display: block; } .elementor-1818 .elementor-element.elementor-element-atorlg3y table.variations select { width: 100%; max-width: 320px; min-height: var(--ldk-tap); padding: 10px 14px; border: 1.5px solid var(--e-global-color-0a68507); border-radius: var(--ldk-radius); background: var(--e-global-color-dc122db); color: var(--e-global-color-0a68507); font-size: 15px; } .elementor-1818 .elementor-element.elementor-element-atorlg3y a.reset_variations { display: inline-block; margin-top: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--e-global-color-0a68507); min-height: var(--ldk-tap); line-height: var(--ldk-tap); } /* -- the Gold Type swatch dots ------------------------------------ Built by PDP_CONTROLS_JS over Woo's own select. The three dot colours are the static design's `.swatch-dot` inline backgrounds, passed in as `--ldk-swatch` per button so this block never names a colour Woo owns. */ /* ldk.css:119-124 */ .elementor-1818 .elementor-element.elementor-element-atorlg3y .ldk-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .elementor-1818 .elementor-element.elementor-element-atorlg3y .ldk-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--ldk-tap); min-height: var(--ldk-tap); padding: 0; background: none; border: 0; cursor: pointer; } /* item 3: ldk.css:150-161, selected state ldk.css:176-180 */ .elementor-1818 .elementor-element.elementor-element-atorlg3y .ldk-swatch-dot { display: block; width: var(--ldk-tap); height: var(--ldk-tap); border-radius: 50%; background: var(--ldk-swatch); border: 1px solid rgba(29, 41, 39, .28); box-shadow: inset 0 0 0 2px var(--e-global-color-dc122db); transition: box-shadow .18s ease, border-color .18s ease; } .elementor-1818 .elementor-element.elementor-element-atorlg3y .ldk-swatch.is-selected .ldk-swatch-dot { border-color: var(--e-global-color-0a68507); box-shadow: inset 0 0 0 2px var(--e-global-color-dc122db), 0 0 0 2px var(--e-global-color-0a68507); } /* item 3: hidden, NOT deleted -- ldk.css:132-148 sr-only. Docstring. */ .elementor-1818 .elementor-element.elementor-element-atorlg3y .ldk-swatch-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .elementor-1818 .elementor-element.elementor-element-atorlg3y .ldk-swatch:focus-visible .ldk-swatch-dot { outline: 2px solid var(--e-global-color-0a68507); outline-offset: 3px; } /* The select steps aside only once the dots exist -- see the docstring. Clipped rather than removed, so it still submits. */ .elementor-1818 .elementor-element.elementor-element-atorlg3y select.ldk-native-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* -- the In Stock pill --------------------------------------------- */ .elementor-1818 .elementor-element.elementor-element-atorlg3y .ldk-stock-pill { display: inline-block; margin: 0 0 16px; padding: 4px 14px; border-radius: 99px; background: var(--e-global-color-e1bb626); color: var(--e-global-color-0a68507); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } /* -- quantity stepper + add to cart -------------------------------- dj-base.css:107-121. Woo emits a number input inside `.quantity`; the 48px height and the ink border are what make it read as the static's stepper without rebuilding the control. The two buttons are the JS's, and the `+` is one of the two components the operator could not see on the served dump. */ .elementor-1818 .elementor-element.elementor-element-atorlg3y form.cart { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .elementor-1818 .elementor-element.elementor-element-atorlg3y .quantity { display: flex; align-items: center; height: 48px; border: 1.5px solid var(--e-global-color-0a68507); border-radius: var(--ldk-radius); overflow: hidden; } /* item 4: dj-base.css:108-112. Grounds were inverted. Docstring. */ .elementor-1818 .elementor-element.elementor-element-atorlg3y .quantity input.qty { width: 52px; min-width: var(--ldk-tap); height: 48px; border: 0; background: var(--e-global-color-dbbffc6); text-align: center; color: var(--e-global-color-0a68507); font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; -moz-appearance: textfield; appearance: textfield; } .elementor-1818 .elementor-element.elementor-element-atorlg3y .quantity input.qty::-webkit-outer-spin-button, .elementor-1818 .elementor-element.elementor-element-atorlg3y .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .elementor-1818 .elementor-element.elementor-element-atorlg3y .quantity input.qty:focus { outline: none; } /* 44px not 40px: docstring. Seam resets: ldk_css.py `_qty_stepper()`. */ .elementor-1818 .elementor-element.elementor-element-atorlg3y .ldk-qty-btn { width: var(--ldk-tap); min-width: var(--ldk-tap); height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--e-global-color-e1bb626); color: var(--e-global-color-0a68507); border: 0; cursor: pointer; font-size: 20px; font-weight: 600; line-height: 1; } .elementor-1818 .elementor-element.elementor-element-atorlg3y .ldk-qty-btn:hover { filter: brightness(0.9); } .elementor-1818 .elementor-element.elementor-element-atorlg3y button.single_add_to_cart_button { min-height: var(--ldk-tap); padding: 0 28px; background: var(--e-global-color-0a68507) !important; color: var(--e-global-color-dc122db) !important; border-radius: var(--ldk-radius); border: 0; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .elementor-1818 .elementor-element.elementor-element-atorlg3y button.single_add_to_cart_button:hover { background: #0f1a18 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-2mp2155g */.elementor-1818 .elementor-element.elementor-element-2mp2155g { background: var(--e-global-color-e1bb626); color: var(--e-global-color-0a68507); border-radius: var(--ldk-radius); padding: clamp(20px, 3vw, 28px); margin-top: 32px; } /* Phase 10c. `font-family` was missing here and the heading was falling all the way back to the browser's system face -- measured live as `-apple-system`, not Inter, while its own twin in the Care panel now carries Inter explicitly. Two panels, two faces, from one absent declaration. The design names the family in the same rule as the size and spacing (`ldk.css:231-242`), so omitting it was never a deliberate inheritance -- Woo emits this h2 and nothing upstream of it sets a family. */ .elementor-1818 .elementor-element.elementor-element-2mp2155g h2 { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; font-family: 'Inter', sans-serif; } /* -- the collapse. See the docstring; the gate is load-bearing. -------- */ .elementor-1818 .elementor-element.elementor-element-2mp2155g.ldk-collapsible h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; margin: 0; min-height: var(--ldk-tap); user-select: none; } .elementor-1818 .elementor-element.elementor-element-2mp2155g.ldk-collapsible h2::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D2927' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; transition: transform .2s ease; } .elementor-1818 .elementor-element.elementor-element-2mp2155g.ldk-collapsible.is-open h2 { margin: 0 0 14px; } .elementor-1818 .elementor-element.elementor-element-2mp2155g.ldk-collapsible.is-open h2::after { transform: rotate(180deg); } .elementor-1818 .elementor-element.elementor-element-2mp2155g.ldk-collapsible h2:focus-visible { outline: 2px solid var(--e-global-color-0a68507); outline-offset: 4px; } .elementor-1818 .elementor-element.elementor-element-2mp2155g.ldk-collapsible table { display: none; } .elementor-1818 .elementor-element.elementor-element-2mp2155g.ldk-collapsible.is-open table { display: table; } .elementor-1818 .elementor-element.elementor-element-2mp2155g table { width: 100%; margin-top: 8px; border-collapse: separate; border-spacing: 0; background: transparent; } .elementor-1818 .elementor-element.elementor-element-2mp2155g th, .elementor-1818 .elementor-element.elementor-element-2mp2155g td { border-bottom: 1px solid rgba(29, 41, 39, .16); padding: 14px 16px; text-align: left; vertical-align: top; } .elementor-1818 .elementor-element.elementor-element-2mp2155g th { width: 34%; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .elementor-1818 .elementor-element.elementor-element-2mp2155g tr:last-child > * { border-bottom: 0; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ip0v6v6d */.elementor-1818 .elementor-element.elementor-element-ip0v6v6d { display: grid !important; grid-template-columns: 520px minmax(0, 1fr); gap: 40px; align-items: start; } /* The design's own tablet band: still a row, narrower image column. */ @media (max-width: 1024px) { .elementor-1818 .elementor-element.elementor-element-ip0v6v6d { grid-template-columns: min(48%, 470px) minmax(0, 1fr); gap: 28px; } } /* Only here does the design stack, and it includes 768 itself. */ @media (max-width: 768px) { .elementor-1818 .elementor-element.elementor-element-ip0v6v6d { grid-template-columns: minmax(0, 1fr); gap: 28px; } } /* Both columns carry their own vertical air above the stacking point. */ @media (min-width: 769px) { .elementor-1818 .elementor-element.elementor-element-ip0v6v6d > .ldk-pdp-media, .elementor-1818 .elementor-element.elementor-element-ip0v6v6d > .ldk-pdp-detail { padding-block: clamp(20px, 2.4vw, 32px) !important; } /* Specifications fills the space under the gallery. Placement only -- DOM order is untouched. See the docstring. */ .elementor-1818 .elementor-element.elementor-element-ip0v6v6d > .ldk-pdp-media { grid-column: 1; grid-row: 1; } .elementor-1818 .elementor-element.elementor-element-ip0v6v6d > .ldk-pdp-detail { grid-column: 2; grid-row: 1 / span 2; } .elementor-1818 .elementor-element.elementor-element-ip0v6v6d > .ldk-pdp-panel { grid-column: 1; grid-row: 2; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-owo1xq3z */.elementor-1818 .elementor-element.elementor-element-owo1xq3z { margin-top: 72px; } .elementor-1818 .elementor-element.elementor-element-owo1xq3z h2 { font-size: .95rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--e-global-color-0a68507); margin: 0 0 20px; } .elementor-1818 .elementor-element.elementor-element-owo1xq3z ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; } .elementor-1818 .elementor-element.elementor-element-owo1xq3z ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; background: var(--e-global-color-e1bb626); border-radius: var(--ldk-radius); overflow: hidden; padding-bottom: 16px; } .elementor-1818 .elementor-element.elementor-element-owo1xq3z ul.products li.product img { aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 12px; } .elementor-1818 .elementor-element.elementor-element-owo1xq3z ul.products li.product a { text-decoration: none; color: var(--e-global-color-0a68507); } /* `.woocommerce-loop-product__title` carries its own colour rule (the same Elementor-default-blue pattern as the `h2` above), so plain inheritance from the `a` rule above never reaches it -- needs !important per the rule of thumb: a property Woo/Elementor also sets needs it, one neither sets does not. Found the same day as the h2 fix, same root cause, different element. */ .elementor-1818 .elementor-element.elementor-element-owo1xq3z ul.products li.product .woocommerce-loop-product__title { color: var(--e-global-color-0a68507) !important; } .elementor-1818 .elementor-element.elementor-element-owo1xq3z ul.products li.product .price { color: var(--e-global-color-0a68507) !important; } /* Phase 10c item 6: the card body had no horizontal padding at all, so titles and prices sat flush against the card edge. Pre-existing, visible in `state/phase10c/pdp-before-desktop-1440.jpg`. The inset goes on the text and the button rather than on the `li`, because the image is meant to run full-bleed to the card edges and padding on the `li` would inset that too. */ .elementor-1818 .elementor-element.elementor-element-owo1xq3z ul.products li.product .woocommerce-loop-product__title, .elementor-1818 .elementor-element.elementor-element-owo1xq3z ul.products li.product .price, .elementor-1818 .elementor-element.elementor-element-owo1xq3z ul.products li.product .button { margin-inline: 16px; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-u1wq780i *//* -- shell ---------------------------------------------------------- */ .elementor-1818 .elementor-element.elementor-element-u1wq780i { width: min(100%, 1200px); margin-inline: auto; } /* -- breadcrumb ----------------------------------------------------- */ .elementor-1818 .elementor-element.elementor-element-u1wq780i .woocommerce-breadcrumb { font-size: 13px; letter-spacing: .04em; opacity: .85; } .elementor-1818 .elementor-element.elementor-element-u1wq780i .woocommerce-breadcrumb a { color: var(--e-global-color-0a68507); text-decoration-color: var(--e-global-color-e1bb626); text-underline-offset: 3px; } /* -- gallery ------------------------------------------------------- Woo's flexslider control list IS the thumbnail strip. Style it. */ .elementor-1818 .elementor-element.elementor-element-u1wq780i .woocommerce-product-gallery__image img, .elementor-1818 .elementor-element.elementor-element-u1wq780i .flex-viewport img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ldk-radius-img); } /* Phase 10c, Addendum 6. The design is `.gallery-main { margin-bottom: 12px }` (dj-base.css:80-83) and the thumb row butted straight against the main photograph -- measured gap 0px at all four widths. The 12px lived on `.flex-control-thumbs` as `margin: 12px 0 0` and was NEVER APPLYING: `.flex-control-thumbs` computed `margin-top: 0px` live, because Woo's own stylesheet sets margin on `.flex-control-nav` and this rule had no `!important` -- the rule of thumb, caught by measuring the rendered gap rather than reading the block back and assuming it worked. The 12px now sits on the main image's own wrapper, which is the element the design puts it on, and the thumb row's margin is zeroed so the two cannot add up to 24px. The 8px BETWEEN thumbs was already correct and is untouched. */ .elementor-1818 .elementor-element.elementor-element-u1wq780i .flex-viewport, .elementor-1818 .elementor-element.elementor-element-u1wq780i .woocommerce-product-gallery__image { margin-bottom: 12px !important; } .elementor-1818 .elementor-element.elementor-element-u1wq780i .flex-control-nav, .elementor-1818 .elementor-element.elementor-element-u1wq780i .flex-control-thumbs { display: flex; gap: 8px; margin: 0 !important; padding: 0; list-style: none; } .elementor-1818 .elementor-element.elementor-element-u1wq780i .flex-control-thumbs li { flex: 1; min-width: var(--ldk-tap); margin: 0; } .elementor-1818 .elementor-element.elementor-element-u1wq780i .flex-control-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ldk-radius); border: 1px solid rgba(29, 41, 39, .22); opacity: 1; cursor: pointer; transition: border-color .18s ease; } .elementor-1818 .elementor-element.elementor-element-u1wq780i .flex-control-thumbs img:hover, .elementor-1818 .elementor-element.elementor-element-u1wq780i .flex-control-thumbs img.flex-active { border-color: var(--e-global-color-0a68507); } /* Woo ships the gallery zoom trigger at 36x36, which is under the 44px tap floor `verify_page.py` enforces -- it failed the product page at all four widths on the first pass. Woo sets the size itself, so this needs the `!important` the rule of thumb predicts. */ .elementor-1818 .elementor-element.elementor-element-u1wq780i .woocommerce-product-gallery__trigger { width: var(--ldk-tap) !important; height: var(--ldk-tap) !important; display: flex !important; align-items: center; justify-content: center; border-radius: 99px; } /* -- title / price -- dj-base.css:90, and :270 for the mobile step -- */ .elementor-1818 .elementor-element.elementor-element-u1wq780i .ldk-pdp-detail .product_title { font-family: 'Inria Serif', Georgia, serif; font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--e-global-color-0a68507); margin: 0 0 8px; } @media (max-width: 768px) { .elementor-1818 .elementor-element.elementor-element-u1wq780i .ldk-pdp-detail .product_title { font-size: 30px; } } .elementor-1818 .elementor-element.elementor-element-u1wq780i .ldk-pdp-detail .price { font-family: 'Inria Serif', Georgia, serif; font-size: 26px; color: var(--e-global-color-0a68507); margin: 0 0 16px; } /* QA relay Phase 4, F5: the static's `.price .currency` is a smaller mark at the SAME baseline (dj-base.css:92) -- `vertical-align: super` here reads that literally and raises the R to ascender height, disconnected from the digits (screenshot, `state/qa-sweep/product-1440.png`). Smaller font only, no raise, is what the static's ratio actually looks like rendered. */ .elementor-1818 .elementor-element.elementor-element-u1wq780i .ldk-pdp-detail .woocommerce-Price-currencySymbol { font-size: .6em; margin-right: 2px; } /* -- short description ---------------------------------------------- */ .elementor-1818 .elementor-element.elementor-element-u1wq780i .ldk-pdp-detail .woocommerce-product-details__short-description { font-size: 15px; line-height: 1.7; opacity: .8; max-width: 68ch; margin-bottom: 24px; } /* -- meta: the category pill -------------------------------------- The static's `.product-category-pill` (dj-base.css:89). Woo emits the categories inside `.posted_in`; the pill is on the links themselves. */ /* QA relay Phase 4, F6: no `align-items` meant the default `stretch` -- the SKU text's natural line height and the pill's 44px tap-floor box disagreed, so the row read as two different baselines (screenshot, `state/qa-sweep/product-1440.png`). `center` settles both on one line. */ .elementor-1818 .elementor-element.elementor-element-u1wq780i .product_meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }/* End custom CSS */