/*
Theme Name: Shoptimizer Child - Dr Adams Reskin
Theme URI: https://dradamslaboratories.com
Description: Dr Adams Aug 2026 reskin. Presentation only - no content or URL changes. See dr-adams-change-log.md.
Author: Greg Danelian
Template: shoptimizer
Version: 6.39.0
*/
/* ============================================================
STAGE 4a - TYPOGRAPHY (C-008)
Google Sans Flex, self-hosted, Latin subset, weights 400/500/600.
Framer spec: one family everywhere; headings 600, UI 500, body 400.
Font families swap only - sizes and layout untouched this stage.
============================================================ */
@font-face {
font-family: 'Google Sans Flex';
src: url('fonts/google-sans-flex-latin-400-normal.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Google Sans Flex';
src: url('fonts/google-sans-flex-latin-500-normal.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Google Sans Flex';
src: url('fonts/google-sans-flex-latin-600-normal.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
:root {
--dradams-font: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
/* Base */
body,
button,
input,
select,
textarea,
.site-header,
.site-footer,
.main-navigation,
.woocommerce,
.woocommerce-page {
font-family: var(--dradams-font) !important;
}
/* Headings - Framer uses 600 */
h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title,
.widget-title,
.wp-block-heading {
font-family: var(--dradams-font) !important;
font-weight: 600;
}
/* Elementor widgets inherit their kit family - override */
.elementor-widget-container,
.elementor-heading-title,
.elementor-button,
.elementor-widget .elementor-widget-container p,
.elementor-icon-list-text {
font-family: var(--dradams-font) !important;
}
/* Buttons / UI - Framer uses 600 on button labels */
.button,
button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.elementor-button,
input[type='submit'] {
font-family: var(--dradams-font) !important;
font-weight: 600;
}
/* Product titles / prices - 500 per Framer spec */
.woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.product_title {
font-weight: 500;
}
/* Nav - Framer nav items are 600 uppercase; keep current case this stage */
.main-navigation a,
.secondary-navigation a {
font-family: var(--dradams-font) !important;
font-weight: 500;
}
/* ============================================================
STAGE 4b - COLOUR UNIFICATION (C-009)
Legacy pinks (#b54883 theme-era, #c43e85 CSS-era) -> #EC0080.
Theme mods + Additional CSS handled in settings; this block
overrides the three sources OUTSIDE the theme:
1. Hardcoded Elementor widget colours (fix at source in Phase 2)
2. Side Cart plugin basket bubble
3. CommerceKit free-shipping notice
Scoped to the child body class = removed by theme flip.
============================================================ */
body.wp-child-theme-shoptimizer-child .elementor-wc-products ul.products li.product .price,
body.wp-child-theme-shoptimizer-child .elementor-wc-products ul.products li.product .price ins,
body.wp-child-theme-shoptimizer-child .elementor-wc-products ul.products li.product .price ins .amount {
color: #EC0080 !important;
}
body.wp-child-theme-shoptimizer-child .elementor-wc-products ul.products li.product .button,
body.wp-child-theme-shoptimizer-child .elementor-button,
body.wp-child-theme-shoptimizer-child .elementor-motion-effects-layer[style*='C43E85'] {
background-color: #EC0080 !important;
}
body.wp-child-theme-shoptimizer-child .xoo-wsc-basket {
background-color: #EC0080 !important;
}
body.wp-child-theme-shoptimizer-child .cgkit-fsn-amount {
background: #EC0080 !important;
}
body.wp-child-theme-shoptimizer-child .cgkit-fsn-notice .amount {
color: #EC0080 !important;
}
body.wp-child-theme-shoptimizer-child .cgkit-fsn-bar-cart [style*='c43e85'],
body.wp-child-theme-shoptimizer-child .cgkit-fsn-truck::before {
background: #EC0080 !important;
}
/* ============================================================
STAGE 4d - FOOTER (C-011)
Framer footer treatment on template #1722.
Spec: bg #111111, headings GSF 500 14px #fff, links 13px/1.6
rgba(255,255,255,.6) -> .85 hover, wide white logo, bottom bar.
============================================================ */
body.wp-child-theme-shoptimizer-child .dradams-footer {
background-color: #111111;
}
.dradams-footer .dradams-fcols { align-items: flex-start; }
.dradams-footer .dradams-fcol { flex: 1 1 200px; min-width: 180px; }
.dradams-footer h4 {
color: #ffffff;
font-weight: 500;
font-size: 14px;
line-height: 1.2;
margin: 0 0 14px 0;
}
.dradams-footer .elementor-icon-list-item a,
.dradams-footer .elementor-icon-list-text,
.dradams-footer .elementor-text-editor,
.dradams-footer .elementor-text-editor p {
color: rgba(255,255,255,0.6);
font-size: 13px;
line-height: 1.6;
transition: color .18s ease;
}
.dradams-footer .elementor-icon-list-item a:hover .elementor-icon-list-text,
.dradams-footer .elementor-icon-list-item a:hover {
color: rgba(255,255,255,0.85);
}
.dradams-footer .elementor-social-icon {
background-color: transparent;
border: 1px solid rgba(255,255,255,0.25);
}
.dradams-footer .elementor-social-icon i { color: rgba(255,255,255,0.6); }
.dradams-footer .elementor-social-icon:hover i { color: rgba(255,255,255,0.85); }
.dradams-footer .dradams-flogo { margin: 48px 0 24px; }
.dradams-footer .dradams-flogo img { width: 100%; height: auto; display: block; }
.dradams-footer .dradams-fbottom {
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 18px;
align-items: center;
}
.dradams-footer .dradams-fbottom .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
margin-left: 18px;
}
@media (max-width: 767px) {
.dradams-footer .dradams-fcol { flex: 1 1 100%; }
.dradams-footer .dradams-fbottom { flex-direction: column; gap: 10px; }
}
/* C-011a: blurb column slightly wider; payment badge sizing */
.dradams-footer .dradams-fblurb { flex: 1.5 1 260px; max-width: 380px; }
.dradams-footer .dradams-fblurb .elementor-text-editor p { margin-bottom: 0; }
/* superseded by C-011e */
/* C-011b: full-width footer; contact column per Framer */
body.wp-child-theme-shoptimizer-child .dradams-footer {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.dradams-footer .dradams-fcontact .elementor-icon-list-item { cursor: default; }
.dradams-footer .dradams-fcontact a { text-decoration: none; }
/* ============================================================
C-011c: Framer-fidelity pass on the footer composition.
- side gutters 60px like the mock
- columns distributed across the full width (space-between)
- the wide logo is the hero: true full-span, generous air
- bottom bar hugs a hairline rule
============================================================ */
body.wp-child-theme-shoptimizer-child .dradams-footer {
padding: 56px 60px 20px 60px !important;
}
.dradams-footer .dradams-fcols {
justify-content: space-between;
width: 100%;
}
.dradams-footer .dradams-fcol {
flex: 0 1 auto;
min-width: 160px;
}
.dradams-footer .dradams-fblurb { flex: 0 1 320px; max-width: 320px; }
.dradams-footer .dradams-fcontact { flex: 0 1 auto; }
/* THE LOGO — full-span hero */
.dradams-footer .dradams-flogo {
margin: 64px 0 40px !important;
width: 100% !important;
max-width: none !important;
}
.dradams-footer .dradams-flogo .elementor-widget-container,
.dradams-footer .dradams-flogo figure {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
text-align: center;
}
.dradams-footer .dradams-flogo img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
}
.dradams-footer .dradams-fbottom {
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 16px;
margin-top: 0;
}
.dradams-footer .dradams-fbottom .elementor-text-editor p { margin: 0; font-size: 12px; }
.dradams-footer .dradams-fbottom .elementor-icon-list-text { font-size: 12px; }
@media (max-width: 767px) {
body.wp-child-theme-shoptimizer-child .dradams-footer { padding: 40px 24px 16px !important; }
.dradams-footer .dradams-fblurb { max-width: 100%; }
.dradams-footer .dradams-flogo { margin: 40px 0 24px !important; }
}
/* ============================================================
C-011d: HARD layout enforcement for the footer.
Elementor's container emitted column-direction flex, stacking
everything into one narrow track. Override its layout engine
entirely — the footer's geometry is now owned by this block.
============================================================ */
/* the row of columns */
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fcols {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 40px !important;
width: 100% !important;
max-width: 100% !important;
}
/* each column: natural width, never full-row */
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fcol {
display: flex !important;
flex-direction: column !important;
flex: 0 1 auto !important;
width: auto !important;
min-width: 170px !important;
max-width: none !important;
}
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fblurb {
flex: 0 1 320px !important;
max-width: 320px !important;
}
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fcontact {
max-width: 360px !important;
}
/* widgets inside columns: block, left-aligned, no auto-centering */
.dradams-footer .dradams-fcol .elementor-widget,
.dradams-footer .dradams-fcol .elementor-widget-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 12px 0 !important;
text-align: left !important;
}
.dradams-footer .dradams-fcol .elementor-social-icons-wrapper { justify-content: flex-start !important; }
.dradams-footer .dradams-fcol .elementor-widget-image img { margin: 0 !important; }
/* THE LOGO — owns the full row, edge to edge of the padded area */
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-flogo,
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-flogo.elementor-widget {
display: block !important;
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
margin: 64px 0 40px 0 !important;
}
.dradams-footer .dradams-flogo .elementor-widget-container,
.dradams-footer .dradams-flogo figure,
.dradams-footer .dradams-flogo a {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.dradams-footer .dradams-flogo img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
/* bottom bar row */
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fbottom {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
gap: 16px !important;
}
.dradams-footer .dradams-fbottom .elementor-widget { width: auto !important; margin: 0 !important; }
@media (max-width: 767px) {
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fcols { flex-direction: column !important; gap: 28px !important; }
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fcol,
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fblurb { max-width: 100% !important; flex: 1 1 100% !important; }
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fbottom { flex-direction: column !important; align-items: flex-start !important; }
}
/* ============================================================
C-011e: FIX — footer logo never received its class.
Elementor widgets use `_css_classes`; containers use `css_classes`.
.dradams-flogo was set with the container key so it never landed on
the image widget — the logo then fell through to the payment-badge
cap (max-width:260px, centred). Target the element ID directly.
Logo widget id = df00020 -> .dradams-flogo
============================================================ */
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-flogo,
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-flogo {
display: block !important;
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
margin: 56px 0 36px 0 !important;
}
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-flogo .elementor-widget-container,
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-flogo figure,
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-flogo a {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-flogo img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
margin: 0 !important;
object-fit: contain !important;
}
/* badge cap re-scoped: only images INSIDE a column — can never catch the logo */
body.wp-child-theme-shoptimizer-child .dradams-footer .dradams-fcol .elementor-widget-image img {
max-width: 260px !important;
width: auto !important;
}
/* ============================================================
C-012: Brand social icons (Tommy's SVGs, inline, currentColor).
Replaces Elementor Font Awesome + circle shape.
Colour per Icons/Social/READ-ME.rtf: rest .6 / hover .85
============================================================ */
.dradams-footer .dradams-social {
display: flex !important;
gap: 18px;
align-items: center;
margin-top: 6px;
}
.dradams-footer .dradams-social a {
color: rgba(255,255,255,0.6);
display: inline-flex;
align-items: center;
text-decoration: none;
transition: color .18s ease;
}
.dradams-footer .dradams-social a:hover,
.dradams-footer .dradams-social a:focus-visible {
color: rgba(255,255,255,0.85);
}
.dradams-footer .dradams-social svg {
width: 22px; height: 22px; display: block;
}
/* ============================================================
C-015 - Footer body copy colour.
Elementor 3.x no longer emits the legacy .elementor-text-editor
wrapper on text-editor widgets, so the C-011 colour rule never
matched the 'Quality Approved!' blurb: it fell through to
Shoptimizer's paragraph colour (dark) on the #111 footer.
Same failure mode as C-011e - target the widget class that is
actually emitted, and cover the legacy one for safety.
Colour matches the rest of the footer body copy.
============================================================ */
body.wp-child-theme-shoptimizer-child .dradams-footer .elementor-widget-text-editor,
body.wp-child-theme-shoptimizer-child .dradams-footer .elementor-widget-text-editor p,
body.wp-child-theme-shoptimizer-child .dradams-footer .elementor-widget-text-editor li,
body.wp-child-theme-shoptimizer-child .dradams-footer .elementor-widget-container > p {
color: rgba(255,255,255,0.6);
font-size: 13px;
line-height: 1.6;
}
/* Any link inside footer body copy stays legible and on-system. */
body.wp-child-theme-shoptimizer-child .dradams-footer .elementor-widget-text-editor a {
color: rgba(255,255,255,0.85);
text-decoration: underline;
}
/* ============================================================
C-017 - PHASE 1+ : MEGA MENU RESKIN (HT Mega Lite)
Restyle only. Menu 247, all 11 panel templates and all 391
product links are untouched - not one href is rewritten here.
Engine: htmega-menu-inline-menu widget (element 820d497).
Panels: Elementor templates built from toggle widgets.
Everything scoped to the child body class = removed by a flip.
============================================================ */
:root{
--dra-pink:#EC0080;
--dra-ink:#111111;
--dra-muted:#5b5b5b;
--dra-hair:rgba(17,17,17,.10);
}
/* ---- 1. Top-level nav items ---------------------------------- */
body.wp-child-theme-shoptimizer-child .htmega-menu-container ul > li > a{
font-family:'Google Sans Flex',system-ui,-apple-system,'Segoe UI',sans-serif !important;
font-weight:600;
font-size:12px;
letter-spacing:0;
color:#000000 !important;
position:relative;
transition:color .18s ease;
}
body.wp-child-theme-shoptimizer-child .htmega-menu-container ul > li > a:hover,
body.wp-child-theme-shoptimizer-child .htmega-menu-container ul > li.current_page_item > a{
color:#000000 !important;
}
/* thin brand underline on hover - the Framer reveal */
body.wp-child-theme-shoptimizer-child .htmega-menu-container > ul > li > a::after{
content:'';position:absolute;left:6px;right:6px;bottom:9px;height:1px;
background:#000000;transform:scaleX(0);transform-origin:left center;
transition:transform .22s cubic-bezier(.4,0,.2,1);
}
body.wp-child-theme-shoptimizer-child .htmega-menu-container > ul > li:hover > a::after{transform:scaleX(1);}
/* the two CTA items keep their pill, no underline */
body.wp-child-theme-shoptimizer-child .htmega-menu-container > ul > li.menu-button > a::after,
body.wp-child-theme-shoptimizer-child .htmega-menu-container > ul > li.clearance-button > a::after{display:none;}
/* ---- 5. Mobile drawer ---------------------------------------- */
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .htmega-menu-container ul > li > a{font-size:15px;}
}
/* ============================================================
C-019 - PHASE 1+ : HEADER BAR + UTILITY MENU
Header template 1694. Structure untouched; the utility strip
markup was rebuilt as a semantic list (C-019a) and is styled
here. Separators are CSS, not clickable text.
============================================================ */
/* ---- Utility strip (top-right) ------------------------------- */
body.wp-child-theme-shoptimizer-child .dra-utility{
list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
gap:0;
}
body.wp-child-theme-shoptimizer-child .dra-utility li{
display:flex;align-items:center;margin:0;line-height:1;
}
/* hairline separator - decorative, never clickable */
body.wp-child-theme-shoptimizer-child .dra-utility li + li::before{
content:'';display:inline-block;width:1px;height:11px;
background:rgba(0,0,0,.18);margin:0 9px;
}
body.wp-child-theme-shoptimizer-child .dra-utility a{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-weight:400;font-size:12px;letter-spacing:.1px;
color:rgba(0,0,0,.58);
text-decoration:none;white-space:nowrap;
transition:color .16s ease;
}
body.wp-child-theme-shoptimizer-child .dra-utility a:hover,
body.wp-child-theme-shoptimizer-child .dra-utility a:hover,
body.wp-child-theme-shoptimizer-child .dra-utility a:focus-visible{
color:#000000;
}
body.wp-child-theme-shoptimizer-child .dra-utility a:focus-visible{
outline:2px solid #EC0080;outline-offset:3px;border-radius:2px;
}
/* ---- Promo strip typography ---------------------------------- */
body.wp-child-theme-shoptimizer-child .dra-hdr-ticker{
font-family:'Google Sans Flex',system-ui,sans-serif;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-ticker .elementor-widget-text-editor{
font-family:'Google Sans Flex',system-ui,sans-serif;
}
/* ---- Main bar: search + cart + Pharmacy ---------------------- */
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col .elementor-widget-button .elementor-button{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-weight:600;font-size:13px;letter-spacing:.1px;
border-radius:999px;padding:10px 20px;
transition:filter .16s ease,transform .16s ease;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col .elementor-widget-button .elementor-button:hover{
filter:brightness(.93);
}
body.wp-child-theme-shoptimizer-child .shoptimizer-cart .cart-contents{
font-weight:600;
}
/* search field to match the new system */
body.wp-child-theme-shoptimizer-child .is-search-input{
font-family:'Google Sans Flex',system-ui,sans-serif !important;
font-size:13px !important;
border-radius:999px !important;
}
/* ---- Nav row -------------------------------------------------
Had border-top and border-bottom hairlines at rgba(17,17,17,.08).
Removed at C-075 as DEAD, not as a fix: C-035 moved the nav widget
into the main bar and set this same element display:none, so these
borders had not rendered since. I reached for them first when Greg
reported a line under the bar and had to correct myself - they were
never on screen. Six rules still target fedc07b; all are inert for
the same reason and are left as the element's preserved state. */
/* ---- Mobile -------------------------------------------------- */
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-utility{justify-content:center;}
body.wp-child-theme-shoptimizer-child .dra-utility a{font-size:11px;}
body.wp-child-theme-shoptimizer-child .dra-utility li + li::before{margin:0 7px;}
}
/* 3. Panel: contained, not full-bleed, aligned to the bar's left edge */
/* 4. Left-aligned menu bar */
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul,
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area > ul{
justify-content:flex-start !important;text-align:left !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container{text-align:left !important;}
body.wp-child-theme-shoptimizer-child .htmega-menu-container > ul > li > a{cursor:pointer;}
/* hide the plugin's caret - Framer has none */
body.wp-child-theme-shoptimizer-child .htmega-menu-container .htmenu-icon{display:none !important;}
/* same measure as the rest of the header */
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu{
width:100% !important;max-width:1200px !important;margin-left:auto !important;margin-right:auto !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu > .elementor-widget-container{padding-left:0 !important;padding-right:0 !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area{
width:100% !important;float:none !important;display:block !important;padding-left:0 !important;padding-right:0 !important;text-align:left !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container{
width:100% !important;text-align:left !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul{
display:flex !important;
flex-wrap:wrap !important;
justify-content:flex-start !important;
align-items:center !important;
gap:0 !important;
margin:0 !important;
padding:0 !important;
text-align:left !important;
float:none !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul > li{
float:none !important;display:block !important;margin:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul > li:first-child > a{padding-left:0 !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul > li > a{
padding:14px 22px 14px 0 !important;display:inline-block !important;
}
/* panel anchors to the same left edge as the first item */
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu{max-width:100% !important;}
}
/* ============================================================
C-024 - FULL-WIDTH HEADER.
Supersedes the 1200px cap introduced in C-023. The header now
spans the viewport with a single 30px gutter, and the menu
items sit flush to that gutter - matching the Framer prototype.
Panel returns to full-bleed.
============================================================ */
:root{ --dra-gutter: 16px; }
/* --- supersede the 1200px cap from C-023 --- */
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu{
max-width:none !important;width:100% !important;margin-left:0 !important;margin-right:0 !important;
}
/* --- every header row spans the viewport, one shared gutter --- */
body.wp-child-theme-shoptimizer-child .dra-hdr-bar > .elementor-container,
body.wp-child-theme-shoptimizer-child .dra-hdr-wrap > .elementor-container,
body.wp-child-theme-shoptimizer-child .dra-hdr-search > .elementor-container,
body.wp-child-theme-shoptimizer-child .dra-hdr-row > .elementor-container{
max-width:none !important;width:100% !important;
padding-left:var(--dra-gutter) !important;padding-right:var(--dra-gutter) !important;
}
/* --- menu items flush to the gutter --- */
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu > .elementor-widget-container{
padding:0 !important;margin:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area{
padding-left:0 !important;padding-right:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul > li:first-child > a{
padding-left:0 !important;
}
/* --- panel full-bleed, as in the design --- */
@media (max-width:1024px){
:root{ --dra-gutter:16px; }
}
body.wp-child-theme-shoptimizer-child li.htmega_mega_menu{position:static !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container{position:relative !important;}
/* ============================================================
C-027 - Show all 11 categories without scrolling.
/* column 1: never scroll - every category must be visible at once */
/* columns 2 and 3: scroll, they can be long */
/* ============================================================
C-028 - Honour the [hidden] attribute inside the panel.
HT Mega forces display:block on EVERY ul inside
.htmegamenu-content-wrapper, which overrides the browser
default for [hidden] (display:none). Result: every brand list
and every product list rendered at once, regardless of what
the JS had hidden - so columns 2 and 3 showed all categories'
contents rather than the current selection.
============================================================ */
/* ============================================================
C-030 - Top-level menu items in caps, per the Framer design.
============================================================ */
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul > li > a{
text-transform:uppercase !important;
letter-spacing:0 !important;
font-weight:600 !important;
font-size:12px !important;
color:#000000 !important;
}
/* ============================================================
C-031 - Header layout: logo left, search + basket right,
search collapsed to an icon that slides a panel down.
Row 067921f (duplicate logo + search) hidden on desktop;
kept for mobile. Row f122dbd reordered with flex.
============================================================ */
@media (min-width:1025px){
body.wp-child-theme-shoptimizer-child .dra-hdr-bar{display:none !important;}
}
/* main bar becomes one flex row */
body.wp-child-theme-shoptimizer-child .dra-hdr-row > .elementor-container{
display:flex !important;flex-wrap:nowrap !important;align-items:center !important;
}
/* logo hard left */
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col{
order:1 !important;flex:0 0 auto !important;width:auto !important;margin-right:auto !important;text-align:left !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col .elementor-widget-image{text-align:left !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col .elementor-widget-image img{margin-left:0 !important;}
/* search then basket, hard right */
body.wp-child-theme-shoptimizer-child .dra-hdr-col-spare{
order:2 !important;flex:0 0 auto !important;width:auto !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col{
order:3 !important;flex:0 0 auto !important;width:auto !important;
display:flex !important;align-items:center !important;gap:14px !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col > .elementor-widget-wrap{
display:flex !important;flex-wrap:nowrap !important;align-items:center !important;gap:14px !important;
}
/* ---- search: icon only, panel slides down ---- */
body.wp-child-theme-shoptimizer-child .dra-search-wrap{position:static !important;}
body.wp-child-theme-shoptimizer-child .dra-search-btn{
all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:999px;cursor:pointer;color:#111;
transition:background .15s ease,color .15s ease;
}
body.wp-child-theme-shoptimizer-child .dra-search-btn:hover,
body.wp-child-theme-shoptimizer-child .dra-search-btn:focus-visible{background:#f3f3f3;color:#EC0080;}
body.wp-child-theme-shoptimizer-child .dra-search-btn:focus-visible{outline:2px solid #EC0080;outline-offset:2px;}
/* the form itself: hidden, then a full-width drop panel */
body.wp-child-theme-shoptimizer-child .dra-search-wrap .elementor-shortcode{
position:absolute;left:0;right:0;top:100%;
background:#fff;border-top:1px solid rgba(17,17,17,.10);
box-shadow:0 18px 40px -22px rgba(0,0,0,.22);
padding:0 var(--dra-gutter,30px);
max-height:0;opacity:0;overflow:hidden;pointer-events:none;
transition:max-height .22s ease,opacity .18s ease,padding .22s ease;
z-index:9998;
}
body.wp-child-theme-shoptimizer-child .dra-search-wrap.is-open .elementor-shortcode{
max-height:120px;opacity:1;pointer-events:auto;padding:18px var(--dra-gutter,30px);
}
body.wp-child-theme-shoptimizer-child .dra-search-wrap .is-search-form{width:100%;max-width:720px;margin:0 auto;}
body.wp-child-theme-shoptimizer-child .dra-search-wrap .is-search-input{
width:100% !important;height:44px !important;font-size:14px !important;
border:1px solid rgba(17,17,17,.16) !important;border-radius:999px !important;padding:0 18px !important;
}
/* the row that hosts the drop panel needs to be the positioning context */
body.wp-child-theme-shoptimizer-child .dra-hdr-wrap{position:relative;overflow:visible !important;z-index:400 !important;}
/* basket sits tight to the right */
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col .elementor-widget-shoptimizer-cart{margin:0 !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col .elementor-widget-button{margin:0 !important;}
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .dra-hdr-row > .elementor-container{flex-wrap:wrap !important;}
body.wp-child-theme-shoptimizer-child .dra-search-wrap.is-open .elementor-shortcode{max-height:140px;}
}
/* C-031/C-032 search-panel rules retired by C-033 - the bar is now a dedicated element outside the widget tree */
/* ============================================================
SEARCH BAR - drops UNDER the whole nav (change C-033)
The form is moved by JS into .dra-searchbar, appended to the
header root, so it is no longer inside the search column and
no ancestor can constrain its width. Only one search widget
survives - the duplicate header row's form is hidden, which
is what caused two overlapping search icons.
============================================================ */
body.wp-child-theme-shoptimizer-child .dra-searchbar{
display:block;width:100%;background:#fff;
border-top:1px solid rgba(17,17,17,.10);
max-height:0;opacity:0;overflow:hidden;pointer-events:none;
visibility:hidden; /* C-048 */
transition:max-height .24s ease,opacity .18s ease,visibility 0s linear .24s;
}
body.wp-child-theme-shoptimizer-child .dra-searchbar.is-open{
max-height:180px;opacity:1;pointer-events:auto;
visibility:visible; /* C-048 */
transition:max-height .24s ease,opacity .18s ease,visibility 0s linear 0s;
box-shadow:0 18px 40px -24px rgba(0,0,0,.22);
}
body.wp-child-theme-shoptimizer-child .dra-searchbar-inner{
display:flex;align-items:center;gap:18px;
padding:16px var(--dra-gutter,30px);
}
body.wp-child-theme-shoptimizer-child .dra-searchbar .is-search-form{
position:relative !important;flex:1 1 auto !important;
width:auto !important;max-width:none !important;margin:0 !important;display:block !important;
}
body.wp-child-theme-shoptimizer-child .dra-searchbar .is-search-form label{
display:block !important;width:100% !important;margin:0 !important;padding:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-searchbar .is-search-input{
width:100% !important;height:44px !important;
font-family:'Google Sans Flex',system-ui,sans-serif !important;font-size:14px !important;
background:#f4f4f4 !important;
border:1px solid transparent !important;border-radius:8px !important;
padding:0 48px 0 16px !important;box-shadow:none !important;color:#111 !important;
}
body.wp-child-theme-shoptimizer-child .dra-searchbar .is-search-input:focus{
background:#fff !important;border-color:rgba(17,17,17,.22) !important;outline:none !important;
}
body.wp-child-theme-shoptimizer-child .dra-searchbar .is-search-submit{
position:absolute !important;right:6px !important;top:50% !important;transform:translateY(-50%) !important;
width:34px !important;height:34px !important;border-radius:6px !important;
background:transparent !important;border:0 !important;padding:0 !important;
display:inline-flex !important;align-items:center !important;justify-content:center !important;
cursor:pointer;line-height:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-searchbar .is-search-submit svg{width:19px !important;height:19px !important;fill:#111 !important;}
body.wp-child-theme-shoptimizer-child .dra-searchbar .is-search-submit:hover svg{fill:#EC0080 !important;}
body.wp-child-theme-shoptimizer-child .dra-search-close{
all:unset;cursor:pointer;flex:0 0 auto;
font-family:'Google Sans Flex',system-ui,sans-serif;font-size:13px;font-weight:500;color:#111;
padding:8px 4px;transition:color .15s ease;
}
body.wp-child-theme-shoptimizer-child .dra-search-close:hover{color:#EC0080;}
body.wp-child-theme-shoptimizer-child .dra-search-close:focus-visible{outline:2px solid #EC0080;outline-offset:2px;border-radius:3px;}
body.wp-child-theme-shoptimizer-child .dra-searchbar .is-ajax-search-result,
body.wp-child-theme-shoptimizer-child .dra-searchbar .is-ajax-search-details{
width:100% !important;left:0 !important;right:auto !important;margin-top:6px !important;
border:1px solid rgba(17,17,17,.12) !important;border-radius:10px !important;
}
body.wp-child-theme-shoptimizer-child .dra-search-btn{
all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:999px;cursor:pointer;color:#111;
transition:background .15s ease,color .15s ease;
}
body.wp-child-theme-shoptimizer-child .dra-search-btn:hover{background:#f3f3f3;color:#EC0080;}
body.wp-child-theme-shoptimizer-child .dra-search-btn:focus-visible{outline:2px solid #EC0080;outline-offset:2px;}
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-searchbar.is-open{max-height:220px;}
body.wp-child-theme-shoptimizer-child .dra-searchbar-inner{gap:12px;}
}
/* the single bar */
body.wp-child-theme-shoptimizer-child .dra-hdr-row > .elementor-container{
display:flex !important;flex-wrap:nowrap !important;align-items:center !important;gap:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col{
order:1 !important;flex:0 0 auto !important;width:auto !important;margin-right:26px !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav{
order:2 !important;flex:0 1 auto !important;width:auto !important;
margin-right:auto !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-col-spare{
order:4 !important;flex:0 0 auto !important;width:auto !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col{
order:5 !important;flex:0 0 auto !important;width:auto !important;
}
/* the menu widget sits inline, no padding of its own */
body.wp-child-theme-shoptimizer-child .dra-hdr-nav > .elementor-widget-wrap{padding:0 !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu{max-width:none !important;width:auto !important;margin:0 !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu > .elementor-widget-container{padding:0 !important;margin:0 !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area{width:auto !important;padding:0 !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container{width:auto !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul > li > a{
padding:14px 16px !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul > li:first-child > a{padding-left:0 !important;}
/* the mega panel now measures from the bar row */
/* C-095: position is NO LONGER !important here. It was, and that single
word was what stopped the header sticking: Elementor Pro's sticky sets
position:fixed as an INLINE style, and an !important declaration in a
stylesheet outranks a normal inline one. The bar still needs to be a
positioning context for the mega panel and the search drop-panel, and a
FIXED element is a containing block for absolutely-positioned children
exactly like a relative one, so nothing about the panels changes. */
body.wp-child-theme-shoptimizer-child .dra-hdr-wrap{
position:relative;overflow:visible !important;z-index:500 !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-wrap.elementor-sticky--active{
position:fixed;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-row,
body.wp-child-theme-shoptimizer-child .dra-hdr-row > .elementor-container,
body.wp-child-theme-shoptimizer-child .dra-hdr-nav,
body.wp-child-theme-shoptimizer-child .dra-hdr-nav > .elementor-widget-wrap{
overflow:visible !important;position:static !important;
}
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .dra-hdr-row > .elementor-container{flex-wrap:wrap !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav{margin-right:0 !important;}
}
/* ============================================================
TIGHTER HEADER GUTTER (change C-036) .dra-tight-gutter marker
Shared gutter reduced 30px -> 16px; the nav row's own left
padding zeroed so the first menu item sits close to the logo.
============================================================ */
:root{ --dra-gutter:16px; }
@media (max-width:767px){ :root{ --dra-gutter:12px; }
}
body.wp-child-theme-shoptimizer-child .dra-hdr-bar > .elementor-container,
body.wp-child-theme-shoptimizer-child .dra-hdr-wrap > .elementor-container,
body.wp-child-theme-shoptimizer-child .dra-hdr-search > .elementor-container,
body.wp-child-theme-shoptimizer-child .dra-hdr-row > .elementor-container{
padding-left:var(--dra-gutter) !important;padding-right:var(--dra-gutter) !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-row{
padding-left:0 !important;padding-right:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col{margin-right:16px !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul > li > a{padding:14px 14px !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container > ul > li:first-child > a{padding-left:0 !important;}
body.wp-child-theme-shoptimizer-child .dra-searchbar-inner{padding-left:var(--dra-gutter) !important;padding-right:var(--dra-gutter) !important;}
/* ============================================================
FLUSH HEADER (change C-037) .dra-flush-header marker
Two paddings removed, both reported from DevTools:
1. .elementor-container - 0 16px (our --dra-gutter)
2. .elementor-widget-wrap.elementor-element-populated - 10px
(an Elementor DEFAULT, not ours)
Scoped to the header only so column padding elsewhere on the
site is untouched.
============================================================ */
body.wp-child-theme-shoptimizer-child .elementor-location-header .elementor-container{
padding-left:0 !important;padding-right:0 !important;
}
body.wp-child-theme-shoptimizer-child .elementor-location-header .elementor-widget-wrap.elementor-element-populated{
padding:0 !important;
}
body.wp-child-theme-shoptimizer-child .elementor-location-header .elementor-column,
body.wp-child-theme-shoptimizer-child .elementor-location-header .elementor-col-33,
body.wp-child-theme-shoptimizer-child .elementor-location-header .elementor-inner-column{
padding-left:0 !important;padding-right:0 !important;
}
/* the bar itself keeps a small breathing edge; set to 0 for fully flush */
:root{ --dra-gutter:0px; }
@media (max-width:767px){ :root{ --dra-gutter:0px; }
}
/* logo hard against the left edge */
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col .elementor-widget-image{text-align:left !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col .elementor-widget-image img{margin-left:0 !important;}
/* search bar and mega panel keep their own internal padding so text
never touches the viewport edge */
body.wp-child-theme-shoptimizer-child .dra-searchbar-inner{padding-left:16px !important;padding-right:16px !important;}
/* ============================================================
FRAMER GUTTER (change C-038) .dra-gutter-framer marker
Measured off the prototype screenshots: the logo's left edge
sits ~20px in on a 2000px render of a 2545px original, i.e.
~25px. Using 24px - a round token at that measurement.
C-037 zeroed BOTH the container gutter and Elementor's 10px
column padding; that stays zero so the gutter is the single
source of truth for header inset.
============================================================ */
:root{ --dra-gutter:14px; }
@media (max-width:1024px){ :root{ --dra-gutter:14px; }
}
@media (max-width:767px){ :root{ --dra-gutter:12px; }
}
/* one inset, applied at the row level only */
body.wp-child-theme-shoptimizer-child .elementor-location-header .elementor-container{
padding-left:var(--dra-gutter) !important;
padding-right:var(--dra-gutter) !important;
}
/* Elementor's own column padding stays off - see C-037 */
body.wp-child-theme-shoptimizer-child .elementor-location-header .elementor-widget-wrap.elementor-element-populated{
padding:0 !important;
}
/* promo strip matches the bar */
body.wp-child-theme-shoptimizer-child .dra-hdr-ticker{
padding-left:var(--dra-gutter) !important;padding-right:var(--dra-gutter) !important;
}
/* search bar and mega panel align to the same inset */
body.wp-child-theme-shoptimizer-child .dra-searchbar-inner{
padding-left:var(--dra-gutter) !important;padding-right:var(--dra-gutter) !important;
}
/* ============================================================
BAR PADDING + PHARMACY REMOVED (change C-040)
.dra-bar-padding marker
12px top/bottom on the one-bar row; horizontal inset still
comes from --dra-gutter alone.
Pharmacy CTA hidden rather than deleted - the link survives
as a top-level menu item, and display:none reverts with a
theme flip whereas a template delete would not.
============================================================ */
body.wp-child-theme-shoptimizer-child .dra-hdr-row > .elementor-container{
padding-top:12px !important;
padding-bottom:12px !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-row{
padding-top:0 !important;padding-bottom:0 !important;
margin-top:0 !important;margin-bottom:0 !important;
}
/* Pharmacy CTA off - link retained in the nav */
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col .elementor-widget-button{display:none !important;}
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col > .elementor-widget-wrap{gap:0 !important;}
/* ============================================================
MENU SELECTOR CHAIN FIX (change C-041) .dra-menu-chain-fix
The real DOM is:
.htmega-menu-container > .htmega-menu-area > ul > li > a
Every earlier rule written as '.htmega-menu-container > ul'
matched NOTHING - the .htmega-menu-area div sits between.
That is why the caps (C-030) and several padding rules never
took effect. Re-stated here against the true chain.
============================================================ */
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area > ul > li > a,
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container ul.htmega-megamenu > li > a{
text-transform:uppercase !important;
letter-spacing:0 !important;
font-weight:600 !important;
font-size:12px !important;
color:#000000 !important;
font-family:'Google Sans Flex',system-ui,sans-serif !important;
padding:13px 6px !important;
display:inline-block !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area > ul > li:first-child > a,
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-container ul.htmega-megamenu > li:first-child > a{
padding-left:0 !important;
}
/* underline reveal + open state, same corrected chain */
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area > ul > li > a::after{
content:'';position:absolute;left:6px;right:6px;bottom:9px;height:1px;
background:#000000;transform:scaleX(0);transform-origin:left center;
transition:transform .22s cubic-bezier(.4,0,.2,1);
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area > ul > li{position:relative;}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area > ul > li:hover > a::after{transform:scaleX(1);}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu .htmega-menu-area > ul > li:first-child > a::after{left:0;}
/* ============================================================
PROMO TICKER (change C-042) .dra-ticker marker
Thin black bar at the very top. Messages cross-fade and slide
left-out / right-in. Emphasis in white 600, remainder in grey,
matching the prototype.
Pauses on hover and when the tab is hidden; honours
prefers-reduced-motion by showing the first message statically.
============================================================ */
body.wp-child-theme-shoptimizer-child .dra-ticker{
position:relative;
background:#000000;
height:34px;
overflow:hidden;
width:100%;
}
body.wp-child-theme-shoptimizer-child .dra-ticker-track{
position:relative;height:100%;
}
body.wp-child-theme-shoptimizer-child .dra-ticker-msg{
position:absolute;inset:0;margin:0;
display:flex;align-items:center;justify-content:center;gap:5px;
font-family:'Google Sans Flex',system-ui,-apple-system,sans-serif;
font-size:11.5px;letter-spacing:.02em;line-height:1;
white-space:nowrap;padding:0 16px;
opacity:0;transform:translateX(28px);pointer-events:none;
transition:opacity .42s ease, transform .52s cubic-bezier(.22,.61,.36,1);
}
body.wp-child-theme-shoptimizer-child .dra-ticker-msg.is-current{
opacity:1;transform:translateX(0);pointer-events:auto;
}
body.wp-child-theme-shoptimizer-child .dra-ticker-msg.is-leaving{
opacity:0;transform:translateX(-28px);
}
/* start-state for the incoming message - no transition so it snaps to the right first */
body.wp-child-theme-shoptimizer-child .dra-ticker-msg.is-entering{
transition:none;opacity:0;transform:translateX(28px);
}
body.wp-child-theme-shoptimizer-child .dra-ticker-msg strong{
color:#ffffff;font-weight:600;
}
body.wp-child-theme-shoptimizer-child .dra-ticker-msg span{
color:rgba(255,255,255,.62);font-weight:400;
}
/* the old static delivery line is now carried by the ticker */
body.wp-child-theme-shoptimizer-child .dra-hdr-retired{display:none !important;}
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-ticker{height:30px;}
body.wp-child-theme-shoptimizer-child .dra-ticker-msg{font-size:10.5px;}
}
@media (prefers-reduced-motion: reduce){
body.wp-child-theme-shoptimizer-child .dra-ticker-msg{transition:none !important;}
}
/* ============================================================
BLACK BASKET ICON (change C-046) .dra-cart-icon marker
The icon is CSS-drawn by the theme: .count is the bag body,
.count:after is the handle arc. Colour comes from the
shoptimizer_cart_icon_color theme mod, set to #000000 at
source - so no colour override is needed here.
This block only handles the hover inversion and sizing.
============================================================ */
body.wp-child-theme-shoptimizer-child .shoptimizer-cart a.cart-contents .count{
background-color:transparent !important;
border-width:1.5px !important;
border-radius:3px !important;
font-family:'Google Sans Flex',system-ui,sans-serif !important;
font-size:10px !important;
font-weight:600 !important;
}
body.wp-child-theme-shoptimizer-child .shoptimizer-cart a.cart-contents:hover .count{
background-color:#000000 !important;
color:#ffffff !important;
}
body.wp-child-theme-shoptimizer-child .shoptimizer-cart a.cart-contents .count:after{
border-width:1.5px !important;border-bottom:0 !important;
}
body.wp-child-theme-shoptimizer-child .shoptimizer-cart .cart-contents{
font-family:'Google Sans Flex',system-ui,sans-serif !important;
font-size:12px !important;font-weight:600 !important;
}
/* ============================================================
MY ACCOUNT ICON (change C-047) .dra-account-btn marker
Framer-style avatar/account icon, matches .dra-search-btn
sizing/hover language. Injected by WPCode snippet 47292
into the ac6c08a (cart) column, before the cart widget, so
the icon cluster reads: search - account - basket.
============================================================ */
body.wp-child-theme-shoptimizer-child .dra-account-btn{
all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:999px;cursor:pointer;color:#111;
margin-left:14px !important;
transition:background .15s ease,color .15s ease;
}
body.wp-child-theme-shoptimizer-child .dra-account-btn:hover{background:#f3f3f3;color:#EC0080;}
body.wp-child-theme-shoptimizer-child .dra-account-btn:focus-visible{outline:2px solid #EC0080;outline-offset:2px;}
/* ============================================================
SEARCH BAR FLASH ON LOAD (change C-048)
The Ivory Search form is rendered inline in the header by
Elementor, and only relocated into .dra-searchbar by the
footer JS. Between first paint and that JS running it was
painting as a wide open search bar. Hidden here at parse
time (this stylesheet is in ) so it can never show,
then re-shown once JS has moved it into the drop-down.
The show rule carries a longer chain (0,5,1) than the hide
rule (0,4,1) so it always wins - see C-025/C-041.
============================================================ */
body.wp-child-theme-shoptimizer-child .elementor-location-header .elementor-widget-shortcode .is-search-form{
display:none !important;
}
body.wp-child-theme-shoptimizer-child .elementor-location-header .dra-searchbar .dra-searchbar-inner .is-search-form{
display:block !important;
}
/* ============================================================
LEGACY PROMO BAR REMOVED (change C-049) dra-hide-promo-bar
The black bar under the nav carrying the Hello5 offer, its
exclusions and the GBP300 free-delivery line. It is NOT part
of the Elementor header - it is classic text widget text-172,
the only widget in Shoptimizer's 'header-1' area, wrapped in
.header-widget-region and coloured by the theme's top-bar
mods (background #000000, text #ffffff, border #EC0080).
Hidden rather than unassigned from the sidebar: display:none
here reverts with a theme flip, whereas editing
sidebars_widgets is global and would persist through one.
The widget and its content are untouched.
============================================================ */
body.wp-child-theme-shoptimizer-child .header-widget-region{
display:none !important;
}
/* ============================================================
UTILITY LINKS MOVED INTO THE NAV BAR (change C-050)
Widget 0cad789 lifted out of the pink strip (container
216d950) and inserted into section 192cee1 as column
drautil01, sitting between the menu and the search icon.
Bar order is now logo 1, menu 2, utility 3, search 4,
basket 5 - the 025ffef and ac6c08a orders were renumbered
in place rather than re-declared, per C-043.
The pink strip f55f4a3 is then hidden.
============================================================ */
body.wp-child-theme-shoptimizer-child .dra-hdr-util{
order:3 !important;flex:0 0 auto !important;width:auto !important;
margin-right:18px !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-util > .elementor-widget-wrap{
padding:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-util .elementor-widget-container{
margin:0 !important;padding:0 !important;
}
/* secondary to the main nav: smaller and lighter than the menu items */
body.wp-child-theme-shoptimizer-child .dra-hdr-util .dra-utility{
justify-content:flex-end !important;flex-wrap:nowrap !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-util .dra-utility a{
font-size:11px !important;
}
/* below 1200px the bar cannot hold logo + menu + 8 links + 3 icons.
These are secondary links and all appear in the footer. */
@media (max-width:1200px){
body.wp-child-theme-shoptimizer-child .dra-hdr-util{display:none !important;}
}
/* the pink strip itself */
body.wp-child-theme-shoptimizer-child .dra-hdr-ticker{
display:none !important;
}
/* ============================================================
LANGUAGE SWITCHER POSITION - owned elsewhere (change C-056)
Nothing here. The switcher's offset lives in the Customizer's
Additional CSS (child post 47283), which already carried
@media only screen and (min-width:1025px){
div#gt_float_wrapper{ top:95px !important; } }
/* ============================================================
MOBILE / TABLET HEADER + DRAWER (change C-067)
The burger was never missing from the markup. The whole header
section f122dbd carried Elementor's hidden-tablet + hidden-mobile,
so at <=1024px the entire bar - logo, HT Mega nav, utility links,
search, basket AND the burger and its drawer - was display:none.
What showed instead was 067921f, a duplicate row holding only a
logo and a search form: no menu of any kind, no padding, hence
"burger not present" and "nav bar is very thin".
Fixed at source: f122dbd now shows at every width and 067921f is
retired (hidden desktop+tablet+mobile, markup left in place so
the change is reversible). One header, one source of truth.
Font Awesome was NOT the cause - elementor/assets/lib/font-awesome/
css/all.min.css is enqueued, so fa-bars would have rendered. The
glyph is swapped for an inline SVG anyway so the burger matches
the search and account icons drawn at C-033 and C-047.
HT Mega switches to its burger at 991px; everything else in this
build switches at 1024px. The plugin's breakpoint is overridden
here so there is one boundary, not two.
============================================================ */
@media (max-width:1024px){
/* ---- 1. the bar has real height ---------------------------
Desktop 192cee1 is padding 15/15 with margin -20/-20, i.e. a
net -10px: the bar is held open by the nav links alone. With
the nav collapsed to a burger there is nothing left to hold
it, which is what made it thin. Desktop values are untouched. */
body.wp-child-theme-shoptimizer-child .dra-hdr-row{
margin-top:0 !important;
margin-bottom:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
/* 50px bar, measured off the prototype screenshot: the tallest
thing in it is a 38px icon button, centred, so the height is
carried by the container alone rather than by padding as well -
two contributors to one dimension is how it ended up thin. */
body.wp-child-theme-shoptimizer-child .dra-hdr-row > .elementor-container{
display:flex !important;
flex-wrap:nowrap !important; /* overrides the C-031 wrap */
align-items:center !important;
gap:0 !important;
min-height:50px;
}
/* ---- 2. burger left, logo centred, icons right ---------- */
/* logo hard left, then basket, then burger hard right, matching
the prototype screenshot Greg sent at C-068. The logo carries a
10px inset of its own: the icons are 38px buttons round a 19px
glyph, so the glyph already sits ~9.5px inside the row's gutter
and the logo has no such padding - without this the two edges
read as misaligned by about ten pixels. */
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col{
order:1 !important;flex:0 0 auto !important;width:auto !important;
margin:0 !important;margin-right:auto !important;
padding-left:10px !important;text-align:left !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col .elementor-widget-image,
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col .elementor-widget-image .elementor-widget-container{
text-align:left !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-logo-col .elementor-widget-image img{
margin-left:0 !important;margin-right:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col{
order:2 !important;flex:0 0 auto !important;width:auto !important;margin:0 !important;
justify-content:flex-end !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col > .elementor-widget-wrap{
justify-content:flex-end !important;gap:16px !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav{
order:3 !important;flex:0 0 auto !important;width:auto !important;
min-width:0 !important;margin:0 !important;text-align:right !important;
}
/* the prototype's mobile bar carries the basket and the burger and
nothing else. Neither icon is dropped - drawerInit() reproduces
search as the drawer's first row and My Account at its foot. */
body.wp-child-theme-shoptimizer-child .dra-hdr-col-spare{display:none !important;}
body.wp-child-theme-shoptimizer-child .dra-account-btn{display:none !important;}
/* the black promo ticker (C-042) is desktop-only from here down */
body.wp-child-theme-shoptimizer-child .dra-ticker{display:none !important;}
/* the eight utility links are already hidden from 1200px down by
C-050 - not restated here, one owner per property. They are
cloned into the foot of the drawer by drawerInit(). */
/* ---- 3. inline nav off, burger on, at 1024 not 991 ------ */
body.wp-child-theme-shoptimizer-child .htmega-menu-area .htmega-megamenu{display:none !important;}
body.wp-child-theme-shoptimizer-child .htmobile-aside-button{
display:inline-flex !important;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:999px;
margin:0;padding:0;border:0;line-height:0;color:#111;
transition:background .15s ease,color .15s ease;
}
body.wp-child-theme-shoptimizer-child .htmobile-aside-button:hover,
body.wp-child-theme-shoptimizer-child .htmobile-aside-button:focus-visible{
background:#f3f3f3;color:#EC0080;
}
body.wp-child-theme-shoptimizer-child .htmobile-aside-button:focus-visible{
outline:2px solid #EC0080;outline-offset:2px;
}
/* below 992px the plugin draws a 1px #ddd box round the menu area
and floats it right; Elementor's own widget CSS adds 10px 5px
padding at (0,3,0), so these need !important, not weight */
body.wp-child-theme-shoptimizer-child .htmega-menu-area{
border:0 !important;padding:0 !important;margin:0 !important;
float:none !important;font-size:inherit !important;
display:block !important;width:auto !important;
}
body.wp-child-theme-shoptimizer-child .dra-hdr-nav .elementor-widget-htmega-menu-inline-menu > .elementor-widget-container{
padding:0 !important;margin:0 !important;
}
/* ---- 4. HT Mega's drawer is retired below 1024px (C-070) ----
Sections 4, 5 and 6 lived here: the drawer restyle, the rules that
made the four-column panel usable inside it, and the drawer's own
search and utility rows. All deleted rather than left beside their
replacement - about 170 lines governing an element that no longer
renders. The menu below 1024px is now .dra-mob, at the foot of this
file; the rule that hides the plugin's drawer lives with it so
there is one place to look. Sections 1 to 3 above still apply:
they are the bar, not the menu. */
}
/* the Pharmacy button and the account label crowd a phone bar */
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-hdr-cart-col .elementor-widget-button{display:none !important;}
}
/* ============================================================
MOBILE MENU (change C-070) .dra-mob
A purpose-built menu for <=1024px. HT Mega's drawer is hidden
outright: three changes running (C-067 restyle, C-068 bar,
C-069 drill) had gone into bending it, and the prototype needs
things it does not have - a back-arrow-and-title header, an
in-place accordion at the category level, a search field inside
the panel, and rows that are not in the WordPress menu.
Geometry measured off the prototype screenshots at 432px:
header 53 - search field 39 with 20 above and below
level-0 rows 45 - level-1 and deeper rows 40
text inset ~17 from the left, marker ~11 from the right
sub-category rows grey (ink sampled at #7f-#9b), not indented
============================================================ */
@media (max-width:1024px){
/* the plugin's drawer and its overlay no longer render */
body.wp-child-theme-shoptimizer-child .htmobile-menu-wrap,
body.wp-child-theme-shoptimizer-child .htbody-overlay{display:none !important;}
body.wp-child-theme-shoptimizer-child .dra-mob{
position:fixed;left:0;right:0;bottom:0;top:50px;
background:#fff;z-index:9995;
display:flex;flex-direction:column;
opacity:0;transform:translateY(-6px);
transition:opacity .18s ease,transform .18s ease;
font-family:'Google Sans Flex',system-ui,sans-serif;
}
body.wp-child-theme-shoptimizer-child .dra-mob[hidden]{display:none !important;}
body.wp-child-theme-shoptimizer-child .dra-mob.is-open{opacity:1;transform:none;}
body.dra-mob-open{overflow:hidden !important;}
body.wp-child-theme-shoptimizer-child .dra-mob-scroll{
flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding:0 18px 40px;
}
/* ---- search: the Ivory form, moved in, not copied ---- */
body.wp-child-theme-shoptimizer-child .dra-mob-search{
position:relative;margin:20px 0;
}
body.wp-child-theme-shoptimizer-child .dra-mob-search .is-search-form{
display:block !important;width:100% !important;max-width:none !important;margin:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-mob-search .is-search-input{
width:100% !important;height:40px !important;box-sizing:border-box !important;
background:#f5f5f5 !important;border:1px solid #ececec !important;border-radius:8px !important;
padding:0 14px 0 42px !important;margin:0 !important;
font-family:'Google Sans Flex',system-ui,sans-serif !important;
font-size:13px !important;color:#111 !important;box-shadow:none !important;
}
body.wp-child-theme-shoptimizer-child .dra-mob-search .is-search-input::placeholder{color:rgba(0,0,0,.42);}
body.wp-child-theme-shoptimizer-child .dra-mob-search .is-search-submit{
position:absolute !important;left:6px !important;top:0 !important;
width:34px !important;height:40px !important;
background:transparent !important;border:0 !important;box-shadow:none !important;
color:rgba(0,0,0,.45) !important;opacity:1 !important;
}
body.wp-child-theme-shoptimizer-child .dra-mob-search .is-search-submit:hover{color:#EC0080 !important;}
/* ---- panes ---- */
body.wp-child-theme-shoptimizer-child .dra-mob-pane{display:none;}
body.wp-child-theme-shoptimizer-child .dra-mob-pane.is-current{display:block;}
body.wp-child-theme-shoptimizer-child .dra-mob-head{
display:flex;align-items:center;gap:8px;
height:56px;border-bottom:1px solid rgba(0,0,0,.09);
}
body.wp-child-theme-shoptimizer-child .dra-mob-back{
all:unset;box-sizing:border-box;
display:inline-flex !important;align-items:center;justify-content:center;
width:34px;height:34px;flex:0 0 34px;cursor:pointer;
color:#111;background:transparent !important;border:0 !important;border-radius:999px;
}
body.wp-child-theme-shoptimizer-child .dra-mob-back:hover{color:#EC0080;}
body.wp-child-theme-shoptimizer-child .dra-mob-back:focus-visible{outline:2px solid #EC0080;outline-offset:2px;}
body.wp-child-theme-shoptimizer-child .dra-mob-title{
flex:1 1 auto;text-align:center;padding-right:34px;
font-size:14px;font-weight:600;letter-spacing:.03em;
text-transform:uppercase;color:#111;
}
body.wp-child-theme-shoptimizer-child .dra-mob-list,
body.wp-child-theme-shoptimizer-child .dra-mob-subs{
list-style:none;margin:0;padding:0;
}
body.wp-child-theme-shoptimizer-child .dra-mob-item{margin:0;}
/* one row rule for every level; the modifiers only change type */
body.wp-child-theme-shoptimizer-child .dra-mob-row{
all:unset;box-sizing:border-box;
display:flex !important;align-items:center;justify-content:space-between;gap:14px;
width:100%;min-height:40px;padding:9px 0;cursor:pointer;
background:transparent !important;border:0 !important;border-radius:0 !important;
border-bottom:1px solid rgba(0,0,0,.09) !important;
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:13px;font-weight:400;line-height:1.3;color:#111;
text-align:left;text-decoration:none !important;
transition:color .14s ease;
}
body.wp-child-theme-shoptimizer-child .dra-mob-row:hover,
body.wp-child-theme-shoptimizer-child .dra-mob-row:focus-visible{color:#EC0080;}
body.wp-child-theme-shoptimizer-child .dra-mob-row:focus-visible{outline:2px solid #EC0080;outline-offset:-2px;}
body.wp-child-theme-shoptimizer-child .dra-mob-mark{
flex:0 0 auto;display:inline-flex;align-items:center;color:currentColor;opacity:.75;
}
body.wp-child-theme-shoptimizer-child .dra-mob-label{min-width:0;}
/* level 0: taller and bold, per the prototype */
body.wp-child-theme-shoptimizer-child .dra-mob-row.is-top{
min-height:45px;padding:11px 0;
font-size:15px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;
}
/* categories: uppercase but regular weight, with a + that becomes - */
body.wp-child-theme-shoptimizer-child .dra-mob-row.is-cat{text-transform:uppercase;}
body.wp-child-theme-shoptimizer-child .dra-mob-row.is-open .dra-mob-v{opacity:0;}
/* sub-categories: grey, sentence case, same indent as the parent */
body.wp-child-theme-shoptimizer-child .dra-mob-row.is-sub{color:#8a8a8a;}
body.wp-child-theme-shoptimizer-child .dra-mob-row.is-sub:hover{color:#EC0080;}
body.wp-child-theme-shoptimizer-child .dra-mob-empty{
padding:12px 0;font-size:13px;color:rgba(0,0,0,.38);
border-bottom:1px solid rgba(0,0,0,.09);
}
}
/* ============================================================
TRUSTPILOT BAR OFF ON MOBILE (change C-071)
The bar is not in any template, any widget area, any Elementor
layout or any snippet - a DB-wide search for "trustpilot" turns
up only two dormant Divi layouts. It is injected client-side by
the Trustpilot plugin's trustBoxScript.min.js from a single
configured TrustBox:
widgetName Micro Review Count
page landing
size 99% x 24px, theme dark, centre aligned
template 5419b6a8b0d04a076446a9ad
xpath (empty - so it lands at the plugin's default
position, the top of the page)
Hidden by that template id rather than by .trustpilot-widget,
so any other Trustpilot widget added later still renders. Only
below 1024px - the same single boundary the rest of the build
uses - so desktop is unchanged. To remove it everywhere, disable
the TrustBox in the Trustpilot plugin rather than adding a
desktop rule here: the plugin is the owner.
Nothing server-rendered matches this selector today, so it is
inert until the plugin's script injects the widget.
============================================================ */
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .trustpilot-widget[data-template-id="5419b6a8b0d04a076446a9ad"]{
display:none !important;
}
}
/* ============================================================
HOMEPAGE HERO CAROUSEL (change C-073) .dra-hero
Four slides copied from the prototype's "Hero" frame, on
Elementor Pro's Nested Carousel - each slide is a container, so
the Countdown widget and, later, real text can go inside one
without restructuring anything.
The images are 2880x1200 (12:5) with the wording BAKED IN, so
the one thing that must not happen is a crop. background-size
is cover, and the slide is pinned to the image's own ratio at
every width - so the banner gets shorter as the screen narrows
rather than losing its edges. The cost is that at 390px the
hero is only ~162px tall and the baked-in text is small. That
is a property of a 12:5 banner on a phone, not of this rule,
and it is why the textless exports are worth chasing: once the
text is a real element the slide can be given a taller mobile
ratio and the type set independently.
Replaces two containers that held one banner each, one
hidden-desktop and one hidden-tablet+mobile. Both are retired
rather than deleted (hidden at every width, markup intact).
============================================================ */
body.wp-child-theme-shoptimizer-child .dra-hero-wrap{
padding:0 !important;
}
body.wp-child-theme-shoptimizer-child .dra-hero .swiper,
body.wp-child-theme-shoptimizer-child .dra-hero .swiper-wrapper{
width:100%;
}
/* The slide keeps the image's own 12:5 ratio, so cover never crops.
Targeted structurally rather than by a class: Elementor does not
render _css_classes on a nested carousel's child containers, and
this selector also picks up any slide added later. */
body.wp-child-theme-shoptimizer-child .dra-hero .e-n-carousel .swiper-slide{height:auto;}
body.wp-child-theme-shoptimizer-child .dra-hero .e-n-carousel .swiper-slide > .e-con{
aspect-ratio:12 / 5;
min-height:0 !important;
height:auto !important;
width:100%;
padding:0 !important;
}
/* Arrows, measured off the prototype rather than styled to taste:
32 x 32, background rgba(0,0,0,.1), fully round
NO shadow, no border (C-073 had a white disc with a drop shadow)
white chevron, stroke-width 2 on a 40-unit viewBox - 1.6px as drawn
inset 20px from each edge of the hero, vertically centred
The chevron is painted as a background-image on the button itself:
one element, and nothing depends on Elementor's own icon markup,
which is hidden. The 40-unit artwork drawn into a 32px box is what
reproduces the prototype's 1.6px stroke exactly. */
/* The 20px inset is set through Elementor's own custom properties
rather than a plain left/right, so the widget's own centring maths
still runs. !important because Elementor declares the same vars at
.elementor-1694 .elementor-element.elementor-element-drahc001 -
(0,3,0) against this rule's (0,2,1) - and measured flush at 0 both
without it and with a plain left/right. */
body.wp-child-theme-shoptimizer-child .dra-hero{
--e-n-carousel-arrow-prev-left-position:20px !important;
--e-n-carousel-arrow-next-right-position:20px !important;
}
body.wp-child-theme-shoptimizer-child .dra-hero .elementor-swiper-button{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
background-color:rgba(0,0,0,.1);
background-repeat:no-repeat;background-position:center;background-size:32px 32px;
border:0;border-radius:50%;box-shadow:none;
font-size:0;
transition:background-color .15s ease;
}
body.wp-child-theme-shoptimizer-child .dra-hero .elementor-swiper-button:hover{
background-color:rgba(0,0,0,.22);
}
body.wp-child-theme-shoptimizer-child .dra-hero .elementor-swiper-button i,
body.wp-child-theme-shoptimizer-child .dra-hero .elementor-swiper-button svg{
display:none !important;
}
body.wp-child-theme-shoptimizer-child .dra-hero .elementor-swiper-button-prev{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M22.5 12.5 15 20l7.5 7.5'/%3E%3C/svg%3E");
}
body.wp-child-theme-shoptimizer-child .dra-hero .elementor-swiper-button-next{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.5 12.5 25 20l-7.5 7.5'/%3E%3C/svg%3E");
}
/* Pagination sits OUTSIDE the slide, on the page's white - so the
white bullets C-073 shipped were invisible and only the pink
active one showed. Grey inactive, pink active. */
body.wp-child-theme-shoptimizer-child .dra-hero .swiper-pagination-bullet{
background:rgba(17,17,17,.22);opacity:1;width:7px;height:7px;
}
body.wp-child-theme-shoptimizer-child .dra-hero .swiper-pagination-bullet-active{
background:#EC0080;opacity:1;
}
@media (max-width:767px){
/* a 32px control on a 162px-tall banner is still heavy - scaled
down proportionally, keeping the prototype's proportions */
body.wp-child-theme-shoptimizer-child .dra-hero .elementor-swiper-button{
width:28px;height:28px;background-size:28px 28px;
}
body.wp-child-theme-shoptimizer-child .dra-hero{
--e-n-carousel-arrow-prev-left-position:12px !important;
--e-n-carousel-arrow-next-right-position:12px !important;
}
}
/* ============================================================
THE 1PX BLACK LINE UNDER THE BAR (change C-076) .col-full-nav
Greg reported this three times. It is not a border and it is
not in the header. Found by inspecting the live DOM rather than
the stylesheet - measured at the header's exact bottom edge:
div.col-full-nav position:sticky top:0 z-index:10
height:1px background:rgb(34,34,34)
Shoptimizer's own sticky nav bar. The Customizer collapses the
theme header with .site-header{height:0px}, but .col-full-nav is
a SIBLING of .site-header inside #page, not a child - so nothing
applied to .site-header could ever contain it, and because it is
position:sticky it also re-appears pinned to the top on scroll.
Squashed to 1px it still paints its dark background, which is
the line.
C-074 and C-075 both looked for a border or a shadow on the
Elementor header and found none, correctly - there is none.
The lesson is the C-041 one again: confirm an element renders,
and where, before reasoning about what styles it.
Hidden rather than recoloured: it holds a duplicate of the
theme's search widget and nav, both replaced by the Elementor
header since C-020.
============================================================ */
body.wp-child-theme-shoptimizer-child .col-full-nav{
display:none !important;
}
/* ==============================================================
C-089 - PRODUCT CARD rebuilt to the prototype .dra-card
Supersedes the C-082 block entirely.
Card 589 x 809 in the prototype: image 589 x 676, then badge,
title, 2-line description, price. Measured, not estimated.
Heart 36px circle, rgba(236,0,128,.1), inset 10px top/right,
20px icon. Markup is CommerceKit's own loop output,
reached from an Elementor loop item via [dra_wishlist]
(see WPCode 47332) because woocommerce_before_shop_loop_item
never fires there. Two states, two classes, both the
plugin's: .cg-wishlist = not saved, .cg-wishlist-t = saved.
Icons are the design system's own Heart-Straight-Regular
and -fill, inlined so nothing depends on an icon font.
ATC 129 x 34, #404040, radius 10px, white 12/600, straddling
the image's bottom edge, revealed on card hover - the same
treatment as the category card's Shop Now (C-084).
Type badge 14/400 #EC0080 - title 16/500 - desc 14/400
rgba(0,0,0,.7) clamped to 2 lines - price 16/500.
Fixed sizes, not a clamp: 14-16px reads correctly at every
card width we ship, unlike the category label's 20px.
Slide/loop containers are targeted STRUCTURALLY - _css_classes
does not render on Elementor containers (C-085).
============================================================== */
body.wp-child-theme-shoptimizer-child .dra-loop .e-loop-item > .e-con{
font-family:'Google Sans Flex',system-ui,sans-serif;
height:100%;
display:flex;
flex-direction:column;
}
/* ---- media, and the two things that sit over it ---- */
body.wp-child-theme-shoptimizer-child .dra-loop .e-loop-item > .e-con > .e-con:first-child{
position:relative;
overflow:visible;
padding:0 !important;
width:100%;
}
body.wp-child-theme-shoptimizer-child .dra-card-media img{
display:block;
width:100%;
aspect-ratio:var(--dra-card-ratio);
object-fit:var(--dra-card-fit);
object-position:center;
background:var(--dra-card-media-bg);
}
/* heart */
/* C-089b - the shortcode widget wrapper collapsed to 0 width and its
inner containers added 15px of padding, so the anchor landed at
x519/y25 instead of the prototype's x543/y10. Size the wrapper and
flatten what Elementor puts inside it. */
body.wp-child-theme-shoptimizer-child .dra-card-heart{
position:absolute;
top:10px;
right:10px;
width:36px;
height:36px;
z-index:3;
line-height:0;
}
body.wp-child-theme-shoptimizer-child .dra-card-heart .elementor-widget-container,
body.wp-child-theme-shoptimizer-child .dra-card-heart .elementor-shortcode{
margin:0 !important;
padding:0 !important;
width:36px;
height:36px;
line-height:0;
}
/* C-089c - the plugin styles .mini for ITS OWN loop: absolutely placed at
top/right 10px on the product li, on a white disc, and opacity:0 until
the card is hovered. Our wrapper already does the placing, and the
prototype shows the heart at rest, so both are neutralised here. */
body.wp-child-theme-shoptimizer-child .dra-card-heart .commercekit-wishlist.mini{
position:static !important;
inset:auto !important;
opacity:1 !important;
background:transparent !important;
margin:0 !important;
padding:0 !important;
width:36px !important;
height:36px !important;
line-height:0;
}
body.wp-child-theme-shoptimizer-child .dra-card-heart .commercekit-wishlist a{
position:relative !important;
top:auto !important;
left:auto !important;
width:36px !important;
height:36px !important;
}
body.wp-child-theme-shoptimizer-child .dra-card-heart .commercekit-wishlist{
margin:0;
}
body.wp-child-theme-shoptimizer-child .dra-card-heart .commercekit-wishlist a{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:50%;
background:rgba(236,0,128,.1);
text-indent:0;
font-size:0;
transition:background .18s ease;
}
body.wp-child-theme-shoptimizer-child .dra-card-heart .commercekit-wishlist a:hover{
background:rgba(236,0,128,.2);
}
body.wp-child-theme-shoptimizer-child .dra-card-heart .commercekit-wishlist a span{display:none;}
body.wp-child-theme-shoptimizer-child .dra-card-heart em.cg-wishlist,
body.wp-child-theme-shoptimizer-child .dra-card-heart em.cg-wishlist-t{
display:block;
width:20px;
height:20px;
background-repeat:no-repeat;
background-position:center;
background-size:20px 20px;
font-style:normal;
}
body.wp-child-theme-shoptimizer-child .dra-card-heart em.cg-wishlist:before,
body.wp-child-theme-shoptimizer-child .dra-card-heart em.cg-wishlist-t:before{content:none;}
body.wp-child-theme-shoptimizer-child .dra-card-heart em.cg-wishlist{
background-image:url(data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2724%27%20height=%2724%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%20%3Cpath%20d=%27M20.9062%205.34375C19.8873%204.32736%2018.5074%203.7558%2017.0682%203.75404C15.629%203.75229%2014.2477%204.32048%2013.2262%205.33438L12%206.47344L10.7728%205.33063C9.75164%204.31232%208.36778%203.74138%206.92565%203.7434C5.48352%203.74542%204.10127%204.32024%203.08296%205.34141C2.06465%206.36257%201.49371%207.74644%201.49573%209.18856C1.49775%2010.6307%202.07258%2012.0129%203.09374%2013.0313L11.4703%2021.5306C11.5401%2021.6015%2011.6233%2021.6578%2011.715%2021.6962C11.8068%2021.7346%2011.9052%2021.7544%2012.0047%2021.7544C12.1041%2021.7544%2012.2026%2021.7346%2012.2943%2021.6962C12.3861%2021.6578%2012.4693%2021.6015%2012.5391%2021.5306L20.9062%2013.0313C21.9253%2012.0116%2022.4977%2010.6291%2022.4977%209.1875C22.4977%207.74595%2021.9253%206.36339%2020.9062%205.34375ZM19.8422%2011.9775L12%2019.9313L4.15312%2011.97C3.41466%2011.2315%202.99979%2010.23%202.99979%209.18563C2.99979%208.14128%203.41466%207.13971%204.15312%206.40125C4.89158%205.66279%205.89315%205.24793%206.93749%205.24793C7.98184%205.24793%208.9834%205.66279%209.72187%206.40125L9.74062%206.42L11.4891%208.04656C11.6278%208.17572%2011.8104%208.24753%2012%208.24753C12.1896%208.24753%2012.3721%208.17572%2012.5109%208.04656L14.2594%206.42L14.2781%206.40125C15.0171%205.66329%2016.0189%205.2491%2017.0633%205.2498C18.1076%205.2505%2019.1089%205.66604%2019.8469%206.405C20.5848%207.14396%2020.999%208.14581%2020.9983%209.19015C20.9976%2010.2345%2020.5821%2011.2358%2019.8431%2011.9738L19.8422%2011.9775Z%27%20fill=%27%23EC0080%27/%3E%20%3C/svg%3E);
}
body.wp-child-theme-shoptimizer-child .dra-card-heart em.cg-wishlist-t{
background-image:url(data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2724%27%20height=%2724%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%20%3Cpath%20d=%27M20.9062%205.34375C19.8873%204.32736%2018.5074%203.7558%2017.0682%203.75404C15.629%203.75229%2014.2477%204.32048%2013.2262%205.33438L12%206.47344L10.7728%205.33063C9.75164%204.31232%208.36777%203.74138%206.92565%203.7434C5.48352%203.74542%204.10127%204.32024%203.08296%205.34141C2.06465%206.36257%201.49371%207.74644%201.49573%209.18856C1.49775%2010.6307%202.07258%2012.0129%203.09374%2013.0313L11.4703%2021.5306C11.5401%2021.6015%2011.6233%2021.6578%2011.715%2021.6962C11.8068%2021.7346%2011.9052%2021.7544%2012.0047%2021.7544C12.1041%2021.7544%2012.2026%2021.7346%2012.2943%2021.6962C12.3861%2021.6578%2012.4693%2021.6015%2012.5391%2021.5306L20.9062%2013.0313C21.9253%2012.0116%2022.4977%2010.6291%2022.4977%209.1875C22.4977%207.74595%2021.9253%206.36339%2020.9062%205.34375Z%27%20fill=%27%23EC0080%27/%3E%20%3C/svg%3E);
}
/* add to basket, revealed on hover */
body.wp-child-theme-shoptimizer-child .dra-card-atc{
position:absolute;
left:50%;
bottom:-23px;
transform:translate(-50%,6px);
z-index:4;
opacity:0;
pointer-events:none;
transition:opacity .2s ease,transform .2s ease;
}
body.wp-child-theme-shoptimizer-child .dra-loop .e-loop-item > .e-con:hover .dra-card-atc{
opacity:1;
transform:translate(-50%,0);
pointer-events:auto;
}
@media (hover:none){
body.wp-child-theme-shoptimizer-child .dra-card-atc{
opacity:1;
transform:translate(-50%,0);
pointer-events:auto;
}
}
body.wp-child-theme-shoptimizer-child .dra-card-atc .button{
min-width:129px;
min-height:34px;
padding:10px 25px !important;
background:#404040 !important;
color:#fff !important;
border:0 !important;
border-radius:10px !important;
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:12px !important;
font-weight:600 !important;
line-height:14px;
box-shadow:none !important;
white-space:nowrap;
}
body.wp-child-theme-shoptimizer-child .dra-card-atc .button:hover{
background:#111 !important;
}
body.wp-child-theme-shoptimizer-child .dra-card-atc .added_to_cart{
display:none;
}
/* ---- text block ---- */
body.wp-child-theme-shoptimizer-child .dra-card-badge{
margin-top:20px;
min-height:17px;
}
body.wp-child-theme-shoptimizer-child .dra-badge{
font-size:14px;
font-weight:400;
line-height:1.2;
color:#EC0080;
}
body.wp-child-theme-shoptimizer-child .dra-card-title{margin-top:9px;}
body.wp-child-theme-shoptimizer-child .dra-card-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-card-title a{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:16px;
font-weight:500;
line-height:1.2;
color:#000;
text-decoration:none;
}
body.wp-child-theme-shoptimizer-child .dra-card-desc{margin-top:6px;}
body.wp-child-theme-shoptimizer-child .dra-card-desc .elementor-widget-container{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
body.wp-child-theme-shoptimizer-child .dra-card-desc p{
margin:0 !important;
display:inline;
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:14px !important;
font-weight:400;
line-height:1.2;
color:rgba(0,0,0,.7);
}
body.wp-child-theme-shoptimizer-child .dra-card-price{margin-top:9px;}
body.wp-child-theme-shoptimizer-child .dra-card-price .price,
body.wp-child-theme-shoptimizer-child .dra-card-price .price ins,
body.wp-child-theme-shoptimizer-child .dra-card-price .price bdi{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:16px !important;
font-weight:500 !important;
line-height:1.2;
color:#000 !important;
text-decoration:none;
}
/* ---- the grids ---- */
body.wp-child-theme-shoptimizer-child .dra-loop .elementor-loop-container{
gap:48px 10px !important;
}
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-loop .elementor-loop-container{gap:40px 10px !important;}
}
/* ==============================================================
C-084/C-085 - Homepage - Categories carousel (12 cards)
Measured off the prototype:
card 589x559 - gap 10px - 4 per view at 2560
heading 32/600 centred + sub 18/400 rgba(0,0,0,.5) centred
label GSF 20px/600 uppercase white, centred, 20px off the bottom
Shop Now #404040, radius 10px, 12px/600 white, hover-revealed
arrows 24x24, transparent, 10px apart, centred 16px below the row
Everything hangs off .dra-cat-carousel, the WIDGET class.
_css_classes does not render on Elementor CONTAINERS at all in
this build - not just nested-carousel children (C-073) and loop
items (C-082). Verified in the DOM, not assumed.
============================================================== */
body.wp-child-theme-shoptimizer-child .dra-cats-title .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:clamp(22px,2.2vw,32px);
font-weight:600;
line-height:1.2;
color:#000;
text-align:center;
margin:0 0 10px;
}
body.wp-child-theme-shoptimizer-child .dra-cats-sub .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:clamp(14px,1.1vw,18px);
font-weight:400;
line-height:1.4;
color:rgba(0,0,0,.5);
text-align:center;
margin:0 0 32px;
}
/* ---- the card ---- */
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .e-n-carousel .swiper-slide > .e-con{
position:relative;
aspect-ratio:589 / 559;
min-height:0 !important;
height:auto !important;
width:100%;
padding:0 !important;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;
}
/* scrim - ::after not ::before, Elementor owns ::before for its own overlay */
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .e-n-carousel .swiper-slide > .e-con::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(rgba(0,0,0,0) 37.7%,rgba(0,0,0,.4) 111%);
pointer-events:none;
z-index:1;
}
/* ---- category name ---- */
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .dra-cat-name{
position:relative;
z-index:2;
width:100%;
margin:0 0 20px;
transition:transform .2s ease;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .dra-cat-name .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:clamp(15px,1.15vw,20px);
font-weight:600;
line-height:1.2;
text-transform:uppercase;
color:#fff;
text-align:center;
margin:0;
padding:0 16px;
}
/* ---- Shop Now, revealed on hover ---- */
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .dra-cat-btn{
position:absolute;
left:50%;
bottom:16px;
transform:translate(-50%,8px);
z-index:3;
opacity:0;
pointer-events:none;
transition:opacity .2s ease,transform .2s ease;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .swiper-slide > .e-con:hover .dra-cat-btn{
opacity:1;
transform:translate(-50%,0);
pointer-events:auto;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .swiper-slide > .e-con:hover .dra-cat-name{
transform:translateY(-30px);
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .dra-cat-btn .elementor-button{
background-color:#404040 !important;
color:#fff !important;
border:0 !important;
border-radius:10px !important;
padding:10px 25px !important;
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:12px !important;
font-weight:600 !important;
line-height:14px;
box-shadow:none !important;
fill:#fff;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .dra-cat-btn .elementor-button:hover{
background-color:#111 !important;
}
/* touch devices have no hover - the card would otherwise be untappable */
@media (hover:none){
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .dra-cat-btn{
opacity:1;
transform:translate(-50%,0);
pointer-events:auto;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .dra-cat-name{
transform:translateY(-30px);
}
}
/* ---- arrows: the prototype has them BELOW the row, centred, no disc ---- */
body.wp-child-theme-shoptimizer-child .dra-cat-carousel{
position:relative;
padding-bottom:40px;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .elementor-swiper-button{
position:absolute !important;
top:auto !important;
bottom:0 !important;
margin:0 !important;
width:24px !important;
height:24px !important;
transform:none !important;
background-color:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
background-repeat:no-repeat;
background-position:center;
background-size:24px 24px;
font-size:0;
opacity:1;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .elementor-swiper-button i,
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .elementor-swiper-button svg{display:none;}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .elementor-swiper-button-prev{
left:calc(50% - 29px) !important;
right:auto !important;
background-image:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2740%27%20height=%2740%27%3E%3Cpath%20fill=%27none%27%20stroke=%27%23222222%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%20stroke-width=%272.5%27%20d=%27M23%2011%2014%2020l9%209%27/%3E%3C/svg%3E);
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .elementor-swiper-button-next{
left:calc(50% + 5px) !important;
right:auto !important;
background-image:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2740%27%20height=%2740%27%3E%3Cpath%20fill=%27none%27%20stroke=%27%23222222%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%20stroke-width=%272.5%27%20d=%27M17%2011%2026%2020l-9%209%27/%3E%3C/svg%3E);
}
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-cats-sub .elementor-heading-title{margin:0 0 20px;}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .dra-cat-name .elementor-heading-title{font-size:15px;}
}
/* ==============================================================
C-086 - Hero: the prototype's own tablet and mobile artwork
Framer exports three variants per slide, all four slides:
web 2880 x 1200 ratio 2.400 (12/5)
tablet 1300 x 1200 ratio 1.083 (13/12)
mobile 1300 x 2000 ratio 0.650 (13/20)
The mobile art is a RE-LAYOUT, not a crop - logo centres, copy
centres, product drops below - so the frame has to change shape
with it or cover() throws the composition away.
Elementor breakpoints on this site: viewport_lg 1025, md 768,
so its own responsive background rules land at max-width 1024
and 767. These match them deliberately.
============================================================== */
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .dra-hero .e-n-carousel .swiper-slide > .e-con{
aspect-ratio:13 / 12;
}
}
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-hero .e-n-carousel .swiper-slide > .e-con{
aspect-ratio:13 / 20;
}
/* the arrows sit over a much taller frame on mobile - pull them in
so they clear the re-laid-out copy */
body.wp-child-theme-shoptimizer-child .dra-hero{
--e-n-carousel-arrow-prev-left-position:8px !important;
--e-n-carousel-arrow-next-right-position:8px !important;
}
body.wp-child-theme-shoptimizer-child .dra-hero .elementor-swiper-button{
width:28px;height:28px;background-size:28px 28px;
}
}
/* ==============================================================
C-087 - Categories section runs full width, matching the prototype
The prototype's card row spans x80 to x2480 in a 2560 viewport -
80px of page padding each side, i.e. 3.125vw. Expressed as a
clamp so it holds at 2560 and does not eat the card on a phone.
Padding lives on the WIDGETS, not the container: _css_classes
still does not render on Elementor containers (C-085), and
hanging it off .elementor-element-dracatw1 would tie the rule
to an element id.
At 2560 this gives (2560 - 160 - 30) / 4 = 592px cards against
the prototype's 589 - the boxed container was giving 278.
============================================================== */
body.wp-child-theme-shoptimizer-child .dra-cat-carousel,
body.wp-child-theme-shoptimizer-child .dra-cats-title,
body.wp-child-theme-shoptimizer-child .dra-cats-sub{
padding-inline:clamp(16px,3.125vw,80px);
}
/* ==============================================================
C-088 - Categories: bleed past the edges, and kill the load flash
1. THE BLEED. In the prototype the neighbouring cards run under
the viewport edges rather than the row stopping dead at the
80px inset. Elementor's .e-n-carousel carries overflow:hidden,
so it clipped at 2386 and showed exactly four cards. Moving
the clip OUT to the widget (2545 = the full section) and
letting the swiper overflow gives ~80px of the previous and
next card in the gutters, clipped at the viewport edge.
overflow-x:clip, not hidden - hidden would force overflow-y
to auto and make this a scroll container.
2. THE FLASH. Measured, not guessed: before Swiper initialises a
slide is 2386 x 2264 (Swiper's own .swiper-slide{width:100%}
against our aspect-ratio), and after init it is 589 x 559 -
a 4.05x jump, and a 1700px layout shift. Pre-sizing the
slides with the same arithmetic Swiper will use removes it.
The vars are Elementor's own and are already correct per
breakpoint (4 / 2 / 1 across, 10px gap), so this stays in
step with the widget settings on its own.
Side benefit: if the JS never runs, the row degrades to a
static four-across grid instead of one enormous card.
============================================================== */
body.wp-child-theme-shoptimizer-child .dra-cat-carousel{
overflow-x:clip;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .e-n-carousel{
overflow:visible;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .e-n-carousel:not(.swiper-initialized) .swiper-wrapper{
display:flex;
}
body.wp-child-theme-shoptimizer-child .dra-cat-carousel .e-n-carousel:not(.swiper-initialized) .swiper-slide{
flex:0 0 auto;
width:calc((100% - (var(--e-n-carousel-swiper-slides-to-display) - 1) * var(--e-n-carousel-swiper-slides-gap)) / var(--e-n-carousel-swiper-slides-to-display));
margin-right:var(--e-n-carousel-swiper-slides-gap);
}
/* C-089 - Bestsellers runs full width, same 3.125vw inset as Categories (C-087).
Scoped to .dra-loop-full, not .dra-loop: New in Stock is still boxed and a
second inset would shrink it. */
body.wp-child-theme-shoptimizer-child .dra-loop-full{
padding-inline:clamp(16px,3.125vw,80px);
}
body.wp-child-theme-shoptimizer-child .dra-sec-title .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:clamp(22px,2.2vw,32px);
font-weight:600;
line-height:1.2;
}
/* ==============================================================
C-090 - Homepage - About band, replacing Product Spotlight
Measured off the prototype at a 2545 viewport:
section 2545 x 540, full bleed, photo at cover
logo 501 x 282 centred, 60px from the top
sub 18/400 white, centred, 381px from the top
button 126 x 37, #404040, r10, label 14/600 white
540 is not set as a height - it falls out of the content:
60 + 282 + 39 + 22 + 40 + 37 + 60 = 540. So the band shrinks
with the logo on smaller screens instead of being pinned.
The logo is the prototype's own SVG, inlined rather than
uploaded: it already carries fill #fff, and WordPress blocks
SVG uploads by default for good reason - no point relaxing
that for one mark.
============================================================== */
body.wp-child-theme-shoptimizer-child .dra-about-logo{
width:clamp(220px,19.7vw,501px);
line-height:0;
}
body.wp-child-theme-shoptimizer-child .dra-about-logo svg{
display:block;
width:100%;
height:auto;
}
body.wp-child-theme-shoptimizer-child .dra-about-sub{
margin-top:39px;
}
body.wp-child-theme-shoptimizer-child .dra-about-sub .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:clamp(15px,0.71vw,18px);
font-weight:400;
line-height:1.2;
color:#fff;
text-align:center;
margin:0;
}
body.wp-child-theme-shoptimizer-child .dra-about-btn{
margin-top:40px;
}
body.wp-child-theme-shoptimizer-child .dra-about-btn .elementor-button{
min-width:126px;
min-height:37px;
padding:10px 25px !important;
background-color:#404040 !important;
color:#fff !important;
border:0 !important;
border-radius:10px !important;
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:14px !important;
font-weight:600 !important;
line-height:17px;
box-shadow:none !important;
}
body.wp-child-theme-shoptimizer-child .dra-about-btn .elementor-button:hover{
background-color:#111 !important;
}
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-about-sub{margin-top:26px;}
body.wp-child-theme-shoptimizer-child .dra-about-btn{margin-top:26px;}
}
/* ==============================================================
C-092 - Homepage - New in Stock, sticky left column
Measured off the prototype at a 2159 viewport:
row flex, gap 10px, left 527 / right 1582 (24.87% / 74.7%)
left position:sticky, top:80px, releases at the row's end
grid 3 across, card 521 wide, column gap 10, row gap 20
title 32/600 black, LEFT aligned (Bestsellers is centred)
sub 18/400 rgba(0,0,0,.5), two lines
section white, 60px top and bottom
NO FADE. Sampled the prototype's sticky block at seven scroll
positions through the section: opacity is 1 at every one of them.
It simply stops being sticky at the bottom of the row and scrolls
away with the page. That is what is built here.
Selectors use :has() rather than a container class, because
_css_classes still does not render on Elementor containers
(C-085), and keying layout to an element id ages badly.
.dra-new-title is a heading WIDGET class, which does render.
============================================================== */
body.wp-child-theme-shoptimizer-child .e-con:has(> .e-con > .dra-new-title){
padding-inline:clamp(16px,3.125vw,80px);
}
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-new-title){
position:sticky;
top:128px;
align-self:flex-start;
}
body.wp-child-theme-shoptimizer-child .dra-new-title .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:clamp(22px,2.2vw,32px);
font-weight:600;
line-height:1.2;
color:#000;
text-align:left;
margin:0 0 16px;
}
body.wp-child-theme-shoptimizer-child .dra-new-sub .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:clamp(14px,1.1vw,18px);
font-weight:400;
line-height:1.35;
color:rgba(0,0,0,.5);
text-align:left;
margin:0;
}
body.wp-child-theme-shoptimizer-child .dra-loop-new .elementor-loop-container{
gap:20px 10px !important;
}
/* Sticky needs somewhere to travel. Below the tablet breakpoint the
left block sits above a 2-up / 1-up grid and there is no column to
stick within, so it goes back to normal flow. */
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .e-con:has(> .e-con > .dra-new-title){
flex-direction:column;
}
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-new-title){
position:static;
width:100% !important;
margin-bottom:28px;
}
body.wp-child-theme-shoptimizer-child .e-con:has(> .e-con > .dra-new-title) > .e-con:last-of-type{
width:100% !important;
}
}
/* ==============================================================
C-093 / C-094 - Homepage - Featured Brands (autoscrolling)
Measured off the prototype's own stylesheet, not off screen:
section .framer-1utuaj5 column, centred, gap 40px, padding 60px 20px
header .framer-xvljaq column, centred, gap 10px
H1 preset tofpkq 32/600, lh 1.2em, #000, centred (30 mobile)
H2 preset cwtaui 18/400, lh 1.2em, #00000080, centred
(16 tablet, 14 mobile), 2px between the lines
row .framer-kcxdy6 row, align centre, gap 20px, padding 0
logo .framer-1lmv144 width 207px, aspect-ratio 3.35035
C-094: the row is a Framer Ticker (li.ticker-item) and Greg confirmed it
should autoscroll full-bleed with the logos repeating. Built as a cloned
track: js/dra-brands.js moves the six Elementor image widgets into a
.dra-marquee-group, clones that group until the track is wider than the
viewport, and shifts the track by exactly ONE group + one gap. Because
every group is identical, the loop point is invisible.
The shift distance and duration are set as custom properties by the JS -
they depend on the measured group width, which CSS cannot know.
Classes hang off WIDGETS. _css_classes does not render on Elementor
containers in this build (C-084), so the row is reached with
:has(> .dra-marquee-track), and pre-JS with :has(> .dra-brand).
============================================================== */
body.wp-child-theme-shoptimizer-child .dra-brands-title .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:clamp(22px,2.2vw,32px);
font-weight:600;
line-height:1.2;
color:#000;
text-align:center;
margin:0;
}
body.wp-child-theme-shoptimizer-child .dra-brands-sub .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:clamp(14px,1.1vw,18px);
font-weight:400;
line-height:1.2;
color:rgba(0,0,0,.5);
text-align:center;
margin:0;
}
body.wp-child-theme-shoptimizer-child .dra-brands-title,
body.wp-child-theme-shoptimizer-child .dra-brands-sub{
padding-inline:clamp(16px,3.125vw,80px);
width:100%;
}
/* Elementor zeroes widget margin-block-end at
.e-con .elementor-widget.elementor-widget (0,3,0), and a logical property
beats a physical margin-bottom, so the stack is spaced with margin-TOP,
which nothing overrides. The container's own 20px flex gap is zeroed so
the margins are the only thing setting these distances. */
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-brands-title){ gap:0; }
body.wp-child-theme-shoptimizer-child .e-con > .dra-brands-title.elementor-widget{ margin:0; }
body.wp-child-theme-shoptimizer-child .e-con > .dra-brands-sub.elementor-widget{ margin:10px 0 0; }
body.wp-child-theme-shoptimizer-child .e-con > .dra-brands-sub.elementor-widget + .dra-brands-sub{ margin-top:2px; }
/* ---- the logo row: full bleed, edge to edge ----
No inline padding here, unlike the headings - Greg asked for the strip to
run the full width of the screen. overflow is CLIP not HIDDEN: hidden on
one axis forces the other to auto and makes a scroll container (C-088).
flex-wrap is forced to NOWRAP: Elementor's own container setting is wrap,
and before the JS builds the track the six fixed-width logos wrapped onto
two lines at anything under ~1382px, then snapped to one line when the
track was built - a 67px height jump. Pre-JS and post-JS are now the same
height by construction. */
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-brand),
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-marquee-track){
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
justify-content:flex-start;
gap:20px;
width:100%;
max-width:none;
padding-inline:0;
margin-top:40px;
overflow:clip;
}
/* ---- the moving track ---- */
body.wp-child-theme-shoptimizer-child .dra-marquee-track{
display:flex;
flex-direction:row;
align-items:center;
gap:20px;
width:max-content;
flex:0 0 auto;
will-change:transform;
animation:dra-marquee var(--dra-marquee-duration,14s) linear infinite;
}
body.wp-child-theme-shoptimizer-child .dra-marquee-group{
display:flex;
flex-direction:row;
align-items:center;
gap:20px;
flex:0 0 auto;
}
@keyframes dra-marquee{
from{ transform:translate3d(0,0,0); }
to{ transform:translate3d(var(--dra-marquee-shift,-1362px),0,0); }
}
/* ---- each logo, fixed at the prototype's 207px at every width ----
The prototype holds one row at every breakpoint and lets the ticker carry
the overflow, so there is no wrap to build here. .elementor.elementor
.e-con > .elementor-widget sets max-width:100% at 0,4,0, so the cap needs
0,4,1 to land - the first pass shipped at 0,2,1 and the logos rendered
381px wide instead of 207px. */
body.wp-child-theme-shoptimizer-child .e-con > .dra-brand.elementor-widget,
body.wp-child-theme-shoptimizer-child .dra-marquee-group > .dra-brand{
flex:0 0 207px;
width:207px;
max-width:207px;
min-width:0;
}
body.wp-child-theme-shoptimizer-child .dra-brand .elementor-widget-container{
line-height:0;
}
body.wp-child-theme-shoptimizer-child .dra-brand img{
display:block;
width:100%;
max-width:207px;
height:auto;
margin-inline:auto;
aspect-ratio:2362 / 705;
object-fit:contain;
}
/* ---- a moving strip is decoration; anyone who has asked their OS to stop
animation gets the static row instead ---- */
@media (prefers-reduced-motion: reduce){
body.wp-child-theme-shoptimizer-child .dra-marquee-track{
animation:none;
}
}
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-brand),
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-marquee-track){
margin-top:32px;
}
}
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-brand),
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-marquee-track){
margin-top:28px;
}
}
/* ==============================================================
C-096 - Mobile pass, and the section type scale corrected
Greg: "make it mobile friendly and design to match the framer",
with the prototype's own mobile New in Stock and Bestsellers attached.
============================================================== */
/* ---- 1. Section headings now use the prototype's OWN numbers ----
Supersedes the vw clamps introduced at C-084. Framer's text presets are
fixed per breakpoint, not fluid: H1 32 / 32 / 30, H2 18 / 16 / 14.
The clamps were under-sizing at BOTH ends - measured 27.7px at a 1280
desktop and 22px at 390, against the prototype's 32 and 30. This is a
sitewide correction, not a Bestsellers one, so every section heading
moves together rather than one drifting away from the rest. */
body.wp-child-theme-shoptimizer-child .dra-cats-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-rev-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-blog-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-sec-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-new-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-brands-title .elementor-heading-title{
font-size:32px;
}
body.wp-child-theme-shoptimizer-child .dra-cats-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-rev-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-blog-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-sec-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-new-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-brands-sub .elementor-heading-title{
font-size:18px;
}
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .dra-cats-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-rev-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-blog-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-sec-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-new-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-brands-sub .elementor-heading-title{
font-size:16px;
}
}
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-cats-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-rev-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-blog-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-sec-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-new-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-brands-title .elementor-heading-title{
font-size:30px;
}
body.wp-child-theme-shoptimizer-child .dra-cats-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-rev-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-blog-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-sec-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-new-sub .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-brands-sub .elementor-heading-title{
font-size:14px;
}
}
/* ---- 2. Bestsellers gains the sub-heading the prototype has ----
"Find out the best products we offer." - read out of the prototype's own
markup, not transcribed from the screenshot. Same spacing rule as the
other sections: container gap zeroed, margins do the work (C-093). */
body.wp-child-theme-shoptimizer-child .dra-sec-title .elementor-heading-title{
color:#000;
text-align:center;
margin:0;
}
body.wp-child-theme-shoptimizer-child .dra-sec-sub .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-weight:400;
line-height:1.2;
color:rgba(0,0,0,.5);
text-align:center;
margin:0;
}
body.wp-child-theme-shoptimizer-child .dra-sec-title,
body.wp-child-theme-shoptimizer-child .dra-sec-sub{
padding-inline:clamp(16px,3.125vw,80px);
width:100%;
}
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-sec-title){ gap:0; }
body.wp-child-theme-shoptimizer-child .e-con > .dra-sec-sub.elementor-widget{ margin:10px 0 0; }
body.wp-child-theme-shoptimizer-child .e-con > .dra-loop-full.elementor-widget,
body.wp-child-theme-shoptimizer-child .e-con > .dra-loop-mob.elementor-widget{ margin:32px 0 0; }
/* ---- 3. New in Stock: centred header once the row has stacked ----
Below 1024 the sticky column is already static and full width (C-092).
The prototype centres the heading and the two-line sub over the grid, so
the text follows the layout rather than staying left over a centred grid. */
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .dra-new-title .elementor-heading-title,
body.wp-child-theme-shoptimizer-child .dra-new-sub .elementor-heading-title{
text-align:center;
}
body.wp-child-theme-shoptimizer-child .dra-new-title .elementor-heading-title{
margin:0 0 10px;
}
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-new-title){
align-items:center;
}
}
/* ---- 4. Bestsellers is a CAROUSEL on mobile ----
The prototype shows one card with the next peeking and bullets below.
Built with Elementor's own loop-carousel on the SAME loop template (47310)
so there is one card design, not two. The grid is hidden below 768 and the
carousel is hidden above it - one of them renders, never both.
.elementor-loop-container is the swiper-wrapper here, so the 48px row gap
the grid uses would shift every slide out of position. It is zeroed. */
body.wp-child-theme-shoptimizer-child .dra-loop-mob{
padding-inline:clamp(16px,3.125vw,80px);
}
body.wp-child-theme-shoptimizer-child .dra-loop-mob .elementor-loop-container{
gap:0 !important;
display:flex !important;
}
/* The swiper KEEPS its own overflow:hidden. The first pass opened it up
and used clip-path for the peek - clip-path clips PAINT, not layout, so
the off-screen slides went on contributing to the document width and the
page gained 1251px of horizontal scroll at 390. The peek comes from
Elementor's own offset_sides / offset_width instead, which narrows the
slide so the next one shows inside the clipped area. */
/* Elementor centres the bullets by absolute-positioning them at left:50%
and pulling them back with a transform. Taking them out of absolute flow
leaves both behind - the transform then shifts a shrink-to-fit 52px strip
26px to the LEFT of the padding edge, which is where the dots were.
width:100% and transform:none put them back under the middle of the card. */
body.wp-child-theme-shoptimizer-child .dra-loop-mob .swiper-pagination{
position:static;
left:auto;
right:auto;
transform:none;
width:100%;
margin-top:20px;
display:flex;
justify-content:center;
align-items:center;
gap:8px;
}
body.wp-child-theme-shoptimizer-child .dra-loop-mob .swiper-pagination-bullet{
width:7px;
height:7px;
margin:0 !important;
background:#C9C9C9;
opacity:1;
border-radius:50%;
transition:background .2s ease;
}
body.wp-child-theme-shoptimizer-child .dra-loop-mob .swiper-pagination-bullet-active{
background:#4A4A4A;
}
/* ---- 5. Mobile card sizing ----
Two across at 390 leaves ~169px per card, so the card text steps down a
notch. The image keeps the 589/676 ratio it has everywhere else. */
@media (max-width:767px){
body.wp-child-theme-shoptimizer-child .dra-loop-new .elementor-loop-container{
gap:24px 10px !important;
}
body.wp-child-theme-shoptimizer-child .dra-loop .dra-card-title .elementor-heading-title{
font-size:13px !important;
}
body.wp-child-theme-shoptimizer-child .dra-loop .dra-card-desc{
font-size:11px !important;
}
}
/* ---- 6. The language switcher, on mobile ----
GTranslate's floating switcher is position:fixed at its own default
top:20px, and at 390 that put a 122 x 52 pill straight on top of the
BASKET and the MENU BUTTON. The offset itself is owned by the Customizer
Additional CSS (post 47283) - C-056 established that, because a rule
printed inline in after the enqueued stylesheets was beating
everything written here - so the max-width:1024px rule went there, not
in this file: top 20px -> 78px, clear of a 63px header.
What DOES belong here is the coupling to our own drawer: the pill would
otherwise sit on the drawer's search field. #dra-mob.is-open is our
class, so this rule is ours to own.
Measured, not assumed: pill 233-355 x 78-130, burger 313-351 x 12-50,
basket 238-313 x 17-45 - no intersection with either. */
/* The drawer is raised ABOVE the switcher rather than the switcher being
hidden. The first attempt was
body...:has(#dra-mob.is-open) #gt_float_wrapper{opacity:0}
and it did not work - the rule was in the CSSOM with opacity:0 and
gt.matches(selector) returned TRUE, yet getComputedStyle still said 1.
Chrome did not re-run the cascade for the descendant when the :has()
subject was . Rather than fight a style-invalidation quirk, the
drawer (fixed, opaque white, full width, z 9995) simply goes above
GTranslate's 999999 and covers it. No JS, no :has(), nothing to break. */
body.wp-child-theme-shoptimizer-child #dra-mob{
z-index:1000000;
}
/* ==============================================================
C-097 - Category archive: Dermal Fillers, with the filter rail
Elementor product-archive template 47337 + [dra_filter_rail].
Container classes still do not render (C-084), so the two columns
are reached through :has() on the widget classes inside them.
============================================================== */
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-arc-title),
body.wp-child-theme-shoptimizer-child .e-con:has(> .e-con > .dra-rail){
padding-inline:clamp(16px,3.125vw,80px);
width:100%;
}
body.wp-child-theme-shoptimizer-child .dra-arc-title .elementor-heading-title{
font-family:'Google Sans Flex',system-ui,sans-serif;
font-size:30px; font-weight:700; line-height:1.2; color:#000; margin:0;
}
body.wp-child-theme-shoptimizer-child .dra-sort{
display:flex; align-items:center; gap:8px; white-space:nowrap;
}
body.wp-child-theme-shoptimizer-child .dra-sort-lbl{ font-size:14px; color:rgba(0,0,0,.5); }
body.wp-child-theme-shoptimizer-child .dra-sort form,
body.wp-child-theme-shoptimizer-child .dra-sort .woocommerce-ordering{ margin:0; }
body.wp-child-theme-shoptimizer-child .dra-sort select{
border:0 !important; background:transparent !important; padding:0 18px 0 0 !important;
font-size:14px !important; font-weight:500 !important; color:#000 !important;
height:auto !important; min-height:0 !important; box-shadow:none !important;
}
/* ---- the two columns ---- */
body.wp-child-theme-shoptimizer-child .e-con:has(> .e-con > .dra-rail){
display:flex; flex-direction:row; flex-wrap:nowrap;
align-items:flex-start; gap:0 40px; margin-top:22px;
border-top:1px solid rgba(0,0,0,.12); padding-top:22px;
}
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-rail){
flex:0 0 250px; width:250px !important; max-width:250px;
}
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-arc-grid){
flex:1 1 auto; width:auto !important; min-width:0;
}
/* ---- the rail ---- */
body.wp-child-theme-shoptimizer-child .dra-f-group{ border-bottom:1px solid rgba(0,0,0,.12); }
body.wp-child-theme-shoptimizer-child .dra-f-group > summary{
display:flex; align-items:center; justify-content:space-between;
padding:14px 0; cursor:pointer; list-style:none;
font-size:15px; font-weight:500; color:#000;
}
body.wp-child-theme-shoptimizer-child .dra-f-group > summary::-webkit-details-marker{ display:none; }
body.wp-child-theme-shoptimizer-child .dra-f-ind{
position:relative; width:12px; height:12px; flex:0 0 12px;
}
body.wp-child-theme-shoptimizer-child .dra-f-ind::before,
body.wp-child-theme-shoptimizer-child .dra-f-ind::after{
content:''; position:absolute; background:#000; transition:opacity .15s ease;
}
body.wp-child-theme-shoptimizer-child .dra-f-ind::before{ left:0; top:5.5px; width:12px; height:1px; }
body.wp-child-theme-shoptimizer-child .dra-f-ind::after{ top:0; left:5.5px; width:1px; height:12px; }
body.wp-child-theme-shoptimizer-child .dra-f-group[open] .dra-f-ind::after{ opacity:0; }
body.wp-child-theme-shoptimizer-child .dra-f-list{ list-style:none; margin:0; padding:0 0 14px; }
body.wp-child-theme-shoptimizer-child .dra-f-opt{
display:flex; align-items:center; gap:10px; padding:6px 0;
text-decoration:none; color:#000; font-size:14px;
}
body.wp-child-theme-shoptimizer-child .dra-f-box{
width:16px; height:16px; flex:0 0 16px; border:1px solid rgba(0,0,0,.35);
border-radius:2px; position:relative;
}
body.wp-child-theme-shoptimizer-child .dra-f-opt.is-on .dra-f-box{
background:#EC0080; border-color:#EC0080;
}
body.wp-child-theme-shoptimizer-child .dra-f-opt.is-on .dra-f-box::after{
content:''; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px;
border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
body.wp-child-theme-shoptimizer-child .dra-f-lbl{ flex:1 1 auto; }
body.wp-child-theme-shoptimizer-child .dra-f-n{ color:rgba(0,0,0,.4); font-size:13px; }
body.wp-child-theme-shoptimizer-child .dra-f-opt:hover .dra-f-lbl{ color:#EC0080; }
/* ---- breadcrumb + grid ---- */
body.wp-child-theme-shoptimizer-child .dra-arc-crumb{ font-size:13px; color:rgba(0,0,0,.5); margin-bottom:18px; }
body.wp-child-theme-shoptimizer-child .dra-arc-crumb a{ color:rgba(0,0,0,.5); text-decoration:none; }
body.wp-child-theme-shoptimizer-child .dra-arc-grid .elementor-loop-container{ gap:40px 10px !important; }
@media (max-width:1024px){
body.wp-child-theme-shoptimizer-child .e-con:has(> .e-con > .dra-rail){ flex-wrap:wrap; gap:0; }
body.wp-child-theme-shoptimizer-child .e-con:has(> .dra-rail){ flex:0 0 100%; width:100% !important; max-width:none; margin-bottom:24px; }
}
/* ==============================================================
C-098 - the filter rail becomes usable
Real inside a