/* Yashvi Products & Brands — colours come from Products → Page Settings */ :root{--yh-accent:#ed6e31;--yh-bg:#0c1113;--yh-surface:#141b1e;--yh-surface-2:#1b2428;--yh-pill:#293134;--yh-line:rgba(255,255,255,.10);--yh-text:#fff;--yh-body:#cfd5d8;--yh-muted:#9aa4a9;--yh-banner-bg:transparent;--yh-hl:#ed6e31;--yh-radius:16px;--yh-header-space:0px;--yh-heading-font:inherit} /* Page background (dark scheme) */ body.yh-body{background-color:var(--yh-bg)} body.yh-scheme-dark{background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(120,150,165,.07) 6%,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 30%,rgba(120,150,165,.05) 36%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 60%,rgba(120,150,165,.06) 66%,rgba(255,255,255,0) 72%,rgba(255,255,255,0) 88%,rgba(120,150,165,.07) 94%,rgba(255,255,255,0) 100%);background-attachment:fixed} .yh-root{--yh-auto-offset:0px;padding-top:calc(var(--yh-auto-offset) + var(--yh-header-space));background:transparent;color:var(--yh-body)} .yh-root *,.yh-root *::before,.yh-root *::after,.yh-brands *,.yh-grid *{box-sizing:border-box} .yh-page{color:var(--yh-body);padding:28px 0 72px} .yh-page.yh-has-banner{padding-top:12px} .yh-wrap{max-width:1240px;margin:0 auto;padding:0 20px} .yh-root h1,.yh-root h2,.yh-root h3,.yh-brands h3{color:var(--yh-text);margin:0;font-family:var(--yh-heading-font)} .yh-root a{color:var(--yh-accent)} .yh-root p{color:inherit} .yh-hl{color:var(--yh-hl)} /* Buttons (pill with arrow circle, like the homepage) */ .yh-actions{display:flex;flex-wrap:wrap;gap:12px} .yh-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:8px 8px 8px 24px;min-height:52px;border-radius:999px;font-weight:600;font-size:16px;line-height:1.2;text-decoration:none!important;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .15s,box-shadow .2s;cursor:pointer;font-family:var(--yh-heading-font)} .yh-btn:hover{transform:translateY(-1px)} .yh-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;flex:0 0 auto;transition:transform .2s} .yh-btn:hover .yh-btn-icon{transform:rotate(45deg)} .yh-btn-primary{background:var(--yh-accent);color:#fff!important} .yh-btn-primary .yh-btn-icon{background:#fff;color:var(--yh-accent)} .yh-btn-primary:hover{box-shadow:0 8px 26px color-mix(in srgb,var(--yh-accent) 40%,transparent)} .yh-btn-outline{background:transparent;color:var(--yh-accent)!important;border-color:var(--yh-accent)} .yh-btn-outline .yh-btn-icon{background:var(--yh-accent);color:#fff} .yh-btn-outline:hover{background:color-mix(in srgb,var(--yh-accent) 12%,transparent)} .yh-btn-ghost{background:var(--yh-pill);color:var(--yh-text)!important;padding-right:24px} .yh-btn-ghost:hover{filter:brightness(1.15)} .yh-btn-sm{min-height:42px;font-size:14px;padding:5px 5px 5px 16px;gap:8px} .yh-btn-sm .yh-btn-icon{width:30px;height:30px} .yh-btn-sm.yh-btn-ghost,.yh-btn-sm.yh-btn-outline:not(:has(.yh-btn-icon)){padding-right:16px} /* Banner */ .yh-banner{background:var(--yh-banner-bg);padding:56px 0 40px;text-align:center} .yh-scheme-light .yh-banner{text-align:left} .yh-banner-eyebrow{display:inline-block;background:var(--yh-pill);color:var(--yh-text);font-size:14px;font-weight:500;padding:8px 18px;border-radius:999px;margin-bottom:18px} .yh-scheme-light .yh-banner-eyebrow{background:rgba(255,255,255,.18);color:#fff} .yh-banner-title{color:var(--yh-text)!important;font-size:clamp(32px,4.6vw,58px);line-height:1.12;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin:0 0 20px!important} .yh-scheme-light .yh-banner-title{color:#fff!important} .yh-banner-crumbs{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;background:var(--yh-pill);padding:9px 18px;border-radius:999px;font-size:14px;font-weight:500;color:var(--yh-text)} .yh-scheme-light .yh-banner-crumbs{background:rgba(255,255,255,.18)} .yh-banner-crumbs a{color:var(--yh-text)!important;text-decoration:none;opacity:.8} .yh-banner-crumbs a:hover{opacity:1;color:var(--yh-accent)!important} .yh-banner-crumbs span{color:var(--yh-text)} .yh-scheme-light .yh-banner-crumbs a,.yh-scheme-light .yh-banner-crumbs span{color:#fff!important} .yh-banner-crumbs [aria-current]{color:var(--yh-accent)} .yh-sep{opacity:.5} /* Small breadcrumb (product page) */ .yh-breadcrumb{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--yh-pill);padding:9px 18px;border-radius:999px;font-size:14px;color:var(--yh-muted);margin:24px 0 28px} .yh-breadcrumb a{text-decoration:none;color:var(--yh-body)!important} .yh-breadcrumb a:hover{color:var(--yh-accent)!important} .yh-breadcrumb [aria-current]{color:var(--yh-accent);font-weight:500} /* Placeholder image */ .yh-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,var(--yh-surface-2),var(--yh-surface));padding:24px} .yh-ph img{max-width:72%;max-height:72%;object-fit:contain;border-radius:8px} .yh-ph-text{font-weight:700;font-size:clamp(18px,2.4vw,28px);color:var(--yh-text);text-align:center;font-family:var(--yh-heading-font)} /* Single product */ .yh-product-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:start} .yh-product-media{border:1px solid var(--yh-line);border-radius:var(--yh-radius);overflow:hidden;background:var(--yh-surface);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:sticky;top:24px;width:100%} .yh-product-media>img{width:100%;height:100%;object-fit:contain;background:#fff} .yh-brand-badge{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border:1px solid var(--yh-line);border-radius:10px;background:var(--yh-surface);color:var(--yh-text)!important;font-weight:700;text-decoration:none;margin-bottom:16px} .yh-brand-badge img{height:36px;width:auto;display:block;border-radius:4px} .yh-product-title{font-size:clamp(26px,3vw,38px);line-height:1.2;font-weight:600;margin-bottom:14px!important} .yh-model{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--yh-pill);border-radius:999px;padding:8px 16px;margin:0 0 18px;font-size:14px} .yh-model span{color:var(--yh-muted)} .yh-model strong{color:var(--yh-text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;word-break:break-all} .yh-excerpt{color:var(--yh-body);font-size:16px;line-height:1.7} .yh-excerpt p{margin:0 0 12px} .yh-spec-table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0 26px;font-size:15px;border:1px solid var(--yh-line);border-radius:12px;overflow:hidden;background:var(--yh-surface)} .yh-spec-table th,.yh-spec-table td{border:0;border-bottom:1px solid var(--yh-line);padding:12px 16px;text-align:left;vertical-align:top;background:transparent} .yh-spec-table tr:last-child th,.yh-spec-table tr:last-child td{border-bottom:0} .yh-spec-table th{width:38%;background:var(--yh-surface-2);font-weight:600;color:var(--yh-text)} .yh-spec-table td{color:var(--yh-body)} .yh-spec-table a{text-decoration:none;color:var(--yh-accent)!important} /* Sections */ .yh-section{margin-top:56px} .yh-section h2{font-size:clamp(22px,2.4vw,30px);font-weight:600;margin-bottom:18px!important} .yh-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px} .yh-section-head h2{margin:0!important} .yh-section-head a{text-decoration:none;font-weight:600;white-space:nowrap} .yh-details .yh-content{line-height:1.75;color:var(--yh-body)} .yh-note{background:var(--yh-surface);border:1px solid var(--yh-line);border-left:4px solid var(--yh-accent);border-radius:12px;padding:16px 20px} .yh-note .yh-content p{margin:0;color:var(--yh-body)} .yh-note strong{color:var(--yh-text)} /* Grids */ .yh-grid{display:grid;gap:22px;grid-template-columns:repeat(var(--yh-cols,3),minmax(0,1fr));margin:22px 0} .yh-cols-1{--yh-cols:1}.yh-cols-2{--yh-cols:2}.yh-cols-3{--yh-cols:3}.yh-cols-4{--yh-cols:4}.yh-cols-5{--yh-cols:5}.yh-cols-6{--yh-cols:6} /* Product cards */ .yh-pcard{display:flex;flex-direction:column;background:var(--yh-surface);border:1px solid var(--yh-line);border-radius:var(--yh-radius);overflow:hidden;transition:box-shadow .25s,transform .25s,border-color .25s} .yh-pcard:hover{border-color:color-mix(in srgb,var(--yh-accent) 55%,transparent);box-shadow:0 14px 34px rgba(0,0,0,.35);transform:translateY(-3px)} .yh-pcard-img{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--yh-surface-2);border-bottom:1px solid var(--yh-line);overflow:hidden} .yh-pcard-img>img{width:100%;height:100%;object-fit:contain;background:#fff} .yh-pcard-body{display:flex;flex-direction:column;gap:8px;padding:18px;flex:1} .yh-pcard-brand{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--yh-accent)} .yh-pcard-title{font-size:17px!important;line-height:1.35;font-weight:600} .yh-pcard-title a{color:var(--yh-text)!important;text-decoration:none} .yh-pcard-title a:hover{color:var(--yh-accent)!important} .yh-pcard-model{font-size:13px;color:var(--yh-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all} .yh-pcard-tags{display:flex;flex-wrap:wrap;gap:6px} .yh-tag{font-size:12px;font-weight:500;padding:5px 11px;border-radius:999px;color:var(--yh-text);background:var(--yh-pill)} .yh-pcard-excerpt{font-size:14px;line-height:1.6;color:var(--yh-body);margin:2px 0 0} .yh-pcard-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px} /* Brand cards (style="cards") */ .yh-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--yh-line);border-radius:var(--yh-radius);background:var(--yh-surface);text-decoration:none;color:var(--yh-text);transition:box-shadow .2s,transform .2s} .yh-card:hover{transform:translateY(-2px)} .yh-card-img{display:flex;align-items:center;justify-content:center;height:120px;background:var(--yh-surface-2);border-radius:10px;overflow:hidden;padding:12px} .yh-card-img img{max-width:100%;max-height:100%;object-fit:contain} .yh-brand-name{font-weight:700;font-size:1.15em;color:var(--yh-text);font-family:var(--yh-heading-font)} .yh-card-title{font-weight:600;color:var(--yh-text)} .yh-card-meta{font-size:.9em;color:var(--yh-muted)} /* Archive intro + chips */ .yh-intro{display:flex;align-items:center;gap:24px;margin:8px 0 26px;padding:22px 24px;background:var(--yh-surface);border:1px solid var(--yh-line);border-radius:var(--yh-radius)} .yh-intro-logo{flex:0 0 auto;width:190px;height:100px;border-radius:10px;background:#fff;padding:10px;display:flex;align-items:center;justify-content:center} .yh-intro-logo img{max-width:100%;max-height:100%;object-fit:contain} .yh-intro .yh-count{margin:0;font-size:18px;font-weight:600;color:var(--yh-text);position:relative;padding-bottom:12px;font-family:var(--yh-heading-font)} .yh-intro .yh-count::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;background:var(--yh-accent);border-radius:2px} .yh-intro-desc{color:var(--yh-body);margin-top:12px;line-height:1.65} .yh-intro-desc p{margin:0} .yh-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6px} .yh-chip{padding:9px 18px;border-radius:999px;background:var(--yh-pill);font-size:14px;font-weight:500;text-decoration:none;color:var(--yh-text)!important;border:1px solid transparent;transition:border-color .2s,background .2s} .yh-chip:hover{border-color:var(--yh-accent)} .yh-chip.is-active{background:var(--yh-accent);color:#fff!important} .yh-empty{text-align:center;border:1px dashed var(--yh-line);border-radius:var(--yh-radius);padding:56px 20px;margin:22px 0;background:var(--yh-surface)} .yh-empty h2{font-size:24px;margin-bottom:10px!important} .yh-empty p{color:var(--yh-muted);margin:0} .yh-pagination{margin:12px 0 0} .yh-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px} .yh-pagination .page-numbers{padding:9px 15px;border-radius:999px;background:var(--yh-pill);color:var(--yh-text)!important;text-decoration:none} .yh-pagination .page-numbers.current{background:var(--yh-accent);color:#fff!important} .yh-pagination .screen-reader-text{position:absolute;left:-9999px} /* Brands page: tabs + logo tiles */ .yh-brands-page .yh-wrap>p,.yh-brands-page .yh-wrap>.wp-block-paragraph{text-align:center;max-width:760px;margin:0 auto 26px;color:var(--yh-body);line-height:1.7} .yh-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:6px 0 36px} .yh-tab{appearance:none;border:1px solid var(--yh-line);background:var(--yh-surface);color:var(--yh-text);font:inherit;font-family:var(--yh-heading-font);font-weight:600;font-size:15px;padding:13px 26px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s} .yh-tab:hover{border-color:var(--yh-accent)} .yh-tab.is-active{background:var(--yh-accent);border-color:var(--yh-accent);color:#fff} .yh-logo-grid{gap:18px} .yh-logo-tile{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:18px;background:var(--yh-surface);border:1px solid var(--yh-line);border-radius:var(--yh-radius);text-decoration:none;transition:box-shadow .25s,transform .25s,border-color .25s} .yh-logo-tile:hover{border-color:var(--yh-accent);box-shadow:0 12px 30px rgba(0,0,0,.35);transform:translateY(-3px)} .yh-logo-tile img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px} .yh-logo-tile .yh-brand-name{font-size:17px;text-align:center} .yh-logo-tile[hidden],.yh-brand-card[hidden]{display:none!important} .yh-scheme-dark .yh-logo-tile{background:linear-gradient(180deg,var(--yh-surface-2),var(--yh-surface))} /* CTA band */ .yh-cta{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;margin-top:64px;padding:32px 34px;border-radius:var(--yh-radius);background:var(--yh-surface);border:1px solid var(--yh-line)} .yh-cta h2{font-size:clamp(22px,2.4vw,30px);font-weight:600;margin:0 0 6px!important;text-transform:uppercase} .yh-cta p{margin:0;color:var(--yh-body)} .yh-scheme-light .yh-cta{background:var(--yh-accent);border-color:var(--yh-accent)} .yh-scheme-light .yh-cta h2,.yh-scheme-light .yh-cta p,.yh-scheme-light .yh-cta .yh-hl{color:#fff!important} .yh-scheme-light .yh-cta .yh-btn-primary{background:#fff;color:var(--yh-accent)!important} .yh-scheme-light .yh-cta .yh-btn-primary .yh-btn-icon{background:var(--yh-accent);color:#fff} .yh-scheme-light .yh-cta .yh-btn-outline{color:#fff!important;border-color:#fff} .yh-scheme-light .yh-cta .yh-btn-outline .yh-btn-icon{background:#fff;color:var(--yh-accent)} /* Focus */ .yh-tab:focus-visible,.yh-logo-tile:focus-visible,.yh-chip:focus-visible,.yh-btn:focus-visible,.yh-pcard a:focus-visible{outline:3px solid var(--yh-accent);outline-offset:3px} /* ============================================================ Theme-proofing: Hello theme + Elementor Site Settings (global heading colours/sizes, button and table styles) must not change these pages. Scoped to plugin markup only. ============================================================ */ .yh-root h1,.yh-root h2,.yh-root h3,.yh-root h4,.yh-brands h3,.yh-grid h3{color:var(--yh-text)!important;font-family:var(--yh-heading-font)!important;text-transform:none!important;letter-spacing:normal!important;margin:0!important;padding:0!important;background:none!important;-webkit-text-fill-color:currentColor!important} .yh-root .yh-banner-title{font-size:clamp(30px,4.4vw,56px)!important;line-height:1.12!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.5px!important;margin:0 0 20px!important} .yh-root.yh-scheme-light .yh-banner-title,.yh-scheme-light .yh-root .yh-banner-title{color:#fff!important} .yh-root .yh-product-title{font-size:clamp(24px,2.6vw,36px)!important;line-height:1.22!important;font-weight:600!important;margin:0 0 14px!important} .yh-root .yh-section h2,.yh-root .yh-section-head h2{font-size:clamp(22px,2.3vw,30px)!important;line-height:1.25!important;font-weight:600!important} .yh-root .yh-section>h2{margin:0 0 18px!important} .yh-root .yh-cta h2{font-size:clamp(22px,2.3vw,30px)!important;line-height:1.2!important;font-weight:600!important;text-transform:uppercase!important;margin:0 0 6px!important} .yh-root .yh-empty h2{font-size:clamp(20px,2vw,24px)!important;margin:0 0 10px!important} .yh-root .yh-pcard-title,.yh-grid .yh-pcard-title{font-size:17px!important;line-height:1.35!important;font-weight:600!important;margin:0!important} .yh-root .yh-pcard-title a,.yh-grid .yh-pcard-title a{color:var(--yh-text)!important;font-size:inherit!important;font-family:inherit!important} .yh-root .yh-pcard-title a:hover,.yh-grid .yh-pcard-title a:hover{color:var(--yh-accent)!important} .yh-root .yh-hl,.yh-root h1 .yh-hl,.yh-root h2 .yh-hl{color:var(--yh-hl)!important;-webkit-text-fill-color:currentColor!important} .yh-root .yh-intro .yh-count{color:var(--yh-text)!important;font-family:var(--yh-heading-font)!important} .yh-root p,.yh-brands p{margin-block-start:0} .yh-root .yh-excerpt p,.yh-root .yh-intro-desc p,.yh-root .yh-note p,.yh-root .yh-cta p{color:var(--yh-body)!important} .yh-root .yh-cta p{margin:0!important} .yh-root .yh-note strong{color:var(--yh-text)!important} /* Long model numbers / titles wrap instead of overflowing */ .yh-root .yh-banner-title,.yh-root .yh-product-title,.yh-root .yh-pcard-title,.yh-grid .yh-pcard-title,.yh-root .yh-breadcrumb,.yh-root .yh-spec-table td,.yh-root .yh-cta h2{overflow-wrap:anywhere!important;word-break:normal!important;hyphens:none} .yh-root .yh-model strong,.yh-root .yh-pcard-model,.yh-grid .yh-pcard-model{overflow-wrap:anywhere!important;word-break:break-all} .yh-root .yh-product-top>*,.yh-root .yh-grid>*,.yh-grid>*{min-width:0} /* Buttons & tabs (Hello/Elementor style every