/* Velmora accessibility layer. Loaded last on the front end. */

/* 1. Colour contrast (text must reach 4.5:1; large text 3:1) */
.niche-index{color:#666}
.niche-card .niche-card-body p,.stat span{color:#595959}
.promo-grid article>strong,.service-grid strong{opacity:1}
.vm-checkout-steps span:not(.is-active){opacity:1;color:#5c5c5c}
/* WooCommerce ships an olive default (#958e09) for prices and sale badges; use the theme ink instead */
html .woocommerce span.onsale,html .woocommerce ul.products li.product .onsale{background:#171717;color:#fff}
html .woocommerce ul.products li.product .price,html .woocommerce-page ul.products li.product .price,html .woocommerce div.product p.price,html .woocommerce div.product span.price,html .woocommerce .price,.vm-loop-el-price .price{color:inherit}
html .woocommerce ul.products li.product .price del,html .woocommerce-page ul.products li.product .price del,html .woocommerce div.product p.price del,html .woocommerce div.product span.price del,.price del{color:inherit;opacity:.75}
.price ins{text-decoration:none}

/* 2. Visible keyboard focus (WCAG 2.4.7 / 2.4.11) */
html .vm-header-search input:focus-visible,html .vm-header-search input[type=search]:focus-visible{outline:3px solid currentColor;outline-offset:2px}
html a:focus-visible,html button:focus-visible,html select:focus-visible,html textarea:focus-visible,html input:focus-visible,html [tabindex]:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* 3. Touch targets of at least 24 x 24 CSS px (WCAG 2.5.8) */
.velmora-demo-dots{gap:0;align-items:center}
.velmora-demo-dots button[data-dot]{position:relative;width:24px;height:24px;background:none}
.velmora-demo-dots button[data-dot]::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:99px;transform:translate(-50%,-50%);background:rgba(255,255,255,.55);transition:width .25s,background .25s}
.velmora-demo-dots button[data-dot].is-active{width:40px;background:none}
.velmora-demo-dots button[data-dot].is-active::before{width:28px;background:#fff}
.velmora-demo-dots button.velmora-demo-pause{width:24px;height:24px;margin-left:8px;padding:0;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:transparent;color:#fff;font-size:9px;line-height:1;cursor:pointer}
.velmora-demo-pause:focus-visible{outline:3px solid #fff;outline-offset:2px}
.woocommerce form .show-password-input,.woocommerce-page form .show-password-input{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}

/* 4. Respect the visitor's motion setting (WCAG 2.2.2 / 2.3.3) */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* 5. Keep keyboard focus clear of the sticky header and the fixed add-to-cart bar (WCAG 2.4.11) */
html{scroll-padding-top:130px;scroll-padding-bottom:100px}

/* 6. Reflow at 320 CSS px without sideways scrolling (WCAG 1.4.10) */
@media(max-width:420px){.vm-language-switcher select{width:64px;max-width:64px;text-overflow:ellipsis}.vm-header-brand,.vm-header-brand img{max-width:112px;height:auto}}
@media(max-width:780px){.velmora-niche-mega-links{flex-wrap:wrap}.velmora-niche-mega .vm-menu-item{max-width:100%}}
.velmora-product-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.velmora-product-actions button,.velmora-product-actions a{min-width:0;overflow-wrap:anywhere}
textarea{max-width:100%;box-sizing:border-box}
.master-slider-parent,.ms-container{max-width:100%;overflow:hidden}
@media(max-width:780px){.velmora-niche-mega .vm-mega-panel{position:fixed;left:14px;right:14px;width:auto;max-width:none;transform:none}}

/* 7. Demo-page details found by the 10-demo audit */
html .store-demo .category-row>b,html .category-row>b{color:inherit;opacity:.68}
html .store-demo .hv-cats>strong,html .hv-cats>strong{color:inherit;opacity:.72}
/* Prime Slider (free plugin shown in some demos): label and slide counter were light grey on white */
html .bdt-social-share-title,html .bdt-ps-dotnav>span,.bdt-ps-dotnav>span[aria-hidden]{color:#595959!important}

/* 8. Footer presets stack on phones */
@media(max-width:640px){.site-footer .vm-footer-main{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}.site-footer .vm-footer-main>*{min-width:0}.vm-footer-newsletter-form{display:flex;flex-wrap:wrap;gap:8px}.vm-footer-newsletter-form input{flex:1 1 180px;min-width:0;max-width:100%}}

/* 9. Long words in demo headings wrap instead of widening the page on small phones */
.store-demo h1,.store-demo h2,.store-demo h3{overflow-wrap:break-word;hyphens:auto}
@media(max-width:360px){.store-demo h2{font-size:clamp(1.45rem,8vw,2rem);letter-spacing:-.01em}}

/* 10. Editorial header: readable tagline and 24px link targets */
.vm-header-editorial-mark>span{opacity:1}
.vm-header-editorial .main-nav a,.vm-header-editorial .menu a,.vm-header-editorial li.menu-item>a,header.vm-header li.menu-item>a{display:inline-flex;align-items:center;min-height:24px}
.vm-header-editorial .vm-header-row>*{min-width:0}
.vm-header-editorial .primary-menu{flex-wrap:wrap;row-gap:2px}
@media(max-width:1360px){.vm-header-editorial .vm-header-row{grid-template-columns:auto 1fr auto;gap:16px}.vm-header-editorial-actions .vm-header-search{min-width:150px;max-width:200px}}

/* Block-editor (Gutenberg) demo markup: keep the same contrast as the classic markup. */
.cta-panel .eyebrow{color:#171717;background:#fff}
.promo-grid article strong,.service-grid strong{opacity:1}
.stage-mini small{color:#666}

/* Inner pages: body text inside the dark call-to-action panel. */
body .cta-panel.cta-panel p:not(.eyebrow){color:#cfcfcf}
body .cta-panel.cta-panel .btn-secondary{color:#171717}