/* =========================================================================
   SHOP — ported from infra-blunor, re-skinned on Vivid's tokens.

   The structure is infra's (filter rail + grid, cart drawer, search overlay,
   chips bar). None of its colour survives: infra is navy/orange on white,
   this is olive/plum/butter on greige, so every value here comes from
   main.css's --vv-* tokens rather than being translated across.
   ====================================================================== */

/* ---------- Shared bits ---------- */

.vn-icon-btn {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 42px; height: 42px;
  border: 1px solid transparent;
  border-radius: var(--vv-r-full);
  background: none;
  color: var(--vv-ink);
  cursor: pointer;
  transition: background var(--vv-fast) var(--vv-ease), color var(--vv-fast) var(--vv-ease);
}
.vn-icon-btn:hover { background: var(--vv-paper); }

.vn-cart-link { text-decoration: none; }
.vn-cart-count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--vv-r-full);
  background: var(--vv-plum-deep);
  color: var(--vv-surface);
  font-size: 10px; font-weight: 700; line-height: 1;
  font-family: var(--vv-body);
}
.vn-cart-count.is-empty { display: none; }

html.vn-scroll-locked { overflow: hidden; }

.vn-badge--sale {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 11px;
  border-radius: var(--vv-r-full);
  background: var(--vv-plum-deep);
  color: var(--vv-surface);
  font-family: var(--vv-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Shop hero ---------- */

/* The shelf enters like every other inner page — half a viewport, a photograph
   and the left-to-right shade — so crossing from the studio pages into the shop
   does not feel like crossing into a different site. Everything that makes that
   happen lives in main.css under .vn-page-hero / .vn-page-hero--image; the shop
   only adds what is specific to it.

   Cart, checkout and account opt out (vivid_wc_hero() adds --compact): those are
   a task, and a half-viewport photo between a visitor and their order is in the
   way rather than an entrance. */

/* .vn-page-hero--compact does the opting out, in main.css. */

/* ---------- Archive layout ---------- */

/* The catalogue had its own measure for one release — min(1560px, 100vw - 96px)
   — to buy the results column more room. Measured at a 1600px viewport, that
   put it at left=48/right=1552 against left=130/right=1470 for the header,
   hero, closing CTA and footer: 82px proud on each side, so the rail started
   well left of the logo and the grid ran past the nav. Breaking the page's
   vertical alignment costs more than the extra width buys.

   So the catalogue is back on the site's 1340px container, and the room comes
   out of the rail and the gutter instead: 224 + 48 rather than 268 + 64 leaves
   972px of results, which is a ~307px card at three across. The class stays as
   a scoping hook — it just no longer changes the width. */
.container--shop { /* alignment inherited from .container, deliberately */ }

.vn-archive-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 84px;
}
.vn-archive-main { min-width: 0; }
.vn-archive-grid.is-loading { opacity: .45; pointer-events: none; transition: opacity var(--vv-fast); }

/* ---------- Filter rail ---------- */

.vn-filters { position: sticky; top: calc(var(--vv-header-h) + 22px); }
.vn-filters__head,
.vn-filters__foot { display: none; }
.vn-filters__empty { font-size: 13.5px; line-height: 1.7; color: var(--vv-mute); margin: 0; }

.vn-filter-group { border-bottom: 1px solid var(--vv-line); }
.vn-filter-group:first-child { border-top: 1px solid var(--vv-line); }
.vn-filter-group__title {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--vv-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--vv-ink);
}
.vn-filter-group__title::-webkit-details-marker { display: none; }
.vn-filter-group__icon { display: grid; place-items: center; color: var(--vv-tan-deep); flex: none; }
.vn-filter-group__label { flex: 1; }
.vn-filter-group__badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--vv-r-full);
  background: var(--vv-butter); color: var(--vv-ink);
  font-size: 10px; font-weight: 700;
}
.vn-filter-group__chevron { display: grid; place-items: center; color: var(--vv-mute); transition: transform var(--vv-normal) var(--vv-ease); }
.vn-filter-group[open] .vn-filter-group__chevron { transform: rotate(180deg); }

.vn-filter-list { list-style: none; margin: 0; padding: 0 0 16px; }
.vn-filter-item a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px;
  font-size: 14px;
  color: var(--vv-ink-soft);
  text-decoration: none;
  transition: color var(--vv-fast) var(--vv-ease);
}
.vn-filter-item a:hover { color: var(--vv-ink); }
.vn-filter-box {
  flex: none;
  width: 16px; height: 16px;
  border: 1px solid var(--vv-line);
  border-radius: 3px;
  background: var(--vv-surface);
  position: relative;
  transition: background var(--vv-fast) var(--vv-ease), border-color var(--vv-fast) var(--vv-ease);
}
.vn-filter-item.is-active .vn-filter-box { background: var(--vv-olive); border-color: var(--vv-olive); }
.vn-filter-item.is-active .vn-filter-box::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center / 10px 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7' fill='none' stroke='%23F8F5F3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vn-filter-label { flex: 1; }
.vn-filter-count { font-size: 12px; color: var(--vv-mute); }
.vn-filter-item.is-active .vn-filter-label { color: var(--vv-ink); font-weight: 500; }

/* ---------- Active chips ---------- */

.vn-chips-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 0 0 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--vv-line);
}
.vn-chips-bar__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--vv-mute);
}
.vn-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.vn-chip a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  background: var(--vv-surface);
  font-size: 12.5px; color: var(--vv-ink); text-decoration: none;
  transition: background var(--vv-fast) var(--vv-ease), border-color var(--vv-fast) var(--vv-ease);
}
.vn-chip a:hover { background: var(--vv-butter); border-color: var(--vv-butter); }
.vn-chip__x { display: grid; place-items: center; color: var(--vv-mute); }
.vn-chips__reset { font-size: 12.5px; color: var(--vv-tan-deep); }

/* ---------- Product grid ---------- */

ul.products { --vn-grid-gap: 26px; }
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px var(--vn-grid-gap);
  list-style: none; margin: 0; padding: 0;
}
ul.products::before, ul.products::after { content: none !important; }
ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  display: flex; flex-direction: column;
  position: relative;
}
ul.products li.product a img {
  width: 100%; height: auto; margin: 0 0 16px;
  border-radius: 4px;
  background: var(--vv-paper-2);
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--vv-slow) var(--vv-ease);
}
ul.products li.product:hover a img { transform: scale(1.02); }
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--vv-body) !important;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.4;
  color: var(--vv-ink);
  margin: 0 0 6px !important;
  padding: 0 !important;
}
ul.products li.product .price {
  font-family: var(--vv-body);
  font-size: 15px;
  color: var(--vv-ink);
  margin: 0 0 14px;
  display: block;
}
ul.products li.product .price del { color: var(--vv-mute); margin-right: 8px; }
ul.products li.product .price ins { text-decoration: none; font-weight: 600; }
.vn-price-tax { font-size: 11px; color: var(--vv-mute); letter-spacing: .04em; }

.vn-card-actions { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.vn-card-actions .button,
.vn-card-actions .add_to_cart_button {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.2rem;
  border: 1px solid var(--vv-olive);
  border-radius: var(--vv-r-full);
  background: var(--vv-olive);
  color: var(--vv-on-dark);
  font-family: var(--vv-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  transition: background var(--vv-fast) var(--vv-ease), border-color var(--vv-fast) var(--vv-ease);
}
.vn-card-actions .button:hover { background: var(--vv-ink); border-color: var(--vv-ink); }
.vn-card-actions .button.is-loading { opacity: .6; pointer-events: none; }
.vn-card-actions .added_to_cart { display: none; }
.vn-card-view {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  color: var(--vv-ink);
  transition: background var(--vv-fast) var(--vv-ease), color var(--vv-fast) var(--vv-ease), border-color var(--vv-fast) var(--vv-ease);
}
.vn-card-view:hover { background: var(--vv-ink); border-color: var(--vv-ink); color: var(--vv-on-dark); }

/* Toolbar */
.woocommerce-result-count { font-size: 13px; color: var(--vv-mute); margin: 0 0 18px; }
.woocommerce-ordering { margin: 0 0 24px; }
.woocommerce-ordering select {
  padding: 10px 34px 10px 14px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  background: var(--vv-surface);
  font-family: var(--vv-body); font-size: 13px; color: var(--vv-ink);
}
.vn-no-products { font-size: 15px; color: var(--vv-ink-soft); padding: 30px 0; }

/* Pagination */
.woocommerce-pagination ul { display: flex; gap: 8px; list-style: none; margin: 34px 0 0; padding: 0; border: 0 !important; }
.woocommerce-pagination li { border: 0 !important; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: grid; place-items: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  font-size: 13px; color: var(--vv-ink); text-decoration: none;
}
.woocommerce-pagination .current { background: var(--vv-olive); border-color: var(--vv-olive); color: var(--vv-on-dark); }

/* ---------- Cart drawer ---------- */

.vn-cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 1200;
  width: min(430px, 100vw);
  height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--vv-surface);
  box-shadow: var(--vv-sh-xl);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform var(--vv-normal) var(--vv-ease), visibility var(--vv-normal);
}
.vn-cart-drawer[data-open="true"] { transform: none; visibility: visible; }
.vn-cart-drawer.is-busy { opacity: .6; pointer-events: none; }
.vn-cart-backdrop {
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(25, 22, 24, .45);
  backdrop-filter: blur(2px);
}

.vn-cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--vv-line);
}
.vn-cart-drawer__title {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  font-family: var(--vv-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--vv-ink);
}
.vn-cart-drawer__pill {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--vv-r-full);
  background: var(--vv-butter); color: var(--vv-ink);
  font-size: 11px; font-weight: 700;
}
.vn-cart-drawer__body { flex: 1; overflow-y: auto; padding: 6px 24px; }

.vn-cart__empty { padding: 54px 0; text-align: center; }
.vn-cart__empty p { font-size: 15px; color: var(--vv-ink-soft); margin: 0 0 22px; }

.vn-cart__items { list-style: none; margin: 0; padding: 0; }
.vn-cart__item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--vv-line);
}
.vn-cart__thumb img {
  width: 78px; height: 78px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--vv-paper-2);
  display: block;
}
.vn-cart__name { margin: 0 0 10px; font-size: 14.5px; line-height: 1.4; }
.vn-cart__name a { color: var(--vv-ink); }
.vn-cart__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.vn-cart__price { font-size: 14.5px; font-weight: 600; color: var(--vv-ink); white-space: nowrap; }

.vn-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  overflow: hidden;
}
.vn-qty__btn {
  width: 30px; height: 30px;
  border: 0; background: none;
  color: var(--vv-ink);
  font-size: 15px; line-height: 1;
  cursor: pointer;
  transition: background var(--vv-fast) var(--vv-ease);
}
.vn-qty__btn:hover { background: var(--vv-paper); }
.vn-qty input {
  width: 38px; height: 30px;
  border: 0; background: none;
  text-align: center;
  font-family: var(--vv-body); font-size: 13px; color: var(--vv-ink);
  -moz-appearance: textfield;
}
.vn-qty input::-webkit-outer-spin-button,
.vn-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.vn-cart__remove {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px;
  padding: 0; border: 0; background: none;
  font-family: var(--vv-body); font-size: 11.5px;
  letter-spacing: .06em; color: var(--vv-mute);
  cursor: pointer;
  transition: color var(--vv-fast) var(--vv-ease);
}
.vn-cart__remove:hover { color: var(--vv-plum-deep); }

.vn-cart-drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--vv-line); }
.vn-cart-drawer__subtotal {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 6px;
  font-size: 15px;
}
.vn-cart-drawer__subtotal > span:first-child {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vv-mute);
}
.vn-cart-drawer__subtotal > span:last-child { font-weight: 600; color: var(--vv-ink); }
.vn-cart-drawer__note { margin: 0 0 18px; font-size: 12.5px; color: var(--vv-mute); }
.vn-cart-drawer__foot .vn-button,
.vn-cart-drawer__foot .vn-link { width: 100%; margin-bottom: 10px; }
.vn-cart-drawer__cont {
  width: 100%;
  padding: 14px;
  border: 0; border-top: 1px solid var(--vv-line);
  background: var(--vv-paper);
  font-family: var(--vv-body); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--vv-ink-soft);
  cursor: pointer;
}

/* ---------- Search overlay ---------- */

.vn-search-overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1210;
  background: var(--vv-surface);
  border-bottom: 1px solid var(--vv-line);
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform var(--vv-normal) var(--vv-ease), visibility var(--vv-normal);
  max-height: 100dvh; overflow-y: auto;
}
.vn-search-overlay[data-open="true"] { transform: none; visibility: visible; }
.vn-search-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(25, 22, 24, .45);
}
.vn-search-overlay__inner {
  width: min(var(--vv-container), 100% - (var(--vv-gutter) * 2));
  margin-inline: auto;
  padding: 22px 0 30px;
}
.vn-search-form {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--vv-line);
  padding-bottom: 14px;
}
.vn-search-form__icon { display: grid; place-items: center; color: var(--vv-mute); flex: none; }
.vn-search-form__input {
  flex: 1;
  border: 0; background: none; padding: 8px 0;
  font-family: var(--vv-display);
  font-size: calc(30px * var(--vv-scale));
  color: var(--vv-ink);
}
.vn-search-form__input:focus { outline: none; }
.vn-search-form__clear { border: 0; background: none; color: var(--vv-mute); cursor: pointer; display: grid; place-items: center; }

.vn-search-results { padding-top: 22px; }
.vn-search-state, .vn-search-empty { padding: 26px 0; font-size: 14.5px; color: var(--vv-mute); }
.vn-search-empty p { margin: 0 0 6px; }
.vn-search-section + .vn-search-section { margin-top: 26px; }
.vn-search-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vv-mute);
}
.vn-search-clear-history { border: 0; background: none; color: var(--vv-tan-deep); cursor: pointer; font: inherit; letter-spacing: inherit; }
.vn-search-products, .vn-search-cats, .vn-search-recent { list-style: none; margin: 0; padding: 0; }
.vn-search-products a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px;
  align-items: center;
  padding: 10px 6px;
  border-radius: 4px;
  color: var(--vv-ink); text-decoration: none;
  transition: background var(--vv-fast) var(--vv-ease);
}
.vn-search-products a:hover { background: var(--vv-paper); }
.vn-search-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--vv-paper-2); display: block; }
.vn-search-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vn-search-cat { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--vv-mute); }
.vn-search-title { font-size: 15px; }
.vn-search-price { font-size: 13.5px; color: var(--vv-ink-soft); }
.vn-search-cats a, .vn-search-recent button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 9px 6px;
  border: 0; background: none;
  border-radius: 4px;
  font-family: var(--vv-body); font-size: 14.5px; color: var(--vv-ink);
  text-align: left; text-decoration: none; cursor: pointer;
}
.vn-search-cats a:hover, .vn-search-recent button:hover { background: var(--vv-paper); }
.vn-search-all { display: inline-block; margin-top: 20px; font-size: 14px; color: var(--vv-tan-deep); }

/* ---------- Single product ---------- */

.vn-single-wrap { padding-bottom: 84px; }
.vn-single-crumbs { padding: 26px 0 20px; }
.vn-single-wrap div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.vn-single-wrap div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.vn-single-wrap div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; }
.vn-single-wrap .product_title {
  font-size: clamp(calc(34px * var(--vv-scale)), calc(3.6vw * var(--vv-scale)), calc(54px * var(--vv-scale)));
  line-height: 1.1; letter-spacing: -.03em; margin: 0 0 16px;
}
.vn-single-wrap .summary .price { font-family: var(--vv-body); font-size: 22px; color: var(--vv-ink); margin: 0 0 20px; }
.vn-single-wrap .woocommerce-product-details__short-description { font-size: 15.5px; line-height: 1.75; color: var(--vv-ink-soft); margin-bottom: 24px; }
.vn-single-wrap form.cart { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.vn-single-wrap form.cart .quantity { display: inline-flex; }
.vn-single-wrap form.cart .quantity input {
  width: 72px; height: 48px; padding: 0 10px; text-align: center;
  border: 1px solid var(--vv-line); border-radius: var(--vv-r-full);
  font-family: var(--vv-body); font-size: 14px; color: var(--vv-ink); background: var(--vv-surface);
}
.vn-single-wrap form.cart button[type="submit"] {
  padding: .95rem 2rem;
  border: 1px solid var(--vv-olive); border-radius: var(--vv-r-full);
  background: var(--vv-olive); color: var(--vv-on-dark);
  font-family: var(--vv-body); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background var(--vv-fast) var(--vv-ease);
}
.vn-single-wrap form.cart button[type="submit"]:hover { background: var(--vv-ink); border-color: var(--vv-ink); }

.vn-trust { list-style: none; margin: 0 0 22px; padding: 20px 0 0; border-top: 1px solid var(--vv-line); display: grid; gap: 12px; }
.vn-trust li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--vv-ink-soft); }
.vn-trust__icon { display: grid; place-items: center; color: var(--vv-moss-deep); flex: none; }
.vn-pickup { margin: 12px 0 0; font-size: 13px; color: var(--vv-mute); }

.vn-single-wrap .woocommerce-tabs { grid-column: 1 / -1; margin-top: 20px; }
.vn-single-wrap .woocommerce-tabs ul.tabs { list-style: none; margin: 0 0 24px; padding: 0 0 2px; display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--vv-line); }
.vn-single-wrap .woocommerce-tabs ul.tabs::before { content: none !important; }
.vn-single-wrap .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0 !important; background: none !important; }
.vn-single-wrap .woocommerce-tabs ul.tabs li a {
  display: block; padding: 10px 18px;
  border-radius: var(--vv-r-full) var(--vv-r-full) 0 0;
  font-family: var(--vv-body); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--vv-mute); text-decoration: none;
}
.vn-single-wrap .woocommerce-tabs ul.tabs li.active a { background: var(--vv-olive); color: var(--vv-on-dark); }
.vn-single-wrap .related.products { grid-column: 1 / -1; margin-top: 54px; }
.vn-single-wrap .related.products > h2 { font-size: calc(32px * var(--vv-scale)); margin-bottom: 26px; }

/* ---------- Cart / checkout / account ---------- */

/* padding-block, not the shorthand. `.vn-wc-utility` is applied to the same
   element as `.container`, and `padding: 34px 0 84px` zeroed the left and right
   — wiping the container's 48px gutter at equal specificity, with this sheet
   loading last. The box lined up with the header but its contents started 48px
   further out, so cart and checkout read as wider than the menu. Invisible
   until 0.38.0, because before that the class never reached any page. */
.vn-wc-utility { padding-block: 34px 84px; }
.vn-wc-utility .woocommerce table.shop_table { border: 1px solid var(--vv-line); border-radius: 4px; border-collapse: separate; }
.vn-wc-utility .woocommerce table.shop_table th { font-family: var(--vv-body); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--vv-mute); }
.vn-wc-utility .woocommerce table.shop_table td { font-size: 14.5px; }
.vn-wc-utility .button,
.vn-wc-utility button.button,
.vn-wc-utility input.button,
.vn-wc-utility a.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.8rem;
  border: 1px solid var(--vv-olive); border-radius: var(--vv-r-full);
  background: var(--vv-olive) !important; color: var(--vv-on-dark) !important;
  font-family: var(--vv-body); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.vn-wc-utility .button:hover { background: var(--vv-ink) !important; border-color: var(--vv-ink); }
/* WooCommerce notices — measured, not guessed.
   The empty-cart notice was computing to WC's own grey #515151 on a bare 3px
   top bar, with 49px of left padding reserved for a glyph from the WooCommerce
   icon font. This theme never loads that font, so the glyph was drawing as a
   blue tofu box. Reserving a gutter for an icon that cannot render is worse
   than having no icon, so the pseudo-element goes and the padding comes back.
   These are scoped loosely because notices also appear on the shop archive and
   product pages ("… has been added to your cart"), not just the task pages. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0 0 26px;
  padding: 17px 24px !important;
  border: 1px solid var(--vv-line);
  border-left: 3px solid var(--vv-moss);
  border-top-width: 1px;
  border-radius: var(--vv-r-sm);
  background: var(--vv-paper);
  font-family: var(--vv-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--vv-ink);
  list-style: none;
}
/* An error is the one that should read differently at a glance. */
.woocommerce-error { border-left-color: var(--vv-plum-deep); }
.woocommerce-error li { list-style: none; margin: 0; }

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none !important; }

/* The action a notice carries ("View cart") sits at the far end of the row. */
.woocommerce-info .button,
.woocommerce-message .button { margin-left: auto; }

@media (max-width: 560px) {
  .woocommerce-info .button,
  .woocommerce-message .button { margin-left: 0; }
}
.vn-wc-utility input[type="text"],
.vn-wc-utility input[type="email"],
.vn-wc-utility input[type="tel"],
.vn-wc-utility input[type="password"],
.vn-wc-utility textarea,
.vn-wc-utility select {
  border: 1px solid var(--vv-line) !important;
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--vv-body); font-size: 14.5px;
  background: var(--vv-surface); color: var(--vv-ink);
}
.vn-wc-utility .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vn-wc-utility .woocommerce-MyAccount-navigation a {
  display: inline-block; padding: 9px 16px;
  border: 1px solid var(--vv-line); border-radius: var(--vv-r-full);
  font-size: 12.5px; color: var(--vv-ink); text-decoration: none;
}
.vn-wc-utility .woocommerce-MyAccount-navigation li.is-active a { background: var(--vv-olive); border-color: var(--vv-olive); color: var(--vv-on-dark); }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .vn-archive-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
  /* Was `ul.products` alone — (0,1,1) against the base rule's
     `.woocommerce ul.products` at (0,1,2), so it never applied and the grid
     stayed three-up all the way down. Measured at 390px: three 99px tracks. */
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-single-wrap div.product { gap: 40px; }
}

@media (max-width: 900px) {
  .vn-archive-layout { grid-template-columns: 1fr; gap: 0; }
  .vn-single-wrap div.product { grid-template-columns: 1fr; gap: 30px; }

  /* The rail becomes an off-canvas drawer. */
  .vn-filters {
    position: fixed; top: 0; left: 0; z-index: 1200;
    width: min(340px, 88vw); height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--vv-surface);
    box-shadow: var(--vv-sh-xl);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--vv-normal) var(--vv-ease), visibility var(--vv-normal);
  }
  .vn-filters[data-open="true"] { transform: none; visibility: visible; }
  .vn-filters__backdrop { position: fixed; inset: 0; z-index: 1190; background: rgba(25, 22, 24, .45); }
  .vn-filters__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px; border-bottom: 1px solid var(--vv-line);
  }
  .vn-filters__title { margin: 0; font-family: var(--vv-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .vn-filters__close { border: 0; background: none; color: var(--vv-ink); cursor: pointer; display: grid; place-items: center; }
  .vn-filters__body { flex: 1; overflow-y: auto; padding: 0 22px; }
  .vn-filters__foot { display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--vv-line); }
  .vn-filters__foot .vn-link, .vn-filters__foot .vn-button { flex: 1; }
  .vn-filters__toggle { display: inline-flex; margin-bottom: 22px; }
}

@media (min-width: 901px) {
  .vn-filters__toggle { display: none; }
  .vn-filters__backdrop { display: none; }
}

@media (max-width: 620px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .vn-cart-drawer { width: 100vw; }
  .vn-search-form__input { font-size: calc(24px * var(--vv-scale)); }
  .vn-card-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .vn-cart-drawer, .vn-search-overlay, .vn-filters,
  ul.products li.product a img { transition: none; }
  ul.products li.product:hover a img { transform: none; }
}

/* =========================================================================
   CART + CHECKOUT — WooCommerce BLOCKS

   ⚠ Both pages use the block cart/checkout (wp:woocommerce/cart), not the
   classic shortcodes, so none of the `table.shop_table` rules above reach
   them. Verified by reading the page content, not assumed — the first test
   pass reported "0 cart rows" against a classic selector while the cart was
   in fact full. infra styles the same block classes for the same reason.
   ====================================================================== */

.wc-block-components-sidebar-layout { gap: 46px; }

/* Line items */
.wc-block-cart-items__row { border-bottom: 1px solid var(--vv-line); }
.wc-block-cart-item__image img {
  border-radius: 4px;
  background: var(--vv-paper-2);
}
.wc-block-components-product-name {
  font-family: var(--vv-body) !important;
  font-size: 15.5px !important;
  font-weight: 500;
  color: var(--vv-ink) !important;
  text-decoration: none;
}
.wc-block-components-product-price,
.wc-block-components-product-metadata { font-family: var(--vv-body); font-size: 14px; color: var(--vv-ink-soft); }

/* Quantity stepper — match the drawer's */
.wc-block-components-quantity-selector {
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-r-full) !important;
  overflow: hidden;
}
.wc-block-components-quantity-selector::after { content: none !important; }
.wc-block-components-quantity-selector__input {
  font-family: var(--vv-body) !important;
  font-size: 13px !important;
  color: var(--vv-ink) !important;
}
.wc-block-components-quantity-selector__button {
  color: var(--vv-ink) !important;
  font-size: 15px !important;
}
.wc-block-components-quantity-selector__button:hover { background: var(--vv-paper) !important; }

/* Totals */
.wc-block-components-totals-item { font-family: var(--vv-body); font-size: 14.5px; }
.wc-block-components-totals-item__label { color: var(--vv-ink-soft); }
.wc-block-components-totals-item__value { color: var(--vv-ink); font-weight: 600; }
.wc-block-components-totals-footer-item { border-top: 1px solid var(--vv-line); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--vv-display);
  font-size: calc(28px * var(--vv-scale));
  letter-spacing: -.02em;
}

/* Sidebar card */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
  background: var(--vv-paper);
  border: 1px solid var(--vv-line);
  border-radius: 6px;
  padding: 26px;
}

/* Buttons */
.wc-block-components-button:not(.is-link) {
  border-radius: var(--vv-r-full) !important;
  background: var(--vv-olive) !important;
  border: 1px solid var(--vv-olive) !important;
  color: var(--vv-on-dark) !important;
  font-family: var(--vv-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .95rem 1.9rem !important;
}
.wc-block-components-button:not(.is-link):hover {
  background: var(--vv-ink) !important;
  border-color: var(--vv-ink) !important;
}
.wc-block-components-button.is-link { color: var(--vv-tan-deep) !important; }

/* Fields */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-block-components-combobox-control input {
  border-color: var(--vv-line) !important;
  border-radius: 4px !important;
  font-family: var(--vv-body) !important;
  font-size: 14.5px !important;
  color: var(--vv-ink) !important;
  background: var(--vv-surface) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus { border-color: var(--vv-olive) !important; box-shadow: none !important; }
.wc-block-components-text-input label { font-family: var(--vv-body) !important; color: var(--vv-mute) !important; }

/* Checkout steps */
.wc-block-components-checkout-step__title,
.wc-block-components-title {
  font-family: var(--vv-display) !important;
  font-size: calc(28px * var(--vv-scale)) !important;
  font-weight: var(--vv-weight-head) !important;
  letter-spacing: -.02em;
  color: var(--vv-ink) !important;
  text-transform: none !important;
}
.wc-block-components-checkout-step { border-bottom: 1px solid var(--vv-line); padding-bottom: 22px; }

/* Notices */
.wc-block-components-notice-banner {
  border-radius: 4px !important;
  font-family: var(--vv-body) !important;
  font-size: 14px !important;
}

/* Coupon */
.wc-block-components-totals-coupon__button { border-radius: var(--vv-r-full) !important; }

@media (max-width: 900px) {
  .wc-block-components-sidebar-layout { gap: 28px; }
  .wc-block-cart__sidebar .wc-block-components-sidebar,
  .wc-block-checkout__sidebar .wc-block-components-sidebar { padding: 20px; }
}

/* =========================================================================
   SPECIFICITY OVERRIDES

   WooCommerce ships `.woocommerce a.button` — one class plus an element,
   (0,2,1) — which beat `.vn-card-actions .button` at (0,2,0) even though our
   sheet loads later. Every button below therefore carries the element in the
   selector. Measured, not guessed: the card buttons were computing to WC's
   pale lilac #E9E6ED with a 3px radius.
   ====================================================================== */

.woocommerce .vn-card-actions a.button,
.woocommerce .vn-card-actions a.add_to_cart_button,
.woocommerce ul.products li.product a.button,
.woocommerce div.product form.cart button.button,
.woocommerce div.product form.cart button[type="submit"],
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--vv-olive) !important;
  border: 1px solid var(--vv-olive) !important;
  border-radius: var(--vv-r-full) !important;
  color: var(--vv-on-dark) !important;
  font-family: var(--vv-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: .85rem 1.5rem !important;
  line-height: 1.2 !important;
}
.woocommerce .vn-card-actions a.button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce div.product form.cart button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--vv-ink) !important;
  border-color: var(--vv-ink) !important;
  color: var(--vv-on-dark) !important;
}

/* Secondary / outline buttons (View cart, Continue shopping …) */
.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.product_type_simple) {
  background-color: transparent !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-r-full) !important;
  color: var(--vv-ink) !important;
  font-family: var(--vv-body) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.product_type_simple):hover {
  background-color: var(--vv-ink) !important;
  border-color: var(--vv-ink) !important;
  color: var(--vv-on-dark) !important;
}

/* WC's "View cart" link after an ajax add — the drawer already shows it. */
.woocommerce ul.products li.product a.added_to_cart { display: none !important; }

/* Loop title + price, which WC also styles by element. */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-family: var(--vv-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--vv-ink) !important;
}
.woocommerce ul.products li.product span.price {
  font-family: var(--vv-body) !important;
  font-size: 15px !important;
  color: var(--vv-ink) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--vv-body) !important;
  font-size: 22px !important;
  color: var(--vv-ink) !important;
}

/* =========================================================================
   CARD TREATMENT — matching the infra build's shop quality

   Header and hero deliberately stay on the site-wide rules; only the shop
   furniture inside them is upgraded. infra's structure, Vivid's palette:
   its accent is orange on white, ours is moss on greige, so the accent-soft
   fills are mixed from --vv-moss rather than translated.
   ====================================================================== */

/* ---------- Filter rail: head + cards ---------- */

.vn-filters__head { display: flex; align-items: center; justify-content: space-between; padding: 2px; margin-bottom: 14px; }
.vn-filters__title {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  font-family: var(--vv-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--vv-mute);
}
.vn-filters__title::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vv-moss-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vv-moss) 22%, transparent);
}
.vn-filters__close { border: 0; background: none; color: var(--vv-ink); cursor: pointer; display: none; }

.vn-filter-group {
  background: var(--vv-surface);
  border: 1px solid var(--vv-line);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--vv-fast) var(--vv-ease), box-shadow var(--vv-normal) var(--vv-ease), transform var(--vv-fast) var(--vv-ease);
}
.vn-filter-group:first-child { border-top: 1px solid var(--vv-line); }
.vn-filter-group:hover { box-shadow: 0 4px 14px rgba(44, 38, 42, .06); }
.vn-filter-group[open] {
  border-color: var(--vv-moss-deep);
  box-shadow: 0 10px 24px rgba(99, 96, 47, .10);
  transform: translateY(-1px);
}
.vn-filter-group.has-active {
  border-color: var(--vv-moss-deep);
  background: linear-gradient(180deg, color-mix(in srgb, var(--vv-butter) 38%, var(--vv-surface)) 0%, var(--vv-surface) 100%);
}
.vn-filter-group__title { padding: 12px 14px; gap: 12px; }
.vn-filter-group__icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--vv-moss) 16%, transparent);
  color: var(--vv-moss-deep);
  transition: background var(--vv-fast) var(--vv-ease), color var(--vv-fast) var(--vv-ease);
}
.vn-filter-group:hover .vn-filter-group__icon,
.vn-filter-group[open] .vn-filter-group__icon {
  background: var(--vv-moss-deep);
  color: var(--vv-surface);
}
.vn-filter-list { padding: 0 14px 12px; }

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .vn-filter-group__icon { background: rgba(149, 144, 79, .16); }
  .vn-filters__title::before { box-shadow: 0 0 0 3px rgba(149, 144, 79, .22); }
  .vn-filter-group.has-active { background: #FBF7E4; }
}

/* ---------- Chips bar as a card ---------- */

.vn-chips-bar {
  padding: 12px 14px;
  margin: 0 0 22px;
  background: var(--vv-surface);
  border: 1px solid var(--vv-line);
  border-radius: 8px;
}

/* ---------- Toolbar: count pill + sort ---------- */

.vn-shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 26px;
}
.woocommerce .vn-shop-toolbar .woocommerce-result-count {
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  background: var(--vv-surface);
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  font-family: var(--vv-body);
  font-size: 12.5px; color: var(--vv-ink-soft);
  float: none;
}
.woocommerce .vn-shop-toolbar .woocommerce-result-count::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vv-moss-deep);
  flex: none;
}
.woocommerce .vn-shop-toolbar .woocommerce-ordering { margin: 0; float: none; }

/* The sort control was computing to appearance: auto — a native OS dropdown
   with the system chevron sitting next to a themed count pill. The border and
   radius were already ours; the chrome was not. */
.woocommerce .vn-shop-toolbar .woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 40px 10px 16px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  background-color: var(--vv-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23655A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px 15px;
  font-family: var(--vv-body);
  font-size: 12.5px;
  color: var(--vv-ink);
  cursor: pointer;
  transition: border-color var(--vv-fast) var(--vv-ease);
}
.woocommerce .vn-shop-toolbar .woocommerce-ordering select.orderby:hover { border-color: var(--vv-moss-deep); }
.woocommerce .vn-shop-toolbar .woocommerce-ordering select.orderby:focus-visible {
  outline: 2px solid var(--vv-moss-deep);
  outline-offset: 2px;
}

/* ---------- Product cards ---------- */

.woocommerce ul.products li.product {
  background: var(--vv-surface);
  border: 1px solid var(--vv-line);
  border-radius: 10px;
  padding: 14px 14px 18px;
  transition: border-color var(--vv-fast) var(--vv-ease), box-shadow var(--vv-normal) var(--vv-ease), transform var(--vv-fast) var(--vv-ease);
}
.woocommerce ul.products li.product:hover {
  border-color: color-mix(in srgb, var(--vv-moss) 45%, var(--vv-line));
  box-shadow: 0 14px 30px rgba(44, 38, 42, .08);
  transform: translateY(-2px);
}
@supports not (border-color: color-mix(in srgb, red 50%, transparent)) {
  .woocommerce ul.products li.product:hover { border-color: #A9A47A; }
}
.woocommerce ul.products li.product a img {
  border-radius: 6px;
  margin-bottom: 14px;
  background: var(--vv-paper);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding-top: 0 !important; }
.vn-card-actions { padding-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product:hover,
  .vn-filter-group, .vn-filter-group[open] { transition: none; transform: none; }
}

@media (max-width: 900px) {
  .vn-filters__close { display: inline-grid; place-items: center; }
}

/* =========================================================================
   CART TABLE — four things measured on the rendered page, not assumed.

   The cart renders through page.php (the shortcode sits in the page content),
   so until 0.38.0 it never carried .vn-wc-utility and none of the utility
   styling above reached it. With the class in place these four were still
   computing to WooCommerce's own values:

     #coupon_code          80px wide, 6px padding  → unusable field
     a.remove              rgb(170, 0, 0)          → WC's #a00, off-brand
     .product-thumbnail    32px                    → a thumbnail of nothing
     .section              109.6px top and bottom  → editorial rhythm on a form

   WC's own selectors here are long (`.woocommerce #content table.cart
   td.actions .coupon .input-text`), so these carry enough weight to win.
   ====================================================================== */

.woocommerce .vn-wc-utility table.cart td.actions .coupon .input-text,
.woocommerce-page .vn-wc-utility table.cart td.actions .coupon .input-text {
  width: 190px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-r-sm) !important;
  font-family: var(--vv-body);
  font-size: 14px;
}

/* Removing a line is an ordinary action, not a warning. */
.woocommerce .vn-wc-utility a.remove,
.woocommerce-page .vn-wc-utility a.remove {
  color: var(--vv-mute) !important;
  font-size: 20px;
  line-height: 1;
}
.woocommerce .vn-wc-utility a.remove:hover,
.woocommerce-page .vn-wc-utility a.remove:hover {
  background: transparent !important;
  color: var(--vv-plum-deep) !important;
}

/* Big enough to actually recognise the product by. */
.woocommerce .vn-wc-utility table.cart .product-thumbnail img,
.woocommerce-page .vn-wc-utility table.cart .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--vv-r-sm);
}
.woocommerce .vn-wc-utility table.cart .product-thumbnail,
.woocommerce-page .vn-wc-utility table.cart .product-thumbnail { width: 96px; }

/* A cart is a form. The editorial breathing room the content pages get puts
   110px of nothing between the title and the first row. */
.vn-page .section:has(> .vn-wc-utility) { padding-top: 56px; padding-bottom: 72px; }

/* ---------- Checkout payment panel ----------
   Measured: #payment computes to rgba(129, 110, 153, .14) — WooCommerce's
   lilac tint, the same family as the pale button colour that had to be
   overridden for the product cards. On this palette it reads as a bruise. */

.woocommerce .vn-wc-utility #payment,
.woocommerce-page .vn-wc-utility #payment {
  background: var(--vv-paper) !important;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-md);
  padding: 6px 22px 22px;
}
.woocommerce .vn-wc-utility #payment ul.payment_methods,
.woocommerce-page .vn-wc-utility #payment ul.payment_methods {
  border-bottom: 1px solid var(--vv-line);
  padding: 18px 0;
}
.woocommerce .vn-wc-utility #payment div.form-row,
.woocommerce-page .vn-wc-utility #payment div.form-row { padding: 18px 0 0; }

/* Fine print should read as fine print — it was inheriting the 17px body size. */
.vn-wc-utility .woocommerce-privacy-policy-text p,
.vn-wc-utility .woocommerce-terms-and-conditions-wrapper {
  font-size: 14px;
  line-height: 1.65;
  color: var(--vv-ink-soft);
}

/* ---------- Account login ----------
   Two fields do not need 1290px of container. */
.vn-wc-utility #customer_login,
.vn-wc-utility .woocommerce-form-login,
.vn-wc-utility .woocommerce-ResetPassword {
  max-width: 520px;
  margin-inline: auto;
}
.vn-wc-utility .woocommerce-form-login {
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-md);
  background: var(--vv-paper);
  padding: 28px;
}
.vn-wc-utility #customer_login h2,
.vn-wc-utility .woocommerce-MyAccount-content h2 { margin-top: 0; }

/* A shop with nothing to filter by gets the whole width rather than a column
   that exists to say it is empty. */
.vn-archive-layout--nofilters { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* =========================================================================
   PRODUCT CARD MEDIA — 4:5 frame, price on the image

   The card was thumbnail / title / price stacked, and with no photography yet
   that measured out as a 263px pale square inside a 293px pale card on a pale
   ground: three nested rectangles and nothing to look at. The media now owns a
   4:5 frame with the price sitting on it, which is the same pattern the
   homepage service cards use.
   ====================================================================== */

.vn-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  background: var(--vv-paper);
  margin-bottom: 16px;
}
.woocommerce ul.products li.product .vn-card-media a img,
.woocommerce ul.products li.product .vn-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  transition: transform var(--vv-slow, .6s) var(--vv-ease);
}
.woocommerce ul.products li.product:hover .vn-card-media img { transform: scale(1.035); }

.vn-card-price {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex; align-items: center;
  padding: 7px 13px;
  border-radius: var(--vv-r-full);
  background: var(--vv-surface);
  box-shadow: 0 2px 10px rgba(44, 38, 42, .12);
  font-family: var(--vv-body);
  font-size: 13px; font-weight: 600;
  color: var(--vv-ink);
  line-height: 1;
}
.vn-card-price .woocommerce-Price-amount { font-weight: 600; }
.vn-card-price del { color: var(--vv-mute); font-weight: 400; margin-right: 6px; }
.vn-card-price ins { text-decoration: none; }

/* A sale flash and the price pill both want the top-left corner. */
.vn-badge--sale { left: auto; right: 12px; }

/* A partial row left a one-sided hole — two products in three tracks, the gap
   always on the right, which reads as a layout bug rather than as a small
   catalogue.

   Two approaches were tried and measured before this one. Stretching the cards
   to fill made them 452px billboards that would snap back to 293px the moment a
   third product existed. repeat(auto-fit, minmax(0, 293px)) was worse and
   quietly so: 3 x 293 + 2 x 26 is 931 against a 930px track, one pixel over, so
   auto-fit built TWO columns at every product count — six products would have
   laid out 2-up. Caught by simulating 1 to 6 items, not by looking.

   So the track width is derived from what a full three-column row would give,
   which cannot drift from the real one, and a short row is centred. Scoped to
   the three-column breakpoint; narrower layouts have their own column counts
   and a much smaller hole. */
@media (min-width: 1081px) {
  /* One or two products sit flush left rather than centred — the client's call,
     and it keeps the first card aligned with the toolbar above it. The track
     width is still derived from a full three-column row, so the card never
     changes size as the catalogue grows. */
  .woocommerce ul.products.columns-3:has(li.product:nth-child(2):last-child),
  ul.products.columns-3:has(li.product:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, calc((100% - 2 * var(--vn-grid-gap)) / 3)));
    justify-content: start;
  }
  .woocommerce ul.products.columns-3:has(li.product:only-child),
  ul.products.columns-3:has(li.product:only-child) {
    grid-template-columns: minmax(0, calc((100% - 2 * var(--vn-grid-gap)) / 3));
    justify-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product .vn-card-media img,
  .woocommerce ul.products li.product:hover .vn-card-media img { transition: none; transform: none; }
}

/* =========================================================================
   CATALOGUE STATES — pagination, loading, empty, stock

   Everything below is scoped inside the catalogue (.vn-archive-* / ul.products
   / .vn-card-*) so the hero, the closing CTA and the footer are untouched.
   ====================================================================== */

.vn-archive-layout { padding-top: 44px; }

/* ---------- Loading ----------
   The results column dims and stops taking clicks while a request is out, but
   keeps its height, so the page does not jump under the pointer mid-filter. */
.vn-archive-grid {
  position: relative;
  transition: opacity var(--vv-normal) var(--vv-ease);
}
.vn-archive-grid.is-loading { opacity: .4; pointer-events: none; }
.vn-archive-grid.is-loading::after {
  content: "";
  position: absolute; top: 80px; left: 50%;
  width: 26px; height: 26px;
  margin-left: -13px;
  border: 2px solid var(--vv-line);
  border-top-color: var(--vv-moss-deep);
  border-radius: 50%;
  animation: vn-spin .7s linear infinite;
}
@keyframes vn-spin { to { transform: rotate(360deg); } }

/* ---------- Pagination ---------- */

.vn-shop-pagination {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--vv-line);
}
.vn-shop-pagination .woocommerce-pagination ul,
.vn-shop-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  list-style: none; margin: 0; padding: 0; border: 0;
}
.vn-shop-pagination li { margin: 0; border: 0; }
.vn-shop-pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 42px; height: 42px;
  padding: 0 13px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  background: var(--vv-surface);
  font-family: var(--vv-body);
  font-size: 13.5px; color: var(--vv-ink);
  text-decoration: none;
  transition: background var(--vv-fast) var(--vv-ease), border-color var(--vv-fast) var(--vv-ease), color var(--vv-fast) var(--vv-ease);
}
.vn-shop-pagination a.page-numbers:hover { border-color: var(--vv-moss-deep); background: var(--vv-paper); }
.vn-shop-pagination .page-numbers.current {
  background: var(--vv-olive);
  border-color: var(--vv-olive);
  color: var(--vv-on-dark);
  font-weight: 600;
}
.vn-shop-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ---------- Empty result ---------- */

.vn-no-products {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 74px 24px 84px;
  text-align: center;
}
.vn-no-products__mark { display: block; width: 46px; color: var(--vv-moss); opacity: .5; }
.vn-no-products__mark svg { width: 100%; height: auto; display: block; }
.vn-no-products h2 { margin: 6px 0 0; font-size: calc(34px * var(--vv-scale)); }
.vn-no-products p { margin: 0; max-width: 42ch; font-size: 15px; color: var(--vv-ink-soft); }
.vn-no-products .vn-button { margin-top: 10px; }

/* ---------- Stock ---------- */

.vn-badge--oos {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  padding: 6px 12px;
  border-radius: var(--vv-r-full);
  background: var(--vv-ink);
  color: var(--vv-on-dark);
  font-family: var(--vv-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.woocommerce ul.products li.product.vn-product--oos .vn-card-media img { opacity: .55; }

/* An out-of-stock or variable product links to its page rather than adding, so
   it reads as a secondary action instead of promising something it cannot do. */
.woocommerce ul.products li.product a.button:not(.ajax_add_to_cart) {
  background-color: transparent !important;
  border: 1px solid var(--vv-line) !important;
  color: var(--vv-ink) !important;
}
.woocommerce ul.products li.product a.button:not(.ajax_add_to_cart):hover {
  background-color: var(--vv-ink) !important;
  border-color: var(--vv-ink) !important;
  color: var(--vv-on-dark) !important;
}

/* ---------- Add to cart feedback ---------- */

.woocommerce ul.products li.product a.button.is-loading { opacity: .62; pointer-events: none; }
.woocommerce ul.products li.product a.button.is-added {
  background-color: var(--vv-moss-deep) !important;
  border-color: var(--vv-moss-deep) !important;
}
.woocommerce ul.products li.product a.button.is-added::after {
  content: "✓";
  margin-left: 8px;
  font-size: 13px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .vn-archive-grid.is-loading::after { animation: none; }
}

/* =========================================================================
   SINGLE PRODUCT

   The layout was diagonal and it was one line's fault. div.product is a
   two-column grid, and the breadcrumb — hooked onto
   woocommerce_before_single_product_summary — is one of its children, so it
   took cell one. That pushed the gallery into the right column and the summary
   into row two on the left, with a viewport of dead space above it.
   ====================================================================== */

.vn-single-wrap .vn-single-crumbs {
  grid-column: 1 / -1;
  padding: 0 0 26px;
}

/* Gallery: the same frame language as the catalogue cards, so a product page
   reads as the card opened up rather than a different site. */
.vn-single-wrap .woocommerce-product-gallery {
  position: sticky;
  top: calc(var(--vv-header-h) + 24px);
}
.vn-single-wrap .woocommerce-product-gallery__wrapper {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vv-paper);
}
.vn-single-wrap .woocommerce-product-gallery__image,
.vn-single-wrap .woocommerce-product-gallery__image a { display: block; }
.vn-single-wrap .woocommerce-product-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.vn-single-wrap .summary { padding-top: 6px; }
.vn-single-wrap .product_title { margin-top: 0; }

/* Single-tab strip. With no description written yet the only tab is Reviews,
   and an olive pill floating alone above the panel reads as a stray element
   rather than navigation. One tab is not a choice, so it is not shown. */
.vn-single-wrap .woocommerce-tabs ul.tabs:has(li:only-child) { display: none; }
.vn-single-wrap .woocommerce-tabs { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--vv-line); }

/* ---------- Reviews ----------
   Measured: the submit button computed to rgb(233, 230, 237) in Arial with a
   3px radius — WooCommerce's own pale lilac, the same family that had to be
   overridden on the product cards. */

.vn-single-wrap #reviews .woocommerce-Reviews-title,
.vn-single-wrap #reviews #reply-title { font-size: calc(30px * var(--vv-scale)); margin: 0 0 18px; }
.vn-single-wrap #reviews .woocommerce-noreviews { font-size: 15px; color: var(--vv-ink-soft); }
.vn-single-wrap #review_form_wrapper {
  max-width: 620px;
  margin-top: 26px;
  padding: 26px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-md);
  background: var(--vv-paper);
}
.vn-single-wrap #review_form_wrapper .comment-notes,
.vn-single-wrap #review_form_wrapper .comment-form-cookies-consent label { font-size: 13.5px; color: var(--vv-mute); }
.vn-single-wrap #review_form_wrapper label { display: block; font-size: 13px; color: var(--vv-ink); margin-bottom: 6px; }
.vn-single-wrap #review_form_wrapper input[type="text"],
.vn-single-wrap #review_form_wrapper input[type="email"],
.vn-single-wrap #review_form_wrapper textarea {
  width: 100%;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-r-sm);
  padding: 11px 13px;
  font-family: var(--vv-body);
  font-size: 14.5px;
  background: var(--vv-surface);
  color: var(--vv-ink);
}
.vn-single-wrap #review_form_wrapper textarea { min-height: 120px; resize: vertical; }
.vn-single-wrap #review_form_wrapper p.stars a { color: var(--vv-moss-deep); }
.vn-single-wrap #review_form_wrapper .form-submit input[type="submit"],
.vn-single-wrap #review_form_wrapper .form-submit button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.8rem;
  border: 1px solid var(--vv-olive) !important;
  border-radius: var(--vv-r-full) !important;
  background: var(--vv-olive) !important;
  color: var(--vv-on-dark) !important;
  font-family: var(--vv-body) !important;
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.vn-single-wrap #review_form_wrapper .form-submit input[type="submit"]:hover {
  background: var(--vv-ink) !important;
  border-color: var(--vv-ink) !important;
}

/* Related products sit on the catalogue's card rules already; they only need
   the separation. */
.vn-single-wrap .related.products { padding-top: 34px; border-top: 1px solid var(--vv-line); }

@media (max-width: 900px) {
  .vn-single-wrap .woocommerce-product-gallery { position: static; }
}


/* The card button is stretched by .vn-card-actions, and as an inline-block its
   label stayed hard against the left edge of the pill. Applies to the
   secondary states too — "Read more" on an out-of-stock product and "Select
   options" on a variable one are the same control. */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button:not(.ajax_add_to_cart) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* =========================================================================
   QUANTITY STEPPER

   One pill holding minus, the value and plus. The browser's own spinner is
   hidden rather than styled — it cannot be styled consistently, and Safari
   does not draw one at all, so half the visitors had no control.
   ====================================================================== */

.woocommerce .quantity,
.vn-single-wrap form.cart .quantity,
.vn-wc-utility .quantity {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  background: var(--vv-surface);
  overflow: hidden;
}
.vn-qty__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vv-ink);
  font-family: var(--vv-body);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--vv-fast) var(--vv-ease), color var(--vv-fast) var(--vv-ease);
}
.vn-qty__btn:hover { background: var(--vv-paper); color: var(--vv-moss-deep); }
.vn-qty__btn:active { background: var(--vv-paper-2); }

.woocommerce .quantity input.qty,
.vn-single-wrap form.cart .quantity input.qty,
.vn-wc-utility .quantity input.qty {
  width: 42px !important;
  height: 46px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
  font-family: var(--vv-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vv-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce .quantity input.qty:focus-visible {
  outline: 2px solid var(--vv-moss-deep);
  outline-offset: -2px;
}

/* The cart table's column is narrow; the same control, one size down. */
.vn-wc-utility table.cart .quantity .vn-qty__btn { width: 34px; height: 40px; font-size: 15px; }
.vn-wc-utility table.cart .quantity input.qty { height: 40px; width: 38px !important; }

/* =========================================================================
   PRODUCT TABS — specificity, measured

   With a description written the strip returns, and it came back wrong: the
   active tab computed to background rgb(88, 92, 65) with color rgb(81, 81, 81)
   — our olive carrying WooCommerce's grey, so the label was invisible on it.
   Padding was 5.5px 0 (no horizontal), radius 999px 999px 0 0, and the li kept
   WC's old tab chrome: margin 0 -5px plus 5px absolute ::before/::after corners.

   Cause: `.woocommerce div.product .woocommerce-tabs ul.tabs li a` is (0,4,3)
   and the theme's rule was (0,3,3). Adding .vn-single-wrap to the chain makes
   these (0,5,3), which is why every selector below is this long.
   ====================================================================== */

.woocommerce .vn-single-wrap div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--vv-line);
}
.woocommerce .vn-single-wrap div.product .woocommerce-tabs ul.tabs::before,
.woocommerce .vn-single-wrap div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce .vn-single-wrap div.product .woocommerce-tabs ul.tabs li::after {
  content: none !important;
}
.woocommerce .vn-single-wrap div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.woocommerce .vn-single-wrap div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  background: var(--vv-surface);
  color: var(--vv-ink-soft);
  font-family: var(--vv-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  transition: background var(--vv-fast) var(--vv-ease), color var(--vv-fast) var(--vv-ease), border-color var(--vv-fast) var(--vv-ease);
}
.woocommerce .vn-single-wrap div.product .woocommerce-tabs ul.tabs li a:hover {
  border-color: var(--vv-moss-deep);
  color: var(--vv-ink);
}
.woocommerce .vn-single-wrap div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--vv-olive);
  border-color: var(--vv-olive);
  color: var(--vv-on-dark);
}
.woocommerce .vn-single-wrap div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 0;
}
.woocommerce .vn-single-wrap div.product .woocommerce-tabs .panel > h2:first-child {
  font-size: calc(30px * var(--vv-scale));
  margin: 0 0 16px;
}
.woocommerce .vn-single-wrap div.product .woocommerce-tabs .panel p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--vv-ink-soft);
  max-width: 68ch;
}

/* =========================================================================
   CART + CHECKOUT LAYOUT

   Both pages stacked into one column, so the order table and payment panel ran
   the full 1340px while the form they belong to sat at ~440px. Measured on
   checkout: #customer_details, #order_review and table.shop_table all 1340px
   wide. Both are now items-left / summary-right, with the summary sticky, which
   is the arrangement the catalogue and the single product page already use.

   Scoped by the body class WooCommerce sets, so the account page — which shares
   .vn-wc-utility — is untouched.
   ====================================================================== */

@media (min-width: 981px) {
  /* Only when there is a cart to lay out. An empty cart renders a notice and a
     "Return to shop" button, and the two-column grid put those in separate
     columns with the button floating off at the right. */
  .woocommerce-cart .vn-wc-utility > .woocommerce:has(form.woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 352px;
    gap: 48px;
    align-items: start;
  }
  .woocommerce-cart .vn-wc-utility > .woocommerce:has(form.woocommerce-cart-form) > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart .vn-wc-utility .cart-collaterals {
    width: 100%;
    position: sticky;
    top: calc(var(--vv-header-h) + 24px);
  }

  .woocommerce-checkout .vn-wc-utility form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    /* Explicit rows matter: #customer_details spans both, and without them the
       row heights were shared out between the two, which pushed the order
       summary ~150px below its own heading. */
    grid-template-rows: auto 1fr;
    gap: 0 48px;
    align-items: start;
  }
  .woocommerce-checkout .vn-wc-utility form.checkout > #order_review_heading { margin-bottom: 16px; }
  .woocommerce-checkout .vn-wc-utility form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout .vn-wc-utility form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .woocommerce-checkout .vn-wc-utility form.checkout > #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: calc(var(--vv-header-h) + 24px);
  }
  /* Billing and "Additional information" were side by side across the full
     width. In a single column they read better stacked. */
  .woocommerce-checkout .vn-wc-utility #customer_details.col2-set { display: block; }
  .woocommerce-checkout .vn-wc-utility #customer_details .col-1,
  .woocommerce-checkout .vn-wc-utility #customer_details .col-2 { width: 100%; float: none; }
  .woocommerce-checkout .vn-wc-utility #customer_details .col-2 { margin-top: 34px; }
}

/* WooCommerce floats the totals right at its own width; the grid owns that now. */
.woocommerce-cart .vn-wc-utility .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce-cart .vn-wc-utility .cart_totals h2 { font-size: calc(28px * var(--vv-scale)); margin: 0 0 16px; }

/* ---------- Place order ----------
   It was a 141px button tucked at the right of the payment panel. This is the
   commit step on the page; it gets the full width of its column. */
.woocommerce-checkout .vn-wc-utility #payment .place-order button#place_order,
.woocommerce-checkout .vn-wc-utility #payment .place-order input#place_order {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 1.05rem 1.5rem;
  font-size: 12.5px;
}
.woocommerce-checkout .vn-wc-utility #payment .place-order { text-align: left; }

/* ---------- Disabled Update cart ----------
   WooCommerce disables it until a quantity changes, and the olive fill at
   reduced opacity read as a broken button rather than an inactive one. */
.woocommerce .vn-wc-utility button[name="update_cart"]:disabled,
.woocommerce .vn-wc-utility input[name="update_cart"]:disabled,
.woocommerce-page .vn-wc-utility button[name="update_cart"]:disabled {
  background: transparent !important;
  border-color: var(--vv-line) !important;
  color: var(--vv-mute) !important;
  box-shadow: none;
  cursor: default;
  opacity: 1;
}

/* ---------- Cart thumbnails ----------
   The mark-only placeholder is square, so it fills the frame rather than being
   cropped from a 4:5 one. */
.vn-wc-utility table.cart .product-thumbnail img { background: var(--vv-paper); }

/* =========================================================================
   SHOP FORM FIELDS

   The checkout fields were stock WooCommerce with a colour swap: hard white
   fill on the warm greige ground, a 4px radius, 17px labels at body size, a
   bright red required marker, and a State select carrying a near-black 1px
   border while every input beside it had a hairline. Five different weights of
   line in one column.

   One treatment for every field in the shop — checkout, cart coupon, account,
   password reset — since they all sit inside .vn-wc-utility.
   ====================================================================== */

.vn-wc-utility .woocommerce-billing-fields h3,
.vn-wc-utility .woocommerce-additional-fields h3,
.vn-wc-utility #order_review_heading {
  font-size: calc(30px * var(--vv-scale));
  margin: 0 0 22px;
}

/* Labels: the site's micro-label voice, not body copy. */
.vn-wc-utility .form-row label,
.vn-wc-utility .woocommerce-form-row label,
.vn-wc-utility p.form-row > label:first-child {
  display: block;
  margin: 0 0 8px;
  font-family: var(--vv-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vv-mute);
  line-height: 1.4;
}
/* A checkbox label is a sentence, not a field name. */
.vn-wc-utility .form-row label.checkbox,
.vn-wc-utility .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vv-ink-soft);
}
/* WooCommerce's own `.woocommerce form .form-row .required` is (0,3,1) and
   measured out at rgb(170, 0, 0) — browser red against a palette that has no
   red in it. Matched with the wrapper in the chain so ours wins. */
.vn-wc-utility .required,
.woocommerce .vn-wc-utility form .form-row .required,
.woocommerce-page .vn-wc-utility form .form-row .required,
.woocommerce .vn-wc-utility form .form-row label .required {
  color: var(--vv-tan-deep) !important;
  text-decoration: none;
  border: 0;
}
.vn-wc-utility .woocommerce-form-row .required { color: var(--vv-tan-deep) !important; }

.vn-wc-utility .form-row { margin: 0 0 20px; padding: 0; }
.vn-wc-utility .form-row-first,
.vn-wc-utility .form-row-last { width: calc(50% - 9px); }
.vn-wc-utility .form-row-first { float: left; margin-right: 18px; }
.vn-wc-utility .form-row-last { float: right; margin-right: 0; }
.vn-wc-utility .woocommerce-billing-fields__field-wrapper::after,
.vn-wc-utility .woocommerce-additional-fields__field-wrapper::after { content: ""; display: table; clear: both; }

/* One field treatment. !important because WooCommerce sets several of these
   inline-adjacent at a higher specificity than a theme selector reaches. */
.vn-wc-utility input[type="text"],
.vn-wc-utility input[type="email"],
.vn-wc-utility input[type="tel"],
.vn-wc-utility input[type="number"]:not(.qty),
.vn-wc-utility input[type="password"],
.vn-wc-utility input[type="search"],
.vn-wc-utility textarea,
.vn-wc-utility select,
.vn-wc-utility .select2-container .select2-selection--single {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: var(--vv-r-md) !important;
  background-color: var(--vv-surface) !important;
  box-shadow: none !important;
  font-family: var(--vv-body) !important;
  font-size: 15px !important;
  line-height: 1.4;
  color: var(--vv-ink) !important;
  transition: border-color var(--vv-fast) var(--vv-ease), box-shadow var(--vv-fast) var(--vv-ease);
}
.vn-wc-utility textarea { min-height: 118px; resize: vertical; }

.vn-wc-utility input::placeholder,
.vn-wc-utility textarea::placeholder { color: var(--vv-mute); opacity: 1; }

.vn-wc-utility input:focus,
.vn-wc-utility textarea:focus,
.vn-wc-utility select:focus {
  outline: none;
  border-color: var(--vv-moss-deep) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vv-moss) 22%, transparent) !important;
}
@supports not (box-shadow: 0 0 0 3px color-mix(in srgb, red 50%, transparent)) {
  .vn-wc-utility input:focus,
  .vn-wc-utility textarea:focus,
  .vn-wc-utility select:focus { box-shadow: 0 0 0 3px rgba(149, 144, 79, .22) !important; }
}

/* The select kept the OS chevron beside inputs that had none. */
.vn-wc-utility select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23655A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 15px 15px !important;
  cursor: pointer;
}

/* A single allowed country renders as static text, not a field — WooCommerce
   still wraps it so it was drawing as a disabled-looking box. */
.vn-wc-utility .form-row strong {
  display: block;
  padding: 13px 0 0;
  font-family: var(--vv-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--vv-ink);
}

/* Validation, in the palette rather than browser red. */
.vn-wc-utility .woocommerce-invalid input.input-text,
.vn-wc-utility .woocommerce-invalid select { border-color: var(--vv-plum-deep) !important; }
.vn-wc-utility .woocommerce-validated input.input-text { border-color: var(--vv-moss) !important; }