/*
 Theme Name: Verdebloom Child
 Template: astra
 Version: 1.0
*/

/* =========================
   Design tokens
   ========================= */
:root{
  --vb-bg:#F8F6F2;
  --vb-ink:#1F1F1F;
  --vb-mute:#6F6F6F;
  --vb-card:#007E6E;

  --vb-green:#007E6E;
  --vb-green-soft:#007E6E;

  --vb-line:#e6e6e6;
  --vb-line-soft:rgba(63,127,75,0.12);
}

/* =========================
   Global
   ========================= */
body{
  background:var(--vb-bg);
  color:var(--vb-ink);
}

/* Remove Astra default shop header section */
.woocommerce-products-header,
.ast-woo-shop-header{
  display:none !important;
}

/* Optional shop header copy (if you use these classes somewhere) */
.vb-shop-header{
  max-width:1000px;
  margin:48px auto 24px;
  padding:0 24px;
  text-align:center;
}
.vb-shop-title{
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
  font-size:42px;
  margin:0 0 8px;
}
.vb-shop-sub{
  color:var(--vb-mute);
  max-width:720px;
  margin:0 auto;
}

/* =========================
   Woo archive product grid
   ========================= */

/* Base: use grid everywhere (kills Astra floats naturally) */
body.woocommerce ul.products{
  display:grid !important;
  gap:24px !important;
  justify-items:center !important;
  margin:0 !important;
  padding:0 !important;
}

/* Mobile: 2 columns */
@media (max-width: 640px){
  body.woocommerce ul.products{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Tablet: 3 columns */
@media (min-width: 641px) and (max-width: 1024px){
  body.woocommerce ul.products{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Desktop: 6 columns */
@media (min-width: 1025px){
  body.woocommerce ul.products{
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  }
}

/* Product card */
body.woocommerce ul.products li.product{
  width:auto !important;
  margin:0 !important;
  float:none !important;

  background:transparent;
  text-align:center;
  padding:0;
  box-shadow:none !important;
  transition:transform .2s ease;
}
body.woocommerce ul.products li.product:hover{
  transform:translateY(-3px);
}

/* Product image sizing */
body.woocommerce ul.products li.product a img{
  width:77% !important;
  margin:0 auto 6px !important;
  display:block !important;
  border-radius:12px;
}

/* Title */
body.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:500;
  font-size:16px;
  margin:8px 0 6px;
  color:var(--vb-ink);
}

/* Price */
body.woocommerce ul.products li.product .price{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--vb-ink);
  margin-bottom:6px;
}

/* Hide rating and added-to-cart link on archive */
body.woocommerce ul.products li.product .star-rating,
body.woocommerce ul.products li.product .added_to_cart{
  display:none !important;
}

/* Hide category labels on product cards (Astra + Woo variations) */
body.woocommerce ul.products li.product .woocommerce-loop-product__category,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__category,
body.woocommerce ul.products li.product .ast-woo-product-category,
body.woocommerce-page ul.products li.product .ast-woo-product-category{
  display:none !important;
}

/* Archive add to cart button */
body.woocommerce ul.products li.product .button{
  display:inline-block;

  background:transparent !important;
  border:1px solid var(--vb-ink) !important;
  color:var(--vb-ink) !important;

  border-radius:999px !important;
  padding:0.45rem 1.4rem !important;

  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.60rem;

  box-shadow:none !important;
  transition:all .2s ease;
}
body.woocommerce ul.products li.product .button:hover{
  background:var(--vb-green) !important;
  border-color:var(--vb-green) !important;
  color:#ffffff !important;
}

/* =========================
   Category filter pills
   ========================= */

.vb-filters{
  display:flex;
  justify-content:center;
  gap:0.9rem;
  flex-wrap:wrap;
  margin:2.5rem 0 2.9rem;
  text-align:center;
}

.vb-filters .pill{
  display:inline-block;
  padding:0.55rem 1.7rem;
  border-radius:999px;

  border:1px solid var(--vb-green-soft);
  color:#414141;
  text-decoration:none;

  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:0.95rem;
  line-height:1;

  transition:.2s ease;
}

.vb-filters .pill:hover{
  background:var(--vb-green-soft) !important;
  color:#ffffff !important;
}

.vb-filters .pill.active{
  background:var(--vb-green-soft) !important;
  color:#ffffff !important;
  font-weight:700;
}

/* =========================
   Mobile filters overlay (details/summary)
   This assumes your existing HTML uses:
   details.vb-mobile-filters > summary.vb-filter-toggle + .vb-filter-panel
   ========================= */

.vb-filters-desktop{ display:flex; gap:10px; flex-wrap:wrap; }
.vb-filters-mobile{ display:none; }

@media (max-width: 768px){
  .vb-filters-desktop{ display:none !important; }
  .vb-filters-mobile{ display:block !important; margin:0 0 12px 0; }

  .vb-filter-bar.vb-filters-mobile{
    position:relative !important;
    margin:8px 12px 16px !important;
    z-index:20 !important;
  }

  details.vb-mobile-filters > summary.vb-filter-toggle{
    list-style:none !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;

    background:#ffffff !important;
    border:1px solid #e8e8e8 !important;
    border-radius:14px !important;

    padding:12px 14px !important;

    font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size:0.95rem !important;
    font-weight:700 !important;
    color:var(--vb-ink) !important;

    box-shadow:0 1px 0 rgba(0,0,0,0.02) !important;
    cursor:pointer !important;
  }

  details.vb-mobile-filters > summary::-webkit-details-marker{
    display:none !important;
  }

  details.vb-mobile-filters[open] > summary.vb-filter-toggle{
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    margin:0 !important;

    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;

    padding:14px 16px !important;
    background:var(--vb-bg) !important;
    z-index:10001 !important;

    justify-content:space-between !important;
  }

  details.vb-mobile-filters[open] > summary.vb-filter-toggle::after{
    content:"Done" !important;
    background:var(--vb-green) !important;
    color:#ffffff !important;
    padding:8px 14px !important;
    border-radius:12px !important;
    font-size:0.9rem !important;
    font-weight:800 !important;
    letter-spacing:0.02em !important;
  }

  details.vb-mobile-filters[open] .vb-filter-panel{
    position:fixed !important;
    inset:0 !important;
    background:var(--vb-bg) !important;

    padding:70px 16px 90px !important;
    z-index:10000 !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;

    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  details.vb-mobile-filters .vb-filter-panel .pill{
    background:#ffffff !important;
    border:1px solid var(--vb-line) !important;
    color:var(--vb-ink) !important;

    border-radius:12px !important;
    padding:12px 12px !important;

    font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size:0.95rem !important;
    font-weight:600 !important;

    text-align:left !important;
    line-height:1.2 !important;
    position:relative !important;
  }

  details.vb-mobile-filters .vb-filter-panel .pill::before{
    content:"" !important;
    width:18px !important;
    height:18px !important;

    border:2px solid #cfd6cf !important;
    border-radius:4px !important;

    display:inline-block !important;
    margin-right:10px !important;
    vertical-align:-3px !important;

    background:#ffffff !important;
  }

  details.vb-mobile-filters .vb-filter-panel .pill.active{
    border-color:var(--vb-green) !important;
    font-weight:800 !important;
  }

  details.vb-mobile-filters .vb-filter-panel .pill.active::before{
    background:var(--vb-green) !important;
    border-color:var(--vb-green) !important;
    box-shadow:inset 0 0 0 3px #ffffff !important;
  }

  details.vb-mobile-filters[open] .vb-filter-panel::after{
    content:"" !important;
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    height:80px !important;
    background:var(--vb-bg) !important;
    z-index:10000 !important;
  }
}

/* =========================
   Xootix side cart (xoo-wsc)
   ========================= */
.xoo-wsc-container,
.xoo-wsc-header,
.xoo-wsc-body,
.xoo-wsc-footer{
  background:var(--vb-bg) !important;
  color:#222222 !important;
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.xoo-wsc-header{
  border-bottom:1px solid #e2ddd2 !important;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size:0.9rem;
}

.xoo-wsc-product{
  border-bottom:1px solid rgba(63, 127, 75, 0.18) !important;
}

.xoo-wsc-ft-txt,
.xoo-wsc-ft-amt{
  color:#222222 !important;
  font-weight:800;
}

.xoo-wsc-ft-btn,
.xoo-wsc-ft-btn a,
.xoo-wsc-ft-buttons a{
  background:transparent !important;
  border:1px solid var(--vb-green) !important;
  color:var(--vb-green) !important;

  border-radius:999px !important;
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:0.75rem;

  padding:0.75rem 1.9rem !important;
  box-shadow:none !important;
}

.xoo-wsc-ft-btn:hover,
.xoo-wsc-ft-buttons a:hover{
  background:var(--vb-green-soft) !important;
  color:#ffffff !important;
  border-color:var(--vb-green-soft) !important;
}

.xoo-wsc-cart-trigger{
  background:var(--vb-green) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
.xoo-wsc-cart-trigger:hover{
  background:#335f3c !important;
}

/* =========================
   Cart page
   ========================= */
.woocommerce-cart table.cart a{
  color:var(--vb-ink);
  text-decoration:none;
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.woocommerce-cart table.cart a:hover{
  color:var(--vb-green);
}

.woocommerce-cart table.cart th,
.woocommerce-cart .cart_totals th{
  background:#f5f5f5;
  color:var(--vb-ink);
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.woocommerce-cart .cart_totals h2{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:800;
  color:var(--vb-ink);
}

.woocommerce-cart .button,
.woocommerce-cart .button.alt,
.woocommerce-cart button.button,
.woocommerce-cart a.button{
  background:transparent !important;
  border:1px solid var(--vb-green) !important;
  color:#222222 !important;
  border-radius:999px !important;

  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.7rem;

  padding:0.55rem 1.8rem !important;
  box-shadow:none !important;
}
.woocommerce-cart .button:hover,
.woocommerce-cart .button.alt:hover,
.woocommerce-cart button.button:hover,
.woocommerce-cart a.button:hover{
  background:var(--vb-green) !important;
  color:#ffffff !important;
  border-color:var(--vb-green) !important;
}

/* =========================
   Checkout page
   ========================= */
.woocommerce-checkout h3,
.woocommerce-checkout h3#order_review_heading{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:800;
  color:var(--vb-ink);
}

.woocommerce-checkout .woocommerce-billing-fields__field label,
.woocommerce-checkout .woocommerce-additional-fields__field label{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:0.85rem;
  color:var(--vb-ink);
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:0.85rem;
  border-radius:6px;
  border:1px solid #dddddd;
  padding:0.45rem 0.6rem;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus{
  border-color:var(--vb-green);
  box-shadow:none;
  outline:none;
}

.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error{
  border-top-color:var(--vb-green);
}

/* Remove coupon toggle */
.woocommerce-checkout .woocommerce-form-coupon-toggle{
  display:none !important;
}

/* Make order review table white */
.woocommerce-checkout #order_review table th,
.woocommerce-checkout #order_review table td{
  background:#ffffff !important;
}

/* Checkout buttons */
.woocommerce-checkout .button,
.woocommerce-checkout .button.alt,
.woocommerce-checkout button.button,
.woocommerce-checkout a.button,
.woocommerce-checkout #place_order{
  background:transparent !important;
  border:1px solid var(--vb-green) !important;
  color:#222222 !important;
  border-radius:999px !important;

  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.7rem;

  padding:0.55rem 1.8rem !important;
  box-shadow:none !important;
}
.woocommerce-checkout .button:hover,
.woocommerce-checkout .button.alt:hover,
.woocommerce-checkout button.button:hover,
.woocommerce-checkout a.button:hover,
.woocommerce-checkout #place_order:hover{
  background:var(--vb-green) !important;
  color:#ffffff !important;
  border-color:var(--vb-green) !important;
}

/* =========================
   Single product page
   ========================= */
.single-product .product_title{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:800;
  font-size:1.7rem;
  color:var(--vb-ink);
  margin-bottom:0.8rem;
}

.single-product .price{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:1.2rem;
  font-weight:800;
  color:var(--vb-green) !important;
  margin-bottom:1rem;
}

.single-product .product_meta{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:0.85rem;
  color:#444;
  margin-top:1.5rem;
}
.single-product .product_meta a{
  color:var(--vb-green);
  text-decoration:none;
}
.single-product .product_meta a:hover{
  color:#2a5b34;
}

.woocommerce-breadcrumb{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:0.85rem;
  margin-bottom:1.5rem;
  color:#666;
}
.woocommerce-breadcrumb a{
  color:var(--vb-green);
}
.woocommerce-breadcrumb a:hover{
  color:#2a5b34;
}

.single-product .quantity .qty{
  border:1px solid rgba(63,127,75,0.4);
  border-radius:6px;
  padding:0.4rem 0.6rem;
  font-size:0.9rem;
  width:60px;
}

.single-product .single_add_to_cart_button{
  background:transparent !important;
  color:#222 !important;
  border:1px solid var(--vb-green) !important;
  border-radius:999px !important;

  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:0.75rem !important;

  padding:0.65rem 1.8rem !important;
  box-shadow:none !important;
}
.single-product .single_add_to_cart_button:hover{
  background:var(--vb-green) !important;
  color:#ffffff !important;
}

.single-product .woocommerce-product-gallery__image img{
  border-radius:8px;
}

.single-product .summary.entry-summary{
  padding-left:0;
}

.single-product .related ul.products li.product .price{
  color:var(--vb-ink) !important;
}

/* Remove ALL default tab borders/lines */
.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs li,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after,
.single-product .woocommerce-tabs ul.tabs li a,
.single-product .woocommerce-tabs ul.tabs li a::before,
.single-product .woocommerce-tabs ul.tabs li a::after{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Active tab underline */
.single-product .woocommerce-tabs ul.tabs li.active a{
  border-bottom:2px solid var(--vb-green) !important;
  font-weight:800 !important;
  color:var(--vb-ink) !important;
}

/* Hide reviews tab/panel */
.single-product .woocommerce-tabs ul.tabs li.reviews_tab,
.single-product #tab-reviews,
.single-product #reviews{
  display:none !important;
}

/* =========================
   Layout tightening
   ========================= */
.single-product .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main{
  max-width:1000px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
  font-size:0.95rem;
}

/* Optional: checkout columns on wider screens */
@media (min-width: 500px){
  .woocommerce-checkout form.checkout .col2-set{
    width:58%;
    float:left;
  }
  .woocommerce-checkout #order_review{
    width:40%;
    float:right;
  }
}

/* Single product mobile spacing under hero */
@media (max-width: 768px){
  body.single-product .ast-woo-product-single,
  body.single-product .woocommerce.single-product{
    margin-top:24px !important;
    padding-top:0 !important;
  }

  body.single-product .site-content,
  body.single-product .ast-container{
    padding-top:24px !important;
  }

  body.single-product .woocommerce-product-gallery{
    margin-top:24px !important;
  }
}

/* =========================
   Mobile menu styling (Astra)
   ========================= */
@media (max-width: 921px){

  body.ast-header-break-point #ast-mobile-popup,
  body.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-drawer,
  body.ast-header-break-point .ast-mobile-popup-drawer,
  body.ast-header-break-point .ast-mobile-popup-content{
    background:var(--vb-bg) !important;
  }

  body.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-drawer,
  body.ast-header-break-point .ast-mobile-popup-drawer{
    height:100vh !important;
    max-height:100vh !important;
    width:100vw !important;
    max-width:100vw !important;
    overflow-y:auto !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  body.ast-header-break-point .ast-mobile-popup-overlay{
    background:rgba(248,246,242,0.98) !important;
    backdrop-filter:blur(6px);
  }

  /* Remove branding area inside the drawer */
  body.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-header,
  body.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-drawer-header,
  body.ast-header-break-point #ast-mobile-popup .site-branding,
  body.ast-header-break-point #ast-mobile-popup .ast-site-identity,
  body.ast-header-break-point #ast-mobile-popup .ast-header-logo,
  body.ast-header-break-point #ast-mobile-popup .ast-mobile-header-logo,
  body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-header,
  body.ast-header-break-point .ast-mobile-popup-drawer .site-branding{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    border:0 !important;
  }

  body.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-content{
    padding-top:14px !important;
    margin-top:0 !important;
  }

  body.ast-header-break-point #ast-mobile-popup .main-header-menu > li{
    border-bottom:1px solid var(--vb-line-soft) !important;
  }

  body.ast-header-break-point #ast-mobile-popup .main-header-menu > li > a{
    font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size:17px !important;
    font-weight:800 !important;
    letter-spacing:0.02em !important;
    color:#1F2A1F !important;
    padding:16px 20px !important;
  }

  body.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-close{
    position:fixed !important;
    top:10px !important;
    right:10px !important;
    z-index:999999 !important;
  }

  body.ast-header-break-point.ast-mobile-popup-active{
    overflow:hidden !important;
    position:fixed !important;
    width:100% !important;
  }
}