/* ============================================================
   VS Print Studio — Enhancements
   Conversion, trust, FAQ, a11y, motion, and the inline SVG icon
   system. Built on the existing dark-glass brand tokens.
   ============================================================ */

/* ---------- INLINE SVG ICON SYSTEM (replaces Font Awesome) ---------- */
.vsi {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.vsi--solid {
  fill: currentColor;
  stroke: none;
}

/* Icon sizing inside existing chrome */
.vs21-search-button .vsi { width: 16px; height: 16px; }
.vs21-icon-link .vsi { width: 19px; height: 19px; }
.vs21-footer-nav .icon .vsi { width: 22px; height: 22px; }
.vs21-footer-nav .nav-item:nth-child(3) .icon .vsi { width: 19px; height: 19px; color: #fff; }
.vs21-modal-links a .vsi,
.vs21-modal-body .vsi { width: 18px; height: 18px; }
.vs21-close-button .vsi { width: 18px; height: 18px; }
.vs21-social-icons a .vsi { width: 20px; height: 20px; }
.vs21-logout-button .vsi { width: 16px; height: 16px; }

/* ---------- ACCESSIBILITY ---------- */
.vsps-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 10px 16px;
  background: var(--vs-primary, #137fec);
  color: #fff;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}
.vsps-skip-link:focus {
  left: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
.vsps-faq__q:focus-visible {
  outline: 2px solid var(--vs-primary-soft, #46c2ff);
  outline-offset: 2px;
  border-radius: 6px;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- WOOCOMMERCE TRUST STRIP ---------- */
.vsps-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  /* Inherit the (full-width) WooCommerce container instead of imposing our
     own max-width, so the strip aligns with the product grid edges. */
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md, 16px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.vsps-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--vs-text-soft, #c6d4e3);
}
.vsps-trust-strip__item .vsi {
  width: 18px; height: 18px;
  color: var(--vs-primary-soft, #46c2ff);
}

/* ---------- PRODUCT REASSURANCE ---------- */
.vsps-reassure {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 12px;
}
.vsps-reassure__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm, 12px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.vsps-reassure__icon .vsi {
  width: 22px; height: 22px;
  color: var(--vs-primary-soft, #46c2ff);
}
.vsps-reassure__copy { display: flex; flex-direction: column; line-height: 1.3; }
.vsps-reassure__copy strong { font-size: 0.86rem; color: var(--vs-text, #fff); }
.vsps-reassure__copy span { font-size: 0.76rem; color: var(--vs-text-muted, #94a9bf); }
.vsps-quote-nudge {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--vs-text-soft, #c6d4e3);
}
.vsps-quote-nudge a {
  color: var(--vs-primary-soft, #46c2ff);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 480px) {
  .vsps-reassure { grid-template-columns: 1fr; }
}

/* ---------- FAQ ACCORDION ---------- */
.vsps-faq {
  max-width: 920px;
  margin: 32px auto;
  padding: 0 4px;
}
.vsps-faq__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  color: var(--vs-text, #fff);
  text-align: center;
}
.vsps-faq__item {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm, 12px);
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 10px;
  overflow: hidden;
}
.vsps-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--vs-text, #fff);
  min-height: 56px;
}
.vsps-faq__chevron {
  width: 20px; height: 20px;
  color: var(--vs-primary-soft, #46c2ff);
  transition: transform 0.28s ease;
  flex: none;
}
.vsps-faq__q[aria-expanded="true"] .vsps-faq__chevron { transform: rotate(180deg); }
.vsps-faq__a { padding: 0 18px; }
.vsps-faq__a p {
  margin: 0;
  padding: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--vs-text-soft, #c6d4e3);
}

/* ---------- RECENTLY VIEWED ---------- */
.vsps-recently-viewed {
  margin: 32px 0;
  width: 100%;
}
.vsps-recently-viewed .vsps-section-title,
.vsps-recently-viewed h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--vs-text, #fff);
}

/* ---------- CART / CHECKOUT REASSURANCE ---------- */
.vsps-cart-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 12px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.vsps-cart-reassure__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--vs-text-soft, #c6d4e3);
}
.vsps-cart-reassure__item .vsi {
  width: 18px; height: 18px;
  color: var(--vs-primary-soft, #46c2ff);
}

/* ---------- FREE SHIPPING BAR ---------- */
.vsps-ship-bar {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 12px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(70, 194, 255, 0.22);
}
.vsps-ship-bar p { margin: 0 0 10px; font-size: 0.9rem; color: var(--vs-text-soft, #c6d4e3); }
.vsps-ship-bar p .vsi { width: 16px; height: 16px; color: #29e070; vertical-align: -0.15em; }
.vsps-ship-bar__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.vsps-ship-bar__track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vs-primary, #137fec), var(--vs-primary-soft, #46c2ff));
  transition: width 0.4s ease;
}

/* ---------- CATEGORY ARCHIVE HEADER + DESCRIPTION ---------- */
/* Astra is set to full-width-container on shop/archive/product, so these
   blocks stay full width and left-aligned to match the product grid. */
.woocommerce-products-header {
  margin: 6px 0 18px;
  padding: 0;
}
.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--vs-text, #fff);
  margin: 0 0 10px;
  text-wrap: balance;
}
.term-description,
.woocommerce-archive-description {
  margin: 0 0 8px;
  padding: 16px 18px;
  border-radius: var(--radius-md, 16px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.term-description p,
.woocommerce-archive-description p {
  margin: 0 0 10px;
  color: var(--vs-text-soft, #c6d4e3);
  font-size: 0.94rem;
  line-height: 1.7;
}
.term-description p:last-child,
.woocommerce-archive-description p:last-child { margin-bottom: 0; }

/* ---------- WOOCOMMERCE BREADCRUMB STYLING ---------- */
.woocommerce-breadcrumb {
  max-width: 1200px;
  margin: 10px auto 16px;
  font-size: 0.82rem;
  color: var(--vs-text-muted, #94a9bf);
}
.woocommerce-breadcrumb a {
  color: var(--vs-text-soft, #c6d4e3);
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover { color: var(--vs-primary-soft, #46c2ff); }

/* ---------- SCROLL REVEAL ---------- */
.vsps-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.vsps-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- REDUCED MOTION SAFEGUARD ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .vsps-reveal { opacity: 1; transform: none; }
}