per option; the grid sits on the group itself. */ :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-radio{display:grid;grid-template-columns:repeat(3,max-content);column-gap:var(--dt-s-11);row-gap:0;align-items:center} /* The plugin's own `columns` control on dms_form_radio: columns 1 = one option per row (F2 condition, F11 rental_class). The 3-up grid above is for columns 0. */ :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-radio.dms-form-input-columns-1{grid-template-columns:minmax(0,1fr)} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-radio > .dms-form-field-label, :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-radio > .dms-form-field-error{grid-column:1 / -1} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-radio > div > label{display:flex;align-items:center;gap:var(--dt-s-5);min-height:var(--dt-control-h-sm);margin:0;cursor:pointer;color:var(--dms-text);font:var(--dt-w-regular) var(--dt-btn)/1.4 var(--dt-font-ui)} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-radio input[type=radio]{appearance:none;flex:none;width:var(--dt-box);height:var(--dt-box);margin:0;border:1px solid var(--dt-edge);border-radius:var(--dt-radius-round);background:var(--dt-charcoal);box-shadow:none;cursor:pointer} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-radio input[type=radio]:checked{border-color:var(--dt-glacier);background:radial-gradient(circle,var(--dt-glacier) 0 4px,var(--dt-charcoal) 4.5px)} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-radio input[type=radio]:focus-visible{outline:2px solid var(--dt-glacier);outline-offset:2px} /* Consent / checkbox: 18px box, Edge on Charcoal; checked = Glacier fill with a Charcoal inset. */ :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-checkbox > div > label{display:flex;align-items:flex-start;gap:var(--dt-s-5);min-height:var(--dt-control-h-sm);margin:0;cursor:pointer;color:var(--dms-muted);font:var(--dt-w-regular) var(--dt-btn)/1.5 var(--dt-font-ui)} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-checkbox input[type=checkbox]{appearance:none;flex:none;width:var(--dt-box);height:var(--dt-box);margin:2px 0 0;border:1px solid var(--dt-edge);border-radius:var(--dms-radius);background:var(--dt-charcoal);box-shadow:none;cursor:pointer} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-checkbox input[type=checkbox]:checked{border-color:var(--dt-glacier);background:var(--dt-glacier);box-shadow:inset 0 0 0 3px var(--dt-charcoal)} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--dt-glacier);outline-offset:2px} /* Submit: Elementor writes hover as :hover,:focus - reset the click focus. */ :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form button[type=submit]:focus:not(:focus-visible){outline:none} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form button[type=submit]:focus-visible{outline:2px solid var(--dt-glacier);outline-offset:2px} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form button[type=submit].button{text-transform:uppercase;letter-spacing:var(--dt-ls-btn)} @media (max-width:767px){ :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-input-radio{grid-template-columns:minmax(0,1fr)} .dt-fin-form.dt-fin-form .dms-form button[type=submit]{width:100%} } /* Calculator on a Graphite panel: Charcoal inputs (theme §10.4, spec §7-A). */ .dt-calc.dt-calc.dt-calc--panel{margin-top:0} .dt-calc.dt-calc.dt-calc--panel .input,.dt-calc.dt-calc.dt-calc--panel select{background:var(--dt-charcoal)} /* FAQ accordion - the html widget's

(boilerplate §3.6 #2). One open. */ .dt-accordion > details{border-bottom:1px solid var(--dt-edge)} .dt-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:var(--dt-s-6);min-height:var(--dt-row-h-lg);padding:var(--dt-s-4) 0;list-style:none;cursor:pointer;color:var(--dms-text);font:var(--dt-w-medium) var(--dt-body)/1.3 var(--dt-font-ui)} .dt-accordion summary::-webkit-details-marker{display:none} .dt-accordion summary::marker{content:""} .dt-accordion summary:focus:not(:focus-visible){outline:none} .dt-accordion summary:focus-visible{outline:2px solid var(--dt-glacier);outline-offset:2px} .dt-accordion__sign{display:inline-flex;flex:none;width:var(--dt-icon);height:var(--dt-icon);color:var(--dms-text)} .dt-accordion__sign svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:var(--dt-icon-stroke);stroke-linecap:round} .dt-accordion details[open] .dt-acc-v{display:none} .dt-accordion__body{padding-bottom:var(--dt-s-6)} .dt-accordion__body p{max-width:68ch;margin:0;color:var(--dms-muted);font:var(--dt-w-regular) var(--dt-body)/1.6 var(--dt-font-ui)} .dt-accordion__body a{color:inherit;text-decoration:underline;text-underline-offset:3px} .dt-accordion__body a:focus-visible{outline:2px solid var(--dt-glacier);outline-offset:2px} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form .dms-form-text-input.dms-form-text-input::placeholder,:is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form textarea.textarea::placeholder{color:var(--dt-muted-70);opacity:1} .dt-calc.dt-calc .dms-button.calculate:focus:not(:focus-visible){outline:none;box-shadow:none} .dt-calc.dt-calc .dms-button.calculate:focus-visible{outline:2px solid var(--dt-glacier);outline-offset:2px} /* ====== END THEME 26 - FINANCE ====== */ /* ====== THEME 26 - SERVICE & INSTALL (PAGE_SPEC_Service_Install, Pass 1) ====== Page 25 + form F9. The shared form scope above now includes .dt-svc-form. Visual styling only; layout is container controls on page 25 and F9. */ /* F9: a conditional field hidden by the plugin (inline display:none on the widget body) must not leave its grid cell and 16px gap behind (trap G). */ :is(.dt-svc-form.dt-svc-form,.dt-oft-form.dt-oft-form,.dt-ct-form.dt-ct-form,.dt-lp-form.dt-lp-form,.dt-rent-form.dt-rent-form,.dt-ti-form.dt-ti-form,.dt-alert-form.dt-alert-form,.dms-modal.dms-modal) .dt-formgrid > .elementor-element:has(> .elementor-widget-container > [data-conditions][style*="none"]){display:none} /* Checkbox GROUP options read as Bone; only the consent line stays muted. */ :is(.dt-svc-form.dt-svc-form,.dt-oft-form.dt-oft-form,.dt-lp-form.dt-lp-form) .dms-form .dms-form-input-checkbox:not(.dms-form-input-consent) > .dms-form-field-label{display:block;margin-bottom:var(--dt-s-3)} :is(.dt-svc-form.dt-svc-form,.dt-oft-form.dt-oft-form,.dt-lp-form.dt-lp-form) .dms-form .dms-form-input-checkbox:not(.dms-form-input-consent) > div > label{align-items:center;color:var(--dms-text);line-height:1.4} :is(.dt-svc-form.dt-svc-form,.dt-oft-form.dt-oft-form,.dt-lp-form.dt-lp-form) .dms-form .dms-form-input-checkbox:not(.dms-form-input-consent) input[type=checkbox]{margin:0} /* Date field — DS-SVC-1. Safari collapses an empty date input and centres the value; the picker is browser chrome, reached only by color-scheme (no filter). The empty mm/dd/yyyy hint has no CSS hook on a non-required field. */ .dt-svc-form.dt-svc-form .dms-form input[type=date]{min-height:var(--dt-control-h);text-align:left;color-scheme:dark;-webkit-appearance:none;appearance:none} .dt-svc-form.dt-svc-form .dms-form input[type=date]::-webkit-date-and-time-value{text-align:left} .dt-svc-form.dt-svc-form .dms-form input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer} /* Package table — the page's html widget #1 (DS-SVC-2, theme §10.3). Bulma reset first; Edge bottom rules only; mono header on Graphite; "from" figures in Bone (examples, never Amber). */ .dt-svc-table{margin-top:var(--dt-s-14);min-width:0} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table{width:100%;border-collapse:collapse;border:1px solid var(--dt-edge);background:transparent;margin:0} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table th,:is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table td{border:0;border-bottom:1px solid var(--dt-edge);background:transparent;padding:var(--dt-s-8) var(--dt-s-10);text-align:left;vertical-align:top;color:var(--dms-text);font:var(--dt-w-regular) var(--dt-ui)/1.4 var(--dt-font-ui);font-variant-numeric:tabular-nums} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table thead th{height:var(--dt-row-h);padding-block:0;vertical-align:middle;background:var(--dt-graphite);color:var(--dms-muted);font:var(--dt-w-medium) var(--dt-label-sm)/1.3 var(--dt-font-mono);letter-spacing:var(--dt-ls-label);text-transform:uppercase} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table tbody th{width:26%;color:var(--dms-muted);font:var(--dt-w-medium) var(--dt-label)/1.3 var(--dt-font-mono);letter-spacing:var(--dt-ls-figure)} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table tbody tr:last-child th,:is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table tbody tr:last-child td{border-bottom:0} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table__name{display:block;margin-top:var(--dt-s-2);color:var(--dms-text);font:var(--dt-w-semi) var(--dt-ui)/1.4 var(--dt-font-ui);letter-spacing:0;text-transform:none} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table__from{white-space:nowrap} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table__fig{display:block;color:var(--dms-text);font:var(--dt-w-semi) var(--dt-h3)/1.2 var(--dt-font-ui);letter-spacing:var(--dt-ls-tight);font-variant-numeric:tabular-nums} @media (max-width:767px){ :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table thead tr,:is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table thead th{display:block;width:1px;padding:0} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table,:is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table tbody,:is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table tr,:is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table td,:is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table tbody th{display:block;width:100%} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table tbody tr{border-bottom:1px solid var(--dt-edge);padding-block:var(--dt-s-7)} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table tbody tr:last-child{border-bottom:0} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table td,:is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table tbody th{border-bottom:0;padding:var(--dt-s-3) var(--dt-s-8)} :is(.dt-svc-table,.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:var(--dt-s-2);color:var(--dms-muted);font:var(--dt-w-medium) var(--dt-label-sm)/1.3 var(--dt-font-mono);letter-spacing:var(--dt-ls-label);text-transform:uppercase} :is(.dt-svc-form.dt-svc-form,.dt-oft-form.dt-oft-form,.dt-ct-form.dt-ct-form,.dt-lp-form.dt-lp-form,.dt-rent-form.dt-rent-form,.dt-ti-form.dt-ti-form,.dt-alert-form.dt-alert-form) .dms-form button[type=submit]{width:100%} } /* ====== END THEME 26 - SERVICE & INSTALL ====== */ /* ====== THEME 26 - RIG TYPES & BUILD GUIDE (page 73) ====== */ /* DS-RT-3: native dms_category_links on the build-group categories, as etched terms */ .dt-catlinks--terms.dt-catlinks--terms .dms-category-links{display:grid;grid-template-columns:1fr 1fr;list-style:none;margin:0;padding:0} .dt-catlinks--terms .dms-category-links li{display:flex;align-items:center;min-height:var(--dt-control-h-xs);margin:0;padding:0} .dt-catlinks--terms .dms-category-links li:nth-child(4n+3),.dt-catlinks--terms .dms-category-links li:nth-child(4n+4){background:var(--dt-graphite)} .dt-catlinks--terms.dt-catlinks--terms .dms-category-links a{display:flex;align-items:center;width:100%;min-height:var(--dt-control-h-sm);padding-inline:var(--dt-s-8);font:var(--dt-w-regular) var(--dt-btn)/var(--dt-xsmall-lh) var(--dt-font-ui);color:var(--dt-bone);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color var(--dt-motion) var(--dt-ease)} .dt-catlinks--terms.dt-catlinks--terms .dms-category-links a:hover{color:var(--dt-bone);text-decoration-color:var(--dt-bone)} .dt-catlinks--terms .dms-category-links a:focus-visible{outline:var(--dt-focus-w) solid var(--dms-primary);outline-offset:calc(var(--dt-focus-offset) * -1)} /* a group with no terms prints an empty ul: hide the list and its label (visual only) */ .dt-catlinks--terms:has(.dms-category-links:empty){display:none} .dt-rt-guideplate:has(.dms-category-links:empty) .dt-rt-recorded{display:none} /* kind table: muted em-dash cells */ :is(.dt-rt-table,.dt-ct-table,.dt-rent-table) .dt-table td.is-empty{color:var(--dms-muted)} @media (max-width:767px){ .dt-catlinks--terms.dt-catlinks--terms .dms-category-links{grid-template-columns:1fr} .dt-catlinks--terms .dms-category-links li:nth-child(4n+3),.dt-catlinks--terms .dms-category-links li:nth-child(4n+4){background:transparent} .dt-catlinks--terms .dms-category-links li:nth-child(even){background:var(--dt-graphite)} } /* ====== END THEME 26 - RIG TYPES & BUILD GUIDE ====== */ /* ====== THEME 26 - CONTACT (PAGE_SPEC_Contact, Pass 2) ====== Page 75 + form F10 (352). The shared form scope and the html-table scope above now include .dt-ct-form / .dt-ct-table. Visual styling only. */ .dt-ct-table{margin-top:var(--dt-s-14);min-width:0} /* DS-2: header row steps DOWN to Charcoal on a Graphite band */ .dt-ct-table.dt-ct-table .dt-table thead th{background:var(--dt-charcoal)} /* ====== END THEME 26 - CONTACT ====== */ /* ====== THEME 26 - SPECIALS, template 354, host page 71 (PAGE_SPEC_Specials). Classes doubled. Surfaces, padding, grids, the section-head rule and the photograph are NATIVE controls on the template. What is here is what no control reaches: the photo scrim (alpha has no Global), type roles, the offer card's inner rhythm, the three-dropdown grid inside the one plugin column, and the text-link / outline button looks. DS-SPC-1 / DS-SPC-2. ====== */ /* R1 photo head: the scrim sits above the native background image, below the copy. Hero scrim (70% copy side, theme 5.4); a complete mobile variant (5.3). */ .dt-spc-head.dt-spc-head{position:relative;isolation:isolate} .dt-spc-head.dt-spc-head::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--dt-scrim-hero)} .dt-spc-head.dt-spc-head>.e-con{position:relative;z-index:1} @media(max-width:767px){.dt-spc-head.dt-spc-head::before{background:var(--dt-scrim-hero-m)}} /* Type roles. Heading titles carry Elementor's widget-default Primary colour and font; every role sets both explicitly. */ .dt-spc-eyebrow.dt-spc-eyebrow .elementor-heading-title,.dt-spc-offer__eyebrow.dt-spc-offer__eyebrow .elementor-heading-title,.dt-spc-term__label.dt-spc-term__label .elementor-heading-title{font:var(--dt-w-medium) var(--dt-label)/var(--dt-label-lh) var(--dt-font-mono);letter-spacing:var(--dt-ls-label);text-transform:uppercase;color:var(--dms-muted);margin:0} .dt-spc-head.dt-spc-head .dt-spc-eyebrow .elementor-heading-title{color:var(--dt-bone-70)} .dt-spc-h1.dt-spc-h1 .elementor-heading-title{font:var(--dt-w-semi) var(--dt-h1-page)/var(--dt-h1-page-lh) var(--dt-font-display);letter-spacing:var(--dt-ls-tighter);color:var(--dms-text);margin:var(--dt-s-5) 0 0;text-wrap:balance} .dt-spc-lede.dt-spc-lede,.dt-spc-lede.dt-spc-lede p{font:var(--dt-w-regular) var(--dt-body)/var(--dt-body-lh) var(--dt-font-ui);color:var(--dt-bone-85);max-width:56ch;margin:var(--dt-s-8) 0 0} .dt-spc-lede.dt-spc-lede p{margin:0} .dt-spc-h2.dt-spc-h2 .elementor-heading-title{font:var(--dt-w-semi) var(--dt-h2)/var(--dt-h2-lh) var(--dt-font-display);letter-spacing:var(--dt-ls-tight);color:var(--dms-text);margin:0;text-wrap:balance} .dt-spc-h2--sub.dt-spc-h2--sub .elementor-heading-title{font-size:var(--dt-h2-sub);line-height:var(--dt-h2-sub-lh)} .dt-spc-offer__title.dt-spc-offer__title .elementor-heading-title{font:var(--dt-w-semi) var(--dt-h3)/var(--dt-h3-lh) var(--dt-font-display);letter-spacing:var(--dt-ls-tight);color:var(--dms-text);margin:0;text-wrap:balance} @media(max-width:1024px){.dt-spc-h2.dt-spc-h2:not(.dt-spc-h2--sub) .elementor-heading-title{font-size:var(--dt-h2-t)}.dt-spc-offer__title.dt-spc-offer__title .elementor-heading-title{font-size:var(--dt-h3-t)}} @media(max-width:767px){.dt-spc-h1.dt-spc-h1 .elementor-heading-title{font-size:var(--dt-h1-page-m);line-height:var(--dt-h2-lh)}.dt-spc-h2.dt-spc-h2 .elementor-heading-title{font-size:var(--dt-h2-m)}.dt-spc-offer__title.dt-spc-offer__title .elementor-heading-title{font-size:var(--dt-h3-m)}} /* R2 offer card (DS-SPC-1): the figure is an EXAMPLE, so Bone, never Amber (theme 2.3). */ .dt-spc-offer__eyebrow.dt-spc-offer__eyebrow{margin-bottom:var(--dt-s-6)} .dt-spc-offer__figure.dt-spc-offer__figure p,.dt-spc-offer__figure.dt-spc-offer__figure .dt-spc-fig{margin:0;font:var(--dt-w-semi) var(--dt-figure-lg)/var(--dt-h2-lh) var(--dt-font-ui);letter-spacing:var(--dt-ls-tight);font-variant-numeric:tabular-nums;color:var(--dms-text)} .dt-spc-offer__figure.dt-spc-offer__figure .dt-spc-unit{font:var(--dt-w-regular) var(--dt-body)/1 var(--dt-font-ui);letter-spacing:0;color:var(--dms-muted);margin-left:var(--dt-s-2)} .dt-spc-offer__body.dt-spc-offer__body p{margin:var(--dt-s-6) 0 0;max-width:68ch;font:var(--dt-w-regular) var(--dt-body)/var(--dt-body-lh) var(--dt-font-ui);color:var(--dms-muted)} .dt-spc-offer__small.dt-spc-offer__small p{margin:var(--dt-s-7) 0 0;font:var(--dt-w-regular) var(--dt-small)/var(--dt-small-lh) var(--dt-font-ui);color:var(--dms-muted)} .dt-spc-offer__foot.dt-spc-offer__foot{margin-top:auto;padding-top:var(--dt-s-10)} .dt-spc-offer.dt-spc-offer{min-width:0} /* Text link (Bone underlined, theme 11.1-1) and outline button (Bone/60 edge has no Global). */ .dt-spc-textlink.dt-spc-textlink .elementor-button{min-height:var(--dt-control-h-sm);display:inline-flex;align-items:center;padding:0;background:transparent;border:0;border-radius:0;color:var(--dms-text);font:var(--dt-w-medium) var(--dt-ui)/1 var(--dt-font-ui);letter-spacing:0;text-transform:none;text-decoration:underline;text-decoration-color:var(--dt-bone-40);text-underline-offset:4px;transition:text-decoration-color var(--dt-motion) var(--dt-ease)} .dt-spc-textlink.dt-spc-textlink .elementor-button:hover{text-decoration-color:var(--dms-text);background:transparent;color:var(--dms-text)} .dt-spc-outline.dt-spc-outline .elementor-button{min-height:var(--dt-control-h-sm);display:inline-flex;align-items:center;justify-content:center;padding:0 var(--dt-s-10);background:transparent;border:var(--dt-hairline) solid var(--dt-bone-60);border-radius:var(--dms-radius);color:var(--dms-text);font:var(--dt-w-semi) var(--dt-btn)/1 var(--dt-font-ui);letter-spacing:var(--dt-ls-btn);text-transform:uppercase;white-space:nowrap;transition:background-color var(--dt-motion) var(--dt-ease)} .dt-spc-outline.dt-spc-outline .elementor-button:hover{background:var(--dt-slate);color:var(--dms-text)} .dt-spc-textlink.dt-spc-textlink .elementor-button:focus-visible,.dt-spc-outline.dt-spc-outline .elementor-button:focus-visible{outline:var(--dt-focus-w) solid var(--dms-primary);outline-offset:var(--dt-focus-offset)} /* R3: the plugin renders the three dropdowns inside ONE .dms-column; that child is the grid. No control lays out the inside of the widget (SRP A precedent). 3 / 3 / 1. */ .dt-spc-dropdowns.dt-spc-dropdowns .dms-filter-dropdowns>.dms-column{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:767px){.dt-spc-dropdowns.dt-spc-dropdowns .dms-filter-dropdowns>.dms-column{grid-template-columns:minmax(0,1fr)}} /* R4: sort shows at every width here (no drawer); full width on a phone. */ @media(max-width:767px){.dt-spc-results.dt-spc-results .dt-srp-tools,.dt-spc-results.dt-spc-results .dt-sort,.dt-spc-results.dt-spc-results .dt-sort .dms-orderby-dropdown,.dt-spc-results.dt-spc-results .dt-sort .ts-wrapper{width:100%}} /* R8 terms. */ .dt-spc-term__text.dt-spc-term__text p{margin:0;max-width:68ch;font:var(--dt-w-regular) var(--dt-body)/var(--dt-body-lh) var(--dt-font-ui);color:var(--dms-muted)} .dt-spc-figures.dt-spc-figures{padding-top:var(--dt-s-10);border-top:var(--dt-hairline) solid var(--dt-edge)} .dt-spc-figures.dt-spc-figures p{margin:0;font:var(--dt-w-regular) var(--dt-small)/var(--dt-small-lh) var(--dt-font-ui);color:var(--dms-muted)} /* ====== END THEME 26 - SPECIALS ====== */ /* ====================================================================== THEME 26 - ABOUT (PAGE_SPEC_About, page 74) ====== Visual styling only: layout, columns, gaps and every responsive step are v4 controls on page 74. Here: what no v4 prop reaches - the atomic button chrome on the text links (tripled for .elementor .e-button-base), the underline colour, and the focus rings. The map reuses .dt-map (VDP block). ====================================================================== */ .dt-ab-link.dt-ab-link.dt-ab-link{background:transparent;background-image:none;border:0;border-radius:0;padding:0;min-width:0;height:auto;min-height:var(--dt-control-h-sm);box-shadow:none;display:inline-flex;align-items:center;width:auto;font:var(--dt-w-medium) var(--dt-btn)/1 var(--dt-font-ui);letter-spacing:0;text-transform:none;color:var(--dt-bone);text-decoration:underline;text-decoration-color:var(--dt-bone-40);text-underline-offset:4px;transition:text-decoration-color var(--dt-motion) var(--dt-ease)} .dt-ab-link.dt-ab-link.dt-ab-link:hover{background:transparent;color:var(--dt-bone);text-decoration-color:var(--dt-bone)} .dt-ab-row.dt-ab-row{text-decoration:none;transition:background-color var(--dt-motion) var(--dt-ease)} .dt-ab-link.dt-ab-link:focus-visible,.dt-ab-btn.dt-ab-btn:focus-visible{outline:var(--dt-focus-w) solid var(--dt-glacier);outline-offset:var(--dt-focus-offset)} .dt-ab-row.dt-ab-row:focus-visible{outline:var(--dt-focus-w) solid var(--dt-glacier);outline-offset:calc(var(--dt-focus-offset) * -1)} .dt-ab-link.dt-ab-link:focus:not(:focus-visible),.dt-ab-btn.dt-ab-btn:focus:not(:focus-visible),.dt-ab-row.dt-ab-row:focus:not(:focus-visible){outline:none} /* ====== THEME 26 - LANDING (PAGE_SPEC_Landing, Pass 2) ====== Page 370 (/open-shop-day/) + form F12 (369). F12 joins the shared form scope above as .dt-lp-form (every :is() list that carried .dt-ct-form) and the checkbox-GROUP rules (with .dt-svc-form). No page-only rule: links, buttons and focus rings are v4 styles on the page's own elements. */ /* ====== END THEME 26 - LANDING ====== */ /* ====== THEME 26 - EXPEDITION RENTALS (PAGE_SPEC_Rentals, Pass 2) ====== Page 26 + form F11 (360). The shared form scope and the html-table scope above now include .dt-rent-form / .dt-rent-table. Visual styling only; layout is v4 controls on page 26 and F11. */ .dt-rent-h1{white-space:pre-line} .dt-rent-table{margin-top:var(--dt-s-14);min-width:0} .dt-rent-table.dt-rent-table .dt-table tbody th{width:30%} /* ====== END THEME 26 - EXPEDITION RENTALS ====== */ /* ====== THEME 26 - OUTFITTING & ACCESSORIES (PAGE_SPEC_Outfitting, Pass 2) ====== Page 24 + form F11 (368). The shared form scope above now includes .dt-oft-form. Visual styling only; layout is container controls on page 24 and F11. */ /* Checkbox GROUP options read as Bone; only the consent line stays muted (Service precedent). */ .dt-oft-form.dt-oft-form .dms-form .dms-form-input-checkbox:not(.dms-form-input-consent) > .dms-form-field-label{display:block;margin-bottom:var(--dt-s-3)} .dt-oft-form.dt-oft-form .dms-form .dms-form-input-checkbox:not(.dms-form-input-consent) > div > label{align-items:center;color:var(--dms-text);line-height:1.4} .dt-oft-form.dt-oft-form .dms-form .dms-form-input-checkbox:not(.dms-form-input-consent) input[type=checkbox]{margin:0} /* DS-OFT-1 tile: motion and the keyboard focus ring. Hover (Slate) is the element's own style state; Elementor writes it as :hover,:focus, so a clicked tile is reset. */ [data-dt-tile]{transition:background-color var(--dt-motion) var(--dt-ease)} [data-dt-tile]:focus-visible{outline:var(--dt-focus-w) solid var(--dms-primary);outline-offset:var(--dt-focus-offset)} [data-dt-tile]:focus:not(:focus-visible):not(:hover){outline:none;background-color:var(--e-global-color-card)} /* ====== END THEME 26 - OUTFITTING & ACCESSORIES ====== */ /* ====== THEME 26 - WOOPACK ====== (PAGE_SPEC_Woo_* §7; theme §11.2) Visual styling only, every colour a token. Every rule is scoped to a WooCommerce/PRO class so nothing reaches a Dealer.ms page (INSTALL §16). */ /* ---- Fonts for the v3 WooCommerce widgets (the typography control cannot hold a var() family — same RETIREMENT TRIGGER as the nav-menu rule) ---- */ .dt-font-display.dt-font-display .elementor-heading-title, .dt-font-display.dt-font-display .product_title { font-family: var(--dt-font-display); } .dt-woo-eyebrow.dt-woo-eyebrow .elementor-heading-title, .dt-woo-stock.dt-woo-stock .stock, .dt-woo-crumb.dt-woo-crumb .woocommerce-breadcrumb, .dt-woo-meta.dt-woo-meta .product_meta { font-family: var(--dt-font-mono); } .dt-woo-eyebrow .elementor-heading-title a { color: inherit; text-decoration: none; } .dt-woo-eyebrow .elementor-heading-title a:hover { color: var(--dt-bone); } .woocommerce-page .elementor-widget-woocommerce-product-price .price, .woocommerce-page .elementor-widget-woocommerce-product-short-description, .woocommerce-page .elementor-widget-woocommerce-product-content, .dt-woo-archdesc.dt-woo-archdesc .term-description, .dt-woo-archdesc.dt-woo-archdesc .page-description, .dt-woo-products.dt-woo-products ul.products li.product, .dt-woo-cart, .dt-woo-checkout, .dt-woo-account, .dt-cart .elementor-menu-cart__main { font-family: var(--dt-font-ui); } .dt-woo-archdesc p, .dt-woo-crumb .woocommerce-breadcrumb { margin: 0; } .dt-woo-crumb .woocommerce-breadcrumb a { text-decoration: none; } .dt-woo-crumb .woocommerce-breadcrumb a:hover { color: var(--dt-bone); } /* ---- Buttons that no widget control reaches (empty cart, notices, forms) --- */ .woocommerce .dt-woo-notice-btn, .woocommerce-notices-wrapper .button, .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button, .woocommerce-cart .return-to-shop .button, .woocommerce .woocommerce-MyAccount-content .woocommerce-info .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--dt-control-h-sm); padding: 0 var(--dt-s-10); background: transparent; color: var(--dt-bone); border: var(--dt-hairline) solid var(--dt-bone-60); border-radius: var(--dt-radius); font: var(--dt-w-semi) var(--dt-btn) / 1 var(--dt-font-ui); letter-spacing: var(--dt-ls-btn); text-transform: uppercase; text-decoration: none; transition: background-color var(--dt-motion) var(--dt-ease); } .woocommerce-notices-wrapper .button:hover, .woocommerce .woocommerce-message .button:hover, .woocommerce .woocommerce-info .button:hover, .woocommerce .woocommerce-MyAccount-content .woocommerce-info .button:hover { background: var(--dt-slate); color: var(--dt-bone); } /* The empty cart's Return to shop is the screen's one decision — Glacier. */ .woocommerce-cart .return-to-shop .button { background: var(--dt-glacier); border-color: var(--dt-glacier); color: var(--dt-charcoal); min-height: var(--dt-control-h); } .woocommerce-cart .return-to-shop .button:hover { background: var(--dt-glacier-press); border-color: var(--dt-glacier-press); color: var(--dt-charcoal); } /* Every button in the pack: uppercase Plex Sans 600 14 at .08em (§4.2) */ .dt-woo-products ul.products li.product .button, .dt-woo-atc .single_add_to_cart_button, .dt-woo-cart .button, .dt-woo-cart .checkout-button, .dt-woo-checkout .button, .dt-woo-checkout #place_order, .dt-woo-account .button, .dt-cart .elementor-menu-cart__footer-buttons .elementor-button { font-family: var(--dt-font-ui); font-weight: var(--dt-w-semi); font-size: var(--dt-btn); letter-spacing: var(--dt-ls-btn); text-transform: uppercase; line-height: 1; } .dt-woo-atc .single_add_to_cart_button { min-height: var(--dt-control-h); } .dt-woo-cart .checkout-button, .dt-woo-checkout #place_order { min-height: var(--dt-control-h); } /* ---- Notices (theme §11.2 item 8): Graphite, Edge, Bone icon, no green ---- */ .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-s-6); margin: 0 0 var(--dt-s-10); padding: var(--dt-s-8) var(--dt-s-10) var(--dt-s-8) calc(var(--dt-s-10) + 28px); background: var(--dt-graphite); color: var(--dt-bone); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); font: var(--dt-w-regular) var(--dt-ui) / 1.4 var(--dt-font-ui); list-style: none; } .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce-page .woocommerce-message::before, .woocommerce-page .woocommerce-info::before { color: var(--dt-bone); top: 50%; translate: 0 -50%; left: var(--dt-s-10); } .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error { border-color: var(--dt-amber); flex-direction: column; align-items: flex-start; } .woocommerce .woocommerce-error::before, .woocommerce-page .woocommerce-error::before { color: var(--dt-amber); top: var(--dt-s-8); left: var(--dt-s-10); } .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button { order: 2; margin-left: auto; float: none; } .woocommerce .woocommerce-message a:not(.button), .woocommerce .woocommerce-info a:not(.button), .woocommerce .woocommerce-error a { color: var(--dt-bone); text-decoration: underline; text-decoration-color: var(--dt-bone-40); text-underline-offset: 4px; } .woocommerce-notices-wrapper:empty { display: none; } /* ---- Fields (theme §10.4) where no widget control reaches -------------- */ .woocommerce form .form-row label, .woocommerce-page form .form-row label, .dt-woo-account form label, .woocommerce .woocommerce-ordering label { font: var(--dt-w-medium) var(--dt-label-sm) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } .woocommerce form .form-row .required, .woocommerce-page form .form-row .required { color: var(--dms-muted); text-decoration: none; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .woocommerce-ordering select, .woocommerce .quantity .qty, .dt-woo-cats--select select, .woocommerce #coupon_code, .woocommerce .coupon .input-text { min-height: var(--dt-control-h); padding: 0 var(--dt-s-6); background-color: var(--dt-charcoal); color: var(--dt-bone); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); font: var(--dt-w-regular) var(--dt-ui) / 1 var(--dt-font-ui); color-scheme: dark; box-shadow: none; } .woocommerce form .form-row textarea { padding: var(--dt-s-6); line-height: 1.5; min-height: 120px; resize: vertical; } .woocommerce form .form-row input.input-text::placeholder, .woocommerce form .form-row textarea::placeholder { color: var(--dt-muted-70); } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .woocommerce .woocommerce-ordering select:focus, .woocommerce .quantity .qty:focus, .dt-woo-cats--select select:focus { outline: var(--dt-focus-w) solid var(--dt-glacier); outline-offset: var(--dt-focus-offset); } .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid .select2-selection { border-color: var(--dt-amber); } .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--dt-edge); } .woocommerce .woocommerce-ordering select, .dt-woo-cats--select select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--dms-muted) 50%), linear-gradient(135deg, var(--dms-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .woocommerce .woocommerce-ordering select { min-width: var(--dt-sort-min-w); } .woocommerce .quantity .qty { width: 72px; padding: 0; text-align: center; font-variant-numeric: tabular-nums; } /* Checkbox + radio: native controls, 18px, Glacier when checked via accent-color (components.css .dt-form precedent) — the browser draws a contrasting tick. */ .woocommerce form input[type="checkbox"], .woocommerce #payment input[type="radio"], .dt-woo-account input[type="checkbox"] { width: var(--dt-box); height: var(--dt-box); margin: 0 var(--dt-s-4) 0 0; vertical-align: -4px; accent-color: var(--dt-glacier); color-scheme: dark; cursor: pointer; flex: none; } .woocommerce form input[type="checkbox"]:focus-visible, .woocommerce #payment input[type="radio"]:focus-visible { outline: var(--dt-focus-w) solid var(--dt-glacier); outline-offset: var(--dt-focus-offset); } /* Select2 (country / state) — the Tom Select dark-panel values (§7) */ .woocommerce .select2-container--default .select2-selection--single { height: var(--dt-control-h); background: var(--dt-charcoal); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: var(--dt-control-h); color: var(--dt-bone); padding-left: var(--dt-s-6); font-family: var(--dt-font-ui); font-size: var(--dt-ui); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--dt-control-h); } .select2-container .select2-dropdown { background: var(--dt-graphite); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); color: var(--dt-bone); font-family: var(--dt-font-ui); } .select2-container .select2-search--dropdown .select2-search__field { background: var(--dt-charcoal); color: var(--dt-bone); border: var(--dt-hairline) solid var(--dt-edge); } .select2-container .select2-results__option--highlighted[aria-selected], .select2-container .select2-results__option--highlighted[data-selected] { background: var(--dt-slate); color: var(--dt-bone); } .select2-container .select2-results__option[aria-selected="true"], .select2-container .select2-results__option[data-selected="true"] { background: var(--dt-bone); color: var(--dt-charcoal); } /* ---- Tables: Bulma reset first (§10.3) --------------------------------- */ .woocommerce table.shop_table, .woocommerce-page table.shop_table, .woocommerce table.woocommerce-product-attributes { border: 0; border-collapse: collapse; background: transparent; border-radius: 0; margin: 0; } .woocommerce table.shop_table th, .woocommerce table.shop_table td, .woocommerce table.woocommerce-product-attributes th, .woocommerce table.woocommerce-product-attributes td { background: transparent; border: 0; border-bottom: var(--dt-hairline) solid var(--dt-edge); padding: var(--dt-s-6) var(--dt-s-10); vertical-align: middle; } .woocommerce table.shop_table thead th { font: var(--dt-w-medium) var(--dt-label-sm) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } .woocommerce table.shop_table td, .woocommerce table.shop_table tbody th { font-size: var(--dt-ui); font-variant-numeric: tabular-nums; } .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tbody th { font: var(--dt-w-medium) var(--dt-label) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-figure); color: var(--dms-muted); text-transform: none; } .woocommerce table.shop_table .amount, .dt-woo-cart .cart_totals .amount, .dt-woo-checkout .order-total .amount { color: var(--dt-amber); font-weight: var(--dt-w-semi); } .woocommerce table.shop_table del .amount, .woocommerce .price del .amount { color: var(--dms-muted); font-weight: var(--dt-w-regular); } .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before { font: var(--dt-w-medium) var(--dt-label-sm) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } /* Specifications (W2 §7-C): the .dt-table--dl values */ .dt-woo-specs table.woocommerce-product-attributes { width: 100%; max-width: 68ch; border-top: var(--dt-hairline) solid var(--dt-edge); } .dt-woo-specs table.woocommerce-product-attributes th { width: 30%; height: var(--dt-row-h); font: var(--dt-w-medium) var(--dt-label) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-figure); color: var(--dms-muted); text-align: left; } .dt-woo-specs table.woocommerce-product-attributes td p { margin: 0; font-variant-numeric: tabular-nums; } .woocommerce mark, .woocommerce-page mark { background: transparent; color: var(--dt-bone); font-weight: var(--dt-w-semi); } /* ---- W1 archive + product card (DS-WOO-1) ------------------------------ */ .dt-woo-products.dt-woo-products ul.products li.product { display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--dt-motion) var(--dt-ease); } .dt-woo-products ul.products li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; } .dt-woo-products ul.products li.product img { aspect-ratio: 4 / 3; object-fit: cover; margin: 0; border-radius: 0; background: var(--dt-graphite); } .dt-woo-products.dt-woo-products ul.products li.product .woocommerce-loop-product__title { padding: var(--dt-s-8) var(--dt-s-8) 0; margin: 0; font: var(--dt-w-semi) var(--dt-title) / 1.25 var(--dt-font-ui); color: var(--dt-bone); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dt-woo-products.dt-woo-products ul.products li.product .price { margin-top: auto; padding: var(--dt-s-8) var(--dt-s-8) 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dt-s-4); font: var(--dt-w-semi) var(--dt-price) / 1.1 var(--dt-font-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .dt-woo-products ul.products li.product .price del { font-size: var(--dt-small); font-weight: var(--dt-w-regular); order: -1; } .dt-woo-products ul.products li.product .price ins { text-decoration: none; } .dt-woo-products.dt-woo-products ul.products li.product .button { margin: var(--dt-s-7) var(--dt-s-8) var(--dt-s-8); min-height: var(--dt-control-h-sm); display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--dt-s-4); } .dt-woo-products ul.products li.product .added_to_cart { display: inline-flex; align-items: center; min-height: var(--dt-control-h-sm); margin: calc(var(--dt-s-4) * -1) var(--dt-s-8) var(--dt-s-6); padding: 0; color: var(--dt-bone); font: var(--dt-w-medium) var(--dt-btn) / 1.3 var(--dt-font-ui); text-decoration: underline; text-decoration-color: var(--dt-bone-40); text-underline-offset: 4px; } .dt-woo-products ul.products li.product .button.loading::after { color: var(--dt-bone); } .dt-woo-products .woocommerce-result-count { margin: 0; align-self: center; font: var(--dt-w-medium) var(--dt-label) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } .dt-woo-products .woocommerce-ordering { margin-bottom: var(--dt-s-10); } .dt-woo-products .elementor-products-nothing-found { padding: var(--dt-s-11); background: var(--dt-graphite); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); font: var(--dt-w-regular) var(--dt-ui) / 1.4 var(--dt-font-ui); } /* Pagination — 44px squares, current Charcoal-on-Bone (§17). The widget sets colours; size is here. */ .dt-woo-products nav.woocommerce-pagination { margin-top: var(--dt-s-14); } .dt-woo-products nav.woocommerce-pagination ul { border: 0; display: flex; justify-content: center; gap: var(--dt-s-3); } .dt-woo-products nav.woocommerce-pagination ul li { border: 0; } .dt-woo-products nav.woocommerce-pagination ul li a, .dt-woo-products nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--dt-control-h-sm); height: var(--dt-control-h-sm); padding: 0; border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); font: var(--dt-w-medium) var(--dt-btn) / 1 var(--dt-font-ui); font-variant-numeric: tabular-nums; } .dt-woo-products nav.woocommerce-pagination ul li span.current { border-color: var(--dt-bone); font-weight: var(--dt-w-semi); } .dt-woo-products nav.woocommerce-pagination ul li a:hover { background: var(--dt-slate); color: var(--dt-bone); } /* Category list (DS-WOO-3, .dt-navlist) */ .dt-woo-cats .widget_product_categories { background: var(--dt-graphite); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); } .dt-woo-cats .widget_product_categories > h5 { margin: 0; padding: var(--dt-s-7) var(--dt-s-10); border-bottom: var(--dt-hairline) solid var(--dt-edge); font: var(--dt-w-medium) var(--dt-label-sm) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } .dt-woo-cats ul.product-categories { list-style: none; margin: 0; padding: 0; } .dt-woo-cats ul.product-categories li { position: relative; border-bottom: var(--dt-hairline) solid var(--dt-edge); } .dt-woo-cats ul.product-categories li:last-child { border-bottom: 0; } .dt-woo-cats ul.product-categories li a { display: flex; align-items: center; min-height: var(--dt-row-h); padding: 0 var(--dt-s-19) 0 var(--dt-s-10); color: var(--dt-bone); text-decoration: none; font: var(--dt-w-regular) var(--dt-ui) / 1 var(--dt-font-ui); transition: background-color var(--dt-motion) var(--dt-ease); } .dt-woo-cats ul.product-categories li a:hover { background: var(--dt-slate); } .dt-woo-cats ul.product-categories li .count { position: absolute; right: var(--dt-s-10); top: 50%; translate: 0 -50%; pointer-events: none; font: var(--dt-w-regular) var(--dt-label) / 1 var(--dt-font-mono); letter-spacing: var(--dt-ls-chip); color: var(--dms-muted); } .dt-woo-cats ul.product-categories li.current-cat a { background: var(--dt-bone); color: var(--dt-charcoal); } .dt-woo-cats ul.product-categories li.current-cat .count { color: var(--dt-charcoal); } .dt-woo-cats--select .widget_product_categories { background: transparent; border: 0; } .dt-woo-cats--select .widget_product_categories > h5 { padding: 0 0 var(--dt-s-3); border: 0; } .dt-woo-cats--select select { width: 100%; } /* ---- W2 single product --------------------------------------------------- */ .dt-woo-gallery .woocommerce-product-gallery { margin: 0; } .dt-woo-gallery .woocommerce-product-gallery__image img { aspect-ratio: 4 / 3; object-fit: cover; } .dt-woo-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dt-s-4); } .dt-woo-gallery .flex-control-thumbs li { width: auto; float: none; padding: 0; } .dt-woo-gallery .flex-control-thumbs img { opacity: 1; aspect-ratio: 1; object-fit: cover; transition: outline-color var(--dt-motion) var(--dt-ease); outline: var(--dt-rule) solid transparent; outline-offset: -2px; } .dt-woo-gallery .flex-control-thumbs img:hover { outline-color: var(--dt-bone-60); } .dt-woo-gallery .flex-control-thumbs img.flex-active { outline-color: var(--dt-glacier); } .dt-woo-gallery .woocommerce-product-gallery__trigger { top: var(--dt-s-6); right: var(--dt-s-6); width: 36px; height: 36px; border-radius: var(--dt-radius); background: var(--dt-charcoal-80); } .dt-woo-gallery .woocommerce-product-gallery__trigger::before { border-color: var(--dt-bone); } .dt-woo-gallery .woocommerce-product-gallery__trigger::after { background: var(--dt-bone); } .pswp__bg { background: var(--dt-charcoal-96); } .dt-woo-price .price del { order: -1; } .dt-woo-price .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dt-s-5); margin: 0; font-variant-numeric: tabular-nums; } .dt-woo-price .price del, .dt-woo-price .price del .amount { color: var(--dms-muted); font-size: var(--dt-body); font-weight: var(--dt-w-regular); } .dt-woo-price .price ins { text-decoration: none; } .dt-woo-stock .stock { margin: 0; letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } .dt-woo-atc form.cart { margin: 0; } .dt-woo-atc form.cart:not(.variations_form), .dt-woo-atc .woocommerce-variation-add-to-cart { display: flex; gap: var(--dt-s-6); } .dt-woo-atc .single_add_to_cart_button { flex: 1; } .dt-woo-atc .single_add_to_cart_button.disabled, .dt-woo-atc .single_add_to_cart_button.wc-variation-selection-needed { opacity: .4; } .dt-woo-atc table.variations { width: 100%; margin: 0 0 var(--dt-s-8); border: 0; } .dt-woo-atc table.variations th, .dt-woo-atc table.variations td { display: block; padding: 0; border: 0; background: transparent; text-align: left; } .dt-woo-atc table.variations label { font: var(--dt-w-medium) var(--dt-label-sm) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } .dt-woo-atc table.variations select { width: 100%; min-height: var(--dt-control-h); padding: 0 36px 0 var(--dt-s-6); margin-top: var(--dt-s-3); font: var(--dt-w-regular) var(--dt-ui) / 1 var(--dt-font-ui); color-scheme: dark; } .dt-woo-atc .reset_variations { display: inline-flex; margin-top: var(--dt-s-4); color: var(--dt-bone); font-size: var(--dt-btn); text-decoration: underline; text-decoration-color: var(--dt-bone-40); text-underline-offset: 4px; } .dt-woo-atc .woocommerce-variation-price .price { font: var(--dt-w-semi) var(--dt-price) / 1.1 var(--dt-font-ui); color: var(--dt-amber); } .dt-woo-atc .woocommerce-variation-availability .stock { font: var(--dt-w-medium) var(--dt-label) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } .dt-woo-meta .product_meta { display: grid; gap: var(--dt-s-4); padding-top: var(--dt-s-8); border-top: var(--dt-hairline) solid var(--dt-edge); letter-spacing: var(--dt-ls-label); text-transform: uppercase; } .dt-woo-meta .product_meta .detail-content, .dt-woo-meta .product_meta a { text-transform: none; letter-spacing: var(--dt-ls-figure); } .dt-woo-content p:last-child { margin-bottom: 0; } .dt-woo-content { max-width: 68ch; } .woocommerce-page .elementor-widget-woocommerce-product-related .products > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* ---- W3 cart ----------------------------------------------------------- */ .dt-woo-cart .product-thumbnail img { width: 64px; aspect-ratio: 4 / 3; object-fit: cover; } .dt-woo-cart a.remove { display: inline-flex; align-items: center; justify-content: center; width: var(--dt-chip-h); height: var(--dt-chip-h); border-radius: var(--dt-radius); color: var(--dt-bone) !important; font-size: 20px; font-weight: var(--dt-w-regular); } .dt-woo-cart a.remove:hover { background: var(--dt-slate); color: var(--dt-bone) !important; } .dt-woo-cart .variation dt, .dt-woo-cart .variation dd { font: var(--dt-w-medium) var(--dt-label-sm) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } .dt-woo-cart .variation dd p { margin: 0; } .woocommerce .blockUI.blockOverlay { background: var(--dt-charcoal-82) !important; opacity: 1 !important; } .woocommerce-cart .cart-empty.woocommerce-info { margin-bottom: var(--dt-s-10); } /* ---- W4 checkout --------------------------------------------------------- */ .woocommerce-checkout #payment, .dt-woo-checkout #payment { background: transparent; border-radius: 0; } .dt-woo-checkout #payment ul.payment_methods { border-bottom: var(--dt-hairline) solid var(--dt-edge); padding: 0 0 var(--dt-s-6); } .dt-woo-checkout #payment ul.payment_methods li { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--dt-control-h-sm); } .dt-woo-checkout #payment ul.payment_methods li label { font: var(--dt-w-regular) var(--dt-btn) / 1.4 var(--dt-font-ui); color: var(--dt-bone); text-transform: none; letter-spacing: 0; } .dt-woo-checkout #payment div.payment_box { width: 100%; margin: var(--dt-s-3) 0 var(--dt-s-6); padding: var(--dt-s-6) var(--dt-s-8); background: var(--dt-charcoal); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); color: var(--dms-muted); font-size: var(--dt-small); } .dt-woo-checkout #payment div.payment_box::before { display: none; } .dt-woo-checkout #payment div.payment_box p { margin: 0; } .dt-woo-checkout .woocommerce-privacy-policy-text p, .dt-woo-checkout .woocommerce-terms-and-conditions-checkbox-text { font-size: var(--dt-small); } /* Order received → the success panel (W4 §7-C) */ .woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received { display: block; margin: 0; padding: calc(var(--dt-s-14) + 40px + var(--dt-s-7)) var(--dt-s-14) var(--dt-s-14); position: relative; background: var(--dt-graphite); border: var(--dt-hairline) solid var(--dt-edge); border-bottom: 0; border-radius: var(--dt-radius) var(--dt-radius) 0 0; font: var(--dt-w-semi) var(--dt-h3) / 1.2 var(--dt-font-display); color: var(--dt-bone); } .woocommerce-order-received .woocommerce-thankyou-order-received::before { content: ""; position: absolute; top: var(--dt-s-14); left: var(--dt-s-14); width: 40px; height: 40px; background: var(--dms-success); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat; } .woocommerce-order-received ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--dt-hairline); margin: 0 0 var(--dt-s-14); padding: 0 var(--dt-s-14) var(--dt-s-14); list-style: none; background: var(--dt-graphite); border: var(--dt-hairline) solid var(--dt-edge); border-top: 0; border-radius: 0 0 var(--dt-radius) var(--dt-radius); } .woocommerce-order-received ul.woocommerce-order-overview li { margin: 0; padding: var(--dt-s-7) var(--dt-s-8); border: 0; background: var(--dt-charcoal); outline: var(--dt-hairline) solid var(--dt-edge); font: var(--dt-w-medium) var(--dt-label-sm) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } .woocommerce-order-received ul.woocommerce-order-overview li strong { display: block; margin-top: var(--dt-s-3); font: var(--dt-w-regular) var(--dt-btn) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-figure); text-transform: none; color: var(--dt-bone); } .woocommerce-order-received .woocommerce-order > p:not(.woocommerce-thankyou-order-received) { color: var(--dms-muted); } .woocommerce-order-received .woocommerce-order-details__title, .woocommerce-order-received .woocommerce-column__title { font: var(--dt-w-semi) var(--dt-h3) / 1.2 var(--dt-font-display); color: var(--dt-bone); } .woocommerce-order-received .woocommerce-customer-details address { padding: var(--dt-s-10); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); color: var(--dt-bone); font-style: normal; line-height: 1.6; } @media (max-width: 1024px) { .woocommerce-order-received ul.woocommerce-order-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .woocommerce-order-received ul.woocommerce-order-overview { grid-template-columns: minmax(0, 1fr); padding: 0 var(--dt-s-10) var(--dt-s-10); } .woocommerce-order-received .woocommerce-thankyou-order-received { padding: calc(var(--dt-s-10) + 40px + var(--dt-s-7)) var(--dt-s-10) var(--dt-s-10); } .woocommerce-order-received .woocommerce-thankyou-order-received::before { top: var(--dt-s-10); left: var(--dt-s-10); } } /* ---- W5 my account ------------------------------------------------------- */ .dt-woo-account .woocommerce-MyAccount-navigation ul { border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); overflow: hidden; } .dt-woo-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; } .dt-woo-account .woocommerce-MyAccount-navigation a { font: var(--dt-w-regular) var(--dt-ui) / 1.4 var(--dt-font-ui); text-decoration: none; min-height: var(--dt-row-h); display: flex; align-items: center; } .dt-woo-account .woocommerce-MyAccount-content p { color: var(--dt-bone); } .dt-woo-account #customer_login .u-column1, .dt-woo-account #customer_login .u-column2, .dt-woo-account .woocommerce-form-login, .dt-woo-account .woocommerce-ResetPassword { padding: var(--dt-s-14); background: var(--dt-graphite); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); } .dt-woo-account #customer_login .woocommerce-form-login, .dt-woo-account #customer_login .woocommerce-form-register { padding: 0; margin: 0; border: 0; background: transparent; } .dt-woo-account #customer_login h2, .dt-woo-account .woocommerce-MyAccount-content h2, .dt-woo-account .woocommerce-MyAccount-content h3 { font: var(--dt-w-semi) var(--dt-h3) / 1.2 var(--dt-font-display); color: var(--dt-bone); } .dt-woo-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; min-height: var(--dt-control-h-sm); font: var(--dt-w-regular) var(--dt-btn) / 1 var(--dt-font-ui); text-transform: none; letter-spacing: 0; color: var(--dt-bone); } .dt-woo-account .woocommerce-LostPassword a, .dt-woo-account .woocommerce-privacy-policy-text a { color: var(--dt-bone); text-decoration: underline; text-decoration-color: var(--dt-bone-40); text-underline-offset: 4px; } .dt-woo-account .woocommerce-form-register .woocommerce-form-register__submit { background: transparent !important; color: var(--dt-bone) !important; border-color: var(--dt-bone-60) !important; } .dt-woo-account .woocommerce-form-register .woocommerce-form-register__submit:hover { background: var(--dt-slate) !important; } .dt-woo-account .show-password-input { color: var(--dt-bone-80); } .dt-woo-account .woocommerce-Address address { padding: var(--dt-s-10); border: var(--dt-hairline) solid var(--dt-edge); border-radius: var(--dt-radius); font-style: normal; line-height: 1.6; color: var(--dt-bone); } .dt-woo-account .woocommerce-orders-table__cell-order-status { font-family: var(--dt-font-mono); font-size: var(--dt-label); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } @media (max-width: 767px) { .dt-woo-account #customer_login .u-column1, .dt-woo-account #customer_login .u-column2 { padding: var(--dt-s-10); } } /* ---- Header cart (PAGE_SPEC_Header decision 3; DS-WOO-4) --------------- */ .dt-cart .elementor-menu-cart__toggle .elementor-button { min-width: var(--dt-control-h-sm); min-height: var(--dt-control-h-sm); justify-content: center; } .dt-cart .elementor-menu-cart__toggle .elementor-button:focus-visible { outline: var(--dt-focus-w) solid var(--dt-glacier); outline-offset: var(--dt-focus-offset); } .dt-cart .elementor-menu-cart__toggle .elementor-button-icon[data-counter]::before, .dt-cart .elementor-button-icon-qty[data-counter] { border-radius: var(--dt-radius); min-width: var(--dt-box); height: var(--dt-box); line-height: var(--dt-box); font: var(--dt-w-medium) var(--dt-label-sm) / var(--dt-box) var(--dt-font-mono); font-variant-numeric: tabular-nums; } .dt-cart .elementor-menu-cart__container { background-color: var(--dt-charcoal-82); } .dt-cart .elementor-menu-cart__main { box-shadow: none; } .dt-cart .elementor-menu-cart__product-name a { font-weight: var(--dt-w-medium); text-decoration: none; } .dt-cart .elementor-menu-cart__product-price { font-family: var(--dt-font-mono); font-size: var(--dt-label); letter-spacing: var(--dt-ls-figure); } .dt-cart .elementor-menu-cart__product-price .amount { font-family: var(--dt-font-ui); font-weight: var(--dt-w-semi); letter-spacing: 0; } .dt-cart .elementor-menu-cart__subtotal { font: var(--dt-w-medium) var(--dt-label-sm) / 1 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; } .dt-cart .elementor-menu-cart__subtotal .amount { font: var(--dt-w-semi) var(--dt-price) / 1.1 var(--dt-font-ui); letter-spacing: -.01em; text-transform: none; color: var(--dt-amber); } .dt-cart .elementor-menu-cart__footer-buttons .elementor-button { min-height: var(--dt-control-h); display: inline-flex; align-items: center; justify-content: center; } .dt-cart .woocommerce-mini-cart__empty-message { font: var(--dt-w-regular) var(--dt-ui) / 1.4 var(--dt-font-ui); } /* ---- Pass 1 fixes ------------------------------------------------------ */ /* PRO's cart/checkout/account/menu-cart widgets resolve their default typography to Roboto (measured 2026-09-25); the family comes from the Global Font here, same RETIREMENT TRIGGER as the nav-menu rule. Specific mono and display rules below and above out-rank this by specificity. */ .dt-woo-cart.dt-woo-cart *, .dt-woo-checkout.dt-woo-checkout *, .dt-woo-account.dt-woo-account *, .dt-cart.dt-cart .elementor-menu-cart__main *, .woocommerce-order.woocommerce-order * { font-family: var(--dt-font-ui); } .elementor .dt-woo-cart.dt-woo-cart .cart_totals > h2, .elementor .dt-woo-checkout.dt-woo-checkout h3, .elementor .dt-woo-account.dt-woo-account .woocommerce-MyAccount-content h2, .elementor .dt-woo-account.dt-woo-account #customer_login h2 { font-family: var(--dt-font-display); font-weight: var(--dt-w-semi); font-size: var(--dt-h3); line-height: 1.2; letter-spacing: -.01em; } .elementor .dt-woo-cart.dt-woo-cart table.shop_table td .amount, .elementor .dt-woo-cart.dt-woo-cart .cart_totals .amount, .elementor .dt-woo-checkout.dt-woo-checkout table.shop_table td .amount { color: var(--dt-amber); font-weight: var(--dt-w-semi); } .elementor .dt-woo-cart.dt-woo-cart .cart_totals .order-total .amount, .elementor .dt-woo-checkout.dt-woo-checkout .order-total .amount { font-size: var(--dt-price); letter-spacing: -.01em; } .woocommerce-shipping-destination { display: none; } .woocommerce form .form-row label.woocommerce-form__label-for-checkbox, .woocommerce form label.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: flex-start; gap: var(--dt-s-4); min-height: var(--dt-control-h-sm); font: var(--dt-w-regular) var(--dt-btn) / 1.5 var(--dt-font-ui); letter-spacing: 0; text-transform: none; color: var(--dt-bone); } .woocommerce form .checkout-inline-error-message, .woocommerce form .form-row .woocommerce-error-message { margin: var(--dt-s-3) 0 0; font: var(--dt-w-regular) var(--dt-xsmall) / 1.4 var(--dt-font-ui); color: var(--dt-amber); } .woocommerce form .form-row.woocommerce-invalid .select2-container--default .select2-selection--single, .woocommerce form .form-row.woocommerce-invalid-required-field input[type="checkbox"] { border-color: var(--dt-amber); outline-color: var(--dt-amber); } .woocommerce form .form-row.woocommerce-validated .select2-container--default .select2-selection--single, .woocommerce form .form-row.woocommerce-validated select { border-color: var(--dt-edge); } .woocommerce form .form-row.woocommerce-invalid label { color: var(--dms-muted); } /* Notice icons: Tabler info-circle / alert-triangle as masks in the text colour — WooCommerce's icon font draws a box glyph on this install. */ .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-error::before, .woocommerce-page .woocommerce-message::before, .woocommerce-page .woocommerce-info::before, .woocommerce-page .woocommerce-error::before { content: ""; position: absolute; width: 20px; height: 20px; background: currentColor; font-family: inherit; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E") center / contain no-repeat; } .woocommerce .woocommerce-message::before, .woocommerce-page .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce-page .woocommerce-info::before { color: var(--dt-bone); } .woocommerce .woocommerce-error::before, .woocommerce-page .woocommerce-error::before { color: var(--dt-amber); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.4 3.9L2.6 17.4A1.8 1.8 0 0 0 4.2 20h15.6a1.8 1.8 0 0 0 1.6-2.6L13.6 3.9a1.8 1.8 0 0 0-3.2 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.4 3.9L2.6 17.4A1.8 1.8 0 0 0 4.2 20h15.6a1.8 1.8 0 0 0 1.6-2.6L13.6 3.9a1.8 1.8 0 0 0-3.2 0z'/%3E%3C/svg%3E"); } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { position: relative; } .woocommerce .woocommerce-error li { margin: 0; } /* Order received: WooCommerce's clearfix pseudo-elements would take grid cells. */ .woocommerce-order-received ul.woocommerce-order-overview::before, .woocommerce-order-received ul.woocommerce-order-overview::after { display: none; } .woocommerce-order .product-quantity { color: var(--dms-muted); font-weight: var(--dt-w-regular); } /* W2: the gallery trigger (WooCommerce 11 prints an emoji; WordPress swaps it for an image) — a Charcoal/80 square with a Bone zoom glyph. */ .woocommerce div.product .dt-woo-gallery div.images .woocommerce-product-gallery__trigger, .dt-woo-gallery.dt-woo-gallery .woocommerce-product-gallery__trigger { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; top: var(--dt-s-6); right: var(--dt-s-6); border-radius: var(--dt-radius); background: var(--dt-charcoal-80); color: var(--dt-bone); font-size: 0; text-indent: 0; } .dt-woo-gallery.dt-woo-gallery .woocommerce-product-gallery__trigger > span, .dt-woo-gallery.dt-woo-gallery .woocommerce-product-gallery__trigger img { display: none; } .dt-woo-gallery.dt-woo-gallery .woocommerce-product-gallery__trigger::before { content: ""; position: static; width: 20px; height: 20px; border: 0; border-radius: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M7 10h6M10 7v6M21 21l-6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M7 10h6M10 7v6M21 21l-6-6'/%3E%3C/svg%3E") center / contain no-repeat; } .dt-woo-gallery.dt-woo-gallery .woocommerce-product-gallery__trigger::after { display: none; } .dt-woo-specs.dt-woo-specs table.woocommerce-product-attributes td { font-style: normal; color: var(--dt-bone); } .dt-woo-atc.dt-woo-atc .stock, .elementor-widget-woocommerce-product-add-to-cart .stock { margin: 0 0 var(--dt-s-6); font: var(--dt-w-medium) var(--dt-label) / 1.3 var(--dt-font-mono); letter-spacing: var(--dt-ls-label); text-transform: uppercase; color: var(--dms-muted); } /* WooCommerce's own colour variables, re-pointed at the Global Colors so every WooCommerce state (validated, invalid, highlight, destructive) lands on a theme role: red/destructive → Amber (inline error, §2.3), green → Edge (a valid field is not a decision and green is form-success only), highlight → Amber. Scoped to WooCommerce pages and widgets. */ body.woocommerce, body.woocommerce-page, body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account, .dt-cart { --wc-red: var(--dt-amber); --wc-destructive: var(--dt-amber); --wc-green: var(--dt-edge); --wc-orange: var(--dt-amber); --wc-blue: var(--dt-bone); --wc-primary: var(--dt-glacier); --wc-primary-text: var(--dt-charcoal); --wc-secondary: var(--dt-graphite); --wc-secondary-text: var(--dt-bone); --wc-highlight: var(--dt-amber); --wc-highligh-text: var(--dt-charcoal); --wc-content-bg: var(--dt-charcoal); --wc-subtext: var(--dms-muted); --wc-form-border-color: var(--dt-edge); --wc-form-border-radius: var(--dt-radius); --wc-form-border-width: var(--dt-hairline); --wc-card-border-radius: var(--dt-radius); } .woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart .stock, .woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart .stock.out-of-stock, .woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart .stock.in-stock { color: var(--dms-muted); font-size: var(--dt-label); } .dt-woo-checkout.dt-woo-checkout .checkout .checkout-inline-error-message { color: var(--dt-amber); font-size: var(--dt-xsmall); margin: var(--dt-s-3) 0 0; } .elementor .dt-woo-cart.dt-woo-cart .cart_totals .woocommerce-Price-amount, .elementor .dt-woo-cart.dt-woo-cart .cart_totals .woocommerce-Price-amount bdi { color: var(--dt-amber); } /* ====== END THEME 26 - WOOPACK ====== */ /* ====== THEME 26 - TRADE-IN POPUP (Home region 16, popup .dt-ti-popup) ====== Elementor Popup chrome to the design's modal: Charcoal/82 overlay, Graphite panel, 1px Edge, no shadow, 560 wide inside a 16px gutter, content scrolls inside the panel (Sell My Rig 12.3-C). The form takes the shared form scope via .dt-ti-form. Visual styling; the size and position are popup settings. */ /* The popup document's post-.css writes the overlay colour and a box-shadow on #elementor-popup-modal- (control defaults; colour controls cannot hold a var() or an alpha global). !important on those two properties only, scoped to this popup's class, instead of writing an install id into the Kit. */ .dt-ti-popup.dt-ti-popup{background-color:var(--dt-scrim-overlay) !important} .dt-ti-popup.dt-ti-popup .dialog-widget-content{background:var(--dt-graphite);border:1px solid var(--dt-edge);border-radius:var(--dt-radius);box-shadow:none !important;max-width:calc(100vw - 2 * var(--dt-gutter-m))} .dt-ti-popup.dt-ti-popup .dialog-message{max-width:100%;overflow-y:auto;overscroll-behavior:contain} /* ====== END THEME 26 - TRADE-IN POPUP ====== */ /* F3 stock alert (Home region 14): the SECONDARY submit is Bone, not Glacier (theme §7-5). Doubled class outranks the shared :is() scope. */ .dt-alert-form.dt-alert-form .dms-form input[type=submit],.dt-alert-form.dt-alert-form .dms-form button[type=submit]{background:var(--dt-bone);border-color:var(--dt-bone);color:var(--dt-charcoal)} .dt-alert-form.dt-alert-form .dms-form input[type=submit]:hover,.dt-alert-form.dt-alert-form .dms-form button[type=submit]:hover{background:var(--dt-bone-press);border-color:var(--dt-bone-press)} /* ---- SAVED RIGS — dms-ext-favorites trigger, flyout and overlay (theme §7) ---- The plugin appends these to , outside every template, and favorites.css loads late with a white flyout (#fff, #e5e7eb, #f3f4f6, #6b7280, #9ca3af, #374151) plus an inline :root block setting both colour vars to #1d4ed8. So: unscoped, every class doubled to win on specificity, never !important. Recipe = the prototype's .dt-drawer: Graphite panel, 1px Edge, NO shadow, Charcoal/82 overlay, Bone text, Glacier primary button and focus ring. Visual only — the plugin's width, position and open/close stay native. Retirement trigger: dms-ext-favorites exposing colour controls/variables for the flyout surface, rules and text. */ .dms-favorites-overlay.dms-favorites-overlay{background:var(--dt-scrim-overlay)} .dms-favorites-sidebar.dms-favorites-sidebar{background:var(--dt-graphite);color:var(--dms-text);border-left:var(--dt-hairline) solid var(--dms-border);box-shadow:none;font-family:var(--dt-font-ui)} .dms-favorites-sidebar-header.dms-favorites-sidebar-header{border-bottom:var(--dt-hairline) solid var(--dms-border);padding:var(--dt-s-6) var(--dt-s-8) var(--dt-s-6) var(--dt-s-10)} .dms-favorites-sidebar-title.dms-favorites-sidebar-title{font:var(--dt-w-semi) var(--dt-title)/var(--dt-title-lh) var(--dt-font-ui);color:var(--dms-text)} .dms-favorites-sidebar-close.dms-favorites-sidebar-close{width:var(--dt-control-h-sm);height:var(--dt-control-h-sm);padding:0;border-radius:var(--dms-radius);color:var(--dms-text);background:transparent;transition:background-color var(--dt-motion) var(--dt-ease)} .dms-favorites-sidebar-close.dms-favorites-sidebar-close:hover{background:var(--dt-slate);color:var(--dms-text)} .dms-favorites-sidebar-empty.dms-favorites-sidebar-empty{color:var(--dms-muted);font:var(--dt-w-regular) var(--dt-ui)/var(--dt-ui-lh) var(--dt-font-ui)} .dms-favorites-item.dms-favorites-item{padding:var(--dt-s-6) var(--dt-s-8) var(--dt-s-6) var(--dt-s-10)} .dms-favorites-item.dms-favorites-item:not(:last-child){border-bottom:var(--dt-hairline) solid var(--dms-border)} .dms-favorites-item-link.dms-favorites-item-link{color:var(--dms-text)} .dms-favorites-item-title.dms-favorites-item-title{font:var(--dt-w-medium) var(--dt-ui)/var(--dt-ui-lh) var(--dt-font-ui);color:var(--dms-text);text-underline-offset:3px} .dms-favorites-item-image.dms-favorites-item-image{border-radius:var(--dms-radius);background:var(--dt-basalt)} .dms-favorites-item-no-image.dms-favorites-item-no-image{background:var(--dt-charcoal)} .dms-favorites-item-remove.dms-favorites-item-remove{width:var(--dt-control-h-sm);height:var(--dt-control-h-sm);justify-content:center;padding:0;border-radius:var(--dms-radius);color:var(--dt-bone-80);background:transparent;transition:background-color var(--dt-motion) var(--dt-ease),color var(--dt-motion) var(--dt-ease)} .dms-favorites-item-remove.dms-favorites-item-remove:hover{background:var(--dt-slate);color:var(--dms-text)} .dms-favorites-sidebar-footer.dms-favorites-sidebar-footer{border-top:var(--dt-hairline) solid var(--dms-border);padding:var(--dt-s-8) var(--dt-s-10);background:var(--dt-graphite)} .dms-favorites-compare-button.dms-favorites-compare-button{display:flex;align-items:center;justify-content:center;min-height:var(--dt-control-h);padding:0 var(--dt-s-10);background:var(--dms-primary);color:var(--dms-dark);border:var(--dt-hairline) solid var(--dms-primary);border-radius:var(--dms-radius);font:var(--dt-w-semi) var(--dt-btn)/1 var(--dt-font-ui);text-transform:uppercase;letter-spacing:var(--dt-ls-btn);filter:none;transition:background-color var(--dt-motion) var(--dt-ease),border-color var(--dt-motion) var(--dt-ease)} .dms-favorites-compare-button.dms-favorites-compare-button:hover{background:var(--dms-secondary);border-color:var(--dms-secondary);color:var(--dms-dark);filter:none} .dms-favorites-trigger.dms-favorites-trigger{background:var(--dt-bone);color:var(--dms-dark);border-radius:var(--dms-radius);box-shadow:none;min-height:var(--dt-control-h-sm);padding:0 var(--dt-s-8);font:var(--dt-w-semi) var(--dt-btn)/1 var(--dt-font-ui);transition:background-color var(--dt-motion) var(--dt-ease)} .dms-favorites-trigger.dms-favorites-trigger:hover{background:var(--dt-bone-press);filter:none;transform:none} .dms-favorites-trigger-count.dms-favorites-trigger-count{font:var(--dt-w-semi) var(--dt-btn)/1 var(--dt-font-ui);font-variant-numeric:tabular-nums} .dms-favorites-sidebar-close.dms-favorites-sidebar-close:focus-visible,.dms-favorites-item-remove.dms-favorites-item-remove:focus-visible,.dms-favorites-item-link.dms-favorites-item-link:focus-visible,.dms-favorites-compare-button.dms-favorites-compare-button:focus-visible,.dms-favorites-trigger.dms-favorites-trigger:focus-visible{outline:var(--dt-focus-w) solid var(--dms-primary);outline-offset:var(--dt-focus-offset)} .dms-favorites-sidebar-close.dms-favorites-sidebar-close:focus:not(:focus-visible),.dms-favorites-item-remove.dms-favorites-item-remove:focus:not(:focus-visible),.dms-favorites-compare-button.dms-favorites-compare-button:focus:not(:focus-visible),.dms-favorites-trigger.dms-favorites-trigger:focus:not(:focus-visible){outline:none} .dms-favorites-sidebar-body.dms-favorites-sidebar-body{scrollbar-color:var(--dms-border) var(--dt-graphite)} /* Button law sweep (VDP patch 2026-10-07): the payment calculator's Calculate button was the one kit button still in sentence case with no tracking. */ .dt-calc.dt-calc .dms-button.calculate{min-width:150px;letter-spacing:var(--dt-ls-btn);text-transform:uppercase} :is(.dt-vdp-root,.dt-fin-form,.dt-svc-form,.dt-oft-form,.dt-ct-form,.dt-lp-form,.dt-rent-form,.dt-ti-form,.dt-alert-form,.dms-modal) .dms-form input[type=submit]{letter-spacing:var(--dt-ls-btn);text-transform:uppercase} /* ---- VDP Pass 8 (2026-10-07) ---- Figures plates: the plugin's vdp.css pads every info cell 5px at (0,3,0) and loads after the kit, so the doubled-class reset above tied and lost. One more class wins it. Covers every .dt-figures and .dt-figstrip on the site. */ .dt-figstrip.dt-figstrip .dms-listing-info-row .dms-listing-info-td,.dt-figures.dt-figures .dms-listing-info-row .dms-listing-info-td{padding:0} .dt-figures.dt-figures .dms-listing-info-value{letter-spacing:var(--dt-ls-tight)} /* Saved state: the drawn dt-icon-saved is a filled bookmark; the share/save rule strokes every svg, so the active icon gets its fill back. */ .dt-vdp-save.dt-vdp-save .dms-favorites-icon--active svg{fill:currentColor} /* Accordion chevrons: the drawn icons are 1.5-stroke paths. Elementor paints the icon with fill:var(--n-accordion-icon-*-color) at up to (0,5,2) on the open item, which would fill the open chevron path. Fill is cleared at (0,6,2), and the open/hover strokes sit higher still; the stroke takes the same native colour variables, so the widget's own colour controls still drive it. */ .dt-vdp-more.dt-vdp-more.dt-vdp-more.dt-vdp-more .e-n-accordion-item .e-n-accordion-item-title-icon span>svg{fill:none;stroke:var(--n-accordion-icon-normal-color)} .dt-vdp-more.dt-vdp-more.dt-vdp-more.dt-vdp-more .e-n-accordion-item[open]>.e-n-accordion-item-title .e-n-accordion-item-title-icon span>svg{stroke:var(--n-accordion-icon-active-color)} .dt-vdp-more.dt-vdp-more.dt-vdp-more.dt-vdp-more .e-n-accordion-item:not([open]):hover>.e-n-accordion-item-title .e-n-accordion-item-title-icon span>svg{stroke:var(--n-accordion-icon-hover-color)}/* End custom CSS */