/* ==========================================================================
   VTC Store 2.0 — HNAWBAS identity, navigation, commerce UX, tools.
   Loaded after main.css and motion.css. Deleting this file reverts the look.
   ========================================================================== */

/* --- 1. Palette derived from the HNAWBAS wordmark ------------------------ */
:root{
  --vtc-ink:#1a1030;
  --vtc-navy:#33165f;
  --vtc-blue:#512c95;
  --vtc-amber:#f7941d;
  --vtc-amber-hover:#dd7f10;
  --vtc-paper:#faf8fc;
  --vtc-text:#453a5c;
  --vtc-muted:#756a8a;
  --vtc-line:#e6dff0;
  --vtc-focus:0 0 0 3px rgba(247,148,29,.38);
  --vtc-shadow:0 2px 6px rgba(26,16,48,.06),0 16px 38px -24px rgba(51,22,95,.5);
  --vtc-violet-soft:#efe9fb;
  --vtc-amber-soft:#fdf1de;
  --vtc-sunk:#f3eff8;
  --vtc-wa:#25d366;
  --vtc-tabbar-h:60px;
}

/* --- 2. Brand marks ------------------------------------------------------ */
.vtc-logo{height:27px;width:auto;display:block}
/* 2.3.1: WooCommerce pages ship `.woocommerce img{height:auto;max-width:100%}`,
   which outranks the class above and collapsed the header logo to 0×0 on shop,
   category, product, cart, checkout and account pages. */
.vtc-brand .vtc-logo,.vtc-drawer .vtc-drawer__logo{width:auto;max-width:none}
.vtc-brand .vtc-logo{height:27px}
.vtc-drawer .vtc-drawer__logo{height:23px}
.vtc-site-footer .vtc-logo{height:25px;margin-bottom:12px}
/* 2.3.3: Arabic store name under the wordmark. */
.vtc-drawer__brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
.vtc-brand .vtc-wordmark--svg{gap:4px}
.vtc-brand__ar,.vtc-wordmark>.vtc-brand__ar{display:flex;align-self:stretch;align-items:center;gap:8px;margin:0;
  font-family:inherit;font-size:15px;font-weight:700;line-height:1;letter-spacing:0;color:#512C95;white-space:nowrap}
.vtc-brand__ar::before,.vtc-brand__ar::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.vtc-brand__ar b{color:#F7941D;font-weight:inherit}
.vtc-drawer .vtc-brand__ar{font-size:13px}
.vtc-site-footer .vtc-wordmark--footer{gap:6px;margin-bottom:12px}
.vtc-site-footer .vtc-wordmark--footer .vtc-logo{margin-bottom:0}
.vtc-site-footer .vtc-wordmark--footer>.vtc-brand__ar{color:#fff}
.vtc-brand-chip{position:absolute;top:10px;inset-inline-start:10px;z-index:3;
  background:var(--vtc-ink);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  padding:3px 8px;border-radius:5px;line-height:1.6}
/* The mark is a <use> of one shared outline; currentColor makes it take the
   chip's own colour, so no second (white) file is needed. */
.vtc-brand-chip--mark{display:inline-flex;align-items:center;padding:5px 9px;letter-spacing:normal}
.vtc-mark{width:auto;height:11px;aspect-ratio:1519/421;color:currentColor;display:block}
.vtc-brand-chip--single{position:static;display:inline-flex;background:transparent;
  border:1px solid var(--vtc-line);color:var(--vtc-ink);padding:6px 12px;border-radius:7px}
.vtc-brand-chip--single .vtc-mark{height:15px}
.vtc-brand-line{margin:0 0 10px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
@media(max-width:600px){.vtc-brand-chip--mark{padding:4px 7px}.vtc-mark{height:9px}}

/* --- 3. Prices: new Riyal sign ------------------------------------------ */
/* Optical sizing, not nominal: measured on the live store, the Riyal glyph
   inks 61 units per 100 em while the price digits ink 77, so an equal
   font-size renders it ~21% short. 1.3em brings the two to the same height. */
.woocommerce-Price-currencySymbol{
  font-family:"Saudi Riyal","Noto Naskh Arabic","IBM Plex Sans Arabic",Tahoma,sans-serif;
  font-size:1.3em;font-weight:400;line-height:1;margin:0;vertical-align:baseline}
/* Digits and the sign are both bidi-weak, so their order would otherwise be
   decided by the surrounding text. Isolating the amount makes source order
   equal visual order, so WooCommerce's "Currency position" setting behaves
   predictably: prefix renders on the left, suffix on the right. */
.woocommerce-Price-amount bdi,.woocommerce-Price-amount{direction:ltr;unicode-bidi:isolate}

/* --- 4. Product cards: aligned action row ------------------------------- */
.woocommerce ul.products li.product{display:flex;flex-direction:column}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  min-height:3.1em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:16px!important}
.woocommerce ul.products li.product .price{margin-top:auto!important}
.vtc-card-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:4px}
.woocommerce ul.products li.product .vtc-card-actions .button{
  width:100%;text-align:center;justify-content:center;display:flex;align-items:center;
  background:var(--vtc-sunk);color:var(--vtc-ink);border:1px solid var(--vtc-line);
  font-weight:600;font-size:13.5px;padding:11px 10px;border-radius:10px;transition:.18s}
.woocommerce ul.products li.product .vtc-card-actions .button:hover{
  background:var(--vtc-blue);border-color:var(--vtc-blue);color:#fff}
.woocommerce ul.products li.product .vtc-card-actions .added_to_cart{
  grid-column:1/-1;text-align:center;font-size:12.5px;color:var(--vtc-blue);padding-top:2px}
.vtc-buy-now{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  background:var(--vtc-amber);color:#2a1a05;font-weight:700;font-size:13.5px;padding:11px 15px;
  border-radius:10px;transition:.18s}
.vtc-buy-now:hover{background:var(--vtc-amber-hover);color:#2a1a05;
  box-shadow:0 10px 22px -12px rgba(247,148,29,.95)}
@media(max-width:600px){
  .vtc-card-actions{grid-template-columns:1fr;gap:6px}
  .woocommerce ul.products li.product .vtc-card-actions .button{font-size:12px;padding:9px 6px}
  .vtc-buy-now{font-size:12px;padding:9px 6px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13px!important;min-height:3em}
}

/* --- 5. Single product -------------------------------------------------- */
.vtc-trust-rows{list-style:none;margin:14px 0 0;padding:14px 0 0;display:grid;gap:8px;
  border-top:1px dashed var(--vtc-line)}
.vtc-trust-rows li{display:flex;gap:9px;align-items:flex-start;font-size:14px;margin:0}
.vtc-trust-rows .vtc-icon{width:16px;height:16px;flex:none;margin-top:4px;color:var(--vtc-blue)}
.vtc-pay-chips{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:12px 0 0;
  font-size:12px;color:var(--vtc-muted)}
.vtc-pay-chip{border:1px solid var(--vtc-line);background:#fff;border-radius:7px;
  padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--vtc-text)}
.vtc-buy-now--single{margin-inline-start:8px;padding:14px 22px;font-size:15px}
.vtc-wa-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:12px;padding:13px;border:1.5px solid var(--vtc-line);border-radius:11px;
  font-weight:600;font-size:14px;color:var(--vtc-ink);transition:.18s}
.vtc-wa-btn:hover{border-color:var(--vtc-wa);color:#0d7a3e}
.vtc-wa-btn .vtc-icon{width:18px;height:18px;color:var(--vtc-wa)}
.vtc-wa-hours{font-size:12px;color:var(--vtc-muted);text-align:center;margin:6px 0 0}

.vtc-plate{margin-top:22px;border-radius:var(--vtc-radius);padding:20px 22px;position:relative;
  overflow:hidden;background:linear-gradient(158deg,var(--vtc-ink),var(--vtc-navy));color:#efe9f9}
.vtc-plate::before,.vtc-plate::after{content:"";position:absolute;width:9px;height:9px;
  border-radius:50%;background:rgba(255,255,255,.22);top:13px}
.vtc-plate::before{inset-inline-start:13px}
.vtc-plate::after{inset-inline-end:13px}
.vtc-plate__head{display:flex;align-items:center;justify-content:center;gap:10px;
  padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.18)}
.vtc-plate__head strong,.vtc-plate__head .vtc-plate__title{font-size:19px;color:var(--vtc-amber);letter-spacing:.01em}
.vtc-plate__head .vtc-plate__title{margin:0;line-height:1.4;font-weight:700;font-family:inherit}
.vtc-plate__en{background:var(--vtc-amber);color:#2a1a05;font-size:10.5px;font-weight:700;
  padding:3px 9px;border-radius:5px}
.vtc-plate dl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px;margin:0}
.vtc-plate dl>div{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.vtc-plate dt{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#c6b9e3;margin:0 0 3px}
.vtc-plate dt .vtc-icon{width:16px;height:16px;flex:none;color:var(--vtc-amber)}
.vtc-plate dd{margin:0;font-size:19px;font-weight:700;line-height:1.25;color:#fff}
.vtc-plate .vtc-fact__unit{font-size:13px;font-weight:500;color:#d8ccf0;margin-inline-start:4px}
.vtc-plate dl>div[data-vtc-fact="feet"]{grid-column:1/-1;border-bottom:0}
.vtc-plate dl>div[data-vtc-fact="feet"] dd{font-size:16px;font-weight:600}
@media(max-width:360px){.vtc-plate dl{grid-template-columns:1fr}}

/* --- 6. Sticky buy bar -------------------------------------------------- */
.vtc-buybar{position:fixed;inset-inline:0;bottom:0;z-index:86;background:#fff;
  border-top:1px solid var(--vtc-line);box-shadow:0 -8px 26px -16px rgba(26,16,48,.55);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  display:none;align-items:center;gap:10px}
.vtc-buybar__price{line-height:1.25}
.vtc-buybar__price .price,.vtc-buybar__price .amount{font-size:18px!important;font-weight:700;
  color:var(--vtc-ink)!important}
.vtc-buybar__price small{display:block;font-size:11px;color:var(--vtc-muted)}
.vtc-buybar__actions{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.vtc-buybar__wa{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;
  border:1.5px solid var(--vtc-line)}
.vtc-buybar__wa .vtc-icon{width:18px;height:18px;color:var(--vtc-wa)}
.vtc-buybar__add{border:1.5px solid var(--vtc-blue);color:var(--vtc-blue);background:#fff;
  border-radius:10px;padding:11px 14px;font-weight:600;font-size:13.5px;cursor:pointer}
.vtc-buybar__buy{padding:11px 16px}
@media(max-width:767px){
  .vtc-buybar.is-on{display:flex}
  body.single-product .vtc-tabbar{display:none}
}

/* --- 7. Header: image-led mega menu + dropdown --------------------------- */
.vtc-primary-menu{align-items:center}
.vtc-has-mega,.vtc-has-drop{display:flex;align-items:center;gap:2px}
.vtc-has-drop{position:relative}
.vtc-header-main__inner{position:relative}
.vtc-mega-toggle,.vtc-drop-toggle{display:inline-flex;align-items:center;justify-content:center;
  gap:5px;background:none;border:0;cursor:pointer;color:var(--vtc-muted);padding:7px 6px;
  border-radius:8px;transition:.16s;line-height:1}
.vtc-drop-toggle{color:var(--vtc-text);font-weight:500;padding:8px 12px}
.vtc-mega-toggle:hover,.vtc-drop-toggle:hover{background:var(--vtc-sunk);color:var(--vtc-ink)}
.vtc-mega-toggle .vtc-icon,.vtc-drop-toggle .vtc-icon{width:13px;height:13px;transition:transform .2s}
.vtc-mega-toggle[aria-expanded="true"],.vtc-drop-toggle[aria-expanded="true"]{
  background:var(--vtc-violet-soft);color:var(--vtc-blue)}
.vtc-mega-toggle[aria-expanded="true"] .vtc-icon,
.vtc-drop-toggle[aria-expanded="true"] .vtc-icon{transform:rotate(180deg)}
.vtc-has-mega > a{position:relative}
.vtc-has-mega.is-open > a{color:var(--vtc-blue)}

/* panel */
.vtc-megapanel,.vtc-drop{position:absolute;top:calc(100% + 12px);z-index:60;
  background:#fff;border:1px solid var(--vtc-line);border-radius:18px;box-shadow:var(--vtc-shadow);
  display:none;opacity:0;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease}
.vtc-megapanel.is-open,.vtc-drop.is-open{display:grid;opacity:1;transform:none}
.vtc-drop.is-open{display:block}
.vtc-drop{inset-inline-start:0}
.vtc-megapanel{inset-inline:0;width:auto;padding:22px;
  grid-template-columns:2fr .8fr;gap:24px}
.vtc-megapanel__main{display:flex;flex-direction:column}
.vtc-megapanel h3{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--vtc-ink);
  margin:0 0 12px;font-weight:600;letter-spacing:normal;line-height:1.4}
.vtc-megapanel h3::before{content:"";width:3px;height:14px;border-radius:2px;
  background:var(--vtc-blue);flex:none}
.vtc-megapanel__h2{margin-top:18px!important}
.vtc-megapanel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:stretch;
  margin-bottom:14px}

.vtc-megacard{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;
  border:1px solid transparent;transition:.18s;color:var(--vtc-text);min-height:84px}
.vtc-megacard:hover{background:var(--vtc-sunk);border-color:var(--vtc-line);color:var(--vtc-ink)}
.vtc-megacard__img{flex:none;width:56px;height:56px;border-radius:10px;background:#fff;
  border:1px solid var(--vtc-line);display:grid;place-items:center;overflow:hidden}
.vtc-megacard__img img{width:100%;height:100%;object-fit:contain;padding:4px}
.vtc-megacard__img .vtc-icon{width:24px;height:24px;color:var(--vtc-blue)}
.vtc-megacard:hover .vtc-megacard__img{border-color:var(--vtc-blue)}
.vtc-megacard__body{min-width:0;display:flex;flex-direction:column;gap:1px}
.vtc-megacard__body b{font-size:14px;font-weight:600;color:var(--vtc-ink);line-height:1.35}
.vtc-megacard__body small{font-size:11.5px;color:var(--vtc-muted);line-height:1.5}
.vtc-megacard__body i{font-style:normal;font-size:11px;color:var(--vtc-blue);font-weight:600}

.vtc-megapanel__all,.vtc-megapanel__all:link,.vtc-megapanel__all:visited{display:block;
  margin-top:auto;background:var(--vtc-ink);color:#fff;text-align:center;border-radius:11px;
  padding:13px;font-size:14px;font-weight:600;transition:.18s;letter-spacing:normal}
.vtc-megapanel__all:hover{background:var(--vtc-navy);color:#fff}
.vtc-megapanel__side{border-inline-start:1px solid var(--vtc-line);padding-inline-start:20px}
.vtc-megapanel__links{display:flex;flex-direction:column;gap:3px}
.vtc-megapanel__links a{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;
  font-size:13.5px;color:var(--vtc-text);transition:.15s}
.vtc-megapanel__links a:hover{background:var(--vtc-violet-soft);color:var(--vtc-blue)}
.vtc-megapanel__links strong{font-weight:600;color:var(--vtc-ink);font-size:13.5px}
/* 2.3.14: example under each working-height band */
.vtc-megapanel__links strong small,.vtc-acc__panel a small{display:block;font-size:11.5px;font-weight:400;color:var(--vtc-muted);line-height:1.3}
.vtc-megapanel__links i{margin-inline-start:auto;font-style:normal;font-size:11px;
  color:var(--vtc-muted);background:var(--vtc-sunk);padding:1px 7px;border-radius:100px}
.vtc-megapanel__links a:hover i{background:#fff}

.vtc-drop{width:246px;padding:9px}
.vtc-drop a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--vtc-text)}
.vtc-drop a:hover{background:var(--vtc-sunk);color:var(--vtc-ink)}
/* 2.3.1: guides dropdown */
.vtc-drop--guides{width:272px}
.vtc-drop--guides a{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vtc-drop--guides i,.vtc-acc__guide i{font-style:normal;font-size:11px;color:var(--vtc-muted);
  background:var(--vtc-sunk);padding:1px 8px;border-radius:100px;font-variant-numeric:tabular-nums}
.vtc-drop--guides a:hover i{background:#fff}
.vtc-drop__all{margin-top:6px;border-top:1px solid var(--vtc-line);border-radius:0 0 9px 9px!important;
  padding-top:12px!important;font-weight:600;color:var(--vtc-blue)!important}
.vtc-acc__guide{display:flex!important;align-items:center;justify-content:space-between;gap:10px}

@media(max-width:1180px){
  .vtc-megapanel{grid-template-columns:1.5fr .9fr;padding:18px}
  .vtc-megapanel__grid{grid-template-columns:repeat(2,1fr)}
}

/* --- 8. Drawer ---------------------------------------------------------- */
.vtc-scrim{position:fixed;inset:0;background:rgba(17,10,30,.5);z-index:96;opacity:0;
  transition:opacity .25s}
.vtc-scrim.is-on{opacity:1}
.vtc-drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(88vw,370px);z-index:97;
  background:#fff;display:flex;flex-direction:column;transform:translateX(-102%);
  transition:transform .28s cubic-bezier(.2,.8,.25,1);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.6);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.vtc-drawer.is-on{transform:translateX(0)}
.vtc-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;border-bottom:1px solid var(--vtc-line);
  padding-top:calc(16px + env(safe-area-inset-top,0px))}
.vtc-drawer__logo{height:23px;width:auto}
.vtc-drawer__head button{background:none;border:0;cursor:pointer;padding:7px;border-radius:9px;
  color:var(--vtc-muted)}
.vtc-drawer__head button:hover{background:var(--vtc-sunk);color:var(--vtc-ink)}
.vtc-drawer__search{padding:14px 18px 4px}
.vtc-drawer__search form{display:flex;gap:6px}
.vtc-drawer__search input[type=search]{flex:1;min-width:0;border:1px solid var(--vtc-line);
  background:var(--vtc-sunk);border-radius:10px;padding:10px 12px;font-size:14px}
.vtc-drawer__search button{background:var(--vtc-blue);color:#fff;border:0;border-radius:10px;
  padding:0 14px;cursor:pointer;font-size:13.5px}
.vtc-drawer__nav{flex:1;overflow-y:auto;padding:8px 12px 12px;-webkit-overflow-scrolling:touch}
.vtc-acc{border-bottom:1px solid var(--vtc-line)}
.vtc-acc__btn{width:100%;display:flex;align-items:center;gap:10px;padding:14px 8px;background:none;
  border:0;cursor:pointer;font-size:15.5px;color:var(--vtc-ink);font-weight:500;text-align:start}
.vtc-acc__btn > .vtc-icon{width:18px;height:18px;color:var(--vtc-blue);flex:none}
.vtc-acc__cv{margin-inline-start:auto;display:flex;color:var(--vtc-muted);transition:transform .2s}
.vtc-acc__cv .vtc-icon{width:14px;height:14px}
.vtc-acc__btn[aria-expanded="true"] .vtc-acc__cv{transform:rotate(180deg)}
.vtc-acc__panel{padding:0 8px 12px}
.vtc-acc__panel a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;
  font-size:14px;color:var(--vtc-text)}
.vtc-acc__panel a:hover{background:var(--vtc-sunk)}
.vtc-acc__panel i{margin-inline-start:auto;font-style:normal;font-size:11px;color:var(--vtc-muted)}
.vtc-acc__all{color:var(--vtc-blue)!important;font-weight:600}
.vtc-acc__cat{gap:11px!important}
.vtc-acc__thumb{flex:none;width:40px;height:40px;border-radius:9px;background:#fff;
  border:1px solid var(--vtc-line);overflow:hidden;display:grid;place-items:center}
.vtc-acc__thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.vtc-drawer__link{display:flex;align-items:center;gap:10px;padding:14px 8px;font-size:15.5px;
  color:var(--vtc-ink);font-weight:500;border-bottom:1px solid var(--vtc-line)}
.vtc-drawer__link .vtc-icon{width:18px;height:18px;color:var(--vtc-blue);flex:none}
.vtc-drawer__contact{border-top:1px solid var(--vtc-line);padding:16px 18px}
.vtc-drawer__contact p{font-size:13px;color:var(--vtc-muted);margin:0 0 10px}
.vtc-drawer__wa{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--vtc-wa);color:#06301a;border-radius:11px;padding:13px;font-weight:700;font-size:14px}
.vtc-drawer__wa:hover{color:#06301a;filter:brightness(.96)}
.vtc-drawer__tel{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:8px;border:1.5px solid var(--vtc-line);border-radius:11px;padding:12px;
  font-weight:600;font-size:14px;color:var(--vtc-ink);direction:ltr}
.vtc-drawer__contact small{display:block;margin-top:10px;font-size:11.5px;color:var(--vtc-muted);
  text-align:center}

/* --- 9. Bottom tab bar -------------------------------------------------- */
.vtc-tabbar{display:none;position:fixed;inset-inline:0;bottom:0;z-index:84;background:#fff;
  border-top:1px solid var(--vtc-line);box-shadow:0 -6px 20px -16px rgba(26,16,48,.6);
  padding-bottom:env(safe-area-inset-bottom,0px);grid-auto-flow:column;grid-auto-columns:1fr}
.vtc-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;
  font-size:10.5px;color:var(--vtc-muted);position:relative}
.vtc-tabbar a.is-on{color:var(--vtc-blue)}
.vtc-tabbar .vtc-icon{width:20px;height:20px}
.vtc-tabbar__wa .vtc-icon{color:var(--vtc-wa)}
.vtc-tabbar__cart .vtc-cart-count{position:absolute;top:2px;inset-inline-end:calc(50% - 20px);
  background:var(--vtc-amber);color:#22160a;font-size:9.5px;font-weight:700;font-style:normal;
  min-width:16px;height:16px;border-radius:100px;display:grid;place-items:center;padding-inline:4px}
@media(max-width:767px){
  .vtc-tabbar{display:grid}
  body{padding-bottom:var(--vtc-tabbar-h)}
}

/* --- 10. Burger / nav breakpoints --------------------------------------- */
@media(min-width:1025px){.vtc-menu-toggle{display:none}}
@media(max-width:1024px){
  .vtc-primary-nav{display:none!important}
  .vtc-menu-toggle{display:inline-flex}
}

/* --- 11. Catalogue toolbar ----------------------------------------------
   2.3.16: one branded card. A deep-violet header (same gradient family as the
   tools) carries the title, the live count and the sort; the three questions
   sit on white with numbered gradient badges; every choice is a tile with an
   icon, a one-line hint and a live count — selected tiles turn violet with an
   amber count. Phones get a bottom sheet. */
.woocommerce .vtc-filters + .woocommerce-result-count,
.woocommerce .vtc-filters ~ .woocommerce-ordering{display:none}
.vtc-filters{margin:0 0 26px;border:1px solid #e4e1ec;border-radius:20px;background:#fff;overflow:hidden;
  box-shadow:0 1px 2px rgba(26,16,48,.04),0 18px 40px -28px rgba(51,22,95,.35)}
.vtc-filters__active[hidden],.vtc-filters__empty[hidden],.vtc-filters__badge[hidden]{display:none!important}

/* header */
.vtc-filters__bar{position:relative;display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding:16px 20px;color:#fff;
  background:radial-gradient(70% 120% at 100% 0%,rgba(247,148,29,.24),transparent 55%),
             linear-gradient(158deg,#1a1030,#2b1552 60%,#33165f)}
.vtc-filters__title{display:flex;align-items:center;gap:12px;min-width:0}
.vtc-filters__title-ic{flex:none;width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:var(--vtc-amber)}
.vtc-filters__title-ic .vtc-icon{width:22px;height:22px}
.vtc-filters__title-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vtc-filters__title-txt b{font-size:16.5px;font-weight:700;color:#fff;line-height:1.3}
.vtc-filters__title-txt small{font-size:12.5px;color:#c6b9e3;line-height:1.4}
.vtc-filters__count{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;font-size:13px;color:#e9e2f6;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}
.vtc-filters__count b{color:#fff;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.vtc-filters__toggle{display:none;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.22);border-radius:11px;padding:9px 14px;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-weight:600;font-size:13.5px}
.vtc-filters__toggle .vtc-icon{width:17px;height:17px;color:var(--vtc-amber)}
.vtc-filters__badge{font-style:normal;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--vtc-amber);color:#1a1030;
  font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.vtc-filters__sort{margin-inline-start:auto;display:flex;align-items:center}
.vtc-filters__sort form,.vtc-filters__sort .woocommerce-ordering{margin:0!important;float:none!important}
.vtc-filters .vtc-filters__sort select{appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.22)!important;border-radius:11px;
  background-color:#fff!important;color:var(--vtc-ink)!important;padding:9px 36px 9px 14px;font-size:13.5px;font-weight:600;max-width:240px;cursor:pointer;line-height:1.4;height:auto;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23512c95' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:left 13px center!important;background-size:12px!important}
.vtc-filters .vtc-filters__sort select option{color:var(--vtc-ink);background:#fff}
.vtc-filters .vtc-filters__sort select:hover{border-color:var(--vtc-amber)!important}
.vtc-filters .vtc-filters__sort select:focus{outline:none;box-shadow:var(--vtc-focus)}
.vtc-filters__title-txt small a{color:var(--vtc-amber);font-weight:700}
.vtc-filters--bare .vtc-filters__toggle{display:none!important}

/* the strip of active choices */
.vtc-filters__active{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:10px 20px;
  background:var(--vtc-amber-soft);border-bottom:1px solid #f1dcb8}
.vtc-filters__active-label{font-size:12.5px;font-weight:700;color:#7a4a08}
.vtc-filters__active-chips{display:flex;gap:6px;flex-wrap:wrap}
.vtc-filters__achip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--vtc-blue);background:var(--vtc-blue);color:#fff;
  border-radius:100px;padding:4px 6px 4px 12px;font-size:12.5px;font-weight:600;cursor:pointer;line-height:1.3;transition:background .15s}
.vtc-filters__achip i{font-style:normal;width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.vtc-filters__achip:hover{background:var(--vtc-navy);border-color:var(--vtc-navy)}
.vtc-filters__clear{background:none;border:0;cursor:pointer;color:var(--vtc-blue);font-size:13px;font-weight:700;padding:5px 10px;border-radius:8px;margin-inline-start:auto}
.vtc-filters__clear:hover{background:#fff}

/* questions */
.vtc-filters__body{display:grid;grid-template-columns:1.15fr .85fr}
.vtc-filters__group{margin:0;min-width:0;padding:18px 20px 20px;border:0;border-inline-start:1px solid #eeecf3}
.vtc-filters__group[data-group="type"]{grid-column:1/-1;border-inline-start:0;border-bottom:1px solid #eeecf3}
.vtc-filters__group[data-group="band"]{border-inline-start:0}
.vtc-filters__label{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 3px;font-size:15px;color:var(--vtc-ink);font-weight:700;line-height:1.4;float:none;width:auto}
.vtc-filters__num{flex:none;width:26px;height:26px;border-radius:8px;background:linear-gradient(150deg,var(--vtc-blue),var(--vtc-navy));color:var(--vtc-amber);
  font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums}
.vtc-filters__hint{margin:0 0 12px 36px;font-size:12.5px;color:#7a7690;line-height:1.55}
.vtc-filters__chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
[data-group="type"] .vtc-filters__chips{display:flex;flex-wrap:wrap}
[data-group="type"] .vtc-fchip{flex:1 1 180px;max-width:300px}
[data-group="mat"] .vtc-filters__chips{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-group="mat"] .vtc-fchip:last-child:nth-child(odd){grid-column:1/-1}

/* choice tiles */
.vtc-fchip{display:flex;align-items:center;gap:8px;min-height:54px;padding:8px 8px 8px 9px;border:1px solid #e4e1ec;background:#fff;border-radius:14px;
  cursor:pointer;text-align:start;color:var(--vtc-text);font:inherit;min-width:0;box-shadow:0 1px 2px rgba(26,16,48,.04);
  transition:border-color .18s,background .18s,box-shadow .2s,transform .2s}
.vtc-fchip__ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--vtc-violet-soft);color:var(--vtc-blue);
  display:inline-flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
.vtc-fchip__ic .vtc-icon{width:20px;height:20px}
.vtc-fchip__ic--letter{font-family:"IBM Plex Sans",Arial,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.02em}
.vtc-fchip__ic--lvl{display:inline-flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:8px}
.vtc-fchip__ic--lvl i{display:block;width:4px;border-radius:2px;background:currentColor;opacity:.22}
.vtc-fchip__ic--lvl i:nth-child(1){height:6px}.vtc-fchip__ic--lvl i:nth-child(2){height:10px}
.vtc-fchip__ic--lvl i:nth-child(3){height:13px}.vtc-fchip__ic--lvl i:nth-child(4){height:17px}
.vtc-fchip__ic--lvl[data-lvl="1"] i:nth-child(-n+1),.vtc-fchip__ic--lvl[data-lvl="2"] i:nth-child(-n+2),
.vtc-fchip__ic--lvl[data-lvl="3"] i:nth-child(-n+3),.vtc-fchip__ic--lvl[data-lvl="4"] i:nth-child(-n+4){opacity:1}
.vtc-fchip__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.vtc-fchip__txt b{font-size:13.5px;font-weight:700;color:var(--vtc-ink);line-height:1.3}
.vtc-fchip__txt small{font-size:11.5px;color:#7a7690;line-height:1.35}
.vtc-fchip__n{flex:none;font-style:normal;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#f3eff8;color:#5a5670;
  font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;transition:background .18s,color .18s}
.vtc-fchip:hover{border-color:var(--vtc-amber);box-shadow:0 10px 24px -12px rgba(26,16,48,.25);transform:translateY(-1px)}
.vtc-fchip:focus-visible{outline:none;box-shadow:var(--vtc-focus)}
.vtc-fchip.is-on{background:linear-gradient(150deg,var(--vtc-blue),var(--vtc-navy));border-color:transparent;
  box-shadow:0 12px 26px -12px rgba(51,22,95,.55)}
.vtc-fchip.is-on .vtc-fchip__ic{background:rgba(255,255,255,.14);color:var(--vtc-amber)}
.vtc-fchip.is-on .vtc-fchip__txt b{color:#fff}
.vtc-fchip.is-on .vtc-fchip__txt small{color:#c6b9e3}
.vtc-fchip.is-on .vtc-fchip__n{background:var(--vtc-amber);color:#1a1030}
.vtc-fchip.is-empty,.vtc-fchip:disabled{opacity:.38;cursor:not-allowed;box-shadow:none;border-color:#e4e1ec;transform:none;filter:grayscale(1)}

/* help line + empty state */
.vtc-filters__help{display:flex;align-items:center;gap:9px;margin:0;padding:11px 20px;border-top:1px solid #eeecf3;background:#faf8fc;font-size:13px;color:#5a5670}
.vtc-filters__help .vtc-icon{width:17px;height:17px;color:var(--vtc-amber-hover);flex:none}
.vtc-filters__help a{color:var(--vtc-blue);font-weight:700}
.vtc-filters__empty{margin:0;padding:14px 20px;background:var(--vtc-amber-soft);border-top:1px solid #f1dcb8;font-size:14px;color:var(--vtc-ink);
  display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.vtc-filters__empty a{color:var(--vtc-blue);font-weight:700}
.vtc-filters__clear--empty{margin-inline-start:auto;background:#fff;border:1px solid #f1dcb8}

/* the phone sheet parts stay hidden on wide screens */
.vtc-filters__sheet-head,.vtc-filters__sheet-foot,.vtc-filters__scrim{display:none}

@media(max-width:1100px){
  [data-group="type"] .vtc-filters__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-group="type"] .vtc-fchip{max-width:none}
}
@media(max-width:980px){
  .vtc-filters__body{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .vtc-filters{border-radius:16px}
  .vtc-filters__bar{padding:14px 16px;gap:10px 12px}
  .vtc-filters__title{flex:1 1 100%}
  .vtc-filters__title-txt small{display:none}
  .vtc-filters__toggle{display:inline-flex;order:1}
  .vtc-filters__count{order:2;margin-inline-start:0}
  .vtc-filters__sort{order:3;width:100%;margin-inline-start:0}
  .vtc-filters__sort select{width:100%;max-width:none}
  .vtc-filters__active{padding:10px 16px}
  .vtc-filters__help,.vtc-filters__empty{padding-inline:16px}
  /* bottom sheet */
  .vtc-filters__body{display:none}
  .vtc-filters.is-open .vtc-filters__body{display:block;position:fixed;inset-inline:0;bottom:0;z-index:98;max-height:86vh;overflow:auto;
    background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(26,16,48,.28);-webkit-overflow-scrolling:touch}
  .vtc-filters.is-open .vtc-filters__scrim{display:block;position:fixed;inset:0;z-index:97;background:rgba(17,10,30,.55)}
  .vtc-filters__scrim[hidden]{display:none!important}
  .vtc-filters__sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;
    padding:16px 16px 12px;color:#fff;background:linear-gradient(158deg,#1a1030,#2b1552 60%,#33165f)}
  .vtc-filters__sheet-head::before{content:"";position:absolute;top:6px;inset-inline:0;margin:auto;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
  .vtc-filters__sheet-head b{font-size:15.5px;color:#fff}
  .vtc-filters__close{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);width:34px;height:34px;border-radius:50%;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;color:#fff}
  .vtc-filters__close .vtc-icon{width:18px;height:18px}
  .vtc-filters__group{border-inline-start:0;border-top:1px solid #eeecf3;padding:14px 16px 16px}
  .vtc-filters__group[data-group="type"]{border-top:0;border-bottom:0}
  .vtc-filters__chips,[data-group="type"] .vtc-filters__chips,[data-group="mat"] .vtc-filters__chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  [data-group="mat"] .vtc-fchip:last-child:nth-child(odd){grid-column:auto}
  .vtc-filters__sheet-foot{display:flex;gap:10px;position:sticky;bottom:0;z-index:2;background:#fff;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #eeecf3;box-shadow:0 -8px 20px rgba(26,16,48,.06)}
  .vtc-filters__sheet-foot .vtc-filters__clear{margin:0;border:1px solid #e4e1ec;padding:11px 16px;border-radius:12px}
  .vtc-filters__apply{flex:1;border:0;border-radius:12px;background:var(--vtc-amber);color:#1a1030;font-weight:700;font-size:14.5px;padding:12px 16px;cursor:pointer}
  .vtc-filters__apply:hover{background:var(--vtc-amber-hover)}
  .vtc-filters__help{font-size:12.5px}
}
@media(max-width:480px){
  [data-group="type"] .vtc-filters__chips{grid-template-columns:1fr}
  .vtc-fchip{min-height:48px;padding:6px 8px}
  .vtc-fchip__ic{width:30px;height:30px;border-radius:9px}
  .vtc-fchip__ic .vtc-icon{width:18px;height:18px}
  .vtc-fchip__ic--letter{font-size:14px}
  .vtc-fchip__ic--lvl{padding-bottom:6px}
  .vtc-fchip__txt b{font-size:13px}
}
@media(max-width:360px){
  .vtc-filters__chips,[data-group="mat"] .vtc-filters__chips{grid-template-columns:1fr}
}

/* --- 12. Tools: calculator and finder ----------------------------------- */
.vtc-tool{background:#fff;border:1px solid var(--vtc-line);border-radius:var(--vtc-radius-lg,18px);
  padding:24px;margin-block:26px;box-shadow:var(--vtc-shadow)}
.vtc-tool h3{font-size:20px;margin:0 0 6px}
.vtc-tool__lead{font-size:14.5px;color:var(--vtc-muted);margin:0 0 18px;max-width:62ch}
.vtc-tool__note{font-size:12.5px;color:var(--vtc-muted);margin:16px 0 0}
.vtc-calc__grid{display:grid;grid-template-columns:1fr 230px;gap:26px;align-items:center}
.vtc-calc label{display:block;font-size:13.5px;color:var(--vtc-muted);margin-bottom:8px}
.vtc-calc label b{font-size:19px;color:var(--vtc-ink)}
.vtc-calc input[type=range]{width:100%;accent-color:var(--vtc-amber);height:26px}
.vtc-calc__out{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.vtc-calc__out div{background:var(--vtc-sunk);border-radius:11px;padding:12px 14px}
.vtc-calc__out b{display:block;font-size:24px;color:var(--vtc-ink);font-weight:700;line-height:1.2}
.vtc-calc__out span{font-size:11.5px;color:var(--vtc-muted)}
.vtc-calc__rec:empty{display:none}
.vtc-calc__rec{margin-top:14px;padding:13px 15px;background:var(--vtc-amber-soft);
  border:1px solid var(--vtc-amber);border-radius:11px;display:flex;gap:13px;align-items:center}
.vtc-calc__rec img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:9px;flex:none}
.vtc-calc__rec b{display:block;font-size:14.5px;color:var(--vtc-ink)}
.vtc-calc__rec span{font-size:12.5px;color:var(--vtc-text)}
.vtc-calc__rec .vtc-go{margin-inline-start:auto;background:var(--vtc-ink);color:#fff;
  border-radius:9px;padding:9px 14px;font-size:12.5px;font-weight:600;white-space:nowrap}
.vtc-calc__viz svg{width:100%;height:auto;color:var(--vtc-muted)}
@media(max-width:760px){.vtc-calc__grid{grid-template-columns:1fr}.vtc-calc__viz{max-width:230px;margin-inline:auto}}
.vtc-finder__q{margin-bottom:18px}
.vtc-finder__q > b{display:block;font-size:14.5px;color:var(--vtc-ink);margin-bottom:10px}
.vtc-finder__opts{display:flex;gap:8px;flex-wrap:wrap}
.vtc-finder__opts button{border:1.5px solid var(--vtc-line);background:#fff;border-radius:10px;
  padding:9px 15px;font-size:13.5px;color:var(--vtc-text);cursor:pointer;transition:.16s}
.vtc-finder__opts button:hover{border-color:var(--vtc-blue)}
.vtc-finder__opts button.is-on{background:var(--vtc-blue);border-color:var(--vtc-blue);
  color:#fff;font-weight:600}
.vtc-finder__out{margin-top:20px;padding-top:20px;border-top:1px dashed var(--vtc-line)}
.vtc-finder__out .vtc-calc__rec{margin-top:10px}
.vtc-finder__out .vtc-calc__rec.is-alt{background:var(--vtc-sunk);border-color:var(--vtc-line)}

/* --- 13. Footer legal row ----------------------------------------------- */
.vtc-legal{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:#9689b4;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.vtc-legal b{color:#d9cff0;font-weight:600}
.vtc-legal a{color:#d9cff0;text-decoration:underline}

/* --- 14. Motion --------------------------------------------------------- */
.woocommerce ul.products li.product{transform-style:preserve-3d}
@media(hover:hover){
  .woocommerce ul.products li.product:hover{
    transform:translateY(-4px) rotateX(1.2deg);
    box-shadow:0 6px 14px rgba(26,16,48,.07),0 32px 60px -34px rgba(51,22,95,.6)}
}
.vtc-drag-hint{position:absolute;bottom:12px;left:0;right:0;margin-inline:auto;width:max-content;
  background:rgba(26,16,48,.86);color:#fff;font-size:11.5px;padding:6px 14px;border-radius:100px;
  display:flex;align-items:center;gap:7px;pointer-events:none;transition:opacity .3s;z-index:5}
.vtc-drag-hint.is-off{opacity:0}
.woocommerce div.product div.images{position:relative}
.woocommerce div.product div.images.vtc-dragging{cursor:grabbing}

@media (prefers-reduced-motion:reduce){
  .vtc-drawer,.vtc-scrim,.woocommerce ul.products li.product{transition:none!important}
  .woocommerce ul.products li.product:hover{transform:none}
}

/* --- 2.3.18: one palette across the homepage -----------------------------
   The hero, the selector intro and the material cards still carried the
   pre-2.0 navy/teal palette from motion.css. Everything dark is now the
   deep-violet family the tools, the business band and the footer use;
   everything light sits on the violet-tinted paper. */
.vtc-hero{background:
  radial-gradient(70% 90% at 92% 0%,rgba(247,148,29,.18),transparent 55%),
  radial-gradient(55% 60% at 0% 100%,rgba(138,121,181,.22),transparent 60%),
  linear-gradient(158deg,#1a1030,#2b1552 60%,#33165f);color:#e9e2f6}
.vtc-hero::before{background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px)}
.vtc-hero .vtc-eyebrow,.vtc-hero__content>p{color:#c6b9e3}
.vtc-hero__proof{color:#e9e2f6;border-top-color:rgba(255,255,255,.12)}
.vtc-showcase{border-color:rgba(255,255,255,.12);background:radial-gradient(ellipse at 38% 35%,#3b2273 0,#241250 42%,rgba(29,17,56,0) 75%),#1d1138;box-shadow:0 26px 70px rgba(0,0,0,.28)}
.vtc-showcase__top{border-bottom-color:rgba(255,255,255,.1);color:#a897c8}
.vtc-dimension-label{border-color:rgba(247,148,29,.45);color:var(--vtc-amber)}
.vtc-chip{background:rgba(26,16,48,.92);border-color:rgba(247,148,29,.5);color:#ffc23d}
.vtc-chip small{color:#c6b9e3}
.vtc-photo3d__frame{border-color:rgba(255,255,255,.18)}
.vtc-stage__note{color:#c6b9e3}
.vtc-stage__note>span{background:var(--vtc-amber)}
.vtc-showcase figcaption{color:#a897c8}

/* selector intro: violet-tinted paper instead of blue-grey */
.vtc-selector{background:var(--vtc-sunk);color:var(--vtc-text)}
.vtc-selector h2{color:var(--vtc-ink)}
.vtc-selector__intro p{color:var(--vtc-text)}
.vtc-selector .vtc-kicker{color:var(--vtc-amber-hover)}
.vtc-selector .vtc-button--light{background:var(--vtc-blue);border-color:var(--vtc-blue);color:#fff}
.vtc-selector .vtc-button--light:hover{background:var(--vtc-navy);border-color:var(--vtc-navy)}
.vtc-selector-steps li{border-color:var(--vtc-line);background:#fff;box-shadow:0 1px 2px rgba(26,16,48,.04)}
.vtc-selector-steps strong{color:var(--vtc-ink)}
.vtc-selector-steps small{color:#5a5670}
.vtc-selector-steps li>span{border-color:var(--vtc-line);color:var(--vtc-blue);background:var(--vtc-violet-soft)}
.vtc-selector-steps>li>.vtc-icon{color:var(--vtc-blue)}

/* materials: heading row like every other section, three equal cards */
.vtc-safety .vtc-section-heading h2{margin:5px 0 0;font-size:clamp(30px,4vw,44px)}
.vtc-safety__lead{max-width:640px;margin:-14px 0 26px;font-size:16px;color:var(--vtc-text)}
.vtc-material-compare{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vtc-material-compare article{min-height:0;padding:22px 22px 20px;border-color:#e4e1ec;background:#fff;border-radius:14px;
  box-shadow:0 1px 2px rgba(26,16,48,.04);transition:border-color .2s,box-shadow .25s,transform .25s}
.vtc-material-compare article:hover{border-color:var(--vtc-amber);box-shadow:0 14px 30px rgba(26,16,48,.10);transform:translateY(-3px)}
.vtc-material-compare article>span{width:52px;height:52px;margin-bottom:18px;border-radius:12px;font-size:22px;
  background:linear-gradient(150deg,var(--vtc-blue),var(--vtc-navy));color:var(--vtc-amber)}
.vtc-material-compare h3{font-size:19px;margin-bottom:6px}
.vtc-material-compare p{font-size:14px;line-height:1.65;color:#5a5670}
.vtc-material-compare article.is-safe{border-color:#e4e1ec;background:#fff}
.vtc-material-compare article.is-safe>span{background:linear-gradient(150deg,var(--vtc-blue),var(--vtc-navy));color:var(--vtc-amber)}
@media(max-width:900px){.vtc-material-compare{grid-template-columns:1fr}.vtc-material-compare article{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:16px}
  .vtc-material-compare article>span{width:44px;height:44px;margin:0;font-size:18px;grid-row:1/3}
  .vtc-material-compare h3{font-size:17px;margin:0 0 4px}}

/* phones: the hero reaches the product picture sooner */
@media(max-width:767px){
  .vtc-hero__grid{padding-block:32px 20px;gap:22px}
  .vtc-hero .vtc-eyebrow{margin-bottom:14px}
  .vtc-hero h1{font-size:42px;margin-bottom:14px}
  .vtc-hero__content>p{font-size:15px;line-height:1.7;margin-bottom:20px}
  .vtc-hero__proof{display:none}
  .vtc-stage{height:380px}
}

/* --- 2.3.21: hero ladder — the product photographs as a 3D object ---------
   main.js cuts the background-free extended photo at every locking collar;
   each section is a front picture, a mirrored back picture and, between
   them, shaded rail and rung edges. --f slides the sections into each other
   (0 extended … 1 folded); --fo fades the folded photograph in at the end. */
.vtc-showcase__top{height:auto;min-height:54px;padding-block:8px;gap:12px;flex-wrap:wrap}
.vtc-showcase__fold{display:inline-flex;align-items:center;gap:10px}
.vtc-stage{cursor:grab}
.vtc-stage.is-dragging{cursor:grabbing}
.vtc-l3d{position:absolute;inset:0;z-index:1;--fo:0}
.vtc-l3d__still{position:absolute;left:50%;top:50%;height:calc(100% - 36px);width:auto;transform:translate(-50%,-50%)}
.vtc-l3d.is-built .vtc-l3d__still{display:none}
.vtc-l3d__fit{position:absolute;left:50%;top:50%;transform-origin:50% 50%;transform-style:preserve-3d}
.vtc-l3d__rot{position:relative;transform-style:preserve-3d;will-change:transform}
.vtc-l3d__ext,.vtc-l3d__fold{position:absolute;inset:0;transform-style:preserve-3d}
.vtc-l3d__ext{opacity:calc(1 - var(--fo))}
.vtc-l3d__fold{opacity:var(--fo);pointer-events:none}
.vtc-l3d__sec{position:absolute;transform-style:preserve-3d}
.vtc-l3d__f{position:absolute;display:block;backface-visibility:hidden}
.vtc-l3d__f--photo{background-repeat:no-repeat}
.vtc-l3d__f--photo-back{filter:brightness(.82)}
.vtc-l3d__f--edge{border-radius:2px}
.vtc-l3d__f--edge-l{background:linear-gradient(90deg,#b7bdc4,#e3e6ea 55%,#a9afb6)}
.vtc-l3d__f--edge-r{background:linear-gradient(90deg,#a9afb6,#e3e6ea 45%,#b7bdc4)}
.vtc-l3d__f--edge-in{background:linear-gradient(90deg,#8d939a,#c4c9ce)}
.vtc-l3d__f--rung-top{background:#eef0f2}
.vtc-l3d__f--rung-under{background:#6b7178}
.vtc-l3d__f--rung-end{background:#1c1e21;border-radius:1px}
.vtc-l3d__f--tube{border-radius:0}
/* chips sit on the stage, around the object */
.vtc-stage>.vtc-chip{transform:none;z-index:3}
.vtc-stage>.vtc-chip--c1{top:30px;right:auto;inset-inline-end:26px}
.vtc-stage>.vtc-chip--c2{top:38%;left:auto;inset-inline-start:auto;inset-inline-end:26px}
.vtc-stage>.vtc-chip--c3{bottom:60px;right:auto;inset-inline-end:44px}
@media(max-width:1024px){
  .vtc-stage>.vtc-chip--c1{inset-inline-end:14px}
  .vtc-stage>.vtc-chip--c2{inset-inline-end:14px}
  .vtc-stage>.vtc-chip--c3{inset-inline-end:20px}
}
@media(max-width:767px){
  .vtc-showcase__top{padding-inline:12px}
  .vtc-stage>.vtc-chip--c1{top:14px;inset-inline-end:10px}
  .vtc-stage>.vtc-chip--c2{inset-inline-end:10px}
  .vtc-stage>.vtc-chip--c3{bottom:44px;inset-inline-end:10px}
}
@media(prefers-reduced-motion:reduce){.vtc-l3d__rot{transform:rotateX(-6deg) rotateY(-24deg)}}

/* 2.3.23: turn bar under the stage — one full turn across the track, knob follows the live angle */
.vtc-l3d-turn{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;margin:0 24px;padding:10px 0 12px;
  border-top:1px solid rgba(255,255,255,.1);font-size:11.5px;color:#c6b9e3;user-select:none;touch-action:none}
.vtc-l3d-turn__view{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#e9e2f6;border-radius:999px;
  padding:5px 11px;font:600 11.5px/1 inherit;font-family:inherit;cursor:pointer;transition:background .2s}
.vtc-l3d-turn__view:hover{background:rgba(255,255,255,.14)}
.vtc-l3d-turn__view:focus-visible{outline:none;box-shadow:var(--vtc-focus)}
.vtc-l3d-turn__track{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);cursor:pointer}
.vtc-l3d-turn__ticks{position:absolute;inset:0;border-radius:999px;
  background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.35) calc(25% - 1px) 25%)}
.vtc-l3d-turn__knob{position:absolute;top:50%;inset-inline-start:0;width:26px;height:26px;margin:-13px 0 0 0;transform:translateX(50%);
  border-radius:50%;border:2px solid #fff;background:var(--vtc-amber);box-shadow:0 6px 16px rgba(0,0,0,.4);cursor:grab;padding:0}
[dir="ltr"] .vtc-l3d-turn__knob{transform:translateX(-50%)}
.vtc-l3d-turn__knob:active{cursor:grabbing}
.vtc-l3d-turn__knob:focus-visible{outline:none;box-shadow:var(--vtc-focus),0 6px 16px rgba(0,0,0,.4)}
.vtc-l3d-turn__knob::before{content:"";position:absolute;inset:7px 8px;border-inline-start:2px solid #1a1030;border-inline-end:2px solid #1a1030}
.vtc-l3d-turn__deg{min-width:38px;text-align:center;font-weight:700;color:#ffc23d;font-variant-numeric:tabular-nums}
@media(max-width:767px){
  .vtc-l3d-turn{margin:0 12px;gap:8px;padding:8px 0 10px}
  .vtc-l3d-turn__view{padding:5px 9px;font-size:11px}
  .vtc-l3d-turn__knob{width:22px;height:22px;margin-top:-11px}
  .vtc-l3d-turn__deg{min-width:32px;font-size:11px}
}

/* 2.3.20: telescoping — the side slider (folded ↔ extended) and the length readout */
.vtc-l3d-ext{position:absolute;inset-inline-start:18px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;color:#c6b9e3;user-select:none;touch-action:none}
.vtc-l3d-ext[hidden]{display:none}
.vtc-l3d-ext__lbl{font-weight:600;letter-spacing:0}
.vtc-l3d-ext__track{position:relative;width:8px;height:190px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);cursor:pointer}
.vtc-l3d-ext__fill{position:absolute;inset-inline:0;bottom:0;height:100%;border-radius:999px;background:linear-gradient(180deg,#ffb457,#f7941d)}
.vtc-l3d-ext__knob{position:absolute;left:50%;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #fff;background:var(--vtc-amber);
  box-shadow:0 6px 16px rgba(0,0,0,.4);cursor:grab;padding:0}
.vtc-l3d-ext__knob:active{cursor:grabbing}
.vtc-l3d-ext__knob:focus-visible{outline:none;box-shadow:var(--vtc-focus),0 6px 16px rgba(0,0,0,.4)}
.vtc-l3d-ext__knob::before{content:"";position:absolute;inset:8px 6px;border-top:2px solid #1a1030;border-bottom:2px solid #1a1030}
.vtc-l3d-ext__out{display:block;min-width:74px;text-align:center;padding:5px 9px;border-radius:8px;background:rgba(26,16,48,.9);border:1px solid rgba(247,148,29,.45);
  color:#ffc23d;font-weight:700;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.vtc-l3d-ext__out:empty{display:none}
@media(max-width:767px){
  .vtc-l3d-ext{inset-inline-start:8px;gap:6px;font-size:10px}
  .vtc-l3d-ext__track{height:140px}
  .vtc-l3d-ext__knob{width:22px;height:22px;margin:-11px 0 0 -11px}
  .vtc-l3d-ext__out{min-width:64px;font-size:11px;padding:4px 7px}
  .vtc-stage>.vtc-chip--c2{inset-inline-end:10px}
}

/* --- 15. Arabic typography ---------------------------------------------- */
/* Arabic letterforms join; positive tracking breaks the joins and negative
   tracking crushes them. Tracking is kept only for Latin strings. */
.vtc-hero h1,.vtc-section-heading h2,.vtc-site-header,.vtc-site-footer,
.woocommerce ul.products li.product .woocommerce-loop-product__title{letter-spacing:normal}
.vtc-brand-chip,.vtc-plate__en{letter-spacing:.1em}

/* --- 16. Search 2.0 ------------------------------------------------------ */
.vtc-ac-host{position:relative}
.vtc-drawer__search form{position:relative}
.vtc-ac{position:absolute;top:calc(100% + 8px);inset-inline-start:0;inset-inline-end:auto;
  width:min(700px,100%);z-index:88;background:#fff;
  border:1px solid var(--vtc-line);border-radius:14px;box-shadow:var(--vtc-shadow);
  max-height:min(70vh,520px);overflow-y:auto;display:none;padding:6px}
.vtc-ac.is-on{display:block}
.vtc-ac__head{font-size:11.5px;color:var(--vtc-muted);font-weight:600;padding:9px 12px 6px}
.vtc-ac__row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;
  color:var(--vtc-text);transition:background .14s}
.vtc-ac__row:hover,.vtc-ac__row.is-cursor{background:var(--vtc-sunk);color:var(--vtc-ink)}
.vtc-ac__img{flex:none;width:46px;height:46px;border-radius:9px;background:#fff;
  border:1px solid var(--vtc-line);overflow:hidden;display:grid;place-items:center}
.vtc-ac__img img{width:100%;height:100%;object-fit:contain;padding:3px}
.vtc-ac__body{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.vtc-ac__body b{font-size:13.5px;font-weight:600;color:var(--vtc-ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.vtc-ac__body small{font-size:11.5px;color:var(--vtc-muted)}
.vtc-ac__price{flex:none;font-size:13.5px;font-weight:700;color:var(--vtc-ink);white-space:nowrap}
.vtc-ac__price .amount,.vtc-ac__price .price{font-size:13.5px!important;color:var(--vtc-ink)!important}
.vtc-ac__price del{display:none}
.vtc-ac__none{padding:12px;font-size:13.5px;color:var(--vtc-text);background:var(--vtc-amber-soft);
  border-radius:10px;margin:4px}
.vtc-ac__quick,.vtc-ac__cats{display:flex;flex-wrap:wrap;gap:7px;padding:4px 10px 10px}
/* The panel lives inside the search <form>, so every control here has to
   out-rank the absolutely positioned ".vtc-search-row button" submit rule. */
.vtc-ac .vtc-ac__quick button,.vtc-ac .vtc-ac__cats a{position:static;inset:auto;
  min-width:0;border:1px solid var(--vtc-line);background:#fff;border-radius:100px;
  padding:6px 13px;font-size:12.5px;color:var(--vtc-text);cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;gap:6px;height:auto}
.vtc-ac .vtc-ac__quick button:hover,.vtc-ac .vtc-ac__cats a:hover{border-color:var(--vtc-blue);
  color:var(--vtc-blue)}
.vtc-ac .vtc-ac__cats i{font-style:normal;font-size:11px;color:var(--vtc-muted);
  background:var(--vtc-sunk);padding:0 6px;border-radius:100px}
.vtc-ac .vtc-ac__all{position:static;inset:auto;display:block;width:100%;min-width:0;height:auto;
  margin-top:4px;background:var(--vtc-ink);color:#fff;border:0;border-radius:10px;padding:11px;
  font-size:13.5px;font-weight:600;cursor:pointer;text-align:center}
.vtc-ac .vtc-ac__all:hover{background:var(--vtc-navy)}

.vtc-nores{margin-top:22px}
.vtc-nores h3{font-size:15px;margin:0 0 10px;color:var(--vtc-ink)}
.vtc-nores h3:empty{display:none}
.vtc-nores__list{display:grid;gap:6px;border:1px solid var(--vtc-line);border-radius:14px;
  padding:8px;background:#fff}
.vtc-nores__cta{display:inline-block;margin-top:14px;background:var(--vtc-blue);color:#fff;
  border-radius:10px;padding:11px 20px;font-size:14px;font-weight:600}
.vtc-nores__cta:hover{background:var(--vtc-navy);color:#fff}

/* the header search deserves the room now that it does real work */
.vtc-search-row .search-field{border-color:var(--vtc-line);height:48px}
.vtc-search-row .search-field:focus{border-color:var(--vtc-blue);box-shadow:var(--vtc-focus)}
.vtc-search-row button{background:var(--vtc-blue);font-weight:600}
.vtc-search-row button:hover{background:var(--vtc-navy)}

/* --- 2.3.8: selector intro — cards are links into the finder ------------- */
.vtc-selector-steps li{padding:0;display:block;min-height:0}
.vtc-selector-steps li>a{min-height:106px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:18px;
  padding:18px 22px;color:inherit;text-decoration:none;border-radius:inherit;transition:transform .15s,box-shadow .15s}
.vtc-selector-steps li>a:hover,.vtc-selector-steps li>a:focus-visible{transform:translateY(-1px);box-shadow:0 8px 20px rgba(11,34,57,.08);outline:none}
.vtc-selector-steps li:hover{border-color:var(--vtc-amber)}
.vtc-selector-steps li>a>span{width:42px;height:42px;display:grid;place-items:center;border:1px solid #ccd6df;border-radius:50%;
  color:#155a8a;font-family:"IBM Plex Sans",Arial,sans-serif;font-weight:700}
.vtc-selector-steps li>a>.vtc-icon{width:30px;height:30px;color:#52687a}
.vtc-selector__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.vtc-selector__guide{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.vtc-selector__guide:hover{color:var(--vtc-amber-hover)}
.vtc-finder__q,#vtc-finder{scroll-margin-top:140px}
@media(max-width:767px){.vtc-selector-steps li>a{grid-template-columns:42px 1fr;padding:16px}.vtc-selector-steps li>a>.vtc-icon{display:none}}

/* --- 2.3.9: compact sticky header ---------------------------------------- */
.vtc-site-header.is-compact{margin-bottom:var(--vtc-collapsed,0px)}
.vtc-site-header.is-compact .vtc-trust-bar,.vtc-site-header.is-compact .vtc-search-row{display:none}

/* --- 2.3.9: category grid follows the store (up to six cards) ------------ */
.vtc-category-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:1024px){.vtc-category-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.vtc-category-grid{grid-template-columns:1fr}}

/* --- 2.3.9: card spec line ------------------------------------------------ */
.woocommerce ul.products li.product .vtc-loop-specs{margin:2px 0 8px;font-size:13px;color:var(--vtc-muted);line-height:1.6}

/* --- 2.3.9: material cards link into the shop filter --------------------- */
.vtc-material-compare article{transition:border-color .15s,transform .15s}
.vtc-material-compare article:hover{border-color:var(--vtc-amber);transform:translateY(-2px)}
.vtc-material-compare__link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.vtc-material-compare__link:focus-visible{outline:2px solid var(--vtc-blue);outline-offset:2px}
.vtc-safety__content .vtc-text-link{margin-top:14px}

/* --- 2.3.9: FAQ in two columns on wide screens + guides link ------------- */
@media(min-width:900px){.vtc-faq__list{max-width:none;grid-template-columns:1fr 1fr;align-items:start}}
.vtc-faq__more{margin:22px 0 0}

/* --- 2.3.9: cash on delivery line --------------------------------------- */
.vtc-cod-line,.vtc-footer-cod{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px;font-weight:600}
.vtc-cod-line{color:var(--vtc-success,#1a7f4b)}
.vtc-cod-line .vtc-icon,.vtc-footer-cod .vtc-icon{width:18px;height:18px;flex:none}
.vtc-footer-cod{color:#fff;max-width:620px}
.vtc-footer-cod .vtc-icon{color:var(--vtc-amber)}

/* --- 2.3.11: category cards ----------------------------------------------
   One quiet card: icon tile, title, two-line description, then a footer row
   with the live product count and a "browse" arrow. Fixed slots keep every
   card's title and description aligned whatever the text length. */
.vtc-category-card{min-height:0;display:flex;flex-direction:column;gap:0;padding:22px 22px 18px;
  border:1px solid #e4e1ec;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(26,16,48,.04);transition:border-color .2s,box-shadow .25s,transform .25s}
.vtc-category-card::before,.vtc-category-card::after{display:none}
.vtc-category-card:hover{border-color:var(--vtc-amber);box-shadow:0 14px 30px rgba(26,16,48,.10);transform:translateY(-3px)}
.vtc-category-card__icon{width:52px;height:52px;margin-bottom:18px;border-radius:12px;background:linear-gradient(150deg,var(--vtc-blue),var(--vtc-navy));color:var(--vtc-amber);box-shadow:none}
.vtc-category-card__icon .vtc-icon{width:26px;height:26px}
.vtc-category-card:hover .vtc-category-card__icon{transform:none;box-shadow:none}
.vtc-category-card__body{position:static;gap:4px}
.vtc-category-card__body strong{display:flex;align-items:flex-end;min-height:2.6em;font-size:19px;line-height:1.3;color:var(--vtc-ink)}
.vtc-category-card__body small{display:block;min-height:3.3em;font-size:14px;line-height:1.65;color:#5a5670}
.vtc-category-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid #eeecf3;font-size:13px}
.vtc-category-card__count{color:#7a7690;font-weight:500}
.vtc-category-card__arrow{position:static;width:auto;height:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--vtc-blue);font-weight:700}
.vtc-category-card__arrow .vtc-icon{width:16px;height:16px;transition:transform .2s}
.vtc-category-card:hover .vtc-category-card__arrow .vtc-icon{transform:translateX(-3px)}
@media(max-width:767px){.vtc-category-card__body strong{font-size:17px}}

/* Tablets and phones: compact rows (two columns up to 1024px, one on phones;
   an odd last row spans the full width). */
@media(max-width:1024px){
  .vtc-category-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .vtc-category-card{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:14px 16px}
  .vtc-category-card__icon{width:44px;height:44px;margin:0}
  .vtc-category-card__icon .vtc-icon{width:22px;height:22px}
  .vtc-category-card__body{gap:2px}
  .vtc-category-card__body strong,.vtc-category-card__body small{min-height:0;display:block}
  .vtc-category-card__body strong{font-size:17px}
  .vtc-category-card__body small{font-size:13px;line-height:1.5}
  .vtc-category-card__foot{flex-direction:column;align-items:flex-end;gap:4px;margin:0;padding:0;border:0}
  .vtc-category-card__arrow span,.vtc-category-card__arrow{font-size:0}
  .vtc-category-card__arrow .vtc-icon{width:18px;height:18px}
  .vtc-category-card:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:600px){
  .vtc-category-grid{grid-template-columns:1fr}
  .vtc-category-card:last-child:nth-child(odd){grid-column:auto}
}

/* --- 2.3.12: tools in dark glass ------------------------------------------
   The calculator and the finder share one look: a deep-purple container with
   an amber glow, frosted panels inside, and the same recommendation cards.
   Browsers without backdrop-filter simply get the translucent panels. */
.vtc-tool--glass{position:relative;overflow:hidden;padding:28px 28px 22px;color:#efe9f9;
  border:1px solid rgba(255,255,255,.08);border-radius:24px;
  background:radial-gradient(90% 70% at 85% -10%,rgba(247,148,29,.22),transparent 55%),
             radial-gradient(60% 60% at 0% 100%,rgba(138,121,181,.25),transparent 60%),
             linear-gradient(158deg,#1a1030,#2b1552 55%,#33165f);
  box-shadow:0 30px 60px rgba(26,16,48,.28)}
.vtc-tool--glass h3{color:#fff;font-size:22px;margin:0 0 4px}
.vtc-tool--glass .vtc-tool__lead{color:#c6b9e3;margin:0 0 20px}
.vtc-tool--glass .vtc-tool__note{color:#a897c8;margin-top:10px}
.vtc-glass{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); /* 2.3.18: 16px stalled paint on mid-range GPUs */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.18)}

/* Calculator */
.vtc-calc__top{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:stretch}
.vtc-calc__panel{padding:22px 24px}
.vtc-calc__panel label{display:block;margin:0 0 12px;font-size:13px;color:#c6b9e3}
.vtc-calc__value{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.vtc-calc__value input{width:132px;height:60px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.08);
  color:#fff;font:inherit;font-size:36px;font-weight:700;text-align:center;-moz-appearance:textfield;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.vtc-calc__value input::-webkit-inner-spin-button,.vtc-calc__value input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.vtc-calc__value input:focus{outline:2px solid var(--vtc-amber);outline-offset:2px}
.vtc-calc__value span{font-size:16px;color:#d8ccf0}
.vtc-calc__presets{display:flex;gap:8px;margin:0 0 18px}
.vtc-calc__presets button{flex:1;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#efe9f9;border-radius:12px;
  padding:10px 0;font:inherit;font-size:14px;cursor:pointer;transition:background .2s,transform .2s}
.vtc-calc__presets button:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.vtc-calc__presets button.is-on{background:linear-gradient(135deg,#ffb457,#f7941d);border-color:transparent;color:#2a1a05;font-weight:700;box-shadow:0 8px 20px rgba(247,148,29,.35)}
.vtc-calc__panel input[type=range]{width:100%;accent-color:#f7941d;height:26px;margin:0}
.vtc-calc__scale{display:flex;justify-content:space-between;font-size:11px;color:#a897c8;margin-top:2px}
.vtc-calc__side{display:grid;grid-template-rows:1fr auto;gap:10px;padding:14px}
.vtc-calc__viz{display:flex;align-items:center;justify-content:center}
.vtc-calc__viz svg{width:160px;height:auto;color:#c6b9e3}
.vtc-calc__stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vtc-calc__stats div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;text-align:center}
.vtc-calc__stats b{display:block;font-size:24px;color:#ffb457;line-height:1.2}
.vtc-calc__stats b small{font-size:12px;font-weight:500;color:#c6b9e3;margin-inline-start:3px}
.vtc-calc__stats span{font-size:11.5px;color:#c6b9e3}
.vtc-calc__results{margin-top:18px}
.vtc-calc__results h4{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:14px;color:#fff;font-weight:600}
.vtc-calc__results h4:empty{display:none}
.vtc-calc__results h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent)}
.vtc-calc__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vtc-calc__card{display:flex;flex-direction:column;padding:14px;transition:transform .25s,box-shadow .25s,border-color .25s}
.vtc-calc__card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.vtc-calc__card.is-best{border-color:rgba(247,148,29,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(247,148,29,.25),0 16px 40px rgba(247,148,29,.18)}
.vtc-calc__tag{align-self:flex-start;font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.14)}
.is-best .vtc-calc__tag{background:linear-gradient(135deg,#ffb457,#f7941d);color:#2a1a05;border-color:transparent}
.vtc-calc__card img{width:100%;height:112px;object-fit:contain;margin:12px 0 10px;background:#fff;border-radius:12px;padding:6px;box-sizing:border-box}
.vtc-calc__card b{font-size:14px;line-height:1.45;color:#fff;min-height:2.9em;display:block;font-weight:600}
.vtc-calc__reach{display:flex;align-items:baseline;gap:6px;margin:8px 0 2px}
.vtc-calc__reach strong{font-size:26px;color:#ffb457}
.vtc-calc__reach span{font-size:12px;color:#c6b9e3}
.vtc-calc__meta{font-size:12.5px;color:#c6b9e3;margin:0 0 12px;line-height:1.7}
.vtc-calc__meta em{font-style:normal;font-weight:700;color:#fff}
.vtc-calc__meta .woocommerce-Price-amount{color:#fff}
.vtc-calc__card .vtc-go{margin-top:auto;display:block;text-align:center;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;border-radius:11px;padding:10px;font-size:13px;font-weight:600;transition:background .2s}
.vtc-calc__card .vtc-go:hover{background:rgba(255,255,255,.14)}
.is-best .vtc-go{background:linear-gradient(135deg,#ffb457,#f7941d);border-color:transparent;color:#2a1a05;box-shadow:0 8px 20px rgba(247,148,29,.3)}
.vtc-calc__wall{margin:14px 0 0;font-size:13px;color:#c6b9e3}
.vtc-calc__wall a{color:#ffb457;text-decoration:underline;text-underline-offset:3px}
.vtc-calc__none{color:#c6b9e3}

/* Finder on the same glass */
.vtc-tool--glass .vtc-finder__q > b{color:#fff}
.vtc-tool--glass .vtc-finder__opts button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#efe9f9;border-radius:12px;transition:background .2s,transform .2s}
.vtc-tool--glass .vtc-finder__opts button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.vtc-tool--glass .vtc-finder__opts button.is-on{background:linear-gradient(135deg,#ffb457,#f7941d);border-color:transparent;color:#2a1a05;font-weight:700;box-shadow:0 8px 20px rgba(247,148,29,.35)}
.vtc-tool--glass .vtc-finder__out{border-top:1px solid rgba(255,255,255,.12)}
.vtc-tool--glass .vtc-finder__out .vtc-tool__note{color:#c6b9e3}
.vtc-tools-section .vtc-tool + .vtc-tool{margin-top:18px}

@media(max-width:860px){
  .vtc-tool--glass{padding:20px 16px 16px;border-radius:18px}
  .vtc-calc__top{grid-template-columns:1fr}
  .vtc-calc__side{grid-template-rows:auto;grid-template-columns:140px 1fr}
  .vtc-calc__cards{grid-template-columns:1fr}
  .vtc-calc__card{display:grid;grid-template-columns:84px 1fr;column-gap:12px;padding:12px}
  .vtc-calc__card img{height:84px;margin:0;grid-row:1/4;align-self:center}
  .vtc-calc__card b{min-height:0}
  .vtc-calc__tag{margin-bottom:4px}
  .vtc-calc__meta{grid-column:1/-1;margin:6px 0 8px}
  .vtc-calc__card .vtc-go{grid-column:1/-1;margin-top:0}
}
@media(max-width:480px){
  .vtc-calc__side{grid-template-columns:1fr}
  .vtc-calc__viz{display:none}
  .vtc-calc__value input{width:112px;height:54px;font-size:30px}
}

/* --- 2.3.13: finder — three question panels side by side, progress, empty state */
.vtc-finder__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.vtc-finder__progress{flex:none;margin-top:4px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;color:#ffb457;
  border:1px solid rgba(255,180,87,.35);background:rgba(247,148,29,.08);font-variant-numeric:tabular-nums}
.vtc-finder__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vtc-tool--glass .vtc-finder__q{margin:0;padding:16px 16px 14px;display:flex;flex-direction:column;transition:border-color .25s}
.vtc-tool--glass .vtc-finder__q.is-done{border-color:rgba(255,180,87,.45)}
.vtc-tool--glass .vtc-finder__q > b{display:flex;align-items:center;gap:10px;font-size:15px;color:#fff;margin:0 0 4px}
.vtc-finder__q > b i{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-style:normal;font-size:12px;font-weight:700;
  color:#2a1a05;background:linear-gradient(135deg,#ffb457,#f7941d)}
.vtc-finder__q > small{display:block;font-size:12px;line-height:1.6;color:#a897c8;margin:0 0 12px;min-height:2.4em}
.vtc-tool--glass .vtc-finder__opts{flex-direction:column;gap:8px}
.vtc-tool--glass .vtc-finder__opts button{width:100%;text-align:start;padding:11px 14px;font-size:14px}
/* 2.3.18: height options carry the same example as the shop filter —
   2.3.24: on one line, the example smaller and muted after a middle dot */
.vtc-finder__opts button small{display:inline;font-size:11.5px;font-weight:400;color:#a897c8;line-height:1.3;margin-inline-start:6px;white-space:nowrap}
.vtc-finder__opts button small::before{content:"· ";color:rgba(255,255,255,.35)}
.vtc-tool--glass .vtc-finder__opts button.is-on small{color:#5a3a08}
.vtc-tool--glass .vtc-finder__opts button.is-on small::before{color:rgba(42,26,5,.45)}
@media(max-width:420px){.vtc-finder__opts button small{display:block;margin:2px 0 0}.vtc-finder__opts button small::before{content:none}}
.vtc-tool--glass .vtc-finder__out{margin-top:16px;padding-top:16px}
.vtc-finder__empty{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px dashed rgba(255,255,255,.22);border-radius:14px;color:#c6b9e3;font-size:14px}
.vtc-finder__empty .vtc-icon{width:34px;height:34px;flex:none;color:#ffb457;opacity:.9}
.vtc-finder__empty p{margin:0}
@media(max-width:860px){.vtc-finder__grid{grid-template-columns:1fr}.vtc-finder__q > small{min-height:0}.vtc-tool--glass .vtc-finder__opts{flex-direction:row;flex-wrap:wrap}.vtc-tool--glass .vtc-finder__opts button{width:auto;flex:1 1 45%}}

/* --- 2.3.27: site-wide contact numbers (footer, drawer, distributors page) --- */
.vtc-contacts{display:grid;gap:10px;margin-top:16px}
.vtc-contacts__group{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.vtc-contacts__label{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--vtc-amber)}
.vtc-contacts__label .vtc-icon{width:16px;height:16px}
.vtc-contacts__label--wa{color:var(--vtc-wa)}
.vtc-contacts__num{font-family:"IBM Plex Sans",Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;color:inherit;text-decoration:none;white-space:nowrap;unicode-bidi:isolate}
.vtc-contacts__num:hover{text-decoration:underline;text-underline-offset:4px}
.vtc-contacts--footer{color:#dfe8f1}
.vtc-contacts--footer .vtc-contacts__num{color:#fff}
.vtc-contacts--drawer{margin-top:12px}
.vtc-contacts--drawer .vtc-contacts__num{color:var(--vtc-ink)}
.vtc-contacts--inline{margin-top:14px}
.vtc-contacts--inline .vtc-contacts__num{color:#fff}

/* --- 2.3.34: scroll-spy underline for in-page anchor menu items ----------------------------- */
.vtc-primary-menu .is-current>a::after{width:100%}

/* --- 2.3.35: saved-menu dropdown («الشركات» group) + B2B CTAs ---------------------------- */
.vtc-primary-menu .vtc-drop--sub{margin:0;padding:9px;list-style:none;width:280px;inset-inline-start:0}
.vtc-primary-menu .vtc-drop--sub li{display:block}
.vtc-primary-menu .vtc-drop--sub a{display:block;min-height:0;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--vtc-text)}
.vtc-primary-menu .vtc-drop--sub a::after{display:none}
.vtc-primary-menu .vtc-drop--sub a:hover,.vtc-primary-menu .vtc-drop--sub .current-menu-item>a{background:var(--vtc-sunk);color:var(--vtc-ink)}
.vtc-primary-menu .vtc-has-sub.is-open>a{color:var(--vtc-blue)}
@media(min-width:1025px){.vtc-primary-menu .vtc-has-sub:hover>.vtc-drop--sub:not(.is-open),.vtc-primary-menu .vtc-has-sub:focus-within>.vtc-drop--sub:not(.is-open){display:none}}
.vtc-b2b-cta{margin:14px 0 0}
.vtc-b2b-cta a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px dashed var(--vtc-line);border-radius:10px;color:var(--vtc-navy);font-size:14px;font-weight:600;text-decoration:none;transition:.16s}
.vtc-b2b-cta a:hover{border-color:var(--vtc-amber);background:var(--vtc-amber-soft,#fff5e8);color:var(--vtc-ink)}
.vtc-b2b-cta .vtc-icon{width:18px;height:18px;color:var(--vtc-blue)}
.vtc-b2b-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:32px 0 8px;padding:18px 22px;border:1px solid var(--vtc-line);border-radius:14px;background:var(--vtc-paper)}
.vtc-b2b-band>div{display:flex;align-items:center;gap:12px}
.vtc-b2b-band .vtc-icon{width:24px;height:24px;flex:none;color:var(--vtc-blue)}
.vtc-b2b-band p{margin:0;color:var(--vtc-text);font-size:15px}
@media(max-width:767px){.vtc-b2b-band{flex-direction:column;align-items:stretch;text-align:center}.vtc-b2b-band>div{flex-direction:column}}

/* --- 2.3.36: support links on product pages / My Account ------------------------------------ */
.vtc-support-link{margin:8px 0 0}
.vtc-support-link a{display:inline-flex;align-items:center;gap:8px;min-height:36px;color:var(--vtc-navy);font-size:14px;font-weight:600;text-decoration:none}
.vtc-support-link a:hover{color:var(--vtc-blue);text-decoration:underline}
.vtc-support-link .vtc-icon{width:18px;height:18px;color:var(--vtc-blue)}
.vtc-support-link--order{margin:16px 0 0}

/* --- 2.3.37: compact footer on phones/tablets — columns collapse under their title ------------- */
.vtc-footer-col__h{margin:0 0 16px}
.vtc-footer-col__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:inherit;text-align:start;cursor:default}
.vtc-footer-col__btn .vtc-icon{display:none;width:14px;height:14px;flex:none;color:#aebdca;transition:transform .2s}
@media(max-width:1024px){
  .vtc-site-footer{padding-top:0}
  .vtc-footer-lead{gap:18px;padding-block:26px 18px}
  .vtc-footer-lead__text{display:none}
  .vtc-footer-cod{margin-top:10px}
  .vtc-contacts--footer{margin-top:10px}
  .vtc-footer-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .vtc-footer-cta>span{font-size:14px}
  .vtc-footer-grid{grid-template-columns:1fr;gap:0;padding-block:6px 10px}
  .vtc-footer-col{border-bottom:1px solid rgba(255,255,255,.10)}
  .vtc-footer-col__h{margin:0}
  .vtc-footer-col__btn{min-height:50px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .vtc-footer-col__btn .vtc-icon{display:block}
  .vtc-footer-col__btn[aria-expanded="true"] .vtc-icon{transform:rotate(180deg)}
  .vtc-footer-col__btn:focus-visible{outline:2px solid var(--vtc-amber);outline-offset:2px;border-radius:6px}
  .vtc-footer-col__list{padding-bottom:14px}
  .vtc-footer-col__list[hidden]{display:none}
  .vtc-footer-grid li+li{margin-top:0}
  .vtc-footer-grid li a{display:block;padding:7px 0;font-size:14px}
  .vtc-footer-grid .widget{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.10)}
  .vtc-legal{gap:8px 16px;padding-block:14px;font-size:12px}
  .vtc-footer-bottom{min-height:0;padding-block:14px 18px;gap:8px;font-size:12px}
  .vtc-footer-menu{gap:10px 16px}
}

/* --- 2.3.55: one palette, one shape language -----------------------------------------------
   main.css still carried the first (blue-grey) palette in a few places that stayed visible:
   trust bar, search icon, footer text, business copy, product-image tiles, category shadows.
   They now use the HNAWBAS violet greys. Radii: buttons 10px, cards 16px, panels 20px. */
:root{--vtc-on-dark:#ece6f8;--vtc-on-dark-muted:#c6b9e3;--vtc-tile:#f6f3fa;
  --vtc-r-btn:10px;--vtc-r-card:16px;--vtc-r-panel:20px}
.vtc-trust-bar{color:var(--vtc-on-dark)}
.vtc-search-row form::before{border-color:var(--vtc-muted)}
.vtc-search-row form::after{background:var(--vtc-muted)}
.vtc-hero__metric small,.vtc-business p{color:var(--vtc-on-dark-muted)}
.vtc-site-footer,.vtc-wordmark--footer small,.vtc-footer-grid a,.vtc-footer-menu a,.vtc-footer-col__btn .vtc-icon{color:var(--vtc-on-dark-muted)}
.vtc-contacts--footer{color:var(--vtc-on-dark)}
.woocommerce ul.products li.product a img{background:var(--vtc-tile)}
.woocommerce div.product .woocommerce-product-gallery{background:var(--vtc-tile);box-shadow:0 14px 40px rgba(51,22,95,.06)}
.vtc-category-card::before{color:rgba(51,22,95,.05)}
.vtc-category-card__icon{box-shadow:4px 5px 0 rgba(51,22,95,.12)}
.vtc-category-card:hover .vtc-category-card__icon{box-shadow:7px 9px 0 rgba(51,22,95,.08)}
.vtc-category-card:hover{box-shadow:0 20px 40px rgba(51,22,95,.1)}
.vtc-category-card__count{color:var(--vtc-muted)}
.vtc-button,.vtc-search-row button,.vtc-selector-link{border-radius:var(--vtc-r-btn)}
.vtc-category-card,.vtc-material-compare article,.woocommerce ul.products li.product{border-radius:var(--vtc-r-card)}
.vtc-business__inner{border-radius:var(--vtc-r-panel)}
/* «See all» after the grid — the heading link has scrolled away on phones. */
.vtc-section-more{display:none;margin:22px 0 0;text-align:center}
.vtc-section-more .vtc-button{min-width:220px;background:#fff;color:var(--vtc-blue);border:1.5px solid var(--vtc-line)}
.vtc-section-more .vtc-button:hover{border-color:var(--vtc-blue);color:var(--vtc-navy)}
@media(max-width:767px){
  .vtc-section-more{display:block}
  /* Trust bar: one message at a time instead of a cut-off scrolling strip. */
  .vtc-trust-bar__inner{display:grid;justify-content:center;overflow:hidden;scrollbar-width:none}
  .vtc-trust-bar__inner::-webkit-scrollbar{display:none}
  .vtc-trust-bar__inner>span{grid-area:1/1;justify-content:center;animation:vtc-tick 10s infinite both}
  .vtc-trust-bar__inner>span:nth-child(2){animation-delay:-5s}
}
@keyframes vtc-tick{0%,44%{opacity:1;transform:none}50%,94%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .vtc-trust-bar__inner>span{animation:none}
  .vtc-trust-bar__inner>span:nth-child(2){display:none}
}

/* --- 2.3.56: VT Optimizer's emoji trust line repeats «ما يشمله الشراء» on product pages -------- */
.single-product .vto-trust{display:none}

/* --- 2.3.62: policy pages (privacy, returns, terms, about) — readable tables, headings, lists ---- */
.vtc-prose h2{margin-top:1.8em;font-size:1.25rem;color:var(--vtc-navy)}
.vtc-prose ul,.vtc-prose ol{padding-inline-start:1.4em}
.vtc-prose li+li{margin-top:.35em}
.vtc-prose .wp-block-table{margin-inline:0;overflow-x:auto}
.vtc-prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.vtc-prose th,.vtc-prose td{border:1px solid var(--vtc-line);padding:.6em .8em;text-align:start;vertical-align:top}
.vtc-prose th{background:var(--vtc-tile);color:var(--vtc-navy)}
.vtc-prose a[href^="tel:"],.vtc-prose a[href^="https://wa.me"]{white-space:nowrap}

/* --- 2.3.63: footer — as many tracks as columns (no empty 4th slot); policy links in the bottom bar */
@media(min-width:1025px){
  .vtc-footer-grid{grid-template-columns:repeat(var(--vtc-footer-cols,3),minmax(0,1fr))} /* 2.3.64: count set by footer.php */
}
.vtc-footer-menu a:hover{color:#fff}