.elementor-980016 .elementor-element.elementor-element-745039cf{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-dnrule );--border-color:var( --e-global-color-dnrule );--padding-top:12px;--padding-bottom:12px;--padding-left:0px;--padding-right:0px;}.elementor-980016 .elementor-element.elementor-element-745039cf:not(.elementor-motion-effects-element-type-background), .elementor-980016 .elementor-element.elementor-element-745039cf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-dnsurf );}.elementor-980016 .elementor-element.elementor-element-1c3add35{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:22px 0px;--row-gap:22px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-980016 .elementor-element.elementor-element-b25380d{width:initial;max-width:initial;}.elementor-980016 .elementor-element.elementor-element-64b3b2de{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:44px;--padding-bottom:44px;--padding-left:0px;--padding-right:0px;}.elementor-980016 .elementor-element.elementor-element-64b3b2de:not(.elementor-motion-effects-element-type-background), .elementor-980016 .elementor-element.elementor-element-64b3b2de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FBFAF6;}.elementor-980016 .elementor-element.elementor-element-5c1fb2ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-980016 .elementor-element.elementor-element-70a136a8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:32px 44px;--row-gap:32px;--column-gap:44px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-980016 .elementor-element.elementor-element-191a1f9b{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:12px 0px;--row-gap:12px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-980016 .elementor-element.elementor-element-623a3906{text-align:start;}.elementor-980016 .elementor-element.elementor-element-623a3906 .elementor-heading-title{font-family:"Fraunces", sans-serif;font-size:34px;font-weight:700;text-transform:none;line-height:1.05em;letter-spacing:-0.4px;color:var( --e-global-color-accent );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-980016 .elementor-element.elementor-element-2da7a330{--divider-border-style:solid;--divider-color:var( --e-global-color-dnfoil );--divider-border-width:1px;}.elementor-980016 .elementor-element.elementor-element-2da7a330 .elementor-divider-separator{width:72px;margin:0 auto;margin-left:0;}.elementor-980016 .elementor-element.elementor-element-2da7a330 .elementor-divider{text-align:left;padding-block-start:2px;padding-block-end:2px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-980016 .elementor-element.elementor-element-36fb480d{font-family:"Public Sans", sans-serif;font-size:16px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-1af704ad{text-align:start;}.elementor-980016 .elementor-element.elementor-element-1af704ad .elementor-heading-title{font-family:"Fraunces", sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;line-height:1.12em;letter-spacing:-0.2px;color:var( --e-global-color-accent );}.elementor-980016 .elementor-element.elementor-element-ae14b55{font-family:"Public Sans", sans-serif;font-size:14px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-25a420c{font-family:"Public Sans", sans-serif;font-size:13.5px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-63ff0fc9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-980016 .elementor-element.elementor-element-646a47ee{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-980016 .elementor-element.elementor-element-5e513a39{width:initial;max-width:initial;}.elementor-980016 .elementor-element.elementor-element-4ab254a7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-980016 .elementor-element.elementor-element-4ab254a7:not(.elementor-motion-effects-element-type-background), .elementor-980016 .elementor-element.elementor-element-4ab254a7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-dnhero );}.elementor-980016 .elementor-element.elementor-element-154f8444{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-980016 .elementor-element.elementor-element-61daf97{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:8px 0px;--row-gap:8px;--column-gap:0px;--padding-top:22px;--padding-bottom:22px;--padding-left:26px;--padding-right:26px;}.elementor-980016 .elementor-element.elementor-element-3fb5a00f{font-family:"Public Sans", sans-serif;font-size:15px;line-height:1.55em;color:var( --e-global-color-dnwhite );}.elementor-980016 .elementor-element.elementor-element-356920a3{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.55em;color:var( --e-global-color-dnwhite );}.elementor-980016 .elementor-element.elementor-element-21bcdc7f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:8px 0px;--row-gap:8px;--column-gap:0px;--padding-top:22px;--padding-bottom:22px;--padding-left:26px;--padding-right:26px;}.elementor-980016 .elementor-element.elementor-element-4925d807{font-family:"Public Sans", sans-serif;font-size:15px;line-height:1.55em;color:var( --e-global-color-dnwhite );}.elementor-980016 .elementor-element.elementor-element-3ea44a17{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:10px 12px;--row-gap:10px;--column-gap:12px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-980016 .elementor-element.elementor-element-6e8f365b{width:initial;max-width:initial;}.elementor-980016 .elementor-element.elementor-element-18def626{width:initial;max-width:initial;}.elementor-980016 .elementor-element.elementor-element-75910c33{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:40px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-980016 .elementor-element.elementor-element-75910c33:not(.elementor-motion-effects-element-type-background), .elementor-980016 .elementor-element.elementor-element-75910c33 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-dnsurf );}.elementor-980016 .elementor-element.elementor-element-2883dd0a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-980016 .elementor-element.elementor-element-47b2fd78{text-align:start;}.elementor-980016 .elementor-element.elementor-element-47b2fd78 .elementor-heading-title{font-family:"Fraunces", sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;line-height:1.12em;letter-spacing:-0.2px;color:var( --e-global-color-accent );}.elementor-980016 .elementor-element.elementor-element-61d86726{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-6e191832{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-62fdc608{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-7316c72b{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-20775be0{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-3be8845c{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-1ef08a58{text-align:start;}.elementor-980016 .elementor-element.elementor-element-1ef08a58 .elementor-heading-title{font-family:"Fraunces", sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;line-height:1.12em;letter-spacing:-0.2px;color:var( --e-global-color-accent );}.elementor-980016 .elementor-element.elementor-element-1e12add5{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-17a12c88{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.6em;color:var( --e-global-color-text );}.elementor-980016 .elementor-element.elementor-element-631a6be1{font-family:"Public Sans", sans-serif;font-size:13px;line-height:1.6em;color:var( --e-global-color-text );}@media(min-width:768px){.elementor-980016 .elementor-element.elementor-element-1c3add35{--content-width:1200px;}.elementor-980016 .elementor-element.elementor-element-5c1fb2ec{--content-width:1200px;}.elementor-980016 .elementor-element.elementor-element-70a136a8{--width:100%;}.elementor-980016 .elementor-element.elementor-element-191a1f9b{--width:54%;}.elementor-980016 .elementor-element.elementor-element-63ff0fc9{--width:42%;}.elementor-980016 .elementor-element.elementor-element-646a47ee{--width:100%;}.elementor-980016 .elementor-element.elementor-element-154f8444{--content-width:1200px;}.elementor-980016 .elementor-element.elementor-element-61daf97{--width:52%;}.elementor-980016 .elementor-element.elementor-element-21bcdc7f{--width:48%;}.elementor-980016 .elementor-element.elementor-element-3ea44a17{--width:100%;}.elementor-980016 .elementor-element.elementor-element-2883dd0a{--content-width:1200px;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-divider .elementor-divider__text{line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-divider .elementor-divider__text{line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS *//* ============================================================================ birth-certificate-search.css — /search-digitization-or-purchase-of-birth- certificates-across-mexico/ (page 22655). WPCode snippet, "Site Wide Header". EVERY page snippet loads site wide (gotcha 18), so every class here is dn-bcs-. Sibling of appointment-usa.css / appointment-mx.css — same shell, independently scoped. The island rule means nothing here reaches dn-usa-* / dn-mx-* and nothing there reaches this page. ── THE SHELL ────────────────────────────────────────────────────────────── Pages 7/8's product-landing shell: warm paper ground, guilloche watermark under the copy column, dark Fraunces left, an elevated gold-edged document card right, a full-bleed green rail between the light bands, fine print on surface. No green field behind the fold — it forces every string white and flattens the hierarchy. THIS page is a service EXPLANATION, not a two-dropdown reorder form, so it diverges in three places, all inside the shell: · the copy column takes the wider half (54/42), not the narrower one · the card SHOWS the product gallery — 3 variations leave room, and the scanned certificate is the page's one memorable element · the green rail carries the FORK (the two doors to pages 10 and 11), not phones Hierarchy comes from FOUR registers, not from black-vs-white: · h1 Fraunces, sentence case, ink, large — the page · lede Public Sans 16px, ink-leaning — the proposition · h2 label Fraunces, UPPERCASE, 15px — a section label · body Public Sans, --dn-body grey — prose Plus the fork question at Fraunces 20px on green, which is the size BOTH sources already render that paragraph at (old-WP `.elementor-element-89c49ae{font-size:20px}`, Shopify `.c-product-info-question`). Presentation, not a retitle. ⚠ WOOCOMMERCE OWNS THE CARD'S INTERNALS AND ITS SELECTORS ARE SPECIFIC (gotcha 36). Measured off the served sheets at 10.8.1 — the half-width summary and the floated gallery live in `woocommerce-layout.css`, NOT `woocommerce.css`: .woocommerce div.product form.cart .variations select (0,4,3) .woocommerce div.product form.cart .variations td.label (0,5,3) .woocommerce div.product form.cart .variations td|th (0,4,3) .woocommerce div.product form.cart .variations (0,4,2) .woocommerce div.product form.cart .reset_variations (0,4,2) .woocommerce div.product p.price (0,3,2) .woocommerce div.product div.summary (0,2,2) [layout.css] .woocommerce div.product div.images (0,2,2) [layout.css] A rule of ours at (0,1,1) is discarded in TOTAL SILENCE — valid CSS, every check passes, and the configuration renders at Woo's own `min-width:75%; display:inline-block` inside a 48% float. Each rule below prefixes Woo's OWN chain with `.dn-bcs-slot`, taking it one class higher. `:where()` would count zero. Band padding is restated at (0,2,0) + !important OUTSIDE any @media (gotcha 23). The rail carries no `.dn-section`, so it needs none — but it must restate the z-index lift and overflow clip that base would have given it. ⚠ GOTCHA 34: the kit owns the link colour — `a` (0,1,1), `a:hover` (0,2,1). Every anchor rule here repeats a class to clear BOTH, resting AND hover. Tokens (--dn-guilloche, --dn-e1/e2, --dn-gold, --dn-ease …) come from homepage.css, the shared site-wide layer. Fallbacks are given so this file stands alone. Light only. No dark mode, ever. ========================================================================= */ /* ── BAND PADDING · gotcha 23, base level, (0,2,0) + !important ───────────── */ .dn-bcs-fold.dn-section { position: relative; overflow-x: clip; padding-top: clamp(30px, 1.2rem + 2vw, 52px) !important; padding-bottom: clamp(28px, 1.1rem + 1.9vw, 48px) !important; } .dn-bcs-fine.dn-section { padding-top: clamp(26px, 1rem + 1.6vw, 40px) !important; padding-bottom: clamp(30px, 1.1rem + 1.9vw, 48px) !important; } /* ── CRUMB RAIL ──────────────────────────────────────────────────────────── */ /* The class is on the top-level band, so it is repeated on the SAME element to reach (0,2,1) / (0,3,1) and clear the kit's `a` (0,1,1) and `a:hover` (0,2,1). */ .dn-bcs-crumbs.dn-bcs-crumbs { font-size: 12px; } .dn-bcs-crumbs.dn-bcs-crumbs a { color: var(--dn-body, #666666); text-decoration: none; } .dn-bcs-crumbs.dn-bcs-crumbs.dn-bcs-crumbs a:hover { color: var(--dn-green, #0E7A3E); text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════════ 1 · THE FOLD ═══════════════════════════════════════════════════════════════════════════ */ /* Guilloche watermark — security printing, drawn not fetched. Left-anchored, because the right half of this band is the card. */ .dn-bcs-fold::after { content: ""; position: absolute; top: -18%; left: -8%; width: 560px; height: 560px; background-image: var(--dn-guilloche); background-repeat: no-repeat; background-size: contain; opacity: 0.06; pointer-events: none; z-index: 0; } /* homepage.css lifts `.dn-section > *` to z-index 1, so the copy already clears the mark. */ .dn-bcs-h1 .elementor-heading-title { font-size: clamp(1.65rem, 0.9rem + 2.1vw, 2.25rem) !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; text-wrap: balance; } .dn-bcs-rule .elementor-divider-separator { border-top-width: 2px !important; } .dn-bcs-rule { margin: 2px 0 4px; } /* The proposition. Larger and darker than the prose below it, so the eye lands here after the title without a second Fraunces line competing with the h1. */ .dn-bcs-lede { max-width: 52ch; text-wrap: pretty; } .dn-bcs-lede p { color: var(--dn-ink, #2C2C2C); } .dn-bcs-caseshead .elementor-heading-title { font-size: 15px !important; letter-spacing: 0.06em !important; line-height: 1.3 !important; } /* THE LEDGER. Seven entries, each opened by a gold hairline — a numbered vertical ledger rather than a bullet list, which is the direction's own form for this. The marker is drawn, so nothing is added to the words. */ .dn-bcs-cases ul { margin: 0; padding: 0; list-style: none; } .dn-bcs-cases li { position: relative; padding: 0 0 7px 26px; margin: 0 0 7px; line-height: 1.5; border-bottom: 1px solid var(--dn-rule, #E4E4E4); max-width: 54ch; } .dn-bcs-cases li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .dn-bcs-cases li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 14px; height: 1px; background: var(--dn-gold, #A8862E); } /* The closing paragraph is the quiet one: it qualifies the offer rather than making it. */ .dn-bcs-closing { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--dn-rule, #E4E4E4); max-width: 56ch; text-wrap: pretty; } /* ── THE CONFIGURATION CARD ────────────────────────────────────────────────── A document card: gold top edge, real elevation, sitting proud of the paper — the same object as /contact/'s enquiry form and pages 7/8's body.elementor-page-980016. */ .dn-bcs-slot { position: relative; padding: 0 0 22px; background: #FFFFFF; border: 1px solid var(--dn-rule, #E4E4E4); border-radius: 10px; overflow: hidden; box-shadow: var(--dn-e2, 0 2px 4px rgba(20, 30, 24, 0.07), 0 18px 38px -18px rgba(20, 30, 24, 0.28)); } .dn-bcs-slot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--dn-gold, #A8862E); z-index: 2; } /* [product_page id="22701"] renders the whole single-product template. The page carries its own h1 and its own prose, so the embed's title, breadcrumb, short description, meta, tabs, upsells and related products go — the GALLERY stays. Scoped to .dn-bcs-slot so nothing here reaches the real /product/ pages. */ .dn-bcs-slot .product_title, .dn-bcs-slot .woocommerce-breadcrumb, .dn-bcs-slot .woocommerce-product-details__short-description, .dn-bcs-slot .product_meta, .dn-bcs-slot .woocommerce-tabs, .dn-bcs-slot .up-sells, .dn-bcs-slot .related, .dn-bcs-slot .woocommerce-product-rating { display: none !important; } /* ⚠ Every rule below extends WOO'S OWN CHAIN — see the header. THE TWO FLOATED HALVES. `woocommerce-layout.css` ships .woocommerce div.product div.images { float:left; width:48% } .woocommerce div.product div.summary { float:right; width:48%; clear:none } because the single-product template expects gallery beside summary. Inside a 42% column that is two unusable slivers, so both are unfloated to full width and stacked. Page 7 showed the summary at ~42% and LEFT aligned even after the float was cleared — i.e. the winning declaration is not necessarily Woo's at all — so these are unconditional rather than resting on a margin that may not exist. The served CSS cannot be re-read to settle it (open decision 33: FlyingPress strips the page snippet). */ .dn-bcs-slot .woocommerce div.product { display: block !important; width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; } .dn-bcs-slot .woocommerce div.product div.images, .dn-bcs-slot .woocommerce div.product .woocommerce-product-gallery { display: block !important; width: 100% !important; max-width: none !important; float: none !important; margin: 0 0 18px !important; opacity: 1 !important; } .dn-bcs-slot .woocommerce div.product div.summary, .dn-bcs-slot .woocommerce div.product .summary.entry-summary { display: block !important; width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 24px !important; } .dn-bcs-slot .woocommerce div.product form.cart { width: 100% !important; float: none !important; margin: 0; } /* The template's own float context, now that nothing floats inside it. */ .dn-bcs-slot .woocommerce div.product::after { content: ""; display: table; clear: both; } /* The scanned certificate is the page's one photograph: square off the card's top corners under the gold edge and let it sit flush. */ .dn-bcs-slot .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; border-radius: 0; } .dn-bcs-slot .woocommerce-product-gallery__trigger { display: none !important; } /* ── THE PRICE STACK ───────────────────────────────────────────────────────── Woo prints TWO prices: the range up top, then the selected variation's own price above the button. At the same size they read as a contradiction ("$0.00 - $75.00" then a bare "$0.00"), which is what the first round showed. The range is the headline; the variation price is demoted to a receipt line sitting directly above the button, where it answers "what will this charge me" rather than competing. */ .dn-bcs-slot .woocommerce div.product p.price { font-family: Fraunces, Georgia, serif; font-size: 28px; font-weight: 700; line-height: 1; color: var(--dn-ink, #2C2C2C); margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--dn-rule, #E4E4E4); } /* Woo raises the currency symbol; sat next to a 28px Fraunces numeral it reads as a typo. */ .dn-bcs-slot .woocommerce div.product .woocommerce-Price-currencySymbol { font-size: 0.62em; vertical-align: baseline; margin-right: 1px; } .dn-bcs-slot .woocommerce div.product form.cart .variations { width: 100%; margin: 0 0 14px; border: 0; } .dn-bcs-slot .woocommerce div.product form.cart .variations td, .dn-bcs-slot .woocommerce div.product form.cart .variations th { display: block; width: 100%; padding: 0; border: 0; line-height: 1.4; background: none; } .dn-bcs-slot .woocommerce div.product form.cart .variations td.label { padding: 0 0 5px; } .dn-bcs-slot .woocommerce div.product form.cart .variations tr { display: block; margin: 0 0 12px; } .dn-bcs-slot .woocommerce div.product form.cart .variations label { display: block; font-family: "Public Sans", system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dn-body, #666666); } /* Woo pins these at min-width 75% and inline-block. "Purchase of certificate already in the system" is 45 characters — it must have the full width. */ .dn-bcs-slot .woocommerce div.product form.cart .variations select { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 12px 40px 12px 13px; font-family: "Public Sans", system-ui, sans-serif; font-size: 15px; color: var(--dn-ink, #2C2C2C); background-color: #FFFFFF; border: 1px solid var(--dn-rule, #E4E4E4); border-radius: 5px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dn-bcs-slot .woocommerce div.product form.cart .variations select:hover { border-color: #C9C9C9; } .dn-bcs-slot .woocommerce div.product form.cart .variations select:focus { outline: none; border-color: var(--dn-green, #0E7A3E); box-shadow: 0 0 0 3px rgba(14, 122, 62, 0.16); } /* Woo's own chain reaches (0,4,2) here, so this one repeats the scope class rather than relying on `a` losing — and the kit owns `a:hover` at (0,2,1), cleared the same way. */ .dn-bcs-slot .woocommerce div.product form.cart .reset_variations, .dn-bcs-slot .woocommerce div.product form.cart a.reset_variations { display: inline-block; visibility: visible; margin-top: 6px; font-family: "Public Sans", system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--dn-body, #666666); border-bottom: 1px solid var(--dn-rule, #E4E4E4); } .dn-bcs-slot .woocommerce div.product form.cart a.reset_variations:hover, .dn-bcs-slot .woocommerce div.product form.cart a.reset_variations:focus-visible { color: var(--dn-ink, #2C2C2C); border-bottom-color: var(--dn-gold, #A8862E); } /* The variation panel: a hairline, then the receipt line, then the button. */ .dn-bcs-slot .woocommerce div.product form.cart .single_variation_wrap { margin-top: 4px; } .dn-bcs-slot .woocommerce div.product form.cart .woocommerce-variation { margin: 0; padding-top: 14px; border-top: 1px solid var(--dn-rule, #E4E4E4); } .dn-bcs-slot .woocommerce div.product .woocommerce-variation-price { margin: 0 0 14px; line-height: 1; } .dn-bcs-slot .woocommerce div.product .woocommerce-variation-price span.price { font-family: Fraunces, Georgia, serif; font-size: 20px; font-weight: 700; line-height: 1; color: var(--dn-ink, #2C2C2C); } .dn-bcs-slot .woocommerce div.product .woocommerce-variation-description { margin: 0 0 12px; } .dn-bcs-slot .woocommerce div.product .woocommerce-variation-availability { margin: 0 0 10px; } /* ⚠ QUANTITY REMOVED (user, round 1). Hidden rather than filtered out: the input stays in the DOM and still posts `quantity=1`, so the cart is unaffected. `display:none` on the wrapper also takes Woo's screen-reader label and the empty cell beside the field, which is what rendered as a stray white box next to the "1". */ .dn-bcs-slot .quantity, .dn-bcs-slot .woocommerce div.product form.cart div.quantity { display: none !important; } /* Woo renders add-to-cart as a real