/* Hano HQ — brand layer (loaded by storefront-core over Astra) */
:root{
  --vs-ink:#1a2230; --vs-panel:#283447; --vs-panel-2:#35455e;
  --vs-cream:#f0f3f7; --vs-mute:#96a0b0; --vs-line:#2f3c50;
  --vs-amber:#2e74c8; --vs-amber-hi:#6ca5e6; --vs-amber-deep:#245ca0;
}
body,.ast-container{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--vs-ink); }
h1,h2,h3,.entry-title,.woocommerce-loop-product__title,.product_title{
  font-family:'Fraunces',Georgia,'Times New Roman',serif !important; letter-spacing:.2px;
}
/* header */
.site-header,.ast-primary-header-bar,.main-header-bar{ background:var(--vs-ink) !important; }
.main-header-bar a,.ast-builder-menu .menu-item>a,.site-title a{ color:var(--vs-cream) !important; }
.main-header-bar a:hover,.menu-item>a:hover{ color:var(--vs-amber-hi) !important; }
.custom-logo{ max-height:52px; width:auto; }

/* buttons — HQ blue */
.button,.wp-block-button__link,button.single_add_to_cart_button,
.woocommerce a.button,.woocommerce button.button,.woocommerce .button.alt,
#place_order,.added_to_cart{
  background:var(--vs-amber) !important; background-image:none !important;
  color:#fff !important; border:0 !important; border-radius:8px !important;
  font-weight:600 !important; letter-spacing:.3px; padding:.7em 1.4em !important;
  box-shadow:0 6px 18px rgba(46,116,200,.22); transition:transform .12s ease,box-shadow .12s ease;
}
.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
button.single_add_to_cart_button:hover,#place_order:hover{
  background:var(--vs-amber-hi) !important; color:#0f1a2a !important;
  transform:translateY(-1px); box-shadow:0 10px 24px rgba(46,116,200,.30);
}

/* product grid */
.woocommerce ul.products li.product{
  background:#fff; border:1px solid #e6eaf0; border-radius:14px;
  padding:14px 14px 20px !important; box-shadow:0 2px 12px rgba(26,34,48,.06);
  transition:transform .15s ease,box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(26,34,48,.14); }
.woocommerce ul.products li.product img{ border-radius:10px; }
.woocommerce ul.products li.product .price{ color:var(--vs-amber-deep) !important; font-weight:700; font-size:1.08em; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:1.02em; color:var(--vs-ink); padding-bottom:.35em; }
.woocommerce span.onsale{ background:var(--vs-ink); color:var(--vs-amber-hi); }

/* price + rating tidy */
.star-rating span::before{ color:var(--vs-amber); }

/* footer */
.site-footer,.ast-small-footer,.footer-sml-layout-1{ background:var(--vs-ink) !important; color:var(--vs-mute) !important; }
.site-footer a{ color:var(--vs-amber-hi) !important; }

/* section rhythm on hand-built homepage */
.vs-section{ padding:64px 0; }
.vs-kicker{ font-family:'Inter',sans-serif; letter-spacing:3px; text-transform:uppercase; font-size:.78rem; color:var(--vs-amber-deep); font-weight:600; }
.vs-hero{ position:relative; color:var(--vs-cream); }
.vs-hero h1{ color:var(--vs-cream) !important; }

/* hide the front-page entry title (hero carries the H1) */
.home .entry-title,.page-id-98 .entry-title,.home .ast-single-post .entry-title{ display:none !important; }
.home .entry-header{ display:none !important; }

/* ---- homepage sections ---- */
.vs-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.vs-hero{ position:relative; min-height:520px; display:flex; align-items:center; overflow:hidden; background:var(--vs-ink); }
.vs-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.vs-hero-inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:80px 24px; }
.vs-hero h1{ font-size:clamp(2.4rem,5vw,4rem); line-height:1.05; margin:.2em 0 .3em; max-width:16ch; }
.vs-hero p{ font-size:1.2rem; color:#dbe4ef; max-width:44ch; margin-bottom:1.6em; }
.vs-btn{ display:inline-block; background:var(--vs-amber); color:#fff!important; font-weight:600;
  padding:.85em 1.8em; border-radius:9px; text-decoration:none; box-shadow:0 8px 22px rgba(46,116,200,.30); }
.vs-btn:hover{ background:var(--vs-amber-hi); transform:translateY(-1px); }
.vs-btn-ghost{ background:transparent; color:var(--vs-cream)!important; border:1.5px solid rgba(255,255,255,.4); box-shadow:none; margin-left:12px; }

.vs-trust{ background:var(--vs-panel); color:var(--vs-cream); }
.vs-trust .vs-wrap{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; padding-top:20px; padding-bottom:20px; }
.vs-trust div{ flex:1 1 200px; text-align:center; font-size:.98rem; }
.vs-trust b{ color:var(--vs-amber-hi); }

.vs-heading{ text-align:center; margin-bottom:8px; }
.vs-sub{ text-align:center; color:var(--vs-mute); max-width:56ch; margin:0 auto 34px; }

.vs-cats{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.vs-cat{ display:block; text-decoration:none; border-radius:14px; padding:34px 18px; text-align:center;
  background:linear-gradient(160deg,var(--vs-panel),var(--vs-panel-2)); color:var(--vs-cream)!important;
  border:1px solid var(--vs-line); transition:transform .15s ease,border-color .15s ease; }
.vs-cat:hover{ transform:translateY(-4px); border-color:var(--vs-amber-hi); }
.vs-cat span{ display:block; font-family:'Fraunces',serif; font-size:1.08rem; margin-top:6px; }
.vs-cat small{ color:var(--vs-amber-hi); letter-spacing:2px; text-transform:uppercase; font-size:.68rem; }

.vs-props{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.vs-prop{ text-align:center; padding:20px; }
.vs-prop h3{ margin:.2em 0; font-size:1.15rem; }
.vs-prop p{ color:var(--vs-mute); font-size:.98rem; }

.vs-cta{ background:linear-gradient(120deg,var(--vs-ink),#2a3548); color:var(--vs-cream); text-align:center; border-radius:18px; padding:56px 24px; }
.vs-cta h2{ color:var(--vs-cream)!important; margin-bottom:.3em; }
.vs-cta p{ color:#c4cfdd; margin-bottom:1.4em; }

.vs-center{ text-align:center; margin-top:30px; }
.vs-section--light{ background:#f2f5f9; }
.vs-legal{ max-width:820px; }
.vs-legal h2{ margin-top:1.4em; }
.vs-legal p,.vs-legal li{ color:#37414f; line-height:1.7; }

@media (max-width:900px){ .vs-cats{ grid-template-columns:repeat(2,1fr); } .vs-props{ grid-template-columns:1fr; } }
@media (max-width:782px){
  .vs-section{ padding:44px 0; }
  .custom-logo{ max-height:42px; }
  .vs-hero{ min-height:420px; }
}