/**
 * AI Search Box block styles.
 *
 * Two rules govern this file:
 *
 * 1. Colour comes from the theme. Every visible colour is either the
 *    theme's own custom property or a translucent grey that adapts to
 *    whatever sits behind it, so the box never looks imported from
 *    another site - and dark themes work without a media query.
 * 2. Only structure and state live here. No decorative flourishes that
 *    would fight the theme's own visual language.
 */

/* Tokens: one place to retune the whole block, and the fallbacks keep
   classic (non block) themes looking deliberate rather than unstyled. */
.ai-search-box,
.ai-search-overlay{--ais-surface:var( --wp--preset--color--base, #fff );--ais-ink:var( --wp--preset--color--contrast, #1e1e1e );--ais-line:rgba( 127, 127, 127, 0.22 );--ais-hover:rgba( 127, 127, 127, 0.1 );--ais-accent:var( --wp--preset--color--primary, var( --wp--preset--color--contrast, #1e1e1e ) );--ais-radius:var( --wp--custom--radius, 6px );}
.ai-search-box{position:relative;display:flex;flex-direction:column;max-width:100%;}
.ai-search-box__form{position:relative;display:flex;gap:8px;}
.ai-search-box__input{flex:1;min-width:0;padding:0.7em 1em;font-family:inherit;font-size:inherit;line-height:1.4;color:var( --ais-ink );background:var( --ais-surface );border:1px solid rgba( 127, 127, 127, 0.45 );border-radius:var( --ais-radius );}
.ai-search-box__input:focus{outline:2px solid var( --ais-accent );outline-offset:1px;}
.ai-search-box__submit{padding:0.7em 1.4em;font-family:inherit;font-size:inherit;font-weight:500;color:var( --ais-surface );background:var( --ais-ink );border:none;border-radius:var( --ais-radius );cursor:pointer;}
.ai-search-box__submit:hover{opacity:0.85;}
/* ---------------------------------------------------------------- *
 * Dropdown
 * ---------------------------------------------------------------- */

/* Anchored to the form row, not the block, so it lines up with the
   input instead of stretching under the submit button. */
.ai-search-box__results{position:absolute;z-index:50;top:calc( 100% + 6px );left:0;right:0;max-height:min( 60vh, 420px );overflow-y:auto;overscroll-behavior:contain;padding:4px;color:var( --ais-ink );background:var( --ais-surface );border:1px solid var( --ais-line );border-radius:var( --ais-radius );box-shadow:0 12px 32px rgba( 0, 0, 0, 0.14 );animation:ai-search-box-in 120ms ease-out;}
@keyframes ai-search-box-in {
	from{opacity:0;transform:translateY( -4px );}
}

@media ( prefers-reduced-motion: reduce ) {
	.ai-search-box__results{animation:none;}
}

/* ---------------------------------------------------------------- *
 * Result rows - one line per product
 * ---------------------------------------------------------------- */

.ai-search-box__item{display:flex;align-items:center;gap:12px;padding:8px 10px;line-height:1.35;color:inherit;text-decoration:none;border-radius:calc( var( --ais-radius ) - 2px );transition:background-color 100ms ease;}
/* Hairlines between rows read as a list. Not on the first row, and not
   on one that follows a group label - the label draws its own rule, and
   two lines a few pixels apart look like a mistake. */
.ai-search-box__item + .ai-search-box__item{box-shadow:inset 0 1px 0 var( --ais-line );}
.ai-search-box__group + .ai-search-box__item{box-shadow:none;}
.ai-search-box__item:hover,
.ai-search-box__item.is-active{background:var( --ais-hover );box-shadow:none;text-decoration:none;}
/* A row is never focused directly (focus stays in the input, per the
   combobox pattern) but keyboard users still need the active row to be
   unmistakable, not just slightly tinted. */
.ai-search-box__item.is-active{outline:2px solid var( --ais-accent );outline-offset:-2px;}
.ai-search-box__thumb{width:40px;height:40px;flex-shrink:0;object-fit:cover;border-radius:4px;background:var( --ais-hover );box-shadow:inset 0 0 0 1px var( --ais-line );}
.ai-search-box__title{flex:1;min-width:0;overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis;}
.ai-search-box__meta{display:flex;flex-shrink:0;align-items:center;gap:8px;}
.ai-search-box__price{font-size:0.92em;opacity:0.75;white-space:nowrap;}
/* Woo wraps sale prices in <del>/<ins>; keep them on the one line. */
.ai-search-box__price del{margin-right:4px;opacity:0.6;}
.ai-search-box__price ins{text-decoration:none;}
/* ---------------------------------------------------------------- *
 * Section label + tier badges (editors only)
 * ---------------------------------------------------------------- */

.ai-search-box__group{margin:6px 0 2px;padding:4px 10px 0;font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;opacity:0.55;border-top:1px solid var( --ais-line );}
.ai-search-box__group:first-child{border-top:none;margin-top:0;}
.ai-search-box__tier{padding:0.12rem 0.45rem;font-size:0.62rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#fff;border-radius:999px;}
.ai-search-box__tier--exact{background:#157a52;}
.ai-search-box__tier--keyword{background:#0a4b78;}
.ai-search-box__tier--ai{background:#372696;}
/* ---------------------------------------------------------------- *
 * Footer + empty state
 * ---------------------------------------------------------------- */

.ai-search-box__all{display:block;margin-top:4px;padding:11px 10px;font-size:0.9em;font-weight:600;text-align:center;color:inherit;border-top:1px solid var( --ais-line );border-radius:0 0 calc( var( --ais-radius ) - 2px ) calc( var( --ais-radius ) - 2px );}
.ai-search-box__all:hover{background:var( --ais-hover );}
.ai-search-box__empty{margin:0;padding:18px 14px;font-size:0.95em;text-align:center;opacity:0.65;}
.vvp-ot{display:block;margin:0;padding:0;border:0!important;border-radius:0!important;background:transparent!important;color:#18212F;box-shadow:none!important}
.vvp-ot__translation-label,.vvp-ot__original-label{margin-bottom:6px;color:#C7362F;font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.vvp-ot__translation,.vvp-ot__original{font-size:15px;line-height:1.62}
.vvp-ot__meta{margin-top:9px;color:#667085;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.vvp-ot__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:11px}
.vvp-ot__btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;border:1px solid #C9D1DC;border-radius:5px;background:#fff;color:#0B1F3B;font-size:13px;line-height:1.2;font-weight:800;cursor:pointer}
.vvp-ot__btn:hover,.vvp-ot__btn[aria-expanded=true]{border-color:#0B1F3B;background:#F4F6F8}
.vvp-ot__source{color:#0B1F3B!important;font-size:13px;font-weight:700;text-decoration:none!important;white-space:nowrap}
.vvp-ot__source:hover{text-decoration:underline!important}
.vvp-ot__chevron{font-size:14px;transition:transform .16s ease}
.vvp-ot__btn[aria-expanded=true] .vvp-ot__chevron{transform:rotate(180deg)}
.vvp-ot__panel{margin-top:13px;padding:12px 14px;border:0!important;border-left:2px solid #C9A24A!important;border-radius:0!important;background:#F6F8FB!important}
.vvp-ot__original{color:#111827}
.vvp-ot-editor{padding:14px;border:1px solid #D9DEE5;border-left:3px solid #C7362F;border-radius:6px}
.vvp-ot-editor__head{margin-bottom:12px;color:#C7362F;font-size:12px;font-weight:800}
@media(max-width:700px){.vvp-ot__translation,.vvp-ot__original{font-size:14px}
.vvp-ot__actions{display:grid;grid-template-columns:1fr;gap:8px}
.vvp-ot__btn{width:100%;min-height:42px}
.vvp-ot__source{display:inline-block;white-space:normal;padding:2px 0}
.vvp-ot__panel{padding:11px 12px}}
.vvp-pf{--n:#0B1F3B;--r:#C7362F;--m:#5B6472;--l:#DDE2E8;margin:28px 0;padding:24px;border:1px solid var(--l);border-radius:9px;background:#fff}
.vvp-pf header>span{display:block;color:var(--r);font-size:11px;font-weight:800;letter-spacing:.08em}
.vvp-pf h2{margin:5px 0 7px;color:var(--n);font-size:26px}
.vvp-pf header>p{max-width:820px;margin:0;color:var(--m);font-size:14px;line-height:1.55}
.vvp-pf__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin-top:24px}
.vvp-pf__step{position:relative;padding:0 18px 0 0}
.vvp-pf__step:not(:last-child):after{content:'→';position:absolute;right:5px;top:3px;color:#A4ABB4;font-size:20px}
.vvp-pf__node{display:flex;width:30px;height:30px;margin-bottom:10px;align-items:center;justify-content:center;border-radius:50%;background:var(--n);color:#fff;font-size:12px;font-weight:800}
.vvp-pf__step h3{margin:0 0 6px;color:var(--n);font-size:15px;line-height:1.3}
.vvp-pf__step p{margin:0;color:var(--m);font-size:13px;line-height:1.48}
.vvp-pf footer{margin-top:18px;padding-top:12px;border-top:1px solid #EEF0F3}
.vvp-pf footer a{color:var(--n);font-size:12px;font-weight:700;text-decoration:none}
.vvp-pf-editor{padding:16px;border:1px solid #D9DEE5;border-left:3px solid #C7362F}
.vvp-pf-editor__head{color:#C7362F;font-size:12px;font-weight:800;margin-bottom:10px}
.vvp-pf-editor__step{margin:12px 0;padding:12px;background:#F6F7F9;border-radius:5px}
@media(max-width:900px){.vvp-pf__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0}
.vvp-pf__step:nth-child(2n):after{display:none}}@media(max-width:620px){.vvp-pf{padding:18px 16px}.vvp-pf h2{font-size:22px}.vvp-pf__steps{display:block;margin-top:20px}.vvp-pf__step{padding:0 0 22px 44px}.vvp-pf__step:not(:last-child):after{content:'';left:14px;right:auto;top:30px;bottom:0;width:1px;height:auto;background:#D9DEE5}.vvp-pf__node{position:absolute;left:0;top:0}.vvp-pf__step h3{font-size:15px}}/* VVP Rutube Video — frontend and editor canvas */
.vvp-rutube-video{box-sizing:border-box;display:block;width:100%;max-width:var(--vvp-rutube-max-width, 1200px);margin-right:auto;margin-left:auto;}
.vvp-rutube-video *,
.vvp-rutube-video *::before,
.vvp-rutube-video *::after{box-sizing:border-box;}
.vvp-rutube-video__ratio{position:relative;width:100%;height:auto;aspect-ratio:var(--vvp-rutube-ratio, 16 / 9);padding:0;overflow:hidden;background:#000;border-radius:var(--vvp-rutube-radius, 12px);isolation:isolate;}
.vvp-rutube-video__ratio iframe{position:absolute !important;inset:0 !important;display:block !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:inherit;}
.vvp-rutube-video__caption{margin-top:10px;color:#4B5563;font-size:14px;line-height:1.45;text-align:left;}
/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
	.vvp-rutube-video__ratio{height:0;padding-top:var(--vvp-rutube-padding, 56.25%);}
}

@media (max-width: 600px) {
	.vvp-rutube-video__ratio{border-radius:min(var(--vvp-rutube-radius, 12px), 10px);}
.vvp-rutube-video__caption{margin-top:8px;font-size:13px;}
}