/* Theme Name: Plomet (Hello Elementor Child) Theme URI: https://example.com/ Description: Child theme of Hello Elementor. Applies the Plomet landing-page header, footer and design system across the whole WooCommerce store. Author: Plomet Template: hello-elementor Version: 1.0.0 Text Domain: plomet-child License: GPL-2.0-or-later */ /* --------------------------------------------------------------------------- * The Plomet design system itself lives in the Plomet Landing Engine plugin * (assets/css/plomet-landing.css) and is enqueued site-wide from functions.php. * Everything below is store-wide glue: rules that only matter once the shared * chrome wraps WooCommerce content rather than the landing page alone. * * Nothing here restyles .tk-head, .tk-foot or any landing-page section — those * stay owned by the plugin stylesheet so the landing page renders identically * to before this child theme existed. * ------------------------------------------------------------------------ */ /* Store content sits in its own wrapper between the shared header and footer. * The landing template renders full-bleed sections and opts out via --bleed. */ .tk-page > .plomet-main { max-width: var(--maxw); margin: 0 auto; padding: 48px 32px 96px; width: 100%; } .tk-page > .plomet-main--bleed { max-width: none; margin: 0; padding: 0; width: auto; } @media (max-width: 640px) { .tk-page > .plomet-main { padding: 32px 20px 64px; } } /* WooCommerce buttons take the Plomet button shape without rewriting every Woo * template. Colours come from the shared custom properties on .tk. */ .tk .woocommerce a.button, .tk .woocommerce button.button, .tk .woocommerce input.button, .tk .woocommerce #respond input#submit, .tk .woocommerce a.button.alt, .tk .woocommerce button.button.alt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; padding: 12px 20px; font-family: var(--body); font-weight: 600; font-size: 15px; line-height: 1.2; background: var(--green); color: #fff; text-decoration: none; cursor: pointer; transition: background-color var(--t-ui) ease, transform var(--t-press) var(--ease-out); } .tk .woocommerce a.button:hover, .tk .woocommerce button.button:hover, .tk .woocommerce input.button:hover, .tk .woocommerce #respond input#submit:hover, .tk .woocommerce a.button.alt:hover, .tk .woocommerce button.button.alt:hover { background: var(--green-dark); color: #fff; } .tk .woocommerce a.button:active, .tk .woocommerce button.button:active, .tk .woocommerce input.button:active { transform: scale(.97); } /* Woo price markup should read like the landing page's price markup. */ .tk .woocommerce .price { font-family: var(--mono); font-weight: 600; color: var(--ink); } .tk .woocommerce .price del { color: var(--muted); font-weight: 400; } .tk .woocommerce .price ins { text-decoration: none; color: var(--green-dark); } /* Form fields across cart, checkout and account. */ .tk .woocommerce form .form-row input.input-text, .tk .woocommerce form .form-row textarea, .tk .woocommerce form .form-row select, .tk .woocommerce table.cart td.actions .coupon .input-text { border: 1.5px solid var(--line); border-radius: 8px; padding: 11px 14px; font-family: var(--body); font-size: 15px; color: var(--ink); background: #fff; } .tk .woocommerce form .form-row input.input-text:focus, .tk .woocommerce form .form-row textarea:focus, .tk .woocommerce form .form-row select:focus { outline: 3px solid var(--green); outline-offset: 2px; border-color: var(--green); } /* Woo notices in the brand palette rather than the default purple. */ .tk .woocommerce-message, .tk .woocommerce-info, .tk .woocommerce-error { border-top-color: var(--green); border-radius: 8px; font-family: var(--body); } .tk .woocommerce-message::before, .tk .woocommerce-info::before { color: var(--green); } /* Hello Elementor's own chrome is replaced by the Plomet chrome. If a stray * copy is ever rendered (by a plugin, or an Elementor location) hide it. */ .tk #site-header.site-header, .tk #site-footer.site-footer { display: none; } /* Skip link must stay clickable above the sticky header. */ .skip-link:focus { z-index: 100; } /* =========================================================================== * SINGLE PRODUCT PAGE (PDP) * * The block below is the product-page CSS from the approved design, unchanged * apart from the additions at the end, which are marked. Everything is scoped * under .tk, which header.php wraps the whole document in. * ======================================================================== */ .tk-crumb{max-width:var(--maxw);margin:0 auto;padding:22px 32px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px; font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .tk-crumb a{color:var(--muted);} .tk-crumb a:hover{color:var(--green-dark);} .tk-crumb em{font-style:normal;color:var(--ink);} .tk-crumb i{font-style:normal;opacity:.5;} .tk-pdp{max-width:var(--maxw);margin:0 auto;padding:28px 32px 0;display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:56px;align-items:start;} .tk-gal{position:sticky;top:90px;display:flex;flex-direction:column;gap:12px;} .tk-gal__main{position:relative;height:500px;padding:40px;background:var(--paper);border:1px solid var(--line); border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;} .tk-gal__main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; transition:opacity 160ms ease,filter 160ms ease,transform 160ms var(--ease-out);} .tk-gal__main img.is-swapping{opacity:.35;filter:blur(4px);transform:scale(.985);} .tk-flag{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px; background:var(--green);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;} .tk-flag svg{width:13px;height:13px;flex:none;} .tk-gal__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;} .tk-thumb{height:92px;padding:10px;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:border-color var(--t-ui) ease,transform var(--t-press) var(--ease-out);} .tk-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;} .tk-thumb:active{transform:scale(.97);} @media(hover:hover) and (pointer:fine){.tk-thumb:hover{border-color:var(--green);}} .tk-thumb.is-active{border-color:var(--green);box-shadow:0 0 0 3px rgba(29,164,90,.14);} .tk-sum{display:flex;flex-direction:column;} .tk-sum h1{font-size:clamp(34px,4.2vw,48px);margin:10px 0 12px;text-wrap:balance;} .tk-sum__lead{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--muted);max-width:52ch;text-wrap:pretty;} .tk-sum .tk-rating{margin-bottom:22px;} .tk-pricebox{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 16px;padding-bottom:6px;} .tk-pricebox .tk-price,.tk-pricebox del,.tk-opt__label b{transition:opacity 130ms ease,filter 130ms ease;} .tk-sum.is-swap .tk-pricebox .tk-price,.tk-sum.is-swap .tk-pricebox del,.tk-sum.is-swap .tk-opt__label b{opacity:.45;filter:blur(3px);} .tk-pricebox .tk-price{font-size:46px;} .tk-pricebox del{font-family:var(--body);font-weight:400;font-size:17px;color:var(--muted);} .tk-save{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--green-tint); color:var(--green-dark);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;} .tk-vat{margin:0 0 24px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .tk-opt{margin-bottom:24px;} .tk-opt__label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} .tk-opt__label b{color:var(--ink);font-weight:600;} .tk-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;} .tk-optbtn{position:relative;display:flex;flex-direction:column;gap:2px;padding:13px 15px;background:#fff; border:1.5px solid var(--line);border-radius:10px;cursor:pointer; transition:border-color var(--t-ui) ease,background-color var(--t-ui) ease,transform var(--t-press) var(--ease-out);} .tk-optbtn:active{transform:scale(.985);} @media(hover:hover) and (pointer:fine){.tk-optbtn:hover{border-color:var(--green);}} .tk-optbtn input{position:absolute;opacity:0;width:1px;height:1px;} .tk-optbtn strong{font-size:15px;font-weight:600;color:var(--ink);} .tk-optbtn span{font-family:var(--mono);font-size:11px;color:var(--muted);} .tk-optbtn:has(input:checked){border-color:var(--green);background:var(--green-tint);} .tk-optbtn:has(input:checked) span{color:var(--green-dark);} .tk-optbtn:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px;} .tk-buyrow{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px;} .tk-qty{display:inline-flex;align-items:stretch;height:56px;background:#fff;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;} .tk-qty button{width:46px;border:0;background:#fff;color:var(--ink);font-size:19px;line-height:1;cursor:pointer; transition:background-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-press) var(--ease-out);} .tk-qty button:active{transform:scale(.9);} @media(hover:hover) and (pointer:fine){.tk-qty button:hover{background:var(--green-tint);color:var(--green-dark);}} .tk-qty input{width:46px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center; font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);background:#fff;} .tk-qty input::-webkit-outer-spin-button,.tk-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .tk .tk-atc{flex:1 1 240px;height:56px;padding:0 30px;border-radius:10px;background:var(--green);color:#fff; font-family:var(--body);font-weight:700;font-size:16.5px;box-shadow:0 8px 20px rgba(29,164,90,.28);} .tk .tk-atc:hover{background:var(--green-dark);color:#fff;} .tk .tk-atc svg{width:19px;height:19px;} .tk .tk-buynow{width:100%;height:54px;border-radius:10px;background:var(--ink);color:#fff; font-family:var(--body);font-weight:700;font-size:16.5px;box-shadow:0 10px 26px rgba(14,27,44,.20);} .tk .tk-buynow:hover{background:var(--ink-2);color:#fff;} .tk-sum .tk-checks{margin:24px 0 0;} .tk-pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0 0;padding:0;list-style:none;} .tk-pay__badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;padding:6px 10px; border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink); font-family:var(--body);font-size:10px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;} .tk-pay__badge--apple{color:#000;} .tk-meta{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:7px;font-size:14px;color:var(--muted);} .tk-meta b{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-right:8px;} /* ---------- tabs ---------- */ .tk-tabs__nav{display:flex;flex-wrap:wrap;gap:30px;border-bottom:1px solid var(--line);} .tk-tab{appearance:none;background:none;border:0;padding:0 0 14px;margin-bottom:-1px;cursor:pointer; font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.005em;color:var(--muted); border-bottom:2px solid transparent;transition:color var(--t-ui) ease,border-color var(--t-ui) ease;} .tk-tab.is-active{color:var(--ink);border-bottom-color:var(--green);} @media(hover:hover) and (pointer:fine){.tk-tab:hover{color:var(--ink);}} .tk-panel{display:none;padding-top:36px;} .tk-panel.is-active{display:block;animation:tkPanelIn 190ms var(--ease-out) both;} .tk-panel[data-instant]{animation:none;} .tk-prose{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:start;} .tk-prose h3{font-size:24px;margin:0 0 12px;} .tk-prose h3+p,.tk-prose p{margin:0 0 16px;font-size:16px;line-height:1.65;color:var(--muted);max-width:60ch;text-wrap:pretty;} .tk-prose .tk-checks{margin-top:20px;} .tk-specs{width:100%;border-collapse:collapse;font-size:14.5px;} .tk-specs th,.tk-specs td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;} .tk-specs th{width:42%;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);} .tk-specs td{color:var(--ink-2);} .tk-panel__note{margin:28px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--muted);max-width:76ch;} .tk-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;} .tk-steps>div{display:flex;flex-direction:column;padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);} .tk-steps h4{margin:14px 0 6px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.005em;color:var(--ink);} .tk-steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);} .tk-steps em{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);} @media(prefers-reduced-motion:reduce){ .tk-gal__main img.is-swapping{filter:none;transform:none;} .tk-panel.is-active{animation:none;} .tk-sum.is-swap .tk-pricebox .tk-price,.tk-sum.is-swap .tk-pricebox del,.tk-sum.is-swap .tk-opt__label b{filter:none;} .tk-thumb:active,.tk-optbtn:active,.tk-qty button:active{transform:none;} } @media(max-width:1000px){ .tk-pdp{grid-template-columns:1fr;gap:36px;} .tk-gal{position:static;} .tk-prose{grid-template-columns:1fr;gap:32px;} .tk-steps{grid-template-columns:1fr;} } @media(max-width:640px){ .tk-crumb{padding:18px 16px 0;} .tk-pdp{padding:22px 16px 0;} .tk-gal__main{height:360px;padding:26px;} .tk-opts{grid-template-columns:1fr;} .tk-tabs__nav{gap:20px;} .tk-tab{font-size:18px;} } @keyframes tkPanelIn{from{opacity:0;transform:translateY(6px);}} /* --------------------------------------------------------------------------- * ADDITIONS — not in the design file. Everything above this line is the * approved design; everything below exists because the page is now driven by * real WooCommerce data and templates rather than static markup. * ------------------------------------------------------------------------ */ /* The short description is run through wpautop, so it arrives as paragraphs * rather than the design's single

. */ .tk-sum__lead p{margin:0 0 10px;} .tk-sum__lead p:last-child{margin-bottom:0;} /* The price box holds WooCommerce price markup (, currency spans). */ .tk-pricebox .tk-price .woocommerce-Price-amount{font-family:var(--display);font-weight:800;} .tk-pricebox .tk-price ins{text-decoration:none;} .tk-pricebox .tk-price del{display:none;} /* handled by the sibling */ /* Variations: WooCommerce's real select table stays in the DOM and keeps * working — the script only hides it and mirrors it into .tk-optbtn cards. * Never display:none, because WooCommerce reads and writes these fields. */ .tk-varform__native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .tk-varform .woocommerce-variation-price, .tk-varform .woocommerce-variation-description{display:none;} .tk-varform .woocommerce-variation-availability{margin-bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .tk-varform .single_variation_wrap .tk-buyrow{margin-top:4px;} /* No-JS fallback: without the script the native select table is the control, * so it must not be hidden. */ .tk-varform .variations{width:100%;} .tk-varform .variations td,.tk-varform .variations th{padding:0 0 10px;text-align:left;} .tk-varform .variations select{width:100%;height:48px;padding:0 12px;border:1.5px solid var(--line);border-radius:10px; font-family:var(--body);font-size:15px;color:var(--ink);background:#fff;} /* WooCommerce's own reviews markup, rendered inside the Reviews tab by * comments_template(). Left structurally untouched so a reviews plugin can * replace it; these rules only bring the type into the design. */ .tk-panel #reviews .commentlist{list-style:none;margin:0;padding:0;} .tk-panel #reviews .commentlist li{padding:22px 0;border-bottom:1px solid var(--line);} .tk-panel #reviews .comment-text{margin:0;} .tk-panel #reviews .woocommerce-review__author{font-weight:600;color:var(--ink);} .tk-panel #reviews .woocommerce-review__published-date{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .tk-panel #reviews .woocommerce-noreviews{margin:0;color:var(--muted);} .tk-panel #review_form .comment-form-rating label, .tk-panel #review_form .comment-form-comment label, .tk-panel #review_form .comment-form-author label, .tk-panel #review_form .comment-form-email label{display:block;margin-bottom:6px;font-family:var(--mono);font-size:10.5px; font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);} .tk-panel #review_form input[type="text"], .tk-panel #review_form input[type="email"], .tk-panel #review_form textarea{width:100%;max-width:560px;padding:11px 14px;border:1.5px solid var(--line);border-radius:8px; font-family:var(--body);font-size:15px;color:var(--ink);background:#fff;} .tk-panel #review_form .form-submit input[type="submit"]{display:inline-flex;align-items:center;justify-content:center; height:48px;padding:0 26px;border:0;border-radius:10px;background:var(--green);color:#fff; font-family:var(--body);font-weight:700;font-size:15px;cursor:pointer;} .tk-panel #review_form .form-submit input[type="submit"]:hover{background:var(--green-dark);} /* Upsells, if ever used, reuse the related-products grid. */ .tk-pdp-wrap .up-sells .products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0;} @media(max-width:640px){.tk-pdp-wrap .up-sells .products{grid-template-columns:repeat(2,minmax(0,1fr));}} /* =========================================================================== * CART & CHECKOUT - CSS ONLY * * There are no template overrides for cart or checkout. WooCommerce renders its * stock classic markup and everything below styles that markup as-is. Nothing * is moved, added or removed by PHP, which is why gateways, validation, the * AJAX totals refresh and any future checkout plugin keep working untouched. * * Written against the DOM WooCommerce actually outputs on this store: * * .woocommerce * |- .woocommerce-form-coupon-toggle + form.checkout_coupon * `- form.checkout * |- #customer_details.col2-set * | |- .col-1 > .woocommerce-billing-fields * | `- .col-2 > .woocommerce-shipping-fields (empty here) * | + .woocommerce-additional-fields * |- h3#order_review_heading * `- #order_review * |- table.woocommerce-checkout-review-order-table * `- #payment.woocommerce-checkout-payment * * #payment is a child of #order_review in native WooCommerce, so the payment * box belongs to the right-hand column. That is the stock classic layout and it * is deliberately left where it is. * ======================================================================== */ /* ---------- page frame ---------- */ .woocommerce-checkout .plomet-main--bleed .woocommerce, .woocommerce-cart .plomet-main--bleed .woocommerce{ max-width:var(--maxw);margin:0 auto;padding:36px 32px 96px;} /* ---------- checkout: two columns ---------- * * WooCommerce's own layout stylesheet floats #customer_details and #order_review * at ~48% each. Those floats are reset first; laying grid over live floats is * what produced the overlapping boxes before. */ .woocommerce-checkout form.checkout > #customer_details, .woocommerce-checkout form.checkout > #order_review, .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2{ float:none;width:auto;margin-left:0;margin-right:0;} .woocommerce-checkout form.checkout{ display:grid; grid-template-columns:minmax(0,58fr) minmax(0,42fr); /* Row 2 is deliberately flexible (1fr), not auto. * * #customer_details spans both rows and is far taller than the heading and * the order table combined. When both rows were auto, grid's intrinsic track * sizing split that surplus height evenly between them, inflating row 1 and * dropping #order_review hundreds of pixels below its own heading. * * Grid's intrinsic sizing step skips items that span a track with a flexible * sizing function, so making row 2 flexible takes #customer_details out of * row 1's sizing entirely: row 1 is now exactly the heading, and row 2 * absorbs the tall billing column. */ grid-template-rows:min-content 1fr; gap:18px 32px; align-items:start;} .woocommerce-checkout form.checkout > #customer_details{grid-column:1;grid-row:1 / span 2;} .woocommerce-checkout form.checkout > #order_review_heading{grid-column:2;grid-row:1;margin-bottom:0;} .woocommerce-checkout form.checkout > #order_review{grid-column:2;grid-row:2;position:sticky;top:90px;} /* Hidden plumbing WooCommerce appends to the form must not become grid items * and open up empty rows. */ .woocommerce-checkout form.checkout > wc-order-attribution-inputs{display:none;} .woocommerce-checkout #customer_details.col2-set{display:block;} .woocommerce-checkout #customer_details .col-2{margin-top:20px;} @media(max-width:1000px){ .woocommerce-checkout form.checkout{grid-template-columns:1fr;grid-template-rows:auto;} .woocommerce-checkout form.checkout > #customer_details, .woocommerce-checkout form.checkout > #order_review_heading, .woocommerce-checkout form.checkout > #order_review{grid-column:1;grid-row:auto;position:static;} .woocommerce-checkout form.checkout > #order_review_heading{margin-top:12px;} } @media(max-width:640px){ .woocommerce-checkout .plomet-main--bleed .woocommerce, .woocommerce-cart .plomet-main--bleed .woocommerce{padding:24px 16px 72px;} } /* ---------- cards ---------- */ .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .woocommerce-account-fields, .woocommerce-checkout .woocommerce-shipping-fields:has(h3), .woocommerce-checkout table.woocommerce-checkout-review-order-table, .woocommerce-checkout #payment.woocommerce-checkout-payment{ background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;} .woocommerce-checkout #payment.woocommerce-checkout-payment{margin-top:20px;} /* Section headings, with a small tinted rule instead of the design's icon * chip - an icon would mean adding markup. */ .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-additional-fields > h3, .woocommerce-checkout .woocommerce-shipping-fields > h3, .woocommerce-checkout h3#order_review_heading{ display:flex;align-items:center;gap:11px; margin:0 0 22px;font-family:var(--display);font-weight:700;font-size:25px; letter-spacing:.005em;line-height:1.15;color:var(--ink);} .woocommerce-checkout .woocommerce-billing-fields > h3::before, .woocommerce-checkout .woocommerce-additional-fields > h3::before, .woocommerce-checkout .woocommerce-shipping-fields > h3::before, .woocommerce-checkout h3#order_review_heading::before{ content:"";flex:none;width:6px;height:26px;border-radius:3px;background:var(--green);} .woocommerce-checkout h3#order_review_heading{margin-bottom:0;} /* ---------- fields ---------- */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;} .woocommerce-checkout p.form-row{ float:none;width:auto;margin:0;padding:0; display:flex;flex-direction:column;gap:9px;} .woocommerce-checkout p.form-row-wide, .woocommerce-checkout p.form-row.notes, .woocommerce-checkout p.form-row.create-account{grid-column:1 / -1;} .woocommerce-checkout p.form-row-first, .woocommerce-checkout p.form-row-last{grid-column:span 1;} @media(max-width:640px){ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr;} .woocommerce-checkout p.form-row-first, .woocommerce-checkout p.form-row-last{grid-column:1 / -1;} } /* Labels. .screen-reader-text is intentionally not touched so hidden labels * stay hidden and available to assistive tech. */ .woocommerce-checkout p.form-row > label:not(.screen-reader-text){ font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);line-height:1.4;} .woocommerce-checkout p.form-row abbr.required, .woocommerce-checkout p.form-row span.required{color:var(--green-dark);border:0;text-decoration:none;} .woocommerce-checkout p.form-row span.optional{font-weight:400;text-transform:none;letter-spacing:0;opacity:.75;} .woocommerce-checkout span.woocommerce-input-wrapper{display:block;width:100%;} .woocommerce-checkout p.form-row input.input-text, .woocommerce-checkout p.form-row textarea, .woocommerce-checkout p.form-row select{ width:100%;height:52px;padding:0 14px;background:#fff; border:1.5px solid var(--line);border-radius:10px; font-family:var(--body);font-size:15px;color:var(--ink); transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease;} .woocommerce-checkout p.form-row textarea{height:auto;min-height:104px;padding:13px 14px;line-height:1.5;resize:vertical;} .woocommerce-checkout p.form-row input.input-text::placeholder, .woocommerce-checkout p.form-row textarea::placeholder{color:#9AA8B8;} .woocommerce-checkout p.form-row input.input-text:hover, .woocommerce-checkout p.form-row textarea:hover, .woocommerce-checkout p.form-row select:hover{border-color:#C6D2E0;} .woocommerce-checkout p.form-row input.input-text:focus, .woocommerce-checkout p.form-row textarea:focus, .woocommerce-checkout p.form-row select:focus{ outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(29,164,90,.14);} .woocommerce-checkout p.form-row input[type="checkbox"], .woocommerce-checkout p.form-row input[type="radio"]{width:auto;height:auto;accent-color:var(--green);} /* select2 stands in for the country and state selects. */ .woocommerce-checkout .select2-container--default .select2-selection--single{ height:52px;border:1.5px solid var(--line);border-radius:10px;background:#fff;} .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:49px;padding-left:14px;font-family:var(--body);font-size:15px;color:var(--ink);} .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:50px;right:8px;} .woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single, .woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single{ border-color:var(--green);box-shadow:0 0 0 3px rgba(29,164,90,.14);} .select2-dropdown{border-color:var(--line);border-radius:10px;overflow:hidden;} .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--green);} /* Validation states are WooCommerce's own classes; only the colour is ours. */ .woocommerce-checkout p.form-row.woocommerce-invalid input.input-text, .woocommerce-checkout p.form-row.woocommerce-invalid select, .woocommerce-checkout p.form-row.woocommerce-invalid .select2-selection--single{border-color:#D64545;} .woocommerce-checkout p.form-row.woocommerce-invalid input.input-text:focus{box-shadow:0 0 0 3px rgba(214,69,69,.16);} .woocommerce-checkout p.form-row.woocommerce-validated input.input-text{border-color:var(--green);} /* ---------- notices ---------- * * WooCommerce positions the notice icon absolutely at top:1em / left:1.5em and * reserves room for it with padding:1em 2em 1em 3.5em on the notice itself. * An earlier version of this block set a flat `padding:14px 18px`, which wiped * out that left gutter and left the icon sitting on top of the first word. * * The padding-left below is that gutter, restored and matched to where the icon * is actually placed here: icon starts at 20px and is 16px wide, so text begins * at 48px with a 12px gap. The icon is repositioned and recoloured rather than * hidden, because the WooCommerce icon font loads fine on this site. */ .tk .woocommerce-error, .tk .woocommerce-message, .tk .woocommerce-info{ position:relative; margin:0 0 20px; padding:16px 20px 16px 48px; list-style:none; background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--green); border-radius:10px; font-family:var(--body);font-size:14px;line-height:1.55;color:var(--ink-2); word-wrap:break-word;} /* Position and tint only — display and content stay WooCommerce's, so the * glyph itself is untouched. */ .tk .woocommerce-error::before, .tk .woocommerce-message::before, .tk .woocommerce-info::before{ top:17px;left:20px; font-size:16px;line-height:1; color:var(--green-dark);} .tk .woocommerce-error{border-top-color:#D64545;} .tk .woocommerce-error::before{color:#D64545;} .tk .woocommerce-error li, .tk .woocommerce-message li, .tk .woocommerce-info li{margin:0;padding-left:0;list-style:none;} .tk .woocommerce-info a, .tk .woocommerce-message a, .tk .woocommerce-error a{color:var(--green-dark);font-weight:600;} .tk .woocommerce-info a:hover, .tk .woocommerce-message a:hover, .tk .woocommerce-error a:hover{color:var(--green);} /* WooCommerce floats a "View cart" / "Continue shopping" button inside some * notices; its ::after clearfix keeps the box height correct. */ .tk .woocommerce-message .button, .tk .woocommerce-error .button, .tk .woocommerce-info .button{ float:right;margin:-2px 0 0 16px;padding:8px 16px; border:1.5px solid var(--line);border-radius:8px;background:#fff; color:var(--ink);font-family:var(--body);font-weight:600;font-size:13px; text-decoration:none; transition:border-color var(--t-ui) ease,color var(--t-ui) ease;} .tk .woocommerce-message .button:hover, .tk .woocommerce-error .button:hover, .tk .woocommerce-info .button:hover{border-color:var(--green);color:var(--green-dark);} @media(max-width:640px){ .tk .woocommerce-error, .tk .woocommerce-message, .tk .woocommerce-info{padding:14px 16px 14px 44px;} .tk .woocommerce-error::before, .tk .woocommerce-message::before, .tk .woocommerce-info::before{top:15px;left:16px;} .tk .woocommerce-message .button, .tk .woocommerce-error .button, .tk .woocommerce-info .button{float:none;display:inline-block;margin:10px 0 0;} } /* ---------- coupon ---------- */ .tk form.checkout_coupon{ display:flex;flex-wrap:wrap;gap:9px;align-items:flex-start; margin:0 0 24px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);} .tk form.checkout_coupon p.form-row{flex:1 1 200px;margin:0;padding:0;width:auto;float:none;} .tk form.checkout_coupon input.input-text{ width:100%;height:46px;padding:0 14px;border:1.5px solid var(--line);border-radius:10px; font-family:var(--body);font-size:15px;text-transform:uppercase;color:var(--ink);} .tk form.checkout_coupon input.input-text:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(29,164,90,.14);} .tk form.checkout_coupon button{ flex:none;height:46px;padding:0 20px;border:1.5px solid var(--line);border-radius:10px; background:#fff;color:var(--ink);font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer; transition:border-color var(--t-ui) ease,color var(--t-ui) ease;} .tk form.checkout_coupon button:hover{border-color:var(--green);color:var(--green-dark);} .tk form.checkout_coupon .clear{display:none;} /* ---------- order review table ---------- * * The card rule above gives this table `padding:26px` like every other card, * but it was being silently dropped: in the collapsing border model, padding on * the table element itself is ignored by the CSS spec. Background, border and * radius still applied, which is why it looked like a card whose text had lost * its gutter and was sitting on the edges. * * border-collapse:separate + border-spacing:0 restores the padding while * keeping the exact same visual, because no two cell borders here are ever * adjacent — rules are drawn with border-bottom / border-top only, so there is * nothing to double up. * * Type and rhythm follow the summary card in the approved design: separators * only between rows, never a full grid, and never against the card edge. */ .woocommerce-checkout table.woocommerce-checkout-review-order-table{ width:100%; border-collapse:separate;border-spacing:0; font-family:var(--body);font-size:15px;color:var(--ink);} .woocommerce-checkout table.woocommerce-checkout-review-order-table th, .woocommerce-checkout table.woocommerce-checkout-review-order-table td{ border:0;background:none;} /* Column header: a quiet label row, not a table header rule. */ .woocommerce-checkout table.woocommerce-checkout-review-order-table thead th{ padding:0 0 12px;text-align:left; border-bottom:1px solid var(--line); font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);} .woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-total{text-align:right;} /* Line items. A rule sits between items only — not after the last one, and not * under the header of the totals block. */ .woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td{ padding:16px 0;vertical-align:top;} .woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr:first-child td{padding-top:18px;} .woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr:not(:last-child) td{ border-bottom:1px solid var(--line);} .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name{ padding-right:16px; font-family:var(--body);font-weight:600;font-size:14.5px;line-height:1.35;color:var(--ink);} .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name a{color:var(--ink);} .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name a:hover{color:var(--green-dark);} .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name .product-quantity{ display:inline-block;margin-left:6px; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em; color:var(--muted);} .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation, .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name ul, .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name li{ margin:6px 0 0;padding:0;list-style:none; font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);font-weight:400;} .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation dt, .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation dd{ display:inline;margin:0;font-weight:400;} .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation p{margin:0;} .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total{ text-align:right;white-space:nowrap; font-weight:600;font-size:15px;color:var(--ink);} /* Totals block, separated from the items by a single rule. */ .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td{ padding:6px 0;font-size:15px;font-weight:400;color:var(--muted);} .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td{ text-align:right;color:var(--ink);font-weight:600;} .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr:first-child th, .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr:first-child td{ padding-top:18px;border-top:1px solid var(--line);} .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.cart-discount th, .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.cart-discount td{color:var(--green-dark);} /* Grand total: the one place the display face and the brand green appear. */ .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th, .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td{ padding-top:16px;margin-top:14px;border-top:1px solid var(--line);vertical-align:baseline;} .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th{ font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);} .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td{ font-family:var(--display);font-weight:700;color:var(--green-dark);} .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount{ font-family:var(--display);font-weight:700;font-size:32px;line-height:1.1;color:var(--green-dark);} .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total small.includes_tax{ display:block;margin-top:2px; font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);font-weight:400;} @media(max-width:640px){ .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th{font-size:19px;} .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount{font-size:27px;} } /* ---------- payment ---------- * * li.wc_payment_method and .payment_box are the gateway's own containers. * Stripe, PayPal and friends render their hosted fields inside .payment_box, * so nothing here does more than frame and space them. */ .woocommerce-checkout ul.wc_payment_methods{ list-style:none;margin:0;padding:0;display:grid;gap:10px;} .woocommerce-checkout li.wc_payment_method{ background:#fff;border:1.5px solid var(--line);border-radius:10px;overflow:hidden; transition:border-color var(--t-ui) ease,background-color var(--t-ui) ease;} .woocommerce-checkout li.wc_payment_method > input[type="radio"]{ margin:0 0 0 16px;accent-color:var(--green);width:17px;height:17px;vertical-align:middle;} .woocommerce-checkout li.wc_payment_method > label{ display:inline-flex;align-items:center;gap:10px;padding:15px 16px 15px 10px; cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);} .woocommerce-checkout li.wc_payment_method > label img{max-height:24px;width:auto;margin-left:6px;} @media(hover:hover) and (pointer:fine){ .woocommerce-checkout li.wc_payment_method:hover{border-color:var(--green);} } .woocommerce-checkout li.wc_payment_method:has(input:checked){border-color:var(--green);} .woocommerce-checkout li.wc_payment_method:has(input:checked) > label{background:var(--green-tint);} .woocommerce-checkout .payment_box{ margin:0;padding:16px;background:var(--paper);border-top:1.5px solid var(--line); font-size:14px;line-height:1.6;color:var(--muted);} .woocommerce-checkout .payment_box p:last-child{margin-bottom:0;} /* When no gateway is enabled WooCommerce prints a notice inside a bare li. */ .woocommerce-checkout ul.wc_payment_methods > li:not(.wc_payment_method){list-style:none;} .woocommerce-checkout ul.wc_payment_methods > li:not(.wc_payment_method) .woocommerce-info{margin:0;} /* ---------- place order ---------- */ .woocommerce-checkout .place-order{margin:0;padding:0;float:none;width:auto;} .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-top:20px;} .woocommerce-checkout .woocommerce-privacy-policy-text p{ margin:0;font-size:12.5px;line-height:1.7;color:var(--muted);} .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row{margin-top:12px;} .woocommerce-checkout #place_order{ display:block;width:100%;height:58px;margin-top:20px;padding:0 24px; border:0;border-radius:10px;background:var(--green);color:#fff; font-family:var(--body);font-weight:700;font-size:17px;line-height:58px;cursor:pointer; box-shadow:0 8px 20px rgba(29,164,90,.28); transition:background-color var(--t-ui) ease,transform var(--t-press) var(--ease-out);} .woocommerce-checkout #place_order:hover{background:var(--green-dark);color:#fff;} .woocommerce-checkout #place_order:active{transform:scale(.99);} .woocommerce-checkout #place_order:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;} /* WooCommerce's blocking overlay during the AJAX totals refresh. */ .woocommerce-checkout .blockUI.blockOverlay{border-radius:var(--radius);} /* ---------- cart page ---------- */ .woocommerce-cart .woocommerce-cart-form{ background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px 24px 24px;} .woocommerce-cart table.shop_table{width:100%;border-collapse:collapse;border:0;font-size:15px;} .woocommerce-cart table.shop_table th{ padding:16px 8px;border:0;border-bottom:1px solid var(--line);text-align:left; font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);} .woocommerce-cart table.shop_table td{ padding:18px 8px;border:0;border-bottom:1px solid var(--line);vertical-align:middle;} .woocommerce-cart table.shop_table td.product-thumbnail img{ width:60px;height:60px;object-fit:contain;padding:6px; background:var(--paper);border:1px solid var(--line);border-radius:10px;} .woocommerce-cart table.shop_table td.product-name a{font-weight:600;color:var(--ink);} .woocommerce-cart table.shop_table td.product-name a:hover{color:var(--green-dark);} .woocommerce-cart .quantity input.qty{ width:72px;height:44px;padding:0 8px;text-align:center; border:1.5px solid var(--line);border-radius:8px; font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);} .woocommerce-cart td.product-remove a.remove{ display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--paper);color:var(--muted);font-size:17px;line-height:1;text-decoration:none;} .woocommerce-cart td.product-remove a.remove:hover{background:#D64545;color:#fff;} .woocommerce-cart .actions .coupon{display:flex;gap:9px;flex-wrap:wrap;} .woocommerce-cart .actions .coupon input.input-text{ height:46px;padding:0 14px;min-width:180px;border:1.5px solid var(--line);border-radius:10px; font-family:var(--body);font-size:15px;text-transform:uppercase;} .woocommerce-cart .actions button.button{ height:46px;padding:0 20px;border:1.5px solid var(--line);border-radius:10px;background:#fff; color:var(--ink);font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer; transition:border-color var(--t-ui) ease,color var(--t-ui) ease;} .woocommerce-cart .actions button.button:hover{border-color:var(--green);color:var(--green-dark);} .woocommerce-cart .actions button.button:disabled{opacity:.5;} .woocommerce-cart .cart_totals{ background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;} .woocommerce-cart .cart_totals h2{ margin:0 0 16px;font-family:var(--display);font-weight:700;font-size:25px;color:var(--ink);} .woocommerce-cart .cart_totals table th{border-bottom:1px solid var(--line);} .woocommerce-cart .cart_totals .order-total .amount{ font-family:var(--display);font-weight:700;font-size:28px;color:var(--green-dark);} .woocommerce-cart .wc-proceed-to-checkout{padding:18px 0 0;} .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ display:flex;align-items:center;justify-content:center;width:100%;height:56px; border-radius:10px;background:var(--green);color:#fff; font-family:var(--body);font-weight:700;font-size:16.5px; box-shadow:0 8px 20px rgba(29,164,90,.28);transition:background-color var(--t-ui) ease;} .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{background:var(--green-dark);color:#fff;} .woocommerce-cart .cart-empty{font-family:var(--display);font-weight:700;font-size:28px;color:var(--ink);} .woocommerce-cart .return-to-shop{margin-top:18px;} @media(min-width:1001px){ .woocommerce-cart .plomet-main--bleed .woocommerce{ display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);grid-template-rows:min-content 1fr;gap:0 32px;align-items:start;} .woocommerce-cart .plomet-main--bleed .woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1;grid-row:1;} .woocommerce-cart .plomet-main--bleed .woocommerce > form.woocommerce-cart-form{grid-column:1;grid-row:2;} .woocommerce-cart .plomet-main--bleed .woocommerce > .cart-collaterals{ grid-column:2;grid-row:2;position:sticky;top:90px;} .woocommerce-cart .cart-collaterals, .woocommerce-cart .cart-collaterals .cart_totals{width:auto;float:none;} .woocommerce-cart .cart-collaterals .cross-sells{display:none;} } @media(max-width:1000px){ .woocommerce-cart .cart-collaterals{margin-top:24px;} .woocommerce-cart .cart-collaterals, .woocommerce-cart .cart-collaterals .cart_totals{width:auto;float:none;} } /* =========================================================================== * ELEMENTOR PRODUCT DESCRIPTIONS * * Elementor output is scoped to .elementor, so it cannot leak into the rest of * the page. The only adjustment needed is width: the Description tab normally * runs prose at 1.35fr with the spec table beside it, which is too narrow for * multi-column Elementor layouts. When the tab contains Elementor content the * panel goes single column and the spec table drops underneath at full width. * ======================================================================== */ .tk-prose:has(.elementor){grid-template-columns:1fr;gap:32px;} .tk-prose:has(.elementor) > div{max-width:none;} .tk-prose:has(.elementor) p{max-width:none;} .tk-prose .elementor{width:100%;} /* Elementor images inside the tab should behave like the rest of the page. */ .tk-panel .elementor img{max-width:100%;height:auto;} /* ====================================================================== Tab panel safety net ---------------------------------------------------------------------- The active panel must stay visible even if some script hides panels with an inline display:none (WooCommerce's single-product.js does this to any .wc-tab inside a .woocommerce-tabs / .wc-tabs-wrapper). A stylesheet !important beats a plain inline style, so the visible panel survives. Panel switching is unaffected: plomet-pdp.js toggles the is-active class only, it never writes inline styles. ====================================================================== */ .tk-panel.is-active{display:block !important;} /* ========================================================================== Product information - stacked sections (no tab strip) ----------------------------------------------------------------------------- tabs.php no longer prints a nav, so every panel has to be visible at once. The base rule .tk-panel{display:none} still exists for the tabbed layout, so this block overrides it under .tk-tabs--stacked only. ========================================================================== */ .tk-tabs--stacked .tk-panel{display:block !important;animation:none;padding-top:0;} .tk-tabs--stacked .tk-panel + .tk-panel{margin-top:56px;padding-top:56px;border-top:1px solid var(--line);} .tk-panel__title{display:flex;align-items:center;gap:11px;margin:0 0 28px; font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.005em; line-height:1.15;color:var(--ink);} .tk-panel__title::before{content:"";flex:none;width:6px;height:29px;border-radius:3px;background:var(--green);} /* WooCommerce's own reviews template prints an

of its own ("Reviews" / "N reviews for X"). Ours is directly above it, so hide theirs here rather than override their template. */ .tk-tabs--stacked #reviews .woocommerce-Reviews-title{display:none;} @media(max-width:640px){ .tk-panel__title{font-size:23px;gap:9px;margin-bottom:22px;} .tk-panel__title::before{height:24px;width:5px;} .tk-tabs--stacked .tk-panel + .tk-panel{margin-top:40px;padding-top:40px;} } /* ====================================================================== Stacked layout — cleanup pass ---------------------------------------------------------------------- 1. The spec table beside the description is gone, so .tk-prose is a single column now. The two-track grid would otherwise leave the description in a 1.35fr column with an empty 1fr track beside it. 2. .tk-panel__note (the "Delivery is digital only…" line under the step cards, and the description disclaimer) was set in the mono face at 11.5px, which read as code. It is body copy, so it gets the global body font and a proper gap above it. ====================================================================== */ .tk-prose{grid-template-columns:minmax(0,1fr);gap:0;} .tk-panel__note{margin:32px 0 0;font-family:var(--body);font-size:15.5px;line-height:1.7; letter-spacing:normal;text-transform:none;color:var(--muted);max-width:72ch;text-wrap:pretty;} @media(max-width:640px){ .tk-panel__note{margin-top:24px;font-size:15px;} } /* ====================================================================== Stacked layout - section rhythm ---------------------------------------------------------------------- With the closing note gone, the step cards are the last thing in the Delivery section. Zeroing the trailing margin on each section's last child makes the gap to the next section come from one place only, so the 64px above the divider and the 64px below it stay symmetrical whatever the section ends with (cards, a paragraph, Elementor markup). ====================================================================== */ .tk-tabs--stacked .tk-panel > :last-child{margin-bottom:0;} .tk-tabs--stacked .tk-panel + .tk-panel{margin-top:64px;padding-top:64px;} @media(max-width:640px){ .tk-tabs--stacked .tk-panel + .tk-panel{margin-top:44px;padding-top:44px;} } /* ====================================================================== "Customers also bought" — landing-page catalogue card, on a light page ---------------------------------------------------------------------- The cards are the same .tk-cat markup the landing page uses, so nearly all of their styling comes from plomet-landing.css and stays in sync automatically. Two things have to change because this grid sits on the white product page instead of inside the dark .tk-catpanel: 1. .tk-cats--plain drops the 32px inset the dark panel needs. The double class beats the plain .tk-cats padding rules in the landing stylesheet's media queries without !important. 2. .tk .tk-cat sets border:0 (it needs no edge against the dark panel) and a hover shadow tuned for a dark ground. On white, a white card with no border has no edge at all, so the border comes back and the shadow is re-tinted. #related raises specificity above .tk .tk-cat. ====================================================================== */ .tk-cats.tk-cats--plain{padding:0;} #related .tk-cats .tk-cat{border:1px solid var(--line);} @media(hover:hover) and (pointer:fine){ #related .tk-cats .tk-cat:hover{box-shadow:0 14px 30px rgba(14,27,44,.12);} } /* ====================================================================== Shop, category, search, up-sell and cross-sell grids ---------------------------------------------------------------------- content-product.php now prints the landing page's .tk-cat card, and inc/plomet-loop.php adds .tk-cats / .tk-cats--plain to the loop's