/*!
 * Visual Builder — front-end styles
 * Prefixed with `wb-` so the plugin works with any theme.
 * Fallback values mirror the reference design tokens; theme tokens
 * (--color-brand-*) override these when the theme defines them.
 */

.wb-layout {
  --wb-navy: var(--color-brand-navy, #091E3A);
  --wb-navy-muted: var(--color-brand-navyMuted, #142C4F);
  /* The cyan token follows the brand colour, so changing the brand colour
     in the design settings repaints every element that uses it. */
  --wb-cyan: var(--wb-brand, var(--color-brand-cyan, #00A3E0));
  --wb-slate: var(--color-brand-slate, #475569);
  --wb-porcelain: var(--color-brand-porcelain, #F8FAFC);
  --wb-surface: var(--color-brand-surface, #F1F5F9);
  --wb-white: #ffffff;
  --wb-radius: 9999px;

  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--wb-navy);
}

.wb-layout *,
.wb-layout *::before,
.wb-layout *::after {
  box-sizing: border-box;
}

:where(.wb-layout) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(.wb-layout) a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------ */

.wb-section {
  position: relative;
  width: 100%;
}

.wb-inner {
  max-width: var(--wb-container-width, 1280px);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.wb-inner-full {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .wb-inner,
  .wb-inner-full {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Backgrounds */
.wb-bg-none { background: transparent; }
.wb-bg-porcelain { background: var(--wb-porcelain); }
.wb-bg-surface { background: var(--wb-surface); }
.wb-bg-navy { background: var(--wb-navy); color: var(--wb-white); }
.wb-bg-cyan { background: var(--wb-cyan); color: var(--wb-white); }

/* Vertical rhythm */
.wb-py-none { padding-top: 0; padding-bottom: 0; }
.wb-py-sm { padding-top: 2rem; padding-bottom: 2rem; }
.wb-py-md { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.wb-py-lg { padding-top: 5rem; padding-bottom: 5rem; }
.wb-py-xl { padding-top: 7rem; padding-bottom: 7rem; }

@media (min-width: 768px) {
  .wb-py-sm { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .wb-py-md { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .wb-py-lg { padding-top: 6rem; padding-bottom: 6rem; }
  .wb-py-xl { padding-top: 8rem; padding-bottom: 8rem; }
}

/* Responsive visibility */
.wb-hide-mobile { display: none; }

@media (min-width: 768px) {
  .wb-hide-mobile { display: block; }
  .wb-hide-desktop { display: none; }
}

/* Alignment */
.wb-align-left { text-align: left; }
.wb-align-center { text-align: center; }
.wb-align-right { text-align: right; }

.wb-btn-wrap.wb-align-left { justify-content: flex-start; }
.wb-btn-wrap.wb-align-center { justify-content: center; }
.wb-btn-wrap.wb-align-right { justify-content: flex-end; }

/* ---------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------ */

.wb-heading {
  margin: 0 0 1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.wb-size-sm { font-size: 1.25rem; }
.wb-size-md { font-size: 1.5rem; }
.wb-size-lg { font-size: 2rem; }
.wb-size-xl { font-size: 3rem; }

@media (min-width: 768px) {
  .wb-size-lg { font-size: 2.5rem; }
  .wb-size-xl { font-size: 3.75rem; }
}

.wb-weight-400 { font-weight: 400; }
.wb-weight-500 { font-weight: 500; }
.wb-weight-600 { font-weight: 600; }
.wb-weight-700 { font-weight: 700; }

.wb-color-navy { color: var(--wb-navy); }
.wb-color-cyan { color: var(--wb-cyan); }
.wb-color-slate { color: var(--wb-slate); }
.wb-color-white { color: var(--wb-white); }
.wb-color-ink { color: #0f172a; }

.wb-text {
  margin: 0 0 1rem;
  line-height: 1.65;
}

.wb-maxw-none { max-width: none; }
.wb-maxw-sm { max-width: 32rem; }
.wb-maxw-md { max-width: 46rem; }
.wb-maxw-lg { max-width: 60rem; }

.wb-maxw-sm,
.wb-maxw-md,
.wb-maxw-lg {
  margin-left: auto;
  margin-right: auto;
}

.wb-align-center .wb-maxw-sm,
.wb-align-center .wb-maxw-md,
.wb-align-center .wb-maxw-lg {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------
 * Image
 * ------------------------------------------------------------------ */

.wb-image {
  margin: 0 0 1.5rem;
}

.wb-img-w-contained { max-width: var(--wb-container-width, 1280px); margin-left: auto; margin-right: auto; }
.wb-img-w-full { width: 100%; }
.wb-img-w-narrow { max-width: 42rem; margin-left: auto; margin-right: auto; }

.wb-img-ratio-auto img { width: auto; height: auto; }
.wb-img-ratio-square img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.wb-img-ratio-16x9 img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wb-img-ratio-4x3 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.wb-img-rounded img { border-radius: 1rem; }

/* ---------------------------------------------------------------------
 * Button
 * ------------------------------------------------------------------ */

.wb-btn-wrap {
  display: flex;
  margin-bottom: 1.5rem;
}

.wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--wb-radius);
  transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.wb-btn:hover { transform: translateY(-1px); }
.wb-btn:active { transform: translateY(0); }

.wb-btn-sm { padding: 0.625rem 1.25rem; font-size: 0.75rem; }
.wb-btn-md { padding: 0.875rem 2rem; }
.wb-btn-lg { padding: 1.125rem 2.5rem; font-size: 1rem; }

.wb-btn-primary {
  background: var(--wb-navy);
  color: var(--wb-white);
}
.wb-btn-primary:hover { background: var(--wb-navy-muted); }

.wb-btn-secondary {
  background: var(--wb-white);
  color: var(--wb-navy);
  border: 1px solid rgba(9, 30, 58, 0.12);
}
.wb-btn-secondary:hover { background: var(--wb-porcelain); }

.wb-btn-ghost {
  background: transparent;
  color: var(--wb-navy);
  border: 1px solid transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.wb-btn-ghost:hover { color: var(--wb-cyan); }

.wb-btn-full { display: flex; width: 100%; }

/* ---------------------------------------------------------------------
 * Columns & rows
 * ------------------------------------------------------------------ */

/* A row section — its children sit next to each other. */
.wb-row {
  display: flex;
  flex-wrap: wrap;
}

/* A column — one cell of a row. */
.wb-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------------------------------------------------------------------
 * Divider
 * ------------------------------------------------------------------ */

.wb-divider {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--wb-slate);
  margin: 0 0 1.5rem;
}

.wb-divider-dashed { border-top-style: dashed; }
.wb-divider-dotted { border-top-style: dotted; }

.wb-divider-w-full { width: 100%; }
.wb-divider-w-contained {
  width: 100%;
  max-width: var(--wb-container-width, 1280px);
  margin-left: auto;
  margin-right: auto;
}
.wb-divider-w-short {
  width: 25%;
  min-width: 4rem;
}

/* ---------------------------------------------------------------------
 * Icon
 * ------------------------------------------------------------------ */

.wb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  margin-bottom: 1rem;
}

.wb-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------------
 * List
 * ------------------------------------------------------------------ */

.wb-list {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  line-height: 1.65;
}

.wb-list ol,
.wb-list ul {
  margin: 0;
  padding-left: 1.25rem;
}

.wb-list-bullet { list-style: disc; }
.wb-list-number { list-style: decimal; }
.wb-list-check {
  list-style: none;
  padding-left: 0;
}

.wb-list-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.wb-list-check .wb-list-check {
  flex: 0 0 auto;
  color: var(--wb-cyan);
  font-weight: 700;
  line-height: 1.65;
}

/* ---------------------------------------------------------------------
 * Video
 * ------------------------------------------------------------------ */

.wb-video {
  position: relative;
  width: 100%;
  margin: 0 0 1.5rem;
  overflow: hidden;
  border-radius: var(--wb-border-radius, 0.75rem);
}

.wb-video-ratio-16-9 { aspect-ratio: 16 / 9; }
.wb-video-ratio-4-3 { aspect-ratio: 4 / 3; }
.wb-video-ratio-1-1 { aspect-ratio: 1 / 1; }

.wb-video iframe,
.wb-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* ---------------------------------------------------------------------
 * HTML & spacer
 * ------------------------------------------------------------------ */

.wb-html {
  margin-bottom: 1.5rem;
}

.wb-spacer {
  width: 100%;
}

/* ---------------------------------------------------------------------
 * Product grid (WooCommerce)
 * ------------------------------------------------------------------ */

.wb-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .wb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wb-gap-sm { gap: 1rem; }
.wb-gap-md { gap: 1.5rem; }
.wb-gap-lg { gap: 2.5rem; }

.wb-product {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wb-product-media {
  position: relative;
  display: block;
  background: var(--wb-porcelain);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.wb-product-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.wb-product-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--wb-navy);
  color: var(--wb-white);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--wb-radius);
  z-index: 2;
}

.wb-product-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.wb-product-title a:hover { color: var(--wb-cyan); }

.wb-product-rating {
  font-size: 0.75rem;
  color: var(--wb-slate);
}

.wb-product-rating .star-rating {
  display: inline-block;
}

.wb-product-price {
  font-size: 1rem;
  font-weight: 700;
}

.wb-product-price del {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--wb-slate);
  margin-left: 0.5rem;
}

.wb-product-price ins { text-decoration: none; }

.wb-product-atc {
  margin-top: auto;
  padding-top: 0.5rem;
}

.wb-product-atc .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--wb-navy);
  color: var(--wb-white);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--wb-radius);
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.wb-product-atc .button:hover { background: var(--wb-navy-muted); }

.wb-product-atc .button.loading { opacity: 0.6; }

.wb-product-atc .added_to_cart {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  background: var(--wb-cyan);
  color: var(--wb-white);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--wb-radius);
}

/* ---------------------------------------------------------------------
 * Widgets (WooCommerce)
 * ------------------------------------------------------------------ */

.wb-widget {
  margin-bottom: 1.5rem;
}

.wb-widget:last-child {
  margin-bottom: 0;
}

.wb-widget-title {
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.wb-widget-price {
  font-size: 1.5rem;
  font-weight: 700;
}

.wb-widget-price del {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--wb-slate);
  margin-left: 0.5rem;
}

.wb-widget-price ins {
  text-decoration: none;
}

.wb-widget-product-atc form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.wb-widget-product-atc .quantity {
  width: 5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid rgba(9, 30, 58, 0.12);
  border-radius: 0.5rem;
}

.wb-widget-product-atc .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  background: var(--wb-navy);
  color: var(--wb-white);
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--wb-radius);
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.wb-widget-product-atc .single_add_to_cart_button:hover {
  background: var(--wb-navy-muted);
}

.wb-widget-product-atc .single_add_to_cart_button.loading {
  opacity: 0.6;
}

.wb-widget-product-atc .added_to_cart {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 2rem;
  background: var(--wb-cyan);
  color: var(--wb-white);
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--wb-radius);
  margin-left: 0.5rem;
}

.wb-widget-product-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
}

.wb-widget-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.wb-widget-product-gallery .flex-control-thumbs li {
  width: 4.5rem;
}

.wb-widget-product-gallery .flex-control-thumbs img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: pointer;
}

.wb-widget-desc {
  color: var(--wb-slate);
  line-height: 1.65;
}

.wb-widget-label {
  color: var(--wb-slate);
  margin-right: 0.25rem;
}

.wb-widget-value {
  font-weight: 600;
}

.wb-widget-stock {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: var(--wb-radius);
}

.wb-widget-stock.wb-in-stock {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.wb-widget-stock.wb-out-of-stock {
  background: rgba(225, 29, 72, 0.12);
  color: #9f1239;
}

.wb-widget-attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.wb-widget-attributes th,
.wb-widget-attributes td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(9, 30, 58, 0.08);
  vertical-align: top;
}

.wb-widget-attributes th {
  width: 35%;
  color: var(--wb-slate);
  font-weight: 600;
}

.wb-widget-breadcrumb {
  font-size: 0.75rem;
  color: var(--wb-slate);
  margin-bottom: 1rem;
}

.wb-widget-breadcrumb a {
  color: var(--wb-slate);
}

.wb-widget-breadcrumb a:hover {
  color: var(--wb-cyan);
}

.wb-widget-loop-title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.wb-widget-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.wb-widget-cat-list a {
  color: var(--wb-slate);
}

.wb-widget-cat-list a:hover {
  color: var(--wb-cyan);
}

.wb-widget-cart-totals table,
.wb-widget-checkout-review table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.wb-widget-cart-totals th,
.wb-widget-cart-totals td,
.wb-widget-checkout-review th,
.wb-widget-checkout-review td {
  padding: 0.5rem 0;
  text-align: left;
}

.wb-widget-account-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wb-widget-account-nav a {
  color: var(--wb-slate);
  font-size: 0.875rem;
}

.wb-widget-account-nav a:hover {
  color: var(--wb-cyan);
}

.wb-widget-shop-products ul.products,
.wb-widget-shop-products .products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .wb-widget-shop-products ul.products,
  .wb-widget-shop-products .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------
 * Theme slots & native fallback
 * ------------------------------------------------------------------ */

.wb-theme-slot {
  position: relative;
  z-index: 1;
}

.wb-theme-slot-header {
  border-bottom: 1px solid rgba(9, 30, 58, 0.08);
}

.wb-theme-slot-footer {
  border-top: 1px solid rgba(9, 30, 58, 0.08);
}

.wb-builder-page {
  display: block;
}

.wb-native-fallback {
  margin-top: 2rem;
}

/* ---------------------------------------------------------------------
 * Popup
 * ------------------------------------------------------------------ */

.wb-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(9, 30, 58, 0.65);
  backdrop-filter: blur(3px);
}

.wb-popup-overlay[hidden] {
  display: none;
}

.wb-popup {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 30px 60px rgba(9, 30, 58, 0.25);
  padding: 2rem;
}

.wb-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 9999px;
  background: rgba(9, 30, 58, 0.06);
  color: var(--wb-navy);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.wb-popup-close:hover {
  background: rgba(9, 30, 58, 0.12);
}

.wb-popup-content {
  width: 100%;
}

/* The popup shown inside the editor canvas is a static preview, so it is
   centred in the page flow instead of floating in an overlay. */
.wb-popup--canvas {
  margin: 2rem auto;
  max-height: none;
}

html.wb-popup-open {
  overflow: hidden;
}