/*
Theme Name: VitaHerbs Shop
Theme URI: https://vitaherbs.me/shop/
Description: VitaHerbs Storefront child theme — matches the vitaherbs.me landing page branding (forest/cream palette, Cormorant Garamond + Inter, pill buttons). Clean COD shop for two products.
Author: Brian for VitaHerbs
Template: storefront
Version: 1.0.4
*/

/* ============================================================
   VitaHerbs brand tokens (from landing page)
   ============================================================ */
:root{
  --sage:        #edf1ed;
  --sage-deep:   #dde6dc;
  --olive:       #8e9775;
  --olive-soft:  #b6bea5;
  --forest:      #314e34;
  --forest-deep: #1f3422;
  --cream:       #f6f3ec;
  --linen:       #ebe5d6;
  --gold:        #b8945c;
  --ink:         #1c1f1c;
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --radius:    14px;
  --radius-lg: 28px;
  --shadow-soft: 0 2px 6px rgba(31,52,34,.04), 0 12px 32px rgba(31,52,34,.06);
  --shadow-lift: 0 4px 14px rgba(31,52,34,.10), 0 26px 60px rgba(31,52,34,.18);
}

/* ============================================================
   Base
   ============================================================ */
body,
body.woocommerce,
body.woocommerce-page{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
}
.site{ background: var(--cream); }

h1,h2,h3,h4,h5,h6,
.page-title,
.entry-title,
.product_title,
.woocommerce-loop-product__title,
.woocommerce-products-header__title{
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -.005em;
  color: var(--forest) !important;
}

a{ color: var(--olive); }
a:hover{ color: var(--forest); }

.col-full{ max-width: 1200px; }

/* ============================================================
   Header — EXACT replica of the vitaherbs.me landing-page nav
   (logo-left · centred links · Contact pill right · glass on scroll)
   ============================================================ */
:root{ --ease-out: cubic-bezier(.22,.61,.36,1); }

/* Scroll progress bar (landing parity) */
.progress{
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--olive), var(--forest)); z-index: 100;
  transition: width .15s linear;
}

/* The masthead itself becomes the landing nav bar. */
.site-header.vh-nav{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 40px);
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
  transition: background .3s var(--ease-out), backdrop-filter .3s, box-shadow .3s, padding .3s;
}
/* Storefront adds clearfix ::before/::after (content:""; display:table) to the
   header. Inside our flex bar they count as two extra (zero-width) flex items,
   so `space-between` splits the slack across the gaps and pushes the logo and
   CTA ~115px inward off the corners. Kill them so only the brand, links and CTA
   remain — logo hugs the left edge, CTA the right, exactly like the landing nav. */
.site-header.vh-nav::before,
.site-header.vh-nav::after{ content: none; display: none; }
.site-header.vh-nav.is-scrolled{
  background: rgba(246,243,236,.82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  padding-block: 12px;
  box-shadow: 0 1px 0 rgba(49,78,52,.06);
}

.vh-nav .vh-nav__brand{ display: flex; align-items: center; gap: 10px; }
.vh-nav .vh-nav__brand img{ width: 110px; height: auto; max-height: none; transition: opacity .3s; }

.vh-nav .vh-nav__links{ display: none; gap: 28px; align-items: center; }
.vh-nav .vh-nav__links a{
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 500; letter-spacing: .04em;
  color: rgba(28,31,28,.72); position: relative; text-transform: none;
}
.vh-nav .vh-nav__links a:hover{ color: var(--forest); }
.vh-nav .vh-nav__links a::after{
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background: var(--forest); transition: width .35s var(--ease-out);
}
.vh-nav .vh-nav__links a:hover::after{ width: 100%; }

.vh-nav .vh-nav__cta{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--forest); color: var(--cream) !important;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none; box-shadow: none; border: 0;
  transition: transform .3s var(--ease-out), background .3s;
}
.vh-nav .vh-nav__cta:hover{ background: var(--forest-deep); color: var(--cream) !important; transform: translateY(-1px); }

@media (min-width: 880px){
  .vh-nav .vh-nav__links{ display: flex; }
}

/* Clear the fixed bar so page content is never hidden underneath it. */
.site-content{ padding-top: clamp(80px, 8vw, 104px); }

/* Storefront header furniture we no longer render. */
.site-header-cart,
.site-header .site-header-cart,
.storefront-primary-navigation,
.main-navigation,
.site-header .site-branding{ display: none !important; }

/* ============================================================
   Buttons — forest pills, gold-accent secondary
   ============================================================ */
button,
.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background: var(--forest) !important;
  color: var(--cream) !important;
  border-radius: 999px !important;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .75em 1.6em;
  border: none;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover{
  background: var(--forest-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

/* ============================================================
   Product cards (shop loop)
   ============================================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background: #fff;
  border: 1px solid var(--sage-deep);
  border-radius: var(--radius-lg);
  padding: 1.4em 1.4em 1.8em;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.woocommerce ul.products li.product img{
  border-radius: var(--radius);
  margin-bottom: 1em;
  background: var(--sage);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 1.5em;
  padding-bottom: .3em;
}
.woocommerce ul.products li.product .price{
  color: var(--forest) !important;
  font-family: var(--font-display);
  font-size: 1.35em;
  font-weight: 600;
}
.woocommerce ul.products li.product .vh-loop-desc{
  color: var(--olive);
  font-size: .95em;
  line-height: 1.5;
  margin: .2em auto .9em;
  max-width: 30ch;
}
.woocommerce ul.products li.product .vh-loop-desc p{ margin: 0; }
.woocommerce .star-rating{ display:none; }

/* Single product */
.single-product .product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: var(--forest) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.8em;
}
.single-product div.product .summary .product_title{ font-size: 2.4em; }
.woocommerce div.product form.cart .button{ font-size: 1.05em; }
.woocommerce-tabs .panel{ background:#fff; border-radius: var(--radius); padding: 1.5em; }
/* Description / Reviews tabs — rounded-top buttons with the label centred.
   Storefront ships the link as `padding:1em 0` (no horizontal padding) on a
   full-width block <li>, which leaves the text jammed against the pill's left
   edge. Make each tab hug its label, centre the text, and drop Storefront's
   stacked-tab pseudo-elements (corner curves + the active-tab chevron). */
.woocommerce-tabs ul.tabs{ text-align: center; padding-left: 0; }
.woocommerce-tabs ul.tabs li{
  display: inline-block;
  float: none;
  background: var(--sage);
  border-radius: 14px 14px 0 0;
  margin: 0 .25em;
}
.woocommerce-tabs ul.tabs li.active{ background:#fff; }
.woocommerce-tabs ul.tabs li a{
  display: block;
  padding: .8em 1.5em;
  text-align: center;
  line-height: 1.2;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li a::after,
.woocommerce-tabs ul.tabs li.active::after{ content: none !important; display: none !important; }

/* Products header / page titles */
.woocommerce-products-header{ text-align:center; padding: 1.5em 0 .5em; }
.woocommerce-products-header__title.page-title{ font-size: 2.6em; }
.page-title{ font-size: 2.4em; }

/* ============================================================
   Cart & checkout — calm, single column, no clutter
   ============================================================ */
.woocommerce table.shop_table{
  border-radius: var(--radius);
  border-color: var(--sage-deep);
  background:#fff;
}
.woocommerce-checkout #payment{
  background: var(--sage);
  border-radius: var(--radius-lg);
}
.woocommerce-checkout #payment ul.payment_methods{ border-color: var(--sage-deep); }
.woocommerce form .form-row label{
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--forest);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea{
  border: 1px solid var(--sage-deep);
  border-radius: var(--radius);
  padding: .85em 1em;
  background:#fff;
}
.woocommerce form .form-row input.input-text:focus{
  border-color: var(--olive);
  outline: none;
  box-shadow: 0 0 0 3px rgba(142,151,117,.18);
}
/* Mark incomplete required fields in red when Place order is clicked */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .input-checkbox{
  border: 1px solid #e2401c !important;
  box-shadow: 0 0 0 3px rgba(226,64,28,.15);
}
.woocommerce form .form-row.woocommerce-invalid label,
.woocommerce form .form-row.woocommerce-invalid .checkbox{
  color: #e2401c !important;
}
.woocommerce form .form-row.woocommerce-validated input.input-text{
  border-color: var(--olive);
}
.woocommerce-billing-fields h3,
.woocommerce-checkout h3#order_review_heading{
  font-family: var(--font-display);
  color: var(--forest);
}
.woocommerce .woocommerce-info,
.woocommerce-message,
.woocommerce .woocommerce-error{
  border-top-color: var(--olive) !important;
  background: #fff;
  color: var(--ink) !important;
}
.woocommerce .woocommerce-info::before,
.woocommerce-message::before{ color: var(--olive); }

/* VitaHerbs WhatsApp confirmation box on thank-you */
.vitaherbs-wa-confirm{
  border-color: var(--gold) !important;
  background: #fffaf0 !important;
  border-radius: var(--radius-lg) !important;
}
.vitaherbs-wa-confirm h2{ font-family: var(--font-display); color: var(--forest); }

/* ============================================================
   Footer — forest, minimal
   ============================================================ */
.site-footer{
  background: var(--forest) !important;
  color: rgba(246,243,236,.82);
}
.site-footer a{ color: var(--olive-soft); }
.site-info{
  background: var(--forest-deep) !important;
  color: rgba(246,243,236,.7);
  text-align:center;
}

/* ============================================================
   Hide unneeded Storefront / Woo furniture
   ============================================================ */
.storefront-handheld-footer-bar{ display: none !important; }
.woocommerce-breadcrumb{ display: none !important; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ display: none !important; }
/* full-width content (sidebar removed in PHP) */
.site-content .content-area{ width: 100% !important; float: none !important; margin: 0 auto !important; }
.site-content #secondary,
.widget-area{ display: none !important; }
/* hide demo "ship to different address" remnants if any */
.woocommerce-shipping-fields{ display: none !important; }
/* hidden helper (e.g. the defaulted country field on the single address form) */
.vh-hidden,
#billing_country_field.vh-hidden{ display: none !important; }