/*
Theme Name: VivyQuest Fashion
Theme URI: https://vivyquest.com
Author: T-Zion Agency
Description: Clothing, wigs, beddings and fashion items for VivyQuest World &
  Logistics. WooCommerce storefront on the same design system as VivyQuest
  Freight, so the two sites read as one brand. Phone-first, no external requests.
Version: 1.0
Text Domain: vivyquest-fashion
*/

/* ==========================================================================
   1. Tokens — straight from the proposal's design system
   ========================================================================== */
:root{
  --ink:#1A1020;
  --violet:#6E2A8F;
  --violet-2:#57206F;
  --magenta:#C2389E;
  --lilac:#EFE4F4;
  --paper:#F8F5F2;
  --white:#FFFFFF;
  --muted:#63576D;
  --line:#E3D9E9;
  --hair:rgba(26,16,32,.10);
  --good:#0F6B3F;
  --warn:#9A3412;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(18px,4vw,48px);
  --maxw:1180px;
  --radius:14px;
  --shadow:0 18px 50px rgba(26,16,32,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(34px,6vw,60px)}
h2{font-size:clamp(26px,4vw,40px)}
h3{font-size:clamp(19px,2.2vw,24px)}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}

/* The proposal's technical label: mono, uppercase, wide tracking */
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.20em;text-transform:uppercase;color:var(--magenta);
}
.kicker--muted{color:var(--muted)}

/* Rotated-square bullets instead of dots */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:11px}
.ticks li::before{
  content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;
  background:var(--magenta);transform:rotate(45deg);
}
.ticks--light li::before{background:var(--lilac)}

/* Skip link, because a freight site gets keyboard and screen-reader users too */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:0}

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;border:1px solid transparent;border-radius:999px;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  line-height:1;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--violet);color:#fff}
.btn--primary:hover{background:var(--violet-2)}
.btn--magenta{background:var(--magenta);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--onDark:hover{background:#fff;color:var(--ink)}
.btn svg{width:16px;height:16px;flex:0 0 auto}

/* ==========================================================================
   3. Header
   ========================================================================== */
.top{
  background:var(--ink);color:#fff;font-family:var(--mono);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.top .wrap{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;text-align:center}
.top a{color:#fff;text-decoration:none;opacity:.92}
.top a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.top .sep{opacity:.35}

.site-header{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* The lockup is a detailed crest — below about 70px the flourish turns to mush. */
.brand img{height:76px;width:auto}
.brand .wordmark{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.05;color:var(--violet)}
.brand .wordmark small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.18em;color:var(--ink);margin-top:3px}

.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.nav a{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 0;
  border-bottom:1px solid transparent;
}
.nav a:hover,.nav .current-menu-item>a{border-bottom-color:var(--magenta)}

.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:block;margin-left:auto}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:96px 28px 28px;
    transform:translateX(100%);transition:transform .28s ease;box-shadow:var(--shadow);
    margin-left:0;
  }
  .nav[data-open="true"]{transform:none}
  .nav ul{flex-direction:column;gap:0}
  .nav li{border-bottom:1px solid var(--line)}
  .nav a{display:block;padding:16px 0;font-size:13px}
  .nav .btn{margin-top:22px}
  .brand img{height:56px}
}

/* ==========================================================================
   4. Hero — dotted flight-path arc, straight from the proposal's motifs
   ========================================================================== */
/* The scene is lifted from the flyer itself — skyline, containers, truck.
   It is a 4.6x blow-up of a small crop, so it is deliberately weighted to the
   right where it sits behind the docket rather than behind body copy, and the
   scrim below carries most of the contrast work. */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:var(--ink) url(assets/hero.jpg) right center/cover no-repeat;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(26,16,32,.97) 0%,rgba(26,16,32,.93) 30%,rgba(26,16,32,.70) 52%,rgba(26,16,32,.30) 74%,rgba(26,16,32,.14) 100%),
    linear-gradient(180deg,rgba(26,16,32,.55) 0%,rgba(26,16,32,0) 34%),
    radial-gradient(900px 520px at 8% 96%,rgba(110,42,143,.42),transparent 68%);
}
.hero .arc{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(56px,9vw,104px);padding-bottom:clamp(56px,9vw,104px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{color:#fff;max-width:16ch;margin:16px 0 18px}
.hero h1 em{font-style:normal;color:var(--magenta)}
.hero p.lede{color:rgba(255,255,255,.86);font-size:clamp(16px,1.7vw,19px);max-width:46ch;margin-bottom:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.hero-facts div{min-width:120px}
.hero-facts b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;color:#fff}
.hero-facts .glyphs{display:flex;align-items:center;gap:9px;height:34px}
.hero-facts .glyphs svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-facts .glyphs i{font-style:normal;font-weight:400;opacity:.45}
.hero-facts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* The waybill docket — the proposal's manifest block, reused as the hero card */
.docket{
  background:var(--white);color:var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.docket-head{
  background:var(--violet);color:#fff;padding:16px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.docket-head .t{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.docket-head .n{font-family:var(--mono);font-size:11px;opacity:.82}
.docket-body{padding:22px}
.docket-rows{border-top:1px dashed var(--line)}
.docket-rows div{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px dashed var(--line);
}
.docket-rows dt,.docket-rows .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.docket-rows .v{font-weight:500}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero .arc{opacity:.32}
  /* No room for the scene to breathe beside the copy — darken it right down
     and let it work as texture rather than as a picture. */
  .hero::before{
    background:
      linear-gradient(180deg,rgba(26,16,32,.86) 0%,rgba(26,16,32,.92) 55%,rgba(26,16,32,.96) 100%),
      radial-gradient(700px 420px at 10% 96%,rgba(110,42,143,.42),transparent 70%);
  }
}

/* ==========================================================================
   5. Sections
   ========================================================================== */
.section{padding:clamp(52px,7vw,96px) 0}
.section--tight{padding:clamp(38px,5vw,64px) 0}
.section--lilac{background:var(--lilac)}
.section--ink{background:var(--ink);color:#fff}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink p{color:rgba(255,255,255,.82)}
.section-head{max-width:62ch;margin-bottom:clamp(26px,4vw,44px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin:10px 0 12px}
.section-head p{color:var(--muted);margin:0}
.section--ink .section-head p{color:rgba(255,255,255,.78)}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;position:relative;overflow:hidden;
}
.card .ico{width:44px;height:44px;color:var(--violet);margin-bottom:16px}
.card .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);margin-bottom:14px}
.card .more{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--violet);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ==========================================================================
   6. Trust band, newsletter, footer
   ========================================================================== */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.trust .item{display:flex;gap:14px;align-items:flex-start}
.trust svg{width:26px;height:26px;flex:0 0 auto;color:var(--magenta);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trust h4{font-size:16px;margin-bottom:5px}
.trust p{font-size:14px;color:var(--muted);margin:0}
.section--ink .trust p{color:rgba(255,255,255,.75)}

.subscribe{text-align:center}
.subscribe form{display:flex;gap:10px;max-width:470px;margin:22px auto 0;flex-wrap:wrap}
.subscribe input{flex:1 1 220px;min-width:0;font-family:var(--sans);font-size:16px;padding:14px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.subscribe .small{font-size:12.5px;color:var(--muted);margin-top:12px}

.site-footer{background:var(--ink);color:rgba(255,255,255,.78);padding:clamp(46px,6vw,72px) 0 0}
.site-footer h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:500}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
.foot-brand .mark{font-family:var(--serif);font-size:25px;font-weight:700;color:#fff;line-height:1.1}
.foot-brand .mark small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--magenta);margin-top:6px}
.foot-brand p{margin:16px 0 0;font-size:14.5px;max-width:34ch}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px}
.site-footer a{color:rgba(255,255,255,.78);text-decoration:none;font-size:14.5px}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-num{font-family:var(--mono);font-size:15px;color:#fff;display:block;margin-bottom:4px}
.foot-num small{display:block;font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.55);margin-top:2px}
.foot-bar{
  margin-top:clamp(34px,5vw,54px);border-top:1px solid rgba(255,255,255,.14);
  padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* ==========================================================================
   7. Fixed WhatsApp button — mobile, as the proposal specifies
   ========================================================================== */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:80;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  display:none;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.wa-float svg{width:30px;height:30px;fill:currentColor}
@media (max-width:900px){ .wa-float{display:flex} }

/* ==========================================================================
   8. Interior pages
   ========================================================================== */
.page-hero{background:var(--ink);color:#fff;padding:clamp(40px,6vw,72px) 0 clamp(34px,5vw,56px)}
.page-hero h1{color:#fff;margin:12px 0 0;max-width:20ch}
.entry{padding:clamp(38px,6vw,72px) 0;max-width:760px;margin:0 auto}
.entry h2{margin:1.6em 0 .5em}
.entry h3{margin:1.4em 0 .4em}
.entry ul,.entry ol{padding-left:22px}
.entry li{margin-bottom:9px}

/* ==========================================================================
   9. Reveal on scroll — disabled for anyone who asked for less motion
   ========================================================================== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
  *{scroll-behavior:auto !important}
}

/* ==========================================================================
   10. Product grid
   ========================================================================== */
.products-grid,ul.products{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(14px,2vw,26px);
}
.product-card,ul.products li.product{position:relative;margin:0}
.product-card a,ul.products li.product>a{text-decoration:none;color:inherit;display:block}
.product-card .shot,ul.products li.product img{
  aspect-ratio:4/5;width:100%;object-fit:cover;background:var(--lilac);
  border-radius:var(--radius);overflow:hidden;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.product-card:hover .shot,ul.products li.product:hover img{transform:scale(1.03)}
.product-card .wrapshot,ul.products li.product .wrapshot{overflow:hidden;border-radius:var(--radius);position:relative;display:block}

.product-card__cat,ul.products .vqf-cat{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:block;margin:14px 0 5px;
}
.product-card__name,ul.products .woocommerce-loop-product__title{
  font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.25;margin:0 0 6px;color:var(--ink);
}
ul.products .woocommerce-loop-product__title{padding:0 !important;font-size:17px !important}
.price,ul.products .price{
  font-family:var(--mono);font-size:14px;color:var(--ink);display:block;margin:0;font-weight:500;
}
.price del{opacity:.45;margin-right:7px;font-weight:400}
.price ins{text-decoration:none;color:var(--magenta)}
/* The Naira line is indicative, so it is set quieter than the price it follows. */
.vqf-alt{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:3px;letter-spacing:.02em}

.vqf-flag{
  position:absolute;top:12px;left:12px;z-index:3;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:var(--ink);color:#fff;
}
.vqf-flag--out{background:rgba(26,16,32,.82)}
.vqf-flag--sale{background:var(--magenta)}
.outofstock .wrapshot{opacity:.55}

ul.products li.product .button,ul.products li.product .added_to_cart{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding:12px 20px;border-radius:999px;background:var(--violet);color:#fff;text-decoration:none;border:0;cursor:pointer;
}
ul.products li.product .button:hover{background:var(--violet-2)}

.woocommerce .woocommerce-result-count{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.woocommerce .woocommerce-ordering select{
  font-family:var(--sans);font-size:14px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--white);color:var(--ink);
}
.woocommerce-products-header{display:none}

/* ==========================================================================
   11. Single product
   ========================================================================== */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:start;padding:clamp(30px,5vw,60px) 0}
.woocommerce div.product .woocommerce-product-gallery{width:100% !important;float:none !important;margin:0 !important}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:var(--radius)}
.woocommerce div.product .summary{width:100% !important;float:none !important;margin:0 !important}
.woocommerce div.product .product_title{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);margin:0 0 12px}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--mono);font-size:22px;color:var(--ink);margin:0 0 4px;font-weight:500;
}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-2);margin:18px 0 0}
.woocommerce div.product form.cart{margin:26px 0 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.woocommerce div.product form.cart .quantity input{
  width:78px;font-family:var(--mono);font-size:15px;padding:13px 10px;text-align:center;
  border:1px solid var(--line);border-radius:10px;background:var(--paper);
}
.woocommerce div.product form.cart .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce .woocommerce-message .button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding:15px 26px;border-radius:999px;background:var(--violet);color:#fff;border:0;cursor:pointer;text-decoration:none;
  transition:background .18s ease,transform .18s ease;line-height:1;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{background:var(--violet-2);color:#fff;transform:translateY(-2px)}
.woocommerce .button.alt,.woocommerce button.button.alt{background:var(--magenta)}
.woocommerce .button.alt:hover,.woocommerce button.button.alt:hover{background:#A72C87}

.woocommerce div.product .product_meta{
  margin-top:26px;padding-top:18px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.woocommerce div.product .product_meta a{color:var(--violet);text-decoration:none}

.vqf-order{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vqf-order .btn{background:#25D366;color:#fff}
.vqf-order .btn:hover{background:#1FB855}
.vqf-order small{color:var(--muted);font-size:12.5px}

.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:12px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 20px;border-bottom:1px solid var(--line);display:flex;gap:6px;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;border:0;border-radius:0;margin:0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  padding:13px 16px;display:block;color:var(--muted);border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--magenta)}
@media (max-width:820px){ .woocommerce div.product{grid-template-columns:1fr} }

/* ==========================================================================
   12. Cart, checkout, account
   ========================================================================== */
.woo-hero{padding:clamp(34px,5vw,64px) 0 clamp(20px,3vw,34px);border-bottom:1px solid var(--line)}
.woo-hero h1{margin-bottom:8px}
.woo-hero p{color:var(--ink-2);max-width:56ch;margin:10px 0 0}

.woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--radius);border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce table.shop_table th{
  background:var(--ink);color:#fff;font-family:var(--mono);font-weight:500;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:14px 16px;
}
.woocommerce table.shop_table td{padding:16px;border-top:1px solid var(--line)}
.woocommerce table.shop_table img{width:64px;border-radius:8px}

.woocommerce form .form-row label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container .select2-selection--single{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:13px 14px;height:auto;
}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{
  outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(110,42,143,.14);
}
.woocommerce-checkout #payment{background:var(--lilac);border-radius:var(--radius)}
.woocommerce-checkout #payment div.payment_box{background:var(--white);border-radius:10px}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--white)}

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top:0;border-left:3px solid var(--violet);background:var(--lilac);
  border-radius:10px;padding:16px 18px;font-size:15px;
}
.woocommerce-error{border-left-color:var(--warn);background:#FDF0EA}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{float:none !important;width:auto !important;margin:0 !important}
.woocommerce-account .woocommerce{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.woocommerce-account .woocommerce-MyAccount-navigation{grid-column:1;grid-row:1}
.woocommerce-account .woocommerce-MyAccount-content{grid-column:2;grid-row:1}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block;padding:14px 16px;text-decoration:none;color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{background:var(--lilac);color:var(--violet)}
@media (max-width:760px){ .woocommerce-account .woocommerce{grid-template-columns:1fr} }

/* ==========================================================================
   13. Size guide table
   ========================================================================== */
.sizes{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.sizes table{width:100%;border-collapse:collapse;min-width:520px}
.sizes th,.sizes td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.sizes thead th{background:var(--ink);color:#fff;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.sizes tbody tr:nth-child(even){background:rgba(239,228,244,.42)}
.sizes tbody tr:last-child td{border-bottom:0}

/* Bag link in the header */
.vqa-cart{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
}
.vqa-cart .n{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:0;
}
.vqa-cart:hover .n{background:var(--magenta)}

/* ==========================================================================
   14. Beating WooCommerce's own layout
   --------------------------------------------------------------------------
   woocommerce-layout.css loads after the theme and sets li.product to
   float:left with a percentage width, which drops the grid back to floats and
   collapses the images. These win it back. !important is not laziness here —
   it is the only thing that outranks a stylesheet enqueued later.
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
  gap:clamp(16px,2vw,28px) !important;
  margin:0 !important;padding:0 !important;float:none !important;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none !important;display:none !important}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto !important;float:none !important;margin:0 !important;clear:none !important;padding:0 !important;
}
.woocommerce ul.products li.product .wrapshot{display:block !important;width:100% !important}
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img{
  width:100% !important;height:auto !important;aspect-ratio:4/5;object-fit:cover;
  margin:0 !important;box-shadow:none !important;border-radius:var(--radius);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif) !important;font-weight:600 !important;
  font-size:17px !important;line-height:1.25 !important;padding:0 !important;margin:0 0 6px !important;
}
.woocommerce ul.products li.product .price{
  font-family:var(--mono) !important;font-size:14px !important;color:var(--ink) !important;
  font-weight:500 !important;margin:0 !important;
}
.woocommerce ul.products li.product .vqf-alt{
  font-family:var(--mono) !important;font-size:11.5px !important;color:var(--muted) !important;
}
/* Woo's own breadcrumb and result count sit better as quiet technical lines. */
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px;
}
.woocommerce .woocommerce-breadcrumb a{color:var(--violet);text-decoration:none}
.woocommerce .woocommerce-result-count{margin:0 0 18px !important}
.woocommerce .woocommerce-ordering{margin:0 0 18px !important}

/* The header pill
   --------------------------------------------------------------------------
   `.nav a` is two classes deep and beats `.btn--primary`'s one, so the button
   was picking up the dark link colour and rendering near-black on violet.
   Matching the same depth wins it back. */
/* Padding is the one that actually bit: `.nav a{padding:6px 0}` flattened the
   pill's 15px/26px to 6px/0, so the label sat hard against the edge. */
.nav a.btn{padding:15px 26px;border-bottom:0}
.nav a.btn--primary,.nav a.btn--magenta{color:#fff}
.nav a.btn--primary:hover,.nav a.btn--magenta:hover{color:#fff;border-bottom:0}
.nav a.btn--ghost{color:var(--ink)}
.nav a.btn--ghost:hover{color:#fff;border-bottom:0}

/* ==========================================================================
   15. Editorial hero — the fashion direction
   --------------------------------------------------------------------------
   The freight hero is a dark slab with a waybill docket on it. That is the
   right language for logistics and the wrong one for a clothing shop, so
   fashion gets its own: paper ground, type at magazine scale, one accent
   colour used once, and space doing the work instead of boxes.
   ========================================================================== */
.ed{position:relative;background:var(--paper);color:var(--ink);overflow:hidden}
.ed .wrap{position:relative;z-index:2;padding-top:clamp(38px,6vw,84px);padding-bottom:clamp(30px,4vw,54px)}

.ed-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:clamp(26px,5vw,72px);align-items:end}

.ed-eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.30em;
  text-transform:uppercase;color:var(--muted);margin-bottom:clamp(18px,3vw,34px);
  display:flex;align-items:center;gap:14px;
}
.ed-eyebrow::after{content:'';flex:1;height:1px;background:var(--line)}

/* Magazine scale. -0.035em tracking stops Fraunces opening up at display size. */
.ed h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(46px,8.2vw,112px);line-height:.94;letter-spacing:-.035em;
  margin:0 0 clamp(18px,2.4vw,30px);text-wrap:balance;
}
.ed h1 em{font-style:normal;color:var(--magenta)}
.ed h1 .thin{font-weight:300;color:var(--ink-2, #52514e)}

.ed-lede{font-size:clamp(15.5px,1.5vw,18px);color:var(--muted);max-width:44ch;margin:0 0 clamp(20px,2.6vw,30px)}

/* A text link with an arrow, not another pill. Pills everywhere is what makes
   a shop look like a dashboard. */
.ed-cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:8px;border-bottom:1px solid var(--ink);transition:gap .22s ease,color .22s ease,border-color .22s ease}
.ed-cta:hover{gap:20px;color:var(--magenta);border-bottom-color:var(--magenta)}
.ed-cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
.ed-links{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;margin-top:clamp(22px,3vw,34px)}
.ed-links .quiet{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:4px}
.ed-links .quiet:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* The right column: one tall frame, nothing else. */
.ed-frame{position:relative;aspect-ratio:3/4;border-radius:2px;overflow:hidden;background:var(--lilac)}
.ed-frame img{width:100%;height:100%;object-fit:cover;display:block}
.ed-frame .tag{
  position:absolute;left:0;bottom:0;background:var(--paper);color:var(--ink);
  padding:12px 18px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.ed-frame--empty{
  display:flex;align-items:flex-end;justify-content:flex-start;
  background:linear-gradient(150deg,var(--lilac),#DCC7E6 62%,#C9AEDA);
}
.ed-frame--empty .vq{
  font-family:var(--serif);font-size:clamp(90px,13vw,190px);line-height:.8;font-weight:600;
  color:rgba(58,27,75,.16);padding:0 0 10px 14px;user-select:none;
}

/* Index strip along the bottom of the hero — the four rooms, set as an index
   rather than as cards. */
.ed-index{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);margin-top:clamp(30px,4.5vw,58px);
}
.ed-index a{
  display:flex;align-items:baseline;gap:10px;padding:20px 0 0;text-decoration:none;color:var(--ink);
  border-right:1px solid var(--line);padding-right:18px;
}
.ed-index a:last-child{border-right:0}
.ed-index .nm{font-family:var(--serif);font-size:clamp(17px,1.9vw,23px);font-weight:600;letter-spacing:-.01em;transition:color .2s ease}
.ed-index a:hover .nm{color:var(--magenta)}
.ed-index .ct{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.1em}
@media (max-width:860px){
  .ed-grid{grid-template-columns:1fr}
  .ed-frame{aspect-ratio:4/5;max-height:52vh}
  .ed-index{grid-template-columns:1fr 1fr}
  .ed-index a:nth-child(2){border-right:0}
  .ed-index a:nth-child(-n+2){border-bottom:1px solid var(--line);padding-bottom:16px}
}

/* A slow marquee of the motto — the one piece of movement on the page. */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:14px 0}
.ticker .row{display:flex;gap:0;width:max-content;animation:vq-slide 46s linear infinite}
.ticker span{
  font-family:var(--serif);font-size:clamp(18px,2.2vw,28px);font-weight:600;letter-spacing:-.01em;
  padding:0 30px;display:inline-flex;align-items:center;gap:30px;white-space:nowrap;
}
.ticker span::after{content:'';width:6px;height:6px;background:var(--magenta);transform:rotate(45deg);flex:0 0 auto}
@keyframes vq-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .ticker .row{animation:none} }

/* Editorial section headings, used down the rest of the page. */
.ed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:clamp(22px,3vw,36px)}
.ed-head h2{font-family:var(--serif);font-size:clamp(26px,3.6vw,44px);font-weight:600;letter-spacing:-.025em;margin:0}
.ed-head .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Quieter product cards to match: no pill on the grid, price in serif. */
.ed-shop .woocommerce ul.products li.product .button,
.ed-shop ul.products li.product .button{display:none !important}
.ed-shop ul.products li.product .woocommerce-loop-product__title{font-size:16px !important;margin-bottom:4px !important}
.ed-shop ul.products li.product .price{font-family:var(--serif) !important;font-size:16px !important;font-weight:600 !important}
.ed-shop ul.products li.product .vqf-cat{margin-top:12px !important}

/* ==========================================================================
   16. The fashion palette
   --------------------------------------------------------------------------
   Freight's cream-and-near-black is correct for a logistics site and cold for
   this one. Redeclared here rather than forked into a second file so the two
   themes stay one system: same violet and magenta, warmer ground, plum in
   place of black. Later declaration wins, so this is all it takes.
   ========================================================================== */
:root{
  --paper:#FDF6F9;      /* blush, not cream */
  --white:#FFFFFF;
  --ink:#2A1230;        /* deep plum — black is too hard next to this pink */
  --ink-2:#584055;
  --muted:#8A6C81;
  --lilac:#F7E7F0;
  --line:#F1DCE7;
  --blush:#FBE9F2;
  --rose:#E76BAE;
  --gold:#C9A227;
}

/* Soft light behind the hero, warm at the top right where the frame sits. */
.ed::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 520px at 88% 2%,rgba(231,107,174,.20),transparent 66%),
    radial-gradient(620px 460px at 4% 96%,rgba(110,42,143,.10),transparent 70%);
}
.ed-eyebrow{color:var(--magenta)}
.ed-eyebrow::after{background:linear-gradient(90deg,var(--rose),transparent)}

/* The arch. One shape does most of the work of making a page feel feminine
   without a single flourish or script face. */
.ed-frame{
  border-radius:999px 999px 10px 10px;
  box-shadow:0 30px 70px rgba(42,18,48,.14);
}
.ed-frame .tag{
  left:50%;transform:translateX(-50%);bottom:14px;border-radius:999px;
  background:rgba(253,246,249,.92);backdrop-filter:blur(6px);
  padding:10px 20px;color:var(--ink);
}
.ed-frame--empty{background:linear-gradient(160deg,var(--blush),#F0C9DE 58%,#E7A9CB)}

.ed-index a{border-right-color:var(--line)}
.ed-index .ct{color:var(--rose)}
.ed h1 em{color:var(--magenta)}

/* Ticker in plum with blush type, and rose diamonds between. */
.ticker{background:var(--ink);color:var(--blush)}
.ticker span::after{background:var(--rose)}

/* Rounder, softer product cards. */
.ed-shop ul.products li.product img,
.woocommerce ul.products li.product img{border-radius:18px 18px 14px 14px}
.ed-shop ul.products li.product .vqf-cat{color:var(--rose) !important;letter-spacing:.16em}

/* Buttons: keep the pill, warm the fill. */
.btn--primary{background:var(--violet)}
.btn--magenta{background:var(--magenta)}
.btn--magenta:hover{background:#A72C87}
.nav a.btn--primary,.nav a.btn--magenta{color:#fff}

/* Section furniture picks up the blush. */
.section--lilac{background:var(--blush)}
.woocommerce-message,.woocommerce-info{background:var(--blush);border-left-color:var(--magenta)}
.woocommerce table.shop_table tbody tr:nth-child(even){background:rgba(247,231,240,.5)}

/* The ticker as a ribbon rather than a black bar — the dark band was the one
   piece of the logistics site still showing through. */
.ticker{background:linear-gradient(90deg,var(--magenta),var(--violet));color:#fff}
.ticker span::after{background:rgba(255,255,255,.75)}

/* The hero frame with no photograph in it. Blush arch, monogram ghosted in —
   prettier than a product placeholder card, and it stops the hero looking
   like it is missing an image. */
.ed-frame--empty{
  background:
    radial-gradient(120% 80% at 50% 0%,#FFFFFF 0%,rgba(255,255,255,0) 55%),
    linear-gradient(160deg,var(--blush) 0%,#F3CFE2 52%,#E9A9CC 100%);
  align-items:center;justify-content:center;
}
.ed-frame--empty .vq{
  padding:0;color:rgba(42,18,48,.13);
  font-size:clamp(96px,13vw,200px);letter-spacing:-.04em;
}
.ed-frame--empty .tag{background:rgba(255,255,255,.86)}

/* ==========================================================================
   17. The story image
   The artwork in this slot is a flyer — almost entirely type — so it is
   framed rather than cropped: a white mat, a hairline edge, and `contain`
   so no wording is ever cut off, whatever shape the client swaps in later.
   ========================================================================== */

.vqa-story-img{
	box-sizing:border-box;
	width:100%;
	aspect-ratio:4/5;
	object-fit:contain;
	background:#fff;
	padding:12px;
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 26px 64px -36px rgba(42,18,48,.42);
}

/* --------------------------------------------------------------------------
   The WhatsApp button in the footer

   Same fix as the freight site: `.site-footer a:hover{color:#fff}` is written
   for the footer's text links and outranks `.btn--onDark:hover`, so on hover
   the button turned white and its label turned white with it. Restated at
   higher specificity so the button keeps its own colours.
   -------------------------------------------------------------------------- */

.site-footer a.btn{color:#fff;text-decoration:none}
.site-footer a.btn:hover{text-decoration:none}
.site-footer a.btn--onDark:hover{background:#fff;color:var(--ink);border-color:#fff}
.site-footer a.btn--onDark:hover svg{fill:currentColor;stroke:currentColor}


/* ==========================================================================
   Back to top — 28 Aug 2026
   Quiet on purpose: --ink, not rose. Rose is doing the work on the buttons
   and the green bubble is WhatsApp, so a third loud circle in the same
   corner would just be noise. Appears once there is enough page behind you,
   and below 900px it sits above the WhatsApp bubble rather than on top of it.
   ========================================================================== */
.to-top{
  position:fixed;right:16px;bottom:20px;z-index:79;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:var(--ink);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(42,18,48,.30);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,background-color .2s ease;
}
.to-top svg{width:20px;height:20px;display:block}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--rose)}
.to-top:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

/* 56 (bubble) + 16 (its offset) + 12 (gap) = 84 */
@media (max-width:900px){
  .to-top{bottom:84px}
}

@media (prefers-reduced-motion: reduce){
  .to-top{transition:opacity .01s linear,visibility .01s;transform:none}
  .to-top.is-on{transform:none}
}