:root {
  --vs-ink: #201814;
  --vs-muted: #6c5c51;
  --vs-surface: #fffdf8;
  --vs-panel: #f8f1e7;
  --vs-line: #e4d6c4;
  --vs-chile: #a64218;
  --vs-paprika: #cf6b25;
  --vs-leaf: #496b45;
  --vs-gold: #e0a52d;
  --vs-shadow: 0 16px 34px rgba(55, 31, 20, 0.1);
}

/* ── Promotional top bar ─────────────────────────────────────────────────── */

.vs-promo-bar {
  background: linear-gradient(90deg, var(--vs-chile) 0%, var(--vs-paprika) 100%);
  color: #fffdf8;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  line-height: 1.35;
}

.vs-promo-sep {
  opacity: 0.6;
}

body.vivespice-storefront {
  color: var(--vs-ink);
  background: var(--vs-panel);
  letter-spacing: 0;
}

body.vivespice-storefront #header [data-row="top"] {
  display: none !important;
}

body.vivespice-storefront.home #header [data-row="top"],
body.vivespice-storefront.home #header [data-row="bottom"],
body.vivespice-storefront.woocommerce-shop #header [data-row="bottom"],
body.vivespice-storefront.vs-page-about #header [data-row="bottom"],
body.vivespice-storefront.vs-page-contact #header [data-row="bottom"],
body.vivespice-storefront.vs-page-account #header [data-row="bottom"] {
  display: none;
}

body.vivespice-storefront.home #header [data-row="middle"],
body.vivespice-storefront.woocommerce-shop #header [data-row="middle"],
body.vivespice-storefront.vs-page-about #header [data-row="middle"],
body.vivespice-storefront.vs-page-contact #header [data-row="middle"],
body.vivespice-storefront.vs-page-account #header [data-row="middle"] {
  min-height: 84px;
  border-bottom: 1px solid rgba(228, 214, 196, 0.72);
}

body.vivespice-storefront.home #header [data-row="middle"] .ct-container,
body.vivespice-storefront.home #header [data-row="middle"] .ct-container-fluid,
body.vivespice-storefront.woocommerce-shop #header [data-row="middle"] .ct-container,
body.vivespice-storefront.woocommerce-shop #header [data-row="middle"] .ct-container-fluid,
body.vivespice-storefront.vs-page-about #header [data-row="middle"] .ct-container,
body.vivespice-storefront.vs-page-about #header [data-row="middle"] .ct-container-fluid,
body.vivespice-storefront.vs-page-contact #header [data-row="middle"] .ct-container,
body.vivespice-storefront.vs-page-contact #header [data-row="middle"] .ct-container-fluid,
body.vivespice-storefront.vs-page-account #header [data-row="middle"] .ct-container,
body.vivespice-storefront.vs-page-account #header [data-row="middle"] .ct-container-fluid {
  min-height: 84px;
}

body.vivespice-storefront.home .site-logo-container img,
body.vivespice-storefront.home #header .default-logo,
body.vivespice-storefront.woocommerce-shop .site-logo-container img,
body.vivespice-storefront.woocommerce-shop #header .default-logo,
body.vivespice-storefront.vs-page-about .site-logo-container img,
body.vivespice-storefront.vs-page-about #header .default-logo,
body.vivespice-storefront.vs-page-contact .site-logo-container img,
body.vivespice-storefront.vs-page-contact #header .default-logo,
body.vivespice-storefront.vs-page-account .site-logo-container img,
body.vivespice-storefront.vs-page-account #header .default-logo {
  width: auto !important;
  max-width: 112px;
  max-height: 78px;
  object-fit: contain;
}

body.vivespice-storefront.home #main,
body.vivespice-storefront.home #main > .ct-container-full,
body.vivespice-storefront.home article,
body.vivespice-storefront.home .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.vivespice-storefront.home .entry-content > .wp-block-cover:first-child {
  width: 100vw;
  max-width: none;
  min-height: clamp(420px, 52vw, 620px);
  margin: 0 0 clamp(28px, 4vw, 52px) calc(50% - 50vw) !important;
  border-radius: 0;
}

body.vivespice-storefront.home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

body.vivespice-storefront.home .entry-content > .wp-block-cover:first-child .wp-block-button__link {
  width: auto;
  min-width: 148px;
  box-shadow: 0 12px 24px rgba(32, 24, 20, 0.24);
}

.vs-mobile-menu-toggle,
.vs-mobile-menu {
  display: none;
}

body.vivespice-storefront.woocommerce-shop #main {
  padding-top: 0 !important;
}

body.vivespice-storefront.woocommerce-shop .hero-section {
  display: none;
}

body.vivespice-storefront.woocommerce-shop .ct-container > section {
  padding-top: clamp(18px, 3vw, 34px);
}

body.vivespice-storefront.woocommerce-shop .woocommerce-products-header {
  padding-block: 0 16px;
}

body.vivespice-storefront.woocommerce-shop .woocommerce-products-header::after {
  margin-top: 0;
}

/* ── Info / contact / account pages (slug-based, not ID-based) ─────────────── */

body.vivespice-storefront.vs-page-about #main,
body.vivespice-storefront.vs-page-contact #main,
body.vivespice-storefront.vs-page-account #main {
  background:
    linear-gradient(180deg, #fffdf8 0, #f8f1e7 280px),
    var(--vs-panel);
}

body.vivespice-storefront.vs-page-about .ct-container-full,
body.vivespice-storefront.vs-page-contact .ct-container-full,
body.vivespice-storefront.vs-page-account .ct-container-full {
  padding-top: clamp(26px, 4vw, 48px);
}

body.vivespice-storefront.vs-page-about article,
body.vivespice-storefront.vs-page-contact article,
body.vivespice-storefront.vs-page-account article {
  width: min(100% - 32px, 1080px);
  margin-inline: auto;
}

body.vivespice-storefront.vs-page-about .entry-content,
body.vivespice-storefront.vs-page-contact .entry-content,
body.vivespice-storefront.vs-page-account .entry-content {
  max-width: none;
}

body.vivespice-storefront.vs-page-about .entry-content::before,
body.vivespice-storefront.vs-page-contact .entry-content::before,
body.vivespice-storefront.vs-page-account .entry-content::before {
  display: block;
  margin-bottom: 20px;
  color: var(--vs-leaf);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.vivespice-storefront.vs-page-about .entry-content::before {
  content: "About Vive Naturals";
}

body.vivespice-storefront.vs-page-contact .entry-content::before {
  content: "Contact Us";
}

body.vivespice-storefront.vs-page-account .entry-content::before {
  content: "Customer Account";
}

body.vivespice-storefront.vs-page-about .entry-content > .wp-block-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body.vivespice-storefront.vs-page-about .entry-content > .wp-block-group > h3,
body.vivespice-storefront.vs-page-about .entry-content > .wp-block-group > p,
body.vivespice-storefront.vs-page-about .entry-content > .wp-block-group > hr {
  grid-column: auto;
}

body.vivespice-storefront.vs-page-about .entry-content h3,
body.vivespice-storefront.vs-page-contact .entry-content::before,
body.vivespice-storefront.vs-page-account .entry-content::before {
  margin-top: 0;
}

body.vivespice-storefront.vs-page-about .entry-content h3 {
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: var(--vs-ink);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.12;
  text-align: left;
}

body.vivespice-storefront.vs-page-about .entry-content p,
body.vivespice-storefront.vs-page-contact .wpforms-container,
body.vivespice-storefront.vs-page-account .woocommerce {
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(55, 31, 20, 0.08);
}

body.vivespice-storefront.vs-page-about .entry-content p {
  margin: 0;
  padding: 18px;
  color: var(--vs-muted);
  line-height: 1.72;
}

body.vivespice-storefront.vs-page-about .entry-content p strong {
  color: var(--vs-ink);
}

body.vivespice-storefront.vs-page-about .entry-content hr {
  display: none;
}

body.vivespice-storefront.vs-page-about .entry-content > h3 {
  margin-top: 22px;
  color: var(--vs-ink);
  font-size: clamp(24px, 3vw, 34px);
  text-align: left;
}

body.vivespice-storefront.vs-page-about .entry-content p:empty,
body.vivespice-storefront.vs-page-contact .wp-block-buttons:empty,
body.vivespice-storefront.vs-page-contact .entry-content > p:empty {
  display: none;
}

body.vivespice-storefront.vs-page-contact article {
  width: min(100% - 32px, 760px);
}

body.vivespice-storefront.vs-page-contact .wpforms-container {
  margin: 0 !important;
  padding: clamp(18px, 3vw, 30px) !important;
}

body.vivespice-storefront.vs-page-contact .wpforms-field {
  padding-block: 0 16px !important;
}

body.vivespice-storefront.vs-page-contact .wpforms-field-label,
body.vivespice-storefront.vs-page-contact .wpforms-field-sublabel,
body.vivespice-storefront.vs-page-account label {
  color: var(--vs-ink);
  font-weight: 800;
}

body.vivespice-storefront.vs-page-contact .wpforms-field input,
body.vivespice-storefront.vs-page-contact .wpforms-field textarea,
body.vivespice-storefront.vs-page-account .woocommerce input.input-text {
  width: 100% !important;
  min-height: 46px;
  border: 1px solid var(--vs-line) !important;
  border-radius: 8px !important;
  background: #fffaf3 !important;
  color: var(--vs-ink) !important;
  box-shadow: none !important;
}

body.vivespice-storefront.vs-page-contact .wpforms-field textarea {
  min-height: 150px;
}

body.vivespice-storefront.vs-page-contact .wpforms-submit,
body.vivespice-storefront.vs-page-account .woocommerce-button {
  min-height: 46px !important;
  padding-inline: 20px !important;
  color: #fffdf8 !important;
  background: var(--vs-chile) !important;
  border: 1px solid var(--vs-chile) !important;
  border-radius: 8px !important;
  font-weight: 900 !important;
}

body.vivespice-storefront.vs-page-account .woocommerce {
  padding: clamp(18px, 3vw, 30px);
}

body.vivespice-storefront.vs-page-account #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

body.vivespice-storefront.vs-page-account #customer_login::before,
body.vivespice-storefront.vs-page-account #customer_login::after {
  display: none;
}

body.vivespice-storefront.vs-page-account #customer_login .u-column1,
body.vivespice-storefront.vs-page-account #customer_login .u-column2 {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
}

body.vivespice-storefront.vs-page-account #customer_login h2 {
  margin-top: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
}

body.vivespice-storefront.vs-page-account .woocommerce form.login,
body.vivespice-storefront.vs-page-account .woocommerce form.register {
  height: 100%;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  background: #fffaf3;
}

body.vivespice-storefront.vs-page-account .woocommerce-LostPassword a,
body.vivespice-storefront.vs-page-account .woocommerce-privacy-policy-text a {
  color: var(--vs-chile);
  font-weight: 800;
}

/* ── Global overrides ────────────────────────────────────────────────────────── */

.vivespice-storefront .site-main,
.vivespice-storefront [data-block],
.vivespice-storefront .ct-container,
.vivespice-storefront .ct-container-full,
.vivespice-storefront .woocommerce {
  --theme-border-radius: 8px;
}

.vivespice-storefront .site-main {
  background:
    linear-gradient(180deg, #fffdf8 0, #f8f1e7 360px),
    var(--vs-panel);
}

.vivespice-storefront .entry-header,
.vivespice-storefront .woocommerce-products-header {
  max-width: 1180px;
  margin-inline: auto;
  padding-block: clamp(28px, 5vw, 64px) clamp(18px, 3vw, 34px);
}

.vivespice-storefront .page-title,
.vivespice-storefront .woocommerce-products-header__title,
.vivespice-storefront h1.product_title {
  max-width: 760px;
  color: var(--vs-ink);
  line-height: 1.02;
  letter-spacing: 0;
}

.vivespice-storefront .woocommerce-products-header::after {
  content: "Small-batch spices, pantry blends, and everyday flavor essentials arranged for quick scanning.";
  display: block;
  max-width: 680px;
  margin-top: 12px;
  color: var(--vs-muted);
  font-size: 16px;
  line-height: 1.65;
}

.vivespice-storefront .woocommerce-notices-wrapper,
.vivespice-storefront .woocommerce-result-count,
.vivespice-storefront .woocommerce-ordering {
  margin-bottom: 20px;
}

.vivespice-storefront .woocommerce-result-count {
  color: var(--vs-muted);
  font-size: 14px;
}

.vivespice-storefront .woocommerce-ordering select,
.vivespice-storefront .woocommerce .quantity input.qty,
.vivespice-storefront .woocommerce input.input-text,
.vivespice-storefront .woocommerce textarea {
  min-height: 44px;
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  background: var(--vs-surface);
  color: var(--vs-ink);
  box-shadow: none;
}

/* ── Product grid ─────────────────────────────────────────────────────────── */

.vivespice-storefront .woocommerce ul.products,
.vivespice-storefront .wc-block-grid__products,
.vivespice-storefront .wc-block-product-template__responsive {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
  margin-top: 12px;
}

.vivespice-storefront .woocommerce ul.products::before,
.vivespice-storefront .woocommerce ul.products::after {
  display: none;
}

.vivespice-storefront .woocommerce ul.products li.product,
.vivespice-storefront .wc-block-grid__product,
.vivespice-storefront .wc-block-product {
  display: flex;
  flex-direction: column;
  width: auto !important;
  min-width: 0;
  min-height: 100%;
  margin: 0 !important;
  padding: 12px 12px 14px;
  overflow: hidden;
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(55, 31, 20, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.vivespice-storefront .woocommerce ul.products li.product figure {
  order: 1;
  position: relative;
  width: 100%;
  margin: 0 0 12px;
}

.vivespice-storefront .woocommerce ul.products li.product:hover,
.vivespice-storefront .wc-block-grid__product:hover,
.vivespice-storefront .wc-block-product:hover {
  transform: translateY(-3px);
  border-color: rgba(164, 66, 24, 0.32);
  box-shadow: var(--vs-shadow);
}

.vivespice-storefront .woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.vivespice-storefront .wc-block-grid__product-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.vivespice-storefront .woocommerce ul.products li.product img,
.vivespice-storefront .wc-block-grid__product-image img,
.vivespice-storefront .wc-block-components-product-image img {
  display: block;
  width: 100%;
  height: 100% !important;
  max-height: 100%;
  margin: 0;
  object-fit: contain !important;
  object-position: center;
  border: 0;
  border-radius: 0;
}

.vivespice-storefront .woocommerce ul.products li.product .ct-media-container,
.vivespice-storefront .woocommerce ul.products li.product .ct-image-container,
.vivespice-storefront .wp-block-woocommerce-product-image,
.vivespice-storefront .wc-block-components-product-image {
  order: 1;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 0;
  padding: 12px;
  background: #f3e7d7;
  border: 1px solid rgba(228, 214, 196, 0.75);
  border-radius: 6px;
}

.vivespice-storefront .woocommerce span.onsale,
.vivespice-storefront .wc-block-grid__product-onsale {
  inset: 20px auto auto 20px;
  min-width: 0;
  min-height: 0;
  padding: 6px 9px;
  color: #fffdf8;
  background: var(--vs-chile);
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.vivespice-storefront .woocommerce ul.products li.product .entry-meta,
.vivespice-storefront .vs-product-category {
  order: 2;
  margin: 0 0 6px;
  padding: 0;
  color: var(--vs-leaf);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.vivespice-storefront .woocommerce ul.products li.product .entry-meta li {
  margin: 0;
}

.vivespice-storefront .woocommerce ul.products li.product .entry-meta a {
  color: inherit;
}

.vivespice-storefront .vs-product-category a {
  color: inherit;
}

.vivespice-storefront .woocommerce-loop-product__title,
.vivespice-storefront .wc-block-grid__product-title,
.vivespice-storefront .wc-block-product .wp-block-post-title {
  order: 3;
  min-height: 44px;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--vs-ink);
  font-size: 16px !important;
  font-weight: 800;
  line-height: 1.32;
  text-align: left !important;
  text-transform: none !important;
}

.vivespice-storefront .woocommerce-loop-product__title a,
.vivespice-storefront .wc-block-product .wp-block-post-title a {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vivespice-storefront .vs-product-summary {
  order: 4;
  min-height: 42px;
  margin: 0 0 12px;
  color: var(--vs-muted);
  font-size: 13px;
  line-height: 1.55;
}

.vivespice-storefront .woocommerce ul.products li.product .star-rating {
  order: 5;
  margin: 0 0 9px;
  color: var(--vs-gold);
}

.vivespice-storefront .woocommerce ul.products li.product .price,
.vivespice-storefront .wc-block-grid__product-price,
.vivespice-storefront .wp-block-woocommerce-product-price {
  order: 6;
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: auto 0 12px;
  color: var(--vs-chile);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  text-align: left !important;
}

.vivespice-storefront .woocommerce ul.products li.product .price del {
  color: #8a7a70;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
}

.vivespice-storefront .woocommerce ul.products li.product .button,
.vivespice-storefront .wc-block-grid__product-add-to-cart .wp-block-button__link,
.vivespice-storefront .wp-block-woocommerce-product-button .wp-block-button__link,
.vivespice-storefront .woocommerce div.product form.cart .button,
.vivespice-storefront .woocommerce .button,
.vivespice-storefront .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 11px 16px;
  color: #fffdf8;
  background: var(--vs-chile);
  border: 1px solid var(--vs-chile);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.vivespice-storefront .woocommerce ul.products li.product .button {
  margin-top: auto;
}

.vivespice-storefront .woocommerce ul.products li.product .button:hover,
.vivespice-storefront .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.vivespice-storefront .wp-block-woocommerce-product-button .wp-block-button__link:hover,
.vivespice-storefront .woocommerce div.product form.cart .button:hover,
.vivespice-storefront .woocommerce .button:hover,
.vivespice-storefront .wp-block-button__link:hover {
  color: #fffdf8;
  background: #7f3215;
  border-color: #7f3215;
  transform: translateY(-1px);
}

/* ── Pagination ────────────────────────────────────────────────────────────── */

.vivespice-storefront .woocommerce-pagination {
  margin-top: 32px;
}

.vivespice-storefront .woocommerce nav.woocommerce-pagination ul {
  border: 0;
}

.vivespice-storefront .woocommerce nav.woocommerce-pagination ul li {
  margin: 0 4px;
  border: 0;
}

.vivespice-storefront .woocommerce nav.woocommerce-pagination ul li a,
.vivespice-storefront .woocommerce nav.woocommerce-pagination ul li span {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  background: var(--vs-surface);
  color: var(--vs-ink);
  font-weight: 800;
}

.vivespice-storefront .woocommerce nav.woocommerce-pagination ul li span.current {
  color: #fffdf8;
  background: var(--vs-leaf);
  border-color: var(--vs-leaf);
}

/* ── Single product ─────────────────────────────────────────────────────────── */

.vivespice-storefront .woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}

.vivespice-storefront .woocommerce div.product div.images,
.vivespice-storefront .woocommerce div.product div.summary {
  width: auto;
  float: none;
}

.vivespice-storefront .woocommerce div.product div.images img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #f3e7d7;
  border: 1px solid var(--vs-line);
  border-radius: 8px;
}

.vivespice-storefront .woocommerce div.product div.summary {
  padding: clamp(18px, 3vw, 30px);
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  box-shadow: var(--vs-shadow);
}

.vivespice-storefront .woocommerce div.product p.price,
.vivespice-storefront .woocommerce div.product span.price {
  color: var(--vs-chile);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
}

.vivespice-storefront .woocommerce-product-details__short-description {
  color: var(--vs-muted);
  font-size: 16px;
  line-height: 1.75;
}

.vivespice-storefront .woocommerce div.product form.cart {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 22px;
}

.vivespice-storefront .woocommerce div.product form.cart .quantity {
  flex: 0 0 92px;
}

.vivespice-storefront .woocommerce div.product form.cart .button {
  flex: 1 1 auto;
  width: auto;
}

.vivespice-storefront .woocommerce-tabs {
  max-width: 1180px;
  margin: 44px auto 0;
  padding: clamp(18px, 3vw, 28px);
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: 8px;
}

.vivespice-storefront .woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 18px;
}

.vivespice-storefront .woocommerce div.product .woocommerce-tabs ul.tabs::before,
.vivespice-storefront .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.vivespice-storefront .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.vivespice-storefront .woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.vivespice-storefront .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  padding: 10px 14px;
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  color: var(--vs-muted);
  font-weight: 800;
}

.vivespice-storefront .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #fffdf8;
  background: var(--vs-leaf);
  border-color: var(--vs-leaf);
}

.vivespice-storefront .related.products,
.vivespice-storefront .upsells.products {
  max-width: 1180px;
  margin: 48px auto 0;
}

/* ── Responsive — 3 columns ─────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .vivespice-storefront .woocommerce ul.products,
  .vivespice-storefront .wc-block-grid__products,
  .vivespice-storefront .wc-block-product-template__responsive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Responsive — 2 columns / tablet ────────────────────────────────────────── */

@media (max-width: 820px) {
  .vivespice-storefront .woocommerce ul.products,
  .vivespice-storefront .wc-block-grid__products,
  .vivespice-storefront .wc-block-product-template__responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .vivespice-storefront .woocommerce div.product {
    display: block;
  }

  .vivespice-storefront .woocommerce div.product div.summary {
    margin-top: 18px;
  }

  body.vivespice-storefront.vs-page-about .entry-content > .wp-block-group,
  body.vivespice-storefront.vs-page-account #customer_login {
    grid-template-columns: 1fr;
  }

  /* ── Hide Blocksy's native hamburger — we use vs-mobile-menu-toggle ─────── */
  body.vivespice-storefront .ct-toggle-dropdown-mobile,
  body.vivespice-storefront [data-id="mobile-menu"],
  body.vivespice-storefront [data-id="trigger"] {
    display: none !important;
  }

  /* ── Mobile menu toggle — fixed, JS sets exact top after load ──────────── */
  /* Default top: 36px promo + (70px header / 2) - (44px button / 2) = 49px */
  .vs-mobile-menu-toggle {
    position: fixed;
    top: 49px;
    right: 16px;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--vs-ink);
    background: var(--vs-surface);
    border: 1px solid var(--vs-line);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(55, 31, 20, 0.08);
    cursor: pointer;
  }

  .vs-mobile-menu-lines,
  .vs-mobile-menu-lines::before,
  .vs-mobile-menu-lines::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transition: transform 160ms ease, opacity 160ms ease;
  }

  .vs-mobile-menu-lines {
    position: relative;
  }

  .vs-mobile-menu-lines::before,
  .vs-mobile-menu-lines::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .vs-mobile-menu-lines::before {
    top: -7px;
  }

  .vs-mobile-menu-lines::after {
    top: 7px;
  }

  .vs-mobile-menu-toggle[aria-expanded="true"] .vs-mobile-menu-lines {
    background: transparent;
  }

  .vs-mobile-menu-toggle[aria-expanded="true"] .vs-mobile-menu-lines::before {
    transform: translateY(7px) rotate(45deg);
  }

  .vs-mobile-menu-toggle[aria-expanded="true"] .vs-mobile-menu-lines::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Mobile menu panel — top/right set by JS at open time ──────────────── */
  .vs-mobile-menu {
    position: fixed;
    top: 120px; /* safe initial fallback; JS overwrites this on open */
    right: 12px;
    left: auto;
    z-index: 10000;
    width: min(280px, calc(100vw - 32px));
    padding: 8px;
    background: var(--vs-surface);
    border: 1px solid var(--vs-line);
    border-radius: 8px;
    box-shadow: 0 22px 48px rgba(32, 24, 20, 0.2);
  }

  .vs-mobile-menu:not([hidden]) {
    display: grid;
    gap: 4px;
  }

  .vs-mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--vs-ink);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
  }

  .vs-mobile-menu a:hover,
  .vs-mobile-menu a:focus-visible {
    color: #fffdf8;
    background: var(--vs-leaf);
  }

  body.vs-mobile-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(32, 24, 20, 0.18);
  }
}

/* ── Responsive — single column / mobile ────────────────────────────────────── */

@media (max-width: 520px) {
  body.vivespice-storefront.home #header [data-row="middle"],
  body.vivespice-storefront.home #header [data-row="middle"] .ct-container,
  body.vivespice-storefront.home #header [data-row="middle"] .ct-container-fluid,
  body.vivespice-storefront.woocommerce-shop #header [data-row="middle"],
  body.vivespice-storefront.woocommerce-shop #header [data-row="middle"] .ct-container,
  body.vivespice-storefront.woocommerce-shop #header [data-row="middle"] .ct-container-fluid,
  body.vivespice-storefront.vs-page-about #header [data-row="middle"],
  body.vivespice-storefront.vs-page-about #header [data-row="middle"] .ct-container,
  body.vivespice-storefront.vs-page-about #header [data-row="middle"] .ct-container-fluid,
  body.vivespice-storefront.vs-page-contact #header [data-row="middle"],
  body.vivespice-storefront.vs-page-contact #header [data-row="middle"] .ct-container,
  body.vivespice-storefront.vs-page-contact #header [data-row="middle"] .ct-container-fluid,
  body.vivespice-storefront.vs-page-account #header [data-row="middle"],
  body.vivespice-storefront.vs-page-account #header [data-row="middle"] .ct-container,
  body.vivespice-storefront.vs-page-account #header [data-row="middle"] .ct-container-fluid {
    min-height: 70px;
  }

  body.vivespice-storefront.home .site-logo-container img,
  body.vivespice-storefront.home #header .default-logo,
  body.vivespice-storefront.woocommerce-shop .site-logo-container img,
  body.vivespice-storefront.woocommerce-shop #header .default-logo,
  body.vivespice-storefront.vs-page-about .site-logo-container img,
  body.vivespice-storefront.vs-page-about #header .default-logo,
  body.vivespice-storefront.vs-page-contact .site-logo-container img,
  body.vivespice-storefront.vs-page-contact #header .default-logo,
  body.vivespice-storefront.vs-page-account .site-logo-container img,
  body.vivespice-storefront.vs-page-account #header .default-logo {
    max-width: 86px;
    max-height: 60px;
  }

  body.vivespice-storefront #header .site-title-container {
    min-width: 0;
  }

  body.vivespice-storefront #header .site-title,
  body.vivespice-storefront #header .site-title a {
    display: inline-block;
    max-width: calc(100vw - 174px);
    overflow: hidden;
    color: var(--vs-ink);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.vivespice-storefront.home .entry-content > .wp-block-cover:first-child {
    min-height: 360px;
  }

  .vivespice-storefront .entry-header,
  .vivespice-storefront .woocommerce-products-header {
    padding-block: 0 14px;
  }

  body.vivespice-storefront.woocommerce-shop .ct-container > section {
    padding-top: 16px;
  }

  .vivespice-storefront .woocommerce ul.products,
  .vivespice-storefront .wc-block-grid__products,
  .vivespice-storefront .wc-block-product-template__responsive {
    grid-template-columns: 1fr;
  }

  .vivespice-storefront .woocommerce ul.products li.product,
  .vivespice-storefront .wc-block-grid__product,
  .vivespice-storefront .wc-block-product {
    padding: 10px;
  }

  .vivespice-storefront .woocommerce-loop-product__title,
  .vivespice-storefront .wc-block-grid__product-title,
  .vivespice-storefront .vs-product-summary {
    min-height: 0;
  }

  .vivespice-storefront .woocommerce div.product form.cart {
    flex-direction: column;
  }

  .vivespice-storefront .woocommerce div.product form.cart .quantity,
  .vivespice-storefront .woocommerce div.product form.cart .button {
    width: 100%;
    flex-basis: auto;
  }
}