/* Vander Vloet Family Farm - WooCommerce screens.
   The shop, category, product, cart and checkout keep WooCommerce's own native
   templates so they stay dynamic and upgrade-safe; the brand arrives here. */

/* ---------- archive banner ---------- */
.vv-shop-banner{
  background:var(--vv-navy);
  padding:64px max(48px, calc((100% - 1300px) / 2)) 68px;
}
.vv-shop-banner-inner{ max-width:820px; }
.vv-shop-eyebrow{
  margin:0 0 12px; color:var(--vv-gold);
  font:900 12.5px/1.3 Lato,Helvetica,Arial,sans-serif;
  letter-spacing:.22em; text-transform:uppercase;
}
.vv-shop-title{
  margin:0; color:#fff;
  font:600 clamp(30px,4.4vw,52px)/1.06 'Bodoni Moda',Georgia,serif;
  letter-spacing:-.02em;
}
.vv-shop-intro{
  margin:16px 0 0; color:#C3CEE0;
  font:400 18px/1.6 Lato,Helvetica,Arial,sans-serif; max-width:62ch;
}
.vv-shop-count{
  margin:14px 0 0; color:#8FA6C8;
  font:900 12px/1.3 Lato,Helvetica,Arial,sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
}

/* ---------- archive shell ---------- */
.woocommerce .site-main, .woocommerce-page .site-main{ max-width:none; padding:0; margin:0; }
.woocommerce .woocommerce-notices-wrapper,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce nav.woocommerce-pagination{
  max-width:1300px; margin-left:auto; margin-right:auto;
  padding-left:48px; padding-right:48px;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ margin-top:34px; }
.woocommerce .woocommerce-result-count{
  color:var(--vv-label); font:900 12px/1.3 Lato,Helvetica,Arial,sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
}
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--vv-rule); border-radius:0; background:#fff;
  padding:11px 14px; font:400 14.5px Lato,Helvetica,Arial,sans-serif; color:var(--vv-ink);
}

/* ---------- product grid ---------- */
.woocommerce ul.products{
  display:grid !important; grid-template-columns:repeat(4,1fr); gap:22px;
  max-width:1300px; margin:0 auto; padding:34px 48px 80px; list-style:none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after{ content:none !important; }
.woocommerce ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important; clear:none !important;
  background:#fff; border:1px solid var(--vv-rule);
  display:flex; flex-direction:column; text-align:left;
  transition:border-color var(--vv-ease), box-shadow var(--vv-ease), transform var(--vv-ease);
}
.woocommerce ul.products li.product:hover{
  border-color:var(--vv-green);
  box-shadow:0 18px 30px -18px rgba(20,41,75,.30);
  transform:translateY(-3px);
}
.woocommerce ul.products li.product a img{
  margin:0; width:100%; height:230px; object-fit:cover; display:block;
  transition:transform 420ms cubic-bezier(.2,.7,.3,1);
}
.woocommerce ul.products li.product:hover a img{ transform:scale(1.035); }
.woocommerce ul.products li.product .woocommerce-loop-product__link{
  display:flex; flex-direction:column; flex:1; padding:0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding:18px 22px 0 !important; margin:0;
  font:600 19px/1.22 'Bodoni Moda',Georgia,serif !important; color:var(--vv-navy);
}
.woocommerce ul.products li.product .price{
  display:block; padding:8px 22px 0; margin:0; color:var(--vv-navy) !important;
  font:900 18px/1.3 Lato,Helvetica,Arial,sans-serif !important;
}
.woocommerce ul.products li.product .price .vv-perlb{ font-weight:700; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin:16px 22px 22px; text-align:center; display:block;
}
.vv-loop-soldout{
  display:inline-block; margin:8px 22px 0; padding:4px 10px;
  background:var(--vv-cream-band); color:var(--vv-muted);
  font:900 10.5px/1.4 Lato,Helvetica,Arial,sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
}
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale{
  background:var(--vv-gold); color:#2E2003; border-radius:0; top:0; left:0; right:auto;
  margin:0; padding:8px 14px; min-height:0; min-width:0; line-height:1.2;
  font:900 11px Lato,Helvetica,Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- pagination ---------- */
.woocommerce nav.woocommerce-pagination ul{ border:0; margin:0 0 80px; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; margin:0 4px; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--vv-rule); background:#fff; padding:11px 16px;
  font:700 14px Lato,Helvetica,Arial,sans-serif; color:var(--vv-navy);
  transition:background-color var(--vv-ease), color var(--vv-ease), border-color var(--vv-ease);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--vv-green); border-color:var(--vv-green); color:var(--vv-cream);
}

/* ---------- single product ---------- */
.woocommerce div.product{
  max-width:1300px; margin:0 auto; padding:56px 48px 80px;
}
/* WooCommerce's zoom overlay is injected outside the flow and can push the
   document wider than the viewport. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{ overflow:hidden; }
.zoomImg{ max-width:none; pointer-events:none; }
.woocommerce-product-gallery{ overflow:hidden; }
img.emoji{ width:1em !important; height:1em !important; display:inline !important; }
.woocommerce div.product div.images{ width:48%; }
.woocommerce div.product div.summary{ width:47%; }
.vv-single-eyebrow{
  margin:0 0 10px; font:900 12px/1.3 Lato,Helvetica,Arial,sans-serif;
  letter-spacing:.18em; text-transform:uppercase;
}
.vv-single-eyebrow a{ color:var(--vv-label) !important; }
.vv-single-eyebrow a:hover{ color:var(--vv-green) !important; }
.woocommerce div.product .product_title{
  font:600 clamp(28px,3.4vw,42px)/1.1 'Bodoni Moda',Georgia,serif;
  color:var(--vv-navy); letter-spacing:-.015em; margin:0 0 14px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--vv-navy) !important;
  font:900 27px/1.25 Lato,Helvetica,Arial,sans-serif !important; margin:0 0 18px;
}
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel{
  font:400 16.5px/1.7 Lato,Helvetica,Arial,sans-serif; color:var(--vv-ink);
}
.woocommerce div.product form.cart{ margin:24px 0; display:flex; gap:12px; align-items:stretch; }
.woocommerce div.product form.cart .quantity input.qty{
  border:1px solid var(--vv-rule); border-radius:0; height:100%; min-height:52px;
  width:78px; text-align:center; font:700 16px Lato,Helvetica,Arial,sans-serif; color:var(--vv-navy);
}
.woocommerce div.product form.cart .button{ flex:1; min-height:52px; }
.woocommerce div.product .product_meta{
  border-top:1px solid var(--vv-rule); padding-top:18px; margin-top:22px;
  font:400 14px/1.7 Lato,Helvetica,Arial,sans-serif; color:var(--vv-muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; margin:0 0 -1px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-bottom-color:var(--vv-rule); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent; border:1px solid var(--vv-rule); border-radius:0; margin:0 4px 0 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:700 13.5px Lato,Helvetica,Arial,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; color:var(--vv-muted); padding:14px 22px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ background:#fff; border-bottom-color:#fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--vv-navy); }
.woocommerce div.product .woocommerce-tabs .panel{
  border:1px solid var(--vv-rule); background:#fff; padding:30px 32px; margin-top:0;
}
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products{
  clear:both; padding-top:56px; border-top:1px solid var(--vv-rule); margin-top:56px;
}
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2{
  font:600 32px/1.15 'Bodoni Moda',Georgia,serif; color:var(--vv-navy); margin:0;
}
.woocommerce div.product .related.products ul.products{ padding:26px 0 0; }

/* ---------- cart & checkout ---------- */
.woocommerce-cart .site-main, .woocommerce-checkout .site-main,
.woocommerce-account .site-main{
  max-width:1300px; margin:0 auto; padding:56px 48px 80px;
}
.woocommerce table.shop_table{ border:1px solid var(--vv-rule); border-radius:0; border-collapse:collapse; }
.woocommerce table.shop_table th{
  background:var(--vv-cream-band); color:var(--vv-navy);
  font:900 11.5px Lato,Helvetica,Arial,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; padding:16px 18px; border-bottom:1px solid var(--vv-rule);
}
.woocommerce table.shop_table td{ padding:20px 18px; border-top:1px solid var(--vv-rule-soft); }
.woocommerce table.shop_table td.product-name a{
  font:600 18px/1.3 'Bodoni Moda',Georgia,serif; color:var(--vv-navy);
}
.woocommerce-cart table.cart img{ width:82px; height:82px; object-fit:cover; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-billing-fields h3{
  font:600 26px/1.2 'Bodoni Moda',Georgia,serif; color:var(--vv-navy);
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{ width:100%; float:none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  border:1px solid var(--vv-rule) !important; border-radius:0 !important; background:#fff;
  padding:13px 15px !important; height:auto !important;
  font:400 16px Lato,Helvetica,Arial,sans-serif; color:var(--vv-ink);
  transition:border-color var(--vv-ease), box-shadow var(--vv-ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{
  border-color:var(--vv-green) !important;
  box-shadow:0 0 0 3px rgba(36,73,31,.12); outline:none;
}
.woocommerce form .form-row label{
  font:900 11.5px Lato,Helvetica,Arial,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--vv-label); margin-bottom:7px;
}
.woocommerce #payment{ background:var(--vv-cream-band); border-radius:0; border:1px solid var(--vv-rule); }
.woocommerce #payment div.payment_box{ background:#fff; border:1px solid var(--vv-rule); border-radius:0; }
.woocommerce #payment div.payment_box::before{ display:none; }
.woocommerce-checkout #payment #place_order{ width:100%; padding:18px !important; font-size:14.5px !important; }
.vv-delivery-days td{ padding-top:0 !important; border-top:0 !important; }

/* ---------- account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--vv-rule); }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:14px 0; color:var(--vv-navy);
  font:700 14px Lato,Helvetica,Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--vv-green); }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .woocommerce ul.products{ grid-template-columns:repeat(3,1fr); padding-left:32px; padding-right:32px; }
  .woocommerce div.product{ padding:44px 32px 64px; }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary{ width:100%; float:none; margin-bottom:28px; }
}
@media (max-width:767px){
  .vv-shop-banner{ padding:44px 22px 48px; }
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); gap:14px; padding:26px 22px 56px; }
  .woocommerce ul.products li.product a img{ height:170px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:16px !important; padding:14px 16px 0 !important; }
  .woocommerce ul.products li.product .price{ padding:6px 16px 0; font-size:16px !important; }
  .woocommerce ul.products li.product .button{ margin:12px 16px 16px; padding:11px 14px !important; font-size:12px !important; }
  .woocommerce div.product{ padding:34px 22px 56px; }
  .woocommerce-cart .site-main, .woocommerce-checkout .site-main,
  .woocommerce-account .site-main{ padding:36px 22px 56px; }
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering,
  .woocommerce nav.woocommerce-pagination{ padding-left:22px; padding-right:22px; }
}
@media (max-width:479px){
  .woocommerce ul.products{ grid-template-columns:1fr; }
  .woocommerce ul.products li.product a img{ height:220px; }
}
