/* =============================================
   4B PLUS - WOOCOMMERCE STYLES
   Shop, Product, Cart, Checkout, Account pages
   ============================================= */

/* =============================================
   4BPLUS NOTICE COMPONENT
   Custom notice system — used directly via fourbplus_notice()
   and mapped to WooCommerce native notice classes.

   Usage: fourbplus_notice('Message', 'error|success|info|warning')
   ============================================= */

/* Base notice */
.fourbplus-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 6px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

/* Notice icon */
.fourbplus-notice__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px; /* optical alignment with text */
}

.fourbplus-notice__icon svg {
  width: 18px;
  height: 18px;
}

/* Notice message */
.fourbplus-notice__msg {
  flex: 1;
}

/* ── Variants ───────────────────────────────── */

.fourbplus-notice--error {
  background: oklch(97% 0.015 18);
  border-color: oklch(80% 0.06 18);
  color: var(--fourbplus-crimson);
}

.fourbplus-notice--error .fourbplus-notice__icon {
  color: var(--fourbplus-crimson);
}

.fourbplus-notice--success {
  background: #f0faf4;
  border-color: #a7d9b8;
  color: #155a2e;
}

.fourbplus-notice--success .fourbplus-notice__icon {
  color: #2d9e4f;
}

.fourbplus-notice--info {
  background: oklch(97% 0.02 62);
  border-color: oklch(85% 0.08 62);
  color: oklch(40% 0.1 62);
}

.fourbplus-notice--info .fourbplus-notice__icon {
  color: var(--fourbplus-secondary);
}

.fourbplus-notice--warning {
  background: #fff8ec;
  border-color: #fcd38a;
  color: #7a4a00;
}

.fourbplus-notice--warning .fourbplus-notice__icon {
  color: #d97706;
}

/* ── WooCommerce native notice classes now output fourbplus-notice HTML via template overrides.
   These resets just suppress any residual WC plugin styles on the old class names. ── */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  all: unset;
}

/* =============================================
   PAGE LAYOUT BASE (Single Source of Truth)
   All WooCommerce pages inherit from these classes
   ============================================= */

/* Base page wrapper - cream background */
.fourbplus-page-wrapper {
  background: var(--fourbplus-cream);
  padding-bottom: 60px;
}

/* Base layout container - centered */
.fourbplus-page-layout {
  max-width: var(--fourbplus-container-width, 1400px);
  margin: 0 auto;
  padding: 0 var(--fourbplus-gutter, 32px);
  padding-top: 32px;
}

/* Layout with sidebar - flex */
.fourbplus-page-layout--has-sidebar {
  display: flex;
  gap: 32px;
  padding-top: 32px;
}

/* =============================================
   SHOP PAGE - FILTER SIDEBAR
   Extends base page layout
   ============================================= */

/* Shop page uses unified wrapper (inherits from .fourbplus-page-wrapper) */
.fourbplus-page-wrapper--shop {
  /* Inherits cream bg from base */
}

/* Shop layout - flex with sidebar (inherits from .fourbplus-page-layout--has-sidebar) */
.fourbplus-page-wrapper--shop .fourbplus-page-layout {
  /* Base flex already set by .fourbplus-page-layout--has-sidebar */
}

/* Shop main content area - takes remaining space */
.fourbplus-shop-main {
  flex: 1;
  min-width: 0;
}

/* Filter sidebar - fixed width */
.fourbplus-filter-sidebar {
  width: 240px;
  flex-shrink: 0;
}

.fourbplus-filter-section {
  background: var(--fourbplus-white);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fourbplus-filter-title {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fourbplus-filter-toggle {
  background: none;
  border: none;
  color: var(--fourbplus-text-muted);
  cursor: pointer;
  padding: 0;
}

.fourbplus-filter-toggle svg {
  width: 16px;
  height: 16px;
}

.fourbplus-filter-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fourbplus-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  color: var(--fourbplus-text-dark);
  text-decoration: none;
  border-radius: 4px;
  transition: background var(--fourbplus-transition-fast);
}

.fourbplus-filter-option:hover {
  background: rgba(0, 0, 0, 0.03);
}

.fourbplus-filter-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--fourbplus-transition-fast);
  flex-shrink: 0;
}

.fourbplus-filter-option:hover .fourbplus-filter-checkbox {
  border-color: var(--fourbplus-crimson);
}

.fourbplus-filter-option.active .fourbplus-filter-checkbox {
  background: var(--fourbplus-crimson);
  border-color: var(--fourbplus-crimson);
}

.fourbplus-filter-option.active .fourbplus-filter-checkbox svg {
  color: var(--fourbplus-white);
}

.fourbplus-filter-option.active .fourbplus-filter-label {
  color: var(--fourbplus-crimson);
  font-weight: 500;
}

/* Child sub-category: indented, smaller text */
.fourbplus-filter-option--child {
  padding-left: 24px;
  font-size: 12px;
}
.fourbplus-filter-option--child .fourbplus-filter-label {
  font-size: 12px;
  color: var(--fourbplus-text-muted);
}
.fourbplus-filter-option--child.active .fourbplus-filter-label {
  color: var(--fourbplus-crimson);
}

.fourbplus-filter-checkbox svg {
  width: 12px;
  height: 12px;
  color: transparent;
}

.fourbplus-filter-label {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-dark);
  flex-grow: 1;
  line-height: 18px;
}

.fourbplus-filter-count {
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  color: var(--fourbplus-text-muted);
  flex-shrink: 0;
  line-height: 18px;
}

/* Filter Chips (Active Filters) */
.fourbplus-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.fourbplus-filter-chip {
  background: #f0ede8;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.fourbplus-filter-chip:hover,
.fourbplus-filter-chip.active {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border-color: var(--fourbplus-crimson);
}

.fourbplus-filter-chip svg {
  width: 14px;
  height: 14px;
}

.fourbplus-clear-all-filters {
  background: none;
  border: none;
  color: var(--fourbplus-secondary);
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}

/* Filter chips row (price range, origin) */
.fourbplus-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.fourbplus-chip {
  background: #f0ede8;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  color: #555;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  display: inline-block;
}

.fourbplus-chip:hover,
.fourbplus-chip.active {
  background: var(--fourbplus-crimson);
  border-color: var(--fourbplus-crimson);
  color: #fff;
}

.fourbplus-chip-remove {
  margin-left: 4px;
  font-size: 14px;
  opacity: 0.9;
  font-weight: bold;
}

.fourbplus-chip.active:hover .fourbplus-chip-remove {
  opacity: 1;
}

/* Checkbox labels (brand, dietary) */
.fourbplus-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: #444;
  cursor: pointer;
}

/* Clear filters button */
.fourbplus-clear-filters-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 16px;
  width: 100%;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: #666;
  cursor: pointer;
  margin-top: 12px;
  transition:
    border-color 0.15s,
    color 0.15s;
}

.fourbplus-clear-filters-btn:hover {
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-crimson);
}

/* =============================================
   SHOP PAGE - PRODUCT GRID AREA
   ============================================= */

.fourbplus-shop-main {
  flex: 1;
  min-width: 0;
}

/* Shop Header (used in custom templates) */
.fourbplus-shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.fourbplus-shop-title {
  font-family: var(--fourbplus-font-heading);
  font-size: 28px;
  color: var(--fourbplus-crimson);
  margin: 0;
}

.fourbplus-shop-controls {
  display: flex;
  gap: 16px;
  align-items: center;
}

.fourbplus-shop-count {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-muted);
}

/* Shop Toolbar (output by fourbplus_shop_toolbar hook) */
.fourbplus-shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: var(--fourbplus-white);
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fourbplus-shop-toolbar .fourbplus-shop-count {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-muted);
  font-weight: 500;
}

/* WooCommerce Catalog Ordering Dropdown */
.fourbplus-shop-toolbar .woocommerce-ordering,
.fourbplus-shop-toolbar form.woocommerce-ordering,
.fourbplus-shop-toolbar .fourbplus-sort-form {
  margin: 0;
}

.fourbplus-shop-toolbar .orderby,
.fourbplus-shop-toolbar select.orderby,
.fourbplus-shop-toolbar .fourbplus-sort-select {
  background: var(--fourbplus-white);
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-text-dark);
  cursor: pointer;
  min-width: 140px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.fourbplus-shop-toolbar .orderby:focus,
.fourbplus-shop-toolbar select.orderby:focus,
.fourbplus-shop-toolbar .fourbplus-sort-select:focus {
  outline: 2px solid var(--fourbplus-crimson);
  outline-offset: 2px;
  border-color: var(--fourbplus-crimson);
}

.fourbplus-shop-toolbar .orderby:hover,
.fourbplus-shop-toolbar select.orderby:hover,
.fourbplus-shop-toolbar .fourbplus-sort-select:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

/* Grid/List Toggle (in toolbar) */
.fourbplus-shop-toolbar .fourbplus-view-toggle,
.fourbplus-view-toggle {
  display: flex;
  gap: 4px;
}

.fourbplus-shop-toolbar .fourbplus-view-btn,
.fourbplus-view-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 7px;
  cursor: pointer;
  color: #888;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fourbplus-shop-toolbar .fourbplus-view-btn:hover,
.fourbplus-view-btn:hover {
  color: var(--fourbplus-crimson);
}

.fourbplus-shop-toolbar .fourbplus-view-btn:focus-visible,
.fourbplus-view-btn:focus-visible {
  outline: 2px solid var(--fourbplus-crimson);
  outline-offset: 2px;
}

.fourbplus-shop-toolbar .fourbplus-view-btn.active,
.fourbplus-view-btn.active {
  background: var(--fourbplus-crimson);
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
}

.fourbplus-shop-toolbar .fourbplus-view-btn svg,
.fourbplus-view-btn svg {
  width: 16px;
  height: 16px;
}

/* =============================================
   PRODUCT GRID - MATCH DESIGN
   ============================================= */

.fourbplus-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

/* Override WooCommerce default product loop styling */
ul.products,
ul.products.columns-4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

ul.products li.product,
ul.products li.product.type-product {
  margin: 0;
  padding: 0;
  width: auto;
  max-width: none;
  float: none;
}

/* Hide WooCommerce default product card elements to use our custom template */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .star-rating,
ul.products li.product a.button {
  display: none;
}

.fourbplus-products-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fourbplus-products-list .fourbplus-product-card {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
}

.fourbplus-products-list .fourbplus-product-card-img {
  height: 160px;
}

.fourbplus-products-list .fourbplus-product-card-content {
  padding: 20px;
}

.fourbplus-products-list .fourbplus-product-card-actions {
  padding: 20px;
  border-top: none;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  align-self: stretch;
}

/* =============================================
   PRODUCT CARD - 4BPLUS DESIGN
   ============================================= */

.fourbplus-product-card {
  width: 100%;
  border: 1px solid #cacaca;
  border-radius: 24px;
  background: var(--fourbplus-white);
  overflow: hidden;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.fourbplus-product-card:hover {
  transform: scale(1.01);
  border-color: var(--fourbplus-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Product Image Container - white background for square images */
.fourbplus-product-card-img {
  position: relative;
  height: 240px;
  background: var(--fourbplus-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fourbplus-product-img-link {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Placeholder styles defined in style.css as .fourbplus-placeholder component */
/* Legacy .fourbplus-product-placeholder classes are aliased in style.css */

.fourbplus-product-img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  transition: transform var(--fourbplus-transition-normal);
}

.fourbplus-product-card:hover .fourbplus-product-img {
  transform: none;
}

/* Badge base — shared styles for all product card badges */
.fourbplus-product-card .fourbplus-badge,
.fourbplus-product-card .fourbplus-badge-custom,
.fourbplus-product-card .fourbplus-badge-sale {
  position: absolute;
  top: 12px;
  z-index: 10;
  padding: 3px 10px;
  font-family: var(--fourbplus-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 2px;
  display: inline-block;
  width: auto;
}

/* Custom badge (NEW, BEST SELLER, etc.) — left side */
.fourbplus-product-card .fourbplus-badge-custom {
  left: 12px;
  background: var(--fourbplus-crimson);
  color: #fff;
}

/* Sale badge — right side */
.fourbplus-product-card .fourbplus-badge-sale {
  right: 12px;
  background: var(--fourbplus-secondary);
  color: var(--fourbplus-crimson);
}

/* Product Overlay (Quick Actions) */
.fourbplus-product-card-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  transition: opacity var(--fourbplus-transition-fast);
}

.fourbplus-product-card:hover .fourbplus-product-card-overlay {
  opacity: 1;
}

.fourbplus-wishlist-btn {
  background: var(--fourbplus-white);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fourbplus-text-muted);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all var(--fourbplus-transition-fast);
}

.fourbplus-wishlist-btn:hover {
  color: var(--fourbplus-crimson);
  background: var(--fourbplus-secondary);
}

.fourbplus-wishlist-btn:focus-visible {
  outline: 2px solid var(--fourbplus-crimson);
  outline-offset: 2px;
}

.fourbplus-wishlist-btn.active {
  color: var(--fourbplus-crimson);
}

.fourbplus-wishlist-btn.active svg {
  fill: var(--fourbplus-crimson);
}

/* Product Content */
.fourbplus-product-card-content {
  padding: 28px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fourbplus-product-category {
  margin-bottom: 0;
  color: var(--fourbplus-primary);
  font-family: "Manrope", var(--fourbplus-font-body), sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  display: block;
}

.fourbplus-product-card-title {
  margin: 0;
  min-height: 64px;
  font-family: "Manrope", var(--fourbplus-font-body), sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #232323;
}

.fourbplus-product-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--fourbplus-transition-fast);
}

.fourbplus-product-card-title a:hover {
  color: #232323;
}

/* Product Weight */
.fourbplus-product-weight {
  margin-bottom: 0;
  font-family: "Manrope", var(--fourbplus-font-body), sans-serif;
  font-size: 16px;
  line-height: 1.35;
  color: #999999;
  display: block;
}

/* Product Rating */
.fourbplus-product-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}

.fourbplus-rating-stars {
  color: var(--fourbplus-secondary);
}

.fourbplus-rating-stars .star-rating {
  float: none;
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1;
  font-size: 14px;
  width: 5.4em;
  font-family: star;
}

.fourbplus-rating-count {
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  color: var(--fourbplus-text-muted);
}

/* Product Price */
.fourbplus-product-card-price {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--fourbplus-primary);
}

.fourbplus-product-card-price .amount {
  color: var(--fourbplus-primary);
}

.fourbplus-product-card-price del {
  margin-right: 0;
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 16px;
  color: #999999;
  font-weight: 400;
}

.fourbplus-product-card-price ins {
  text-decoration: none;
  color: var(--fourbplus-primary);
  font-weight: 700;
}

/* Product Actions - buttons extend .fourbplus-btn */
.fourbplus-product-card-actions {
  padding: 18px 32px 28px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

/* Product card buttons - small variant */
.fourbplus-product-card .fourbplus-btn--primary,
.fourbplus-product-card-actions .fourbplus-btn--primary,
.fourbplus-add-to-cart-btn,
.fourbplus-select-options-btn,
.fourbplus-view-product-btn {
  min-width: 132px;
  max-width: 100%;
  padding: 12px 24px;
  border-radius: 12px;
  border: 0;
  background: var(--fourbplus-primary);
  color: #ffffff;
  font-family: "Manrope", var(--fourbplus-font-body), sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.fourbplus-product-card .fourbplus-btn--primary:hover,
.fourbplus-product-card-actions .fourbplus-btn--primary:hover,
.fourbplus-add-to-cart-btn:hover,
.fourbplus-select-options-btn:hover,
.fourbplus-view-product-btn:hover {
  background: var(--fourbplus-primary-light);
  color: #ffffff;
}

.fourbplus-product-card-actions > :last-child {
  margin-left: auto;
}

/* Wishlist heart button — overlaid on card, revealed on hover.
   Uses .fourbplus-product-card ancestor for higher specificity to override .fourbplus-wishlist-btn base styles. */
.fourbplus-product-card .fourbplus-product-card-wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: var(--fourbplus-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    background 0.2s,
    border-color 0.2s;
  z-index: 10;
  color: var(--fourbplus-text-muted);
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.fourbplus-product-card:hover .fourbplus-product-card-wishlist-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Always visible when already in wishlist */
.fourbplus-product-card .fourbplus-product-card-wishlist-btn.active {
  opacity: 1;
  transform: translateY(0);
  background: var(--fourbplus-crimson);
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
}

.fourbplus-product-card .fourbplus-product-card-wishlist-btn:hover {
  background: var(--fourbplus-crimson);
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
}

/* Remove-from-wishlist trash button — sits beside Add to cart in actions row */
.fourbplus-product-card-remove-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fourbplus-text-muted);
  transition:
    border-color 0.15s,
    color 0.15s;
}

.fourbplus-product-card-remove-btn:hover {
  border-color: oklch(55% 0.22 25);
  color: oklch(55% 0.22 25);
}

/* Loading state for product cards */
.fourbplus-product-card .fourbplus-btn--loading::after {
  content: "Adding...";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.fourbplus-product-card .fourbplus-btn--loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Pagination */
.fourbplus-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 32px;
  padding-bottom: 8px;
}

.fourbplus-page-btn {
  background: var(--fourbplus-white);
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-dark);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fourbplus-page-btn:hover {
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-crimson);
}

.fourbplus-page-btn.active {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border-color: var(--fourbplus-crimson);
}

.fourbplus-page-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fourbplus-page-btn svg {
  width: 16px;
  height: 16px;
}

.fourbplus-page-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: #888;
  user-select: none;
}

/* =============================================
   PRODUCT PAGE
   Uses unified page wrapper system
   Design specs from Claude Design handoff
   ============================================= */

/* Product page uses cream background (#f5f5f3) */
.fourbplus-page-wrapper--product {
  background: #f5f5f3;
}

/* Product layout - 2-column grid per design */
/* Grid now applied to main element since sidebar-separated layout */
.fourbplus-page-wrapper--product .fourbplus-page-layout {
  padding: 40px var(--fourbplus-gutter, 32px);
}

.fourbplus-product-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Product Gallery */
.fourbplus-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fourbplus-gallery-main {
  background: var(--fourbplus-white);
  border-radius: 8px;
  overflow: hidden;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fourbplus-gallery-main img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* Gallery placeholder - large variant */
.fourbplus-gallery-main .fourbplus-placeholder {
  width: 100%;
  height: 100%;
}

.fourbplus-gallery-main .fourbplus-placeholder__icon {
  font-size: 64px;
}

.fourbplus-gallery-main .fourbplus-placeholder__label {
  font-size: 12px;
  max-width: 120px;
}

.fourbplus-gallery-thumbnails {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fourbplus-gallery-thumb {
  flex: 0 0 auto;
  width: 136px;
  aspect-ratio: 1 / 1;
  background: var(--fourbplus-white);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    border-color 0.2s,
    opacity 0.2s;
  padding: 0;
  opacity: 0.7;
}

.fourbplus-gallery-thumb:hover,
.fourbplus-gallery-thumb.active {
  border-color: #131313;
  opacity: 1;
}

.fourbplus-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Product Info */
.fourbplus-product-info {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Brand label */
.fourbplus-product-brand {
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--fourbplus-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: -8px;
}

/* Product title */
.fourbplus-product-main-title {
  font-family: "Sora", var(--fourbplus-font-body);
  font-size: 38px;
  font-weight: 700;
  color: #131313;
  margin: 0;
  line-height: 1.15;
}

/* Rating row */
.fourbplus-product-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: -6px;
}

.fourbplus-rating-stars {
  display: flex;
  gap: 2px;
  color: var(--fourbplus-secondary);
  font-size: 16px;
}

.fourbplus-rating-count {
  font-family: "Manrope", var(--fourbplus-font-body);
  font-size: 13px;
  color: #999;
  text-decoration: underline;
  cursor: pointer;
}

.fourbplus-product-origin {
  font-family: "Manrope", var(--fourbplus-font-body);
  font-size: 13px;
  color: #999;
}

/* Price row with border */
.fourbplus-product-price-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.fourbplus-product-main-price {
  font-family: "Sora", var(--fourbplus-font-body);
  font-size: 36px;
  font-weight: 800;
  color: #131313;
}

.fourbplus-product-original-price {
  font-family: var(--fourbplus-font-body);
  font-size: 18px;
  color: #aaa;
  text-decoration: line-through;
}

.fourbplus-product-per-unit {
  font-family: "Manrope", var(--fourbplus-font-body);
  font-size: 14px;
  color: #999;
}

/* Badge row */
.fourbplus-product-badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.fourbplus-product-badge {
  background: #f0ede8;
  color: #555;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

/* Short description */
.fourbplus-product-short-desc {
  font-family: "Manrope", var(--fourbplus-font-body);
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 0;
}

/* Cart Form wrapper */
.fourbplus-cart-form {
  margin: 0;
}

.fourbplus-cart-form--variable .single_variation {
  margin-bottom: 12px;
}

.fourbplus-cart-form--variable .woocommerce-variation-price {
  margin-bottom: 16px;
}

.fourbplus-cart-form--variable .woocommerce-variation-price .price {
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--fourbplus-primary);
  line-height: 1.2;
  margin: 0 0 10px;
  display: block;
}

.fourbplus-cart-form--variable
  .woocommerce-variation-price
  .afb2b_role_template_div {
  display: none !important;
}

.fourbplus-cart-form--variable
  .woocommerce-variation-price
  .afb2b_role_template_header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.fourbplus-cart-form--variable
  .woocommerce-variation-price
  .afb2b_role_template_header
  h2 {
  margin: 0;
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #2b2b2b;
}

.fourbplus-cart-form--variable
  .woocommerce-variation-price
  .afb2b_role_deals_icon {
  width: 18px;
  height: 18px;
}

.fourbplus-cart-form--variable
  .woocommerce-variation-price
  .afb2b_role_table_div
  table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dfdfdf;
  border-radius: 10px;
  overflow: hidden;
}

.fourbplus-cart-form--variable
  .woocommerce-variation-price
  .afb2b_role_table
  thead
  th {
  font-family: "Manrope", var(--fourbplus-font-body), sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 8px;
}

.fourbplus-cart-form--variable
  .woocommerce-variation-price
  .afb2b_role_table
  tbody
  td {
  font-family: "Manrope", var(--fourbplus-font-body), sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #3a3a3a;
  padding: 8px;
  border-top: 1px solid #ececec;
  text-align: center;
}

.fourbplus-cart-form--variable
  .woocommerce-variation-price
  .dynamic_price_display {
  display: none !important;
}

.fourbplus-cart-form--variable .fourbplus-tier-matrix {
  margin-top: 8px;
  margin-bottom: 10px;
}

.fourbplus-cart-form--variable .fourbplus-tier-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 0;
  transform-origin: left center;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.fourbplus-cart-form--variable .fourbplus-tier-row.is-active {
  transform: scale(1.015);
}

.fourbplus-cart-form--variable .fourbplus-tier-old {
  font-family: "Manrope", var(--fourbplus-font-body), sans-serif;
  font-size: 17px;
  color: #8f8f8f;
  text-decoration: line-through;
  text-align: left;
  white-space: nowrap;
  margin-right: 0;
}

.fourbplus-cart-form--variable .fourbplus-tier-new {
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: #111;
  white-space: nowrap;
}

.fourbplus-cart-form--variable .fourbplus-tier-row.is-active .fourbplus-tier-new {
  color: var(--fourbplus-primary);
}

.fourbplus-cart-form--variable .fourbplus-tier-row.is-active .fourbplus-tier-old {
  color: #111;
}

.fourbplus-cart-form--variable .fourbplus-tier-row.is-active .woocommerce-Price-amount.amount {
  color: #111;
}

.fourbplus-cart-form--variable .fourbplus-tier-row .woocommerce-Price-amount.amount {
  color: inherit;
}

.fourbplus-cart-form--variable .fourbplus-tier-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fourbplus-cart-form--variable .fourbplus-tier-range {
  font-family: "Manrope", var(--fourbplus-font-body), sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5d5d5d;
  line-height: 1.2;
}

.fourbplus-cart-form--variable .fourbplus-tier-range-num {
  color: var(--fourbplus-secondary);
  font-size: 14px;
  font-weight: 900;
}

.fourbplus-variations-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}

.fourbplus-variations-table .label {
  width: 100%;
  display: block;
  margin-bottom: 8px;
  text-align: left;
}

.fourbplus-variations-table .label label {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
}

.fourbplus-variations-table tr {
  display: block;
  margin-bottom: 14px;
}

.fourbplus-variations-table td.value {
  display: block;
  width: 100%;
}

.fourbplus-variation-select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #fff;
  padding: 0 42px 0 14px;
  font-family: "Manrope", var(--fourbplus-font-body), sans-serif;
  font-size: 16px;
  color: #232323;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23383838' stroke-width='2' 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;
}

.fourbplus-variation-select:focus {
  outline: 2px solid rgba(96, 209, 120, 0.35);
  outline-offset: 2px;
  border-color: var(--fourbplus-primary);
}

.fourbplus-variable-price {
  margin-bottom: 14px;
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fourbplus-primary);
}

.fourbplus-variable-price .price,
.fourbplus-variable-price .amount {
  color: inherit;
}

.fourbplus-variable-price del {
  margin-right: 8px;
  color: #999;
}

.fourbplus-variable-price ins {
  text-decoration: none;
}

/* Quantity Selector - per design */
.fourbplus-qty-section {
  margin-top: 6px;
  margin-bottom: 20px;
}

.fourbplus-qty-label {
  display: block;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fourbplus-qty-selector {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid #ddd;
  border-radius: 4px;
  width: fit-content;
}

.fourbplus-qty-btn {
  background: none;
  border: none;
  width: 40px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  color: #131313;
  font-weight: 300;
}

.fourbplus-qty-num,
.fourbplus-qty-input {
  width: 48px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #131313;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fourbplus-qty-input {
  border-top: none;
  border-bottom: none;
  background: transparent;
  -moz-appearance: textfield;
}

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

/* CTA row - Add to cart + Wishlist */
.fourbplus-cta-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

/* Add to cart extends .fourbplus-btn--primary with full width */
.fourbplus-cta-row .fourbplus-btn--primary,
.fourbplus-add-to-cart-btn {
  flex: 1;
  padding: 15px 24px;
  font-size: 16px;
  background: var(--fourbplus-primary);
  border-color: var(--fourbplus-primary);
  color: #ffffff;
}

.fourbplus-cta-row .fourbplus-btn--primary:hover,
.fourbplus-add-to-cart-btn:hover {
  background: #44c96a;
  border-color: #44c96a;
  color: #ffffff;
}

/* Added state - green success */
.fourbplus-cta-row .fourbplus-btn--primary.fourbplus-added,
.fourbplus-add-to-cart-btn.fourbplus-added {
  background: oklch(45% 0.14 145);
}

/* Wishlist extends .fourbplus-btn--outline with fixed height */
.fourbplus-cta-row .fourbplus-btn--outline,
.fourbplus-wishlist-btn {
  background: var(--fourbplus-white);
  border: 1.5px solid #ddd;
  color: #131313;
  padding: 0 16px;
  height: 54px;
  flex-shrink: 0;
}

/* Wishlist hover: crimson bg, white icon */
.fourbplus-cta-row .fourbplus-btn--outline:hover,
.fourbplus-wishlist-btn:hover {
  background: #131313;
  color: #ffffff;
  border-color: #131313;
}

/* Wishlist icon inherits white on hover */
.fourbplus-cta-row .fourbplus-btn--outline:hover svg,
.fourbplus-cta-row .fourbplus-btn--outline:hover i,
.fourbplus-wishlist-btn:hover svg,
.fourbplus-wishlist-btn:hover i {
  color: var(--fourbplus-white);
}

.fourbplus-cta-row .fourbplus-btn--outline.active,
.fourbplus-wishlist-btn.active {
  background: #131313;
  color: #ffffff;
  border-color: #131313;
}

/* Delivery info box */
.fourbplus-delivery-box {
  background: #f9f7f4;
  border-radius: 6px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

.fourbplus-delivery-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #555;
}

.fourbplus-delivery-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.fourbplus-delivery-item strong {
  color: #333;
}

.fourbplus-qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fourbplus-qty-input {
  width: 50px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--fourbplus-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--fourbplus-text-dark);
}

.fourbplus-qty-input:focus {
  outline: none;
}

/* Add to Cart */
.fourbplus-product-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.fourbplus-add-to-cart-main {
  flex: 1;
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border: none;
  padding: 16px 32px;
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--fourbplus-btn-radius);
  cursor: pointer;
  transition: background var(--fourbplus-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.fourbplus-add-to-cart-main:hover {
  background: var(--fourbplus-crimson-light);
}

.fourbplus-add-to-cart-main svg {
  width: 20px;
  height: 20px;
}

.fourbplus-wishlist-btn {
  background: var(--fourbplus-white);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--fourbplus-btn-radius);
  padding: 16px;
  cursor: pointer;
  color: var(--fourbplus-text-muted);
  transition: all var(--fourbplus-transition-fast);
}

.fourbplus-wishlist-btn:hover {
  color: var(--fourbplus-crimson);
  border-color: var(--fourbplus-crimson);
}

.fourbplus-wishlist-btn.active {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border-color: var(--fourbplus-crimson);
}

.fourbplus-wishlist-btn svg {
  width: 20px;
  height: 20px;
}

/* Product Tabs - White card container per Figma design */
.fourbplus-product-tabs {
  margin-top: 32px;
  /* Container width minus gutter on each side (1336px = 1400 - 64) */
  max-width: var(--fourbplus-container-width);
  margin-left: auto;
  margin-right: auto;
  background: var(--fourbplus-white);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Tabs header with border-bottom #eee */
.fourbplus-tabs-header {
  display: flex;
  border-bottom: 1px solid #eee;
}

/* Tab button - 55px height with border-bottom per Figma */
.fourbplus-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 16px 24px;
  height: 55px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition:
    color var(--fourbplus-transition-fast),
    border-color var(--fourbplus-transition-fast);
}

.fourbplus-tab-btn:hover {
  color: #131313;
}

/* Active tab - crimson text + crimson border-bottom-2 */
.fourbplus-tab-btn.active {
  color: #131313;
  border-bottom-color: #131313;
}

/* Tab content area - 28px padding */
.fourbplus-tab-content {
  display: none;
  padding: 28px;
}

.fourbplus-tab-content.active {
  display: block;
}

.fourbplus-tab-content p {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: #555;
  line-height: 23.8px; /* 1.7 */
}

/* Related Products Section - per Figma node 1:627 */
.fourbplus-related-section {
  padding: 40px 0 60px;
  background: var(--fourbplus-cream);
}

/* Container with max-width and padding */
.fourbplus-related-container {
  max-width: var(--fourbplus-container-width);
  margin: 0 auto;
  padding: 0 var(--fourbplus-gutter);
}

/* "You May Also Like" title - left-aligned per Figma */
.fourbplus-related-title {
  font-family: "Sora", var(--fourbplus-font-body);
  font-size: 32px;
  font-weight: 700;
  color: #131313;
  margin-bottom: 24px;
}

/* 4-column grid per Figma design (319px cards each) */
.fourbplus-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* =============================================
   CART PAGE
   Extends base page layout
   ============================================= */

/* Cart page inherits from base */
.fourbplus-page-wrapper--cart {
  /* Inherits cream bg from base */
}

/* Cart layout - 2-column flex with explicit container sizing */
.fourbplus-page-wrapper--cart .fourbplus-page-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  /* Explicit container sizing to match shop/product pages */
  max-width: var(--fourbplus-container-width, 1400px);
  margin: 0 auto;
  padding: 0 var(--fourbplus-gutter, 32px);
  padding-top: 32px;
}

/* Cart main element - flex child of page-layout, flex container for children */
.fourbplus-cart-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Legacy class support (deprecated) */
.fourbplus-cart-page {
  background: var(--fourbplus-cream);
  padding: 0 0 var(--fourbplus-section-padding);
}

.fourbplus-cart-layout {
  max-width: var(--fourbplus-container-width);
  margin: 0 auto;
  padding: 0 var(--fourbplus-gutter);
  padding-top: 32px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding-bottom: 60px;
}

.fourbplus-cart-items-wrapper {
  flex: 1;
}

/* Free Shipping Progress - matches design */
.fourbplus-free-shipping-progress {
  background: var(--fourbplus-secondary);
  border-radius: 6px;
  padding: 14px 20px;
  margin-bottom: 16px;
  font-size: 14px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fourbplus-free-shipping-progress.free-shipping-unlocked {
  background: var(--fourbplus-primary);
  color: #fff;
}

.fourbplus-free-shipping-progress strong {
  font-weight: 700;
}

/* Shipping progress bar - matches design */
.fourbplus-shipping-progress {
  flex: 1;
  height: 6px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  max-width: 200px;
}

.fourbplus-shipping-fill {
  height: 100%;
  background: var(--fourbplus-primary);
  border-radius: 4px;
  transition: width 0.5s;
}

/* Cart Items - matches design */
.fourbplus-cart-items {
  background: var(--fourbplus-white);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 8px 24px;
}

.fourbplus-cart-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  align-items: flex-start;
  border-bottom: 1px solid #f0f0f0;
}

.fourbplus-cart-item:last-child {
  border-bottom: none;
}

.fourbplus-cart-item-img {
  width: 100px;
  height: 100px;
  background: var(--fourbplus-cream);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fourbplus-cart-item-img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.fourbplus-cart-item-info {
  flex: 1;
  min-width: 0;
}

.fourbplus-cart-item-brand {
  font-family: var(--fourbplus-font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--fourbplus-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.fourbplus-cart-item-name {
  font-family: var(--fourbplus-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--fourbplus-text-dark);
  margin-bottom: 4px;
  display: block;
}

.fourbplus-cart-item-weight {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: #999;
  margin-bottom: 8px;
  display: block;
}

.fourbplus-cart-item-meta {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-text-muted);
}

.fourbplus-cart-item-remove-link {
  background: none;
  border: none;
  color: #c0392b;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-family: var(--fourbplus-font-body);
  text-decoration: underline;
  display: inline-block;
  margin-top: 4px;
}

.fourbplus-cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.fourbplus-cart-item-total {
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #131313;
}

.fourbplus-cart-item-total .fourbplus-price-regular {
  font-size: 14px;
  font-weight: 500;
  color: #999;
  text-decoration: line-through;
  margin-right: 8px;
}

.fourbplus-cart-item-total .fourbplus-price-discounted {
  color: var(--fourbplus-primary);
}

.fourbplus-cart-item-total .fourbplus-price-regular .woocommerce-Price-amount {
  color: #999;
}

.fourbplus-cart-item-total .fourbplus-price-discounted .woocommerce-Price-amount {
  color: var(--fourbplus-primary) !important;
}

.fourbplus-cart-item-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid #ddd;
  border-radius: 4px;
}

.fourbplus-cart-qty-btn {
  background: none;
  border: none;
  width: 32px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  color: #131313;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fourbplus-cart-qty-btn:hover {
  color: var(--fourbplus-primary);
}

.fourbplus-cart-qty-num {
  width: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fourbplus-font-body);
}

.fourbplus-cart-qty-input {
  order: 2;
  width: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  height: 36px;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background: transparent;
  font-family: var(--fourbplus-font-body);
  color: var(--fourbplus-text-dark);
  -moz-appearance: textfield;
}

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

.fourbplus-cart-qty-minus {
  order: 1;
}

.fourbplus-cart-qty-plus {
  order: 3;
}

.fourbplus-cart-item-price {
  display: none; /* Not used in design - showing total instead */
}

.fourbplus-cart-item-remove {
  display: none; /* Using text link instead */
}

/* Cart Summary Sidebar - matches design */
.fourbplus-cart-summary {
  width: 340px;
  flex-shrink: 0;
}

/* Summary Card - all elements inside one white card */
.fourbplus-cart-totals {
  background: var(--fourbplus-white);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}

.fourbplus-summary-title {
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #131313;
  margin: 0 0 16px;
}

.fourbplus-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #555;
  padding: 8px 0;
}

.fourbplus-summary-row.free-shipping {
  color: oklch(45% 0.14 145);
  font-weight: 700;
}

.fourbplus-summary-row.total-row {
  border-top: 1px solid #eee;
  padding-top: 14px;
  margin-top: 4px;
  font-weight: 800;
  font-size: 18px;
}

.fourbplus-summary-row.total-row span:last-child {
  color: var(--fourbplus-primary);
}

.fourbplus-coupon-row .fourbplus-coupon-value {
  color: oklch(40% 0.15 145);
  display: flex;
  align-items: center;
  gap: 8px;
}

.fourbplus-remove-coupon {
  font-size: 11px;
  color: #999;
  text-decoration: underline;
  white-space: nowrap;
}

.fourbplus-remove-coupon:hover {
  color: var(--fourbplus-primary);
}

.fourbplus-checkout-btn {
  width: 100%;
  background: var(--fourbplus-primary);
  color: #ffffff;
  border: none;
  padding: 16px 0;
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom: 12px;
  transition: background var(--fourbplus-transition-fast);
  display: block;
  text-align: center;
  text-decoration: none;
}

.fourbplus-checkout-btn:hover {
  background: var(--fourbplus-primary-light);
  color: #ffffff;
}

.fourbplus-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: #999;
  margin-bottom: 16px;
  font-family: var(--fourbplus-font-body);
}

/* Promo Row - inside summary card */
.fourbplus-promo-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.fourbplus-promo-form {
  display: flex;
  gap: 8px;
  width: 100%;
}

.fourbplus-summary-value {
  font-family: var(--fourbplus-font-body);
}

.fourbplus-summary-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 16px 0;
}

.fourbplus-summary-total {
  display: flex;
  justify-content: space-between;
}

.fourbplus-summary-total-label {
  font-family: var(--fourbplus-font-body);
  font-size: 16px;
  font-weight: 700;
  color: #131313;
}

.fourbplus-summary-total-value {
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--fourbplus-primary);
}

.fourbplus-checkout-btn {
  width: 100%;
  background: var(--fourbplus-primary);
  color: #ffffff;
  border: none;
  padding: 16px 0;
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom: 12px;
  transition: background var(--fourbplus-transition-fast);
  display: block;
  text-align: center;
  text-decoration: none;
}

.fourbplus-checkout-btn:hover {
  background: var(--fourbplus-primary-light);
  color: #ffffff;
}

/* Secure Note */
.fourbplus-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: #999;
  margin-bottom: 16px;
  font-family: var(--fourbplus-font-body);
}

/* Promo Code */
.fourbplus-promo-section {
  border-top: 1px solid #eee;
  padding-top: 16px;
  margin-bottom: 16px;
}

.fourbplus-promo-label {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fourbplus-text-dark);
  margin-bottom: 12px;
}

.fourbplus-promo-form {
  display: flex;
  gap: 8px;
}

.fourbplus-promo-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  outline: none;
}

.fourbplus-promo-input:focus {
  border-color: var(--fourbplus-primary);
}

.fourbplus-promo-btn {
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 16px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #555;
}

/* Payment Icons */
.fourbplus-payment-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.fourbplus-payment-icon {
  font-size: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 3px 8px;
  color: #888;
  font-family: var(--fourbplus-font-body);
}

/* Continue Shopping Button */
.fourbplus-continue-shopping {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  color: #555;
  font-family: var(--fourbplus-font-body);
  display: inline-block;
  text-decoration: none;
  margin-top: 16px;
  transition:
    border-color 0.15s,
    color 0.15s;
}

.fourbplus-continue-shopping:hover {
  border-color: var(--fourbplus-primary);
  color: var(--fourbplus-primary);
}

/* =============================================
   RESPONSIVE WOOCOMMERCE
   ============================================= */

@media (max-width: 767px) {
  .fourbplus-shop-layout {
    flex-direction: column;
    padding: 0 16px;
  }

  .fourbplus-filter-sidebar {
    width: 100%;
    display: none; /* Hidden, toggle via button */
  }

  .fourbplus-filter-sidebar.open {
    display: block;
    margin-bottom: 24px;
  }

  .fourbplus-shop-toolbar {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .fourbplus-shop-toolbar .fourbplus-shop-count {
    order: 1;
  }

  .fourbplus-shop-toolbar .fourbplus-view-toggle {
    order: 2;
  }

  .fourbplus-shop-toolbar .woocommerce-ordering {
    order: 3;
    width: 100%;
  }

  .fourbplus-shop-toolbar .orderby {
    width: 100%;
  }

  .fourbplus-products-grid,
  ul.products,
  ul.products.columns-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fourbplus-product-card-img {
    height: 168px;
  }

  .fourbplus-product-card-content {
    padding: 20px 16px 0;
    gap: 8px;
  }

  .fourbplus-product-card-title {
    font-size: 18px;
    min-height: 40px;
    line-height: 1.35;
  }

  .fourbplus-product-card-price {
    font-size: 16px;
  }

  .fourbplus-add-to-cart-btn,
  .fourbplus-select-options-btn,
  .fourbplus-view-product-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .fourbplus-product-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 16px;
  }

  .fourbplus-variations-table {
    margin-bottom: 16px;
  }

  .fourbplus-variations-table .label label {
    font-size: 16px;
  }

  .fourbplus-variation-select {
    min-height: 46px;
    font-size: 16px;
  }

  /* Use native mobile select UI to avoid scaled/misaligned popup in mobile browsers/devtools */
  .fourbplus-cart-form--variable .fourbplus-variation-select {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: auto;
    background-image: none;
    padding-right: 14px;
    line-height: 1.35;
  }

  .fourbplus-gallery-main {
    height: 320px;
  }

  .fourbplus-cart-layout {
    flex-direction: column;
    padding: 0 16px;
  }

  /* New unified layout responsive */
  .fourbplus-page-wrapper--cart .fourbplus-page-layout {
    flex-direction: column;
    padding: 0 16px;
  }

  .fourbplus-cart-summary {
    width: 100%;
    order: -1;
  }

  .fourbplus-cart-item {
    flex-wrap: wrap;
    gap: 12px;
  }

  .fourbplus-cart-item-img {
    width: 80px;
    height: 80px;
  }

  .fourbplus-cart-item-right {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
  }

  .fourbplus-cross-sells-grid {
    flex-direction: column;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fourbplus-shop-layout {
    flex-wrap: wrap;
    gap: 24px;
  }

  .fourbplus-filter-sidebar {
    width: 220px;
  }

  .fourbplus-shop-toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .fourbplus-shop-toolbar .woocommerce-ordering {
    order: 3;
  }

  .fourbplus-products-grid,
  ul.products,
  ul.products.columns-4 {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .fourbplus-product-card-img {
    height: 180px;
  }

  .fourbplus-product-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fourbplus-cart-layout {
    flex-direction: column;
    gap: 24px;
  }

  /* New unified layout responsive */
  .fourbplus-page-wrapper--cart .fourbplus-page-layout {
    flex-direction: column;
    gap: 24px;
  }

  .fourbplus-cart-summary {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* =============================================
   CHECKOUT PAGE
   Header: breadcrumb + title + progress steps
   Layout: form card + order summary sidebar
   ============================================= */

/* Checkout form wrapper - display:contents makes it invisible to flex layout */
.fourbplus-checkout-form-wrapper {
  display: contents;
}

/* Checkout header extends base page header */
.fourbplus-page-header--checkout {
  padding-bottom: 28px;
}

/* Progress steps - inside header, centered */
.fourbplus-checkout-progress-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 24px;
}

/* Step indicator */
.fourbplus-checkout-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fourbplus-checkout-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.fourbplus-checkout-step--active .fourbplus-checkout-step-circle {
  background: var(--fourbplus-primary);
  color: #131313;
}

.fourbplus-checkout-step-label {
  font-family: var(--fourbplus-font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.44px;
  color: #aaa;
  text-align: center;
}

.fourbplus-checkout-step--active .fourbplus-checkout-step-label {
  color: var(--fourbplus-primary);
}

/* Step connector line */
.fourbplus-checkout-step-line {
  width: 209px;
  height: 2px;
  background: #e0e0e0;
  margin-top: 16px;
}

/* Checkout main element */
.fourbplus-checkout-main {
  flex: 1;
  min-width: 0;
}

/* Order-pay: address blocks inside the billing/shipping card */
.fourbplus-order-pay-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}

.fourbplus-order-pay-address-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--fourbplus-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fourbplus-order-pay-address-block address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fourbplus-text-dark);
}

@media (max-width: 600px) {
  .fourbplus-order-pay-addresses {
    grid-template-columns: 1fr;
  }
}

/* Notices inside checkout main — full-width block, not a rogue flex column */
.fourbplus-checkout-main .woocommerce-notices-wrapper {
  width: 100%;
}
.fourbplus-checkout-main .woocommerce-notices-wrapper:empty {
  display: none;
}

/* Sidebar */
.fourbplus-checkout-sidebar {
  width: 320px;
  flex-shrink: 0;
}

/* Form card - white with shadow */
.fourbplus-checkout-form-card {
  background: var(--fourbplus-white);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 28px;
  overflow: clip;
}

/* Section title */
.fourbplus-checkout-section-title {
  font-family: "Sora", var(--fourbplus-font-body), sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #131313;
  margin: 0 0 20px;
}

/* =============================================
   FORM COMPONENTS (Reusable)
   Figma: https://www.figma.com/design/q2Ur63Sh2MEV9vN1o2JboB (node 30:35)
   ============================================= */

/* Form field container */
.fourbplus-form-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Form label */
.fourbplus-form-label {
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.6px;
  color: #555;
  text-transform: uppercase;
  display: block;
}

/* Form input */
.fourbplus-form-input {
  width: 100%;
  height: 46px;
  background: #fafafa;
  border: 1.5px solid #ddd;
  border-radius: 4px;
  padding: 11px 14px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-dark);
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.fourbplus-form-input:focus {
  border-color: var(--fourbplus-primary);
  background: var(--fourbplus-white);
  box-shadow: 0 0 0 2px rgba(82, 224, 120, 0.2);
}

.fourbplus-form-input::placeholder {
  color: rgba(10, 10, 10, 0.5);
}

/* Form row - 2 columns */
.fourbplus-form-row {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.fourbplus-form-row .fourbplus-form-field {
  flex: 1;
  min-width: 0;
}

/* Form row - 3 columns */
.fourbplus-form-row--3col {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.fourbplus-form-row--3col .fourbplus-form-field {
  flex: 1;
  min-width: 0;
}

/* Continue button - standalone (step 1) */
.fourbplus-checkout-continue-btn {
  background: var(--fourbplus-primary);
  color: var(--fourbplus-white);
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 28px;
  transition: background 0.2s;
  display: inline-block;
  text-decoration: none;
}

.fourbplus-checkout-continue-btn:hover {
  background: var(--fourbplus-primary-light);
}

/* Button row (Back + Continue side by side) */
.fourbplus-checkout-btn-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  align-items: center;
}

.fourbplus-checkout-btn-row .fourbplus-checkout-continue-btn,
.fourbplus-checkout-btn-row .fourbplus-checkout-back-btn {
  margin-top: 0;
  flex: 0 0 auto;
}

.fourbplus-checkout-back-btn {
  background: var(--fourbplus-white);
  color: var(--fourbplus-primary);
  font-family: var(--fourbplus-font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  border: 1.5px solid var(--fourbplus-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
  text-decoration: none;
}

.fourbplus-checkout-back-btn:hover {
  background: #f3f8f3;
}

/* Order summary card */
.fourbplus-order-summary-card {
  background: var(--fourbplus-white);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 28px;
}

/* Order items */
.fourbplus-order-items {
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.fourbplus-order-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.fourbplus-order-item:last-child {
  border-bottom: none;
}

.fourbplus-order-item-img {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  /* overflow: hidden; */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fourbplus-order-item-img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.fourbplus-order-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--fourbplus-primary);
  color: var(--fourbplus-white);
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fourbplus-order-item-name {
  flex: 1;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--fourbplus-text-dark);
  line-height: 21px;
}

.fourbplus-order-item-price {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--fourbplus-text-dark);
}

.fourbplus-order-item-price .fourbplus-price-regular {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  text-decoration: line-through;
  margin-right: 6px;
}

.fourbplus-order-item-price .fourbplus-price-discounted {
  color: var(--fourbplus-primary);
}

/* Order totals */
.fourbplus-order-totals {
  padding-top: 4px;
}

.fourbplus-order-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: #666;
}

.fourbplus-order-row--total {
  border-top: 1px solid #eee;
  padding-top: 13px;
  margin-top: 4px;
  font-weight: 800;
  font-size: 18px;
  color: var(--fourbplus-primary);
}

/* =============================================
   MULTI-STEP CHECKOUT - Shipping & Payment
   ============================================= */

/* Completed step indicator */
.fourbplus-checkout-step--done .fourbplus-checkout-step-circle {
  background: var(--fourbplus-primary);
  color: #fff;
}

/* Shipping options */
.fourbplus-shipping-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.fourbplus-shipping-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--fourbplus-white);
}

.fourbplus-shipping-option:hover {
  border-color: #ccc;
}

.fourbplus-shipping-option--active {
  border-color: var(--fourbplus-primary);
  background: #f3f8f3;
}

.fourbplus-shipping-option input[type="radio"] {
  accent-color: var(--fourbplus-primary);
  width: 18px;
  height: 18px;
  margin: 0;
}

.fourbplus-shipping-option-content {
  flex: 1;
}

.fourbplus-shipping-option-label {
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--fourbplus-text-dark);
}

.fourbplus-shipping-option-sub {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}

.fourbplus-shipping-option-price {
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 15px;
  color: #131313;
}

.fourbplus-shipping-price--free {
  color: oklch(45% 0.14 145); /* Green for FREE */
}

.fourbplus-shipping-option-price[data-free="true"],
.fourbplus-shipping-option--active
  .fourbplus-shipping-option-price:first-of-type {
  color: oklch(45% 0.14 145); /* Green for FREE */
}

/* Payment gateway containers (dynamic) */
.fourbplus-payment-method {
  margin-bottom: 12px;
}

.fourbplus-payment-method-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--fourbplus-white);
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.fourbplus-payment-method-header:hover {
  border-color: #ccc;
}

.fourbplus-payment-method--active .fourbplus-payment-method-header {
  border-color: var(--fourbplus-primary);
  background: #f3f8f3;
}

.fourbplus-payment-method-header input[type="radio"] {
  accent-color: var(--fourbplus-primary);
  width: 18px;
  height: 18px;
  margin: 0;
}

.fourbplus-payment-method-title {
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--fourbplus-text-dark);
  flex: 1;
}

.fourbplus-payment-method-header img {
  max-height: 24px;
}

/* Payment method fields container */
.fourbplus-payment-method-fields {
  padding: 20px;
  background: #f3f8f3;
  border-radius: 0 0 6px 6px;
  border: 1.5px solid var(--fourbplus-primary);
  border-top: none;
  margin-top: -1px;
}

/* Stripe form adjustments */
.fourbplus-payment-method-fields .wc-stripe-upe-form,
.fourbplus-payment-method-fields .wc-payment-form {
  background: transparent;
  padding: 0;
}

.fourbplus-payment-method-fields fieldset {
  border: none;
  padding: 0;
}

/* Stripe test mode info styling */
.fourbplus-payment-method-fields .testmode-info {
  background: #fff8e5;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #666;
}

/* Stripe Elements - wrapper styling */
.fourbplus-payment-method-fields .wc-stripe-upe-element {
  background: var(--fourbplus-white);
  border: 1.5px solid #ddd;
  border-radius: 4px;
  padding: 11px 14px;
  margin-bottom: 12px;
}

/* Stripe state classes */
.fourbplus-stripe-focused {
  border-color: var(--fourbplus-primary);
  background: var(--fourbplus-white);
  box-shadow: 0 0 0 2px rgba(82, 224, 120, 0.2);
}

.fourbplus-stripe-invalid {
  border-color: #d00;
  background: #fff5f5;
}

.fourbplus-stripe-empty {
  background: #fafafa;
}

/* Terms checkbox */
.fourbplus-terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: #555;
  cursor: pointer;
  margin-top: 16px;
}

.fourbplus-terms-checkbox input[type="checkbox"] {
  accent-color: var(--fourbplus-primary);
  margin-top: 2px;
  width: 16px;
  height: 16px;
}

.fourbplus-terms-checkbox span {
  line-height: 1.5;
}

.fourbplus-link {
  color: var(--fourbplus-primary);
  text-decoration: underline;
}

/* Confirmation panel */
.fourbplus-checkout-confirmation {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  background: transparent;
  box-shadow: none;
  padding: 40px;
}

/* Confirmation card layout */
.fourbplus-checkout-confirmation {
  text-align: center;
}

.fourbplus-confirmation-icon {
  width: 64px;
  height: 64px;
  background: var(--fourbplus-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.fourbplus-confirmation-title {
  font-family: var(--fourbplus-font-heading);
  font-size: 28px;
  font-weight: 700;
  color: #131313;
  margin: 0 0 12px;
}

.fourbplus-confirmation-message {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: #888;
  margin: 0 0 8px;
}

.fourbplus-confirmation-email {
  color: var(--fourbplus-text-dark);
  font-weight: 500;
}

.fourbplus-confirmation-order-num {
  display: inline-block;
  background: #f5f5f3;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: #555;
  margin: 16px 0 0;
}

.fourbplus-confirmation-order-num-value {
  font-weight: 700;
}

/* Confirmation buttons */
.fourbplus-checkout-confirmation .fourbplus-btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.fourbplus-checkout-confirmation .fourbplus-btn {
  min-width: 140px;
}

/* =============================================
   WOOCOMMERCE DEFAULT PAYMENT STYLING
   Override WooCommerce's payment output to match 4BPLUS design
   Override Stripe JS inline hiding of payment methods
   ============================================= */

/* Force ALL payment method li to display - override Stripe JS inline styles */
ul.payment_methods.methods li,
ul.payment_methods.methods li.payment_method_stripe,
ul.payment_methods.methods li.payment_method_stripe_afterpay_clearpay,
ul.payment_methods.methods li.payment_method_stripe_clearpay,
ul.payment_methods.methods li[style*="display: none"],
ul.payment_methods.methods li[style*="display:none"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Payment methods list */
ul.payment_methods.methods {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each payment method item */
ul.payment_methods.methods li {
  margin-bottom: 12px;
  padding: 0;
  list-style: none;
  position: relative;
}

/* Payment method radio input - visually hidden, label is clickable */
ul.payment_methods.methods li input.input-radio[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Payment method label (styled as clickable card) */
ul.payment_methods.methods li label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--fourbplus-white);
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--fourbplus-text-dark);
  position: relative;
}

/* Add radio visual indicator */
ul.payment_methods.methods li label::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1.5px solid #ccc;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.15s;
}

/* Hover state */
ul.payment_methods.methods li label:hover {
  border-color: #ccc;
}

ul.payment_methods.methods li label:hover::before {
  border-color: var(--fourbplus-primary);
}

/* Selected payment method - checked radio via sibling selector */
ul.payment_methods.methods li input.input-radio:checked + label {
  border-color: var(--fourbplus-primary);
  background: #f3f8f3;
}

ul.payment_methods.methods li input.input-radio:checked + label::before {
  background: var(--fourbplus-primary);
  border-color: var(--fourbplus-primary);
  box-shadow: inset 0 0 0 3px #fff;
}

/* ALSO apply selected style when woocommerce-PaymentMethod--selected class is present */
ul.payment_methods.methods li.woocommerce-PaymentMethod--selected label {
  border-color: var(--fourbplus-primary);
  background: #f3f8f3;
}

ul.payment_methods.methods
  li.woocommerce-PaymentMethod--selected
  label::before {
  background: var(--fourbplus-primary);
  border-color: var(--fourbplus-primary);
  box-shadow: inset 0 0 0 3px #fff;
}

/* Payment method icons */
ul.payment_methods.methods li label img {
  max-height: 24px;
  margin-left: auto;
}

/* Payment box (fields container) */
.payment_box {
  padding: 20px;
  background: #f3f8f3;
  border-radius: 0 0 6px 6px;
  border: 1.5px solid var(--fourbplus-primary);
  border-top: none;
  margin-top: -3px;
}

/* Hide payment_box for unselected methods */
ul.payment_methods.methods
  li:not(.woocommerce-PaymentMethod--selected)
  .payment_box {
  display: none !important;
}

/* Show payment_box for selected method */
ul.payment_methods.methods li.woocommerce-PaymentMethod--selected .payment_box {
  display: block !important;
}

/* Stripe UPE form styling inside payment_box */
.woocommerce-checkout-payment .payment_box .wc-stripe-upe-form,
.woocommerce-checkout-payment .payment_box .wc-payment-form {
  background: transparent;
  padding: 0;
}

.woocommerce-checkout-payment .payment_box fieldset {
  border: none;
  padding: 0;
}

/* Stripe test mode info */
.woocommerce-checkout-payment .payment_box .testmode-info {
  background: #fff8e5;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #666;
}

/* Stripe Elements container */
.woocommerce-checkout-payment .payment_box .wc-stripe-upe-element {
  background: var(--fourbplus-white);
  border: 1.5px solid #ddd;
  border-radius: 4px;
  padding: 11px 14px;
  margin-bottom: 12px;
}

/* Hide WooCommerce's default Place Order button - we use our own */
.woocommerce-checkout-payment .place-order {
  display: none;
}

/* Hide WooCommerce's default terms checkbox - we use our own */
.woocommerce-checkout-payment .woocommerce-terms-and-conditions-wrapper {
  display: none;
}

/* =============================================
   CHECKOUT PAGE - Button overrides
   ============================================= */

/* Checkout back button - outline variant without border */
.fourbplus-page-wrapper--checkout .fourbplus-btn--outline {
  border: none;
  background: transparent;
  color: var(--fourbplus-primary);
}

.fourbplus-page-wrapper--checkout .fourbplus-btn--outline:hover {
  background: #f3f8f3;
}

.fourbplus-page-wrapper--checkout .fourbplus-btn--primary {
  background: var(--fourbplus-primary);
  color: #ffffff;
}

.fourbplus-page-wrapper--checkout .fourbplus-btn--primary:hover {
  background: var(--fourbplus-primary-light);
  color: #ffffff;
}

/* Button row container for checkout */
.fourbplus-page-wrapper--checkout .fourbplus-btn-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  align-items: center;
}

.fourbplus-page-wrapper--checkout .fourbplus-btn-row .fourbplus-btn {
  margin-top: 0;
}

.fourbplus-page-wrapper--checkout .fourbplus-btn-row--center {
  justify-content: center;
}

/* =============================================
   404 Page
   ============================================= */

.fourbplus-page-wrapper--404 .fourbplus-page-layout {
  justify-content: center;
}

.fourbplus-404-content {
  text-align: center;
  padding: 60px 0;
  max-width: 480px;
  margin: 0 auto;
}

.fourbplus-404-code {
  font-family: var(--fourbplus-font-heading);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  color: var(--fourbplus-crimson);
  margin: 0 0 16px;
  opacity: 0.15;
}

.fourbplus-404-message {
  font-size: 16px;
  color: var(--fourbplus-text-muted);
  margin: 0 0 32px;
}

.fourbplus-404-content .fourbplus-btn-row {
  justify-content: center;
  gap: 12px;
}

/* =============================================
   ORDER SUMMARY (Sidebar)
   ============================================= */

/* Cross-sells - matches design */
.fourbplus-cross-sells {
  background: var(--fourbplus-white);
  border-radius: 8px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fourbplus-cross-sells-title {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.fourbplus-cross-sells-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fourbplus-cross-sell-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.fourbplus-cross-sell-item:last-child {
  border-bottom: none;
}

.fourbplus-cross-sell-img {
  width: 48px;
  height: 48px;
  background: var(--fourbplus-cream);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fourbplus-cross-sell-img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.fourbplus-cross-sell-name {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--fourbplus-text-dark);
  flex: 1;
}

.fourbplus-cross-sell-price {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--fourbplus-crimson);
}

.fourbplus-cross-add-form {
  display: flex;
}

.fourbplus-cross-add-btn {
  background: var(--fourbplus-crimson);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--fourbplus-font-body);
  transition: background 0.15s;
}

.fourbplus-cross-add-btn:hover {
  background: var(--fourbplus-crimson-light);
}

/* =============================================
   DELIVERY INFO BOX
   ============================================= */

.fourbplus-delivery-box {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  padding: 16px;
  margin-top: 24px;
}

.fourbplus-delivery-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.fourbplus-delivery-item svg {
  color: var(--fourbplus-secondary);
}

.fourbplus-delivery-item span {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-text-muted);
}

/* =============================================
   PRODUCT BRAND
   ============================================= */

.fourbplus-product-brand {
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--fourbplus-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 8px;
}

/* Enforce single-product visual spec (overrides legacy generic declarations below). */
.fourbplus-page-wrapper--product .fourbplus-product-brand {
  color: var(--fourbplus-primary);
  margin-bottom: -8px;
}

.fourbplus-page-wrapper--product .fourbplus-delivery-box {
  background: #f9f7f4;
  padding: 16px 20px;
  margin-top: 2px;
}

.fourbplus-page-wrapper--product .fourbplus-delivery-item {
  color: #555;
  gap: 10px;
  padding: 0;
}

.fourbplus-page-wrapper--product .fourbplus-delivery-item i,
.fourbplus-page-wrapper--product .fourbplus-delivery-item svg {
  color: #555;
}

/* =============================================
   ACCOUNT STATS & NAV
   ============================================= */

.fourbplus-stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.fourbplus-stat-number {
  font-family: var(--fourbplus-font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--fourbplus-crimson);
  line-height: 1;
}

.fourbplus-stat-label {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-text-muted);
}

/* Account Navigation Sidebar styles moved to account.css */

/* Quick Actions */
.fourbplus-quick-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.fourbplus-quick-action-btn {
  background: var(--fourbplus-white);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--fourbplus-btn-radius);
  padding: 12px 20px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-crimson);
  text-decoration: none;
  transition: all var(--fourbplus-transition-fast);
}

.fourbplus-quick-action-btn:hover {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border-color: var(--fourbplus-crimson);
}

/* Orders Table */
.fourbplus-orders-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fourbplus-white);
  border-radius: 6px;
  overflow: hidden;
}

.fourbplus-orders-table th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--fourbplus-text-muted);
  background: var(--fourbplus-cream);
}

.fourbplus-orders-table td {
  padding: 14px 16px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-dark);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.fourbplus-order-btn {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--fourbplus-btn-radius);
  padding: 6px 14px;
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  color: var(--fourbplus-crimson);
  text-decoration: none;
  transition: all var(--fourbplus-transition-fast);
}

.fourbplus-order-btn:hover {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border-color: var(--fourbplus-crimson);
}

/* Address Card */
.fourbplus-addresses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.fourbplus-address-card {
  background: var(--fourbplus-white);
  border-radius: 6px;
  padding: 20px;
}

.fourbplus-address-content {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.fourbplus-edit-btn {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--fourbplus-btn-radius);
  padding: 8px 16px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-crimson);
  text-decoration: none;
  transition: all var(--fourbplus-transition-fast);
}

.fourbplus-edit-btn:hover {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border-color: var(--fourbplus-crimson);
}

/* No items messages */
.fourbplus-no-orders,
.fourbplus-no-address,
.fourbplus-wishlist-empty {
  text-align: center;
  padding: 32px;
  color: var(--fourbplus-text-muted);
}

.fourbplus-wishlist-empty svg {
  margin-bottom: 16px;
  color: var(--fourbplus-text-muted);
}

.fourbplus-shop-btn {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border: none;
  border-radius: var(--fourbplus-btn-radius);
  padding: 12px 24px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-top: 16px;
  transition: background var(--fourbplus-transition-fast);
}

.fourbplus-shop-btn:hover {
  background: var(--fourbplus-crimson-light);
}

/* =============================================
   RESPONSIVE CHECKOUT
   ============================================= */

@media (max-width: 767px) {
  .fourbplus-page-wrapper--checkout .fourbplus-page-layout {
    flex-direction: column;
    gap: 20px;
    padding: 0 16px;
    padding-top: 20px;
  }

  .fourbplus-page-wrapper--checkout .fourbplus-checkout-main,
  .fourbplus-page-wrapper--checkout .fourbplus-checkout-sidebar {
    width: 100%;
    min-width: 0;
  }

  .fourbplus-page-wrapper--checkout .fourbplus-checkout-sidebar {
    order: -1;
  }

  .fourbplus-page-wrapper--checkout .fourbplus-summary-card,
  .fourbplus-page-wrapper--checkout .fourbplus-order-summary-card {
    position: static;
  }

  .fourbplus-checkout-form-card {
    padding: 20px 16px;
  }

  .fourbplus-checkout-progress-steps {
    align-items: center;
  }

  .fourbplus-checkout-step-line {
    width: clamp(28px, 10vw, 56px);
  }

  .fourbplus-checkout-step-label {
    font-size: 10px;
    letter-spacing: 0.2px;
    max-width: 74px;
  }

  .fourbplus-cross-sells-grid {
    flex-direction: column;
  }

  .fourbplus-addresses-grid {
    grid-template-columns: 1fr;
  }

  .fourbplus-stats-row {
    flex-wrap: wrap;
  }

  .fourbplus-stat-card {
    flex: 1;
    min-width: 100px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fourbplus-page-wrapper--checkout .fourbplus-page-layout {
    flex-direction: column;
    gap: 24px;
  }

  .fourbplus-page-wrapper--checkout .fourbplus-checkout-sidebar {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    order: -1;
  }
}

/* =============================================
   MY ACCOUNT PAGE
   Extends base page layout
   ============================================= */

/* Reset WooCommerce default floats for account layout */
.fourbplus-page-wrapper--account .woocommerce-MyAccount-navigation,
.fourbplus-page-wrapper--account .woocommerce-MyAccount-content {
  float: none;
}

/* Account page inherits from base */
.fourbplus-page-wrapper--account {
  /* Inherits cream bg from base */
}

/* Account layout - 2-column with navigation sidebar */
.fourbplus-page-wrapper--account .fourbplus-page-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  /* Explicit container sizing to match shop/product/cart/checkout pages */
  max-width: var(--fourbplus-container-width, 1400px);
  margin: 0 auto;
  padding: 0 var(--fourbplus-gutter, 32px);
  padding-top: 32px;
}

/* Account main element - flex child, fills remaining space */
.fourbplus-account-main {
  flex: 1;
  min-width: 0;
  width: 0; /* let flex control width, not content */
}

.fourbplus-account-main .woocommerce-MyAccount-content {
  width: 100%;
  float: none;
  padding: 0;
  background: none;
}

/* Account navigation sidebar */
.fourbplus-account-nav {
  width: 218px;
  flex-shrink: 0;
}

/* Account content wrapper - takes remaining space */
.fourbplus-account-content-wrapper {
  flex: 1;
  min-width: 0;
}

/* Account navigation sidebar - WooCommerce wrapper */
.fourbplus-account-nav .woocommerce-MyAccount-navigation {
  /* Nav menu handles its own styling */
  float: none;
  width: auto;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Nav inherits from .fourbplus-nav-menu styles */
.fourbplus-account-nav .woocommerce-MyAccount-navigation ul {
  /* Override removed - .fourbplus-nav-menu handles styling */
}

/* Account content wrapper - takes remaining space */
.fourbplus-account-content-wrapper {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.fourbplus-account-content-wrapper .woocommerce-MyAccount-content {
  background: var(--fourbplus-white);
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  width: 100%;
}

/* Fallback for endpoints rendered without wrapper class */
.fourbplus-account-main > .woocommerce-MyAccount-content {
  background: var(--fourbplus-white);
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  width: 100%;
}

/* Account content headings */
.fourbplus-account-content-wrapper .woocommerce-MyAccount-content h2,
.fourbplus-account-content-wrapper .woocommerce-MyAccount-content h3 {
  font-family: var(--fourbplus-font-display);
  color: var(--fourbplus-text-dark);
  margin-bottom: 16px;
}

/* Account tables */
.fourbplus-account-content-wrapper .woocommerce-table {
  width: 100%;
  border-collapse: collapse;
}

.fourbplus-account-content-wrapper .woocommerce-table th,
.fourbplus-account-content-wrapper .woocommerce-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.fourbplus-account-content-wrapper .woocommerce-table th {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--fourbplus-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =============================================
   RESPONSIVE ACCOUNT
   ============================================= */

@media (max-width: 767px) {
  .fourbplus-page-wrapper--account .fourbplus-page-layout {
    flex-direction: column;
  }

  .fourbplus-account-nav {
    width: 100%;
    order: 1;
  }

  .fourbplus-account-nav .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .fourbplus-account-nav .woocommerce-MyAccount-navigation li a {
    padding: 8px 12px;
    font-size: 13px;
  }

  .fourbplus-account-content-wrapper {
    order: 2;
  }

  .fourbplus-account-content-wrapper .woocommerce-MyAccount-content {
    padding: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fourbplus-account-nav {
    width: 200px;
  }

  .fourbplus-account-nav .woocommerce-MyAccount-navigation li a {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* Account Content Styling */
.fourbplus-account-title {
  font-family: var(--fourbplus-font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--fourbplus-crimson);
  margin: 0 0 24px;
}

.fourbplus-account-subtitle {
  font-family: var(--fourbplus-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--fourbplus-text-dark);
  margin: 32px 0 16px;
}

/* Edit Account Form */
.fourbplus-edit-account-form {
  background: var(--fourbplus-white);
  border-radius: 6px;
  padding: 24px;
}

/* =============================================
   RESPONSIVE PRODUCT PAGE
   ============================================= */

@media (max-width: 767px) {
  /* Product page - single column on mobile */
  .fourbplus-page-wrapper--product .fourbplus-page-layout {
    padding-top: 24px;
  }

  .fourbplus-product-main {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fourbplus-product-gallery {
    order: 1;
  }

  .fourbplus-product-info {
    order: 2;
  }

  .fourbplus-product-main-title {
    font-size: 24px;
  }

  .fourbplus-gallery-main {
    height: 320px;
  }

  .fourbplus-gallery-thumb {
    width: 72px;
    aspect-ratio: 1 / 1;
  }

  .fourbplus-delivery-box {
    padding: 12px;
  }

  /* Tabs - scrollable on mobile */
  .fourbplus-tabs-header {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .fourbplus-tab-btn {
    font-size: 13px;
    padding: 14px 16px;
    height: auto;
    white-space: nowrap;
  }

  .fourbplus-tab-content {
    padding: 20px;
  }

  /* Related section - 1 column on mobile */
  .fourbplus-related-title {
    font-size: 24px;
  }

  .fourbplus-related-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Product page - maintain 2-column but reduce gap */
  .fourbplus-product-main {
    gap: 32px;
  }

  .fourbplus-product-main-title {
    font-size: 28px;
  }

  .fourbplus-gallery-main {
    height: 400px;
  }

  /* Tabs - reduce padding on tablet */
  .fourbplus-tab-btn {
    padding: 16px 20px;
  }

  .fourbplus-tab-content {
    padding: 24px;
  }

  /* Related section - 3 columns on tablet */
  .fourbplus-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Add Payment Method page — extend checkout payment styles
   ========================================================================== */

/* Reuse same Stripe UPE inner styles as checkout */
#add_payment_method .payment_box .wc-stripe-upe-form,
#add_payment_method .payment_box .wc-payment-form {
  background: transparent;
  padding: 0;
}

#add_payment_method .payment_box fieldset {
  border: none;
  padding: 0;
}

#add_payment_method .payment_box .testmode-info {
  background: #fff8e5;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #666;
}

#add_payment_method .payment_box .wc-stripe-upe-element {
  background: var(--fourbplus-white);
  border: 1.5px solid #ddd;
  border-radius: 4px;
  padding: 11px 14px;
  margin-bottom: 12px;
}

/* ==========================================================================
   Stripe hidden style extraction input — v10.5.0+ client-side appearance path
   The WC Stripe JS reads getComputedStyle() from this element on
   add-payment-method and order-pay pages to build the Stripe Appearance object.
   Styling it here ensures the iframe form matches the 4BPLUS design system.
   ========================================================================== */
#wc-stripe-hidden-style-input {
  font-family:
    "DM Sans",
    -apple-system,
    "system-ui",
    sans-serif !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  background-color: #fafaf8 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}