/* ============================================================================
   Viral Textile Pvt. Ltd. — storefront design system
   Loaded LAST, after bootstrap/ace, so it wins the cascade.
   Every class here is vt- prefixed: legacy pages that still use ace/bootstrap
   classes (Policies, AboutUS, ContactUs, ChangePassword, EmptyCart …) are
   untouched.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens - */
:root{
  --vt-ground:#F7F5F1; --vt-surface:#FFFFFF; --vt-surface-2:#F1EEE8; --vt-surface-3:#EAE6DE;
  --vt-line:#E3DED5; --vt-line-strong:#CFC8BB;
  --vt-ink:#191B24; --vt-ink-2:#5C5F70; --vt-ink-3:#8C8F9E;
  --vt-indigo:#232C63; --vt-indigo-2:#3B4894; --vt-indigo-soft:#E9EBF5;
  --vt-haldi:#B4790F; --vt-haldi-soft:#FAEFD6; --vt-haldi-line:#E6C77E;
  --vt-madder:#A93226; --vt-leaf:#2F6B4F; --vt-leaf-soft:#E4F0EA;
  --vt-btn-bg:#232C63; --vt-btn-fg:#FFFFFF;
  --vt-shadow-s:0 1px 2px rgba(25,27,36,.06),0 2px 6px rgba(25,27,36,.05);
  --vt-shadow-m:0 2px 6px rgba(25,27,36,.07),0 12px 28px rgba(25,27,36,.09);
  --vt-r-s:8px; --vt-r-m:14px; --vt-r-l:22px;
  --vt-f-disp:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --vt-f-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --vt-f-num:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --vt-topbar-h:60px;
  --vt-tabbar-h:60px;
}

/* ------------------------------------------------------------ base reset - */
html{ -webkit-text-size-adjust:100%; }
body.no-skin,
body{
  background:var(--vt-ground) !important;
  color:var(--vt-ink);
  font-family:var(--vt-f-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.vt-shell *{ box-sizing:border-box; }
.vt-shell a{ text-decoration:none; color:inherit; }
.vt-shell a:hover,.vt-shell a:focus{ text-decoration:none; }
.vt-shell :focus-visible{ outline:2px solid var(--vt-haldi); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  .vt-shell *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ace/bootstrap layout wrappers we no longer want padding from */
.vt-shell .main-container,
.vt-shell .main-content,
.vt-shell .page-content{ margin:0; padding:0; background:transparent; border:none; }

/* ------------------------------------------------------------- app shell - */
.vt-shell{ display:flex; flex-direction:column; min-height:100vh; }
.vt-main{ flex:1; display:flex; flex-direction:column; padding-bottom:var(--vt-tabbar-h); }
@media (min-width:1024px){ .vt-main{ padding-bottom:0; } }

.vt-pad{ padding:16px; }
.vt-sect{ padding:20px 16px 4px; }
.vt-sect-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.vt-sect-head h2{
  font-family:var(--vt-f-disp); font-weight:700; font-size:17px; letter-spacing:-.02em;
  margin:0; text-wrap:balance; color:var(--vt-ink);
}
.vt-sect-head a{ font-size:12.5px; font-weight:600; color:var(--vt-indigo); white-space:nowrap; }
.vt-eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vt-haldi); margin:0 0 4px;
}
.vt-page-title{
  font-family:var(--vt-f-disp); font-weight:700; font-size:20px; letter-spacing:-.03em;
  margin:0; color:var(--vt-ink);
}

/* --------------------------------------------------------------- top bar - */
.vt-topbar{
  position:sticky; top:0; z-index:1040;
  background:var(--vt-surface); border-bottom:1px solid var(--vt-line);
}
.vt-topbar-in{ display:flex; align-items:center; gap:12px; padding:11px 16px; }
.vt-logo{ display:flex; align-items:center; gap:9px; margin-right:auto; min-width:0; }
/* Real brand mark: a gold serif V on white. The artwork carries its own white
   ground, so it always sits on a white chip - never bare on a coloured bar. */
.vt-logo-mark{
  width:36px; height:36px; border-radius:9px; flex:none; display:block;
  background:#fff; border:1px solid var(--vt-line); object-fit:contain; padding:2px;
}
.vt-logo-chip{
  display:inline-block; background:#fff; border-radius:12px; padding:7px 10px;
  box-shadow:0 2px 10px rgba(10,12,22,.28);
}
.vt-logo-chip img{ display:block; height:44px; width:auto; }
.vt-logo-txt{ min-width:0; }
.vt-logo-txt b{
  display:block; font-family:var(--vt-f-disp); font-weight:700; font-size:15px;
  letter-spacing:-.02em; line-height:1.1; color:var(--vt-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw;
}
.vt-logo-txt span{
  display:block; font-size:9.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--vt-ink-3);
}
.vt-ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; position:relative;
  color:var(--vt-ink-2); transition:background .15s,color .15s; flex:none; border:none; background:none;
}
.vt-ico:hover{ background:var(--vt-surface-2); color:var(--vt-ink); }
.vt-ico i{ font-size:18px; }
.vt-badge{
  position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 4px;
  background:var(--vt-madder); color:#fff; border-radius:999px;
  font-family:var(--vt-f-num); font-size:10px; font-weight:600; line-height:18px; text-align:center;
  border:2px solid var(--vt-surface);
}
.vt-badge span{ color:#fff !important; }
.vt-nav{ display:none; }
.vt-nav a{
  padding:8px 13px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--vt-ink-2);
  transition:background .15s,color .15s;
}
.vt-nav a:hover{ background:var(--vt-surface-2); color:var(--vt-ink); }
.vt-nav a.vt-on{ color:var(--vt-indigo); background:var(--vt-indigo-soft); }
.vt-searchbox{ display:none; }

/* dropdown (account menu) */
.vt-menu-wrap{ position:relative; }
.vt-dropdown{
  position:absolute; right:0; top:calc(100% + 6px); min-width:210px; z-index:1050;
  background:var(--vt-surface); border:1px solid var(--vt-line); border-radius:var(--vt-r-m);
  box-shadow:var(--vt-shadow-m); padding:6px; display:none;
}
.vt-menu-wrap.vt-open .vt-dropdown{ display:block; }
.vt-dropdown a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  font-size:13.5px; color:var(--vt-ink); transition:background .15s;
}
.vt-dropdown a:hover{ background:var(--vt-surface-2); }
.vt-dropdown a i{ width:16px; color:var(--vt-ink-3); }
.vt-dropdown hr{ margin:5px 8px; border:none; border-top:1px solid var(--vt-line); }

/* ------------------------------------------------------- bottom tab bar - */
.vt-tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:1040;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--vt-surface); border-top:1px solid var(--vt-line);
  padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px));
}
.vt-tabbar a.vt-tab,
.vt-tabbar .vt-tab{
  display:flex !important; flex-direction:column; align-items:center; gap:3px; padding:4px 0;
  color:var(--vt-ink-3); position:relative; text-align:center;
}
.vt-tab i{ font-size:19px; line-height:1; }
.vt-tab .vt-tab-lab{ font-size:10px; font-weight:600; }
.vt-tab.vt-on{ color:var(--vt-indigo); }
.vt-tab.vt-on::before{
  content:""; position:absolute; top:-7px; width:22px; height:3px;
  border-radius:0 0 3px 3px; background:var(--vt-indigo);
}
.vt-tab-ico{ position:relative; display:inline-block; }
.vt-tab-ico .vt-badge{ top:-6px; right:-9px; }
@media (min-width:1024px){ .vt-tabbar{ display:none; } }

/* -------------------------------------------------------- section band --- */
/* Brands and Categories each sit on their own ground so the segment reads as
   a shelf rather than tiles floating on the page ground. The band must wrap
   BOTH the heading and the DataList - a .vt-sect on its own carries no fill. */
/* Same indigo art as the login hero: indigo warp over marigold weft. Each
   segment is its own slab - page ground shows between them, and the two
   weaves are lit from opposite corners so Brands never blends into Category. */
.vt-band{
  position:relative; overflow:hidden;
  margin:14px 12px; border-radius:var(--vt-r-l);
  padding:2px 0 18px;
  border:1px solid var(--vt-line);
  box-shadow:var(--vt-shadow-s);
}
/* Weave, softened for a pale ground: warm warp, faint marigold weft. */
.vt-band::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(0deg,rgba(90,74,38,.10) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(90deg,rgba(201,155,46,.30) 0 1px,transparent 1px 46px);
}
.vt-band > *{ position:relative; z-index:1; }   /* lift content clear of the weave */
.vt-band .vt-sect{ padding-top:16px; }
.vt-band .vt-sect-head{
  padding-bottom:11px; border-bottom:1px solid rgba(180,121,15,.26);
}
.vt-band .vt-sect-head h2{ color:var(--vt-ink); }
.vt-band .vt-sect-head a{ color:var(--vt-indigo); }
.vt-band .vt-tile{ border-color:var(--vt-line-strong); }

/* Brands: pale haldi cream. */
.vt-band-brands{ background:linear-gradient(135deg,#FCF5E3 0%,#F7EFD9 100%); }
/* Category: pale warm grey, so the two segments never read as one. */
.vt-band-cats{ background:linear-gradient(315deg,#F4F3EF 0%,#E9E7E0 100%); }

/* --------------------------------------------------------------- tiles --- */
/* Brands and Categories share one tile. Brand tiles add .vt-tile-mark. */
.vt-tilegrid{
  display:grid !important; grid-template-columns:repeat(2,1fr); gap:10px; padding:0 16px;
}
.vt-tilegrid br{ display:none; }              /* DataList flow separators */
.vt-tile{
  position:relative; display:block; height:96px; border-radius:var(--vt-r-m); overflow:hidden;
  border:1px solid var(--vt-line); box-shadow:var(--vt-shadow-s); background:var(--vt-surface-2);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.vt-tile:hover{ transform:translateY(-3px); box-shadow:var(--vt-shadow-m); }
.vt-tile > img{ width:100%; height:100%; object-fit:cover; display:block; }
.vt-tile-lab{
  position:absolute; left:0; right:0; bottom:0; padding:22px 11px 10px;
  background:linear-gradient(to top,rgba(10,12,22,.86),transparent);
}
.vt-tile-lab b{
  display:block; font-family:var(--vt-f-disp); font-weight:600; font-size:13px;
  letter-spacing:-.015em; color:#F6F4EF;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vt-tile-lab span{ font-family:var(--vt-f-num); font-size:10px; color:rgba(246,244,239,.72); }
.vt-tile-mark{
  position:absolute; top:8px; left:8px; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; background:rgba(255,255,255,.9); color:#191B24;
  font-family:var(--vt-f-disp); font-weight:700; font-size:10.5px; letter-spacing:-.02em;
  box-shadow:var(--vt-shadow-s);
}

/* ---------------------------------------------------------------- hero --- */
.vt-hero{ position:relative; }
.vt-hero .carousel-inner > .item{ height:260px; }
.vt-hero .carousel-inner > .item > img{ width:100%; height:100%; object-fit:cover; }
.vt-hero .carousel-indicators{ bottom:8px; margin:0; left:16px; width:auto; text-align:left; }
.vt-hero .carousel-indicators li{
  width:6px; height:6px; margin:0 3px; border:none; background:rgba(255,255,255,.45); border-radius:999px;
  transition:width .25s,background .25s;
}
.vt-hero .carousel-indicators li.active{ width:20px; height:6px; background:#F0C86E; margin:0 3px; }
.vt-hero .carousel-control{
  background:none; width:44px; opacity:.85; text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.vt-hero-copy{
  position:absolute; left:0; right:0; bottom:0; padding:22px 18px 26px; color:#F6F4EF;
  background:linear-gradient(to top,rgba(10,12,22,.88) 12%,rgba(10,12,22,.5) 55%,transparent);
  pointer-events:none;
}
.vt-hero-copy .vt-eyebrow{ color:#F0C86E; }
.vt-hero-copy h1{
  font-family:var(--vt-f-disp); font-weight:800; font-size:24px; line-height:1.1;
  letter-spacing:-.035em; margin:0 0 6px; color:#F6F4EF; text-wrap:balance;
}
.vt-hero-copy p{ margin:0; font-size:13.5px; color:rgba(246,244,239,.82); max-width:44ch; }

/* --------------------------------------------------------- trust strip --- */
.vt-trust{
  display:flex; border-top:1px solid var(--vt-line); border-bottom:1px solid var(--vt-line);
  background:var(--vt-surface); overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.vt-trust::-webkit-scrollbar{ display:none; }
.vt-trust div{
  flex:1 0 auto; padding:11px 16px; display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; color:var(--vt-ink-2); white-space:nowrap;
  border-right:1px solid var(--vt-line);
}
.vt-trust div:last-child{ border-right:none; }
.vt-trust i{ color:var(--vt-leaf); font-size:13px; }

/* -------------------------------------------------------- product grid --- */
/* GridView renders a table; these rules turn it into a responsive card grid
   without changing a single line of the server-side binding. */
.vt-gv{
  display:block !important; width:100% !important; margin:0 !important;
  border:none !important; background:none !important;
}
.vt-gv > tbody{
  display:grid !important; grid-template-columns:repeat(2,1fr); gap:12px; padding:0 16px;
}
.vt-gv > tbody > tr{ display:block !important; background:none !important; border:none !important; }
.vt-gv > tbody > tr > td{
  display:block !important; padding:0 !important; border:none !important; background:none !important;
  vertical-align:top;
}
.vt-gv > tbody > tr:hover > td{ background:none !important; }

/* single-column list variant (inquiry lines, order cards) */
.vt-gv-list > tbody{ grid-template-columns:1fr; gap:0; }

.vt-card{
  background:var(--vt-surface); border:1px solid var(--vt-line); border-radius:var(--vt-r-m);
  overflow:hidden; box-shadow:var(--vt-shadow-s); display:flex; flex-direction:column;
  height:100%; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s;
}
.vt-card:hover{ transform:translateY(-3px); box-shadow:var(--vt-shadow-m); }
.vt-card-img{ position:relative; padding-top:125%; background:var(--vt-surface-2); }
.vt-card-img > a{ position:absolute; inset:0; display:block; }
.vt-card-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vt-wish{
  position:absolute; top:8px; right:8px; z-index:3; width:30px; height:30px; border-radius:999px;
  background:rgba(255,255,255,.92); color:#5C5F70; display:grid !important; place-items:center;
  box-shadow:var(--vt-shadow-s); font-size:14px; line-height:1;
  transition:color .15s,background .15s;
}
.vt-wish:hover{ color:var(--vt-madder); background:#fff; }
.vt-stamp{
  position:absolute; bottom:6px; left:6px; z-index:2; padding:2px 7px; border-radius:5px;
  background:rgba(255,255,255,.75); color:#333;
  font-family:var(--vt-f-num); font-size:9px; font-weight:600; pointer-events:none;
}
.vt-card-body{ padding:10px 11px 12px; display:flex; flex-direction:column; gap:3px; flex:1; }
.vt-card-brand{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vt-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vt-card-name{
  font-family:var(--vt-f-disp); font-weight:600; font-size:13.5px; line-height:1.25;
  letter-spacing:-.015em; margin:0; color:var(--vt-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vt-card-meta{
  font-size:11px; color:var(--vt-ink-3); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vt-card-meta.vt-size{ color:var(--vt-indigo); font-weight:600; }
.vt-card-foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
  margin-top:auto; padding-top:8px;
}
.vt-price{
  font-family:var(--vt-f-num); font-weight:600; font-size:15px; color:var(--vt-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap;
}
.vt-price small{ font-family:var(--vt-f-ui); font-size:10.5px; font-weight:600; color:var(--vt-ink-3); }
.vt-mini{
  width:32px !important; height:32px; border-radius:10px; flex:none; padding:0 !important;
  background:var(--vt-btn-bg) !important; color:var(--vt-btn-fg) !important; border:none !important;
  font-size:15px; line-height:32px; text-align:center;
  transition:transform .15s,filter .15s;
}
.vt-mini:hover{ filter:brightness(1.15); transform:scale(1.06); color:#fff !important; }

/* ------------------------------------------------------ buttons / chips --- */
.vt-btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px; font-size:14px; font-weight:600;
  font-family:var(--vt-f-ui); text-shadow:none;
  background:var(--vt-btn-bg) !important; color:var(--vt-btn-fg) !important;
  border:1px solid transparent !important; box-shadow:none !important;
  transition:filter .15s,transform .12s; cursor:pointer;
}
.vt-btn:hover,.vt-btn:focus{ filter:brightness(1.12); color:var(--vt-btn-fg) !important; }
.vt-btn:active{ transform:scale(.985); }
.vt-btn-ghost{
  background:var(--vt-surface) !important; color:var(--vt-ink) !important;
  border-color:var(--vt-line-strong) !important;
}
.vt-btn-ghost:hover{ background:var(--vt-surface-2) !important; color:var(--vt-ink) !important; filter:none; }
.vt-btn-gold{ background:var(--vt-haldi) !important; color:#1A1405 !important; }
.vt-btn-gold:hover{ color:#1A1405 !important; }
.vt-btn-danger{ background:var(--vt-madder) !important; color:#fff !important; }
.vt-btn-wide{ width:100%; }
.vt-btn-sm{ padding:8px 14px; font-size:12.5px; border-radius:10px; }

/* RadioButtonList → horizontal chip row (sort bar) */
.vt-chiplist{ width:100%; }
.vt-chiplist table{ width:100% !important; border:none; }
.vt-chiplist td{ padding:0 4px 0 0 !important; border:none !important; }
.vt-chiplist input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; }
.vt-chiplist label{
  display:block; padding:7px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--vt-line-strong); background:var(--vt-surface);
  font-size:12.5px; font-weight:600; color:var(--vt-ink-2); white-space:nowrap;
  text-align:center; margin:0; transition:.15s;
}
.vt-chiplist label:hover{ border-color:var(--vt-ink-3); color:var(--vt-ink); }
.vt-chiplist input[type="radio"]:checked + label{
  background:var(--vt-indigo); border-color:var(--vt-indigo); color:#fff;
}
@media (max-width:767px){
  .vt-chiplist table{ display:flex; flex-wrap:nowrap; overflow-x:auto; }
  .vt-chiplist td{ flex:0 0 auto; }
}

/* ----------------------------------------------------------- form field --- */
.vt-field{
  display:flex; align-items:center; gap:9px; padding:0 13px; border-radius:12px;
  background:var(--vt-surface); border:1px solid var(--vt-line-strong); color:var(--vt-ink-3);
}
.vt-field i{ font-size:15px; flex:none; }
.vt-field input.form-control,
.vt-field .form-control{
  border:none !important; background:none !important; box-shadow:none !important;
  outline:none; font-family:var(--vt-f-ui); font-size:13.5px; color:var(--vt-ink);
  height:40px; padding:0 !important; width:100%;
}
.vt-field:focus-within{ border-color:var(--vt-indigo); }
.vt-input,
textarea.vt-input{
  width:100%; border:1px solid var(--vt-line-strong) !important; border-radius:12px;
  background:var(--vt-surface) !important; padding:10px 13px !important;
  font-family:var(--vt-f-ui); font-size:13.5px; color:var(--vt-ink);
  box-shadow:none !important; height:auto;
}
.vt-input:focus{ border-color:var(--vt-indigo) !important; }
.vt-label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vt-ink-3); margin-bottom:6px;
}

/* -------------------------------------------------------- sticky subbar --- */
.vt-subbar{
  position:sticky; top:var(--vt-topbar-h); z-index:1030; background:var(--vt-ground);
  padding:12px 16px 10px; border-bottom:1px solid var(--vt-line);
  display:flex; flex-direction:column; gap:10px;
}
.vt-subbar-row{ display:flex; align-items:center; gap:12px; }
.vt-back{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:inline-flex !important; align-items:center; justify-content:center;
  background:var(--vt-surface); border:1px solid var(--vt-line-strong); color:var(--vt-ink-2);
  font-size:16px;
}
.vt-back:hover{ background:var(--vt-surface-2); color:var(--vt-ink); }
.vt-resultline{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px 8px; font-size:12.5px; color:var(--vt-ink-3);
}
.vt-resultline b{ color:var(--vt-ink); font-family:var(--vt-f-num); font-weight:600; }

/* --------------------------------------------------------------- PDP ----- */
.vt-pdp{ display:flex; flex-direction:column; }
.vt-pdp-media{ position:relative; }
.vt-snap{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth; width:100%; background:var(--vt-surface);
}
.vt-snap::-webkit-scrollbar{ display:none; }
.vt-snap-item{ flex:0 0 100%; scroll-snap-align:start; text-align:center; }
.vt-snap-item img{
  width:100%; height:340px; object-fit:contain; background:var(--vt-surface); display:block;
}
.vt-pdp-body{ padding:16px; display:flex; flex-direction:column; gap:14px; }
.vt-pdp-body h1{
  font-family:var(--vt-f-disp); font-weight:700; font-size:22px; line-height:1.15;
  letter-spacing:-.03em; margin:4px 0 6px; color:var(--vt-ink); text-wrap:balance;
}
.vt-pdp-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--vt-ink-3); }
.vt-code{
  font-family:var(--vt-f-num); font-size:11.5px; color:var(--vt-ink-3);
  background:var(--vt-surface-2); padding:2px 7px; border-radius:6px; border:1px solid var(--vt-line);
}
.vt-brandtag{
  color:var(--vt-indigo); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:10.5px;
}
.vt-pricebox{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.vt-pricebox .vt-big{
  font-family:var(--vt-f-num); font-weight:600; font-size:28px; letter-spacing:-.03em;
  color:var(--vt-madder); font-variant-numeric:tabular-nums; line-height:1;
}
.vt-pricebox .vt-unit{ font-size:12.5px; color:var(--vt-ink-2); font-weight:600; padding-bottom:2px; }
.vt-spec{ border:1px solid var(--vt-line); border-radius:var(--vt-r-m); overflow:hidden; background:var(--vt-surface); }
.vt-spec-row{
  display:flex; justify-content:space-between; gap:16px; padding:11px 14px;
  font-size:13px; border-bottom:1px solid var(--vt-line);
}
.vt-spec-row:last-child{ border-bottom:none; }
.vt-spec-row > span{ color:var(--vt-ink-3); flex:none; }
.vt-spec-row > b{ font-weight:600; text-align:right; }
.vt-note{
  background:var(--vt-haldi-soft); border:1px solid var(--vt-haldi-line);
  border-radius:var(--vt-r-m); padding:13px 14px;
}
.vt-note b{ display:block; font-size:12.5px; font-weight:700; margin-bottom:3px; color:var(--vt-haldi); }
.vt-note p{ margin:0 0 10px; font-size:12.5px; color:var(--vt-ink-2); }
.vt-buybar{
  position:sticky; bottom:var(--vt-tabbar-h); z-index:1035; display:flex; gap:10px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
  background:var(--vt-surface); border-top:1px solid var(--vt-line);
  box-shadow:0 -4px 16px rgba(0,0,0,.05);
}
.vt-buybar .vt-btn{ flex:1; }

/* ------------------------------------------------------------- inquiry --- */
.vt-line{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--vt-line); cursor:pointer; }
.vt-line-img{ width:72px; height:90px; flex:none; border-radius:10px; overflow:hidden; border:1px solid var(--vt-line); background:var(--vt-surface-2); }
.vt-line-img img{ width:100%; height:100%; object-fit:cover; }
.vt-line-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.vt-line-b h3{
  font-family:var(--vt-f-disp); font-weight:600; font-size:14px; margin:0;
  letter-spacing:-.015em; color:var(--vt-ink);
}
.vt-line-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; flex-wrap:wrap; }
.vt-qty{
  width:64px !important; text-align:center; font-family:var(--vt-f-num); font-weight:600;
  font-size:14px; border:1px solid var(--vt-line-strong) !important; border-radius:10px;
  background:var(--vt-surface) !important; height:36px; padding:0 !important;
  box-shadow:none !important; color:var(--vt-ink);
}
.vt-totals{
  background:var(--vt-surface); border:1px solid var(--vt-line); border-radius:var(--vt-r-m);
  padding:14px; display:flex; flex-direction:column; gap:9px;
}
.vt-trow{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--vt-ink-2); }
.vt-trow b,.vt-trow .vt-amt{
  font-family:var(--vt-f-num); font-weight:500; color:var(--vt-ink); font-variant-numeric:tabular-nums;
}
.vt-trow-grand{
  border-top:1px dashed var(--vt-line-strong); padding-top:11px; margin-top:2px;
  font-size:16px; color:var(--vt-ink); font-weight:700;
}
.vt-trow-grand .vt-amt{ font-size:19px; font-weight:600; color:var(--vt-madder); letter-spacing:-.02em; }
.vt-addr{
  background:var(--vt-surface); border:1px solid var(--vt-line); border-radius:var(--vt-r-m);
  padding:13px 14px; display:flex; gap:12px; align-items:flex-start;
}
.vt-addr > i{ font-size:17px; color:var(--vt-indigo); flex:none; margin-top:2px; }
.vt-addr p{ margin:2px 0 0; font-size:12.5px; color:var(--vt-ink-2); line-height:1.5; }
.vt-addr b{ font-size:13.5px; color:var(--vt-ink); }

/* -------------------------------------------------------------- orders --- */
.vt-order{
  background:var(--vt-surface); border:1px solid var(--vt-line); border-radius:var(--vt-r-m);
  overflow:hidden; box-shadow:var(--vt-shadow-s); margin-bottom:14px;
}
.vt-order-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--vt-line); background:var(--vt-surface-2);
}
.vt-order-no{ font-family:var(--vt-f-num); font-size:12px; font-weight:600; color:var(--vt-ink); }
.vt-order-no span{
  display:block; font-family:var(--vt-f-ui); font-size:10.5px; font-weight:600;
  color:var(--vt-ink-3); letter-spacing:.02em;
}
.vt-status{
  padding:4px 10px; border-radius:999px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  background:var(--vt-leaf-soft); color:var(--vt-leaf);
}
.vt-order-body{ padding:12px 14px; display:flex; gap:12px; }
.vt-order-img{ width:64px; height:78px; flex:none; border-radius:9px; overflow:hidden; border:1px solid var(--vt-line); background:var(--vt-surface-2); }
.vt-order-img img{ width:100%; height:100%; object-fit:cover; }
.vt-track{ display:flex; padding:0 14px 14px; }
.vt-track-step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; }
.vt-track-step::before{
  content:""; position:absolute; top:6px; left:-50%; width:100%; height:2px; background:var(--vt-line-strong);
}
.vt-track-step:first-child::before{ display:none; }
.vt-track-step.vt-done::before{ background:var(--vt-leaf); }
.vt-tdot{ width:13px; height:13px; border-radius:999px; background:var(--vt-surface); border:2px solid var(--vt-line-strong); z-index:1; }
.vt-track-step.vt-done .vt-tdot{ background:var(--vt-leaf); border-color:var(--vt-leaf); }
.vt-track-step b{ font-size:10px; font-weight:600; color:var(--vt-ink-3); text-align:center; }
.vt-track-step.vt-done b{ color:var(--vt-ink-2); }

/* ------------------------------------------------------------- account --- */
.vt-profile{
  background:linear-gradient(135deg,var(--vt-indigo) 0%,var(--vt-indigo-2) 100%);
  color:#F4F5FB; padding:20px 16px 22px; position:relative; overflow:hidden;
}
.vt-profile::after{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 9px);
}
.vt-profile-top{ display:flex; align-items:center; gap:13px; position:relative; z-index:1; }
.vt-avatar{
  width:52px; height:52px; border-radius:999px; background:rgba(255,255,255,.16);
  display:grid; place-items:center; font-family:var(--vt-f-disp); font-weight:700; font-size:19px;
  border:1.5px solid rgba(255,255,255,.3); flex:none; color:#fff;
}
.vt-profile h2{ font-family:var(--vt-f-disp); font-weight:700; font-size:19px; margin:0; letter-spacing:-.02em; color:#fff; }
.vt-profile .vt-who{ font-size:12px; color:rgba(244,245,251,.78); }
.vt-menu{ background:var(--vt-surface); border:1px solid var(--vt-line); border-radius:var(--vt-r-m); overflow:hidden; }
.vt-mrow{
  display:flex !important; align-items:center; gap:12px; padding:13px 14px;
  border-bottom:1px solid var(--vt-line); width:100%; text-align:left;
  transition:background .15s; color:var(--vt-ink);
}
.vt-mrow:last-child{ border-bottom:none; }
.vt-mrow:hover{ background:var(--vt-surface-2); color:var(--vt-ink); }
.vt-mrow > i:first-child{ font-size:16px; color:var(--vt-ink-3); flex:none; width:18px; text-align:center; }
.vt-mrow b{ font-weight:500; font-size:13.5px; flex:1; }
.vt-mrow > i:last-child{ font-size:13px; color:var(--vt-ink-3); }

/* -------------------------------------------------------------- footer --- */
.vt-foot{ margin-top:auto; padding:22px 16px 26px; border-top:1px solid var(--vt-line); background:var(--vt-surface); }
.vt-foot-links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:14px; }
.vt-foot-links a{ font-size:12.5px; color:var(--vt-ink-2); }
.vt-foot-links a:hover{ color:var(--vt-indigo); }
.vt-foot small,.vt-foot .vt-foot-meta{ display:block; font-size:11.5px; color:var(--vt-ink-3); line-height:1.7; }
.vt-foot-meta b{ color:var(--vt-ink); }

/* --------------------------------------------------------------- alerts -- */
#alert_container{
  position:fixed; bottom:calc(var(--vt-tabbar-h) + 16px); left:50%; transform:translateX(-50%);
  z-index:9999; width:auto; max-width:90%; text-align:center;
}
#alert_container .alert{
  display:inline-block; min-width:260px; padding:12px 18px; margin-top:10px;
  border-radius:999px; border:none; background:var(--vt-ink); color:var(--vt-ground);
  font-size:13px; font-weight:600; box-shadow:var(--vt-shadow-m);
}
#alert_container .alert .close{ color:var(--vt-ground); opacity:.6; margin-left:10px; }

/* ============================================================================
   VTLApp additions — components this app has that TextileFare does not.
   Same tokens, same vt- idiom; kept in one block so the shared part of the
   system above stays diffable against the TextileFare original.
   ========================================================================= */

/* ------------------------------------------------- product watermarks ---- */
/* Client ID (left) and design name (right), burnt over the catalogue image
   so screenshots stay traceable. Never intercept clicks on the card. */
.watermark{
  position:absolute; bottom:5px; z-index:5; pointer-events:none;
  background:rgba(255,255,255,.75); color:#333;
  padding:2px 5px; border-radius:4px;
  font-family:var(--vt-f-num); font-size:9px; font-weight:600; line-height:12px;
  white-space:normal; word-wrap:break-word; overflow-wrap:break-word;
}
.watermark-left{ left:5px; max-width:35%; text-align:left; }
.watermark-right{ right:5px; max-width:55%; text-align:right; }

/* ------------------------------------------------------- notify block ---- */
/* Only the admin account sees this, so it must not reserve space in the card
   for everyone else — ProductList's JS reveals it when the input exists. */
.vt-card-notify{ display:none; gap:6px; align-items:center; margin-top:8px; }
.vt-card-notify .vt-input{ font-size:12px; padding:6px 10px !important; }

/* --------------------------------------------------------- quick view ---- */
.qv-btn{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:4;
  background:var(--vt-ink); color:var(--vt-surface);
  border:none; border-radius:10px; padding:9px;
  font-family:var(--vt-f-ui); font-size:12.5px; font-weight:600; letter-spacing:.02em;
  cursor:pointer; transition:opacity .25s ease,transform .25s ease;
}
@media (hover:hover){
  .qv-btn{ opacity:0; transform:translateY(6px); }
  .vt-card:hover .qv-btn,
  .vt-card:focus-within .qv-btn{ opacity:1; transform:translateY(0); }
}
@media (hover:none){
  .qv-btn{ position:static; opacity:1; transform:none; margin:8px 11px 0; width:calc(100% - 22px); }
}

.qv-backdrop{
  position:fixed; inset:0; z-index:1050; padding:2rem;
  background:rgba(15,14,12,.55);
  display:none; align-items:center; justify-content:center;
}
.qv-backdrop.is-open{ display:flex; }
.qv-modal{
  position:relative; width:100%; max-width:46rem; min-width:0; max-height:88vh;
  background:var(--vt-surface); color:var(--vt-ink);
  border-radius:var(--vt-r-l); overflow:hidden; box-shadow:var(--vt-shadow-m);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.qv-modal__media{ position:relative; background:var(--vt-surface-2); aspect-ratio:1/1; min-width:0; }
.qv-modal__media img{ width:100%; height:100%; object-fit:contain; display:block; }
.qv-modal__body{ padding:22px 20px; overflow-y:auto; min-width:0; }
.qv-close{
  position:absolute; top:10px; right:10px; z-index:5;
  width:32px; height:32px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(255,255,255,.95); box-shadow:var(--vt-shadow-s);
  display:grid; place-items:center;
}
.qv-brand{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vt-ink-3); overflow-wrap:break-word;
}
.qv-title{
  font-family:var(--vt-f-disp); font-weight:700; font-size:22px; letter-spacing:-.03em;
  margin:5px 0 8px; color:var(--vt-ink); overflow-wrap:break-word;
}
.qv-price{
  font-family:var(--vt-f-num); font-weight:600; font-size:24px; letter-spacing:-.03em;
  color:var(--vt-madder); font-variant-numeric:tabular-nums; margin:3px 0 14px;
}
.qv-price small{ font-family:var(--vt-f-ui); font-size:12px; font-weight:600; color:var(--vt-ink-3); }
.qv-meta{ font-size:13px; color:var(--vt-ink-2); line-height:1.6; margin-bottom:16px; overflow-wrap:break-word; }
.qv-actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.qv-actions .btn,
.qv-actions .vt-btn{ flex:1; }
/* quick-view.js styles this button directly; give it the vt-btn look. */
.qv-actions #qv-add{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; border:none; cursor:pointer;
  background:var(--vt-btn-bg); color:var(--vt-btn-fg);
  font-family:var(--vt-f-ui); font-size:14px; font-weight:600;
}
@media (max-width:699px){
  .qv-backdrop{ padding:0; }
  .qv-modal{
    grid-template-columns:minmax(0,1fr);
    max-height:100vh; height:100%; border-radius:0; max-width:100%;
  }
  .qv-modal__media{ aspect-ratio:16/10; }
}

/* ---------------------------------------------------------- PDP thumbs --- */
.vt-thumbs{ display:flex; gap:8px; padding:12px 16px 0; overflow-x:auto; }
.vt-thumb{
  width:54px; height:54px; flex:none; padding:0; cursor:pointer;
  border:2px solid transparent; border-radius:10px; overflow:hidden;
  background:var(--vt-surface-2);
}
.vt-thumb img{ width:100%; height:100%; object-fit:cover; }
.vt-thumb.vt-on{ border-color:var(--vt-indigo); }
@media (min-width:700px){ .vt-thumbs{ padding:12px 0 0; } }

/* --------------------------------------------------------- cart extras --- */
.vt-qty-wrap{ display:flex; align-items:center; gap:8px; }
.vt-qty-wrap label{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vt-ink-3);
}
.vt-remove{ color:var(--vt-madder) !important; }
.vt-fineprint{ margin:2px 0 0; font-size:11.5px; color:var(--vt-ink-3); line-height:1.5; }
.vt-sendbar{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
/* On phones the place-order button follows the page; from tablet up the whole
   summary column sticks beside the cart lines. */
@media (min-width:700px){
  .vt-summary{
    position:sticky; top:calc(var(--vt-topbar-h) + 16px);
    padding-left:0; padding-right:0;
  }
}

/* -------------------------------------------------------- order extras --- */
.vt-order-figures{ display:flex; gap:16px; font-size:12px; color:var(--vt-ink-3); }
.vt-order-figures b{
  font-family:var(--vt-f-num); font-weight:600; color:var(--vt-ink);
  font-variant-numeric:tabular-nums;
}
.vt-order-actions{ display:flex; gap:8px; padding:0 14px 14px; }
.vt-order-actions .vt-btn{ flex:1; }
/* GridView inside .vt-order-grid: one order per row on phones, two from
   tablet up. The tbody is already a grid via .vt-gv. */
.vt-order-grid .vt-gv > tbody{ padding:0; gap:14px; }
.vt-order-grid .vt-order{ margin-bottom:0; height:100%; }
@media (min-width:700px){
  .vt-order-grid .vt-gv > tbody{ grid-template-columns:repeat(2,1fr); }
}

/* ---------------------------------------------------------- form card ---- */
/* Shared by MyProfile, ChangePassword, NewRegistration, FeedBack, ClientMaster
   so every form in the app has the same card, grid and label treatment. */
.vt-formcard{
  background:var(--vt-surface); border:1px solid var(--vt-line);
  border-radius:var(--vt-r-m); padding:16px;
}
.vt-formgrid{ display:grid; grid-template-columns:1fr; gap:14px; }
.vt-formcard .vt-input[readonly]{ background:var(--vt-surface-2) !important; color:var(--vt-ink-2); }
.vt-formcard .vt-input[readonly].vt-amt-strong{
  font-family:var(--vt-f-num); font-weight:600; color:var(--vt-madder);
}
/* Back button sitting on the indigo profile banner. */
.vt-back-light{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#fff !important;
}
.vt-back-light:hover{ background:rgba(255,255,255,.26) !important; color:#fff !important; }

@media (min-width:700px){
  .vt-formgrid{ grid-template-columns:repeat(2,1fr); }
  .vt-span2{ grid-column:1 / -1; }
}

/* --------------------------------------------------- outstanding table --- */
/* MyOutstanding renders a real data table; keep it a table, but let it scroll
   inside its own card rather than forcing the page to scroll sideways. */
.vt-tablecard{
  background:var(--vt-surface); border:1px solid var(--vt-line);
  border-radius:var(--vt-r-m); box-shadow:var(--vt-shadow-s);
  overflow:hidden; margin:0 16px 14px;
}
.vt-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vt-table{ width:100%; border-collapse:collapse; background:none !important; margin:0 !important; }
.vt-table th{
  background:var(--vt-surface-2); color:var(--vt-ink-3);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 12px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--vt-line);
}
.vt-table td{
  padding:11px 12px; font-size:13px; color:var(--vt-ink-2);
  border-bottom:1px solid var(--vt-line); vertical-align:middle;
}
.vt-table tr:last-child td{ border-bottom:none; }
.vt-table .vt-num{
  font-family:var(--vt-f-num); font-variant-numeric:tabular-nums;
  color:var(--vt-ink); font-weight:600; text-align:right; white-space:nowrap;
}
.vt-table tr:hover td{ background:var(--vt-surface-2); }

/* ------------------------------------------------------ invoice rows ----- */
/* MyOutstanding: one row per invoice, selectable, with the ageing badge and
   amount right-aligned so the money column scans down the page. */
.vt-inv{
  display:flex; align-items:flex-start; gap:12px; padding:13px 14px;
  background:var(--vt-surface); border:1px solid var(--vt-line);
  border-radius:var(--vt-r-m); box-shadow:var(--vt-shadow-s); margin-bottom:10px;
}
.vt-inv-check{ flex:none; padding-top:2px; }
.vt-inv-check input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--vt-indigo); }
.vt-inv-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.vt-inv-no a,.vt-inv-no .vt-inv-link{
  font-family:var(--vt-f-num); font-size:13.5px; font-weight:600;
  color:var(--vt-indigo) !important; text-decoration:none;
}
.vt-inv-no a:hover{ text-decoration:underline; }
.vt-inv-sub{ font-size:12px; color:var(--vt-ink-3); line-height:1.5; }
.vt-inv-sub b{ color:var(--vt-ink-2); font-weight:600; }
.vt-lr-link{
  font-size:12px; font-weight:600; color:var(--vt-indigo) !important;
  align-self:flex-start; text-decoration:none;
}
.vt-lr-link:hover{ text-decoration:underline; }
.vt-inv-meta{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.vt-days{
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--vt-surface-2); color:var(--vt-ink-2);
  font-family:var(--vt-f-num); font-size:10.5px; font-weight:600;
}
/* Severity set by assets/js/due-badge.js once it has parsed the day count. */
.vt-days.status-pill--warn{ background:#FBE9E7; color:var(--vt-madder); }  /* overdue  */
.vt-days.status-pill--due { background:var(--vt-haldi-soft); color:var(--vt-haldi); } /* today */
.vt-days.status-pill--ok  { background:var(--vt-leaf-soft); color:var(--vt-leaf); }   /* ahead */
.vt-inv-amt{
  font-family:var(--vt-f-num); font-weight:600; font-size:16px; letter-spacing:-.02em;
  color:var(--vt-ink); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.vt-inv-amt small{
  display:block; font-family:var(--vt-f-ui); font-size:10px; font-weight:600;
  color:var(--vt-ink-3); text-align:right; letter-spacing:.04em;
}

/* ------------------------------------------------------------- pay bar --- */
/* Sits directly above the mobile tab bar and goes inline at desktop, where
   the tab bar is gone. */
.vt-paybar{
  position:fixed; left:0; right:0; bottom:var(--vt-tabbar-h); z-index:1035;
  background:var(--vt-surface); border-top:1px solid var(--vt-line);
  box-shadow:0 -4px 16px rgba(0,0,0,.06);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:10px;
}
.vt-paybar-figs{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.vt-paybar-fig{ min-width:0; }
.vt-paybar-fig b{
  display:block; font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vt-ink-3); margin-bottom:3px;
}
.vt-paybar-fig .vt-amt{
  font-family:var(--vt-f-num); font-weight:600; font-size:18px;
  color:var(--vt-ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
/* Paying is set as a figure, not a form control: same face, size and alignment
   as Net dues, in dark green. It is still an editable TextBox, so a hairline
   underline keeps that discoverable without reintroducing the box. */
.vt-paybar-fig .vt-amt-pay{
  display:inline-flex; align-items:baseline; gap:1px;
  color:var(--vt-leaf);
}
.vt-paybar-fig input.vt-payinput{
  width:100%; max-width:150px; height:auto;
  font-family:var(--vt-f-num); font-weight:600; font-size:18px;
  color:var(--vt-leaf); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  background:none !important; box-shadow:none !important;
  border:none !important; border-bottom:1px solid var(--vt-line) !important;
  border-radius:0 !important; padding:0 0 2px !important;
}
.vt-paybar-fig input.vt-payinput:focus{
  outline:none; border-bottom-color:var(--vt-leaf) !important;
}
.vt-paybar-btns{ display:flex; gap:9px; }
.vt-paybar-btns .vt-btn{ flex:1; }
@media (min-width:1024px){ .vt-paybar{ bottom:0; } }

/* ----------------------------------------------------- wishlist card ----- */
/* Two actions stacked under the price, both full width, so neither wins on a
   narrow card. */
.vt-wishactions{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.vt-wishactions .vt-btn{ width:100%; }

/* -------------------------------------------------------- banner head ---- */
/* Indigo banner with the same woven warp/weft as the Login art panel, sized
   for pages that sit inside the master chrome. Shared by ChangePassword,
   NewRegistration, FeedBack, ClientMaster. */
.vt-bannerhead{
  background:linear-gradient(135deg,var(--vt-indigo) 0%,var(--vt-indigo-2) 100%);
  color:#F4F5FB; padding:20px 16px 22px; position:relative; overflow:hidden;
}
.vt-bannerhead::after{
  content:""; position:absolute; inset:0; opacity:.38; pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(90deg,#F0C86E 0 1px,transparent 1px 46px);
}
.vt-bannerhead-in{ display:flex; align-items:center; gap:13px; position:relative; z-index:1; }
.vt-bannerhead h2{
  font-family:var(--vt-f-disp); font-weight:700; font-size:19px;
  letter-spacing:-.02em; margin:0; color:#fff;
}
.vt-bannerhead .vt-who{ font-size:12px; color:rgba(244,245,251,.78); }

/* ---------------------------------------------------------- auth card ---- */
/* Echoes .vt-login-form: same radius, border, shadow and vertical rhythm, for
   the standalone forms that sit inside the master chrome. */
.vt-authcard{
  display:flex; flex-direction:column; gap:16px;
  width:100%; max-width:460px; margin:0 auto; padding:24px 20px 26px;
  background:var(--vt-surface); border:1px solid var(--vt-line);
  border-radius:var(--vt-r-l); box-shadow:var(--vt-shadow-s);
}
.vt-authcard.vt-authcard-wide{ max-width:720px; }
.vt-authcard h2{
  font-family:var(--vt-f-disp); font-weight:700; font-size:22px;
  letter-spacing:-.03em; margin:2px 0 4px; color:var(--vt-ink);
}
.vt-authcard .vt-intro{ margin:0; font-size:13.5px; color:var(--vt-ink-2); }
.vt-authcard .vt-helper{ text-align:center; font-size:12.5px; color:var(--vt-ink-3); margin:0; }
.vt-authcard .vt-helper a{ color:var(--vt-indigo); font-weight:600; }
/* an empty message label must not add a gap to the flex column */
.vt-authcard .vt-error:empty,
.vt-authcard .vt-ok:empty{ display:none; }

.vt-error{
  color:var(--vt-madder) !important; font-weight:600; font-size:13px;
  display:block; text-align:center;
}
.vt-ok{
  color:var(--vt-leaf) !important; font-weight:600; font-size:13px;
  display:block; text-align:center;
}

@media (min-width:700px){
  .vt-bannerhead{ padding:26px 26px 28px; }
  .vt-authcard{ padding:34px 34px 36px; box-shadow:var(--vt-shadow-m); }
}

/* -------------------------------------------------------------- prose ---- */
/* Policy and content pages: About, Contact, Privacy, Shipping, Refund,
   Return, Cancellation. One measure, one scale, nothing bespoke per page. */
.vt-prose{
  max-width:72ch; margin:0 auto; padding:22px 16px 34px;
  color:var(--vt-ink-2); font-size:14.5px; line-height:1.72;
}
.vt-prose h1{
  font-family:var(--vt-f-disp); font-weight:800; font-size:26px; letter-spacing:-.03em;
  color:var(--vt-ink); margin:0 0 8px; text-wrap:balance;
}
.vt-prose h2{
  font-family:var(--vt-f-disp); font-weight:700; font-size:18px; letter-spacing:-.02em;
  color:var(--vt-ink); margin:28px 0 8px; text-wrap:balance;
}
.vt-prose h3{
  font-family:var(--vt-f-ui); font-weight:700; font-size:14px;
  color:var(--vt-ink); margin:20px 0 6px;
}
.vt-prose p{ margin:0 0 12px; }
.vt-prose ul,.vt-prose ol{ margin:0 0 14px; padding-left:22px; }
.vt-prose li{ margin-bottom:6px; }
.vt-prose a{ color:var(--vt-indigo); font-weight:600; }
.vt-prose strong,.vt-prose b{ color:var(--vt-ink); font-weight:600; }
.vt-prose hr{ border:none; border-top:1px solid var(--vt-line); margin:26px 0; }
.vt-prose table{ width:100%; border-collapse:collapse; margin:0 0 16px; }
.vt-prose th,.vt-prose td{
  padding:9px 12px; border:1px solid var(--vt-line); text-align:left; font-size:13.5px;
}
.vt-prose th{ background:var(--vt-surface-2); color:var(--vt-ink); font-weight:600; }
.vt-prose-lead{ font-size:16px; color:var(--vt-ink-2); margin:0 0 20px; }
@media (min-width:700px){
  .vt-prose{ padding:34px 26px 48px; font-size:15px; }
  .vt-prose h1{ font-size:32px; }
}

/* --------------------------------------------------------- info cards ---- */
/* Contact details, payment result rows — label over value, in a card. */
.vt-infogrid{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin:0 0 18px;
}
.vt-infocard{
  background:var(--vt-surface); border:1px solid var(--vt-line);
  border-radius:var(--vt-r-m); padding:14px 16px;
}
.vt-infocard b{
  display:block; font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vt-ink-3); margin-bottom:5px;
}
.vt-infocard span{ font-size:14px; color:var(--vt-ink); line-height:1.55; }
.vt-infocard span.vt-num{ font-family:var(--vt-f-num); font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------- empty states ---- */
.vt-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:56px 24px; text-align:center;
}
.vt-empty i{ font-size:38px; color:var(--vt-line-strong); }
.vt-empty h3{
  font-family:var(--vt-f-disp); font-weight:700; font-size:17px;
  margin:0; color:var(--vt-ink);
}
.vt-empty p{ margin:0; font-size:13px; color:var(--vt-ink-3); max-width:36ch; }

/* =============================== TABLET  ≥700px ========================== */
@media (min-width:700px){
  .vt-pad,.vt-sect{ padding-left:26px; padding-right:26px; }
  .vt-tilegrid,.vt-gv > tbody{ padding-left:26px; padding-right:26px; }
  .vt-subbar,.vt-resultline{ padding-left:26px; padding-right:26px; }
  .vt-hero .carousel-inner > .item{ height:340px; }
  .vt-hero-copy{ padding:26px 26px 30px; }
  .vt-hero-copy h1{ font-size:34px; }
  .vt-hero-copy p{ font-size:15px; }
  .vt-tilegrid{ grid-template-columns:repeat(4,1fr); }
  .vt-tile{ height:120px; }
  .vt-gv > tbody{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .vt-sect-head h2{ font-size:21px; }
  .vt-page-title{ font-size:24px; }
  .vt-topbar-in{ padding:13px 26px; }
  .vt-searchbox{ display:flex; flex:1; max-width:340px; margin:0 8px; }

  .vt-pdp{ flex-direction:row; gap:26px; padding:22px 26px; align-items:flex-start; }
  .vt-pdp-media{ flex:1 1 46%; position:sticky; top:calc(var(--vt-topbar-h) + 16px); }
  .vt-snap{ border:1px solid var(--vt-line); border-radius:var(--vt-r-m); overflow:hidden; }
  .vt-snap-item img{ height:420px; }
  .vt-pdp-body{ flex:1 1 54%; padding:0; }
  .vt-buybar{ position:static; border:none; background:none; padding:0; box-shadow:none; }

  .vt-two-col{ display:grid; grid-template-columns:1fr 300px; gap:22px; align-items:start; padding:22px 26px; }
  .vt-two-col .vt-pad{ padding-left:0; padding-right:0; }
  .vt-order-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  .vt-order-grid .vt-order{ margin-bottom:0; }
  .vt-foot-inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:26px; }
}

/* =============================== DESKTOP ≥1024px ========================= */
@media (min-width:1024px){
  .vt-topbar-in{ padding:14px 44px; gap:20px; }
  .vt-nav{ display:flex; gap:4px; align-items:center; }
  .vt-logo{ margin-right:8px; }
  .vt-searchbox{ max-width:400px; margin-left:auto; margin-right:0; }
  .vt-ico-mobile-only{ display:none !important; }

  .vt-pad,.vt-sect{ padding-left:44px; padding-right:44px; }
  .vt-tilegrid,.vt-gv > tbody{ padding-left:44px; padding-right:44px; }
  .vt-subbar,.vt-resultline{ padding-left:44px; padding-right:44px; }
  .vt-sect{ padding-top:34px; }
  .vt-sect-head h2{ font-size:24px; }
  .vt-page-title{ font-size:26px; }

  .vt-hero .carousel-inner > .item{ height:420px; }
  .vt-hero-copy{
    inset:0; display:flex; flex-direction:column; justify-content:center;
    padding:44px 44px 44px; background:linear-gradient(105deg,rgba(10,12,22,.92) 8%,rgba(10,12,22,.6) 46%,transparent 76%);
  }
  .vt-hero-copy h1{ font-size:44px; max-width:14ch; }
  .vt-hero-copy p{ font-size:15.5px; }
  .vt-hero .carousel-indicators{ left:44px; bottom:26px; }

  .vt-tilegrid{ gap:16px; }
  .vt-tile{ height:150px; }
  .vt-gv > tbody{ grid-template-columns:repeat(4,1fr); gap:18px; }

  .vt-pdp{ padding:26px 44px 40px; gap:44px; }
  .vt-pdp-body h1{ font-size:30px; }
  .vt-snap-item img{ height:520px; }

  .vt-two-col{ grid-template-columns:1fr 340px; gap:32px; padding:26px 44px 40px; }
  .vt-foot{ padding:34px 44px 40px; }
  #alert_container{ bottom:28px; }
  .vt-buybar{ bottom:0; }
}