/*
Theme Name: WP-Buy
Theme URI: https://www.wp-buy.com/
Author: CODEPRESS IT Solutions LLC
Author URI: https://www.wp-buy.com/
Description: Self-contained WP-Buy / CODEPRESS marketplace theme. Standalone (no parent). Modern SaaS aesthetic built on the WP-Buy Style DNA. See STYLE-DNA.md before editing.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpbuy
Tags: business, portfolio, e-commerce, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   WP-Buy Theme — base + design system
   Design tokens & recipes are documented in STYLE-DNA.md.
   Tailwind (Play CDN in Phase 1) provides utility classes;
   this file defines the named custom utilities + theme chrome.
   ============================================================ */

/* ---------- Base ---------- */
:root {
  --wpb-primary: #6C63FF;
  --wpb-primary-dark: #4F46E5;
  --wpb-secondary: #0F172A;
  --wpb-bg-soft: #F8FAFC;
  --wpb-text-primary: #0B1220;
  --wpb-text-secondary: #6B7280;
  --wpb-border-soft: rgba(0, 0, 0, 0.05);
  --wpb-accent: #22C7E0;
  /* cyan — count badges / small numeric indicators */
  --wpb-topbar-h: 40px;
  --wpb-mainbar-h: 74px;
  --wpb-header-h: 114px;
  /* topbar + main bar — used to offset content */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--wpb-bg-soft);
  color: var(--wpb-text-primary);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Push content below the fixed header on every page EXCEPT the
   front page, whose hero manages its own top spacing. */
body:not(.wpb-front) .site-main {
  padding-top: var(--wpb-header-h);
}

/* Adjust offset when layout parts are hidden (progressive: :has()). */
body:not(.wpb-front):has(.site-header.has-no-topbar) .site-main {
  padding-top: var(--wpb-mainbar-h);
}

body:not(.wpb-front):not(:has(.site-header)) .site-main {
  padding-top: 0;
}

/* Account for the WP admin bar. */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #fff;
  color: var(--wpb-secondary);
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.skip-link:focus {
  left: 0;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/* ============================================================
   SITE HEADER — fixed glass bar with top bar
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--wpb-border-soft);
  transition: box-shadow .3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.07);
}

/* ---- Top bar (phone / hours + socials) ---- */
.site-topbar {
  border-bottom: 1px solid var(--wpb-border-soft);
  overflow: hidden;
  transition: height .3s ease, opacity .3s ease;
  height: var(--wpb-topbar-h);
  opacity: 1;
}

/* Collapse the top bar once the user scrolls, for a compact sticky header. */
.site-header.is-scrolled .site-topbar {
  height: 0;
  opacity: 0;
  border-color: transparent;
}

.site-topbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--wpb-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

.site-topbar__info {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.site-topbar__item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--wpb-text-secondary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-topbar__item svg {
  color: var(--wpb-primary);
  flex-shrink: 0;
}

a.site-topbar__item:hover {
  color: var(--wpb-primary);
}

.site-topbar__item--hours {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .site-topbar__item--hours {
    display: none;
  }
}

.site-topbar__socials {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.site-topbar__socials a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.05);
  color: var(--wpb-text-secondary);
  transition: background .2s, color .2s, transform .2s;
}

.site-topbar__socials a:hover {
  background: var(--wpb-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* ---- Main bar ---- */
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--wpb-mainbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

@media (min-width: 1024px) {
  .site-topbar__inner {
    padding: 0 32px;
  }

  .site-header__inner {
    padding: 0 32px;
  }
}

/* Brand */
.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-brand img {
  display: block;
  height: 42px;
  width: auto;
  border-radius: 12px;
}

.site-brand__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--wpb-secondary);
  line-height: 1.05;
  white-space: nowrap;
}

/* Primary nav */
.site-nav {
  display: none;
  min-width: 0;
}

@media (min-width: 1000px) {
  .site-nav {
    display: block;
  }
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
}

.site-nav li {
  position: relative;
}

.site-nav a {
  display: block;
  padding: 8px 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--wpb-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px;
  transition: color .15s, background .15s;
}

@media (min-width: 1240px) {
  .site-nav a {
    padding: 8px 15px;
    font-size: 15px;
  }
}

.site-nav a:hover,
.site-nav .current-menu-item>a {
  color: var(--wpb-primary);
  background: rgba(108, 99, 255, 0.06);
}

/* Sub-menus */
.site-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .2s;
}

.site-nav li:hover>ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Header actions (cart + search + mobile toggle) */
.site-header__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Cart summary: icon + running total + count badge */
.site-header__cart-wrap {
  display: flex;
  align-items: center;
}

.site-header__cart {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--wpb-secondary);
  text-decoration: none;
  line-height: 1;
  transition: color .15s, background .15s;
}

.site-header__cart:hover {
  color: var(--wpb-primary);
  background: rgba(108, 99, 255, 0.06);
}

.site-header__cart-icon {
  flex-shrink: 0;
}

.site-header__cart-total {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.site-header__cart-total .woocommerce-Price-amount {
  color: inherit;
}

.site-header__cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--wpb-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* Hide the money on very narrow screens; the badge still carries the state. */
@media (max-width: 400px) {
  .site-header__cart-total {
    display: none;
  }
}

/* Search toggle + dropdown */
.site-header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--wpb-secondary);
  cursor: pointer;
  transition: color .15s, background .15s;
}

.site-header__search-toggle:hover,
.site-header__search-toggle[aria-expanded="true"] {
  color: var(--wpb-primary);
  background: rgba(108, 99, 255, 0.06);
}

.site-header__search {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 60;
  width: min(340px, calc(100vw - 32px));
  padding: 12px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  animation: wpb-header-search-in .18s ease-out;
}

.site-header__search[hidden] {
  display: none;
}

@keyframes wpb-header-search-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header__search-form {
  position: relative;
  display: flex;
  align-items: center;
}

.site-header__search-field {
  width: 100%;
  padding: 12px 44px 12px 16px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  background: var(--wpb-bg-soft);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--wpb-text-primary);
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}

.site-header__search-field::placeholder {
  color: var(--wpb-text-secondary);
}

.site-header__search-field:focus {
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}

.site-header__search-submit {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wpb-text-secondary);
  cursor: pointer;
  transition: color .15s, background .15s;
}

.site-header__search-submit:hover {
  color: var(--wpb-primary);
  background: rgba(108, 99, 255, 0.08);
}

/* Mobile toggle */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--wpb-border-soft);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  color: var(--wpb-secondary);
  cursor: pointer;
}

@media (min-width: 1000px) {
  .menu-toggle {
    display: none;
  }
}

/* Mobile panel */
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--wpb-header-h) 0 0 0;
  z-index: 49;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 24px;
  overflow-y: auto;
}

.admin-bar .mobile-nav {
  top: calc(var(--wpb-header-h) + 32px);
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav a {
  display: block;
  padding: 14px 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--wpb-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--wpb-border-soft);
}

.mobile-nav a:hover {
  color: var(--wpb-primary);
}

/* ============================================================
   Inner content layout (page / single / archive)
   ============================================================ */
.wpb-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.wpb-prose {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.wpb-prose h1,
.entry-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wpb-secondary);
  line-height: 1.1;
}

.wpb-prose h2 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--wpb-secondary);
  margin-top: 2em;
}

.wpb-prose h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  margin-top: 1.6em;
}

.wpb-prose p,
.wpb-prose li {
  color: #334155;
  line-height: 1.8;
  font-size: 1.05rem;
}

.wpb-prose a {
  color: var(--wpb-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wpb-prose a:hover {
  color: var(--wpb-primary-dark);
}

.wpb-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

.wpb-prose blockquote {
  border-left: 4px solid var(--wpb-primary);
  background: #fff;
  padding: 16px 24px;
  border-radius: 0 12px 12px 0;
  margin: 1.5em 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.wpb-prose pre {
  background: var(--wpb-secondary);
  color: #e2e8f0;
  padding: 20px;
  border-radius: 12px;
  overflow-x: auto;
}

.wpb-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Simple card used by archive/search loops */
.wpb-post-card {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform .3s, box-shadow .3s;
  display: flex;
  flex-direction: column;
}

.wpb-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.wpb-post-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wpb-bg-soft);
}

.wpb-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpb-post-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.wpb-post-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  line-height: 1.3;
}

.wpb-post-card__title a {
  color: inherit;
  text-decoration: none;
}

.wpb-post-card__title a:hover {
  color: var(--wpb-primary);
}

.wpb-post-card__meta {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wpb-text-secondary);
}

.wpb-post-card__excerpt {
  color: var(--wpb-text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
}

.wpb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 20px 40px -10px rgba(108, 99, 255, 0.4);
  transition: transform .3s, box-shadow .3s;
}

.wpb-btn:hover {
  transform: translateY(-2px);
}

/* Pagination */
.wpb-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
}

.wpb-pagination .page-numbers {
  display: inline-flex;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--wpb-border-soft);
  background: #fff;
  color: var(--wpb-secondary);
  font-weight: 700;
  text-decoration: none;
}

.wpb-pagination .page-numbers.current,
.wpb-pagination .page-numbers:hover {
  background: var(--wpb-primary);
  color: #fff;
  border-color: var(--wpb-primary);
}

/* ============================================================
   NAMED CUSTOM UTILITIES  (from Style DNA §4)
   ============================================================ */
.gradient-text {
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-bg {
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.bg-blob {
  position: absolute;
  filter: blur(100px);
  z-index: -1;
  opacity: 0.15;
  border-radius: 50%;
}

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
}

.animate-on-scroll:not(.zoom-in):not(.flip-up):not(.fade-in):not(.flip-down) {
  transform: translateY(40px);
}

.animate-on-scroll.is-visible:not(.zoom-in):not(.flip-up):not(.fade-in):not(.flip-down) {
  transform: translateY(0);
}

.animate-on-scroll.zoom-in {
  transform: scale(0.9);
}

.animate-on-scroll.zoom-in.is-visible {
  transform: scale(1);
}

.animate-on-scroll.flip-up {
  transform: perspective(1000px) rotateX(-90deg);
  transform-origin: bottom;
}

.animate-on-scroll.flip-up.is-visible {
  transform: perspective(1000px) rotateX(0deg);
}

.animate-on-scroll.flip-down {
  transform: perspective(1000px) rotateX(90deg);
  transform-origin: top;
}

.animate-on-scroll.flip-down.is-visible {
  transform: perspective(1000px) rotateX(0deg);
}

.animate-on-scroll.fade-in {
  transform: translateY(0);
}

.animate-on-scroll.fade-in.is-visible {
  transform: translateY(0);
}

.animate-on-scroll-child {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.is-visible .animate-on-scroll-child {
  opacity: 1;
  transform: translateY(0);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F8FAFC;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.shine {
  position: relative;
}

.shine-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 20;
}

.shine-layer::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  transform: skewX(-25deg);
}

.shine:hover .shine-layer::before {
  animation: shine .75s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

.marquee-container {
  overflow: hidden;
  display: flex;
  padding: 1rem 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  gap: 2rem;
  animation: marquee 40s linear infinite;
  width: max-content;
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-card {
  width: 380px;
  flex-shrink: 0;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 1rem));
  }
}

@media (prefers-reduced-motion: reduce) {

  .animate-on-scroll,
  .animate-on-scroll-child {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee-track {
    animation: none;
  }
}

/* ============================================================
   WOOCOMMERCE  (DNA-aligned; layered over Woo core styles)
   `!important` here overrides WooCommerce's rigid float grid only.
   ============================================================ */
.wpb-woo {
  padding-top: 40px;
  padding-bottom: 88px;
}

.woocommerce .wpb-woo,
.wpb-woo .woocommerce {
  max-width: 100%;
}

/* Store headings */
.woocommerce-products-header__title,
.wpb-woo .entry-title,
.woocommerce-products-header {
  color: var(--wpb-secondary);
}

.woocommerce-products-header__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.woocommerce .woocommerce-result-count {
  color: var(--wpb-text-secondary);
  font-size: .9rem;
}

.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--wpb-border-soft);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
}

/* ---- Product grid ---- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  margin: 0 0 48px !important;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 24px;
  padding: 20px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .3s, box-shadow .3s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

.woocommerce ul.products li.product a img {
  border-radius: 16px;
  margin-bottom: 16px;
  background: var(--wpb-bg-soft);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--wpb-secondary);
  padding: 0 0 8px !important;
  line-height: 1.35;
}

.woocommerce ul.products li.product .price {
  color: var(--wpb-secondary) !important;
  font-weight: 800;
  font-size: 1.15rem;
  margin-top: auto;
}

.woocommerce ul.products li.product .price del {
  color: var(--wpb-text-secondary);
  font-weight: 500;
  opacity: .7;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
  color: #facc15;
}

/* Sale badge → brand pill */
.woocommerce span.onsale {
  background: linear-gradient(135deg, #6C63FF, #4F46E5) !important;
  color: #fff !important;
  border-radius: 999px;
  min-height: auto;
  min-width: auto;
  padding: 5px 14px;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  top: 14px;
  left: 14px;
  margin: 0;
  line-height: 1.4;
}

/* ---- Buttons ---- */
.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 {
  background: linear-gradient(135deg, #6C63FF, #4F46E5) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 11px 22px !important;
  font-weight: 700 !important;
  font-size: .92rem !important;
  box-shadow: 0 14px 30px -12px rgba(108, 99, 255, .5);
  transition: transform .25s, box-shadow .25s, filter .25s;
  text-shadow: none;
  display: grid;
  grid-template-columns: max-content max-content;
}

.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 {
  transform: translateY(-2px);
  filter: brightness(1.03);
  color: #fff !important;
}

/* Secondary/ghost buttons (e.g. "View cart", disabled) */
.woocommerce a.button.wc-forward.added_to_cart,
.woocommerce .button.disabled,
.woocommerce a.added_to_cart {
  background: #fff !important;
  color: var(--wpb-secondary) !important;
  border: 1px solid var(--wpb-border-soft) !important;
  box-shadow: none;
}

/* ---- Notices & Notifications (Style DNA Unified Contract) ---- */
.woocommerce-notices-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-bottom: 28px !important;
  width: 100% !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.woocommerce-noreviews,
.wp-block-notice,
.wc-block-components-notice-banner {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0px 20px !important;
  width: fit-content !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto 20px !important;
  padding: 14px 22px 14px 50px !important;
  border-radius: 16px !important;
  border: 1px solid var(--wpb-border-soft) !important;
  background: #ffffff !important;
  color: var(--wpb-secondary) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  list-style: none !important;
  outline: none !important;
}

.woocommerce-message p,
.woocommerce-info p,
.woocommerce-error p,
.woocommerce-notice p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* The error notice is a <ul>; keep the shared pill padding (icon gutter)
   and only strip the browser list styling. */
ul.woocommerce-error {
  padding-left: 50px !important;
  list-style: none !important;
}

.woocommerce-error ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.woocommerce-error li,
.woocommerce-error li {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 18px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.woocommerce-error li+li {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(153, 27, 27, 0.12) !important;
}

/* Action buttons inside notices ("Continue shopping", "View cart", etc.) */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-notice .button,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-notice a.button,
.woocommerce-message .wc-forward,
.woocommerce-info .wc-forward {
  margin-left: auto !important;
  order: 2 !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #6C63FF, #4F46E5) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 8px 18px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px -8px rgba(108, 99, 255, 0.5) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.woocommerce-notice .button:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-notice a.button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px -6px rgba(108, 99, 255, 0.6) !important;
  color: #ffffff !important;
  filter: brightness(1.04) !important;
}

/* Pseudo-element Icon Reset */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before,
.woocommerce-noreviews::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  margin: 0 !important;
  display: block !important;
  font-family: inherit !important;
}

/* 1. SUCCESS NOTICES */
.woocommerce-message,
.woocommerce-notice--success,
.wc-block-components-notice-banner.is-success,
.notice-success {
  background: #F0FDF4 !important;
  border-color: #BBF7D0 !important;
  color: #14532D !important;
}

.woocommerce-message::before,
.woocommerce-notice--success::before,
.notice-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* 2. ERROR NOTICES */
.woocommerce-error,
.woocommerce-notice--error,
.wc-block-components-notice-banner.is-error,
.notice-error {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #991B1B !important;
}

.woocommerce-error::before,
.woocommerce-notice--error::before,
.notice-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* 3. INFO / NEUTRAL NOTICES */
.woocommerce-info,
.woocommerce-notice--info,
.wc-block-components-notice-banner.is-info,
.notice-info {
  background: #F4F4FF !important;
  border-color: rgba(108, 99, 255, 0.25) !important;
  color: var(--wpb-secondary) !important;
}

.woocommerce-info::before,
.woocommerce-notice--info::before,
.notice-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* 4. WARNING NOTICES */
.woocommerce-warning,
.wc-block-components-notice-banner.is-warning,
.notice-warning {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #92400E !important;
}

.woocommerce-warning::before,
.notice-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* 5. NOTICE GROUPS + PANEL PAGES
   WooCommerce's checkout JS prepends AJAX validation errors (e.g. the
   "accept the terms and conditions" error) into `form.checkout` wrapped in
   .woocommerce-NoticeGroup. On the branded panel pages the notice belongs to
   the card below it, so it stretches to the container width and aligns left
   instead of shrinking to a centred pill. */
.woocommerce-NoticeGroup {
  display: block !important;
  width: 100% !important;
  margin: 0 0 24px !important;
}

.woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-message,
.woocommerce-NoticeGroup .woocommerce-info,
.wpb-checkout .woocommerce-error,
.wpb-checkout .woocommerce-message,
.wpb-checkout .woocommerce-info,
.wpb-cart .woocommerce-error,
.wpb-cart .woocommerce-message,
.wpb-cart .woocommerce-info,
.wpb-account .woocommerce-error,
.wpb-account .woocommerce-message,
.wpb-account .woocommerce-info {
  display: flex !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
}

/* The group is already spaced; drop the notice's own trailing margin. */
.woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-message,
.woocommerce-NoticeGroup .woocommerce-info {
  margin-bottom: 0 !important;
}

.woocommerce-NoticeGroup .woocommerce-error+.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-error+.woocommerce-message,
.woocommerce-NoticeGroup .woocommerce-message+.woocommerce-error {
  margin-top: 12px !important;
}

/* Buttons keep their right-hand slot now that the notice is full width. */
.woocommerce-NoticeGroup .woocommerce-error li,
.wpb-checkout .woocommerce-error li,
.wpb-cart .woocommerce-error li,
.wpb-account .woocommerce-error li {
  justify-content: flex-start !important;
}

/* 6. NOTICES ON SMALL SCREENS */
@media (max-width: 600px) {

  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error,
  .woocommerce-notice,
  .woocommerce-noreviews {
    width: 100% !important;
    align-items: flex-start !important;
    padding: 14px 18px 16px 46px !important;
    text-align: left !important;
  }

  ul.woocommerce-error {
    padding-left: 46px !important;
  }

  .woocommerce-message::before,
  .woocommerce-info::before,
  .woocommerce-error::before,
  .woocommerce-notice::before,
  .woocommerce-noreviews::before {
    top: 17px !important;
    left: 15px !important;
    transform: none !important;
    width: 20px !important;
    height: 20px !important;
  }

  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button,
  .woocommerce-notice .button,
  .woocommerce-message a.button,
  .woocommerce-info a.button,
  .woocommerce-error a.button,
  .woocommerce-notice a.button,
  .woocommerce-message .wc-forward,
  .woocommerce-info .wc-forward {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ---- Single product ---- */
.single-product div.product .product_title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--wpb-secondary);
  letter-spacing: -0.02em;
}

.single-product div.product p.price,
.single-product div.product span.price {
  color: var(--wpb-secondary);
  font-weight: 800;
  font-size: 1.6rem;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
  border-radius: 10px 10px 0 0;
}

.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid var(--wpb-border-soft);
  border-radius: 10px;
  padding: 10px;
}

/* ---- Forms (cart / checkout / account) ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce table.cart td.actions .coupon .input-text {
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}

.woocommerce-checkout #payment,
.woocommerce table.shop_table {
  border-radius: 16px;
  border: 1px solid var(--wpb-border-soft);
  background: #fff;
}

.woocommerce-checkout #payment {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

/* ---- Cart/checkout links reuse pagination look ---- */
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 12px;
  border: 1px solid var(--wpb-border-soft);
  background: #fff;
  color: var(--wpb-secondary);
  font-weight: 700;
  min-width: 42px;
  padding: 10px 0;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--wpb-primary);
  color: #fff;
  border-color: var(--wpb-primary);
}

/* ============================================================
   WOOCOMMERCE SHOP — custom branded layout (.wpb-shop)
   ============================================================ */
.wpb-shop {
  padding-top: 44px;
  padding-bottom: 96px;
  position: relative;
}

.wpb-shop .wpb-container {
  max-width: 1360px;
}

/* ---- Head ---- */
.wpb-shop__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Eyebrow above the shop heading — set on tag / brand / category / search
   archives by wpbuy_shop_archive_context(). Same recipe as .wpb-archive__eyebrow. */
.wpb-shop__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #F4F4FF;
  color: var(--wpb-primary);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.wpb-shop__title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wpb-secondary);
  line-height: 1.1;
  margin: 0 0 10px;
}

.wpb-shop__subtitle {
  color: var(--wpb-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}

.wpb-shop__badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.wpb-shop-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  color: var(--wpb-secondary);
  font-weight: 700;
  font-size: .82rem;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-shop-badge svg {
  color: var(--wpb-primary);
  flex-shrink: 0;
}

/* ---- Category pills ---- */
.wpb-shop__pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.wpb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  color: var(--wpb-secondary);
  text-decoration: none;
  transition: all .2s;
}

.wpb-pill__i {
  width: 15px;
  height: 15px;
}

.wpb-pill:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
}

.wpb-pill.is-active {
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 30px -12px rgba(108, 99, 255, .5);
}

.wpb-pill.is-active svg {
  color: #fff;
}

/* ---- Toolbar ---- */
.wpb-shop__toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.wpb-shop__toolbar .woocommerce-product-search {
  flex: 1;
  min-width: 240px;
  display: flex;
  gap: 12px;
}

.wpb-shop__toolbar .woocommerce-product-search input.search-field {
  flex: 1;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 14px;
  padding: 15px 20px;
  background: #fff;
  font-size: .95rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-shop__toolbar .woocommerce-product-search input.search-field:focus {
  outline: 0;
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 4px rgba(108, 99, 255, .12);
}

.wpb-shop__toolbar .woocommerce-product-search button {
  border: 0;
  border-radius: 14px;
  padding: 0 34px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(108, 99, 255, .6);
  transition: transform .2s;
}

.wpb-shop__toolbar .woocommerce-product-search button:hover {
  transform: translateY(-2px);
}

.wpb-shop__sort {
  position: relative;
}

.woocommerce .woocommerce-ordering {
  margin: 0 0 0
}

.wpb-shop__sort select.orderby {
  min-width: 240px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 14px;
  padding: 15px 44px 15px 20px;
  background: #fff;
  font-weight: 600;
  font-size: .92rem;
  color: var(--wpb-secondary);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-shop__sort::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--wpb-text-secondary);
  border-bottom: 2px solid var(--wpb-text-secondary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* ---- Body layout ---- */
.wpb-shop__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .wpb-shop__body {
    grid-template-columns: 1fr;
  }
}

/* ---- Filter sidebar ---- */
.wpb-filter {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  position: sticky;
  top: calc(var(--wpb-header-h) + 12px);
}

@media (max-width: 900px) {
  .wpb-filter {
    position: static;
  }
}

.wpb-filter__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 18px;
}

.wpb-filter__group {
  padding: 16px 0;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-filter__group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.wpb-filter__group h3 {
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wpb-secondary);
  margin: 0 0 12px;
}

.wpb-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wpb-filter__reset {
  font-size: .78rem;
  font-weight: 700;
  color: var(--wpb-primary);
  text-decoration: none;
}

.wpb-filter__reset:hover {
  color: var(--wpb-primary-dark);
  text-decoration: underline;
}

.wpb-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wpb-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--wpb-text-secondary);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}

.wpb-check:hover {
  color: var(--wpb-secondary);
}

.wpb-check__box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
  position: relative;
  transition: all .15s;
}

.wpb-check.is-on .wpb-check__box {
  background: var(--wpb-primary);
  border-color: var(--wpb-primary);
}

.wpb-check.is-on .wpb-check__box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wpb-check.is-on {
  color: var(--wpb-secondary);
}

/* Single-choice rows (categories, ratings) read as radios */
.wpb-check--radio .wpb-check__box {
  border-radius: 50%;
}

.wpb-check--radio.is-on .wpb-check__box {
  background: #fff;
  border-color: var(--wpb-primary);
}

.wpb-check--radio.is-on .wpb-check__box::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--wpb-primary);
  transform: translate(-50%, -50%);
}

.wpb-check--radio:hover .wpb-check__box {
  border-color: var(--wpb-primary);
}

.wpb-check__label {
  flex: 1;
}

.wpb-check__count {
  font-size: .82rem;
  color: var(--wpb-text-secondary);
  font-weight: 600;
  flex-shrink: 0;
}

/* Dual range price slider */
.wpb-range {
  position: relative;
  height: 24px;
  margin: 6px 0 4px;
}

.wpb-range__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 5px;
  transform: translateY(-50%);
  background: #e2e8f0;
  border-radius: 999px;
}

.wpb-range__fill {
  position: absolute;
  height: 100%;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  border-radius: 999px;
}

.wpb-range__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.wpb-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--wpb-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  cursor: pointer;
}

.wpb-range__input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--wpb-primary);
  cursor: pointer;
}

.wpb-range__vals {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  font-weight: 700;
  color: var(--wpb-secondary);
}

/* Rating rows */
.wpb-rating-list .wpb-check {
  align-items: center;
  gap: 9px;
}

.wpb-rating-list .wpb-check__label {
  font-size: .85rem;
}

/* A bucket with no matches stays visible but reads as a dead end */
.wpb-rating-list .wpb-check.is-empty {
  opacity: .45;
}

.wpb-stars {
  display: inline-flex;
  gap: 1px;
  flex-shrink: 0;
}

.wpb-filter__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 18px;
  border: 0;
  cursor: pointer;
  background: var(--wpb-secondary);
  color: #fff;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .92rem;
  transition: background .2s, transform .2s;
}

.wpb-filter__apply:hover {
  background: var(--wpb-primary);
  transform: translateY(-2px);
}

/* ---- Featured banner ---- */
.wpb-featured {
  display: grid;
  grid-template-columns: max-content minmax(0, 3fr) max-content;
  gap: 30px;
  align-items: center;
  background: radial-gradient(120% 160% at 100% 0%, rgba(255, 255, 255, .14), transparent 45%), linear-gradient(135deg, #6C63FF, #4F46E5);
  border-radius: 24px;
  padding: 32px 36px;
  margin-bottom: 30px;
  color: #fff;
  box-shadow: 0 24px 50px -18px rgba(108, 99, 255, .6);
}

.wpb-featured__icon {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 20px;
  background: #ffffff2b;
  overflow: hidden;
  flex-shrink: 0;
}

.wpb-featured__icon img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}

.wpb-featured__icon-fb {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wpb-primary);
}

.wpb-featured__icon-fb svg {
  width: 40px;
  height: 40px;
}

/* Title + description stack full width; the tag sits beside the rating */
.wpb-featured__info {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
}

.wpb-featured__tag {
  order: 3;
  display: inline-block;
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.wpb-featured__title {
  order: 1;
  flex: 0 0 100%;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 8px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wpb-featured__desc {
  order: 2;
  flex: 0 0 100%;
  color: rgba(255, 255, 255, .85);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wpb-featured__rating {
  order: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .85rem;
}

.wpb-featured__rating .star-rating span::before {
  color: #facc15;
}

.wpb-featured__rating .star-rating::before {
  color: rgba(255, 255, 255, .4);
}

.wpb-featured__buy {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.wpb-featured__price {
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.wpb-featured__price del {
  opacity: .6;
  font-size: 1rem;
  font-weight: 500;
}

.wpb-featured__price ins {
  text-decoration: none;
}

.wpb-featured__btn {
  background: #fff;
  color: var(--wpb-primary);
  padding: 12px 28px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s;
}

.wpb-featured__btn:hover {
  transform: translateY(-2px);
  color: var(--wpb-primary);
}

.wpb-featured__mbg {
  font-size: .72rem;
  color: rgba(255, 255, 255, .75);
  font-weight: 600;
}

@media (max-width: 1080px) {

  .wpb-featured {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .wpb-featured__buy {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 16px;
  }
}

@media (max-width: 560px) {

  .wpb-featured {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 26px 22px;
  }

  .wpb-featured__icon {
    margin: 0 auto;
  }

  .wpb-featured__info,
  .wpb-featured__rating {
    justify-content: center;
  }

  .wpb-featured__buy {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- Product grid + card (overrides generic Woo card within shop) ---- */
.wpb-shop .woocommerce-result-count {
  margin: 0 0 18px;
  font-size: .92rem;
  color: var(--wpb-text-secondary);
  font-weight: 600;
}

.wpb-shop ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin: 0 0 40px !important;
  padding: 0;
  list-style: none;
}

.wpb-shop ul.products li.product.wpb-plugin-card {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 20px;
  padding: 20px !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .3s, box-shadow .3s;
  position: relative;
}

.wpb-shop ul.products li.product.wpb-plugin-card::before,
.wpb-shop ul.products li.product.wpb-plugin-card::after {
  content: none !important;
}

.wpb-plugin-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

/* Badge + save row */
.wpb-plugin-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  min-height: 26px;
}

.wpb-plugin-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 999px;
}

.wpb-plugin-card__badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Badge variants — accent tints per DNA §2.1 rotation palette */
.wpb-plugin-card__badge--best {
  background: rgba(250, 204, 21, .16);
  color: #b45309;
}

.wpb-plugin-card__badge--top {
  background: rgba(99, 102, 241, .12);
  color: #4338ca;
}

.wpb-plugin-card__badge--sale {
  background: rgba(16, 185, 129, .13);
  color: #047857;
}

/* Save for later (local, per-browser) */
.wpb-wish {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  transition: color .2s, background .2s, transform .2s;
}

.wpb-wish:hover {
  color: #f43f5e;
  background: rgba(244, 63, 94, .08);
}

.wpb-wish.is-on {
  color: #f43f5e;
}

.wpb-wish.is-on svg {
  fill: currentColor;
}

/* Icon + title/description */
.wpb-plugin-card__media {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.wpb-plugin-card__icon {
  width: 68px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wpb-plugin-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border-radius: 10px;
}

.wpb-plugin-card__head {
  min-width: 0;
}

/* Scoped past Woo's `li.product h3 { padding: .5em 0 }` — that padding sits
   inside the overflow box and would leak a sliver of the clamped 3rd line. */
.wpb-shop ul.products li.product .wpb-plugin-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0;
  margin: 0 0 7px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wpb-plugin-card__title a {
  color: var(--wpb-secondary);
  text-decoration: none;
}

.wpb-plugin-card__title a:hover {
  color: var(--wpb-primary);
}

.wpb-plugin-card__desc {
  color: var(--wpb-text-secondary);
  font-size: .84rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 4.65em;
  /* exactly 3 lines */
}

.wpb-plugin-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--wpb-secondary);
}

.wpb-plugin-card__rating .star-rating {
  font-size: .9em;
}

.wpb-plugin-card__rating .star-rating span::before {
  color: #facc15;
}

/* Bottom-anchored so the trust row + footer line up across the grid */
.wpb-plugin-card__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
  margin-bottom: 16px;
}

.wpb-plugin-card__sep {
  width: 1px;
  height: 15px;
  background: #e2e8f0;
  flex-shrink: 0;
}

.wpb-plugin-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
}

.wpb-plugin-card__chip--safe {
  color: #16a34a;
}

.wpb-plugin-card__foot {
  padding-top: 16px;
  border-top: 1px solid var(--wpb-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.wpb-plugin-card__price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  white-space: nowrap;
}

.wpb-plugin-card__price .woocommerce-Price-amount {
  font-weight: 800;
}

.wpb-plugin-card__price del {
  color: var(--wpb-text-secondary);
  font-weight: 500;
  font-size: .85rem;
  opacity: .7;
}

.wpb-plugin-card__price ins {
  text-decoration: none;
}

.wpb-plugin-card__actions {
  display: flex;
  gap: 7px;
  margin-left: auto;
}

.wpb-plugin-card__view {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #e7e9ef;
  color: var(--wpb-primary);
  font-weight: 700;
  font-size: .78rem;
  white-space: nowrap;
  text-decoration: none;
  transition: all .2s;
}

.wpb-plugin-card__view:hover {
  border-color: var(--wpb-primary);
  background: rgba(108, 99, 255, .05);
}

.wpb-plugin-card__buy {
  padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .2s;
}

.wpb-plugin-card__buy:hover {
  transform: translateY(-2px);
  color: #fff;
}

@media (max-width: 420px) {
  .wpb-plugin-card__media {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }

  .wpb-plugin-card__icon {
    width: 52px;
    height: 52px;
  }

  .wpb-plugin-card__foot {
    align-items: flex-start;
  }
}

/* ---- Pagination inside the shop grid ---- */
.wpb-shop nav.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.wpb-shop nav.woocommerce-pagination ul li {
  margin: 0;
  overflow: visible;
}

.wpb-shop nav.woocommerce-pagination ul li a,
.wpb-shop nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  transition: all .2s;
}

/* ---- Bottom help CTA ---- */
.wpb-shop__help {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 26px 32px;
  margin-top: 40px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-help-col {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wpb-help-ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wpb-help-ic svg {
  width: 22px;
  height: 22px;
}

.wpb-help-col h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  margin: 0 0 3px;
}

.wpb-help-col p {
  font-size: .85rem;
  color: var(--wpb-text-secondary);
  margin: 0;
}

.wpb-help-btn {
  margin-left: auto;
  white-space: nowrap;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid var(--wpb-border-soft);
  color: var(--wpb-secondary);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: all .2s;
}

.wpb-help-btn:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
}

.wpb-help-sep {
  width: 1px;
  height: 48px;
  background: var(--wpb-border-soft);
}

@media (max-width: 860px) {
  .wpb-shop__help {
    grid-template-columns: 1fr;
  }

  .wpb-help-sep {
    width: 100%;
    height: 1px;
  }

  .wpb-help-col {
    flex-wrap: wrap;
  }

  .wpb-help-btn {
    margin-left: 0;
  }
}

/* ============================================================
   WOOCOMMERCE CART — custom branded layout (.wpb-cart)
   ============================================================ */
.wpb-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.wpb-crumbs {
  font-size: .85rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  margin-bottom: 18px;
}

.wpb-crumbs a {
  color: var(--wpb-primary);
  text-decoration: none;
}

.wpb-crumbs .sep {
  margin: 0 8px;
  color: #cbd5e1;
}

.wpb-cart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 980px) {
  .wpb-cart__grid {
    grid-template-columns: 1fr;
  }
}

.wpb-cart__panel {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* Step indicator */
.wpb-steps {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--wpb-border-soft);
}

.wpb-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--wpb-text-secondary);
}

.wpb-steps li:not(:last-child)::after {
  content: '';
  width: 60px;
  height: 2px;
  background: var(--wpb-border-soft);
  margin-left: 4px;
}

.wpb-steps__n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wpb-bg-soft);
  color: var(--wpb-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

.wpb-steps li.is-active {
  color: var(--wpb-secondary);
}

.wpb-steps li.is-active .wpb-steps__n {
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
}

.wpb-steps li.is-active:not(:last-child)::after {
  background: linear-gradient(90deg, var(--wpb-primary), var(--wpb-border-soft));
}

/* Cart items */
.wpb-cart-items {
  display: flex;
  flex-direction: column;
}

.wpb-cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto auto 28px;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-cart-item:first-child {
  border-top: 0;
  padding-top: 4px;
}

.wpb-cart-item__icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--wpb-bg-soft);
}

.wpb-cart-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpb-cart-item__info {
  min-width: 0;
}

.wpb-cart-item__titlerow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.wpb-cart-item__title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.wpb-cart-item__title a {
  color: var(--wpb-secondary);
  text-decoration: none;
}

.wpb-cart-item__title a:hover {
  color: var(--wpb-primary);
}

.wpb-cart-item__cat {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wpb-primary);
  background: rgba(108, 99, 255, .1);
  padding: 3px 9px;
  border-radius: 999px;
}

.wpb-cart-item__desc {
  font-size: .85rem;
  color: var(--wpb-text-secondary);
  line-height: 1.5;
  margin: 0 0 8px;
}

.wpb-cart-item__meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
}

.wpb-cart-item__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wpb-cart-item__rating .star-rating {
  font-size: .85em;
}

.wpb-cart-item__rating .star-rating span::before {
  color: #facc15;
}

.wpb-cart-item__installs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wpb-cart-item__license {
  min-width: 0;
}

.wpb-cart-item__license label,
.wpb-cart-item__qty label {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--wpb-text-secondary);
  margin-bottom: 6px;
}

.wpb-cart-item__license-val {
  max-width: 170px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--wpb-secondary);
  background: #fff;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.wpb-cart-item__price {
  text-align: right;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  white-space: nowrap;
}

.wpb-cart-item__price .wpb-cart-item__per {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-cart-item__remove .wpb-remove {
  color: #ef4444;
  display: inline-flex;
  opacity: .7;
  transition: opacity .2s, transform .2s;
}

.wpb-cart-item__remove .wpb-remove:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Qty stepper */
.wpb-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.wpb-qty__btn {
  width: 32px;
  height: 38px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--wpb-secondary);
  line-height: 1;
}

.wpb-qty__btn:hover {
  background: var(--wpb-bg-soft);
  color: var(--wpb-primary);
}

.wpb-qty .quantity {
  margin: 0;
}

.wpb-qty label {
  display: none;
}

.wpb-qty input.qty,
.wpb-qty span.wpb-qty__input {
  width: 42px;
  height: 38px;
  border: 0;
  border-left: 1px solid var(--wpb-border-soft);
  border-right: 1px solid var(--wpb-border-soft);
  text-align: center;
  font-weight: 700;
  color: var(--wpb-secondary);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -moz-appearance: textfield;
}

.wpb-qty input.qty::-webkit-outer-spin-button,
.wpb-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Cross-sells */
.wpb-crosssell {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-crosssell__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 16px;
}

.wpb-crosssell__title svg {
  color: var(--wpb-primary);
}

.wpb-crosssell__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.wpb-cross-card {
  display: flex;
  gap: 12px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 16px;
  padding: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.wpb-cross-card:hover {
  border-color: var(--wpb-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.wpb-cross-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--wpb-bg-soft);
  flex-shrink: 0;
}

.wpb-cross-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpb-cross-card__body {
  min-width: 0;
  flex: 1;
}

.wpb-cross-card__titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.wpb-cross-card__title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  text-decoration: none;
}

.wpb-cross-card__title:hover {
  color: var(--wpb-primary);
}

.wpb-cross-card__cat {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #16a34a;
  background: rgba(22, 163, 74, .1);
  padding: 2px 8px;
  border-radius: 999px;
}

.wpb-cross-card__desc {
  font-size: .78rem;
  color: var(--wpb-text-secondary);
  line-height: 1.45;
  margin: 0 0 10px;
}

.wpb-cross-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wpb-cross-card__price {
  font-size: .92rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-cross-card__price small {
  font-size: .7rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-cross-card__add {
  padding: 7px 16px;
  border-radius: 9px;
  border: 1px solid var(--wpb-primary);
  color: var(--wpb-primary);
  font-weight: 700;
  font-size: .8rem;
  text-decoration: none;
  transition: all .2s;
}

.wpb-cross-card__add:hover {
  background: var(--wpb-primary);
  color: #fff;
}

/* Coupon */
.wpb-coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-coupon__ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--wpb-bg-soft);
  color: var(--wpb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wpb-coupon__input {
  flex: 1;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: .9rem;
  background: #fff;
}

.wpb-coupon__btn {
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: 12px;
}

/* Order summary */
.wpb-cart__summary {
  position: sticky;
  top: calc(var(--wpb-header-h) + 12px);
}

@media (max-width: 980px) {
  .wpb-cart__summary {
    position: static;
  }
}

.wpb-summary {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.wpb-summary__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 20px;
}

.wpb-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--wpb-secondary);
}

.wpb-summary__row span:first-child {
  color: var(--wpb-text-secondary);
}

.wpb-summary__row--save span {
  color: #16a34a !important;
  font-weight: 700;
}

.wpb-summary__total {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-summary__total-label {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-summary__total small {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  margin-top: 2px;
}

.wpb-summary__total-amt {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-summary__total-amt small {
  font-size: .8rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
}

.wpb-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 18px 36px -12px rgba(108, 99, 255, .55);
  transition: transform .2s;
}

.wpb-summary__checkout:hover {
  transform: translateY(-2px);
  color: #fff;
}

.wpb-summary__continue {
  display: block;
  text-align: center;
  margin-top: 12px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid var(--wpb-border-soft);
  color: var(--wpb-secondary);
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
}

.wpb-summary__continue:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
}

.wpb-summary__pay {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-summary__pay-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
  margin-bottom: 10px;
}

.wpb-summary__pay-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wpb-paychip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  background: #fff;
  letter-spacing: .02em;
}

.wpb-summary__trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--wpb-border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wpb-summary__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-summary__trust svg {
  color: #16a34a;
  flex-shrink: 0;
}

/* Empty cart */
.wpb-cart--empty {
  padding-top: 60px;
  padding-bottom: 100px;
}

.wpb-empty-cart {
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
}

.wpb-empty-cart__ic {
  width: 90px;
  height: 90px;
  margin: 0 auto 24px;
  border-radius: 26px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpb-empty-cart__ic svg {
  width: 44px;
  height: 44px;
}

.wpb-empty-cart__title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 12px;
}

.wpb-empty-cart__text {
  color: var(--wpb-text-secondary);
  line-height: 1.6;
  margin: 0 0 26px;
}

/* Cart responsive */
@media (max-width: 720px) {
  .wpb-cart-item {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas: 'icon info remove' 'lic lic lic' 'qty price price';
    gap: 12px 14px;
  }

  .wpb-cart-item__icon {
    grid-area: icon;
    width: 60px;
    height: 60px;
  }

  .wpb-cart-item__info {
    grid-area: info;
  }

  .wpb-cart-item__remove {
    grid-area: remove;
    align-self: start;
  }

  .wpb-cart-item__license {
    grid-area: lic;
  }

  .wpb-cart-item__license-val {
    white-space: normal;
  }

  .wpb-cart-item__qty {
    grid-area: qty;
  }

  .wpb-cart-item__price {
    grid-area: price;
    align-self: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   WOOCOMMERCE CHECKOUT — custom branded layout (.wpb-checkout)
   Reuses the shared .wpb-summary* order-summary classes from the cart.
   ───────────────────────────────────────────────────────────────────────── */

.wpb-checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 1024px) {
  .wpb-checkout__grid {
    grid-template-columns: 1fr;
  }
}

.wpb-checkout__panel {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-checkout__aside {
  position: sticky;
  top: calc(var(--wpb-header-h) + 12px);
}

@media (max-width: 1024px) {
  .wpb-checkout__aside {
    position: static;
  }
}

/* Completed step (e.g. Cart) in the step indicator */
.wpb-steps li.is-done {
  color: var(--wpb-secondary);
}

.wpb-steps li.is-done .wpb-steps__n {
  background: #dcfce7;
  color: #16a34a;
  font-size: 0;
  position: relative;
}

.wpb-steps li.is-done .wpb-steps__n::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 10px;
  border: solid #16a34a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.wpb-steps li.is-done:not(:last-child)::after {
  background: linear-gradient(90deg, #16a34a, var(--wpb-primary));
}

/* Express checkout */
.wpb-express {
  margin-bottom: 26px;
}

.wpb-express__title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 14px;
}

.wpb-express__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.wpb-express__buttons>* {
  width: 100%;
  min-height: 48px;
}

/* Stripe injects its express button into .wc-stripe-banner-checkout via JS.
   Force it + everything inside to span the column (the button renders narrow
   and centered otherwise). */
.wpb-express__buttons .wc-stripe-banner-checkout,
.wpb-express__buttons .wc-stripe-banner-checkout>*,
.wpb-express__buttons .wc-stripe-banner-checkout button,
.wpb-express__buttons .wc-stripe-banner-checkout iframe,
.wpb-express__buttons .wc-stripe-banner-checkout .StripeElement,
.wpb-express__buttons button,
.wpb-express__buttons iframe,
.wpb-express__buttons [id*="express-checkout"],
.wpb-express__buttons [class*="payment-request"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wpb-express__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0 4px;
  color: var(--wpb-text-secondary);
  font-size: .82rem;
  font-weight: 600;
}

.wpb-express__divider::before,
.wpb-express__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wpb-border-soft);
}

/* Checkout form fields (Woo billing/shipping) */
.wpb-checkout__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.wpb-checkout-form .col-2:empty {
  display: none;
}

.wpb-checkout-form h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 22px 0 16px;
}

.wpb-checkout-form h3#ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
}

/* NOTE ON SPECIFICITY: WooCommerce core ships `.woocommerce form .form-row
   input.input-text` (0,3,2) and `.woocommerce form .form-row-first {width:47%}`
   (0,2,1). Plugin CSS (woo-checkout-field-editor-pro, woo-stripe-payment) loads
   AFTER our stylesheet. So every checkout-field rule below is deliberately
   scoped `.wpb-checkout .wpb-checkout-form .form-row …` to out-weigh them. */

.wpb-checkout .wpb-checkout-form .woocommerce-billing-fields__field-wrapper,
.wpb-checkout .wpb-checkout-form .woocommerce-shipping-fields__field-wrapper,
.wpb-checkout .wpb-checkout-form .woocommerce-additional-fields__field-wrapper,
.wpb-checkout .wpb-checkout-form .woocommerce-account-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

/* Each field fills its own grid column — (0,3,0) beats Woo core's
   `.woocommerce form .form-row-first{width:47%;float}` (0,2,1). */
.wpb-checkout .wpb-checkout-form .form-row {
  width: 100%;
  min-width: 0;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.wpb-checkout .wpb-checkout-form .form-row-wide,
.wpb-checkout .wpb-checkout-form .notes,
.wpb-checkout .wpb-checkout-form .create-account,
.wpb-checkout .wpb-checkout-form .woocommerce-account-fields {
  grid-column: 1 / -1;
}

.wpb-checkout .wpb-checkout-form .form-row label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  margin: 0 0 7px;
}

.wpb-checkout .wpb-checkout-form .form-row label .required {
  color: var(--wpb-primary);
  text-decoration: none;
  border: 0;
}

/* Field inputs — mirror + exceed core's `.form-row input.input-text` chain. */
.wpb-checkout .wpb-checkout-form .form-row input.input-text,
.wpb-checkout .wpb-checkout-form .form-row input[type="text"],
.wpb-checkout .wpb-checkout-form .form-row input[type="email"],
.wpb-checkout .wpb-checkout-form .form-row input[type="tel"],
.wpb-checkout .wpb-checkout-form .form-row input[type="password"],
.wpb-checkout .wpb-checkout-form .form-row textarea,
.wpb-checkout .wpb-checkout-form .form-row select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--wpb-secondary);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition: border-color .2s, box-shadow .2s;
}

.wpb-checkout .wpb-checkout-form .form-row textarea {
  min-height: 120px;
  resize: vertical;
}

.wpb-checkout .wpb-checkout-form .form-row input.input-text:focus,
.wpb-checkout .wpb-checkout-form .form-row select:focus,
.wpb-checkout .wpb-checkout-form .form-row textarea:focus {
  outline: none;
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, .14);
}

.wpb-checkout .wpb-checkout-form .form-row input.input-text::placeholder,
.wpb-checkout .wpb-checkout-form .form-row textarea::placeholder {
  color: #9ca3af;
}

/* The Woo input wrapper is a <span> — make it fill the row so inputs stretch. */
.wpb-checkout .wpb-checkout-form .form-row .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

/* select2 (country) to match native inputs */
.wpb-checkout .wpb-checkout-form .form-row .select2-container,
.wpb-checkout .wpb-checkout-form .form-row .select2-container .select2-selection--single {
  width: 100%;
}

.wpb-checkout .wpb-checkout-form .form-row .select2-container .select2-selection--single {
  height: 46px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.wpb-checkout .wpb-checkout-form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
  padding-left: 14px;
  color: var(--wpb-secondary);
}

.wpb-checkout .wpb-checkout-form .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
}

.wpb-checkout-form .select2-container--open .select2-selection--single {
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, .14);
}

/* Create-account / terms checkbox rows — override the block `label` rule above
   (which sets display:block) so the box sits inline with its text. */
.wpb-checkout .wpb-checkout-form .form-row label.woocommerce-form__label-for-checkbox,
.wpb-checkout .wpb-checkout-form .form-row label.checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  margin: 4px 0 0;
}

.wpb-checkout .wpb-checkout-form .form-row .woocommerce-form__input-checkbox,
.wpb-checkout .wpb-checkout-form .form-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--wpb-primary);
  margin: 2px 0 0;
  flex-shrink: 0;
}

.wpb-checkout .wpb-checkout-form .create-account p:first-child {
  margin-top: 4px;
}

/* Coupon toggle */
.wpb-checkout-coupon {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-checkout-coupon .woocommerce-form-coupon-toggle {
  margin: 0;
}

.wpb-checkout-coupon .woocommerce-info {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wpb-bg-soft);
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0;
  color: var(--wpb-secondary);
  font-size: .88rem;
  font-weight: 600;
}

.wpb-checkout-coupon .woocommerce-info::before {
  display: none;
}

.wpb-checkout-coupon .showcoupon {
  color: var(--wpb-primary);
  font-weight: 800;
  text-decoration: none;
}

.wpb-checkout-coupon .checkout_coupon {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.wpb-checkout-coupon .checkout_coupon .form-row {
  margin: 0;
}

.wpb-checkout-coupon .checkout_coupon p:first-child {
  display: none;
}

.wpb-checkout-coupon .checkout_coupon #coupon_code {
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .9rem;
  min-width: 220px;
}

.wpb-checkout-coupon .checkout_coupon .button {
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 12px;
}

/* Order summary — branded review items (.wpb-corder) */
.wpb-checkout-summary {
  padding: 24px;
}

.wpb-corder {
  display: block;
  border: 0;
  margin: 0;
}

.wpb-corder__items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wpb-corder-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.wpb-corder-item__icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--wpb-bg-soft);
}

.wpb-corder-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpb-corder-item__qty {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--wpb-secondary);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpb-corder-item__info {
  min-width: 0;
}

.wpb-corder-item__titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.wpb-corder-item__title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  line-height: 1.3;
}

.wpb-corder-item__cat {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wpb-primary);
  background: rgba(108, 99, 255, .1);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.wpb-corder-item__license {
  font-size: .76rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-corder-item__price {
  font-size: .95rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  white-space: nowrap;
}

.wpb-corder__totals {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--wpb-border-soft);
}

/* Payment methods + place order (inside #order_review) */
.wpb-checkout-summary #payment {
  background: transparent;
  border-radius: 0;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-checkout-summary #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wpb-checkout-summary #payment ul.payment_methods li {
  border: 1px solid var(--wpb-border-soft);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.wpb-checkout-summary #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, .12);
}

.wpb-checkout-summary #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--wpb-secondary);
  margin: 0;
  cursor: pointer;
}

.wpb-checkout-summary #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--wpb-primary);
  width: 17px;
  height: 17px;
}

.wpb-checkout-summary #payment .payment_box {
  background: var(--wpb-bg-soft);
  border-radius: 12px;
  margin: 12px 0 2px;
  padding: 14px 16px;
  font-size: .84rem;
  color: var(--wpb-text-secondary);
  line-height: 1.55;
}

.wpb-checkout-summary #payment .payment_box::before {
  display: none;
}

.wpb-checkout-summary #payment .wc-terms-and-conditions {
  margin: 16px 0 0;
  font-size: .82rem;
  color: var(--wpb-text-secondary);
}

.wpb-checkout-summary #payment .place-order {
  padding: 0;
  margin: 0;
}

.wpb-checkout-summary #place_order,
.wpb-checkout-summary #payment .place-order button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  border: 0;
  cursor: pointer;
  border-radius: 14px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 18px 36px -12px rgba(108, 99, 255, .55);
  transition: transform .2s;
}

.wpb-checkout-summary #place_order:hover {
  transform: translateY(-2px);
}

.wpb-checkout-summary #place_order:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* Woo notices on the checkout are styled by the unified notice contract
   (see "Notices & Notifications"); nothing page-specific is needed here. */

/* Login form (returning customers) */
.wpb-checkout .woocommerce-form-login-toggle {
  margin-bottom: 20px;
}

.wpb-checkout form.login {
  border: 1px solid var(--wpb-border-soft);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 22px;
}

/* Checkout responsive */
@media (max-width: 560px) {

  .wpb-checkout-form .woocommerce-billing-fields__field-wrapper,
  .wpb-checkout-form .woocommerce-shipping-fields__field-wrapper,
  .wpb-checkout-form .woocommerce-account-fields {
    grid-template-columns: 1fr;
  }

  .wpb-checkout__panel {
    padding: 20px 18px;
  }

  .wpb-checkout-coupon .checkout_coupon {
    flex-direction: column;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   WOOCOMMERCE THANK YOU / ORDER RECEIVED — branded layout (.wpb-ty)
   Reuses .wpb-summary*, .wpb-corder*, .wpb-steps* and .wpb-crumbs.
   ───────────────────────────────────────────────────────────────────────── */

.wpb-ty {
  padding-bottom: 40px;
}

/* Button modifiers (base .wpb-btn is the gradient primary) */
.wpb-btn--primary {
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
}

.wpb-btn--ghost {
  background: #fff;
  color: var(--wpb-secondary);
  border: 1px solid var(--wpb-border-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-btn--ghost:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
}

.wpb-ty__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 1024px) {
  .wpb-ty__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Success hero ---- */
.wpb-ty__hero {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.wpb-ty__hero--bare {
  justify-content: center;
  text-align: center;
  padding: 40px 0 60px;
}

.wpb-ty__check {
  flex-shrink: 0;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px -10px rgba(22, 163, 74, .5);
}

.wpb-ty__title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--wpb-secondary);
  margin: 0 0 12px;
}

.wpb-ty__lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--wpb-text-secondary);
  max-width: 480px;
  margin: 0 0 18px;
}

.wpb-ty__hero--bare .wpb-ty__lead {
  margin: 0 auto;
}

.wpb-ty__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wpb-ty-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--wpb-border-soft);
  background: #fff;
  font-size: .85rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-ty-pill>svg {
  color: var(--wpb-primary);
}

.wpb-ty-pill__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
}

/* Step indicator variant — three complete steps */
.wpb-ty__steps {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 16px;
  padding: 16px 22px;
  margin-bottom: 26px;
  justify-content: center;
  gap: 8px;
}

.wpb-ty__steps .wpb-steps__n svg {
  width: 14px;
  height: 14px;
}

.wpb-ty__steps li:not(:last-child)::after {
  width: 48px;
}

/* ---- Success card ---- */
.wpb-ty__success {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
  margin-bottom: 26px;
}

.wpb-ty__success-ic {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpb-ty__success-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 8px;
}

.wpb-ty__success-text {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--wpb-text-secondary);
  margin: 0 0 20px;
}

.wpb-ty__success-text strong {
  color: var(--wpb-secondary);
  font-weight: 700;
}

.wpb-ty__success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- What happens next ---- */
.wpb-ty__next {
  margin-bottom: 6px;
}

.wpb-ty__next-head {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 18px;
}

.wpb-ty__next-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
}

.wpb-ty-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 18px;
  padding: 22px 20px;
}

.wpb-ty-step__n {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wpb-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpb-ty-step__ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.wpb-ty-step__title {
  font-size: .98rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 6px;
}

.wpb-ty-step__text {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--wpb-text-secondary);
  margin: 0;
}

.wpb-ty-step__sep {
  display: flex;
  align-items: center;
  color: #cbd5e1;
  font-weight: 800;
  letter-spacing: 2px;
}

@media (max-width: 720px) {
  .wpb-ty__next-steps {
    grid-template-columns: 1fr;
  }

  .wpb-ty-step__sep {
    display: none;
  }
}

/* ---- Order summary aside ---- */
.wpb-ty__aside {
  position: sticky;
  top: calc(var(--wpb-header-h) + 12px);
}

@media (max-width: 1024px) {
  .wpb-ty__aside {
    position: static;
  }
}

.wpb-ty-summary {
  padding: 26px;
}

.wpb-ty-meta {
  list-style: none;
  margin: 0 0 20px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--wpb-border-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wpb-ty-meta li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.wpb-ty-meta__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-ty-meta__label svg {
  color: var(--wpb-primary);
  flex-shrink: 0;
}

.wpb-ty-meta__val {
  font-size: .9rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  text-align: right;
}

.wpb-ty-meta__val--email {
  font-weight: 600;
  word-break: break-all;
}

.wpb-ty-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.wpb-ty-status.is-paid {
  background: #dcfce7;
  color: #16a34a;
}

.wpb-ty-status.is-pending {
  background: #fef3c7;
  color: #b45309;
}

.wpb-ty-status.is-neutral {
  background: var(--wpb-bg-soft);
  color: var(--wpb-text-secondary);
}

.wpb-ty-items {
  padding-bottom: 4px;
}

.wpb-ty-invoice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--wpb-border-soft);
  color: var(--wpb-primary);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
}

.wpb-ty-invoice:hover {
  color: var(--wpb-primary-dark);
}

/* ---- Help bar ---- */
.wpb-ty__help {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 34px;
}

@media (max-width: 820px) {
  .wpb-ty__help {
    grid-template-columns: 1fr;
  }
}

.wpb-ty-help {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 20px;
  padding: 22px 24px;
}

.wpb-ty-help__ic {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpb-ty-help__body {
  flex: 1;
  min-width: 0;
}

.wpb-ty-help__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 4px;
}

.wpb-ty-help__text {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--wpb-text-secondary);
  margin: 0;
}

.wpb-ty-help__btn {
  flex-shrink: 0;
  padding: 11px 18px;
  font-size: .88rem;
}

@media (max-width: 480px) {
  .wpb-ty-help {
    flex-wrap: wrap;
  }

  .wpb-ty-help__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Failed order ---- */
.wpb-ty__failed {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 0 30px;
}

.wpb-ty__failed-ic {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 26px;
  background: #fee2e2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpb-ty__failed-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 0 0 12px;
}

.wpb-ty__failed-text {
  color: var(--wpb-text-secondary);
  line-height: 1.6;
  margin: 0 0 26px;
}

.wpb-ty__failed-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Hero responsive ---- */
@media (max-width: 620px) {
  .wpb-ty__hero {
    flex-direction: column;
    text-align: center;
  }

  .wpb-ty__check {
    width: 100px;
    height: 100px;
  }

  .wpb-ty__lead {
    margin-left: auto;
    margin-right: auto;
  }

  .wpb-ty__pills {
    justify-content: center;
  }

  .wpb-ty__success {
    flex-direction: column;
    text-align: center;
    padding: 26px 22px;
  }

  .wpb-ty__success-actions {
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   WOOCOMMERCE MY ACCOUNT — branded layout (.wpb-account)
   Reuses .wpb-shop__head, .wpb-shop-badge, .wpb-shop__help, .wpb-crumbs
   and the status-pill system. Auth pages use .wpb-auth; the logged-in
   shell uses .wpb-account__grid + .wpb-account-nav + .wpb-acc-* parts.
   ───────────────────────────────────────────────────────────────────────── */

/* ---- Auth card (login / register / lost password) ---- */
.wpb-auth {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 24px;
  padding: 36px 40px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  margin-bottom: 28px;
}

.wpb-auth--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
}

.wpb-auth--lost {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.wpb-auth--single {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.wpb-auth__col {
  min-width: 0;
}

/* Vertical "or" divider between login and register */
.wpb-auth__divider {
  position: relative;
  width: 1px;
  background: var(--wpb-border-soft);
}

.wpb-auth__divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  color: var(--wpb-text-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* Card head: icon tile + title + sub */
.wpb-auth__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.wpb-auth__ic {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wpb-auth__ic svg {
  width: 26px;
  height: 26px;
}

.wpb-auth__ic--ok {
  background: #dcfce7;
  color: #15803d;
}

.wpb-auth__head h2 {
  margin: 4px 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-secondary);
}

.wpb-auth__head p {
  margin: 0;
  font-size: .9rem;
  color: var(--wpb-text-secondary);
  line-height: 1.55;
}

/* Fields (label + icon input) */
.wpb-auth .wpb-field {
  margin: 0 0 18px;
  padding: 0;
}

.wpb-field label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  margin-bottom: 8px;
}

.wpb-field label .required {
  color: var(--wpb-primary);
  text-decoration: none;
}

.wpb-field__wrap {
  position: relative;
  display: block;
}

.wpb-field__wrap svg.wpb-field__ic {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #94a3b8;
  pointer-events: none;
  z-index: 2;
}

.wpb-auth .wpb-field .input-text,
.wpb-auth .wpb-field input.woocommerce-Input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px 13px 44px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--wpb-secondary);
  transition: border-color .2s, box-shadow .2s;
}

.wpb-auth .wpb-field .input-text:focus {
  outline: none;
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, .12);
}

/* Woo's JS wraps password inputs in .password-input + eye toggle */
.wpb-field__wrap .password-input {
  display: block;
  width: 100%;
}

.wpb-auth .show-password-input {
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  color: #94a3b8;
}

/* Remember me / forgot row */
.wpb-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 18px;
}

.wpb-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  cursor: pointer;
}

.wpb-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--wpb-primary);
  margin: 0;
}

.wpb-auth__lost {
  font-size: .88rem;
  font-weight: 700;
  color: var(--wpb-primary);
  text-decoration: none;
}

.wpb-auth__lost:hover {
  color: var(--wpb-primary-dark);
}

/* Primary submit (gradient, full width) */
.wpb-auth .wpb-auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px;
  border: 0;
  cursor: pointer;
  border-radius: 14px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  font-family: inherit;
  box-shadow: 0 18px 36px -12px rgba(108, 99, 255, .55);
  transition: transform .2s;
}

.wpb-auth .wpb-auth__submit:hover {
  transform: translateY(-2px);
  color: #fff;
}

/* "Secure login" footer note with flanking rules */
.wpb-auth__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-auth__secure::before,
.wpb-auth__secure::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wpb-border-soft);
}

.wpb-auth__secure svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Info note (register / lost password) */
.wpb-auth__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  font-size: .82rem;
  color: var(--wpb-text-secondary);
  line-height: 1.55;
}

.wpb-auth__note svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--wpb-primary);
}

/* Horizontal "or" rule (lost password) */
.wpb-auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
}

.wpb-auth__or::before,
.wpb-auth__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wpb-border-soft);
}

/* Outline alternative action (Back to Sign In) */
.wpb-auth__alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid rgba(108, 99, 255, .35);
  background: #fff;
  color: var(--wpb-primary);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.wpb-auth__alt:hover {
  background: rgba(108, 99, 255, .06);
  border-color: var(--wpb-primary);
}

/* Decorative art panel (lost password) */
.wpb-auth__art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 60% 40%, rgba(108, 99, 255, .12), transparent 60%),
    var(--wpb-bg-soft);
}

.wpb-auth__art-circle {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 20px 40px -10px rgba(108, 99, 255, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wpb-primary);
}

.wpb-auth__art-circle svg {
  width: 80px;
  height: 80px;
  stroke-width: 1.6;
}

.wpb-account__footnote {
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  margin: 0 0 28px;
}

.wpb-account__footnote a {
  color: var(--wpb-primary);
  font-weight: 700;
  text-decoration: none;
}

/* ---- Logged-in shell: sidebar + content ---- */
.wpb-account__grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 28px;
}

/* Neutralize WooCommerce core layout (woocommerce-layout.css) which sets
   `.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}`
   and `.woocommerce-MyAccount-content{float:right;width:68%}`. Those 2-class
   selectors otherwise shrink the sidebar to 30% (~84px) and the content to 68%
   *inside* our grid tracks. Higher specificity (3 classes) lets the grid win. */
.wpb-account .wpb-account__grid .wpb-account-nav,
.wpb-account .wpb-account__grid .wpb-account__content {
  width: auto;
  float: none;
  margin: 0;
}

.wpb-account-nav {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  position: sticky;
  top: calc(var(--wpb-header-h) + 20px);
}

.wpb-account-nav__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wpb-border-soft);
}

.wpb-account-nav__avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
}

.wpb-account-nav__id {
  min-width: 0;
}

.wpb-account-nav__id strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpb-account-nav__id span {
  display: block;
  font-size: .78rem;
  color: var(--wpb-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpb-account-nav ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wpb-account-nav ul li a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
  text-decoration: none;
  transition: background .2s, color .2s;
}

.wpb-account-nav ul li a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.wpb-account-nav ul li a:hover {
  background: var(--wpb-bg-soft);
  color: var(--wpb-secondary);
}

.wpb-account-nav ul li.is-active a {
  background: rgba(108, 99, 255, .09);
  color: var(--wpb-primary);
}

.wpb-account-nav__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  padding: 11px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}

.wpb-account-nav__logout svg {
  width: 16px;
  height: 16px;
}

.wpb-account-nav__logout:hover {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.wpb-account__content {
  min-width: 0;
}

/* ---- Dashboard: welcome banner ---- */
.wpb-acc-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  background:
    radial-gradient(circle at 90% 10%, rgba(108, 99, 255, .1), transparent 55%),
    #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-acc-welcome__main h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-secondary);
}

.wpb-acc-welcome__main p {
  margin: 0;
  font-size: .92rem;
  color: var(--wpb-text-secondary);
}

.wpb-acc-welcome__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.wpb-acc-welcome__art {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpb-acc-welcome__art svg {
  width: 46px;
  height: 46px;
  stroke-width: 1.8;
}

/* Account buttons (primary gradient + ghost) */
.wpb-acc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 28px -12px rgba(108, 99, 255, .55);
  transition: transform .2s;
}

.wpb-acc-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}

.wpb-acc-btn svg {
  width: 16px;
  height: 16px;
}

.wpb-acc-btn--ghost {
  background: #fff;
  color: var(--wpb-primary);
  border: 1px solid rgba(108, 99, 255, .35);
  box-shadow: none;
}

.wpb-acc-btn--ghost:hover {
  background: rgba(108, 99, 255, .06);
  color: var(--wpb-primary);
}

/* ---- Dashboard: stat cards ---- */
.wpb-acc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.wpb-acc-stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 18px;
  padding: 18px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .2s, box-shadow .2s;
}

.wpb-acc-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.wpb-acc-stat__ic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wpb-acc-stat__ic svg {
  width: 21px;
  height: 21px;
}

.wpb-acc-stat__ic--purple {
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
}

.wpb-acc-stat__ic--blue {
  background: #dbeafe;
  color: #2563eb;
}

.wpb-acc-stat__ic--emerald {
  background: #d1fae5;
  color: #059669;
}

.wpb-acc-stat__ic--orange {
  background: #ffedd5;
  color: #ea580c;
}

.wpb-acc-stat strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-secondary);
  line-height: 1.15;
}

.wpb-acc-stat__label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  margin-top: 2px;
}

.wpb-acc-stat__note {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  margin-top: 2px;
}

/* ---- Dashboard: panels ---- */
.wpb-acc-panel {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  margin-top: 24px;
}

.wpb-acc-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.wpb-acc-panel__head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-secondary);
}

.wpb-acc-panel__head h2 svg {
  width: 18px;
  height: 18px;
  color: var(--wpb-primary);
}

.wpb-acc-panel__link {
  font-size: .85rem;
  font-weight: 700;
  color: var(--wpb-primary);
  text-decoration: none;
}

.wpb-acc-panel__link:hover {
  color: var(--wpb-primary-dark);
}

.wpb-acc-panel__link--foot {
  display: inline-block;
  margin-top: 14px;
}

/* ---- Dashboard: product rows ---- */
.wpb-acc-product {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-acc-product:first-child {
  border-top: 0;
}

.wpb-acc-product__icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  overflow: hidden;
  background: var(--wpb-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wpb-primary);
}

.wpb-acc-product__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpb-acc-product__icon svg {
  width: 22px;
  height: 22px;
}

.wpb-acc-product__info {
  min-width: 0;
}

.wpb-acc-product__info strong,
.wpb-acc-product__info strong a {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpb-acc-product__info strong a:hover {
  color: var(--wpb-primary);
}

.wpb-acc-product__info>span {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  margin-top: 3px;
}

.wpb-acc-product__actions {
  display: flex;
  gap: 8px;
}

/* Small row actions */
.wpb-acc-act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 11px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s;
}

.wpb-acc-act:hover {
  transform: translateY(-1px);
  color: #fff;
}

.wpb-acc-act svg {
  width: 14px;
  height: 14px;
}

.wpb-acc-act--ghost {
  background: #fff;
  color: var(--wpb-secondary);
  border: 1px solid var(--wpb-border-soft);
}

.wpb-acc-act--ghost:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
}

/* ---- Status pills ---- */
.wpb-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.wpb-status--completed {
  background: #dcfce7;
  color: #15803d;
}

.wpb-status--processing {
  background: #dbeafe;
  color: #1d4ed8;
}

.wpb-status--on-hold {
  background: #ffedd5;
  color: #c2410c;
}

/* Awaiting payment — amber, like on-hold but one step lighter, so the two
   waiting states stay distinguishable. */
.wpb-status--pending {
  background: #fef3c7;
  color: #b45309;
}

.wpb-status--cancelled,
.wpb-status--failed {
  background: #fee2e2;
  color: #b91c1c;
}

.wpb-status--refunded {
  background: #e2e8f0;
  color: #475569;
}

/* ---- Dashboard: bottom two columns ---- */
.wpb-acc-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.wpb-acc-cols .wpb-acc-panel {
  margin-top: 24px;
}

/* Recent orders rows */
.wpb-acc-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-acc-order:first-child {
  border-top: 0;
}

.wpb-acc-order__id strong {
  display: block;
  font-size: .88rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-acc-order__id span {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  margin-top: 2px;
}

.wpb-acc-order__amt {
  font-size: .9rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  white-space: nowrap;
}

.wpb-acc-order__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--wpb-primary);
  text-decoration: none;
  white-space: nowrap;
}

.wpb-acc-order__view svg {
  width: 14px;
  height: 14px;
}

.wpb-acc-order__view:hover {
  color: var(--wpb-primary-dark);
}

/* Support & resources rows */
.wpb-acc-res__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--wpb-border-soft);
  text-decoration: none;
}

.wpb-acc-res__row:first-child {
  border-top: 0;
}

.wpb-acc-res__ic {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wpb-acc-res__ic svg {
  width: 17px;
  height: 17px;
}

.wpb-acc-res__row>div {
  min-width: 0;
  flex: 1;
}

.wpb-acc-res__row strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--wpb-secondary);
}

.wpb-acc-res__row span:not(.wpb-acc-res__ic) {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  margin-top: 2px;
}

.wpb-acc-res__go {
  width: 16px;
  height: 16px;
  color: #cbd5e1;
  flex-shrink: 0;
  transition: transform .2s, color .2s;
}

.wpb-acc-res__row:hover .wpb-acc-res__go {
  transform: translateX(3px);
  color: var(--wpb-primary);
}

/* Empty states */
.wpb-acc-empty {
  text-align: center;
  padding: 34px 20px;
}

.wpb-acc-empty svg {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  stroke-width: 1.6;
  margin-bottom: 10px;
}

.wpb-acc-empty p {
  margin: 0 0 16px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

/* ---- Native endpoint content (orders / downloads / addresses / edit account) ---- */
.wpb-account__content>.woocommerce-MyAccount-content {
  min-width: 0;
}

/* My Account notices are styled by the unified notice contract
   (see "Notices & Notifications"); nothing page-specific is needed here. */

.wpb-account__content table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.wpb-account__content table.shop_table th {
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--wpb-text-secondary);
  padding: 13px 16px;
  background: var(--wpb-bg-soft);
  border: 0;
}

.wpb-account__content table.shop_table td {
  padding: 14px 16px;
  font-size: .88rem;
  border: 0;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-account__content .woocommerce-button.button,
.wpb-account__content .woocommerce-Button.button,
.wpb-account__content a.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wpb-secondary);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 9px 15px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}

.wpb-account__content .woocommerce-button.button:hover,
.wpb-account__content .woocommerce-Button.button:hover,
.wpb-account__content a.button:hover {
  background: var(--wpb-primary);
  color: #fff;
}

/* Space out the per-row action buttons (Help / View / Invoice, Download …).
   Woo prints them inline with no gap, so they render touching. Sibling margin
   keeps the <td> a normal table cell while separating and wrapping cleanly. */
.wpb-account__content .woocommerce-orders-table__cell-order-actions a.button,
.wpb-account__content .woocommerce-orders-table__cell-download-file a.button {
  margin-bottom: 5px;
}

.wpb-account__content .woocommerce-orders-table__cell-order-actions a.button+a.button,
.wpb-account__content .woocommerce-orders-table__cell-download-file a.button+a.button {
  margin-left: 8px;
}

/* Payment methods: spacing for the "Add payment method" button under the table */
.wpb-account__content .wpb-pay-add {
  margin-top: 20px;
}

/* ---- Downloads: files grouped by order, one accent hue per order ---- */
.wpb-downloads {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wpb-dl-group {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-left: 4px solid var(--dl-accent);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* Accent palette — one entry per rotating hue (Style DNA accent families).
   --dl-accent = solid rail/dot, --dl-strong = readable text, --dl-tint = band/tile bg. */
.wpb-dl-group--purple {
  --dl-accent: #6C63FF;
  --dl-strong: #4F46E5;
  --dl-tint: rgba(108, 99, 255, .08);
}

.wpb-dl-group--blue {
  --dl-accent: #3b82f6;
  --dl-strong: #2563eb;
  --dl-tint: #eff6ff;
}

.wpb-dl-group--emerald {
  --dl-accent: #10b981;
  --dl-strong: #059669;
  --dl-tint: #ecfdf5;
}

.wpb-dl-group--orange {
  --dl-accent: #f97316;
  --dl-strong: #ea580c;
  --dl-tint: #fff7ed;
}

.wpb-dl-group--rose {
  --dl-accent: #f43f5e;
  --dl-strong: #e11d48;
  --dl-tint: #fff1f2;
}

.wpb-dl-group--amber {
  --dl-accent: #f59e0b;
  --dl-strong: #d97706;
  --dl-tint: #fffbeb;
}

.wpb-dl-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--dl-tint);
  border-bottom: 1px solid var(--wpb-border-soft);
}

.wpb-dl-group__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dl-accent);
  box-shadow: 0 0 0 4px var(--dl-tint);
}

.wpb-dl-group__meta {
  min-width: 0;
}

.wpb-dl-group__meta strong {
  display: block;
  font-size: .9rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-dl-group__meta span {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  margin-top: 1px;
}

.wpb-dl-group__view {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--dl-strong);
  text-decoration: none;
}

.wpb-dl-group__view svg {
  width: 14px;
  height: 14px;
}

.wpb-dl-group__view:hover {
  opacity: .8;
}

.wpb-dl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-dl-rows>.wpb-dl-row:first-child {
  border-top: 0;
}

.wpb-dl-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wpb-dl-row__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--dl-tint);
  color: var(--dl-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wpb-dl-row__icon svg {
  width: 18px;
  height: 18px;
}

.wpb-dl-row__text {
  min-width: 0;
}

.wpb-dl-row__text strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  line-height: 1.35;
}

.wpb-dl-row__text strong a {
  color: inherit;
  text-decoration: none;
}

.wpb-dl-row__text strong a:hover {
  color: var(--dl-strong);
}

.wpb-dl-row__file {
  display: block;
  margin-top: 2px;
  font-size: .74rem;
  color: var(--wpb-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wpb-dl-row__chips {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpb-dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--wpb-bg-soft);
  border: 1px solid var(--wpb-border-soft);
  font-size: .76rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
  white-space: nowrap;
}

.wpb-dl-chip svg {
  width: 13px;
  height: 13px;
  color: var(--dl-strong);
}

.wpb-dl-row__btn {
  flex-shrink: 0;
}

@media (max-width: 620px) {
  .wpb-dl-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .wpb-dl-row__chips {
    flex-wrap: wrap;
  }

  .wpb-dl-row__btn {
    justify-self: start;
  }
}

/* ---- Orders list (myaccount/orders.php) ----
   Board of expandable order cards. Every row carries a status hue as CSS
   vars (--o-rail / --o-tint / --o-strong) that drive the left rail and the
   quick-action tints only — the Pay CTA stays on the brand gradient. */
/* The board sizes itself to its column, not the viewport: inside the account
   grid it sits next to the sidebar, so a viewport media query would call it
   "desktop" while the column is still narrow. Everything below is therefore
   mobile-first with a @container ladder (fallback at the end of the block). */
.wpb-orders {
  display: flex;
  flex-direction: column;
  gap: 16px;
  container-type: inline-size;
  container-name: wpb-orders;
}

/* Filter bar */
.wpb-orders__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 18px;
  align-items: end;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-ofield {
  min-width: 0;
}

.wpb-ofield>label {
  display: block;
  margin: 0 0 7px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
}

.wpb-ofield__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.wpb-ofield__wrap input[type="search"],
.wpb-ofield__wrap select {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 11px 40px 11px 15px;
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  color: var(--wpb-secondary);
  line-height: 1.3;
  transition: border-color .2s, box-shadow .2s;
}

.wpb-ofield--lead .wpb-ofield__wrap select {
  padding-left: 40px;
}

.wpb-ofield__wrap input[type="search"]::placeholder {
  color: #9ca3af;
  font-weight: 500;
}

.wpb-ofield__wrap input[type="search"]:focus,
.wpb-ofield__wrap select:focus {
  outline: 0;
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, .12);
}

.wpb-ofield__lead,
.wpb-ofield__chev {
  position: absolute;
  pointer-events: none;
  width: 16px;
  height: 16px;
  color: var(--wpb-text-secondary);
}

.wpb-ofield__lead {
  left: 14px;
  color: var(--wpb-primary);
}

.wpb-ofield__chev {
  right: 13px;
}

.wpb-ofield__go {
  position: absolute;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--wpb-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.wpb-ofield__go svg {
  width: 16px;
  height: 16px;
}

.wpb-ofield__go:hover {
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
}

.wpb-orders__clear {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  background: #fff;
  color: var(--wpb-secondary);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}

.wpb-orders__clear svg {
  width: 15px;
  height: 15px;
  color: var(--wpb-text-secondary);
}

.wpb-orders__clear:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
  background: rgba(108, 99, 255, .06);
}

.wpb-orders__clear:hover svg {
  color: var(--wpb-primary);
}

.wpb-orders__clear.is-disabled {
  opacity: .5;
  pointer-events: none;
}

/* List */
.wpb-orders__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Rail column + content column; the details panel is a second row of the
   content column, so expanding a row never pushes the cells sideways. */
.wpb-order {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: box-shadow .25s, transform .25s;
}

.wpb-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* Status hues — chrome only (Style DNA §2.1 accent families). */
.wpb-order--violet {
  --o-rail: linear-gradient(160deg, #6C63FF, #4F46E5);
  --o-tint: rgba(108, 99, 255, .09);
  --o-strong: #4F46E5;
}

.wpb-order--blue {
  --o-rail: linear-gradient(160deg, #60a5fa, #3b82f6);
  --o-tint: #eff6ff;
  --o-strong: #2563eb;
}

.wpb-order--emerald {
  --o-rail: linear-gradient(160deg, #34d399, #10b981);
  --o-tint: #ecfdf5;
  --o-strong: #059669;
}

.wpb-order--amber {
  --o-rail: linear-gradient(160deg, #fbbf24, #f59e0b);
  --o-tint: #fffbeb;
  --o-strong: #d97706;
}

.wpb-order--rose {
  --o-rail: linear-gradient(160deg, #fb7185, #f43f5e);
  --o-tint: #fff1f2;
  --o-strong: #e11d48;
}

.wpb-order--slate {
  --o-rail: linear-gradient(160deg, #94a3b8, #64748b);
  --o-tint: #f1f5f9;
  --o-strong: #475569;
}

/* Left rail doubles as the expand toggle */
.wpb-order__rail {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--o-rail);
  color: #fff;
  border-radius: 15px 0 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpb-order__rail svg {
  width: 17px;
  height: 17px;
  transition: transform .25s;
}

.wpb-order.is-open .wpb-order__rail svg {
  transform: rotate(90deg);
}

.wpb-order__rail:focus-visible {
  outline: 2px solid var(--wpb-secondary);
  outline-offset: -4px;
}

/* Narrowest arrangement: order + kebab, then date + status, then total, then
   the action tray. Wider containers re-place these cells (see the ladder). */
.wpb-order__grid {
  grid-column: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 14px 16px;
}

.wpb-order__cell {
  min-width: 0;
}

.wpb-order__cell--id {
  grid-area: 1 / 1 / 2 / 2;
}

.wpb-order__more {
  grid-area: 1 / 2 / 2 / 3;
  justify-self: end;
}

.wpb-order__cell--date {
  grid-area: 2 / 1 / 3 / 2;
}

.wpb-order__cell--status {
  grid-area: 2 / 2 / 3 / 3;
  justify-self: end;
}

.wpb-order__cell--total {
  grid-area: 3 / 1 / 4 / 3;
}

.wpb-order__actions {
  grid-area: 4 / 1 / 5 / 3;
}

.wpb-order__label {
  display: block;
  margin-bottom: 5px;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ca3af;
}

.wpb-order__num {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-primary);
  text-decoration: none;
}

.wpb-order__num:hover {
  color: var(--wpb-primary-dark);
}

.wpb-order__items,
.wpb-order__for {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-order__items svg {
  width: 13px;
  height: 13px;
}

.wpb-order__date {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wpb-order__date>svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--o-strong);
}

.wpb-order__date strong {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  white-space: nowrap;
}

.wpb-order__date em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: .74rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-order .wpb-status {
  gap: 5px;
  padding: 6px 12px;
  text-transform: none;
  letter-spacing: 0;
  font-size: .78rem;
}

.wpb-order .wpb-status svg {
  width: 14px;
  height: 14px;
}

.wpb-order__amt {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-secondary);
  white-space: nowrap;
}

/* Quick actions — grouped in a hairline tray, tinted with the row hue */
.wpb-order__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 6px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 15px;
}

.wpb-oact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 62px;
  padding: 9px 8px;
  border-radius: 12px;
  background: var(--o-tint);
  color: var(--wpb-text-secondary);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform .18s, background .2s, color .2s;
}

.wpb-oact svg {
  width: 16px;
  height: 16px;
  color: var(--o-strong);
}

.wpb-oact:hover {
  transform: translateY(-2px);
  color: var(--o-strong);
}

.wpb-oact--primary {
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  box-shadow: 0 12px 22px -10px rgba(108, 99, 255, .65);
}

.wpb-oact--primary svg,
.wpb-oact--primary:hover {
  color: #fff;
}

.wpb-oact--danger {
  background: #fff1f2;
  color: #e11d48;
}

.wpb-oact--danger svg,
.wpb-oact--danger:hover {
  color: #e11d48;
}

/* Overflow menu */
.wpb-order__more {
  position: relative;
}

.wpb-order__kebab {
  width: 36px;
  height: 36px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 11px;
  background: #fff;
  color: var(--wpb-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
}

.wpb-order__kebab svg {
  width: 17px;
  height: 17px;
}

.wpb-order__kebab:hover,
.wpb-order__kebab[aria-expanded="true"] {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
}

.wpb-order__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 186px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

.wpb-order__menu[hidden] {
  display: none;
}

.wpb-order__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--wpb-secondary);
  text-decoration: none;
}

.wpb-order__menu a svg {
  width: 15px;
  height: 15px;
  color: var(--o-strong);
}

.wpb-order__menu a:hover {
  background: var(--wpb-bg-soft);
  color: var(--wpb-primary);
}

/* Expanded details */
.wpb-order__details {
  grid-column: 2;
  min-width: 0;
  margin: 0 16px;
  padding: 0 0 16px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-order__details[hidden] {
  display: none;
}

.wpb-order-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wpb-border-soft);
}

.wpb-order-line__ic {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--o-tint);
  color: var(--o-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wpb-order-line__ic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wpb-order-line__ic svg {
  width: 18px;
  height: 18px;
}

.wpb-order-line__text {
  flex: 1;
  min-width: 0;
}

.wpb-order-line__text strong {
  display: block;
  font-size: .87rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  line-height: 1.35;
}

.wpb-order-line__text strong a {
  color: inherit;
  text-decoration: none;
}

.wpb-order-line__text strong a:hover {
  color: var(--wpb-primary);
}

.wpb-order-line__text span {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-order-line__amt {
  flex-shrink: 0;
  font-size: .87rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  white-space: nowrap;
}

.wpb-order__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 14px;
}

.wpb-order__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--wpb-bg-soft);
  border: 1px solid var(--wpb-border-soft);
  font-size: .76rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
}

.wpb-order__chip svg {
  width: 13px;
  height: 13px;
  color: var(--o-strong);
}

.wpb-order__detail-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--wpb-primary);
  text-decoration: none;
}

.wpb-order__detail-link svg {
  width: 14px;
  height: 14px;
}

.wpb-order__detail-link:hover {
  color: var(--wpb-primary-dark);
}

/* Foot: count / pager / per page */
.wpb-orders__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 18px;
  padding: 14px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-orders__count {
  margin: 0;
  font-size: .83rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-opage {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wpb-opage a,
.wpb-opage>span {
  min-width: 36px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 11px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}

.wpb-opage svg {
  width: 14px;
  height: 14px;
}

.wpb-opage a:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
}

.wpb-opage .is-current {
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 22px -10px rgba(108, 99, 255, .65);
}

.wpb-opage .is-dots {
  border: 0;
  background: transparent;
  min-width: 20px;
  padding: 0;
}

.wpb-opage .is-disabled {
  opacity: .45;
}

.wpb-orders__per {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-orders__per label {
  margin: 0;
  font-weight: 600;
}

.wpb-orders__per select {
  padding: 8px 34px 8px 13px;
  font-size: .83rem;
}

.wpb-orders__per .wpb-ofield__chev {
  right: 11px;
  width: 14px;
  height: 14px;
}

.wpb-orders__none {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 18px;
}

/* ── Container ladder ──────────────────────────────────────────────────
   Widths are of the .wpb-orders column, not the window. Each step re-places
   the same six children, so no step inherits a track the next one dropped. */

/* Roomier rows: order + date on top, status + total below, tray on its own
   line — the arrangement the account column shows on most desktops. */
@container wpb-orders (min-width: 620px) {
  .wpb-orders__filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .wpb-ofield--search {
    grid-column: 1 / -1;
  }

  .wpb-order__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 14px 18px;
  }

  .wpb-order__cell--date {
    grid-area: 1 / 2 / 2 / 3;
  }

  .wpb-order__more {
    grid-area: 1 / 3 / 2 / 4;
  }

  .wpb-order__cell--status {
    grid-area: 2 / 1 / 3 / 2;
    justify-self: start;
  }

  .wpb-order__cell--total {
    grid-area: 2 / 2 / 3 / 4;
  }

  .wpb-order__actions {
    grid-area: 3 / 1 / 4 / 4;
    justify-self: start;
  }

  .wpb-oact {
    flex: 0 0 auto;
  }
}

/* All four cells on one line; the tray still gets its own row. Status and
   total sit in `auto` tracks so their nowrap pills never get squeezed. */
@container wpb-orders (min-width: 880px) {
  .wpb-orders__filters {
    grid-template-columns: minmax(180px, 1.2fr) minmax(140px, .9fr) minmax(140px, .9fr) auto;
  }

  .wpb-ofield--search {
    grid-column: auto;
  }

  .wpb-order__grid {
    grid-template-columns: minmax(90px, 1fr) minmax(110px, 1fr) auto auto auto;
  }

  .wpb-order__cell--status {
    grid-area: 1 / 3 / 2 / 4;
  }

  .wpb-order__cell--total {
    grid-area: 1 / 4 / 2 / 5;
  }

  .wpb-order__more {
    grid-area: 1 / 5 / 2 / 6;
  }

  .wpb-order__actions {
    grid-area: 2 / 1 / 3 / 6;
  }
}

/* Full single-row board (the reference layout). */
@container wpb-orders (min-width: 1080px) {
  .wpb-orders__filters {
    grid-template-columns: minmax(200px, 1.2fr) minmax(150px, .9fr) minmax(150px, .9fr) auto;
  }

  .wpb-order__grid {
    grid-template-columns: minmax(90px, 1fr) minmax(110px, 1fr) auto auto auto auto;
  }

  .wpb-order__actions {
    grid-area: 1 / 5 / 2 / 6;
  }

  .wpb-order__more {
    grid-area: 1 / 6 / 2 / 7;
  }
}

/* Footer stacks centred until there is room for the three-part bar. */
.wpb-orders__foot {
  justify-content: center;
  text-align: center;
}

@container wpb-orders (min-width: 880px) {
  .wpb-orders__foot {
    justify-content: space-between;
    text-align: left;
  }
}

/* Fallback for engines without container queries: approximate the ladder
   from the viewport, allowing for the ~470px the account sidebar + page
   gutters take out of it. */
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .wpb-order__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .wpb-order__cell--date {
      grid-area: 1 / 2 / 2 / 3;
    }

    .wpb-order__more {
      grid-area: 1 / 3 / 2 / 4;
    }

    .wpb-order__cell--status {
      grid-area: 2 / 1 / 3 / 2;
      justify-self: start;
    }

    .wpb-order__cell--total {
      grid-area: 2 / 2 / 3 / 4;
    }

    .wpb-order__actions {
      grid-area: 3 / 1 / 4 / 4;
      justify-self: start;
    }

    .wpb-oact {
      flex: 0 0 auto;
    }

    .wpb-orders__filters {
      grid-template-columns: minmax(200px, 1.2fr) minmax(150px, .9fr) minmax(150px, .9fr) auto;
    }

    .wpb-orders__foot {
      justify-content: space-between;
      text-align: left;
    }
  }
}

/* ---- Addresses (my-account/edit-address) ---- */

/* Intro line above the two cards. */
.wpb-account__content>p:first-child {
  margin: 0 0 20px;
  font-size: .9rem;
  color: var(--wpb-text-secondary);
}

/* Kill the Woo float grid, use a real grid. */
.wpb-account__content .u-columns.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

/* CRITICAL: WooCommerce's `woocommerce-layout.css` clearfixes this container
   with `.col2-set::before/::after {content:" "; display:table}`. Once the
   container becomes a grid those two pseudo-elements are blockified into real
   grid items and steal cells 1 and 4 — which pushed Billing into the right
   column and Shipping down into row 2. Drop them; grid needs no clearfix. */
.wpb-account__content .u-columns.woocommerce-Addresses::before,
.wpb-account__content .u-columns.woocommerce-Addresses::after {
  content: none;
  display: none;
}

.wpb-account__content .u-columns.woocommerce-Addresses .u-column1,
.wpb-account__content .u-columns.woocommerce-Addresses .u-column2 {
  float: none !important;
  width: 100% !important;
}

.wpb-account__content .woocommerce-Address,
.wpb-account__content .u-columns.woocommerce-Addresses>div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 18px;
  padding: 20px 22px;
}

/* Title row: heading left, Edit/Add action right — Woo floats the link, which
   dropped it onto its own line under the heading. */
.wpb-account__content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wpb-border-soft);
}

/* Same story as the container above: Woo clearfixes this header with
   `.title::after` + `.woocommerce-account .addresses .title::before`
   ({content:" ";display:table}). As a flex row those pseudo-elements become
   flex items and squeeze the heading until it wraps. Needs (0,4,0) to
   out-weigh Woo's (0,3,0) ::before selector. */
.wpb-account .wpb-account__content .woocommerce-Address-title.title::before,
.wpb-account .wpb-account__content .woocommerce-Address-title.title::after {
  content: none;
  display: none;
}

.wpb-account__content .woocommerce-Address-title h2 {
  margin: 0;
}

.wpb-account__content .woocommerce-Address-title a.edit {
  float: none;
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 10px;
  background: #fff;
  color: var(--wpb-secondary);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}

.wpb-account__content .woocommerce-Address-title a.edit:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
  background: rgba(108, 99, 255, .06);
}

.wpb-account__content .woocommerce-Address-title h2,
.wpb-account__content h2,
.wpb-account__content h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-secondary);
}

.wpb-account__content address {
  margin: 0;
  font-style: normal;
  color: var(--wpb-text-secondary);
  font-size: .9rem;
  line-height: 1.7;
}

/* ---- Edit address form (my-account/edit-address/billing|shipping) ---- */
.wpb-account__content .woocommerce-address-fields {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 24px 26px;
}

.wpb-account__content form h2 {
  margin: 0 0 16px;
}

.wpb-account__content .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

/* Beat Woo core's `.woocommerce form .form-row-first{width:47%;float:left}`
   (0,2,1) — each field owns its own grid column instead. */
.wpb-account__content .woocommerce-address-fields .form-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
}

.wpb-account__content .woocommerce-address-fields .form-row-wide {
  grid-column: 1 / -1;
}

.wpb-account__content .woocommerce-address-fields .form-row label {
  margin: 0 0 7px;
  font-size: .82rem;
}

.wpb-account__content .woocommerce-address-fields .form-row label .required {
  color: var(--wpb-primary);
  text-decoration: none;
  border: 0;
}

.wpb-account__content .woocommerce-address-fields .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

.wpb-account__content .woocommerce-address-fields .form-row input.input-text,
.wpb-account__content .woocommerce-address-fields .form-row select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--wpb-secondary);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition: border-color .2s, box-shadow .2s;
}

.wpb-account__content .woocommerce-address-fields .form-row input.input-text:focus,
.wpb-account__content .woocommerce-address-fields .form-row select:focus {
  outline: none;
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, .14);
}

/* select2 (country / state) matched to the native inputs */
.wpb-account__content .woocommerce-address-fields .select2-container,
.wpb-account__content .woocommerce-address-fields .select2-container .select2-selection--single {
  width: 100% !important;
}

.wpb-account__content .woocommerce-address-fields .select2-container .select2-selection--single {
  height: 46px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.wpb-account__content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
  padding-left: 14px;
  color: var(--wpb-secondary);
}

.wpb-account__content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
}

/* Save button — Woo prints a bare `button.button` here, which our
   `.woocommerce-Button.button` rule above does not reach. */
.wpb-account__content .woocommerce-address-fields button.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 28px -12px rgba(108, 99, 255, .55);
  transition: transform .2s;
}

.wpb-account__content .woocommerce-address-fields button.button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #fff;
}

/* Edit account / forms inside content */
.wpb-account__content .woocommerce-EditAccountForm,
.wpb-account__content form.edit-account {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 24px 26px;
}

.wpb-account__content form .form-row label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  margin-bottom: 6px;
  display: block;
}

.wpb-account__content form .form-row input.input-text {
  width: 100%;
  box-sizing: border-box;
}

.wpb-account__content fieldset {
  border: 0;
  border-top: 1px solid var(--wpb-border-soft);
  margin: 24px 0 0;
  padding: 18px 0 0;
}

.wpb-account__content fieldset legend {
  font-size: .95rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  padding-right: 12px;
}

/* ---- Account responsive ---- */
@media (max-width: 1080px) {
  .wpb-acc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .wpb-account__grid {
    grid-template-columns: 1fr;
  }

  .wpb-account-nav {
    position: static;
  }

  .wpb-acc-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .wpb-auth--split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .wpb-auth__divider {
    width: auto;
    height: 1px;
  }

  .wpb-auth--lost {
    grid-template-columns: 1fr;
  }

  .wpb-auth__art {
    display: none;
  }
}

@media (max-width: 640px) {
  .wpb-auth {
    padding: 24px 20px;
  }

  .wpb-acc-welcome {
    grid-template-columns: 1fr;
  }

  .wpb-acc-welcome__art {
    display: none;
  }

  .wpb-acc-stats {
    grid-template-columns: 1fr;
  }

  .wpb-acc-product {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .wpb-acc-product__license {
    grid-column: 2;
  }

  .wpb-acc-product__actions {
    grid-column: 1 / -1;
  }

  .wpb-acc-order {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .wpb-account__content .u-columns.woocommerce-Addresses {
    grid-template-columns: 1fr;
  }

  .wpb-account__content .woocommerce-address-fields {
    padding: 20px 18px;
  }

  .wpb-account__content .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .wpb-account__content .woocommerce-Address-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .wpb-account__content .woocommerce-Address-title a.edit {
    margin-left: 0;
  }
}

/* ============================================================
   SITE FOOTER — 3-part contract (STYLE-DNA §1.5)
   .wpb2-hero (CTA band) · .wpb2-body (columns) · .wpb2-bottom (pay/trust/legal)
   Structure is Tailwind utilities in footer.php; this layer only adds the
   footer font + the hero's ambient glow.
   ============================================================ */
.wpb2-footer {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Ambient glow blobs behind the hero CTA (DNA §6 ambient decoration). */
.wpb2-hero__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(100px);
  pointer-events: none;
}

.wpb2-hero__glow--left {
  top: -170px;
  left: -130px;
}

.wpb2-hero__glow--right {
  right: -150px;
  bottom: -200px;
  background: rgba(255, 255, 255, 0.08);
}

/* Payment logo tiles never squash. */
.wpb2-pay-chip svg {
  flex: 0 0 auto;
}

@media (max-width: 620px) {

  /* Logos only — the labels would wrap the bar into many rows on phones. */
  .wpb2-pay-chip>span {
    display: none;
  }

  .wpb2-pay-chip {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ============================================================
   PRE-CHECKOUT POPUP MODAL (Cart page)
   ============================================================ */
.wpb-precheckout-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.wpb-precheckout-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.wpb-precheckout-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wpb-precheckout-modal__popover {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 28px 28px 24px;
  box-sizing: border-box;
  z-index: 2;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wpb-precheckout-modal.is-open .wpb-precheckout-modal__popover {
  transform: translateY(0) scale(1);
}

.wpb-precheckout-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #F1F5F9;
  color: #64748B;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.wpb-precheckout-modal__close:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.wpb-precheckout-modal__head {
  margin-bottom: 20px;
  padding-right: 28px;
}

.wpb-precheckout-modal__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--wpb-secondary, #0F172A);
  margin: 0 0 6px;
  line-height: 1.25;
}

.wpb-precheckout-modal__sub {
  font-size: 0.875rem;
  color: var(--wpb-text-secondary, #6B7280);
  margin: 0;
  line-height: 1.4;
}

.wpb-precheckout-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wpb-precheckout-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .wpb-precheckout-form__row {
    grid-template-columns: 1fr;
  }
}

.wpb-precheckout-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wpb-precheckout-form__field label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wpb-precheckout-form__field label .required {
  color: #EF4444;
}

.wpb-precheckout-form__field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  background: #F8FAFC;
  font-size: 0.925rem;
  color: #0F172A;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wpb-precheckout-form__field input:focus {
  outline: none;
  border-color: #6C63FF;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

.wpb-precheckout-form__field input.is-valid {
  border-color: #10B981;
}

.wpb-precheckout-modal__error {
  padding: 10px 14px;
  border-radius: 8px;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #991B1B;
  font-size: 0.85rem;
  font-weight: 500;
}

.wpb-precheckout-btn {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 25px -5px rgba(108, 99, 255, 0.4);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.wpb-precheckout-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(108, 99, 255, 0.55);
}

.wpb-precheckout-btn:disabled,
.wpb-precheckout-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  background: #94A3B8;
}

.wpb-spinner {
  animation: wpb-spin 1s linear infinite;
}

@keyframes wpb-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   SHOP MOBILE FILTER DRAWER
   ============================================================ */
.wpb-shop__filter-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  background: #ffffff;
  color: var(--wpb-secondary);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: all .2s;
}

.wpb-shop__filter-btn:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
}

.wpb-filter__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.wpb-filter__close {
  display: none;
  background: transparent;
  border: 0;
  color: var(--wpb-text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: color .2s, background .2s;
}

.wpb-filter__close:hover {
  color: var(--wpb-secondary);
  background: var(--wpb-bg-soft);
}

.wpb-shop__filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  transition: opacity .25s ease;
}

@media (max-width: 979px) {
  .wpb-shop__filter-btn {
    display: inline-flex;
  }

  .wpb-filter__close {
    display: inline-flex;
  }

  .wpb-shop__sidebar.js-filter-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    background: #ffffff;
    z-index: 9999;
    padding: 24px;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .wpb-shop__sidebar.js-filter-drawer.is-open {
    transform: translateX(0);
  }

  .wpb-shop__filter-backdrop.is-open {
    display: block;
    opacity: 1;
  }
}

/* ============================================================
   SINGLE PRODUCT HERO SECTION (.wpb-sp-hero-wrapper)
   Reference Mockup Design: 3D Box, Ambient Orbs, Floating Analytics,
   Breadcrumbs, 6-bullet feature grid, price row, pill buttons, 4-col trust strip.
   ============================================================ */
.wpb-sp-hero-wrapper {
  position: relative;
  padding-bottom: 40px;
}

/* Ambient Floating Orbs */
.wpb-sp-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.wpb-sp-orb {
  position: absolute;
  border-radius: 50%;
}

.wpb-sp-orb--1 {
  top: -40px;
  left: -60px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.15) 0%, rgba(99, 102, 241, 0.03) 60%, transparent 100%);
  filter: blur(40px);
}

.wpb-sp-orb--2 {
  top: 15%;
  right: -40px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
  filter: blur(35px);
}

.wpb-sp-orb--3 {
  bottom: 10%;
  left: 20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
  filter: blur(30px);
}

/* Hero Grid Layout */
.wpb-sp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1060px) {
  .wpb-sp-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── LEFT COLUMN: PRODUCT IMAGE & FLOATING CARDS ── */
.wpb-sp-hero__left {
  position: sticky;
  top: calc(var(--wpb-header-h) + 20px);
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  padding: 10px 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate;
}

/* Force all image containers to be 100% transparent with no cards or shadows */
.wpb-sp-hero__left .wpb-sp-media-stage,
.wpb-sp-hero__left .wpb-sp-product-image,
.wpb-sp-hero__left .images,
.wpb-sp-hero__left .woocommerce-product-gallery {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 660px;
  max-height: 720px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 1;
}

.wpb-sp-floor-glow {
  display: none !important;
}

.wpb-sp-main-img,
.wpb-sp-product-image img,
.wpb-sp-hero__left img {
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.wpb-sp-product-image:hover .wpb-sp-main-img,
.wpb-sp-hero__left:hover img {
  transform: translateY(-4px);
}

/* ── FLOATING ANALYTICS / SOCIAL CARDS ── */
.wpb-sp-card {
  position: absolute;
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  z-index: 2;
  transition: transform .3s ease;
  opacity: 0.85;
}

.wpb-sp-card:hover {
  transform: translateY(-4px);
  transition: transform .3s ease;
  opacity: 1;
}

/* Floating Card 1: Threats Blocked */
.wpb-sp-card--threats {
  top: 0%;
  left: 0px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.wpb-sp-card__ic--blue {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wpb-sp-card__label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: #64748b;
}

.wpb-sp-card__val-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpb-sp-card__num {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}

.wpb-sp-card__badge--up {
  font-size: .68rem;
  font-weight: 700;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 7px;
  border-radius: 999px;
}

.wpb-sp-card__sub {
  display: block;
  font-size: .68rem;
  color: #94a3b8;
}

/* Floating Card 2: Security Score Gauge */
.wpb-sp-card--score {
  bottom: 22%;
  left: -32px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.wpb-sp-card__gauge {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wpb-sp-card__percent {
  position: absolute;
  font-size: .75rem;
  font-weight: 800;
  color: #0f172a;
}

.wpb-sp-card__status {
  display: block;
  font-size: .92rem;
  font-weight: 800;
  color: #16a34a;
}

/* Floating Card 3: Social Avatars Banner */
.wpb-sp-card--social {
  bottom: -35px;
  left: 25%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  padding: 10px 20px;
  white-space: nowrap;
}

.wpb-sp-card--social:hover {
  transform: translateX(-50%) translateY(-4px);
}

.wpb-sp-card__avatars {
  display: flex;
  align-items: center;
}

.wpb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background-size: cover;
  background-position: center;
  margin-left: -8px;
}

.wpb-avatar:first-child {
  margin-left: 0;
}

.wpb-sp-card__social-text strong {
  display: block;
  font-size: .84rem;
  color: #0f172a;
}

.wpb-sp-card__social-text span {
  display: block;
  font-size: .72rem;
  color: #64748b;
}

.wpb-sp-card__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 640px) {

  .wpb-sp-card--threats,
  .wpb-sp-card--score {
    display: none;
  }
}

/* ── RIGHT COLUMN: PRODUCT DETAILS & CTA ── */
.wpb-sp-hero__right {
  display: flex;
  flex-direction: column;
}

/* Breadcrumbs */
.wpb-sp-crumbs {
  font-size: .88rem;
  font-weight: 600;
  color: #4f46e5;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wpb-sp-crumbs a {
  color: #4f46e5;
  text-decoration: none;
}

.wpb-sp-crumbs a:hover {
  text-decoration: underline;
}

.wpb-sp-crumbs .sep {
  color: #a5b4fc;
  font-size: .8rem;
}

.wpb-sp-crumbs .current {
  color: #64748b;
  font-weight: 500;
}

/* H1 Title */
.wpb-sp-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}

@media (max-width: 640px) {
  .wpb-sp-title {
    font-size: 1.85rem;
  }
}

/* Subtitle Paragraph */
.wpb-sp-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 22px;
}

/* Ratings & Trust Bar */
.wpb-sp-trust-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  font-size: .9rem;
  font-weight: 600;
  color: #475569;
  flex-wrap: wrap;
}

.wpb-sp-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpb-sp-rating__val {
  color: #0f172a;
}

.wpb-sp-rating__link {
  color: #64748b;
  text-decoration: none;
}

.wpb-sp-rating__link:hover {
  color: #4f46e5;
}

.wpb-sp-trust-bar__sep {
  color: #cbd5e1;
}

.wpb-sp-trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #475569;
}

.wpb-sp-trust-badge svg {
  color: #4f46e5;
}

/* Feature Bullets Grid (2 Columns) */
.wpb-sp-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-bottom: 32px;
}

@media (max-width: 580px) {
  .wpb-sp-features-grid {
    grid-template-columns: 1fr;
  }
}

/* Expandable wrapper: holds the grid plus its bottom fade toggle.
   The wrapper owns the outer spacing so the fade can never overlap the price row. */
.wpb-sp-features {
  position: relative;
  margin-bottom: 32px;
}

.wpb-sp-features>.wpb-sp-features-grid {
  margin-bottom: 0;
}

/* Collapsed height is set inline by JS from the 8th item's measured position. */
.wpb-sp-features-grid--expandable {
  overflow: hidden;
  padding-bottom: 30px;
  /* breathing room under the last row so the fade never sits on the text */
  transition: max-height .45s cubic-bezier(.4, 0, .2, 1);
}

/* Full-width clickable fade — a real button with all button chrome removed. */
.wpb-sp-features__more {
  display: none;
  /* revealed only once JS has measured; without JS the full list simply shows */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 8px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  color: #94a3b8;
  cursor: pointer;
  /* Out of sight until the pointer enters the feature list (or a key lands on
     the button); it stays laid out and clickable so a tap on a hoverless device
     still toggles. */
  opacity: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .72) 45%, #fff 80%);
  /* The vertical gradient blends the band into the page top-to-bottom; this mask
     does the same on the horizontal axis so its left and right edges dissolve
     into the page background instead of ending on a straight vertical seam.
     Set here (not per state) so collapsed and expanded both inherit it. */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12%, #000 88%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12%, #000 88%, rgba(0, 0, 0, 0) 100%);
  transition: height .45s cubic-bezier(.4, 0, .2, 1), color .2s ease, opacity .25s ease;
}

.wpb-sp-features.is-ready .wpb-sp-features__more {
  display: flex;
}

/* The wrapper spans the grid and the button, so one hover rule covers both
   surfaces the user can point at. :focus-within keeps it reachable by keyboard. */
.wpb-sp-features.is-ready:hover .wpb-sp-features__more,
.wpb-sp-features.is-ready:focus-within .wpb-sp-features__more {
  opacity: 1;
}

/* Touch and other hoverless pointers never fire the rule above — show it there. */
@media (hover: none) {

  .wpb-sp-features.is-ready .wpb-sp-features__more {
    opacity: 1;
  }
}

.wpb-sp-features__more:hover {
  color: #6c63ff;
}

.wpb-sp-features__more:focus {
  outline: none;
}

.wpb-sp-features__more:focus-visible {
  outline: 2px solid #6c63ff;
  outline-offset: -3px;
  border-radius: 10px;
  color: #6c63ff;
}

.wpb-sp-features__chev {
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), translate .2s ease;
}

/* Attention nudge: a double hop, then a long rest, so it reads as an invitation
   rather than a jitter. Animates `translate` (not `transform`) so it composes
   with the expanded-state rotation instead of overriding it. */
@keyframes wpb-sp-chev-nudge {

  0%,
  40%,
  100% {
    translate: 0 0;
  }

  10% {
    translate: 0 5px;
  }

  20% {
    translate: 0 0;
  }

  28% {
    translate: 0 3px;
  }
}

/* Only while there is something still hidden — and it stops once the user has
   found the control, since the hint has done its job by then. */
.wpb-sp-features.is-ready:not(.is-expanded) .wpb-sp-features__chev {
  animation: wpb-sp-chev-nudge 3s ease-in-out infinite;
}

/* Selector mirrors the rule above so it wins on specificity, not source order. */
.wpb-sp-features.is-ready:not(.is-expanded) .wpb-sp-features__more:hover .wpb-sp-features__chev,
.wpb-sp-features.is-ready:not(.is-expanded) .wpb-sp-features__more:focus-visible .wpb-sp-features__chev {
  animation: none;
}

/* Expanded: shorter fade, still clickable, chevron flipped up. */
.wpb-sp-features.is-expanded .wpb-sp-features__more {
  height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 55%, #fff 100%);
}

.wpb-sp-features.is-expanded .wpb-sp-features__chev {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {

  .wpb-sp-features-grid--expandable,
  .wpb-sp-features__more,
  .wpb-sp-features__chev {
    transition: none;
  }

  .wpb-sp-features.is-ready:not(.is-expanded) .wpb-sp-features__chev {
    animation: none;
  }
}

.wpb-sp-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  font-weight: 600;
  color: #1e293b;
  min-width: 0;
  /* let long bullets wrap instead of stretching the track */
}

.wpb-sp-feat>span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
}

.wpb-sp-feat__ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #eff6ff;
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Emoji icons pulled from the product's own bullet text */
  font-size: 18px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-weight: 400;
}

.wpb-sp-feat__ic svg {
  width: 18px;
  height: 18px;
}

/* ── PURCHASE PANEL ────────────────────────────────────────────────────────
   One card, read top to bottom: licence cards → "one-time payment" line →
   full-width CTA → "secure checkout" line → payment marks. The panel is a
   query container so the card grid reacts to the hero column it sits in, not
   to the viewport (STYLE-DNA §2.6). */
.wpb-sp-buy {
  container-type: inline-size;
  container-name: wpb-buy;
  display: grid;
  gap: 16px;
  background: #ffffff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* Only the types whose CTA cannot carry a price print a headline (see
   content-single-product.php) — a variable product's cards carry their own. */
.wpb-sp-buy__head {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wpb-border-soft);
}

/* Price & Discount Row */
.wpb-sp-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.wpb-sp-price {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: font-size .2s ease, color .2s ease;
}

.wpb-sp-price-old {
  font-size: 1.25rem;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 500;
}

.wpb-sp-discount-pill {
  background: #dcfce7;
  color: #15803d;
  font-weight: 700;
  font-size: .82rem;
  padding: 4px 12px;
  border-radius: 999px;
}

/* Add-to-cart form row — the form is the panel's full-width middle band. */
.wpb-sp-actions {
  display: grid;
  gap: 14px;
  margin: 0;
}

.wpb-sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  min-height: 52px;
}

.wpb-sp-btn--primary {
  padding: 14px 34px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #ffffff;
  box-shadow: 0 12px 28px -6px rgba(108, 99, 255, 0.45);
}

.wpb-sp-btn--primary:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 16px 36px -6px rgba(108, 99, 255, 0.6);
}

/* The purchase panel's CTA spans the card; it is the only thing on its line
   unless the product also offers a quantity. */
.wpb-sp-btn--block {
  width: 100%;
  padding: 15px 28px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

@media (max-width: 480px) {
  .wpb-sp-btn {
    width: 100%;
  }
}

/* The assurance line is printed by the add-to-cart template so it can sit
   inside the form, beside the picker's heading. It cycles through several
   phrases (theme.js): every phrase is in the DOM and they all share one grid
   cell, so the box is as wide and tall as the longest of them and nothing
   around it moves as they swap. */
.wpb-sp-assure {
  display: grid;
  justify-items: center;
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-sp-assure__item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .2s ease;
}

/* The incoming phrase waits for the outgoing one to clear. They are stacked in
   the same cell and are different lengths, so a true crossfade would show the
   two of them overlapping as a smudge for the length of the fade. */
.wpb-sp-assure__item.is-on {
  opacity: 1;
  transition: opacity .25s ease .2s;
}

.wpb-sp-assure svg {
  flex-shrink: 0;
  color: #94a3b8;
}

.wpb-sp-buy__foot {
  display: grid;
  justify-items: center;
  gap: 12px;
}

/* Printed at its intrinsic size (width/height attributes come from the file
   itself); the cap only stops it overflowing a panel narrower than the art. */
.wpb-sp-pay {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── LICENCE PICKER ────────────────────────────────────────────────────────
   Radio cards, one per variation, driven by theme.js — see
   `woocommerce/single-product/add-to-cart/variable.php` for why the `<select>`
   is still in the markup underneath them. */
/* Heading left, the "one-time payment" note right — it is fine print next to a
   heading here, so it drops a size and loses the centring the standalone line
   has. Wraps under the heading when the panel is too narrow for both. */
.wpb-sp-licence__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 12px;
}

.wpb-sp-licence__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--wpb-secondary);
}

.wpb-sp-licence__head .wpb-sp-assure {
  font-size: .74rem;
  justify-items: end;
}

.wpb-sp-licence__head .wpb-sp-assure__item {
  gap: 6px;
}

.wpb-sp-licence__head .wpb-sp-assure svg {
  width: 13px;
  height: 13px;
}

.wpb-sp-licence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 12px;
}

/* The top margin is on every card, not just the badged one, so the badge can
   sit above the border it belongs to without knocking that card out of line. */
.wpb-sp-lic {
  position: relative;
  /* Radio + name share row 1 and centre as a pair; the price spans row 2. The
     `1fr` on row 1 pins every card's price to the bottom, so a name that wraps
     to two lines does not push its price out of line with the row. */
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  grid-template-rows: 1fr auto;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 14px 10px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.wpb-sp-lic:hover {
  border-color: #cbd5e1;
}

.wpb-sp-lic.is-selected,
.wpb-sp-lic:has(.wpb-sp-lic__input:checked) {
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, .12);
}

.wpb-sp-lic.is-unavailable {
  opacity: .45;
  cursor: not-allowed;
  background: var(--wpb-bg-soft);
}

.wpb-sp-lic__input {
  grid-row: 1;
  grid-column: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  background: #ffffff;
  -webkit-appearance: none;
  appearance: none;
  cursor: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wpb-sp-lic__input:checked {
  border-color: var(--wpb-primary);
  /* Inset ring draws the dot without a second element. */
  box-shadow: inset 0 0 0 3.5px #ffffff, inset 0 0 0 9px var(--wpb-primary);
}

.wpb-sp-lic__input:focus-visible {
  outline: 2px solid var(--wpb-primary);
  outline-offset: 2px;
}

/* Radio and label share the first row; the price sits under both. */
.wpb-sp-lic__name {
  grid-row: 1;
  grid-column: 2;
  font-size: .92rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  line-height: 1.2;
}

.wpb-sp-lic__price {
  grid-row: 2;
  grid-column: 1 / -1;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wpb-secondary);
  line-height: 1.1;
}

.wpb-sp-lic__price del {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  opacity: .7;
}

.wpb-sp-lic__price .amount {
  font: inherit;
  color: inherit;
}

.wpb-sp-licence__reset {
  margin: 10px 0 0;
  text-align: right;
}

.wpb-sp-lic__badge {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6C63FF, #4F46E5);
  color: #ffffff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(108, 99, 255, .8);
}

/* The `<select>` stays in the DOM as Woo's source of truth; the cards write to
   it. It is out of sight but still focusable, so nothing traps a keyboard user
   if the cards ever fail to bind. The `<noscript>` block in variable.php
   reverses this and hides the cards instead. */
.wpb-sp-var__control--proxied {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@container wpb-buy (max-width: 360px) {
  .wpb-sp-licence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 4-Column Micro Trust Strip */
.wpb-sp-trust-strip {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 18px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

@media (max-width: 768px) {
  .wpb-sp-trust-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

.wpb-sp-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
}

.wpb-sp-trust-item svg {
  color: #4f46e5;
  flex-shrink: 0;
}

.wpb-sp-trust-item strong {
  display: block;
  color: #0f172a;
  line-height: 1.2;
}

.wpb-sp-trust-item span {
  display: block;
  color: #64748b;
  line-height: 1.2;
}

/* Bottom Guarantee Pill Notice Bar */
.wpb-sp-guarantee-bar {
  background: rgba(108, 99, 255, 0.06);
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .88rem;
  color: #4f46e5;
  flex-wrap: wrap;
  gap: 8px;
}

.wpb-sp-guarantee-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpb-sp-guarantee-bar__left svg {
  color: #4f46e5;
}

.wpb-sp-guarantee-bar__right {
  color: #64748b;
  font-size: .84rem;
}

/* ── TABBED PRODUCT DETAILS ── */
.wpb-sp__tabs-section {
  background: #ffffff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 24px;
  padding: 32px 36px;
  margin-bottom: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.wpb-sp-tabs__nav {
  list-style: none;
  margin: 0 0 32px;
  padding: 0 0 16px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--wpb-border-soft);
  flex-wrap: wrap;
}

.wpb-sp-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--wpb-text-secondary);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: all .2s;
}

.wpb-sp-tabs__btn:hover {
  color: var(--wpb-secondary);
  background: var(--wpb-bg-soft);
}

.wpb-sp-tabs__item.is-active .wpb-sp-tabs__btn {
  color: var(--wpb-primary);
  background: rgba(108, 99, 255, 0.1);
  border-color: rgba(108, 99, 255, 0.2);
}

.wpb-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.wpb-spec-row {
  background: var(--wpb-bg-soft);
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--wpb-border-soft);
}

.wpb-spec-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wpb-text-secondary);
  margin-bottom: 4px;
}

.wpb-spec-val {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

/* Related / upsell products header override.
   Upsells arrive via woocommerce_after_single_product_summary and render through
   content-product.php, so they inherit the card grid and only need this heading. */
.wpb-sp-hero-wrapper .related.products>h2,
.wpb-sp-hero-wrapper .up-sells.products>h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--wpb-secondary);
  margin: 40px 0 24px;
  letter-spacing: -0.01em;
}

/* Restored summary hooks land here — collapses to nothing when no plugin renders. */
.wpb-sp-summary-hooks:empty {
  display: none;
}

/* Priority slots for woocommerce_single_product_summary, fired down the right
   column by wpbuy_single_summary_slot(). Most are empty on most sites. */
.wpb-sp-hook:empty {
  display: none;
}

.wpb-sp-hook--before-add-to-cart:not(:empty) {
  margin-bottom: 16px;
}

.wpb-sp-hook--after-add-to-cart:not(:empty) {
  margin-top: 16px;
}

/* =========================================================================
   NEW COMPONENTS — added with the template-coverage build-out.
   Sections, in order:
     1. Single product add-to-cart (.wpb-sp-cart)
     2. Mini cart + off-canvas drawer (.wpb-drawer, .wpb-mini)
     3. Account: view order, addresses, forms, payment methods
     4. Order pay page (.wpb-pay)
     5. Archives: category / tag / author / search / generic
   Tokens only — see STYLE-DNA.md §2.
   ========================================================================= */


/* ── 1. SINGLE PRODUCT — ADD TO CART ─────────────────────────────────────
   `woocommerce_template_single_add_to_cart()` renders inside `.wpb-sp-actions`,
   so the form itself must behave like one flex item next to the outline
   button. The stepper buttons sit *inside* Woo's `.quantity` wrapper (see
   wpbuy_sp_quantity_input) so hiding `.quantity` hides the whole control. */

.wpb-sp-cart {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}

/* Woo's own `div.product form.cart { margin-bottom: 2em }` out-specifies the
   single class above and was the largest of the gaps under the button — the
   theme keeps `woocommerce-general` enqueued, so every rule in this section
   that fights core is deliberately compounded past it. */
.wpb-sp-buy .wpb-sp-actions form.cart.wpb-sp-cart {
  margin: 0;
}

/* Variable products stack: licence cards → reassurance line → CTA. Woo slides
   `.single_variation_wrap` open and shut as the selection changes, so it has to
   be a row of its own rather than a column beside the picker. */
.wpb-sp-cart--variable {
  display: grid;
  gap: 14px;
  width: 100%;
}

.wpb-sp-cart--variable>.wpb-sp-vars,
.wpb-sp-cart--variable>.single_variation_wrap {
  min-width: 0;
}

/* Live region for the reset link: keep it announced but out of the grid flow,
   otherwise it claims a cell and re-opens the gap this layout closes. */
.wpb-sp-cart--variable>.reset_variations_alert {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.wpb-sp-cart--grouped {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 18px;
}

.wpb-sp-cart .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin: 0;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* Sold-individually products get a lone hidden input — Woo still prints the
   `.quantity` wrapper, which would otherwise sit next to the button as an empty
   bordered sliver. */
.wpb-sp-cart .quantity:not(:has(input.qty:not([type="hidden"]))) {
  display: none;
}

.wpb-sp-cart .quantity label.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wpb-sp-cart .quantity input.qty {
  width: 52px;
  height: 50px;
  border: 0;
  border-left: 1px solid var(--wpb-border-soft);
  border-right: 1px solid var(--wpb-border-soft);
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--wpb-secondary);
  background: #fff;
  -moz-appearance: textfield;
  border-radius: 0;
}

.wpb-sp-cart .quantity input.qty::-webkit-outer-spin-button,
.wpb-sp-cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.wpb-sp-cart .quantity .wpb-qty__btn {
  width: 40px;
  height: 50px;
}

/* Woo prints the stock line above the form. */
.wpb-sp-hero .stock {
  margin: 0 0 12px;
  font-size: .9rem;
  font-weight: 700;
}

.wpb-sp-hero .stock.in-stock {
  color: #15803d;
}

.wpb-sp-hero .stock.out-of-stock {
  color: #b91c1c;
}

/* Variation attribute rows */
.wpb-sp-vars {
  display: grid;
  gap: 14px;
  width: 100%;
}

/* Core adds `margin-bottom: 1em; width: 100%` to `.variations`. */
.wpb-sp-buy .wpb-sp-actions .wpb-sp-cart .variations.wpb-sp-vars {
  margin: 0;
  width: auto;
}

.wpb-sp-var {
  display: grid;
  gap: 7px;
}

.wpb-sp-var__label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wpb-text-secondary);
}

.wpb-sp-var__control {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wpb-sp-var__control select {
  flex: 1 1 200px;
  min-height: 48px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  -webkit-appearance: none;
  appearance: none;
  font-size: .95rem;
  font-weight: 600;
  color: var(--wpb-secondary);
  cursor: pointer;
}

/* Core's `form.cart .variations select` ships its own chevron sprite, a 75%
   min-width and a 1em right margin; this compound wins so the control keeps the
   theme's chrome and can be sized by the grid. */
.wpb-sp-buy .wpb-sp-actions .wpb-sp-cart .wpb-sp-vars .wpb-sp-var__control select {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 40px 0 16px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.wpb-sp-var__control select:focus-visible {
  outline: 2px solid var(--wpb-primary);
  outline-offset: 1px;
}

.wpb-sp-cart .reset_variations {
  font-size: .82rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
  text-decoration: none;
}

.wpb-sp-cart .reset_variations:hover {
  color: var(--wpb-primary);
}

/* Woo hides the reset link until a variation is chosen; keep it out of flow. */
.wpb-sp-cart .reset_variations[style*="visibility: hidden"] {
  display: none;
}

/* Selected variation: price first, its description trailing on the same line
   (both are short by design), so the summary costs one row instead of three. */
.wpb-sp-cart .single_variation {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
}

.wpb-sp-cart .woocommerce-variation-price {
  order: 1;
}

/* With the card picker the selected price is already on the card and on the
   CTA, so a third copy above the button is noise. theme.js still reads it —
   `display: none` keeps it in the DOM. The dropdown fallback keeps it visible,
   as it is the only place the price appears there. */
.wpb-sp-cart--cards .woocommerce-variation-price {
  display: none;
}

/* What is left of the summary — usually just the variation description — is
   centred so it reads as part of the panel's stack of centred lines rather
   than as a stray caption above the CTA. */
.wpb-sp-cart--cards .single_variation {
  justify-content: center;
  text-align: center;
}

.wpb-sp-cart .woocommerce-variation-description {
  order: 2;
  font-size: .82rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
}

.wpb-sp-cart .woocommerce-variation-availability {
  order: 3;
  flex: 1 0 100%;
}

.wpb-sp-cart .single_variation .price {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wpb-secondary);
}

.wpb-sp-cart .single_variation .price del {
  font-size: .78rem;
  font-weight: 600;
  color: var(--wpb-text-secondary);
  opacity: .75;
  margin-right: 2px;
}

/* Woo wraps the current amount in <ins>, which the UA underlines. */
.wpb-sp-cart .single_variation .price ins {
  text-decoration: none;
  background: transparent;
}

/* Core adds `margin-bottom: 1em` to this paragraph. */
.wpb-sp-buy .wpb-sp-actions .wpb-sp-cart .single_variation .woocommerce-variation-description p {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* Quantity (when the product offers one) then the CTA, which takes whatever is
   left. Licence products are usually sold individually, in which case the
   `.quantity` rule above hides the empty wrapper and the button spans the row
   on its own — the mockup's full-width bar. */
.wpb-sp-cart__row,
.wpb-sp-cart .woocommerce-variation-add-to-cart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 0;
}

/* A hidden quantity leaves one visible child; without this the CTA would sit in
   the `auto` track and shrink to its text. */
.wpb-sp-cart .woocommerce-variation-add-to-cart .wpb-sp-btn--block {
  grid-column: -2 / -1;
}

.wpb-sp-cart .woocommerce-variation-add-to-cart--disabled .wpb-sp-btn--primary {
  opacity: .5;
  pointer-events: none;
  box-shadow: none;
}

.wpb-sp-cart .wc-no-matching-variations {
  width: 100%;
}

/* Grouped child table */
.wpb-sp-group {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.wpb-sp-group td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--wpb-border-soft);
  vertical-align: middle;
}

.wpb-sp-group tr:last-child td {
  border-bottom: 0;
}

.wpb-sp-group .woocommerce-grouped-product-list-item__label a {
  font-weight: 700;
  color: var(--wpb-secondary);
  text-decoration: none;
}

.wpb-sp-group .woocommerce-grouped-product-list-item__label a:hover {
  color: var(--wpb-primary);
}

.wpb-sp-group .woocommerce-grouped-product-list-item__price {
  text-align: right;
  font-weight: 800;
  color: var(--wpb-secondary);
  white-space: nowrap;
}

.wpb-sp-price--html .amount {
  font: inherit;
  color: inherit;
}

.wpb-sp-price--html del {
  opacity: .5;
  font-size: .7em;
  margin-right: 6px;
}

/* Narrow panel: the quantity stops sharing the CTA's row. Keyed to the panel's
   own width, since it sits in the hero's right column at desktop and full-bleed
   below 1060px — the viewport says nothing useful about it. */
@container wpb-buy (max-width: 380px) {

  .wpb-sp-cart__row,
  .wpb-sp-cart .woocommerce-variation-add-to-cart {
    grid-template-columns: minmax(0, 1fr);
  }

  .wpb-sp-cart .woocommerce-variation-add-to-cart .wpb-sp-btn--block {
    grid-column: 1;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 470px) {
    .wpb-sp-licence {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wpb-sp-cart__row,
    .wpb-sp-cart .woocommerce-variation-add-to-cart {
      grid-template-columns: minmax(0, 1fr);
    }

    .wpb-sp-cart .woocommerce-variation-add-to-cart .wpb-sp-btn--block {
      grid-column: 1;
    }
  }
}

@media (max-width: 560px) {
  .wpb-sp-buy {
    padding: 16px;
  }

  .wpb-sp-cart {
    width: 100%;
  }

  .wpb-sp-cart .wpb-sp-btn--primary {
    flex: 1 1 auto;
  }
}


/* ── 2. MINI CART + OFF-CANVAS DRAWER ────────────────────────────────────
   The panel body is Woo's `.widget_shopping_cart_content` fragment and is
   replaced wholesale on every add/remove, so nothing here may depend on JS
   having decorated the markup. */

.wpb-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 998;
}

.wpb-drawer-backdrop.is-open {
  opacity: 1;
}

.wpb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -20px 0 60px rgba(15, 23, 42, .18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  z-index: 999;
}

.wpb-drawer.is-open {
  transform: translateX(0);
}

body.wpb-drawer-lock {
  overflow: hidden;
}

.wpb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--wpb-border-soft);
  flex: 0 0 auto;
}

.wpb-drawer__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-secondary);
}

.wpb-drawer__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--wpb-accent);
  color: #04242a;
  font-size: .72rem;
  font-weight: 800;
}

.wpb-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 10px;
  background: #fff;
  color: var(--wpb-text-secondary);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.wpb-drawer__close:hover {
  background: var(--wpb-bg-soft);
  color: var(--wpb-secondary);
}

.wpb-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wpb-mini,
.wpb-drawer .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.wpb-mini__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1 1 auto;
}

.wpb-mini-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--wpb-border-soft);
}

.wpb-mini-item:last-child {
  border-bottom: 0;
}

.wpb-mini-item__thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--wpb-border-soft);
  background: var(--wpb-bg-soft);
  display: block;
}

.wpb-mini-item__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wpb-mini-item__title a,
.wpb-mini-item__title {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wpb-secondary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wpb-mini-item__title a:hover {
  color: var(--wpb-primary);
}

.wpb-mini-item__meta,
.wpb-mini-item__meta p {
  font-size: .78rem;
  color: var(--wpb-text-secondary);
  margin: 0;
}

.wpb-mini-item__qty {
  font-size: .84rem;
  font-weight: 700;
  color: var(--wpb-primary);
}

.wpb-mini-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--wpb-bg-soft);
  color: var(--wpb-text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.wpb-mini-item__remove:hover {
  background: #FEF2F2;
  color: #b91c1c;
}

.wpb-mini__foot {
  flex: 0 0 auto;
  padding: 18px 22px 22px;
  border-top: 1px solid var(--wpb-border-soft);
  background: var(--wpb-bg-soft);
}

.wpb-mini__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
}

.wpb-mini__total .amount {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-mini__note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  font-size: .76rem;
  color: var(--wpb-text-secondary);
}

.wpb-mini__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

.wpb-mini__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.wpb-mini__btn--primary {
  background: linear-gradient(135deg, var(--wpb-primary), var(--wpb-primary-dark));
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(108, 99, 255, .5);
}

.wpb-mini__btn--primary:hover {
  color: #fff;
  transform: translateY(-1px);
}

.wpb-mini__btn--ghost {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  color: var(--wpb-secondary);
}

.wpb-mini__btn--ghost:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
}

.wpb-mini__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 56px 30px;
  text-align: center;
}

.wpb-mini__empty-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: var(--wpb-bg-soft);
  color: var(--wpb-primary);
  margin-bottom: 6px;
}

.wpb-mini__empty strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-mini__empty span {
  font-size: .88rem;
  color: var(--wpb-text-secondary);
  max-width: 34ch;
}

.wpb-mini__empty .wpb-mini__btn {
  margin-top: 14px;
  padding: 0 26px;
}

@media (max-width: 480px) {
  .wpb-drawer {
    width: 100vw;
  }
}


/* ── 3. ACCOUNT — VIEW ORDER, ADDRESSES, FORMS, PAYMENT METHODS ──────────
   These render inside `.wpb-account__content`, a sidebar-constrained column,
   so they step at *container* widths (Style DNA §2.6). */

.wpb-vo,
.wpb-addr,
.wpb-paym {
  container-type: inline-size;
  container-name: wpb-acc;
}

.wpb-vo__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
  text-decoration: none;
}

.wpb-vo__back:hover {
  color: var(--wpb-primary);
}

.wpb-vo__back i {
  width: 15px;
  height: 15px;
}

.wpb-vo__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 24px 22px 30px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
}

.wpb-vo__rail {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6px;
  background: var(--o-rail, var(--wpb-primary));
}

.wpb-vo__title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wpb-secondary);
}

.wpb-vo__lead {
  margin: 0;
  font-size: .88rem;
  color: var(--wpb-text-secondary);
}

.wpb-vo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.wpb-vo__panel {
  margin-bottom: 18px;
}

.wpb-vo__totals {
  padding: 16px 20px;
  background: var(--wpb-bg-soft);
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-vo__totals .wpb-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  font-size: .9rem;
  color: var(--wpb-text-secondary);
}

.wpb-vo__totals .wpb-summary__row--grand {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--wpb-border-soft);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-order-line__meta,
.wpb-order-line__meta p {
  margin: 3px 0 0;
  font-size: .78rem;
  color: var(--wpb-text-secondary);
}

.wpb-vo__note {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--wpb-border-soft);
  background: #F4F4FF;
}

.wpb-vo__note i {
  width: 18px;
  height: 18px;
  color: var(--wpb-primary);
  flex: 0 0 auto;
  margin-top: 2px;
}

.wpb-vo__note strong {
  display: block;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wpb-secondary);
  margin-bottom: 3px;
}

.wpb-vo__note p {
  margin: 0;
  font-size: .88rem;
  color: var(--wpb-text-secondary);
}

/* Order-updates timeline */
.wpb-vo__notes {
  list-style: none;
  margin: 0;
  padding: 8px 20px 20px 8px;
}

.wpb-vo__note-item {
  position: relative;
  padding: 0 0 18px 26px;
  border-left: 2px solid var(--wpb-border-soft);
  margin-left: 12px;
}

.wpb-vo__note-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.wpb-vo__note-dot {
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--wpb-primary);
}

.wpb-vo__note-date {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wpb-text-secondary);
  margin-bottom: 4px;
}

.wpb-vo__note-body p {
  margin: 0;
  font-size: .9rem;
  color: var(--wpb-secondary);
}

/* Address cards — shared by view-order and the Addresses endpoint. */
.wpb-addr__lead {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: .88rem;
  color: var(--wpb-text-secondary);
}

.wpb-addr__lead i {
  width: 16px;
  height: 16px;
  color: var(--wpb-primary);
  flex: 0 0 auto;
}

.wpb-addr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 20px;
}

.wpb-addr .wpb-addr-grid {
  padding: 0;
}

.wpb-addr-card {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 16px;
  padding: 18px 20px;
}

.wpb-addr-card.is-empty {
  background: var(--wpb-bg-soft);
  border-style: dashed;
}

.wpb-addr-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.wpb-addr-card__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wpb-text-secondary);
}

.wpb-addr-card__label i {
  width: 15px;
  height: 15px;
  color: var(--wpb-primary);
}

.wpb-addr-card__edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--wpb-primary);
  text-decoration: none;
}

.wpb-addr-card__edit:hover {
  color: var(--wpb-primary-dark);
}

.wpb-addr-card__edit i {
  width: 14px;
  height: 14px;
}

.wpb-addr-card address {
  margin: 0;
  font-style: normal;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--wpb-secondary);
}

.wpb-addr-card__none {
  color: var(--wpb-text-secondary);
  font-size: .88rem;
}

.wpb-addr-card__line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: .86rem;
  color: var(--wpb-text-secondary);
}

.wpb-addr-card__line i {
  width: 14px;
  height: 14px;
}

/* Account forms — edit address, account details */
.wpb-acc-form__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 18px;
  padding: 20px;
  border: 0;
  margin: 0;
}

.wpb-acc-form__fields .form-row {
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
  display: block;
}

.wpb-acc-form__fields .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wpb-text-secondary);
}

.wpb-acc-form__fields .form-row .required {
  color: #e11d48;
  text-decoration: none;
}

.wpb-acc-form__fields input[type="text"],
.wpb-acc-form__fields input[type="email"],
.wpb-acc-form__fields input[type="tel"],
.wpb-acc-form__fields input[type="password"],
.wpb-acc-form__fields select,
.wpb-acc-form__fields .select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  background: #fff;
  font-size: .95rem;
  color: var(--wpb-secondary);
}

.wpb-acc-form__fields .wpb-field__wrap input {
  padding-left: 42px;
}

.wpb-acc-form__fields input:focus-visible,
.wpb-acc-form__fields select:focus-visible {
  outline: 2px solid var(--wpb-primary);
  outline-offset: 1px;
}

.wpb-field__hint {
  display: block;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--wpb-text-secondary);
}

.wpb-acc-form__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 20px 20px;
  margin: 0;
}

.wpb-acc-form>.wpb-acc-panel+.wpb-acc-panel {
  margin-top: 18px;
}

.wpb-acc-btn--save {
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--wpb-primary), var(--wpb-primary-dark));
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(108, 99, 255, .5);
}

.wpb-acc-btn--save:hover {
  color: #fff;
  transform: translateY(-1px);
}

/* Add payment method */
.wpb-paym__list {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: grid;
  gap: 10px;
}

.wpb-paym__opt {
  position: relative;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wpb-paym__opt:has(input:checked) {
  border-color: var(--wpb-primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, .12);
}

.wpb-paym__opt>input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wpb-paym__opt>label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 700;
  color: var(--wpb-secondary);
  margin: 0;
}

.wpb-paym__dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  flex: 0 0 auto;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wpb-paym__opt>input:checked+label .wpb-paym__dot {
  border-color: var(--wpb-primary);
  box-shadow: inset 0 0 0 4px var(--wpb-primary);
}

.wpb-paym__name {
  flex: 1 1 auto;
}

.wpb-paym__logo img {
  max-height: 22px;
  width: auto;
  vertical-align: middle;
}

.wpb-paym__opt .payment_box {
  padding: 16px 18px 18px;
  font-size: .88rem;
  color: var(--wpb-text-secondary);
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-paym__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 20px 20px;
  font-size: .8rem;
  color: var(--wpb-text-secondary);
}

.wpb-paym__trust i {
  width: 15px;
  height: 15px;
  color: #16a34a;
}

@container wpb-acc (min-width: 620px) {

  .wpb-addr-grid,
  .wpb-acc-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wpb-acc-form__fields .form-row-wide,
  .wpb-acc-form__fields .form-row.notes {
    grid-column: 1 / -1;
  }
}

/* Old engines without container queries: approximate at the viewport. */
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {

    .wpb-addr-grid,
    .wpb-acc-form__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wpb-acc-form__fields .form-row-wide {
      grid-column: 1 / -1;
    }
  }
}


/* ── 4. ORDER PAY ────────────────────────────────────────────────────────
   Reuses `.wpb-checkout__grid` / `.wpb-summary` from the checkout; only the
   bits unique to paying an existing order live here. */

.wpb-pay__status {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 22px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 14px;
  background: var(--wpb-bg-soft);
}

.wpb-pay__placed {
  font-size: .86rem;
  color: var(--wpb-text-secondary);
}

.wpb-pay__heading {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-secondary);
}

.wpb-pay__payment .wc_payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.wpb-pay__payment .wc_payment_methods>li {
  border: 1px solid var(--wpb-border-soft);
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px;
  margin-bottom: 10px;
}

.wpb-pay__payment .wc_payment_methods>li label {
  font-weight: 700;
  color: var(--wpb-secondary);
  cursor: pointer;
}

.wpb-pay__payment .payment_box {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--wpb-border-soft);
  font-size: .88rem;
  color: var(--wpb-text-secondary);
}

.wpb-pay__submit {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.wpb-pay__submit .wpb-summary__checkout {
  border: 0;
  cursor: pointer;
  width: 100%;
}


/* ── 5. ARCHIVES — category / tag / author / search / generic ───────────── */

.wpb-archive {
  padding-top: 56px;
  padding-bottom: 80px;
}

.wpb-archive__head {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}

.wpb-archive__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #F4F4FF;
  color: var(--wpb-primary);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.wpb-archive__eyebrow i {
  width: 14px;
  height: 14px;
}

.wpb-archive__title {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--wpb-secondary);
}

.wpb-archive__desc,
.wpb-archive__desc p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--wpb-text-secondary);
}

.wpb-archive__count {
  margin: 14px 0 0;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wpb-text-secondary);
}

.wpb-archive__search {
  margin-top: 24px;
}

.wpb-archive__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}

.wpb-archive__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--wpb-border-soft);
  background: #fff;
  font-size: .88rem;
  font-weight: 700;
  color: var(--wpb-secondary);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.wpb-archive__pill:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
  transform: translateY(-1px);
}

.wpb-archive__pill.is-active {
  background: linear-gradient(135deg, var(--wpb-primary), var(--wpb-primary-dark));
  border-color: transparent;
  color: #fff;
}

.wpb-archive__pill span {
  font-size: .74rem;
  font-weight: 800;
  color: var(--wpb-text-secondary);
}

.wpb-archive__pill.is-active span {
  color: rgba(255, 255, 255, .75);
}

.wpb-archive__cloud {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--wpb-border-soft);
  text-align: center;
}

.wpb-archive__cloud-title {
  margin: 0 0 22px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wpb-secondary);
}

.wpb-archive__cloud .wpb-archive__pills {
  margin-bottom: 0;
}

/* Author card */
.wpb-author-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 820px;
  margin: 0 auto 48px;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.wpb-author-card__avatar {
  flex: 0 0 auto;
}

.wpb-author-card__img,
.wpb-author-card__avatar img {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 3px solid rgba(108, 99, 255, .2);
  display: block;
}

.wpb-author-card__body {
  min-width: 0;
}

.wpb-author-card__name {
  margin: 0 0 10px;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wpb-secondary);
}

.wpb-author-card__bio {
  margin: 0 0 16px;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--wpb-text-secondary);
}

.wpb-author-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wpb-author-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--wpb-bg-soft);
  font-size: .8rem;
  font-weight: 700;
  color: var(--wpb-text-secondary);
  text-decoration: none;
}

.wpb-author-card__chip i {
  width: 14px;
  height: 14px;
}

.wpb-author-card__chip--link:hover {
  background: #F4F4FF;
  color: var(--wpb-primary);
}

/* Grid — was inline on index.php before the archive templates split out. */
.wpb-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

@media (max-width: 720px) {
  .wpb-author-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 22px;
  }

  .wpb-author-card__meta {
    justify-content: center;
  }

  .wpb-post-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ── 3b. FLUSH ACCOUNT PANELS ────────────────────────────────────────────
   `.wpb-acc-panel` pads itself (22/24), which is right for the dashboard's
   text panels but wrong for these: their children are full-bleed bands
   (totals strip, tinted note, field grid, gateway list) that must reach the
   panel edge. Those panels drop the padding and each child pays for its own. */

.wpb-vo__panel,
.wpb-acc-form .wpb-acc-panel,
.wpb-paym .wpb-acc-panel {
  padding: 0;
  overflow: hidden;
  margin-top: 0;
}

.wpb-vo__panel>.wpb-acc-panel__head,
.wpb-acc-form .wpb-acc-panel>.wpb-acc-panel__head,
.wpb-paym .wpb-acc-panel>.wpb-acc-panel__head {
  display: block;
  padding: 20px 20px 0;
  margin-bottom: 0;
}

.wpb-acc-panel__head p {
  margin: 4px 0 0;
  font-size: .85rem;
  font-weight: 400;
  color: var(--wpb-text-secondary);
}

.wpb-vo__panel .wpb-order__lines {
  padding: 6px 20px 0;
}

.wpb-vo__panel .wpb-order-line:last-child {
  border-bottom: 0;
}

.wpb-vo__panel .wpb-dl-rows {
  padding: 6px 20px 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE TEMPLATES / WISHLIST / ORDER TRACKING / MEDIA / SEARCH CARD
   Components for the templates that closed the template-hierarchy gaps.
   Tokens only — no new hexes beyond the tints already used by siblings.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page template shells (page-templates/*.php) ───────────────────────── */

.wpb-tpl {
  padding-top: 56px;
  padding-bottom: 80px;
}

/* Landing owns its own spacing — its blocks run edge to edge. */
.wpb-tpl--landing {
  padding-top: 0;
  padding-bottom: 0;
}

.wpb-tpl__head {
  margin-bottom: 32px;
}

.wpb-tpl__thumb {
  margin: 0 0 32px;
}

.wpb-tpl__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Two-column "With Sidebar". Collapses to one column when sidebar-1 is empty
   (.is-bare) or below 900px. */
.wpb-tpl--sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .wpb-tpl--sidebar:not(.is-bare) {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.wpb-tpl--sidebar .wpb-tpl__main {
  min-width: 0;
}

@media (min-width: 900px) {
  .wpb-tpl--sidebar:not(.is-bare) .wpb-sidebar {
    position: sticky;
    top: calc(var(--wpb-header-h) + 24px);
  }
}

/* ── Saved chip in the shop toolbar ───────────────────────────────────── */

.wpb-shop__saved {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 46px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 14px;
  background: #fff;
  color: var(--wpb-secondary);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.wpb-shop__saved:hover {
  border-color: var(--wpb-primary);
  color: var(--wpb-primary);
  transform: translateY(-1px);
}

.wpb-shop__saved-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--wpb-accent);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}

/* ── Wishlist page ─────────────────────────────────────────────────────── */

.wpb-wishlist__intro {
  margin-bottom: 28px;
}

.wpb-wishlist__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 24px;
}

.wpb-wishlist__state h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-wishlist__state p {
  margin: 0 0 24px;
  color: var(--wpb-text-secondary);
}

.wpb-wishlist__empty-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 22px;
  border-radius: 24px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
}

.wpb-wishlist__empty-ic i {
  width: 38px;
  height: 38px;
}

.wpb-wishlist__spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border: 3px solid rgba(108, 99, 255, .18);
  border-top-color: var(--wpb-primary);
  border-radius: 50%;
  animation: wpb-wish-spin .7s linear infinite;
}

@keyframes wpb-wish-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpb-wishlist__spinner {
    animation-duration: 2.4s;
  }
}

.wpb-wishlist__count {
  margin: 0 0 20px;
  color: var(--wpb-text-secondary);
  font-size: .95rem;
  font-weight: 600;
}

/* Mirror the shop grid so saved cards match the archive exactly. */
.wpb-wishlist__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpb-wishlist__grid::before,
.wpb-wishlist__grid::after {
  content: none;
}

.wpb-wishlist__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-wishlist__clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 12px;
  background: transparent;
  color: var(--wpb-text-secondary);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.wpb-wishlist__clear:hover {
  border-color: #E11D48;
  color: #E11D48;
}

.wpb-wishlist__clear i {
  width: 16px;
  height: 16px;
}

/* ── Order tracking form ───────────────────────────────────────────────── */

.wpb-track {
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-track__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}

.wpb-track__head h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-track__head p {
  margin: 0;
  color: var(--wpb-text-secondary);
  font-size: .95rem;
  line-height: 1.6;
}

.wpb-track__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
}

.wpb-track__ic i {
  width: 24px;
  height: 24px;
}

.wpb-track__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 620px) {
  .wpb-track__fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* Woo ships float helpers on these rows; the grid owns layout here. */
.wpb-track__fields .form-row-first,
.wpb-track__fields .form-row-last {
  float: none;
  width: auto;
  margin: 0;
}

.wpb-track__submit-row {
  margin: 22px 0 0;
}

.wpb-track__submit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--wpb-primary), var(--wpb-primary-dark));
  color: #fff;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.wpb-track__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(108, 99, 255, .28);
}

.wpb-track__submit i {
  width: 17px;
  height: 17px;
}

.wpb-track__help {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--wpb-border-soft);
  color: var(--wpb-text-secondary);
  font-size: .9rem;
}

.wpb-track__help i {
  width: 16px;
  height: 16px;
  color: var(--wpb-primary);
}

.wpb-track__help a {
  color: var(--wpb-primary);
  font-weight: 700;
  text-decoration: none;
}

.wpb-track__help a:hover {
  text-decoration: underline;
}

/* ── Order tracking result ─────────────────────────────────────────────── */

.wpb-track-result__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 24px 22px 30px;
  background: #fff;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 22px;
  overflow: hidden;
}

/* Status-hued rail, same language as the orders board / view-order sheet. */
.wpb-track-result__rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--o-rail, var(--wpb-primary));
}

.wpb-track-result__main {
  flex: 1 1 260px;
  min-width: 0;
}

.wpb-track-result__title {
  margin: 0 0 5px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--wpb-secondary);
}

.wpb-track-result__lead {
  margin: 0;
  color: var(--wpb-text-secondary);
  font-size: .92rem;
}

.wpb-track-result__info {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--o-tint, rgba(108, 99, 255, .08));
  color: var(--wpb-secondary);
  font-size: .95rem;
  line-height: 1.6;
}

.wpb-track-result__info mark {
  background: transparent;
  color: inherit;
  font-weight: 800;
}

/* ── Attachment / image templates ─────────────────────────────────────── */

.wpb-attachment__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  color: var(--wpb-text-secondary);
  font-size: .9rem;
  font-weight: 500;
}

.wpb-attachment__media {
  margin: 0 0 24px;
}

.wpb-attachment__media img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
}

.wpb-attachment__file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 14px;
  background: #fff;
  color: var(--wpb-primary);
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

.wpb-attachment__file:hover {
  border-color: var(--wpb-primary);
  transform: translateY(-1px);
}

.wpb-attachment__caption {
  margin: 0 0 28px;
  color: var(--wpb-text-secondary);
  font-size: .92rem;
  text-align: center;
  font-style: italic;
}

.wpb-attachment__exif {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px 24px;
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid var(--wpb-border-soft);
  border-radius: 18px;
  background: #fff;
}

.wpb-attachment__exif-row dt {
  margin: 0 0 3px;
  color: var(--wpb-text-secondary);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.wpb-attachment__exif-row dd {
  margin: 0;
  color: var(--wpb-secondary);
  font-size: .95rem;
  font-weight: 700;
}

.wpb-attachment__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-attachment__nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wpb-primary);
  font-weight: 700;
  text-decoration: none;
  font-size: .9rem;
}

.wpb-attachment__nav a:last-child {
  margin-left: auto;
}

.wpb-attachment__nav img {
  border-radius: 10px;
}

.wpb-attachment__foot {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--wpb-border-soft);
}

.wpb-attachment__foot a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--wpb-primary);
  font-weight: 700;
  text-decoration: none;
}

.wpb-attachment__foot i,
.wpb-attachment__file i {
  width: 17px;
  height: 17px;
}

/* ── Privacy policy ───────────────────────────────────────────────────── */

.wpb-legal__updated {
  margin: 14px 0 0;
  color: var(--wpb-text-secondary);
  font-size: .9rem;
  font-weight: 600;
}

/* ── Search-result card additions ─────────────────────────────────────── */

.wpb-post-card__type {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-right: 9px;
  border-radius: 999px;
  background: rgba(108, 99, 255, .1);
  color: var(--wpb-primary);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Matched search terms inside the excerpt. */
.wpb-post-card__hit {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(34, 199, 224, .22);
  color: inherit;
  font-weight: 700;
}

/* ── Shared empty state (shop-shaped pages) ───────────────────────────── */

.wpb-shop__empty {
  padding: 64px 24px;
  text-align: center;
  color: var(--wpb-text-secondary);
}

/* ============================================================
   CONTACT HERO & FORM — (STYLE-DNA §5 / §6)
   Signature gradient band + glassmorphism contact form
   ============================================================ */
.wpb-contact-hero {
  position: relative;
}

.wpb-contact-hero .wpb-contact-card {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.wpb-contact-input {
  transition: all 0.25s ease;
}

.wpb-contact-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.wpb-contact-input:focus {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
  outline: none;
}

.wpb-contact-select option {
  background-color: #0f172a;
  color: #ffffff;
  padding: 8px 12px;
}

.wpb-contact-submit {
  user-select: none;
}

.wpb-contact-submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none !important;
}

.wpb-contact-standalone-wrap {
  position: relative;
  width: 100%;
}

.wpb-contact-card--standalone {
  background: linear-gradient(135deg, #6C63FF 0%, #4F46E5 100%);
  box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.wpb-contact-card--standalone .wpb-contact-input {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.wpb-contact-card--standalone .wpb-contact-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.wpb-contact-card--standalone .wpb-contact-input:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

/* ============================================================
   CONTACT US PAGE EXTRA PROSE / CONTENT CARD
   Global styling for any WordPress editor content on contact-us
   ============================================================ */
.wpb-contact-extra {
  position: relative;
}

.wpb-contact-prose {
  font-family: 'Inter', sans-serif;
  color: #334155;
}

.wpb-contact-prose h1,
.wpb-contact-prose h2,
.wpb-contact-prose h3,
.wpb-contact-prose h4 {
  font-family: 'Inter', sans-serif;
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.wpb-contact-prose h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-top: 2rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(108, 99, 255, 0.12);
}

.wpb-contact-prose>h2:first-child,
.wpb-contact-prose>h3:first-child {
  margin-top: 0;
}

.wpb-contact-prose h3 {
  font-size: 1.35rem;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.wpb-contact-prose p {
  color: #475569;
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.wpb-contact-prose strong,
.wpb-contact-prose b {
  color: #0f172a;
  font-weight: 700;
}

.wpb-contact-prose a {
  color: #6c63ff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(108, 99, 255, 0.35);
  transition: all 0.2s ease;
  padding-bottom: 1px;
}

.wpb-contact-prose a:hover {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}

.wpb-contact-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 1.25rem auto;
}

.wpb-contact-prose img:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.wpb-contact-prose [style*="color:red"],
.wpb-contact-prose [style*="color: red"],
.wpb-contact-prose [style*="color:#ff"],
.wpb-contact-prose [style*="color: #ff"],
.wpb-contact-prose [style*="color:rgb(255"],
.wpb-contact-prose .has-vivid-red-color {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
  border-radius: 12px;
  padding: 12px 18px;
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 10px 0;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.06);
}

.wpb-contact-prose hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 2rem 0;
}

.wpb-contact-prose ul {
  list-style: none;
  padding-left: 0;
  margin: 1.25rem 0;
}

.wpb-contact-prose ul>li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  color: #475569;
  line-height: 1.7;
}

.wpb-contact-prose ul>li::before {
  content: "•";
  position: absolute;
  left: 0.5rem;
  top: -1px;
  color: #6c63ff;
  font-size: 1.3rem;
  font-weight: bold;
}

/* ============================================================
   ADMIN LIVE INLINE TEXT EDITING
   Temporary border, text cursor, focus glow & save feedback
   ============================================================ */
[data-wpb-editable] {
  cursor: text;
  border-radius: 6px;
  transition: outline 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 12px;
  display: inline-block;
}

[data-wpb-editable]:hover {
  outline: 2px dashed rgba(108, 99, 255, 0.45);
  background-color: rgba(108, 99, 255, 0.06);
}

[data-wpb-editable]:focus {
  outline: 2px solid #6c63ff !important;
  background-color: rgba(108, 99, 255, 0.12) !important;
  box-shadow: 0 0 16px rgba(108, 99, 255, 0.3) !important;
}

/* On dark, gradient, or hero backgrounds */
.gradient-bg [data-wpb-editable]:hover,
.bg-secondary [data-wpb-editable]:hover,
.wpb2-hero [data-wpb-editable]:hover,
.wpb-contact-card [data-wpb-editable]:hover,
.hero-section-bg [data-wpb-editable]:hover {
  outline: 2px dashed rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
}

.gradient-bg [data-wpb-editable]:focus,
.bg-secondary [data-wpb-editable]:focus,
.wpb2-hero [data-wpb-editable]:focus,
.wpb-contact-card [data-wpb-editable]:focus,
.hero-section-bg [data-wpb-editable]:focus {
  outline: 2px solid #ffffff !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4) !important;
}

/* Success flash animation */
@keyframes wpbEditFlash {
  0% {
    outline: 2px solid #34d399;
    background-color: rgba(52, 211, 153, 0.25);
  }

  100% {
    outline: 2px solid transparent;
    background-color: transparent;
  }
}

.wpb-edit-success {
  animation: wpbEditFlash 1.4s ease forwards !important;
}

/* Admin Floating Toast Notification */
.wpb-admin-edit-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  background: #0f172a;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.wpb-admin-edit-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wpb-admin-edit-toast.is-success {
  border-color: rgba(52, 211, 153, 0.4);
}

.wpb-admin-edit-toast.is-error {
  border-color: rgba(248, 113, 113, 0.5);
  background: #450a0a;
}

/* Admin Floating URL Mini-Pill Popover */
.wpb-url-popover {
  position: absolute;
  z-index: 999998;
  display: none;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f8fafc;
  padding: 6px 10px;
  border-radius: 9999px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.wpb-url-popover.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wpb-url-popover__view,
.wpb-url-popover__edit {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.wpb-url-popover__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #818cf8;
}

.wpb-url-popover__display {
  color: #cbd5e1;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: monospace;
  font-size: 0.75rem;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.wpb-url-popover__btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.wpb-url-popover__btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: scale(1.03);
}

.wpb-url-popover__btn--edit {
  background: #6366f1;
  border-color: #818cf8;
}

.wpb-url-popover__btn--edit:hover {
  background: #4f46e5;
}

.wpb-url-popover__btn--save {
  background: #10b981;
  border-color: #34d399;
}

.wpb-url-popover__btn--save:hover {
  background: #059669;
}

.wpb-url-popover__btn--cancel,
.wpb-url-popover__btn--close {
  background: transparent;
  border-color: transparent;
  color: #94a3b8;
  padding: 4px 6px;
}

.wpb-url-popover__btn--cancel:hover,
.wpb-url-popover__btn--close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.wpb-url-popover__input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #6366f1;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-family: inherit;
  min-width: 240px;
  outline: none;
}

.wpb-url-popover__input:focus {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* Admin Brand Logo Live Uploader Styling */
.wpb-logo-editable-wrap {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.wpb-logo-editable-wrap:hover {
  outline: 2px dashed #6366f1;
  outline-offset: 3px;
}

.wpb-logo-editable-wrap::after {
  content: '📸 Change Logo';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.wpb-logo-editable-wrap:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}