/* ==========================================================================
   Veduka — WordPress + WooCommerce glue
   The design system (veduka-ds.css) owns every colour, radius, shadow and
   font. Nothing in this file may introduce a raw value: it only maps
   WordPress core and WooCommerce markup onto the .vd- system and its tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell — the README's one rule: the page must be cream.
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { min-height: 100vh; display: flex; flex-direction: column; }
.vd-site { flex: 1 0 auto; display: flex; flex-direction: column; }
.vd-site__main { flex: 1 0 auto; }

/* WordPress admin bar must not sit on top of a sticky header. */
body.admin-bar .vd-header--sticky { top: 32px; }
@media (max-width: 782px) { body.admin-bar .vd-header--sticky { top: 46px; } }

.vd-header--sticky { position: sticky; top: 0; box-shadow: var(--vd-shadow-sm); }

/* --------------------------------------------------------------------------
   2. Header extras the design system leaves to the host: burger + cart
   -------------------------------------------------------------------------- */
.vd-header__actions { display: flex; align-items: center; gap: var(--vd-space-4); }

.vd-burger {
  display: none; width: 2.75rem; height: 2.75rem; border-radius: var(--vd-radius-circle);
  align-items: center; justify-content: center; color: var(--vd-ink);
  background: var(--vd-cream-200);
}
.vd-burger:hover { background: var(--vd-cream-300); }
.vd-burger__bars, .vd-burger__bars::before, .vd-burger__bars::after {
  display: block; width: 1.1rem; height: 2px; border-radius: var(--vd-radius-pill);
  background: currentColor; content: "";
}
.vd-burger__bars { position: relative; }
.vd-burger__bars::before { position: absolute; top: -6px; }
.vd-burger__bars::after  { position: absolute; top: 6px; }

.vd-cart-link { position: relative; display: inline-flex; align-items: center; gap: var(--vd-space-2); color: var(--vd-ink); text-decoration: none; }
.vd-cart-link:hover { color: var(--vd-purple-700); }
.vd-cart-link__count {
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.35em;
  display: inline-grid; place-items: center;
  background: var(--vd-purple-600); color: #FFFFFF;
  font-family: var(--vd-font-display); font-size: var(--vd-text-2xs); font-weight: var(--vd-weight-bold);
  border-radius: var(--vd-radius-pill);
}
.vd-cart-link__count[data-count="0"] { background: var(--vd-cream-400); color: var(--vd-ink-muted); }

@media (max-width: 900px) {
  .vd-burger { display: inline-flex; }
  .vd-header .vd-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--vd-surface-card); box-shadow: var(--vd-shadow-lg);
    padding: var(--vd-space-3) var(--vd-gutter) var(--vd-space-5);
  }
  .vd-header .vd-nav.is-open { display: flex; }
  .vd-header .vd-nav__link { border-bottom: 2px solid var(--vd-border-subtle); padding-block: var(--vd-space-4); }
}

/* Sub-menus: a plain hover panel, cream-bordered, never a plugin. */
.vd-nav .menu-item-has-children { position: relative; }
.vd-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 13rem; z-index: var(--vd-z-overlay);
  display: none; flex-direction: column; gap: var(--vd-space-1);
  background: var(--vd-surface-card); border-radius: var(--vd-radius-md);
  box-shadow: var(--vd-shadow-lg); padding: var(--vd-space-3);
}
.vd-nav .menu-item-has-children:hover > .sub-menu,
.vd-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; }
.vd-nav .sub-menu .vd-nav__link { border-bottom: 0; padding: var(--vd-space-2) var(--vd-space-3); border-radius: var(--vd-radius-sm); }
.vd-nav .sub-menu .vd-nav__link:hover { background: var(--vd-purple-50); }
@media (max-width: 900px) {
  .vd-nav .sub-menu { position: static; display: flex; box-shadow: none; padding: 0 0 0 var(--vd-space-4); }
}

/* --------------------------------------------------------------------------
   3. Editor content — the reset zeroes margins, so give them back in prose
   -------------------------------------------------------------------------- */
.vd-prose { max-width: 68ch; }
.vd-prose > * + * { margin-top: var(--vd-space-5); }
.vd-prose p, .vd-prose li { line-height: var(--vd-leading-relaxed); }
.vd-prose h1, .vd-prose h2, .vd-prose h3, .vd-prose h4, .vd-prose h5, .vd-prose h6 {
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold);
  letter-spacing: var(--vd-tracking-tight); line-height: var(--vd-leading-snug);
  margin-top: var(--vd-space-8);
}
.vd-prose h1 { font-size: var(--vd-text-4xl); }
.vd-prose h2 { font-size: var(--vd-text-3xl); }
.vd-prose h3 { font-size: var(--vd-text-2xl); }
.vd-prose h4 { font-size: var(--vd-text-xl); }
.vd-prose h5, .vd-prose h6 { font-size: var(--vd-text-lg); }
.vd-prose ul, .vd-prose ol { padding-left: var(--vd-space-6); display: flex; flex-direction: column; gap: var(--vd-space-2); }
.vd-prose ul { list-style: disc; }
.vd-prose ol { list-style: decimal; }
.vd-prose li::marker { color: var(--vd-purple-500); }
.vd-prose blockquote {
  border-left: 6px solid var(--vd-yellow-400); background: var(--vd-yellow-50);
  padding: var(--vd-space-5) var(--vd-space-6); border-radius: var(--vd-radius-md);
  font-size: var(--vd-text-lg);
}
.vd-prose blockquote cite { display: block; margin-top: var(--vd-space-3); font-size: var(--vd-text-xs); font-style: normal; text-transform: uppercase; letter-spacing: var(--vd-tracking-wide); color: var(--vd-ink-muted); }
.vd-prose img, .vd-prose iframe, .vd-prose video { border-radius: var(--vd-radius-lg); }
.vd-prose hr { border: 0; border-top: 2px dashed var(--vd-border-default); }
.vd-prose code, .vd-prose kbd, .vd-prose samp {
  font-family: var(--vd-font-mono); font-size: 0.9em;
  background: var(--vd-cream-200); padding: 0.15em 0.4em; border-radius: var(--vd-radius-xs);
}
.vd-prose pre { background: var(--vd-purple-900); color: var(--vd-cream-100); padding: var(--vd-space-5); border-radius: var(--vd-radius-md); overflow-x: auto; }
.vd-prose pre code { background: none; padding: 0; color: inherit; }
.vd-prose table { width: 100%; border-collapse: collapse; font-size: var(--vd-text-sm); }
.vd-prose th, .vd-prose td { padding: var(--vd-space-3); border-bottom: 2px solid var(--vd-border-subtle); text-align: left; }
.vd-prose th { font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold); }
.vd-prose > .vd-prose__table-wrap { overflow-x: auto; }

/* Core alignment + caption classes */
.alignleft  { float: left; margin: 0 var(--vd-space-5) var(--vd-space-4) 0; }
.alignright { float: right; margin: 0 0 var(--vd-space-4) var(--vd-space-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: min(100%, var(--vd-container-xl)); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption, figcaption {
  font-size: var(--vd-text-xs); color: var(--vd-ink-muted); margin-top: var(--vd-space-2); text-align: center;
}
.sticky .vd-card__title::after { content: " ★"; color: var(--vd-yellow-500); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.screen-reader-text:focus {
  width: auto; height: auto; clip: auto; z-index: var(--vd-z-toast);
  background: var(--vd-purple-700); color: #fff;
  padding: var(--vd-space-3) var(--vd-space-5); border-radius: var(--vd-radius-pill);
}

/* WooCommerce's products header holds the design system's SectionHead. */
.woocommerce-products-header { margin-bottom: 0; }
.woocommerce-products-header__title { display: none; }

/* --------------------------------------------------------------------------
   4. Archive / pagination / comments / widgets
   -------------------------------------------------------------------------- */
.vd-pagination { display: flex; justify-content: center; margin-top: var(--vd-space-9); }
.vd-pagination .nav-links, .vd-pagination .page-numbers { display: flex; flex-wrap: wrap; gap: var(--vd-space-2); align-items: center; list-style: none; padding: 0; margin: 0; }
.vd-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 var(--vd-space-3);
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold);
  background: var(--vd-surface-card); color: var(--vd-ink);
  border-radius: var(--vd-radius-pill); box-shadow: var(--vd-shadow-sm); text-decoration: none;
}
.vd-pagination .page-numbers:hover { background: var(--vd-purple-50); color: var(--vd-purple-700); }
.vd-pagination .page-numbers.current { background: var(--vd-purple-600); color: #FFFFFF; box-shadow: var(--vd-shadow-sticker); }
.vd-pagination .page-numbers.dots { background: none; box-shadow: none; }

.vd-comments { margin-top: var(--vd-space-10); }
.vd-comments__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--vd-space-5); }
.vd-comments__list .children { list-style: none; padding-left: var(--vd-space-6); margin-top: var(--vd-space-5); display: flex; flex-direction: column; gap: var(--vd-space-5); }
.vd-comment { background: var(--vd-surface-card); border-radius: var(--vd-radius-lg); padding: var(--vd-space-5); box-shadow: var(--vd-shadow-sm); }
.vd-comment__meta { display: flex; align-items: center; gap: var(--vd-space-3); margin-bottom: var(--vd-space-3); }
.vd-comment__meta img { border-radius: var(--vd-radius-circle); }
.vd-comment__author { font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold); }
.vd-comment__date { font-size: var(--vd-text-xs); color: var(--vd-ink-muted); }
.comment-respond .comment-reply-title { font-family: var(--vd-font-display); font-size: var(--vd-text-2xl); margin-bottom: var(--vd-space-4); }
.comment-form { display: flex; flex-direction: column; gap: var(--vd-space-4); }
.comment-form label { font-size: var(--vd-text-sm); font-weight: var(--vd-weight-bold); display: block; margin-bottom: var(--vd-space-2); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; background: var(--vd-surface-card); color: var(--vd-ink);
  border: 2px solid var(--vd-border-default); border-radius: var(--vd-radius-pill);
  padding: 0.75em 1.15em;
}
.comment-form textarea { border-radius: var(--vd-radius-md); min-height: 8rem; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--vd-purple-600); box-shadow: 0 0 0 4px var(--vd-purple-100); }
.comment-form .form-submit input[type="submit"] {
  display: inline-flex; font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold);
  padding: 0.85em 1.6em; border: 0; border-radius: var(--vd-radius-pill);
  background: var(--vd-action-primary); color: #FFFFFF; box-shadow: var(--vd-shadow-sticker); cursor: pointer;
}

.vd-widget + .vd-widget { margin-top: var(--vd-space-7); }
.vd-widget__title { font-family: var(--vd-font-display); font-size: var(--vd-text-lg); font-weight: var(--vd-weight-semibold); margin-bottom: var(--vd-space-4); }
.vd-widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--vd-space-2); font-size: var(--vd-text-sm); }
.vd-widget ul ul { padding-left: var(--vd-space-4); margin-top: var(--vd-space-2); }
.vd-widget a { text-decoration: none; }
.vd-widget a:hover { text-decoration: underline; }

.vd-with-sidebar { display: grid; gap: var(--vd-space-9); align-items: start; }
@media (min-width: 1000px) { .vd-with-sidebar { grid-template-columns: minmax(0, 1fr) 17rem; } }

/* --------------------------------------------------------------------------
   5. WooCommerce — notices, breadcrumb, toolbar
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  list-style: none; margin: 0 0 var(--vd-space-6); padding: var(--vd-space-4) var(--vd-space-5);
  border: 0; border-radius: var(--vd-radius-md); border-left: 6px solid var(--vd-s);
  background: var(--vd-s-tint); color: var(--vd-ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vd-space-3);
}
/* WooCommerce's own icon glyph before a notice — the tinted bar is the signal. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before,
.woocommerce-noreviews::before { content: none; }

.woocommerce-message { background: var(--vd-mint-tint); border-left-color: var(--vd-success); }
.woocommerce-info    { background: var(--vd-sky-tint);  border-left-color: var(--vd-info); }
.woocommerce-error   { background: var(--vd-coral-tint); border-left-color: var(--vd-danger); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { margin-left: auto; }

.woocommerce-breadcrumb {
  font-size: var(--vd-text-xs); text-transform: uppercase; letter-spacing: var(--vd-tracking-wide);
  font-weight: var(--vd-weight-semibold); color: var(--vd-ink-muted); margin-bottom: var(--vd-space-5);
}
.woocommerce-breadcrumb a { color: var(--vd-ink-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--vd-purple-700); }

.vd-shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--vd-space-4); margin-bottom: var(--vd-space-7);
}
.woocommerce-result-count { margin: 0; font-size: var(--vd-text-sm); color: var(--vd-ink-muted); }
.woocommerce-ordering select {
  background: var(--vd-surface-card); color: var(--vd-ink);
  border: 2px solid var(--vd-border-default); border-radius: var(--vd-radius-pill);
  padding: 0.6em 2.75rem 0.6em 1.15em; font-size: var(--vd-text-sm); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E6478' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   6. WooCommerce — product loop. ul.products becomes the .vd-grid.
   -------------------------------------------------------------------------- */
.woocommerce ul.products, ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--vd-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
/* WooCommerce's clearfix pseudo-elements become grid items and strand the
   first row one column to the right — kill them at WooCommerce's specificity. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
ul.products::before, ul.products::after { content: none; display: none; }
ul.products li.product { margin: 0; padding: 0; width: auto; float: none; list-style: none; display: flex; }
ul.products li.product > .vd-card { width: 100%; }
.woocommerce ul.products li.product .onsale, ul.products li.product .onsale { display: none; }

/* Star rating: WooCommerce's font trick, restyled to the .vd-stars scale. */
.star-rating, .vd-stars {
  overflow: hidden; position: relative; height: 1.2em; line-height: 1.2;
  font-size: var(--vd-text-sm); width: 5.4em; font-family: star; flex: none;
  color: var(--vd-yellow-500); letter-spacing: 0.1em;
}
.star-rating::before { content: "\73\73\73\73\73"; float: left; top: 0; left: 0; position: absolute; opacity: 0.3; }
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before { content: "\53\53\53\53\53"; top: 0; position: absolute; left: 0; }

/* --------------------------------------------------------------------------
   7. WooCommerce — every button becomes a .vd-btn
   -------------------------------------------------------------------------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, a.button, button.button, input.button,
.wc-block-components-button, .wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vd-space-2);
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold);
  font-size: var(--vd-text-md); line-height: 1;
  padding: 0.85em 1.6em; border: 2px solid transparent; border-radius: var(--vd-radius-pill);
  background: var(--vd-action-primary); color: #FFFFFF;
  box-shadow: var(--vd-shadow-sticker); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--vd-duration-fast) var(--vd-ease-bounce),
              box-shadow var(--vd-duration-fast) var(--vd-ease),
              background-color var(--vd-duration-fast) var(--vd-ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.wc-block-components-button:hover, .wp-element-button:hover {
  background: var(--vd-action-primary-hover); color: #FFFFFF;
  transform: translateY(-2px); box-shadow: var(--vd-shadow-lift);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button, .woocommerce .checkout-button {
  background: var(--vd-action-accent); color: var(--vd-ink-on-accent);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover, .woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover { background: var(--vd-action-accent-hover); color: var(--vd-ink-on-accent); }
.woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button.disabled,
.woocommerce input.button:disabled {
  background: var(--vd-cream-300); color: var(--vd-ink-subtle); box-shadow: none; opacity: 1; pointer-events: none;
}
.woocommerce a.added_to_cart { display: inline-block; margin-top: var(--vd-space-2); font-size: var(--vd-text-xs); font-weight: var(--vd-weight-bold); }
/* The loop's add-to-cart is a small pill so it fits the card footer. */
ul.products li.product .button { font-size: var(--vd-text-sm); padding: 0.7em 1.2em; }

/* --------------------------------------------------------------------------
   8. WooCommerce — forms
   -------------------------------------------------------------------------- */
.woocommerce form .form-row { display: flex; flex-direction: column; gap: var(--vd-space-2); margin: 0 0 var(--vd-space-4); padding: 0; }
.woocommerce form .form-row label { font-size: var(--vd-text-sm); font-weight: var(--vd-weight-bold); }
.woocommerce form .form-row .required { color: var(--vd-danger-ink); text-decoration: none; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
@media (min-width: 640px) {
  .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - var(--vd-space-2)); display: inline-flex; vertical-align: top; }
  .woocommerce form .form-row-first { margin-right: var(--vd-space-3); }
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input {
  width: 100%; background: var(--vd-surface-card); color: var(--vd-ink);
  border: 2px solid var(--vd-border-default); border-radius: var(--vd-radius-pill);
  padding: 0.75em 1.15em; font-size: var(--vd-text-md); height: auto;
  transition: border-color var(--vd-duration-fast) var(--vd-ease), box-shadow var(--vd-duration-fast) var(--vd-ease);
}
.woocommerce form .form-row textarea { border-radius: var(--vd-radius-md); min-height: 7rem; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none; border-color: var(--vd-purple-600); box-shadow: 0 0 0 4px var(--vd-purple-100);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--vd-danger-ink); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--vd-mint); }
.woocommerce form.login, .woocommerce form.register, .woocommerce form.checkout_coupon,
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword {
  background: var(--vd-surface-card); border: 0; border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow-sm); padding: var(--vd-space-6); margin-bottom: var(--vd-space-6);
}
.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity .qty {
  width: 5rem; text-align: center; background: var(--vd-surface-card);
  border: 2px solid var(--vd-border-default); border-radius: var(--vd-radius-pill);
  padding: 0.75em 0.5em; font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: inherit; padding: 0; color: var(--vd-ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: var(--vd-space-3); }
.select2-dropdown { border: 2px solid var(--vd-border-default); border-radius: var(--vd-radius-md); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--vd-purple-600); }

/* --------------------------------------------------------------------------
   9. WooCommerce — single product
   -------------------------------------------------------------------------- */
.vd-product { display: grid; gap: var(--vd-space-8); align-items: start; }
@media (min-width: 900px) { .vd-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.woocommerce div.product { position: relative; }
.woocommerce div.product .woocommerce-product-gallery { width: 100%; }
.woocommerce div.product .woocommerce-product-gallery__wrapper img { border-radius: var(--vd-radius-2xl); box-shadow: var(--vd-shadow-md); }
.woocommerce div.product .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: var(--vd-space-3); list-style: none; padding: 0; margin: var(--vd-space-4) 0 0; }
.woocommerce div.product .flex-control-thumbs li { width: 4.5rem; }
.woocommerce div.product .flex-control-thumbs img { border-radius: var(--vd-radius-md); cursor: pointer; }
.woocommerce div.product .product_title {
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold);
  font-size: clamp(1.75rem, 3.5vw, var(--vd-text-4xl)); line-height: var(--vd-leading-snug);
  letter-spacing: var(--vd-tracking-tight); margin-bottom: var(--vd-space-3);
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold);
  font-size: var(--vd-text-3xl); color: var(--vd-purple-700); margin: var(--vd-space-4) 0;
}
.woocommerce div.product p.price del, .woocommerce div.product span.price del {
  color: var(--vd-ink-subtle); font-size: var(--vd-text-lg); font-weight: var(--vd-weight-regular); margin-right: var(--vd-space-3);
}
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--vd-ink-muted); line-height: var(--vd-leading-relaxed); }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vd-space-3); margin: var(--vd-space-6) 0; }
.woocommerce div.product form.cart .variations { width: 100%; border-collapse: collapse; }
.woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { padding: var(--vd-space-2) 0; text-align: left; }
.woocommerce div.product .product_meta {
  font-size: var(--vd-text-xs); color: var(--vd-ink-muted);
  display: flex; flex-direction: column; gap: var(--vd-space-1);
  border-top: 2px solid var(--vd-border-subtle); padding-top: var(--vd-space-4); margin-top: var(--vd-space-4);
}
.woocommerce div.product .woocommerce-tabs { margin-top: var(--vd-space-10); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none; margin: 0 0 var(--vd-space-6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--vd-space-2); border-bottom: 2px solid var(--vd-border-subtle);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: var(--vd-space-3) var(--vd-space-5);
  font-family: var(--vd-font-body); font-size: var(--vd-text-xs); font-weight: var(--vd-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--vd-tracking-wider);
  color: var(--vd-ink-muted); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--vd-purple-700); border-bottom-color: var(--vd-yellow-400); }
.woocommerce div.product .woocommerce-tabs .panel > h2 { font-family: var(--vd-font-display); font-size: var(--vd-text-2xl); margin-bottom: var(--vd-space-4); }
.woocommerce #reviews #comments ol.commentlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--vd-space-4); }
.woocommerce #reviews #comments ol.commentlist li .comment_container {
  background: var(--vd-surface-card); border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow-sm); padding: var(--vd-space-5);
  display: flex; gap: var(--vd-space-4); align-items: flex-start;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar { width: 3rem; border-radius: var(--vd-radius-circle); }
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 {
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold);
  font-size: var(--vd-text-3xl); margin-bottom: var(--vd-space-6);
}
.woocommerce .related, .woocommerce .upsells { margin-top: var(--vd-space-10); }

/* --------------------------------------------------------------------------
   10. WooCommerce — cart, checkout, account
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table, .woocommerce table.shop_attributes {
  width: 100%; border-collapse: collapse; border: 0; border-radius: var(--vd-radius-lg);
  background: var(--vd-surface-card); box-shadow: var(--vd-shadow-sm); overflow: hidden; margin-bottom: var(--vd-space-6);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td,
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td {
  padding: var(--vd-space-4); border-bottom: 2px solid var(--vd-border-subtle); text-align: left; vertical-align: middle;
}
.woocommerce table.shop_table th {
  font-family: var(--vd-font-body); font-size: var(--vd-text-xs); font-weight: var(--vd-weight-bold);
  text-transform: uppercase; letter-spacing: var(--vd-tracking-wide); color: var(--vd-ink-muted);
  background: var(--vd-cream-100);
}
.woocommerce table.shop_table img { width: 4rem; border-radius: var(--vd-radius-md); }
.woocommerce a.remove {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: var(--vd-radius-circle); background: var(--vd-coral-tint); color: var(--vd-coral-ink) !important;
  font-size: var(--vd-text-md); line-height: 1; text-decoration: none;
}
.woocommerce a.remove:hover { background: var(--vd-danger); color: var(--vd-ink) !important; }
.woocommerce .cart-collaterals { display: grid; gap: var(--vd-space-6); }
@media (min-width: 900px) { .woocommerce .cart-collaterals { grid-template-columns: minmax(0, 1fr) 22rem; } }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading,
.woocommerce-account h2, .woocommerce-account h3 {
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold);
  font-size: var(--vd-text-2xl); margin-bottom: var(--vd-space-4);
}
.woocommerce .cart_totals, .woocommerce-checkout-review-order {
  background: var(--vd-surface-card); border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow-sm); padding: var(--vd-space-6);
}
.woocommerce .cart_totals table.shop_table, .woocommerce-checkout-review-order table.shop_table { box-shadow: none; background: none; margin: 0; }
.woocommerce-checkout #payment { background: var(--vd-cream-100); border-radius: var(--vd-radius-lg); padding: var(--vd-space-5); margin-top: var(--vd-space-5); }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 var(--vd-space-4); display: flex; flex-direction: column; gap: var(--vd-space-3); }
.woocommerce-checkout #payment div.payment_box { background: var(--vd-surface-card); border-radius: var(--vd-radius-md); padding: var(--vd-space-4); font-size: var(--vd-text-sm); }
.woocommerce .woocommerce-customer-details address {
  font-style: normal; background: var(--vd-surface-card); border-radius: var(--vd-radius-md);
  padding: var(--vd-space-4); box-shadow: var(--vd-shadow-sm);
}
.woocommerce-account .woocommerce { display: grid; gap: var(--vd-space-8); }
@media (min-width: 900px) { .woocommerce-account .woocommerce { grid-template-columns: 15rem minmax(0, 1fr); } }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--vd-space-1); }
.woocommerce-MyAccount-navigation a {
  display: block; padding: var(--vd-space-3) var(--vd-space-4); border-radius: var(--vd-radius-pill);
  font-size: var(--vd-text-xs); font-weight: var(--vd-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--vd-tracking-wider);
  color: var(--vd-ink); text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--vd-purple-50); color: var(--vd-purple-700); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--vd-purple-600); color: #FFFFFF; }

/* Widgets WooCommerce ships (price filter, layered nav, cart) */
.widget_price_filter .ui-slider { background: var(--vd-cream-300); border-radius: var(--vd-radius-pill); height: 0.5rem; }
.widget_price_filter .ui-slider .ui-slider-range { background: var(--vd-purple-500); }
.widget_price_filter .ui-slider .ui-slider-handle { background: var(--vd-purple-600); border-radius: var(--vd-radius-circle); }
.widget_shopping_cart .total { border-top: 2px solid var(--vd-border-subtle); padding-top: var(--vd-space-3); }

/* WooCommerce Blocks (cart/checkout blocks) minimal alignment */
.wc-block-components-title, .wc-block-cart__submit-container .wc-block-cart__submit-button { font-family: var(--vd-font-display); }
.wc-block-components-panel, .wc-block-cart-items { background: var(--vd-surface-card); border-radius: var(--vd-radius-lg); }

/* --------------------------------------------------------------------------
   11. Print
   -------------------------------------------------------------------------- */
@media print {
  .vd-topbar, .vd-header, .vd-subjectbar, .vd-footer, .vd-newsletter, .vd-float-cta, .vd-pagination { display: none !important; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   12. Undo WooCommerce's float layout wherever its own sheet still applies
   -------------------------------------------------------------------------- */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product div.woocommerce-product-gallery {
  float: none; width: auto; margin-bottom: 0;
}
.woocommerce .col2-set, .woocommerce-page .col2-set { display: grid; gap: var(--vd-space-7); }
@media (min-width: 768px) { .woocommerce .col2-set, .woocommerce-page .col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: auto; }

/* The single product's sale flash becomes a design-system badge. */
.woocommerce span.onsale {
  position: static; display: inline-flex; align-items: center;
  min-height: 0; min-width: 0; margin: 0 0 var(--vd-space-3); padding: 0.4em 0.85em;
  font-family: var(--vd-font-body); font-size: var(--vd-text-2xs); font-weight: var(--vd-weight-bold);
  text-transform: uppercase; letter-spacing: var(--vd-tracking-wide); line-height: 1;
  background: var(--vd-yellow-400); color: var(--vd-ink); border-radius: var(--vd-radius-pill);
}
.woocommerce ul.products li.product span.onsale { display: none; }

/* Loading overlay WooCommerce paints over the cart while it updates. */
.blockUI.blockOverlay { border-radius: var(--vd-radius-lg); }

/* --------------------------------------------------------------------------
   13. Header composition helpers
   -------------------------------------------------------------------------- */
/* The <nav> landmark wrapping the menu is a plain flex item; the .vd-nav list
   inside it is the flex row. (display:contents would collapse the wrapper but
   has a history of dropping the landmark from accessibility trees.) */
.vd-nav-wrap { min-width: 0; }
@media (max-width: 900px) { .vd-nav-wrap { position: static; } }

.vd-logo a, .vd-logo--text { text-decoration: none; }
.vd-logo--text:hover { color: inherit; }

/* The page-list fallback menu has no walker, so give its links the nav voice. */
.vd-nav > li > a:not(.vd-nav__link) {
  display: inline-flex; align-items: center;
  font-size: var(--vd-text-xs); font-weight: var(--vd-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--vd-tracking-wider);
  color: var(--vd-ink); text-decoration: none; padding-block: var(--vd-space-2);
  border-bottom: 2px solid transparent;
}
.vd-nav > li > a:not(.vd-nav__link):hover { color: var(--vd-purple-700); border-bottom-color: var(--vd-yellow-400); }
.vd-nav > li { list-style: none; }

/* The topbar's optional menu is a plain inline row. */
.vd-topbar .vd-row { list-style: none; margin: 0; padding: 0; gap: var(--vd-space-5); }
.vd-topbar .vd-row li { list-style: none; }
/* One column when the blog sidebar has no widgets. */
body.vd-no-sidebar .vd-with-sidebar { grid-template-columns: minmax(0, 1fr); }