/* ============================================================================
 * WooCommerce Custom Theme Integration CSS
 *
 * Integrates WooCommerce templates and loops with the Winbonds Web design
 * system tokens (--wb-color-brand, --wb-color-ink, --wb-space-*, etc.).
 * Keep code modular, clean, and completely custom.
 * ========================================================================== */

/* 1. Global & Layout adjustments */
.wb-woocommerce-section {
  padding-block: var(--wb-section-y);
  background-color: var(--wb-color-bg);
  /* Contain the full-bleed (100vw) A+ section's scrollbar-width overshoot so it
     never produces a horizontal scrollbar. `clip` (not `hidden`) avoids creating
     a scroll container, so sticky headers keep working. */
  overflow-x: clip;
}

.woocommerce-breadcrumb {
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-sm);
  color: var(--wb-color-text-muted);
  margin-bottom: var(--wb-space-6);
}
.woocommerce-breadcrumb a {
  color: var(--wb-color-brand);
  text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
  color: var(--wb-color-brand-hover);
  text-decoration: underline;
}

/* 2. Products Grid (Shop page) */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: var(--wb-space-6) !important;
  margin: var(--wb-space-6) 0 var(--wb-space-10) !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Hide WooCommerce default clear floats inside grid */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background-color: var(--wb-color-bg-soft);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  padding: var(--wb-space-4);
  display: flex !important;
  flex-direction: column;
  position: relative;
  transition: transform var(--wb-duration-base) var(--wb-ease), box-shadow var(--wb-duration-base) var(--wb-ease);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(11, 15, 23, 0.15);
  border-color: rgba(37, 99, 235, 0.2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--wb-radius-md);
  margin-bottom: var(--wb-space-4) !important;
  background-color: var(--wb-color-bg-muted);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-base);
  font-weight: var(--wb-fw-semibold) !important;
  color: var(--wb-color-ink);
  margin: 0 0 var(--wb-space-2) !important;
  padding: 0 !important;
  line-height: 1.3;
}

.woocommerce ul.products li.product .price {
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-sm);
  color: var(--wb-color-brand);
  font-weight: var(--wb-fw-bold);
  margin-bottom: var(--wb-space-4) !important;
  display: block;
}

.woocommerce ul.products li.product .price del {
  color: var(--wb-color-text-muted);
  font-weight: var(--wb-fw-normal);
  margin-right: var(--wb-space-2);
}

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

/* 3. Global WooCommerce Buttons styling (maps onto .wb-btn) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.375rem !important;
  font-family: var(--wb-font-sans) !important;
  font-size: var(--wb-text-sm) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--wb-color-white) !important;
  background-color: var(--wb-color-brand) !important;
  background-image: linear-gradient(180deg, #4f8cff 0%, var(--wb-color-brand) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--wb-radius-md) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 8px 16px -6px rgba(37, 99, 235, 0.4) !important;
  transition: all var(--wb-duration-base) var(--wb-ease) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover {
  background-image: linear-gradient(180deg, #5a96ff 0%, #2563eb 100%) !important;
  box-shadow: 0 12px 20px -6px rgba(37, 99, 235, 0.5) !important;
  transform: translateY(-1px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
  background-color: var(--wb-color-ink) !important;
  background-image: none !important;
  border-color: var(--wb-color-ink) !important;
  box-shadow: none !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-page button.button.alt:hover {
  background-color: var(--wb-color-ink-2) !important;
  border-color: var(--wb-color-ink-2) !important;
}

/* Loop Add to Cart Button alignment */
.woocommerce ul.products li.product .button {
  margin-top: auto !important;
  width: 100% !important;
}

/* Sale Badge */
.woocommerce span.onsale {
  position: absolute;
  top: var(--wb-space-6);
  left: var(--wb-space-6);
  background: var(--wb-color-brand) !important;
  color: var(--wb-color-white) !important;
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-xs);
  font-weight: 600;
  padding: 4px 10px !important;
  border-radius: var(--wb-radius-sm);
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1 !important;
  z-index: 10;
}

/* 4. Single Product Template
 * The PDP is a single, vertical column (see .wb-pdp-wrapper). This wrapper
 * carries the `product` class, so it MUST stay block-flow. The old
 * `grid-template-columns: 1fr 1fr` here was the real source of the desktop
 * 2-column split — every PDP section auto-flowed into two grid tracks. */
.woocommerce div.product {
  display: block;
  margin-top: var(--wb-space-6);
}

.woocommerce div.product div.images {
  width: 100% !important;
  float: none !important;
  margin-bottom: 0 !important;
}

.woocommerce div.product div.images img {
  border-radius: var(--wb-radius-lg);
  border: 1px solid var(--wb-color-border);
}

.woocommerce div.product div.summary {
  width: 100% !important;
  float: none !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}

.woocommerce div.product .product_title {
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-3xl);
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  margin-bottom: var(--wb-space-4) !important;
  line-height: 1.2;
}

.woocommerce div.product .woocommerce-product-rating {
  margin-bottom: var(--wb-space-4) !important;
}

.woocommerce div.product .price {
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-xl);
  color: var(--wb-color-brand) !important;
  font-weight: var(--wb-fw-bold);
  margin-bottom: var(--wb-space-6) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-base);
  line-height: 1.6;
  color: var(--wb-color-text);
  margin-bottom: var(--wb-space-6);
}

/* Add to Cart Area */
.woocommerce div.product form.cart {
  display: flex !important;
  gap: var(--wb-space-3);
  margin-bottom: var(--wb-space-6) !important;
}

.woocommerce div.product form.cart.variations_form {
  display: block !important;
}

.woocommerce div.product form.cart table.variations {
  width: 100% !important;
  margin-bottom: var(--wb-space-4) !important;
  border: 0 !important;
}

.woocommerce div.product form.cart table.variations td {
  padding: var(--wb-space-2) 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.woocommerce div.product form.cart table.variations td.label {
  width: 80px;
  font-weight: var(--wb-fw-semibold);
  font-size: var(--wb-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wb-color-ink);
  vertical-align: middle;
}

.woocommerce div.product form.cart table.variations select {
  width: 100%;
  max-width: 280px;
  padding: 0.75rem var(--wb-space-3);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-sm);
  background-color: var(--wb-color-bg-soft);
  color: var(--wb-color-ink);
}

.woocommerce div.product form.cart.variations_form .single_variation_wrap {
  margin-top: var(--wb-space-4);
  border-top: 1px solid var(--wb-color-border);
  padding-top: var(--wb-space-4);
}

.woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: flex;
  gap: var(--wb-space-3);
  align-items: center;
}

.woocommerce div.product form.cart .quantity {
  margin: 0 !important;
}

.woocommerce div.product form.cart .quantity input {
  padding: 0.75rem var(--wb-space-3);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-sm);
  background-color: var(--wb-color-bg-soft);
  color: var(--wb-color-ink);
  width: 70px;
  height: 100%;
}

/* Product Meta */
.product_meta {
  border-top: 1px solid var(--wb-color-border);
  padding-top: var(--wb-space-4);
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-xs);
  color: var(--wb-color-text-muted);
}
.product_meta span {
  display: block;
  margin-bottom: var(--wb-space-1);
}
.product_meta a {
  color: var(--wb-color-brand);
  text-decoration: none;
}

/* Tabs section */
.woocommerce-tabs {
  margin-top: var(--wb-space-12);
  border-top: 1px solid var(--wb-color-border);
  padding-top: var(--wb-space-8);
}

.woocommerce-tabs ul.tabs {
  display: flex !important;
  gap: var(--wb-space-4) !important;
  border-bottom: 1px solid var(--wb-color-border) !important;
  padding: 0 !important;
  margin: 0 0 var(--wb-space-6) !important;
  list-style: none !important;
  background: transparent !important;
}

.woocommerce-tabs ul.tabs::before {
  display: none !important;
}

.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 0 var(--wb-space-3) !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.woocommerce-tabs ul.tabs li a {
  font-family: var(--wb-font-sans) !important;
  font-size: var(--wb-text-sm) !important;
  font-weight: var(--wb-fw-semibold) !important;
  color: var(--wb-color-text-muted) !important;
  text-decoration: none !important;
  padding: 0 !important;
  border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--wb-color-brand) !important;
  border-bottom-color: var(--wb-color-brand);
}

.woocommerce-Tabs-panel {
  font-family: var(--wb-font-sans);
  color: var(--wb-color-text);
  line-height: 1.6;
}

.woocommerce-Tabs-panel h2 {
  font-size: var(--wb-text-lg) !important;
  margin-bottom: var(--wb-space-4);
}

/* 5. Cart Page styling */
.woocommerce-cart-form {
  margin-bottom: var(--wb-space-10);
}

.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  overflow: hidden;
  font-family: var(--wb-font-sans);
}

.shop_table th {
  background-color: var(--wb-color-bg-soft);
  color: var(--wb-color-ink);
  font-weight: 600;
  padding: var(--wb-space-4);
  text-align: left;
  border-bottom: 1px solid var(--wb-color-border);
}

.shop_table td {
  padding: var(--wb-space-4);
  border-bottom: 1px solid var(--wb-color-border);
  vertical-align: middle;
}

.cart-collaterals {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-space-8);
  margin-top: var(--wb-space-8);
}

@media (min-width: 768px) {
  .cart-collaterals {
    grid-template-columns: 1fr 1fr;
  }
  .cart-collaterals .cart_totals {
    grid-column: 2;
  }
}

.cart_totals {
  background-color: var(--wb-color-bg-soft);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  padding: var(--wb-space-6);
}

.cart_totals h2 {
  font-size: var(--wb-text-xl);
  margin-bottom: var(--wb-space-4);
}

/* 6. Checkout Page styling
 *
 * NOTE: do NOT add a bare `.woocommerce-checkout { display:grid }` rule here.
 * WordPress puts `woocommerce-checkout` on the <body> element, so such a rule
 * turns the whole page body into a 2-column grid and drops the footer into the
 * second column beside <main> (footer-at-top bug). The checkout's own 2-column
 * layout is handled by `.wb-checkout-grid` inside form-checkout.php. */

#customer_details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-space-6);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
  font-size: var(--wb-text-lg);
  margin-bottom: var(--wb-space-4);
  border-bottom: 1px solid var(--wb-color-border);
  padding-bottom: var(--wb-space-2);
}

.form-row {
  margin-bottom: var(--wb-space-4);
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-xs);
  font-weight: 600;
  margin-bottom: var(--wb-space-1);
  color: var(--wb-color-ink);
}

.form-row input.input-text,
.form-row select,
.form-row textarea {
  padding: 0.75rem var(--wb-space-3);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-sm);
  background-color: var(--wb-color-bg-soft);
  color: var(--wb-color-ink);
  transition: border-color var(--wb-duration-base) var(--wb-ease);
}

.form-row input.input-text:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--wb-color-brand);
  outline: none;
}

#order_review {
  background-color: var(--wb-color-bg-soft);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  padding: var(--wb-space-6);
}

/* 7. WooCommerce Notices (Alerts) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-sm);
  padding: var(--wb-space-4) var(--wb-space-6) !important;
  border-radius: var(--wb-radius-md) !important;
  margin: 0 0 var(--wb-space-6) !important;
  list-style: none !important;
  position: relative;
  background-color: var(--wb-color-bg-soft) !important;
  border: 1px solid var(--wb-color-border) !important;
  color: var(--wb-color-text) !important;
}

/* Custom border highlights to align with theme notices */
.woocommerce-message {
  border-left: 4px solid #10b981 !important; /* Success Green */
}

.woocommerce-info {
  border-left: 4px solid var(--wb-color-brand) !important; /* Brand Blue */
}

.woocommerce-error {
  border-left: 4px solid #ef4444 !important; /* Error Red */
  margin-left: 0 !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
  float: right;
  padding: 0.5rem 1rem !important;
  font-size: var(--wb-text-xs) !important;
  box-shadow: none !important;
  margin-top: -4px !important;
}

/* ── HELLO HUNK PREMIUM D2C PRODUCT CARD ─────────────────────────────────── */

/* Override WooCommerce list grid layout overrides */
.woocommerce ul.products li.wb-product-grid-card {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  display: block !important;
}

.wb-product-card {
  position: relative;
  background-color: var(--wb-color-white);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--wb-duration-base) var(--wb-ease), box-shadow var(--wb-duration-base) var(--wb-ease), border-color var(--wb-duration-base) var(--wb-ease);
}

.wb-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px -12px rgba(15, 23, 42, 0.12);
  border-color: var(--wb-color-brand);
}

.wb-product-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--wb-color-bg-soft);
  overflow: hidden;
}

.wb-product-card__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.wb-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wb-duration-slow) var(--wb-ease);
}

.wb-product-card:hover .wb-product-card__image {
  transform: scale(1.04);
}

/* Badges Overlay */
.wb-product-card__badges {
  position: absolute;
  top: var(--wb-space-3);
  left: var(--wb-space-3);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-1);
  pointer-events: none;
}

.wb-product-card__badges .wb-product-badge {
  font-size: 10px;
  font-weight: var(--wb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--wb-color-white);
  line-height: 1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.wb-product-badge--sale { background-color: var(--wb-color-badge-sale); }
.wb-product-badge--new { background-color: var(--wb-color-badge-new); }
.wb-product-badge--bestseller { background-color: var(--wb-color-badge-bestseller); }

/* Wishlist Heart Button */
.wb-product-card__wishlist-btn {
  position: absolute;
  top: var(--wb-space-3);
  right: var(--wb-space-3);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: var(--wb-radius-full);
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--wb-color-border);
  color: var(--wb-color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--wb-shadow-xs);
  transition: all var(--wb-duration-fast) var(--wb-ease);
  padding: 0;
}

.wb-product-card__wishlist-btn:hover {
  background-color: var(--wb-color-white);
  border-color: var(--wb-color-accent);
  color: var(--wb-color-accent);
  transform: scale(1.05);
}

.wb-product-card__wishlist-btn.is-active {
  background-color: var(--wb-color-white);
  border-color: var(--wb-color-accent);
  color: var(--wb-color-accent);
}

.wb-product-card__wishlist-btn.is-active svg {
  fill: var(--wb-color-accent);
}

/* Quick-Add Slider Overlay */
.wb-product-card__quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.85) 40%, rgba(15, 23, 42, 0.95) 100%);
  padding: var(--wb-space-4) var(--wb-space-3) var(--wb-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-2);
  transform: translateY(100%);
  transition: transform var(--wb-duration-base) var(--wb-ease);
}

.wb-product-card:hover .wb-product-card__quick-add {
  transform: translateY(0);
}

.wb-quick-add-label {
  font-size: 9px;
  font-weight: var(--wb-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.wb-size-chips {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
}

.wb-size-chip {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--wb-radius-sm);
  color: var(--wb-color-white);
  font-size: 10px;
  font-weight: var(--wb-fw-semibold);
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--wb-duration-fast) var(--wb-ease);
  padding: 0;
}

.wb-size-chip:hover {
  background-color: var(--wb-color-white);
  color: var(--wb-color-ink);
  border-color: var(--wb-color-white);
}

.wb-size-chip.is-loading {
  background-color: var(--wb-color-brand) !important;
  color: var(--wb-color-white) !important;
  border-color: var(--wb-color-brand) !important;
  pointer-events: none;
  opacity: 0.8;
}

/* Simple Add-to-Cart Override in Quick Add */
.wb-product-card__quick-add--simple {
  background: rgba(15, 23, 42, 0.7);
  padding: var(--wb-space-3);
  transform: translateY(100%);
  display: block;
}

.wb-product-card__quick-add--simple .wb-quick-add-simple-btn {
  margin: 0 !important;
  width: 100% !important;
  font-size: 11px !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
}

/* Product Info Block */
.wb-product-card__content {
  padding: var(--wb-space-4) var(--wb-space-4) var(--wb-space-5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.wb-product-card__category {
  font-size: 9px;
  font-weight: var(--wb-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wb-color-text-muted);
  margin-bottom: 3px;
  display: block;
}

.wb-product-card__title {
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-semibold);
  margin: 0 0 6px !important;
  line-height: 1.35;
  padding: 0 !important;
}

.wb-product-card__title a {
  color: var(--wb-color-ink);
  text-decoration: none;
  transition: color var(--wb-duration-fast) var(--wb-ease);
}

.wb-product-card__title a:hover {
  color: var(--wb-color-brand);
}

/* Star Ratings Restyling */
.wb-product-card__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.wb-product-card__rating .star-rating {
  font-size: 11px;
  color: #fbbf24; /* Amber Gold stars */
  width: 5.4em;
  margin: 0 !important;
  float: none !important;
}

.wb-rating-count {
  font-size: 10px;
  color: var(--wb-color-text-muted);
}

/* Prices */
.wb-product-card__price {
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  display: flex;
  align-items: center;
  gap: var(--wb-space-2);
  margin-top: auto;
}

.wb-product-price-reg {
  color: var(--wb-color-text-muted);
  font-weight: var(--wb-fw-medium);
  font-size: 11px;
  text-decoration: line-through;
  opacity: 0.85;
}

.wb-product-price-sale {
  color: var(--wb-color-accent);
  background: transparent;
  text-decoration: none;
}

.wb-product-price-current .woocommerce-Price-amount {
  color: var(--wb-color-ink);
}

/* Global Star Rating styling override */
.star-rating span::before {
  color: #fbbf24;
}

/* ── SHOP ARCHIVE & CATEGORY GRID LAYOUT ─────────────────────────────────── */

.wb-shop-breadcrumbs {
  margin-bottom: var(--wb-space-4);
}
.wb-shop-breadcrumbs .woocommerce-breadcrumb {
  margin-bottom: 0;
}

.wb-archive-control-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 70px; /* Aligns directly under standard sticky header */
  background-color: var(--wb-color-white);
  border-bottom: 1px solid var(--wb-color-border);
  padding: var(--wb-space-3) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  margin-bottom: var(--wb-space-6);
}

.wb-archive-control-bar__right {
  display: flex;
  align-items: center;
  gap: var(--wb-space-4);
}

.wb-mobile-filter-trigger {
  display: none;
}

.wb-archive-sort-dropdown select {
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-sm);
  color: var(--wb-color-ink);
  background-color: var(--wb-color-bg-soft);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  padding: 6px 12px;
  cursor: pointer;
}

.wb-archive-grid-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--wb-space-8);
  align-items: start;
}

.wb-archive-sidebar-inner {
  position: -webkit-sticky;
  position: sticky;
  top: 130px;
}

.wb-archive-sidebar-header {
  display: none;
}

/* Filter Groups inside Sidebar */
.wb-filter-group {
  margin-bottom: var(--wb-space-6);
  padding-bottom: var(--wb-space-6);
  border-bottom: 1px solid var(--wb-color-border);
}

.wb-filter-group:last-child {
  border-bottom: 0;
}

.wb-filter-group__title {
  font-size: 11px;
  font-weight: var(--wb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wb-color-ink);
  margin-bottom: var(--wb-space-4);
}

.wb-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3);
}

.wb-filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
  cursor: pointer;
}

.wb-filter-checkbox-label input[type="radio"] {
  accent-color: var(--wb-color-brand);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.wb-filter-checkbox-text {
  font-size: var(--wb-text-sm);
  color: var(--wb-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.wb-filter-count {
  font-size: var(--wb-text-xs);
  color: var(--wb-color-text-muted);
  background-color: var(--wb-color-bg-soft);
  padding: 2px 6px;
  border-radius: var(--wb-radius-sm);
  font-weight: var(--wb-fw-semibold);
}

/* Size swatches in filters */
.wb-filter-sizes-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wb-filter-size-chip {
  cursor: pointer;
}

.wb-filter-size-chip-box {
  width: 42px;
  height: 38px;
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  transition: all var(--wb-duration-fast) var(--wb-ease);
}

.wb-filter-size-chip-box:hover {
  border-color: var(--wb-color-brand);
}

.wb-filter-size-chip-box.is-active {
  background-color: var(--wb-color-brand);
  color: var(--wb-color-white);
  border-color: var(--wb-color-brand);
}

/* Mobile Responsive Sidebar Drawer Override */
@media (max-width: 992px) {
  
  .wb-archive-control-bar {
    top: 56px; /* standard mobile header offset */
    padding: var(--wb-space-2) 0;
  }

  .wb-mobile-filter-trigger {
    display: inline-flex;
  }

  .wb-archive-grid-layout {
    grid-template-columns: 1fr;
  }

  /* Transform sidebar wrapper into a sliding bottom drawer overlay */
  .wb-archive-sidebar-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(15, 23, 42, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--wb-duration-base) var(--wb-ease);
    display: block !important;
  }

  .wb-archive-sidebar-wrapper.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .wb-archive-sidebar-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--wb-color-white);
    border-top-left-radius: var(--wb-radius-lg);
    border-top-right-radius: var(--wb-radius-lg);
    padding: var(--wb-space-6) var(--wb-space-6) var(--wb-space-8);
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform var(--wb-duration-base) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .wb-archive-sidebar-wrapper.is-open .wb-archive-sidebar-inner {
    transform: translateY(0);
  }

  .wb-archive-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--wb-color-border);
    padding-bottom: var(--wb-space-3);
    margin-bottom: var(--wb-space-4);
  }

  .wb-archive-sidebar-header h3 {
    font-size: var(--wb-text-lg);
    font-weight: var(--wb-fw-bold);
    margin: 0;
  }

  .wb-archive-sidebar-close {
    border: 0;
    background: none;
    font-size: 28px;
    font-weight: var(--wb-fw-light);
    color: var(--wb-color-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: var(--wb-space-1);
  }
}

/* ── AMAZON/FLIPKART STYLE MY ACCOUNT PORTAL ────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation {
  display: none !important; /* Hide WooCommerce default sidebar */
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
}

/* Horizontal Sub-Navigation Tab Bar */
.wb-myaccount-navigation {
  margin-bottom: var(--wb-space-8);
  border-bottom: 1px solid var(--wb-color-border);
  padding-bottom: var(--wb-space-3);
}

.wb-myaccount-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-2);
}

.wb-myaccount-nav-link {
  display: block;
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wb-color-text-muted);
  background-color: var(--wb-color-bg-soft);
  padding: 8px 16px;
  border-radius: var(--wb-radius-full);
  text-decoration: none;
  transition: all var(--wb-duration-fast) var(--wb-ease);
}

.wb-myaccount-nav-link:hover {
  background-color: var(--wb-color-border);
  color: var(--wb-color-ink);
}

.wb-myaccount-nav-item.is-active .wb-myaccount-nav-link {
  background-color: var(--wb-color-brand);
  color: var(--wb-color-white);
}

.wb-myaccount-nav-link--logout {
  background-color: var(--wb-color-accent-soft);
  color: var(--wb-color-accent);
}
.wb-myaccount-nav-link--logout:hover {
  background-color: var(--wb-color-accent);
  color: var(--wb-color-white);
}

/* Welcome Banner Card styling */
.wb-myaccount-welcome-banner {
  display: flex;
  align-items: center;
  gap: var(--wb-space-6);
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: var(--wb-color-white);
  padding: var(--wb-space-6) var(--wb-space-8);
  border-radius: var(--wb-radius-lg);
  margin-bottom: var(--wb-space-8);
  box-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.15);
}

.wb-myaccount-welcome-banner__avatar img {
  width: 80px;
  height: 80px;
  border-radius: var(--wb-radius-full);
  border: 3px solid rgba(255, 255, 255, 0.15);
  object-fit: cover;
}

.wb-myaccount-welcome-banner__info {
  display: flex;
  flex-direction: column;
}

.wb-myaccount-welcome-banner__eyebrow {
  font-size: 11px;
  font-weight: var(--wb-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}

.wb-myaccount-welcome-banner__title {
  font-size: var(--wb-text-xl);
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-white);
  margin: 2px 0 0 !important;
  line-height: 1.2;
}

.wb-myaccount-welcome-banner__email {
  font-size: var(--wb-text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin: 3px 0 0;
}

.wb-myaccount-welcome-banner__stats {
  margin-left: auto;
}

.wb-stat-box {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--wb-space-3) var(--wb-space-6);
  border-radius: var(--wb-radius-md);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.wb-stat-value {
  font-size: var(--wb-text-2xl);
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-white);
  line-height: 1;
}

.wb-stat-label {
  font-size: 9px;
  font-weight: var(--wb-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

/* Dashboard Navigation Cards Grid */
.wb-myaccount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--wb-space-5);
}

.wb-myaccount-card {
  display: flex;
  gap: var(--wb-space-4);
  padding: var(--wb-space-5);
  background-color: var(--wb-color-white);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  text-decoration: none !important;
  transition: all var(--wb-duration-base) var(--wb-ease);
}

.wb-myaccount-card:hover {
  border-color: var(--wb-color-brand);
  box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.wb-myaccount-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--wb-radius-full);
  background-color: var(--wb-color-bg-soft);
  color: var(--wb-color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--wb-duration-fast) var(--wb-ease);
}

.wb-myaccount-card:hover .wb-myaccount-card__icon {
  background-color: var(--wb-color-brand);
  color: var(--wb-color-white);
}

.wb-myaccount-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wb-myaccount-card__content h3 {
  font-size: 15px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  margin: 0 0 3px !important;
  padding: 0 !important;
}

.wb-myaccount-card__content p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--wb-color-text-muted);
  margin: 0 !important;
}

/* Mobile responsive account styles */
@media (max-width: 768px) {
  
  .wb-myaccount-welcome-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--wb-space-5);
    gap: var(--wb-space-4);
  }

  .wb-myaccount-welcome-banner__stats {
    margin-left: 0;
    width: 100%;
  }

  .wb-stat-box {
    padding: var(--wb-space-3);
  }

  .wb-myaccount-grid {
    grid-template-columns: 1fr;
    gap: var(--wb-space-3);
  }

  .wb-myaccount-card {
    padding: var(--wb-space-4);
  }
}

/* ── UNIFIED QUICK-COMMERCE CHECKOUT (BLINKIT STYLE) ────────────────────── */

.wb-checkout-form {
  margin-top: var(--wb-space-4);
  margin-bottom: var(--wb-space-10);
}

/* Clear WooCommerce default floating behaviors which disrupt CSS grids */
.wb-checkout-form .col2-set,
.wb-checkout-form #customer_details,
.wb-checkout-form #order_review,
.wb-checkout-form #order_review_heading {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.wb-checkout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--wb-space-8);
  align-items: start;
}

.wb-checkout-card-box {
  background-color: var(--wb-color-white);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  padding: var(--wb-space-5) var(--wb-space-6);
  box-shadow: var(--wb-shadow-xs);
}

.wb-checkout-card-box__header {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
  border-bottom: 1px solid var(--wb-color-border-soft);
  padding-bottom: var(--wb-space-3);
  margin-bottom: var(--wb-space-5);
}

.wb-step-number {
  width: 22px;
  height: 22px;
  border-radius: var(--wb-radius-full);
  background-color: var(--wb-color-ink);
  color: var(--wb-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--wb-fw-bold);
}

.wb-checkout-card-box__header h3 {
  font-size: 15px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  margin: 0 !important;
  padding: 0 !important;
}

/* Right Sidebar Sticky Summary */
.wb-checkout-summary-card {
  background-color: var(--wb-color-bg-soft);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  padding: var(--wb-space-5) var(--wb-space-6);
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  box-shadow: var(--wb-shadow-xs);
}

.wb-summary-title {
  font-size: 14px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  margin: 0 0 var(--wb-space-4) !important;
  border-bottom: 1px solid var(--wb-color-border);
  padding-bottom: var(--wb-space-2);
}

/* Items List details */
.wb-checkout-items-list {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.wb-checkout-item-row {
  display: flex;
  gap: var(--wb-space-3);
  padding-bottom: var(--wb-space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: var(--wb-space-4);
}

.wb-checkout-item-row__thumb img {
  width: 50px;
  height: 62px;
  border-radius: var(--wb-radius-md);
  object-fit: cover;
  border: 1px solid var(--wb-color-border);
}

.wb-checkout-item-row__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.wb-checkout-item-row__info h4 {
  font-size: 12px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  margin: 0 0 3px !important;
}

.wb-checkout-item-row__info dd {
  font-size: 10px;
  color: var(--wb-color-text-muted);
  margin: 0 0 4px !important;
}

/* Qty Adjuster */
.wb-checkout-qty-adjuster {
  display: inline-flex;
  align-items: center;
  background-color: var(--wb-color-white);
  border: 1px solid var(--wb-color-border-strong);
  border-radius: var(--wb-radius-md);
  overflow: hidden;
  align-self: flex-start;
  margin-top: auto;
}

.wb-qty-adjust-btn {
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  padding: 2px 8px;
  cursor: pointer;
  transition: background-color var(--wb-duration-fast) var(--wb-ease);
}

.wb-qty-adjust-btn:hover {
  background-color: var(--wb-color-bg-muted);
}

.wb-qty-adjust-val {
  font-size: 11px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  padding: 0 6px;
  min-width: 14px;
  text-align: center;
}

.wb-checkout-item-row__price {
  font-size: 12px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  align-self: flex-start;
  margin-top: 2px;
}

/* Coupon Bar */
.wb-checkout-coupon-bar {
  display: flex;
  gap: var(--wb-space-2);
}

.wb-coupon-input {
  flex-grow: 1;
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.wb-checkout-coupon-bar .wb-btn {
  padding: 6px 16px !important;
  font-size: 11px !important;
}

/* Bill details box */
.wb-checkout-bill-details {
  background-color: var(--wb-color-white);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  padding: var(--wb-space-4);
}

.wb-bill-title {
  font-size: 11px;
  font-weight: var(--wb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wb-color-text-muted);
  border-bottom: 1px solid var(--wb-color-border-soft);
  padding-bottom: var(--wb-space-2);
  margin: 0 0 var(--wb-space-3) !important;
}

.wb-bill-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--wb-color-text-muted);
  margin-bottom: var(--wb-space-2);
}

.wb-bill-row--discount {
  color: var(--wb-color-success);
  font-weight: var(--wb-fw-semibold);
}

.wb-bill-row--grand-total {
  border-top: 1px dashed var(--wb-color-border-strong);
  padding-top: var(--wb-space-3);
  font-size: 14px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  margin-bottom: 0;
}

/* Restyle WooCommerce default payment method radio selections */
#payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--wb-space-4) !important;
}

#payment ul.payment_methods li.wc_payment_method {
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  padding: var(--wb-space-3) var(--wb-space-4);
  margin-bottom: var(--wb-space-2);
  transition: all var(--wb-duration-fast) var(--wb-ease);
}

#payment ul.payment_methods li.wc_payment_method:hover {
  border-color: var(--wb-color-border-strong);
  background-color: var(--wb-color-bg-soft);
}

#payment ul.payment_methods li.wc_payment_method input[type="radio"] {
  margin-right: var(--wb-space-2);
  accent-color: var(--wb-color-brand);
}

#payment ul.payment_methods li.wc_payment_method label {
  font-size: 12px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#payment ul.payment_methods li.wc_payment_method label img {
  max-height: 20px;
  width: auto;
  object-fit: contain;
}

#payment div.payment_box {
  background-color: var(--wb-color-bg-soft);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  padding: var(--wb-space-3);
  font-size: 11px;
  line-height: 1.5;
  color: var(--wb-color-text-muted);
  margin-top: var(--wb-space-2);
}

#payment div.payment_box p {
  margin: 0 !important;
}

/* Place Order block button */
.wb-checkout-action-btn-wrapper .wb-btn {
  font-size: 13px !important;
  letter-spacing: 0.05em;
  padding-block: var(--wb-space-4) !important;
}

/* Coupon status styles */
.wb-coupon-message.is-success {
  color: var(--wb-color-success);
}
.wb-coupon-message.is-error {
  color: var(--wb-color-danger);
}

/* Responsive checkout rules */
@media (max-width: 1024px) {
  .wb-checkout-grid {
    grid-template-columns: 1fr;
    gap: var(--wb-space-6);
  }

  .wb-checkout-summary-card {
    position: static;
  }
}

@media (max-width: 768px) {
  .wb-checkout-card-box {
    padding: var(--wb-space-4);
  }
  .wb-checkout-summary-card {
    padding: var(--wb-space-4);
  }
}

/* ── SINGLE PRODUCT DETAILS PAGE (PDP) STYLE SCHEME ────────────────────── */

.wb-pdp-wrapper {
  display: block !important; /* never let .woocommerce div.product grid re-columnize this */
  margin-top: var(--wb-space-4);
  margin-bottom: var(--wb-space-10);
  width: 100%;
  max-width: 100%;
}

/* Kill WooCommerce default 2-column float layout */
.wb-pdp-wrapper div.images,
.wb-pdp-wrapper div.summary,
.wb-pdp-wrapper .woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* ── PRODUCT TOP: 2-column (gallery | buy-box) ──
 * Mobile-first single column; splits into gallery + info side-by-side at ≥900px.
 * The wrapper stays block-flow (above), so only this block is a grid — that keeps
 * the full-bleed A+ section below it free to span the viewport. */
.wb-pdp-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-space-6);
  align-items: start;
  margin-bottom: var(--wb-space-10);
}

.wb-pdp-top__media,
.wb-pdp-top__info {
  min-width: 0; /* prevent long content / images from blowing out the grid track */
}

@media (min-width: 900px) {
  .wb-pdp-top {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--wb-space-10);
  }
  /* Gallery follows as the buy-box side scrolls (nice on tall summaries). */
  .wb-pdp-top__media {
    position: sticky;
    top: 96px;
  }
}

/* Single-column sections (legacy helper; retained for any other PDP blocks) */
.wb-pdp-section {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--wb-space-4);
  margin-bottom: var(--wb-space-6);
}

.wb-pdp-section--gallery {
  max-width: 600px;
}

/* Summary card */
.wb-pdp-summary-card {
  background: var(--wb-color-white);
  border: 1px solid var(--wb-color-border-soft);
  border-radius: var(--wb-radius-lg);
  padding: var(--wb-space-5);
  margin-bottom: var(--wb-space-5);
  box-shadow: var(--wb-shadow-xs);
}

.wb-pdp-summary-card .woocommerce-breadcrumb {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wb-pdp-summary-card .product_title {
  font-size: clamp(1.4rem, 2vw + 0.5rem, 2rem) !important;
  font-weight: var(--wb-fw-bold) !important;
  line-height: 1.2 !important;
  color: var(--wb-color-ink) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.wb-pdp-summary-card .star-rating {
  margin-bottom: var(--wb-space-3) !important;
}

.wb-pdp-summary-card .price {
  font-size: 24px !important;
  font-weight: var(--wb-fw-bold) !important;
  color: var(--wb-color-ink) !important;
  margin-bottom: var(--wb-space-4) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.wb-pdp-summary-card .price del {
  font-size: 15px !important;
  color: var(--wb-color-price-strike) !important;
  text-decoration: line-through !important;
  font-weight: normal !important;
}

.wb-pdp-summary-card .price ins {
  text-decoration: none !important;
  color: var(--wb-color-accent) !important;
  font-weight: var(--wb-fw-bold) !important;
}

.wb-pdp-summary-card .woocommerce-product-details__short-description {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--wb-color-text-muted) !important;
  margin-bottom: var(--wb-space-4) !important;
}

/* ── A+ CONTENT (INLINE, SHADOW-DOM ENCAPSULATED, FULL-BLEED) ── */
/* Break out of the centered .wb-container to span the full viewport width,
   edge to edge, at every breakpoint. The negative left/right margins pull the
   block to the viewport edges; no ancestor clips it (no overflow-x:hidden). */
.wb-pdp-aplus-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: var(--wb-space-8);
  margin-bottom: var(--wb-space-8);
  padding: 0;
}

/* Shadow host — content and its <style> live inside an open shadow root, so
   theme CSS neither styles into it nor is affected by it. Just make the host
   a full-width block; the A+ HTML controls everything within. */
.wb-aplus-root {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Swiper Gallery */
.wb-pdp-gallery-container {
  display: flex;
  flex-direction: column;
}

.wb-pdp-gallery-main {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--wb-radius-lg);
  overflow: hidden;
  border: 1px solid var(--wb-color-border);
  position: relative;
}

.wb-pdp-gallery-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wb-pdp-gallery-thumbs {
  width: 100%;
  padding-block: var(--wb-space-2);
}

.wb-pdp-gallery-thumbs .swiper-slide {
  width: 75px !important;
  opacity: 0.5;
  transition: opacity var(--wb-duration-fast) var(--wb-ease);
  cursor: pointer;
}

.wb-pdp-gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.wb-pdp-gallery-thumb-item {
  aspect-ratio: 4 / 5;
  border-radius: var(--wb-radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--wb-duration-fast) var(--wb-ease);
}

.wb-pdp-gallery-thumbs .swiper-slide-thumb-active .wb-pdp-gallery-thumb-item {
  border-color: var(--wb-color-brand);
}

.wb-pdp-gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Meta headers */
.wb-pdp-meta-header {
  margin-bottom: var(--wb-space-4);
  border-bottom: 1px solid var(--wb-color-border-soft);
  padding-bottom: var(--wb-space-3);
}

.wb-pdp-meta-header .woocommerce-breadcrumb {
  margin: 0 0 6px !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wb-pdp-title {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.15rem);
  font-weight: var(--wb-fw-bold);
  line-height: 1.2;
  color: var(--wb-color-ink);
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.wb-pdp-rating-summary {
  display: flex;
  align-items: center;
  gap: var(--wb-space-2);
  font-size: var(--wb-text-xs);
  color: var(--wb-color-text-muted);
}

.wb-pdp-rating-summary .star-rating {
  font-size: 11px;
}

/* Price Box details */
.wb-pdp-price-box {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
  margin-bottom: var(--wb-space-5);
}

.wb-pdp-price {
  font-size: 24px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  line-height: 1;
}

.wb-pdp-price--sale {
  color: var(--wb-color-accent);
}

.wb-pdp-price--regular {
  font-size: 16px;
  color: var(--wb-color-price-strike);
  text-decoration: line-through;
}

.wb-pdp-badge--sale {
  background-color: var(--wb-color-badge-sale);
  color: var(--wb-color-white);
  font-size: 11px;
  font-weight: var(--wb-fw-bold);
  padding: 4px 10px;
  border-radius: var(--wb-radius-full);
  line-height: 1;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(215, 25, 32, 0.15);
}

.wb-pdp-short-desc {
  font-size: var(--wb-text-sm);
  line-height: 1.6;
  color: var(--wb-color-text-muted);
  margin-bottom: var(--wb-space-6);
}

.wb-pdp-short-desc p {
  margin: 0 !important;
}

/* Swatch Selection Chips styling */
.wb-pdp-variations {
  margin-bottom: var(--wb-space-6);
}

.wb-pdp-variation-row {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-2);
  margin-bottom: var(--wb-space-4);
}

.wb-pdp-variation-row__label {
  font-size: 11px;
  font-weight: var(--wb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wb-color-text-muted);
}

.wb-pdp-swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wb-swatch-chip {
  min-width: 48px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wb-color-border-strong);
  background-color: var(--wb-color-white);
  color: var(--wb-color-ink);
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: var(--wb-fw-bold);
  cursor: pointer;
  transition: all var(--wb-duration-fast) var(--wb-ease);
}

.wb-swatch-chip:hover {
  border-color: var(--wb-color-brand);
}

.wb-swatch-chip.is-active {
  background-color: var(--wb-color-brand);
  color: var(--wb-color-white);
  border-color: var(--wb-color-brand);
}

.wb-swatch-chip.is-disabled {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}

/* PDP add to cart single button styles */
.wb-pdp-action-box {
  border-top: 1px solid var(--wb-color-border-soft);
  padding-top: var(--wb-space-4);
}

.wb-pdp-action-box div.quantity {
  margin-right: var(--wb-space-3) !important;
}

.wb-pdp-action-box div.quantity input.qty {
  width: 50px !important;
  height: 44px !important;
  border-radius: var(--wb-radius-md) !important;
  border: 1px solid var(--wb-color-border-strong) !important;
}

.wb-pdp-action-box button.single_add_to_cart_button {
  height: 44px !important;
  line-height: 44px !important;
  padding-block: 0 !important;
  padding-inline: var(--wb-space-8) !important;
  font-size: 13px !important;
  border-radius: var(--wb-radius-md) !important;
  background-color: var(--wb-color-brand) !important;
  color: var(--wb-color-white) !important;
  font-weight: var(--wb-fw-bold) !important;
  letter-spacing: 0.05em;
  transition: all var(--wb-duration-fast) var(--wb-ease) !important;
}

.wb-pdp-action-box button.single_add_to_cart_button:hover {
  background-color: var(--wb-color-brand-hover) !important;
}

/* Trust Badges Strip */
.wb-pdp-trust-strip {
  display: flex;
  justify-content: space-between;
  gap: var(--wb-space-3);
  border-top: 1px solid var(--wb-color-border-soft);
  border-bottom: 1px solid var(--wb-color-border-soft);
  padding-block: var(--wb-space-4);
  margin-top: var(--wb-space-6);
}

.wb-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: var(--wb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wb-color-text-muted);
}

.wb-trust-item svg {
  color: var(--wb-color-ink);
  flex-shrink: 0;
}

/* Accordions */
.wb-pdp-accordion-item {
  border-bottom: 1px solid var(--wb-color-border-soft);
  padding-bottom: var(--wb-space-3);
  margin-bottom: var(--wb-space-3);
  transition: border-color var(--wb-duration-fast) var(--wb-ease);
}

.wb-pdp-accordion-item[open] {
  border-color: var(--wb-color-border-strong);
}

.wb-pdp-accordion-title {
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wb-pdp-accordion-title::-webkit-details-marker {
  display: none;
}

.wb-pdp-accordion-title::after {
  content: "+";
  font-size: 16px;
  font-weight: var(--wb-fw-light);
  color: var(--wb-color-text-muted);
}

.wb-pdp-accordion-item[open] .wb-pdp-accordion-title::after {
  content: "\2212"; /* Minus sign */
}

.wb-pdp-accordion-content {
  padding-top: var(--wb-space-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--wb-color-text-muted);
}

.wb-pdp-accordion-content p {
  margin: 0 0 6px !important;
}
.wb-pdp-accordion-content p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .wb-pdp-trust-strip {
    flex-direction: column;
    gap: var(--wb-space-3);
  }
  .wb-pdp-section {
    max-width: 100%;
  }
  .wb-pdp-section--gallery {
    max-width: 100%;
  }
}

/* ── PDP-TO-LANDING PAGE INTERACTIVE SECTIONS ───────────────────────────── */

/* Pincode Estimator Widget */
.wb-pdp-pincode-box {
  background-color: var(--wb-color-bg-soft);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-md);
  padding: var(--wb-space-4);
}

.wb-pincode-title {
  font-size: 11px;
  font-weight: var(--wb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wb-color-text-muted);
  margin: 0 0 var(--wb-space-3) !important;
  line-height: 1;
}

.wb-pincode-field {
  display: flex;
  gap: 8px;
}

.wb-pincode-field .wb-input {
  flex-grow: 1;
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.wb-pincode-field .wb-btn {
  padding: 6px 16px !important;
  font-size: 11px !important;
}

.wb-pincode-feedback {
  font-size: 11px;
  font-weight: var(--wb-fw-semibold);
  margin-top: var(--wb-space-2);
}

.wb-pincode-feedback.is-success {
  color: var(--wb-color-success);
}

.wb-pincode-feedback.is-error {
  color: var(--wb-color-danger);
}

/* Landing Page Sections common spacing */
.wb-pdp-landing-section {
  padding-block: var(--wb-space-9);
  border-top: 1px solid var(--wb-color-border);
}

.wb-pdp-section-title {
  font-size: clamp(1.35rem, 2vw + 0.4rem, 1.85rem) !important;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  margin: 4px 0 0 !important;
}

/* Specs/Craftsmanship Grid */
.wb-spec-card {
  background-color: var(--wb-color-white);
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  padding: var(--wb-space-5);
  text-align: center;
  transition: all var(--wb-duration-base) var(--wb-ease);
}

.wb-spec-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wb-shadow-md);
  border-color: var(--wb-color-brand);
}

.wb-spec-card__icon {
  font-size: 28px;
  margin-bottom: var(--wb-space-3);
}

.wb-spec-card h3 {
  font-size: 14px;
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
  margin: 0 0 6px !important;
}

.wb-spec-card p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--wb-color-text-muted);
  margin: 0 !important;
}

/* Loom to Closet Fabric Section */
.wb-fabric-visual {
  display: flex;
  justify-content: center;
}

.wb-fabric-card {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 16 / 11;
  border-radius: var(--wb-radius-lg);
  border: 1px solid var(--wb-color-border);
  overflow: hidden;
  position: relative;
  box-shadow: var(--wb-shadow-xs);
  background-color: var(--wb-color-bg-soft);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

.wb-fabric-texture {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.03) 8%, transparent 8%);
  background-size: 10px 10px;
  opacity: 0.6;
}

.wb-fabric-label {
  position: absolute;
  bottom: var(--wb-space-4);
  left: var(--wb-space-4);
  background-color: rgba(17, 17, 17, 0.9);
  color: var(--wb-color-white);
  font-size: 9px;
  font-weight: var(--wb-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--wb-radius-sm);
}

.wb-fabric-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Brand Comparison Table */
.wb-comparison-table-wrapper {
  overflow-x: auto;
  max-width: 780px;
  margin-inline: auto;
  border: 1px solid var(--wb-color-border);
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-xs);
}

.wb-comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background-color: var(--wb-color-white);
  font-size: 12px;
}

.wb-comparison-table th,
.wb-comparison-table td {
  padding: var(--wb-space-4) var(--wb-space-5);
  border-bottom: 1px solid var(--wb-color-border-soft);
}

.wb-comparison-table th {
  background-color: var(--wb-color-bg-soft);
  font-weight: var(--wb-fw-bold);
  color: var(--wb-color-ink);
}

.wb-comparison-table td strong {
  color: var(--wb-color-ink);
}

.wb-comparison-table th.highlight,
.wb-comparison-table td.highlight {
  background-color: rgba(17, 17, 17, 0.015);
  font-weight: var(--wb-fw-bold);
  border-left: 2px solid var(--wb-color-brand);
  border-right: 2px solid var(--wb-color-brand);
}

.wb-comparison-table tr:last-child td {
  border-bottom: 0;
}

/* Responsive configurations */
@media (max-width: 768px) {
  .wb-pdp-landing-section {
    padding-block: var(--wb-space-6);
  }

  .wb-comparison-table th,
  .wb-comparison-table td {
    padding: var(--wb-space-3);
  }
}


/* Protect the global theme body styling against generic inline style blocks */
body.single-product {
  background-color: var(--wb-color-bg) !important;
  color: var(--wb-color-ink) !important;
  font-family: var(--wb-font-sans) !important;
}