/* Settings Variables */ .ed_breadcrumbs-section#ed_section-product__om_breadcrumbs_gcmaCT { --breadcrumbs-alignment: start; --breadcrumbs-text-color: #000000; --breadcrumbs-font-size: 13px; --breadcrumbs-font-case: default; --breadcrumbs-font-weight: normal; --padding-left: 40px; --padding-right: 20px; --padding-top: 12px; --padding-bottom: 0px; --padding-left-mobile: 20px; --padding-right-mobile: 20px; --padding-top-mobile: 0px; --padding-bottom-mobile: 0px; --max-width: none; } /* Section */ .ed_breadcrumbs-section { padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); padding-left: var(--padding-left); padding-right: var(--padding-right); color: var(--breadcrumbs-text-color); } .ed_breadcrumbs-section * { color: var(--breadcrumbs-text-color); } @media (max-width: 767px) { .ed_breadcrumbs-section { padding-left: var(--padding-left-mobile); padding-right: var(--padding-right-mobile); padding-top: var(--padding-top-mobile); padding-bottom: var(--padding-bottom-mobile); } } /* Nav */ nav.ed_breadcrumbs { margin: 0 auto; max-width: var(--max-width); } /* List items */ .ed_breadcrumbs-list { list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: var(--breadcrumbs-alignment); } .ed_breadcrumbs-list li { display: inline-flex; align-items: center; } /* Arrows */ .ed_breadcrumbs-list.arrows li:not(:last-child):after { border-style: solid; border-width: .10em .10em 0 0; content: ''; display: inline-block; height: .4em; width: .4em; margin: 0 .4em; position: relative; transform: rotate(45deg); vertical-align: middle; font-size: calc(var(--breadcrumbs-font-size) + 2px); /* top: -0.1em; */ } [dir="rtl"] .ed_breadcrumbs-list.arrows li:not(:last-child):after { transform: rotate(220deg); } .ed_breadcrumbs-list.slashes li:not(:last-child):after { content: '/'; margin: 0 .4em; font-size: var(--breadcrumbs-font-size); } /* Links */ .ed_breadcrumbs-list a, .ed_breadcrumbs-list [aria-current="page"] { color: inherit; text-decoration: none; font-size: var(--breadcrumbs-font-size); font-weight: var(--breadcrumbs-font-weight); text-transform: var(--breadcrumbs-font-case); } .ed_breadcrumbs-list a:hover, .ed_breadcrumbs-list a:focus { text-decoration: underline; } .gvbis{margin:18px 0 4px;padding:18px 20px;background:#f7f7f7;border:1px solid rgba(0,0,0,.1);border-left:4px solid #FF8B00;border-radius:8px;color:#111;font-family:var(--element-text-font-family--body),var(--element-text-font-family-fallback--body,sans-serif)} .gvbis button,.gvbis input{font-family:inherit;letter-spacing:inherit} /* ⚠️ [hidden] MUST WIN over the author display rules below — an author `display` beats the UA sheet's `[hidden]{display:none}`, and without this the confirmation renders alongside the live form instead of replacing it. */ .gvbis [hidden]{display:none !important} .gvbis__title{font-size:1.15rem;font-weight:700;line-height:1.25} .gvbis__sub{margin:6px 0 14px;font-size:.95rem;line-height:1.5;color:#4a4a4a} .gvbis__form{display:flex;flex-wrap:wrap;align-items:center;gap:10px} /* ⚠️ !important IS LOAD-BEARING, NOT LAZINESS. The theme ships a global `input[type="text"], input[type="email"], … , input { background:#f7f7f7 !important }` which beat this rule, so the field computed to rgb(247,247,247) — the EXACT colour of the .gvbis panel behind it — and the input visually disappeared into the callout. Measured live 2026-09-03: input bg === panel bg. Scoped to this one field on purpose; do not widen it. */ /* ⚠️⚠️ SELECTOR SPECIFICITY, NOT JUST !important. The theme's global rule is `input[type="text"], input[type="email"], … { background:#f7f7f7 !important }`. For this field the matching half is `input[type="email"]` = (0,1,1); a bare `.gvbis__email` is only (0,1,0), so when BOTH carry !important the THEME still wins and the field stayed rgb(247,247,247) — the exact colour of the panel behind it. Measured on the live page after a first fix that added !important alone and changed nothing. `.gvbis input.gvbis__email` is (0,2,1) and wins. ⛔ Do not "simplify" this back to a single class. */ .gvbis input.gvbis__email{flex:1 1 240px;min-width:0;min-height:46px;padding:10px 14px;border:1px solid rgba(0,0,0,.28) !important;border-radius:6px;background:#fff !important;color:#111;font-size:16px} .gvbis__submit{flex:0 0 auto;min-height:46px;padding:12px 28px;border:0;border-radius:6px;background:#FF8B00;color:#fff;font-weight:700;font-size:1rem;line-height:1.1;cursor:pointer;transition:background-color .18s ease} .gvbis__submit:hover:not([disabled]){background:#111} .gvbis__submit[disabled]{opacity:.55;cursor:not-allowed} /* Last in the DOM and given the whole flex line: interaction-only means the widget is zero-height for a shopper Cloudflare is happy with, so the field and the button share the first line, and a real challenge drops in underneath instead of squashing them. */ .gvbis__turnstile{flex:1 1 100%} .gvbis__msg{margin-top:10px;font-size:.95rem;line-height:1.5;font-weight:600;color:#b3261e} .gvbis__msg:empty{display:none} .gvbis__done{display:flex;gap:12px;align-items:flex-start} .gvbis__check{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#2e7d32;display:flex;align-items:center;justify-content:center} .gvbis__check svg{width:17px;height:17px;display:block} .gvbis__done-title{font-size:1.05rem;font-weight:700;line-height:1.25} .gvbis__done-sub{margin-top:4px;font-size:.95rem;line-height:1.5;color:#4a4a4a} .gvbis__done-email{color:#111;font-weight:700;word-break:break-word} /* hide the Easy Wholesale bulk widget on products using our widget */ [id^="nm-wholesale-table-container"]{display:none !important;} /* Fix: on these widget pages the cart drawer form's inline display:none isn't cleared when the drawer opens (it is on normal pages), leaving the drawer empty. Force it visible unless the cart is empty. */ .cart-drawer:not(.is-empty) .cart__drawer-form{display:flex !important;} /* Use the theme's body font everywhere, and force form controls (button/input) to inherit it — by default