/*
Theme Name: Astra Child RaRa
Theme URI: https://shop.raradeals.com
Template: astra
Author: RaRa Deals Team
Description: Premium mobile-first design child theme for RaRa Deals.
Version: 1.0.0
Text Domain: astra-child-rara
*/

/* ==========================================================================
   1. DESIGN TOKENS & VARIABLES
   ========================================================================== */
:root {
  --rara-primary: #7C3AED;
  --rara-secondary: #8B5CF6;
  --rara-success: #22C55E;
  --rara-warning: #D97706; /* darker orange/amber for better accessibility contrast (WCAG AA) */
  --rara-danger: #DC2626; /* darker red for accessibility contrast */
  --rara-bg: #FFFFFF;
  --rara-bg-sec: #F8FAFC;
  --rara-text: #0F172A; /* darker text color Slate-900 */
  --rara-text-sec: #334155; /* Slate-700 */
  --rara-muted: #475569; /* Slate-600 (WCAG AA compliant contrast ratio of 5.67:1 vs #FFF) */
  --rara-border: #E2E8F0;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.05);
  --shadow-hover: 0 10px 30px rgba(109, 40, 217, 0.12);

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* Section Spacing Variables */
  --section-gap-desktop: 24px;
  --section-gap-tablet: 20px;
  --section-gap-mobile: 16px;

  --section-padding-top: 24px;
  --section-padding-bottom: 24px;

  --section-heading-margin-bottom: 12px;
  --section-desc-margin-bottom: 12px;

  --hero-margin-bottom: 24px;
  --category-slider-margin-bottom: 20px;

  --cards-gap: 16px;
  --brand-cards-gap: 16px;
  --seller-cards-gap: 20px;
}

/* Hide Mobile Specific PDP Components on Desktop */
@media (min-width: 922px) {
  .rara-mnav,
  .rara-pdp-mobile-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Accessibility Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--rara-secondary) !important;
  outline-offset: 2px !important;
  outline-style: solid !important;
}


/* ==========================================================================
   Z-INDEX STACKING CONTEXT FIXES
   Ensures header dropdowns always appear ABOVE page content (hero, slider etc.)
   ========================================================================== */

/* Astra's own site-header wrapper */
#masthead,
.site-header,
.ast-site-header-html {
  position: relative !important;
  z-index: 1000 !important;
}

/* Our custom header root */
.rara-header {
  position: relative !important;
  z-index: 1000 !important;
}

/* Categories mega dropdown & all header dropdowns must beat hero section */
.rara-header__mega-dropdown,
.rara-header__location-dropdown,
.rara-header__top-dropdown .rara-dropdown-panel,
.rara-header__help-dropdown {
  z-index: 9999 !important;
}

/* Page content stays below header in stacking order */
.rara-homepage-wrap,
#primary,
.site-content,
.ast-container {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   2. LOCAL FONT DECLARATIONS
   ========================================================================== */

/* Inter - Body Font */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-700.woff2') format('woff2');
}

/* Poppins - Headings Font */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700.woff2') format('woff2');
}

/* ==========================================================================
   3. GLOBAL CSS RESET & TYPOGRAPHY
   ========================================================================== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--rara-text);
  background-color: var(--rara-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--rara-text);
  line-height: 1.3;
}

a {
  color: var(--rara-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--rara-secondary);
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   4. HEADER & NAVIGATION STYLES
   ========================================================================== */
.site-header {
  background-color: var(--rara-bg) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

.ast-primary-header-bar {
  background-color: var(--rara-bg) !important;
  padding: 12px 0 !important;
}

.main-header-menu {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-md) !important;
}

.main-header-menu .menu-item a {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--rara-text) !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s ease !important;
}

.main-header-menu .menu-item a:hover {
  color: var(--rara-primary) !important;
  background-color: var(--rara-bg-sec) !important;
}

.main-header-menu .menu-item.current-menu-item a {
  color: var(--rara-primary) !important;
  font-weight: 600 !important;
}

/* WooCommerce Mini-Cart in Header */
.ast-site-header-cart .ast-site-header-cart-focus {
  color: var(--rara-text) !important;
  transition: color 0.2s ease !important;
}

.ast-site-header-cart .ast-site-header-cart-focus:hover {
  color: var(--rara-primary) !important;
}

.ast-site-header-cart .ast-cart-box {
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
}

/* Mobile Header UI */
.ast-mobile-menu-trigger {
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 10px !important;
  background-color: var(--rara-bg-sec) !important;
  color: var(--rara-text) !important;
  transition: all 0.2s ease !important;
}

.ast-mobile-menu-trigger:hover {
  border-color: var(--rara-primary) !important;
  color: var(--rara-primary) !important;
}

.ast-mobile-header-wrap .ast-mobile-menu-trigger .ast-icon {
  fill: currentColor !important;
}

/* ==========================================================================
   5. SEARCH EXPERIENCE STYLES
   ========================================================================== */
.rara-search-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.rara-search-form {
  position: relative;
  width: 100%;
}

.rara-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.rara-search-field {
  width: 100% !important;
  padding: 12px 52px 12px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--rara-text) !important;
  background-color: var(--rara-bg-sec) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  outline: none !important;
  transition: all 0.25s ease !important;
}

.rara-search-field:focus {
  background-color: var(--rara-bg) !important;
  border-color: var(--rara-primary) !important;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.1) !important;
}

.rara-search-submit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  border: none !important;
  background: var(--rara-primary) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
  flex-shrink: 0;
}

.rara-search-submit:hover {
  background-color: var(--rara-secondary) !important;
  color: #ffffff !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.rara-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 999;
  background-color: var(--rara-bg);
  border: 1px solid var(--rara-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  max-height: 480px;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.rara-search-section {
  margin-bottom: var(--spacing-md);
}

.rara-search-section:last-child {
  margin-bottom: 0;
}

.rara-search-section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rara-muted);
  margin-bottom: var(--spacing-sm);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rara-border);
}

.rara-search-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rara-search-list li {
  margin-bottom: 4px;
}

.rara-search-list li:last-child {
  margin-bottom: 0;
}

.rara-search-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.rara-search-item:hover {
  background-color: var(--rara-bg-sec);
  color: var(--rara-primary);
}

.rara-search-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--rara-text);
  transition: all 0.2s ease;
}

.rara-search-link:hover {
  background-color: var(--rara-bg-sec);
  color: var(--rara-primary);
}

.rara-search-icon-svg {
  flex-shrink: 0;
  color: var(--rara-muted);
}

.rara-search-link:hover .rara-search-icon-svg,
.rara-search-item:hover .rara-search-icon-svg {
  color: var(--rara-primary);
}

.rara-search-count {
  color: var(--rara-muted);
  font-size: 11px;
  font-weight: 500;
}

.rara-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding-top: 4px;
}

.rara-search-tag {
  padding: 6px 12px;
  font-size: 13px;
  background-color: var(--rara-bg-sec);
  border: 1px solid var(--rara-border);
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rara-search-tag:hover {
  background-color: var(--rara-primary);
  border-color: var(--rara-primary);
  color: var(--rara-bg);
}

/* Products in search list */
.rara-search-products-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rara-search-products-list li {
  margin-bottom: 8px;
}

.rara-search-products-list li:last-child {
  margin-bottom: 0;
}

.rara-search-product-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--rara-text);
  transition: background-color 0.2s ease;
}

.rara-search-product-link:hover {
  background-color: var(--rara-bg-sec);
}

.rara-search-product-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid var(--rara-border);
  flex-shrink: 0;
}

.rara-search-product-info {
  flex-grow: 1;
  min-width: 0;
}

.rara-search-product-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--rara-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.rara-search-product-link:hover .rara-search-product-title {
  color: var(--rara-primary);
}

.rara-search-product-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--rara-primary);
}

.rara-search-product-price del {
  color: var(--rara-muted);
  font-size: 11px;
  font-weight: 400;
  margin-left: 6px;
}

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

/* Loading & Empty states */
.rara-search-loading,
.rara-search-no-results {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
  color: var(--rara-muted);
  font-size: 14px;
}

.rara-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(109, 40, 217, 0.2);
  border-top-color: var(--rara-primary);
  border-radius: 50%;
  animation: rara-spin 0.8s linear infinite;
  margin-right: var(--spacing-sm);
  vertical-align: middle;
}

@keyframes rara-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   6. PRODUCT CARD & GRID STYLES
   ========================================================================== */
.rara-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: var(--spacing-md) !important;
  width: 100% !important;
}

.rara-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--rara-bg) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease !important;
  text-decoration: none !important;
}

.rara-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(109, 40, 217, 0.15) !important;
  box-shadow: var(--shadow-hover) !important;
}

.rara-card__media {
  position: relative !important;
  aspect-ratio: 1/1 !important;
  overflow: hidden !important;
  background-color: var(--rara-bg-sec) !important;
}

.rara-card__image-link {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

.rara-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.rara-card:hover .rara-card__img {
  transform: scale(1.05) !important;
}

/* Badges on Media Container */
.rara-card__badge-container {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.rara-card__badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: #FFFFFF !important;
}

.rara-card__badge--discount {
  background-color: var(--rara-danger) !important;
}

.rara-card__badge--new {
  background-color: var(--rara-success) !important;
}

.rara-card__badge--best-seller {
  background-color: var(--rara-warning) !important;
}

/* Out of Stock Overlay */
.rara-card__out-of-stock-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 4 !important;
}

.rara-card__out-of-stock-badge {
  background-color: #475569 !important;
  color: #FFFFFF !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Wishlist Button */
.rara-card__wishlist-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--rara-border) !important;
  color: var(--rara-text-sec) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.rara-card__wishlist-btn:hover {
  color: var(--rara-danger) !important;
  transform: scale(1.08) !important;
}

.rara-card__wishlist-btn--active {
  background-color: var(--rara-danger) !important;
  border-color: var(--rara-danger) !important;
  color: var(--rara-bg) !important;
}

/* Quick View Button */
.rara-card__quickview-btn {
  position: absolute !important;
  bottom: -40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: var(--rara-bg) !important;
  border: 1px solid var(--rara-border) !important;
  color: var(--rara-text) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.rara-card__quickview-btn:hover {
  color: var(--rara-primary) !important;
}

.rara-card__media:hover .rara-card__quickview-btn {
  bottom: 10px !important;
}

/* Content Area */
.rara-card__content {
  padding: 12px 64px 12px 12px !important; /* Space for floating Quick Add button */
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

.rara-card__brand {
  font-family: 'Poppins', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--rara-muted) !important;
  margin-bottom: 4px !important;
}

.rara-card__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--rara-text) !important;
  margin-bottom: 8px !important;
  height: 38px !important;
  text-decoration: none !important;
}

.rara-card__title:hover {
  color: var(--rara-primary) !important;
}

/* Rating Row */
.rara-card__rating {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: var(--rara-muted) !important;
  margin-bottom: 8px !important;
}

.rara-card__stars {
  color: var(--rara-warning) !important;
  display: flex !important;
}

.rara-card__rating-num {
  font-weight: 700 !important;
  color: var(--rara-text) !important;
}

.rara-card__sold-count {
  margin-left: auto !important;
  font-weight: 500 !important;
}

/* Price */
.rara-card__price-row {
  margin-bottom: 4px !important;
}

.rara-card__price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--rara-primary) !important;
  letter-spacing: -0.01em !important;
}

.rara-card__price ins {
  text-decoration: none !important;
}

.rara-card__price del {
  color: var(--rara-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}

/* Save badge */
.rara-card__save {
  align-self: flex-start !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--rara-danger) !important;
  background-color: rgba(220, 38, 38, 0.08) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
}

/* Free Delivery */
.rara-card__delivery {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--rara-success) !important;
  margin-bottom: 12px !important;
}

.rara-card__delivery span {
  color: var(--rara-text) !important;
}

/* Footer / Vendor details */
.rara-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--rara-border) !important;
  font-size: 11px !important;
}

.rara-card__store {
  color: var(--rara-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.rara-card__verified {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background-color: rgba(34, 197, 94, 0.08) !important;
  color: var(--rara-success) !important;
  padding: 2px 6px !important;
  border-radius: 99px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Floating Quick Add Button */
.rara-card__quick-add-btn {
  position: absolute !important;
  z-index: 10 !important;
  border-radius: 50% !important;
  background-color: var(--rara-primary) !important;
  color: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.2) !important;
  transition: all 0.3s ease !important;
  
  /* Desktop defaults */
  width: var(--quick-add-size-desktop, 48px) !important;
  height: var(--quick-add-size-desktop, 48px) !important;
  right: var(--quick-add-spacing-desktop, 16px) !important;
  bottom: var(--quick-add-spacing-desktop, 16px) !important;
}

.rara-card__quick-add-btn svg {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: var(--quick-add-icon-desktop, 20px) !important;
  height: var(--quick-add-icon-desktop, 20px) !important;
  stroke: #ffffff !important;
  fill: none !important;
  transition: all 0.3s ease !important;
}

.rara-card__quick-add-btn:not([disabled]):hover {
  background-color: #6D28D9 !important; /* Darker purple on hover */
  transform: scale(1.05) !important;
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.35) !important;
}

.rara-card__quick-add-btn--loading {
  background-color: var(--rara-muted) !important;
  cursor: not-allowed !important;
}

.rara-card__quick-add-btn--added {
  background-color: var(--rara-success) !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}

.rara-card__quick-add-btn--oos,
.rara-card__quick-add-btn[disabled] {
  background-color: #cbd5e1 !important; /* Grey background */
  color: #64748b !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.rara-card__quick-add-btn--oos svg,
.rara-card__quick-add-btn[disabled] svg {
  stroke: #64748b !important;
  fill: none !important;
}

.rara-card__quick-add-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background-color: #ef4444 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
  z-index: 12 !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .rara-card__quick-add-btn {
    width: var(--quick-add-size-tablet, 44px) !important;
    height: var(--quick-add-size-tablet, 44px) !important;
    right: var(--quick-add-spacing-tablet, 16px) !important;
    bottom: var(--quick-add-spacing-tablet, 16px) !important;
  }
  .rara-card__quick-add-btn svg {
    width: var(--quick-add-icon-tablet, 20px) !important;
    height: var(--quick-add-icon-tablet, 20px) !important;
  }
  .rara-card__content {
    padding-right: 60px !important;
  }
}

@media (max-width: 767px) {
  .rara-card__quick-add-btn {
    width: var(--quick-add-size-mobile, 40px) !important;
    height: var(--quick-add-size-mobile, 40px) !important;
    right: var(--quick-add-spacing-mobile, 12px) !important;
    bottom: var(--quick-add-spacing-mobile, 12px) !important;
  }
  .rara-card__quick-add-btn svg {
    width: var(--quick-add-icon-mobile, 18px) !important;
    height: var(--quick-add-icon-mobile, 18px) !important;
  }
  .rara-card__content {
    padding-right: 52px !important;
  }
}

/* Responsive Grid columns */
@media (max-width: 1200px) {
  .rara-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 992px) {
  .rara-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 921px) {
  .rara-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .rara-card {
    min-height: 242px !important;
    height: auto !important;
    border-radius: 12px !important;
  }
  .rara-card__content {
    padding: 8px 52px 8px 10px !important;
  }
  .rara-desktop-only-atc,
  .rara-card__atc-wrap,
  .rara-card__atc-btn,
  .rara-card__atc-btn--variable,
  .rara-card__atc-btn--oos,
  .add_to_cart_button,
  .rara-card .button {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   PREMIUM QUICK VIEW LIGHTBOX MODAL STYLES (Amazon / Daraz Standard)
   ========================================================================== */
.rara-quickview-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.rara-quickview-modal.open {
  display: flex !important;
}

.rara-quickview-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: rara-fade-in 0.2s ease-out !important;
}

@keyframes rara-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.rara-quickview-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 1200px !important;
  background-color: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
  overflow: hidden !important;
  z-index: 10 !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  animation: rara-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

@keyframes rara-pop-in {
  from { transform: scale(0.94) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Header Action Buttons (Top-Right Floating Flex Container) */
.rara-qv-header-actions {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  z-index: 50 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Independent Floating Circular Action Buttons */
.rara-qv-header-wishlist,
.rara-quickview-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  border: 1px solid #ECECEC !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Wishlist Button */
.rara-qv-header-wishlist {
  color: #0f172a !important;
}

.rara-qv-header-wishlist svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #0f172a !important;
  fill: none !important;
  transition: all 0.25s ease !important;
}

.rara-qv-header-wishlist:hover {
  background-color: #7C3AED !important;
  border-color: #7C3AED !important;
  transform: scale(1.05) !important;
  box-shadow: 0 12px 25px rgba(124, 58, 237, 0.25) !important;
}

.rara-qv-header-wishlist:hover svg {
  stroke: #ffffff !important;
  fill: none !important;
}

.rara-qv-header-wishlist:active {
  transform: scale(0.95) !important;
}

.rara-qv-header-wishlist.rara-card__wishlist-btn--active {
  background-color: #7C3AED !important;
  border-color: #7C3AED !important;
}

.rara-qv-header-wishlist.rara-card__wishlist-btn--active svg {
  stroke: #ffffff !important;
  fill: #ffffff !important;
}

/* Close Button */
.rara-quickview-close {
  color: #0f172a !important;
}

.rara-quickview-close svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #0f172a !important;
  transition: all 0.25s ease !important;
}

.rara-quickview-close:hover {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  transform: rotate(90deg) scale(1.05) !important;
}

.rara-quickview-close:active {
  transform: scale(0.95) !important;
}

.rara-quickview-body {
  padding: 36px !important;
  overflow-y: auto !important;
  max-height: 90vh !important;
  box-sizing: border-box !important;
}

/* Modal Grid Layout */
.rara-qv-container {
  display: flex !important;
  gap: 36px !important;
  align-items: stretch !important;
}

/* Gallery Section (Left 48%) */
.rara-qv-gallery-wrap {
  flex: 0 0 48% !important;
  width: 48% !important;
  max-width: 48% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.rara-qv-gallery {
  position: relative !important;
  width: 100% !important;
  height: 420px !important;
  background-color: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.rara-qv-main-img {
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: zoom-in !important;
}

.rara-qv-gallery:hover .rara-qv-main-img {
  transform: scale(1.08) !important;
}

/* Badges on Gallery */
.rara-qv-badge {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 5 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.3px !important;
}

.rara-qv-badge--discount {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

.rara-qv-badge--oos {
  background: #64748b !important;
  color: #ffffff !important;
}

/* Thumbnail Gallery (Centered directly below main image) */
.rara-qv-thumbnails {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  overflow-x: auto !important;
  padding: 4px 0 8px 0 !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.rara-qv-thumbnails::-webkit-scrollbar {
  display: none !important;
}

.rara-qv-thumb-btn {
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 10px !important;
  border: 2px solid #e2e8f0 !important;
  background: #ffffff !important;
  padding: 3px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
}

.rara-qv-thumb-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 7px !important;
  display: block !important;
}

.rara-qv-thumb-btn:hover {
  transform: scale(1.05) !important;
  border-color: #a78bfa !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15) !important;
}

.rara-qv-thumb-btn.active {
  border-color: #7C3AED !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22) !important;
  transform: scale(1.02) !important;
}

/* Product Info Column (Right 48%) */
.rara-qv-details {
  flex: 0 0 48% !important;
  width: 48% !important;
  max-width: 48% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.rara-qv-brand {
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #7C3AED !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.rara-qv-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  margin: 0 0 12px 0 !important;
}

.rara-qv-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  font-size: 13px !important;
  color: #64748b !important;
  flex-wrap: wrap !important;
}

.rara-qv-stars-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.rara-qv-rating-val {
  font-weight: 700 !important;
  color: #0f172a !important;
}

.rara-qv-review-cnt {
  color: #64748b !important;
}

.rara-qv-meta-sep {
  color: #cbd5e1 !important;
}

.rara-qv-sold-cnt {
  font-weight: 600 !important;
}

.rara-qv-store {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.rara-qv-price-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

.rara-qv-price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #7C3AED !important;
}

.rara-qv-price del {
  color: #94a3b8 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}

.rara-qv-price ins {
  text-decoration: none !important;
}

.rara-qv-save-tag {
  font-size: 13px !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.rara-qv-stock-row {
  margin-bottom: 16px !important;
  font-size: 14px !important;
}

.rara-qv-stock {
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.rara-qv-stock--in {
  color: #16a34a !important;
}

.rara-qv-stock--out {
  color: #dc2626 !important;
}

.rara-qv-stock-qty {
  font-weight: 500 !important;
  color: #64748b !important;
}

.rara-qv-desc {
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 16px 0 !important;
}

/* Purchase Actions Form */
.rara-qv-actions {
  margin-top: auto !important;
}

.rara-qv-form {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  width: 100% !important;
}

/* Quantity Selector [-] [1] [+] */
.rara-qv-qty-wrap {
  display: flex !important;
  align-items: center !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  height: 52px !important;
  width: 130px !important;
  min-width: 130px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.2s ease !important;
}

.rara-qv-qty-wrap:focus-within,
.rara-qv-qty-wrap:hover {
  border-color: #a78bfa !important;
}

.rara-qv-qty-btn {
  width: 40px !important;
  height: 52px !important;
  background: #f8fafc !important;
  border: none !important;
  color: #475569 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.rara-qv-qty-btn:hover {
  background: #ede9fe !important;
  color: #7C3AED !important;
}

.rara-qv-qty-btn:active {
  transform: scale(0.92) !important;
}

.rara-qv-qty-input {
  width: 50px !important;
  height: 52px !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  -moz-appearance: textfield !important;
}

.rara-qv-qty-input::-webkit-outer-spin-button,
.rara-qv-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Add to Cart Button */
.rara-qv-add-btn {
  flex: 1 !important;
  height: 52px !important;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.rara-qv-add-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.35) !important;
  background: linear-gradient(135deg, #6D28D9 0%, #5B21B6 100%) !important;
}

.rara-qv-add-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.rara-qv-add-btn svg {
  stroke: #ffffff !important;
  fill: none !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Wishlist Button */
.rara-qv-wishlist-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: 1 !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 12px !important;
  border: 1.5px solid #E5E7EB !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #64748b !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.rara-qv-wishlist-btn:hover {
  border-color: #f43f5e !important;
  color: #f43f5e !important;
  background: #fff1f2 !important;
}

.rara-qv-wishlist-btn.rara-card__wishlist-btn--active {
  color: #f43f5e !important;
  border-color: #f43f5e !important;
  background: #fff1f2 !important;
}

/* Select Options for Variable Products */
.rara-qv-variable-wrap {
  width: 100% !important;
}

.rara-qv-select-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 52px !important;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
}

.rara-qv-select-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.35) !important;
  color: #ffffff !important;
}

/* Out of Stock Button */
.rara-qv-oos-wrap {
  display: flex !important;
  gap: 14px !important;
  width: 100% !important;
}

.rara-qv-oos-btn {
  flex: 1 !important;
  height: 52px !important;
  background: #cbd5e1 !important;
  color: #64748b !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: not-allowed !important;
}

/* View Full Product Details Link */
.rara-qv-view-details-wrap {
  margin-top: 16px !important;
  text-align: center !important;
}

.rara-qv-view-details-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #7C3AED !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.rara-qv-view-details-link:hover {
  color: #5B21B6 !important;
  transform: translateX(4px) !important;
}

.rara-quickview-loading,
.rara-quickview-error {
  text-align: center !important;
  padding: 40px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

/* Responsive Overrides */
@media (max-width: 1200px) {
  .rara-qv-header-actions {
    top: 20px !important;
    right: 20px !important;
    gap: 14px !important;
  }
  .rara-qv-header-wishlist,
  .rara-quickview-close {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }
  .rara-qv-header-wishlist svg { width: 20px !important; height: 20px !important; }
  .rara-quickview-close svg { width: 18px !important; height: 18px !important; }
}

@media (max-width: 992px) {
  .rara-quickview-wrapper {
    max-width: 95% !important;
  }
  .rara-qv-container {
    gap: 24px !important;
  }
  .rara-qv-gallery {
    height: 360px !important;
  }
}

@media (max-width: 768px) {
  .rara-qv-header-actions {
    top: 16px !important;
    right: 16px !important;
    gap: 12px !important;
  }
  .rara-qv-header-wishlist,
  .rara-quickview-close {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
  .rara-qv-header-wishlist svg { width: 18px !important; height: 18px !important; }
  .rara-quickview-close svg { width: 16px !important; height: 16px !important; }
  .rara-quickview-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .rara-quickview-wrapper {
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 85vh !important;
  }
  .rara-quickview-body {
    padding: 24px 20px !important;
  }
  .rara-qv-container {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .rara-qv-gallery-wrap,
  .rara-qv-details {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .rara-qv-gallery {
    height: 300px !important;
  }
  .rara-qv-thumb-btn {
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px !important;
  }
  .rara-qv-form {
    flex-wrap: wrap !important;
  }
  .rara-qv-qty-wrap {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .rara-qv-qty-input {
    flex: 1 !important;
  }
  .rara-qv-add-btn {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .rara-qv-header-actions {
    top: 12px !important;
    right: 12px !important;
    gap: 10px !important;
  }
  .rara-qv-header-wishlist,
  .rara-quickview-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ==========================================================================
   7. HOMEPAGE SECTION STYLES
   ========================================================================== */
.rara-home-section {
  padding: 40px var(--spacing-md) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.rara-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: var(--spacing-lg) !important;
}

.rara-section-heading {
  font-family: 'Poppins', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  margin: 0 !important;
}

.rara-view-all {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--rara-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.rara-view-all:hover {
  color: var(--rara-secondary) !important;
}

/* Hero Section */
.rara-hero-section {
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%) !important;
  padding: 80px var(--spacing-md) !important;
  text-align: center !important;
}

.rara-hero-content {
  max-width: 800px !important;
  margin: 0 auto !important;
}

.rara-hero-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  color: var(--rara-text) !important;
  line-height: 1.2 !important;
  margin-bottom: var(--spacing-sm) !important;
}

.rara-hero-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  color: var(--rara-muted) !important;
  margin-bottom: var(--spacing-lg) !important;
}

.rara-hero-btn {
  display: inline-block !important;
  padding: 14px 28px !important;
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.2) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.rara-hero-btn:hover {
  background-color: var(--rara-secondary) !important;
  transform: translateY(-2px) !important;
}

/* Category Grid */
.rara-home-categories {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: var(--spacing-md) !important;
  margin-top: var(--spacing-lg) !important;
}

.rara-cat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--spacing-lg) !important;
  background-color: var(--rara-bg-sec) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  color: var(--rara-text) !important;
}

.rara-cat-item:hover {
  background-color: var(--rara-bg) !important;
  border-color: var(--rara-primary) !important;
  box-shadow: var(--shadow-card) !important;
  transform: translateY(-2px) !important;
}

.rara-cat-icon {
  font-size: 32px !important;
  margin-bottom: var(--spacing-sm) !important;
}

.rara-cat-name {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Featured Brands */
.rara-brands-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-md) !important;
  margin-top: var(--spacing-lg) !important;
}

.rara-brand-logo {
  flex: 1 1 150px !important;
  max-width: 200px !important;
  height: 60px !important;
  background-color: var(--rara-bg-sec) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  display: grid !important;
  place-items: center !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--rara-muted) !important;
  transition: all 0.2s ease !important;
}

.rara-brand-logo:hover {
  background-color: var(--rara-bg) !important;
  border-color: var(--rara-primary) !important;
  color: var(--rara-primary) !important;
}

/* Become Seller Section */
.rara-become-seller-section {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%) !important;
  padding: 60px var(--spacing-md) !important;
  text-align: center !important;
  color: var(--rara-bg) !important;
}

.rara-become-seller-content {
  max-width: 700px !important;
  margin: 0 auto !important;
}

.rara-become-seller-content h2 {
  font-size: 32px !important;
  color: var(--rara-bg) !important;
  margin-bottom: var(--spacing-sm) !important;
}

.rara-become-seller-content p {
  font-size: 16px !important;
  color: #C7D2FE !important;
  margin-bottom: var(--spacing-lg) !important;
}

.rara-seller-btn {
  display: inline-block !important;
  padding: 12px 24px !important;
  background-color: var(--rara-warning) !important;
  color: var(--rara-text) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.rara-seller-btn:hover {
  background-color: #E0A800 !important;
  transform: translateY(-2px) !important;
}

/* App Section */
.rara-app-section {
  background-color: var(--rara-bg-sec) !important;
  border-top: 1px solid var(--rara-border) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  padding: 60px var(--spacing-md) !important;
  text-align: center !important;
}

.rara-app-content {
  max-width: 600px !important;
  margin: 0 auto !important;
}

.rara-app-content h2 {
  font-size: 30px !important;
  margin-bottom: var(--spacing-sm) !important;
}

.rara-app-content p {
  font-size: 15px !important;
  color: var(--rara-muted) !important;
  margin-bottom: var(--spacing-lg) !important;
}

.rara-app-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: var(--spacing-md) !important;
}

.rara-store-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  background-color: var(--rara-text) !important;
  color: var(--rara-bg) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.rara-store-btn:hover {
  background-color: var(--rara-primary) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .rara-hero-section {
    padding: 50px var(--spacing-md) !important;
  }
  .rara-hero-title {
    font-size: 28px !important;
  }
  .rara-hero-subtitle {
    font-size: 15px !important;
  }
  .rara-home-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--spacing-sm) !important;
  }
  .rara-cat-item {
    padding: var(--spacing-md) !important;
  }
  .rara-cat-icon {
    font-size: 24px !important;
  }
  .rara-section-heading {
    font-size: 18px !important;
  }
  .rara-become-seller-content h2 {
    font-size: 24px !important;
  }
  .rara-app-content h2 {
    font-size: 22px !important;
  }
  .rara-app-buttons {
    flex-direction: column !important;
    gap: var(--spacing-sm) !important;
    max-width: 200px !important;
    margin: 0 auto !important;
  }
}

/* ==========================================================================
   8. ARCHIVE & CATEGORY FILTER STYLES
   ========================================================================== */
.rara-archive-container {
  display: flex !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  gap: var(--spacing-lg) !important;
  padding: 40px var(--spacing-md) !important;
}

.rara-archive-sidebar {
  width: 250px !important;
  flex-shrink: 0 !important;
}

.rara-archive-main {
  flex-grow: 1 !important;
}

.rara-sidebar-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  padding-bottom: var(--spacing-sm) !important;
  margin-bottom: var(--spacing-md) !important;
  margin-top: 0 !important;
}

.rara-filter-group {
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--rara-border-sec) !important;
  padding-bottom: var(--spacing-md) !important;
}

.rara-filter-group:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.rara-filter-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  margin-bottom: var(--spacing-sm) !important;
  margin-top: 0 !important;
}

.rara-price-inputs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.rara-price-inputs input {
  width: 100% !important;
  padding: 6px 10px !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-text) !important;
  background-color: var(--rara-bg) !important;
  outline: none !important;
}

.rara-price-inputs input:focus {
  border-color: var(--rara-primary) !important;
}

.rara-price-inputs span {
  color: var(--rara-muted) !important;
}

.rara-filter-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.max-height-scroll {
  max-height: 180px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.rara-filter-checkbox-label,
.rara-filter-radio-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-text-sec) !important;
  cursor: pointer !important;
}

.rara-filter-checkbox-label input,
.rara-filter-radio-label input {
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--rara-primary) !important;
}

.rara-filter-checkbox-label:hover,
.rara-filter-radio-label:hover {
  color: var(--rara-primary) !important;
}

/* Right Content Area */
.rara-archive-header {
  margin-bottom: var(--spacing-lg) !important;
}

.rara-archive-title-wrap {
  margin-bottom: var(--spacing-md) !important;
}

.rara-archive-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  margin: 0 0 4px 0 !important;
}

.rara-archive-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--rara-muted) !important;
  line-height: 1.5 !important;
}

.rara-archive-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--rara-border) !important;
  padding-bottom: var(--spacing-sm) !important;
}

.rara-result-count {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-muted) !important;
  margin: 0 !important;
}

.rara-archive-sort-select {
  padding: 8px 12px !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--rara-text) !important;
  background-color: var(--rara-bg) !important;
  outline: none !important;
  cursor: pointer !important;
}

.rara-archive-sort-select:focus {
  border-color: var(--rara-primary) !important;
}

.rara-no-products {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--rara-muted) !important;
  text-align: center !important;
  padding: 60px 0 !important;
  grid-column: 1 / -1 !important;
}

.rara-archive-pagination {
  margin-top: 40px !important;
  display: flex !important;
  justify-content: center !important;
}

/* Responsive Overrides */
/* Sidebar Header for Filters */
.rara-sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: var(--spacing-md) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  padding-bottom: var(--spacing-sm) !important;
}

.rara-sidebar-close {
  display: none !important; /* Hidden on desktop */
  font-size: 24px !important;
  background: transparent !important;
  border: none !important;
  color: var(--rara-muted) !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.rara-mobile-filter-trigger {
  display: none !important; /* Hidden on desktop */
}

.rara-archive-controls {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important;
}

/* Skeleton Loading Styling */
.rara-skeleton {
  pointer-events: none !important;
  border-color: var(--rara-border) !important;
}

.rara-skeleton__media {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%) !important;
  background-size: 200% 100% !important;
  animation: rara-skeleton-pulse 1.5s infinite !important;
}

.rara-skeleton__line {
  height: 12px !important;
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%) !important;
  background-size: 200% 100% !important;
  animation: rara-skeleton-pulse 1.5s infinite !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
}

.rara-skeleton__line--brand { width: 40% !important; }
.rara-skeleton__line--title { width: 85% !important; height: 16px !important; }
.rara-skeleton__line--rating { width: 60% !important; }
.rara-skeleton__line--price { width: 50% !important; height: 18px !important; }

@keyframes rara-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Responsive Overrides */
@media (max-width: 768px) {
  .rara-archive-container {
    flex-direction: column !important;
    gap: var(--spacing-md) !important;
    padding: var(--spacing-md) !important;
  }
  .rara-archive-sidebar {
    position: fixed !important;
    bottom: -100% !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 80vh !important;
    background-color: var(--rara-bg) !important;
    z-index: 10001 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.15) !important;
    padding: var(--spacing-md) !important;
    overflow-y: auto !important;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
  }
  .rara-archive-sidebar.active {
    bottom: 0 !important;
  }
  .rara-sidebar-close {
    display: block !important;
  }
  .rara-sidebar-title {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .rara-filter-group {
    margin-bottom: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
  }
  .rara-archive-title {
    font-size: 22px !important;
  }
  .rara-archive-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--spacing-sm) !important;
  }
  .rara-archive-controls {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .rara-mobile-filter-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background-color: var(--rara-bg-sec) !important;
    border: 1px solid var(--rara-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--rara-text) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .rara-mobile-filter-trigger:hover {
    border-color: var(--rara-primary) !important;
    color: var(--rara-primary) !important;
  }
  .rara-filter-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }
  .rara-filter-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .rara-archive-sort-select {
    width: auto !important;
    flex-grow: 1 !important;
  }
}

/* ==========================================================================
   9. SINGLE PRODUCT DETAILS STYLES
   ========================================================================== */
.rara-single-product-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px var(--spacing-md) !important;
}

.rara-product-breadcrumbs {
  margin-bottom: var(--spacing-md) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--rara-muted) !important;
}

.rara-product-breadcrumbs a {
  color: var(--rara-muted) !important;
  text-decoration: none !important;
}

.rara-product-breadcrumbs a:hover {
  color: var(--rara-primary) !important;
}

.rara-product-layout {
  display: flex !important;
  gap: 40px !important;
  margin-bottom: 40px !important;
}

.rara-product-gallery {
  width: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-md) !important;
}

.rara-main-image-wrap {
  position: relative !important;
  aspect-ratio: 1/1 !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  background-color: var(--rara-bg-sec) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--spacing-md) !important;
}

.rara-main-image {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.rara-main-image-wrap:hover .rara-main-image {
  transform: scale(1.03) !important;
}

.rara-product-discount-badge {
  position: absolute !important;
  top: var(--spacing-md) !important;
  left: var(--spacing-md) !important;
  z-index: 5 !important;
  background-color: var(--rara-danger) !important;
  color: var(--rara-bg) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
}

.rara-thumbnails {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  padding-bottom: 6px !important;
}

.rara-thumb-item {
  width: 70px !important;
  height: 70px !important;
  border: 2px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--rara-bg-sec) !important;
  transition: border-color 0.2s ease !important;
  flex-shrink: 0 !important;
}

.rara-thumb-item.active,
.rara-thumb-item:hover {
  border-color: var(--rara-primary) !important;
}

.rara-thumb-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

/* Details Column */
.rara-product-details {
  width: 50% !important;
  display: flex !important;
  flex-direction: column !important;
}

.rara-details-brand {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--rara-muted) !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

.rara-details-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  line-height: 1.25 !important;
  margin: 0 0 12px 0 !important;
}

.rara-details-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-muted) !important;
  margin-bottom: 20px !important;
}

.rara-details-stars {
  color: var(--rara-warning) !important;
  display: flex !important;
}

.rara-details-rating-val {
  font-weight: 700 !important;
  color: var(--rara-text) !important;
}

/* Price */
.rara-details-price-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.rara-details-price {
  font-family: 'Poppins', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--rara-primary) !important;
}

.rara-details-price ins {
  text-decoration: none !important;
}

.rara-details-price del {
  color: var(--rara-muted) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  margin-left: 8px !important;
}

.rara-details-save {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--rara-danger) !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.rara-details-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--rara-text-sec) !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

/* WCFM Store details card */
.rara-store-card {
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-md) !important;
  background-color: var(--rara-bg-sec) !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm) !important;
}

.rara-store-card-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
}

.rara-store-label {
  color: var(--rara-muted) !important;
}

.rara-store-name {
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  text-decoration: none !important;
}

.rara-store-name:hover {
  color: var(--rara-primary) !important;
}

.rara-store-verified {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background-color: rgba(34, 197, 94, 0.08) !important;
  color: var(--rara-success) !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.rara-store-rating {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--rara-text-sec) !important;
}

.rara-store-actions {
  display: flex !important;
  gap: var(--spacing-sm) !important;
  margin-top: 4px !important;
}

.rara-store-visit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  background-color: var(--rara-bg) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--rara-text) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.rara-store-visit-btn:hover {
  border-color: var(--rara-primary) !important;
  color: var(--rara-primary) !important;
}

.rara-store-chat-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  background-color: var(--rara-primary) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  color: var(--rara-bg) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.rara-store-chat-btn:hover {
  background-color: var(--rara-secondary) !important;
}

.rara-return-info svg {
  color: var(--rara-success) !important;
}

/* Delivery Est */
.rara-delivery-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-text) !important;
  margin-bottom: 24px !important;
}

.rara-delivery-info svg {
  color: var(--rara-success) !important;
}

/* Add to Cart */
.rara-add-to-cart-wrapper {
  margin-top: 12px !important;
}

.rara-add-to-cart-wrapper form.cart {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-md) !important;
  margin-bottom: 0 !important;
}

.rara-add-to-cart-wrapper form.cart .quantity input {
  width: 60px !important;
  height: 44px !important;
  padding: 8px !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
}

.rara-add-to-cart-wrapper form.cart button.single_add_to_cart_button {
  height: 44px !important;
  padding: 0 32px !important;
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.rara-add-to-cart-wrapper form.cart button.single_add_to_cart_button:hover {
  background-color: var(--rara-secondary) !important;
}

/* Tabs */
.rara-product-tabs {
  margin-top: 60px !important;
  border-top: 1px solid var(--rara-border) !important;
}

.rara-tabs-nav {
  display: flex !important;
  gap: var(--spacing-lg) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  margin-bottom: 24px !important;
}

.rara-tab-nav-btn {
  background: none !important;
  border: none !important;
  padding: 16px 0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--rara-muted) !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.rara-tab-nav-btn.active,
.rara-tab-nav-btn:hover {
  color: var(--rara-primary) !important;
  border-bottom-color: var(--rara-primary) !important;
}

.rara-tab-content {
  display: none !important;
  padding-bottom: 40px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--rara-text-sec) !important;
  line-height: 1.6 !important;
}

.rara-tab-content.active {
  display: block !important;
}

/* Attributes Table override */
.rara-tab-content table.shop_attributes {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 0 !important;
}

.rara-tab-content table.shop_attributes th,
.rara-tab-content table.shop_attributes td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--rara-border) !important;
  text-align: left !important;
}

.rara-tab-content table.shop_attributes th {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  width: 200px !important;
  background-color: var(--rara-bg-sec) !important;
}

.rara-tab-content table.shop_attributes td {
  color: var(--rara-text-sec) !important;
}

/* Q&A Styles */
.rara-qa-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.rara-qa-heading {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  margin: 0 !important;
}

.rara-qa-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-md) !important;
}

.rara-qa-item {
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-md) !important;
  background-color: var(--rara-bg) !important;
}

.rara-qa-question,
.rara-qa-answer {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.rara-qa-answer {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--rara-border-sec) !important;
}

.rara-qa-badge-q,
.rara-qa-badge-a {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.rara-qa-badge-q {
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
}

.rara-qa-badge-a {
  background-color: var(--rara-success) !important;
  color: var(--rara-bg) !important;
}

.rara-qa-text {
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--rara-text) !important;
}

.rara-qa-empty {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-muted) !important;
  margin: 0 !important;
}

.rara-qa-form-wrap {
  border-top: 1px solid var(--rara-border) !important;
  padding-top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-md) !important;
}

.rara-qa-form-wrap h4 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  margin: 0 !important;
}

.rara-qa-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.rara-qa-form textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  outline: none !important;
  resize: vertical !important;
}

.rara-qa-form textarea:focus {
  border-color: var(--rara-primary) !important;
}

.rara-qa-form-fields {
  display: flex !important;
  gap: 12px !important;
}

.rara-qa-form-fields input {
  width: 50% !important;
  padding: 10px 14px !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  outline: none !important;
}

.rara-qa-form-fields input:focus {
  border-color: var(--rara-primary) !important;
}

.rara-qa-submit {
  align-self: flex-start !important;
  padding: 10px 20px !important;
  background-color: var(--rara-text) !important;
  color: var(--rara-bg) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.rara-qa-submit:hover {
  background-color: var(--rara-primary) !important;
}

/* Related & Recently empty */
.rara-recently-empty {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-muted) !important;
  margin: 0 !important;
}

.rara-related-products-section,
.rara-recently-viewed-section {
  margin-top: 60px !important;
  border-top: 1px solid var(--rara-border) !important;
  padding-top: 40px !important;
}

/* Responsive Overrides */
@media (max-width: 768px) {
  .rara-single-product-container {
    padding: var(--spacing-md) !important;
  }
  .rara-product-layout {
    flex-direction: column !important;
    gap: var(--spacing-lg) !important;
  }
  .rara-product-gallery,
  .rara-product-details {
    width: 100% !important;
  }
  .rara-details-title {
    font-size: 24px !important;
  }
  .rara-qa-form-fields {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .rara-qa-form-fields input {
    width: 100% !important;
  }
  .rara-tab-content table.shop_attributes th {
    width: 120px !important;
    font-size: 12px !important;
  }
  .rara-tab-content table.shop_attributes td {
    font-size: 12px !important;
  }
}

/* ==========================================================================
   10. WOOCOMMERCE CART & CHECKOUT PAGE OVERRIDES
   ========================================================================== */
/* Global woocommerce page spacing */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px var(--spacing-md) !important;
}

/* Two-column layout for Cart Page */
.woocommerce-cart .woocommerce {
  display: block !important;
}

.rara-cart-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 0.7fr !important;
  gap: 32px !important;
  align-items: start !important;
  width: 100% !important;
}

.rara-cart-main {
  width: 100% !important;
  min-width: 0 !important;
}

.rara-cart-sidebar {
  width: 100% !important;
  min-width: 0 !important;
}

.woocommerce-cart .woocommerce-cart-form {
  width: 100% !important;
}

.woocommerce-cart .cart-collaterals {
  width: 100% !important;
  float: none !important;
  flex-shrink: 0 !important;
}

/* Quantity Stepper Controls (Zero Overflow Pill Button) */
.rara-pdp-qty-stepper {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--rara-border, #e2e8f0) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  height: 38px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.rara-pdp-qty-stepper .quantity {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: none !important;
}

.rara-pdp-qty-stepper input.rara-cart-qty-field,
.rara-pdp-qty-stepper input.qty {
  width: 44px !important;
  height: 36px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--rara-text, #1e293b) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield !important;
}

.rara-pdp-qty-stepper input::-webkit-outer-spin-button,
.rara-pdp-qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.rara-pdp-qty-stepper button.rara-pdp-qty-btn {
  width: 34px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--rara-text, #1e293b) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

.rara-pdp-qty-stepper button.rara-pdp-qty-btn:hover {
  background: #f1f5f9 !important;
  color: var(--rara-primary, #7c3aed) !important;
}

/* Recommendations / Cross-Sells Section in 65% Left Column */
.rara-cart-cross-sells {
  margin-top: 40px !important;
  border-top: 1px solid var(--rara-border, #e2e8f0) !important;
  padding-top: 32px !important;
  width: 100% !important;
}

.rara-cart-cross-sells .cross-sells h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--rara-text, #1e293b) !important;
  margin-bottom: 20px !important;
}

.rara-cart-cross-sells ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.rara-cart-cross-sells ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Tablet & Mobile Responsive Grid Breakpoints */
@media (max-width: 1024px) {
  .rara-cart-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .rara-cart-sidebar {
    position: static !important;
    top: auto !important;
  }
  .rara-cart-cross-sells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .rara-cart-item-card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  .rara-cart-item-card .product-thumbnail {
    width: 80px !important;
    height: 80px !important;
  }
  .rara-cart-cross-sells ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* Cart Table Formatting */
.woocommerce-cart table.cart {
  border-collapse: collapse !important;
  border: none !important;
  width: 100% !important;
}

.woocommerce-cart table.cart th {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--rara-text) !important;
  border-bottom: 2px solid var(--rara-border) !important;
  padding: 12px 16px !important;
  text-align: left !important;
  background-color: transparent !important;
}

.woocommerce-cart table.cart td {
  padding: var(--spacing-md) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  vertical-align: middle !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
}

.woocommerce-cart table.cart td.product-thumbnail img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--rara-border) !important;
}

.woocommerce-cart table.cart td.product-name a {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  color: var(--rara-text) !important;
  text-decoration: none !important;
}

.woocommerce-cart table.cart td.product-name a:hover {
  color: var(--rara-primary) !important;
}

.woocommerce-cart table.cart td.product-quantity .quantity input {
  width: 50px !important;
  height: 36px !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  text-align: center !important;
  outline: none !important;
}

/* Coupon & Update Cart Row */
.woocommerce-cart table.cart td.actions {
  padding: var(--spacing-md) 0 !important;
}

.woocommerce-cart table.cart td.actions .coupon {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.woocommerce-cart table.cart td.actions .coupon input.input-text {
  width: 180px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
}

.woocommerce-cart table.cart td.actions button.button {
  height: 38px !important;
  padding: 0 20px !important;
  background-color: var(--rara-text) !important;
  color: var(--rara-bg) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.woocommerce-cart table.cart td.actions button.button:hover {
  background-color: var(--rara-primary) !important;
}

/* Cart Totals Box */
.woocommerce-cart .cart_totals {
  background-color: var(--rara-bg) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-lg) !important;
  box-shadow: var(--shadow-card) !important;
  width: 100% !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  margin-top: 0 !important;
  margin-bottom: var(--spacing-md) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  padding-bottom: var(--spacing-sm) !important;
}

.woocommerce-cart .cart_totals table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.woocommerce-cart .cart_totals table.shop_table tr th,
.woocommerce-cart .cart_totals table.shop_table tr td {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--rara-border-sec) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  text-align: left !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  border-bottom: none !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--rara-primary) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 14px 0 !important;
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.2) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--rara-secondary) !important;
}

/* ==========================================================================
   11. CHECKOUT PAGE OVERRIDES
   ========================================================================== */
.woocommerce-checkout form.checkout {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--spacing-lg) !important;
  align-items: flex-start !important;
}

.woocommerce-checkout #customer_details {
  flex-grow: 1 !important;
  width: 60% !important;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  width: 40% !important;
  flex-shrink: 0 !important;
}

/* Form Inputs Styling */
.woocommerce-checkout .form-row {
  margin-bottom: var(--spacing-md) !important;
}

.woocommerce-checkout .form-row label {
  display: block !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  margin-bottom: 6px !important;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-text) !important;
  background-color: var(--rara-bg) !important;
  outline: none !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: var(--rara-primary) !important;
}

/* Order Review and Payments Box */
.woocommerce-checkout #order_review {
  background-color: var(--rara-bg) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-lg) !important;
  box-shadow: var(--shadow-card) !important;
}

.woocommerce-checkout #order_review_heading {
  display: none !important;
}

/* Payments List */
.woocommerce-checkout #payment {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 24px !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  border-bottom: 1px solid var(--rara-border) !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: var(--spacing-md) !important;
}

.woocommerce-checkout #payment ul.payment_methods li input {
  margin-right: 8px !important;
  accent-color: var(--rara-primary) !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  cursor: pointer !important;
}

.woocommerce-checkout #payment div.payment_box {
  background-color: var(--rara-bg-sec) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--rara-muted) !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
}

.woocommerce-checkout #payment button#place_order {
  display: block !important;
  width: 100% !important;
  padding: 14px 0 !important;
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.2) !important;
}

.woocommerce-checkout #payment button#place_order:hover {
  background-color: var(--rara-secondary) !important;
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout form.checkout {
    flex-direction: column !important;
  }
  
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review {
    width: 100% !important;
  }
}

/* ==========================================================================
   12. CUSTOMER ACCOUNT & WCFM DASHBOARD STYLES
   ========================================================================== */
/* My Account Layout */
.woocommerce-account .woocommerce {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--spacing-lg) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px var(--spacing-md) !important;
  align-items: flex-start !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 250px !important;
  flex-shrink: 0 !important;
  background-color: var(--rara-bg) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-md) !important;
  box-shadow: var(--shadow-card) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 10px 16px !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--rara-text-sec) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background-color: var(--rara-bg-sec) !important;
  color: var(--rara-primary) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
  flex-grow: 1 !important;
  background-color: var(--rara-bg) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-lg) !important;
  box-shadow: var(--shadow-card) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--rara-text-sec) !important;
  line-height: 1.6 !important;
}

/* WCFM Vendor Manager Portal Theme Adjustments */
#wcfm-main-contentwrapper,
.wcfm-collapse {
  font-family: 'Poppins', sans-serif !important;
}

.wcfm_menu_items a {
  font-family: 'Poppins', sans-serif !important;
}

.wcfm_menu_items a.active {
  background-color: var(--rara-primary) !important;
  border-left-color: var(--rara-secondary) !important;
}

.wcfm-dashboard-heading,
.wcfm-page-heading {
  color: var(--rara-text) !important;
}

input.wcfm-text,
select.wcfm-select,
textarea.wcfm-textarea {
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  outline: none !important;
}

input.wcfm-text:focus,
select.wcfm-select:focus,
textarea.wcfm-textarea:focus {
  border-color: var(--rara-primary) !important;
}

input.wcfm_submit_button,
button.wcfm_submit_button {
  background-color: var(--rara-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease !important;
}

input.wcfm_submit_button:hover,
button.wcfm_submit_button:hover {
  background-color: var(--rara-secondary) !important;
}

@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
    padding: var(--spacing-md) !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
  }
}

/* ==========================================================================
   13. PREMIUM SEARCH BAR & PREDICTIVE DROPDOWN STYLES
   ========================================================================== */
.rara-search-container {
  position: relative !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.rara-search-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  background-color: var(--rara-bg-sec) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: 8px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  overflow: visible !important;
}

.rara-search-input-wrap:focus-within {
  border-color: var(--rara-primary) !important;
  background-color: var(--rara-bg) !important;
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.1) !important;
}

.rara-search-field {
  flex-grow: 1 !important;
  border: none !important;
  background: transparent !important;
  height: 44px !important;
  padding: 0 52px 0 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--rara-text) !important;
  outline: none !important;
}

.rara-search-field::placeholder {
  color: var(--rara-muted) !important;
}

.rara-search-submit {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background-color: var(--rara-primary) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

.rara-search-submit:hover {
  background-color: var(--rara-secondary) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

/* Predictive Dropdown styling */
.rara-search-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1) !important;
  z-index: 1000 !important;
  max-height: 450px !important;
  overflow-y: auto !important;
  padding: var(--spacing-md) !important;
}

.rara-search-section {
  margin-bottom: var(--spacing-md) !important;
}

.rara-search-section:last-child {
  margin-bottom: 0 !important;
}

.rara-search-section-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--rara-muted) !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--rara-border) !important;
  padding-bottom: 6px !important;
  margin-bottom: var(--spacing-sm) !important;
}

.rara-search-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.rara-search-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-text-sec) !important;
  transition: all 0.2s ease !important;
}

.rara-search-item:hover,
.rara-search-item:focus {
  background-color: var(--rara-bg-sec) !important;
  color: var(--rara-primary) !important;
}

.rara-search-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: var(--rara-text-sec) !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.rara-search-link:hover,
.rara-search-link:focus {
  background-color: var(--rara-bg-sec) !important;
  color: var(--rara-primary) !important;
}

.rara-search-icon-svg {
  color: var(--rara-muted) !important;
  flex-shrink: 0 !important;
}

.rara-search-link:hover .rara-search-icon-svg,
.rara-search-item:hover .rara-search-icon-svg {
  color: var(--rara-primary) !important;
}

.rara-search-count {
  margin-left: 4px !important;
  font-size: 11px !important;
  color: var(--rara-muted) !important;
}

/* Popular tags */
.rara-search-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 4px 0 !important;
}

.rara-search-tag {
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--rara-text-sec) !important;
  background-color: var(--rara-bg-sec) !important;
  border: 1px solid var(--rara-border) !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.rara-search-tag:hover {
  background-color: var(--rara-bg) !important;
  border-color: var(--rara-primary) !important;
  color: var(--rara-primary) !important;
  transform: translateY(-1px) !important;
}

/* Product list inside search */
.rara-search-products-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.rara-search-product-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  color: var(--rara-text) !important;
  transition: all 0.2s ease !important;
}

.rara-search-product-link:hover,
.rara-search-product-link:focus {
  background-color: var(--rara-bg-sec) !important;
}

.rara-search-product-img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--rara-border) !important;
  background-color: var(--rara-bg) !important;
  flex-shrink: 0 !important;
}

.rara-search-product-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.rara-search-product-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--rara-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rara-search-product-link:hover .rara-search-product-title {
  color: var(--rara-primary) !important;
}

.rara-search-product-price {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--rara-primary) !important;
}

.rara-search-product-price del {
  color: var(--rara-muted) !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}

/* Spinner and Loaders */
.rara-search-loading {
  text-align: center !important;
  padding: 24px 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.rara-spinner {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--rara-border) !important;
  border-top-color: var(--rara-primary) !important;
  border-radius: 50% !important;
  animation: rara-spin 0.6s linear infinite !important;
}

@keyframes rara-spin {
  to { transform: rotate(360deg); }
}

/* No results found & Empty Search */
.rara-search-no-results {
  text-align: center !important;
  padding: 36px var(--spacing-md) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--rara-muted) !important;
}

.rara-search-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 24px var(--spacing-md) !important;
}

.rara-search-empty-state svg {
  color: var(--rara-muted) !important;
  margin-bottom: var(--spacing-sm) !important;
  opacity: 0.6 !important;
}

.rara-search-empty-state-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--rara-text) !important;
  margin-bottom: var(--spacing-xs) !important;
}

.rara-search-empty-state-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--rara-muted) !important;
  margin-bottom: var(--spacing-md) !important;
}

.rara-search-empty-cta {
  display: inline-block !important;
  padding: 8px 16px !important;
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.rara-search-empty-cta:hover {
  background-color: var(--rara-secondary) !important;
}
/* ==========================================================================
   14. MOBILE BOTTOM STICKY NAVIGATION STYLES
   ========================================================================== */
.rara-mobile-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 60px !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid var(--rara-border) !important;
  display: none !important; /* Hidden on desktop */
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  z-index: 9999 !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.rara-mobile-nav__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  color: var(--rara-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.rara-mobile-nav__item svg {
  color: var(--rara-muted) !important;
  transition: color 0.2s ease !important;
}

.rara-mobile-nav__item:hover,
.rara-mobile-nav__item--active {
  color: var(--rara-primary) !important;
}

.rara-mobile-nav__item:hover svg,
.rara-mobile-nav__item--active svg {
  color: var(--rara-primary) !important;
}

.rara-mobile-nav__cart-badge-wrap {
  position: relative !important;
  display: inline-flex !important;
}

.rara-mobile-nav__cart-badge {
  position: absolute !important;
  top: -6px !important;
  right: -10px !important;
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  min-width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  box-shadow: 0 2px 4px rgba(109, 40, 217, 0.2) !important;
  line-height: 1 !important;
}

@media (max-width: 768px) {
  .rara-mobile-nav {
    display: grid !important;
  }

  /* ── Transactional pages: hide nav, zero out its padding contribution ── */
  /* Primary: PHP guard in functions.php prevents rendering entirely.       */
  /* Secondary: CSS fallback in case PHP guard is bypassed (e.g. AJAX).    */
  body.single-product .rara-mobile-nav,
  body.woocommerce-cart .rara-mobile-nav,
  body.woocommerce-checkout .rara-mobile-nav,
  body.woocommerce-order-received .rara-mobile-nav {
    display: none !important;
  }
  
  /* ── Default body padding for nav clearance (non-transactional pages) ── */
  body {
    padding-bottom: 60px !important;
  }
  
  /* ── Transactional pages manage their own bottom padding via CTA bars ── */
  /* body.woocommerce-cart    → mobile-cart.css: calc(88px + safe-area)    */
  /* body.woocommerce-checkout → mobile-checkout.css: 120px                */
  /* body.single-product      → product-details.css: 70px for ATC bar     */
  body.single-product,
  body.woocommerce-cart,
  body.woocommerce-checkout,
  body.woocommerce-order-received {
    padding-bottom: 0 !important;
  }

  /* --- Hybrid SPA Transition Animations --- */
  .rara-fade-out {
    opacity: 0 !important;
    transition: opacity 150ms ease-out !important;
  }
  .rara-fade-in {
    opacity: 1 !important;
    transition: opacity 150ms ease-in !important;
  }

  /* --- Skeleton Loading Animation --- */
  @keyframes rara-skeleton-pulse {
    0% { background-color: #f1f5f9; }
    50% { background-color: #e2e8f0; }
    100% { background-color: #f1f5f9; }
  }

  .rara-skeleton {
    animation: rara-skeleton-pulse 1.2s infinite ease-in-out !important;
    border-radius: 8px !important;
    background-color: #f1f5f9 !important;
  }

  /* Home Page Skeleton Layout */
  .rara-skeleton-home {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .rara-skeleton-home__banner {
    height: 180px !important;
    width: 100% !important;
    border-radius: 12px !important;
  }
  .rara-skeleton-home__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .rara-skeleton-home__card {
    height: 200px !important;
    width: 100% !important;
  }

  /* Categories Page Skeleton Layout */
  .rara-skeleton-categories {
    padding: 16px !important;
    display: flex !important;
    gap: 12px !important;
  }
  .rara-skeleton-categories__sidebar {
    width: 80px !important;
    height: 80vh !important;
  }
  .rara-skeleton-categories__content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .rara-skeleton-categories__item {
    height: 90px !important;
    width: 100% !important;
  }

  /* Deals Page Skeleton Layout */
  .rara-skeleton-deals {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .rara-skeleton-deals__timer {
    height: 48px !important;
    width: 60% !important;
    margin: 0 auto !important;
  }
  .rara-skeleton-deals__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .rara-skeleton-deals__item {
    height: 120px !important;
    width: 100% !important;
  }

  /* --- Offline Fallback UI --- */
  .rara-offline-fallback {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 60px 24px !important;
    font-family: 'Inter', sans-serif !important;
  }
  .rara-offline-fallback__icon {
    font-size: 48px !important;
    margin-bottom: 16px !important;
  }
  .rara-offline-fallback__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 8px 0 !important;
  }
  .rara-offline-fallback__desc {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 24px 0 !important;
  }
  .rara-offline-fallback__btn {
    background-color: var(--rara-primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.2) !important;
  }
}

/* ==========================================================================
   15. PREMIUM HEADER STYLES
   ========================================================================== */
.rara-header {
  background-color: var(--rara-bg) !important;
  font-family: 'Poppins', sans-serif !important;
  width: 100% !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}

.rara-header__container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--spacing-md) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Top bar style */
.rara-header__top {
  background-color: var(--rara-bg-sec) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  font-size: 11px !important;
  color: var(--rara-muted) !important;
  padding: var(--spacing-xs) 0 !important;
}

.rara-header__top-links {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.rara-header__promo {
  font-weight: 500 !important;
}

.rara-header__top-right {
  display: flex !important;
  gap: var(--spacing-md) !important;
}

.rara-header__top-right a {
  color: var(--rara-muted) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.rara-header__top-right a:hover {
  color: var(--rara-primary) !important;
}

/* Main header style */
.rara-header__main {
  padding: var(--spacing-md) 0 !important;
  border-bottom: 1px solid var(--rara-border) !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px) !important;
}

.rara-header__main-grid {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: var(--spacing-lg) !important;
}

.rara-header__logo-wrap {
  display: flex !important;
  align-items: center !important;
}

.rara-header__logo {
  text-decoration: none !important;
  display: inline-block !important;
}

.rara-header__logo-text {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: var(--rara-text) !important;
}

.rara-header__logo-accent {
  color: var(--rara-primary) !important;
}

.rara-header__search-wrap {
  width: 100% !important;
  max-width: 600px !important;
  justify-self: center !important;
}

.rara-header__actions {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-md) !important;
}

.rara-header__action-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  color: var(--rara-text-sec) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
}

.rara-header__action-item svg {
  color: var(--rara-text) !important;
  margin-bottom: 4px !important;
  transition: color 0.2s ease !important;
}

.rara-header__action-item:hover,
.rara-header__action-item:hover svg {
  color: var(--rara-primary) !important;
}

.rara-header__cart-icon-wrap {
  position: relative !important;
  display: inline-flex !important;
}

.rara-header__cart-badge {
  position: absolute !important;
  top: -8px !important;
  right: -10px !important;
  background-color: var(--rara-primary) !important;
  color: var(--rara-bg) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  box-shadow: 0 2px 5px rgba(109, 40, 217, 0.2) !important;
  line-height: 1 !important;
}

/* Nav bar styles */
.rara-header__nav {
  padding: var(--spacing-sm) 0 !important;
  font-size: 13px !important;
}

.rara-header__nav-flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.rara-header__nav-menu {
  display: flex !important;
  gap: var(--spacing-md) !important;
}

.rara-header__nav-link {
  color: var(--rara-text-sec) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.rara-header__nav-link:hover,
.rara-header__nav-link--active {
  color: var(--rara-primary) !important;
}

.rara-header__contact {
  color: var(--rara-muted) !important;
}

/* Hide standard Astra main header, using our custom premium header */
.site-header {
  display: none !important;
}

/* Adjust layout on mobile */
@media (max-width: 768px) {
  .rara-header__top,
  .rara-header__nav,
  .rara-header__action-label {
    display: none !important;
  }
  .rara-header__main-grid {
    grid-template-columns: 1fr auto !important;
    gap: var(--spacing-sm) !important;
  }
  .rara-header__search-wrap {
    grid-column: span 2 !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   HOMEPAGE CUSTOM COMPONENT STYLES
   ========================================================================== */

/* Hero Banner Slider */
.rara-hero-slider-wrap {
  position: relative !important;
  width: 100% !important;
  margin-bottom: var(--hero-margin-bottom, 24px) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
  background-color: #f1f5f9 !important;
}

.rara-hero-slider {
  position: relative !important;
  width: 100% !important;
  height: 420px !important;
}

@media (max-width: 768px) {
  .rara-hero-slider {
    height: 250px !important;
  }
}

.rara-slider-container {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.rara-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.rara-slide-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform 6s ease !important;
}

.rara-slide--active .rara-slide-bg {
  transform: scale(1.05) !important;
}

.rara-slide-bg--desktop {
  display: block !important;
}
.rara-slide-bg--mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .rara-slide-bg--desktop {
    display: none !important;
  }
  .rara-slide-bg--mobile {
    display: block !important;
  }
}

/* Slide Devices helper */
.rara-slide--devices-desktop {
  display: flex !important;
}
.rara-slide--devices-mobile {
  display: none !important;
}
@media (max-width: 768px) {
  .rara-slide--devices-desktop {
    display: none !important;
  }
  .rara-slide--devices-mobile {
    display: flex !important;
  }
}

.rara-slide-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 100%) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 80px !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  .rara-slide-overlay {
    padding: 0 var(--spacing-md) !important;
    background: linear-gradient(0deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 80%, rgba(255,255,255,0.2) 100%) !important;
    align-items: flex-end !important;
    padding-bottom: var(--spacing-lg) !important;
  }
}

.rara-slide-content {
  max-width: 480px !important;
}

.rara-slide-campaign {
  display: inline-block !important;
  padding: 4px 10px !important;
  background-color: var(--rara-warning) !important;
  color: var(--rara-text) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  margin-bottom: var(--spacing-sm) !important;
}

.rara-slide-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  color: var(--rara-text) !important;
  line-height: 1.2 !important;
  margin-bottom: var(--spacing-md) !important;
}

@media (max-width: 768px) {
  .rara-slide-title {
    font-size: 22px !important;
    margin-bottom: var(--spacing-sm) !important;
  }
}

.rara-slide-cta {
  display: inline-block !important;
  padding: 12px 24px !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  transition: all 0.2s ease !important;
}

.rara-slide-cta:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
}

/* Slider Controls */
.rara-slider-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  background-color: rgba(255,255,255,0.9) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: var(--rara-text) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.rara-slider-nav:hover {
  background-color: #ffffff !important;
  color: var(--rara-primary) !important;
  box-shadow: var(--shadow-card) !important;
}

.rara-slider-prev { left: 20px !important; }
.rara-slider-next { right: 20px !important; }

@media (max-width: 768px) {
  .rara-slider-nav {
    width: 32px !important;
    height: 32px !important;
  }
  .rara-slider-prev { left: 10px !important; }
  .rara-slider-next { right: 10px !important; }
}

.rara-slider-dots {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 10 !important;
}

.rara-slider-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: rgba(0,0,0,0.2) !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}

.rara-slider-dot--active {
  background-color: var(--rara-primary) !important;
  width: 24px !important;
  border-radius: 5px !important;
}

/* Trust Panel Grid */
.rara-trust-panel {
  background-color: #ffffff !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
  margin-bottom: var(--spacing-lg) !important;
}

.rara-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--spacing-md) !important;
}

@media (max-width: 991px) {
  .rara-trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 576px) {
  .rara-trust-grid {
    grid-template-columns: 1fr !important;
  }
}

.rara-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-md) !important;
}

.rara-trust-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  background-color: #f5f3ff !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: var(--rara-primary) !important;
  flex-shrink: 0 !important;
}

.rara-trust-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--rara-text) !important;
  margin-bottom: 2px !important;
}

.rara-trust-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--rara-muted) !important;
  margin: 0 !important;
}

/* Categories Grid styling overrides */
.rara-categories-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: var(--spacing-md) !important;
}

@media (max-width: 1199px) {
  .rara-categories-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 768px) {
  .rara-categories-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.rara-cat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: var(--spacing-lg) var(--spacing-sm) !important;
  background-color: var(--rara-bg-sec) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  color: var(--rara-text) !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

.rara-cat-card:hover {
  background-color: #ffffff !important;
  border-color: var(--rara-primary) !important;
  box-shadow: var(--shadow-card) !important;
  transform: translateY(-3px) !important;
}

.rara-cat-card__icon-wrap {
  color: var(--rara-primary) !important;
  margin-bottom: var(--spacing-sm) !important;
}

.rara-cat-card__name {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.rara-cat-card__count {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: var(--rara-muted) !important;
}

/* Flash Deals campaign */
.rara-flash-deals {
  background-color: #fdf2f2 !important;
  border: 1px solid #fee2e2 !important;
  border-radius: var(--radius-md) !important;
  padding: 30px !important;
}

.rara-flash-deals-inline {
  background-color: #fdf2f2 !important;
  border: 1px solid #fee2e2 !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .rara-flash-deals {
    padding: var(--spacing-md) !important;
  }
}

.rara-flash-deals__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-md) !important;
  margin-bottom: var(--spacing-lg) !important;
  border-bottom: 1px solid #fecaca !important;
  padding-bottom: var(--spacing-md) !important;
}

.rara-flash-deals__title-wrap {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-md) !important;
}

.rara-flash-deals__title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--flash-accent) !important;
  margin: 0 !important;
}

.rara-flash-bolt {
  color: var(--rara-warning) !important;
  animation: flashPulse 1.5s infinite alternate !important;
}

@keyframes flashPulse {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.15); filter: brightness(1.2); }
}

.rara-flash-countdown {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  color: var(--rara-text) !important;
}

.rara-countdown-label {
  font-weight: 600 !important;
}

.rara-countdown-box {
  background-color: var(--flash-accent) !important;
  color: #ffffff !important;
  padding: 4px 8px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  min-width: 32px !important;
  text-align: center !important;
}

.rara-flash-deals__limit-tag {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Flash progress bar */
.rara-flash-progress {
  position: relative !important;
  width: 100% !important;
  height: 16px !important;
  background-color: #fee2e2 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: var(--spacing-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rara-flash-progress-bar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  background-color: var(--flash-accent) !important;
  border-radius: 10px !important;
}

.rara-flash-progress-text {
  position: relative !important;
  z-index: 2 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #7f1d1d !important;
}

/* WCFM Featured Stores */
.rara-stores-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--spacing-lg) !important;
}

@media (max-width: 1199px) {
  .rara-stores-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 576px) {
  .rara-stores-grid { grid-template-columns: 1fr !important; }
}

.rara-store-card {
  background-color: #ffffff !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.rara-store-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card) !important;
  border-color: var(--rara-primary) !important;
}

.rara-store-card__banner {
  height: 100px !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  background-color: #f1f5f9 !important;
}

.rara-store-card__badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background-color: var(--rara-primary) !important;
  color: #ffffff !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.rara-store-card__body {
  padding: 0 20px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
}

.rara-store-card__logo-wrap {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: 3px solid #ffffff !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  margin-top: -30px !important;
  margin-bottom: var(--spacing-sm) !important;
  z-index: 2 !important;
}

.rara-store-card__logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.rara-store-card__name {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

.rara-store-card__rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: var(--spacing-md) !important;
}

.rara-store-card__rating-num {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.rara-store-card__meta {
  display: flex !important;
  justify-content: space-around !important;
  width: 100% !important;
  border-top: 1px solid var(--rara-border) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  padding: 10px 0 !important;
  margin-bottom: var(--spacing-md) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: var(--rara-muted) !important;
}

.rara-store-card__btn {
  width: 100% !important;
  padding: 8px 16px !important;
  background-color: #f1f5f9 !important;
  color: var(--rara-text) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s ease !important;
}

.rara-store-card__btn:hover {
  background-color: var(--rara-primary) !important;
  color: #ffffff !important;
}

/* Top Collections Row */
.rara-collection-row {
  display: flex !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--rara-border) !important;
  background-color: #ffffff !important;
  margin-bottom: var(--spacing-lg) !important;
  height: 320px !important;
}

@media (max-width: 991px) {
  .rara-collection-row {
    flex-direction: column !important;
    height: auto !important;
  }
}

.rara-collection-row__banner-card {
  flex: 0 0 35% !important;
  background-size: cover !important;
  background-position: center !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 30px !important;
  color: #ffffff !important;
}

@media (max-width: 991px) {
  .rara-collection-row__banner-card {
    height: 200px !important;
    padding: var(--spacing-md) !important;
  }
}

.rara-collection-row__banner-content {
  width: 100% !important;
}

.rara-collection-row__tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--rara-warning) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: var(--spacing-xs) !important;
}

.rara-collection-row__title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: var(--spacing-md) !important;
}

.rara-collection-row__btn {
  display: inline-block !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.rara-collection-row__btn:hover {
  text-decoration: underline !important;
}

.rara-collection-row__products {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--spacing-md) !important;
  padding: 30px !important;
}

@media (max-width: 768px) {
  .rara-collection-row__products {
    grid-template-columns: 1fr !important;
    padding: var(--spacing-md) !important;
  }
}

/* Compact card variants */
.rara-card--compact {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.rara-card--compact:hover {
  transform: translateY(-2px) !important;
}

/* Brands Scroll controllers */
.rara-brands-carousel-wrapper {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
}

.rara-brands-carousel {
  display: flex !important;
  gap: var(--spacing-md) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important; /* Firefox */
  padding: 10px 0 !important;
}

.rara-brands-carousel::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
}

.rara-brand-card {
  flex: 0 0 160px !important;
  height: 70px !important;
  background-color: var(--rara-bg-sec) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  display: grid !important;
  place-items: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.rara-brand-card:hover {
  border-color: var(--rara-primary) !important;
  background-color: #ffffff !important;
  box-shadow: var(--shadow-card) !important;
}

.rara-brand-card__logo {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--rara-muted) !important;
}

.rara-brand-card:hover .rara-brand-card__logo {
  color: var(--rara-primary) !important;
}

.rara-slider-arrows {
  display: flex !important;
  gap: 8px !important;
}

.rara-arrow-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  border: 1px solid var(--rara-border) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  color: var(--rara-text) !important;
  transition: all 0.2s ease !important;
}

.rara-arrow-btn:hover {
  background-color: var(--rara-primary) !important;
  border-color: var(--rara-primary) !important;
  color: #ffffff !important;
}

/* Newsletter card */
.rara-newsletter-card {
  background: linear-gradient(135deg, var(--rara-primary) 0%, var(--rara-secondary) 100%) !important;
  padding: 40px !important;
  border-radius: var(--radius-md) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-lg) !important;
  box-shadow: var(--shadow-card) !important;
}

@media (max-width: 991px) {
  .rara-newsletter-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 30px var(--spacing-md) !important;
  }
}

.rara-newsletter-card__content {
  flex: 1 !important;
  max-width: 500px !important;
}

.rara-newsletter-card__title {
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-bottom: var(--spacing-xs) !important;
}

.rara-newsletter-card__desc {
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.rara-newsletter-card__form-wrap {
  flex: 0 0 45% !important;
  min-width: 320px !important;
}

@media (max-width: 576px) {
  .rara-newsletter-card__form-wrap {
    min-width: 100% !important;
  }
}

.rara-newsletter-form {
  display: flex !important;
  background-color: #ffffff !important;
  padding: 4px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  width: 100% !important;
}

.rara-newsletter-input {
  flex: 1 !important;
  border: none !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--rara-text) !important;
  background: none !important;
  outline: none !important;
}

.rara-newsletter-submit-btn {
  background-color: var(--rara-warning) !important;
  color: var(--rara-text) !important;
  border: none !important;
  padding: 0 24px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.rara-newsletter-submit-btn:hover {
  background-color: #E0A800 !important;
}

.rara-newsletter-status {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  margin-top: var(--spacing-sm) !important;
  padding-left: 4px !important;
  font-weight: 600 !important;
}
.rara-newsletter-status--success { color: #86efac !important; }
.rara-newsletter-status--error { color: #fecaca !important; }
.rara-newsletter-status--info { color: rgba(255,255,255,0.8) !important; }

/* Delivery Location selectors */
.rara-header__location {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--rara-border) !important;
  background-color: var(--rara-bg-sec) !important;
  transition: all 0.2s ease !important;
}

.rara-header__location:hover {
  border-color: var(--rara-primary) !important;
  background-color: #ffffff !important;
}

.rara-header__location-info {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}

.rara-header__loc-label {
  font-size: 10px !important;
  color: var(--rara-muted) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.rara-header__loc-value {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--rara-text) !important;
}

.rara-header__location-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-card) !important;
  min-width: 160px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  transition: all 0.25s ease !important;
  z-index: 100 !important;
}

.rara-header__location:hover .rara-header__location-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(2px) !important;
}

.rara-header__location-list {
  list-style: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}

.rara-header__location-list li a {
  display: block !important;
  padding: 8px 16px !important;
  color: var(--rara-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.rara-header__location-list li a:hover {
  background-color: #f5f3ff !important;
  color: var(--rara-primary) !important;
}

/* Mega dropdown menu overrides */
.rara-header__mega-menu-trigger {
  position: relative !important;
}

.rara-header__mega-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background-color: var(--rara-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.rara-header__mega-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-card) !important;
  min-width: 220px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  transition: all 0.25s ease !important;
  z-index: 100 !important;
}

.rara-header__mega-menu-trigger:hover .rara-header__mega-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(2px) !important;
}

.rara-header__mega-list {
  list-style: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}

.rara-header__mega-link {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important;
  padding: 10px 16px !important;
  color: var(--rara-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.rara-header__mega-link:hover {
  background-color: #f5f3ff !important;
  color: var(--rara-primary) !important;
}

.rara-header__mega-link svg {
  color: var(--rara-primary) !important;
}

/* ==========================================================================
   WooCommerce Checkout QR Payment UX Enhancement
   ========================================================================== */

/* Payment Box container styling */
/* ==========================================================================
   ULTRA COMPACT QR PAYMENT BOX & IMAGE OVERRIDE (V3 SLIM)
   ========================================================================== */

/* 1. Shrink payment box outer container */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_qr_payment,
.woocommerce-checkout #payment .payment_box.payment_method_qr_payment,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout .payment_box {
    padding: 12px 14px !important;
    max-width: 380px !important;
    margin: 8px auto !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* 2. Shrink QR Image dramatically (140px Desktop, 120px Tablet, 110px Mobile) */
.woocommerce-checkout #payment .payment_box img,
.woocommerce-checkout .payment_box img,
.rara-qr-image-frame img {
    max-width: 140px !important;
    max-height: 140px !important;
    width: 140px !important;
    height: 140px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 8px auto !important;
    border-radius: 8px !important;
    padding: 4px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}

@media (max-width: 768px) {
    .woocommerce-checkout #payment .payment_box img,
    .woocommerce-checkout .payment_box img {
        max-width: 120px !important;
        width: 120px !important;
        height: 120px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce-checkout #payment .payment_box img,
    .woocommerce-checkout .payment_box img {
        max-width: 110px !important;
        width: 110px !important;
        height: 110px !important;
    }
}

/* 3. Instruction Paragraph text */
.woocommerce-checkout #payment .payment_box p,
.woocommerce-checkout .payment_box p {
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #475569 !important;
    margin: 0 0 6px 0 !important;
    font-weight: 500 !important;
}

/* 4. Compact receipt upload box & dashed containers */
.woocommerce-checkout #payment .payment_box input[type="file"],
.woocommerce-checkout .payment_box input[type="file"],
.woocommerce-checkout .payment_box div[style*="dashed"],
.woocommerce-checkout .payment_box div[class*="upload"],
.woocommerce-checkout .payment_box label {
    display: block !important;
    margin: 8px auto 0 auto !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    border: 1px dashed #6d28d9 !important;
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}
    min-height: 64px !important;
    box-sizing: border-box !important;
}

.rara-qr-dropzone:hover,
.rara-qr-dropzone.dragover {
    border-color: #6d28d9 !important;
    background: #f5f3ff !important;
}

.rara-qr-dropzone-icon {
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.rara-qr-dropzone-text {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.rara-qr-dropzone-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.rara-qr-dropzone-sub {
    font-size: 11px !important;
    color: #64748b !important;
}

.rara-qr-file-preview {
    margin-top: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #f0fdf4 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #bbf7d0 !important;
}

/* ==========================================================================
   RaRa Deals — Homepage Content Upgrade V1 Premium Styles
   ========================================================================== */

/* 1. Header & Typography Enhancements */
.rara-section__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    margin-bottom: var(--section-heading-margin-bottom, 12px) !important;
    gap: 15px !important;
}

.rara-section__title-row {
    flex-grow: 1 !important;
}

.rara-section__title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

.rara-section__title-wrap svg {
    flex-shrink: 0 !important;
    margin-bottom: -2px !important;
}

.rara-section__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.rara-section-subtitle {
    font-size: 13px !important;
    color: #6B7280 !important;
    display: block !important;
    margin-bottom: 0 !important;
}

.rara-view-all-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6D28D9 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.rara-view-all-link:hover {
    color: #4C1D95 !important;
}

/* 2. Universal Carousel Framework */
.rara-carousel-wrapper {
    position: relative !important;
    width: 100% !important;
}

.rara-carousel-track {
    display: flex !important;
    gap: var(--cards-gap, 16px) !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important; /* Firefox */
    padding-bottom: 5px !important;
}

.rara-carousel-track::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
}

.rara-stores-carousel {
    gap: var(--seller-cards-gap, 20px) !important;
}

/* Responsive Cards Inside Carousels */
.rara-grid-carousel article,
.rara-stores-carousel .rara-store-card,
.rara-reviews-carousel .rara-review-card {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
}

/* Breakpoints for Products */
@media (min-width: 1024px) {
    .rara-grid-carousel article {
        width: calc((100% - 80px) / 5) !important; /* 5 per row */
    }
}
@media (max-width: 1023px) and (min-width: 768px) {
    .rara-grid-carousel article {
        width: calc((100% - 40px) / 3) !important; /* 3 per row */
    }
}
@media (max-width: 767px) {
    .rara-grid-carousel article {
        width: calc((100% - 20px) / 2) !important; /* 2 per row */
    }
}

/* Carousel Control Arrows */
.rara-section__header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.rara-carousel-arrows {
    display: flex !important;
    gap: 6px !important;
}

.rara-carousel-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    color: #4B5563 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.rara-carousel-arrow:hover:not(.disabled) {
    background: #6D28D9 !important;
    color: #FFFFFF !important;
    border-color: #6D28D9 !important;
}

.rara-carousel-arrow.disabled,
.rara-carousel-arrow[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: #F3F4F6 !important;
}

/* 3. Category Collections Rows (Amazon/Daraz style) */
.rara-category-collections-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 35px !important;
    margin-top: 15px !important;
}

.rara-category-collection-row {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
}

/* Left Promo Card */
.rara-cat-banner-card {
    background-size: cover !important;
    background-position: center !important;
    padding: 30px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 320px !important;
}

.rara-cat-banner-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%) !important;
    z-index: 1 !important;
}

.rara-cat-banner-card__content {
    position: relative !important;
    z-index: 2 !important;
    color: #FFFFFF !important;
}

.rara-cat-banner-card__tagline {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    color: #FBBF24 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.rara-cat-banner-card__title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px 0 !important;
}

.rara-cat-banner-card__desc {
    font-size: 12px !important;
    color: #E5E7EB !important;
    line-height: 1.4 !important;
    margin: 0 0 20px 0 !important;
}

.rara-cat-banner-card__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    width: fit-content !important;
}

.rara-cat-banner-card__btn:hover {
    background: #F3F4F6 !important;
    transform: translateY(-1px) !important;
}

/* Right Products Carousel */
.rara-cat-products-slider {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    position: relative !important;
}

.rara-cat-row-header {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    z-index: 5 !important;
}

@media (max-width: 1023px) {
    .rara-category-collection-row {
        grid-template-columns: 1fr !important;
    }
    .rara-cat-banner-card {
        min-height: 200px !important;
        padding: 40px 20px 20px 20px !important;
    }
    .rara-cat-row-header {
        top: -45px !important;
        right: 0 !important;
    }
    .rara-cat-products-slider {
        position: relative !important;
        padding-top: 30px !important;
    }
}

/* 4. Featured Brand Card Upgrades */
.rara-brands-carousel {
    display: flex !important;
    gap: var(--brand-cards-gap, 16px) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
    padding: 5px 0 !important;
}

.rara-brands-carousel::-webkit-scrollbar {
    display: none !important;
}

.rara-brand-card-new {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 140px !important;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    padding: 15px 10px !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

.rara-brand-card-new__img-wrap {
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

.rara-brand-card-new__img {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.rara-brand-card-new__logo-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #4B5563 !important;
}

.rara-brand-card-new__details {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.rara-brand-card-new__name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 3px 0 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    width: 100% !important;
}

.rara-brand-card-new__count {
    font-size: 11px !important;
    color: #6B7280 !important;
    display: block !important;
}

.rara-brand-card-new__cta {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #6D28D9 !important;
    margin-top: 5px !important;
    opacity: 0 !important;
    transform: translateY(5px) !important;
    transition: all 0.2s ease !important;
}

.rara-brand-card-new:hover {
    border-color: #6D28D9 !important;
    box-shadow: 0 10px 15px -3px rgba(109,40,217,0.1), 0 4px 6px -2px rgba(109,40,217,0.05) !important;
    transform: translateY(-2px) !important;
}

.rara-brand-card-new:hover .rara-brand-card-new__cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 5. WCFM Featured Stores Carousel */
.rara-stores-carousel .rara-store-card {
    width: 260px !important;
}

/* 6. Customer Reviews Carousel & Card */
.rara-reviews-carousel .rara-review-card {
    width: 320px !important;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    transition: transform 0.2s ease !important;
    min-height: 250px !important;
}

.rara-review-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

.rara-review-card__header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.rara-review-card__avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid #E5E7EB !important;
}

.rara-review-card__meta {
    flex-grow: 1 !important;
}

.rara-review-card__author {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 3px 0 !important;
}

.rara-review-card__content {
    font-size: 12px !important;
    color: #4B5563 !important;
    line-height: 1.5 !important;
    font-style: italic !important;
    margin: 0 0 16px 0 !important;
    flex-grow: 1 !important;
}

.rara-review-card__product {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    background: #F9FAFB !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: 1px solid #F3F4F6 !important;
}

.rara-review-card__product:hover {
    background: #F3F4F6 !important;
}

.rara-review-card__product-img {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

.rara-review-card__product-info {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.rara-review-card__product-label {
    font-size: 9px !important;
    color: #9CA3AF !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.rara-review-card__product-name {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 220px !important;
}

/* 7. Mobile App Promotion Banner enhancements */
.rara-app-card {
    background: linear-gradient(135deg, #4C1D95 0%, #6D28D9 100%) !important;
    border-radius: 16px !important;
    color: #FFFFFF !important;
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 20px !important;
    padding: 40px 50px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    align-items: center !important;
}

.rara-app-tagline {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    color: #FBBF24 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.rara-app-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 10px 0 !important;
}

.rara-app-desc {
    font-size: 14px !important;
    color: #E9D5FF !important;
    line-height: 1.5 !important;
    margin-bottom: 25px !important;
    max-width: 550px !important;
}

.rara-app-badges-row {
    display: flex !important;
    align-items: center !important;
}

.rara-app-buttons {
    display: flex !important;
    gap: 12px !important;
}

.rara-store-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #000000 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #374151 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.rara-store-btn:hover {
    background: #111827 !important;
    transform: translateY(-1px) !important;
}

.rara-store-btn-text {
    display: flex !important;
    flex-direction: column !important;
}

.rara-store-btn-sub {
    font-size: 8px !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
}

.rara-store-btn-main {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.rara-app-mockup {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

@media (max-width: 900px) {
    .rara-app-card {
        grid-template-columns: 1fr !important;
        padding: 30px !important;
    }
    .rara-app-mockup {
        display: none !important;
    }
    .rara-app-badges-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    .rara-app-divider {
        display: none !important;
    }
}

/* ── MOBILE PDP: Hide Upper Body Inline Purchase Buttons ───────────────────── */
@media (max-width: 921px) {
    body.single-product #rara-buy-now-btn,
    body.single-product .rara-desktop-only-btn,
    body.single-product .rara-pdp-btn--buy:not(.rara-pdp-mobile-bar__btn--buy),
    body.single-product button.single_add_to_cart_button,
    body.single-product .rara-pdp-wc-form-wrapper button.single_add_to_cart_button,
    body.single-product .rara-pdp-wc-form-wrapper .rara-buy-now-button,
    body.single-product .rara-pdp-wc-form-wrapper .rara-pdp-actions,
    body.single-product .rara-pdp-actions-block .rara-pdp-btn--buy,
    body.single-product .rara-pdp-extras,
    body.single-product .rara-pdp-purchase-actions {
        display: none !important;
    }
}

/* ==========================================================================
   DOKAN STORE PAGE: REMOVE TOP EMPTY GAP / WHITESPACE
   ========================================================================== */
body.dokan-store #content.site-content,
body.dokan-store .site-content,
body.dokan-store #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.dokan-store #content .ast-container,
body.dokan-store .ast-container {
    padding-top: 12px !important;
    margin-top: 0 !important;
}

body.dokan-store #primary.content-area,
body.dokan-store #main.site-main,
body.dokan-store .ast-woocommerce-container,
body.dokan-store .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.dokan-store .woocommerce-breadcrumb,
body.dokan-store nav.woocommerce-breadcrumb {
    margin-top: 6px !important;
    margin-bottom: 16px !important;
    padding-top: 0 !important;
}

body.dokan-store .dokan-store-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 768px) {
    body.dokan-store #content .ast-container {
        padding-top: 8px !important;
    }
    body.dokan-store .woocommerce-breadcrumb {
        margin-top: 4px !important;
        margin-bottom: 12px !important;
    }
}

/* ==========================================================================
   SELLER DASHBOARD HEADER CONSISTENCY (PHASE A - STEP 1)
   Only modifies header visual appearance. No structural or PHP changes.
   ========================================================================== */

.rara-seller-header {
  background: #322067 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  color: #ffffff !important;
}

.rara-seller-header__logo {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.rara-seller-header__logo .logo-accent {
  color: #F59E0B !important;
}

.rara-seller-header__badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* Search Box Styling */
.rara-seller-header__search {
  background: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.rara-seller-header__search input {
  color: #1F2937 !important;
}

.rara-seller-header__search input::placeholder {
  color: #9CA3AF !important;
}

.rara-seller-header__search .search-icon {
  stroke: #6B7280 !important;
}

/* Visit Store Button */
.rara-btn--visit-store {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.rara-btn--visit-store:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Action Icons */
.rara-header-icon-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 50% !important;
}

.rara-header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.rara-header-icon-btn .header-icon {
  stroke: #ffffff !important;
}

/* Profile Text */
.rara-header-user__name {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.rara-header-user__role {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Spacing Below Header: Flush with header bottom edge */
.dokan-dashboard-wrap,
#wcfm-main-contentainer {
  margin-top: var(--rara-header-h) !important;
  padding-top: 0 !important;
}

/* ==========================================================================
   SELLER DASHBOARD CONTENT SPACING (PHASE A - STEP 2)
   Pure CSS polish for card margins, table spacing, and section padding.
   Does NOT modify sidebar, PHP, JS, or navigation.
   ========================================================================== */

/* Dashboard Widget Cards Spacing & Radius */
.dokan-dashboard-content .dashboard-widget,
.dokan-dashboard-content .dokan-panel {
  margin-bottom: 20px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #E5E7EB !important;
  overflow: hidden !important;
}

/* Card Header Padding & Border */
.dokan-dashboard-content .dashboard-widget .widget-title,
.dokan-dashboard-content .dokan-panel-heading {
  padding: 14px 20px !important;
  background: #F9FAFB !important;
  border-bottom: 1px solid #E5E7EB !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1F2937 !important;
}

/* Card Body Content Padding */
.dokan-dashboard-content .dashboard-widget .widget-content,
.dokan-dashboard-content .dokan-panel-body {
  padding: 20px !important;
}

/* Dokan Table Spacing & Border Radius */
.dokan-dashboard-content .dokan-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.dokan-dashboard-content .dokan-table th {
  background: #F3F4F6 !important;
  color: #374151 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #E5E7EB !important;
}

.dokan-dashboard-content .dokan-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #F3F4F6 !important;
  color: #4B5563 !important;
  font-size: 14px !important;
}

.dokan-dashboard-content .dokan-table tr:last-child td {
  border-bottom: none !important;
}

/* Section Headings Spacing */
.dokan-dashboard-header,
.dokan-dashboard-content .entry-title {
  margin-bottom: 16px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

/* Empty States & Notices Spacing */
.dokan-dashboard-content .dokan-info,
.dokan-dashboard-content .dokan-alert {
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 20px !important;
}

/* ==========================================================================
   FORM CONTROLS & DESIGN TOKEN SYSTEM (PHASE A - STEP 3)
   Standardized form inputs, buttons, textareas, selects, and states.
   Does NOT modify PHP, JS, AJAX, form submission, or navigation.
   ========================================================================== */

:root {
  --rara-form-primary: #6D28D9;
  --rara-form-primary-hover: #5B21B6;
  --rara-form-border: #D1D5DB;
  --rara-form-focus-border: #8B5CF6;
  --rara-form-focus-ring: rgba(139, 92, 246, 0.25);
  --rara-form-radius: 8px;
  --rara-form-input-height: 42px;
  --rara-form-transition: all 0.2s ease-in-out;
}

/* Inputs & Textareas */
.dokan-dashboard-content input[type="text"],
.dokan-dashboard-content input[type="number"],
.dokan-dashboard-content input[type="email"],
.dokan-dashboard-content input[type="password"],
.dokan-dashboard-content input[type="url"],
.dokan-dashboard-content input[type="search"],
.dokan-dashboard-content input[type="tel"],
.dokan-dashboard-content select.dokan-form-control,
.dokan-dashboard-content select,
.dokan-dashboard-content textarea.dokan-form-control,
.dokan-dashboard-content textarea {
  border: 1px solid var(--rara-form-border) !important;
  border-radius: var(--rara-form-radius) !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  color: #1F2937 !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: var(--rara-form-transition) !important;
  box-sizing: border-box !important;
}

.dokan-dashboard-content input[type="text"]:focus,
.dokan-dashboard-content input[type="number"]:focus,
.dokan-dashboard-content input[type="email"]:focus,
.dokan-dashboard-content input[type="password"]:focus,
.dokan-dashboard-content select.dokan-form-control:focus,
.dokan-dashboard-content select:focus,
.dokan-dashboard-content textarea.dokan-form-control:focus,
.dokan-dashboard-content textarea:focus {
  border-color: var(--rara-form-focus-border) !important;
  box-shadow: 0 0 0 3px var(--rara-form-focus-ring) !important;
  outline: none !important;
}

/* Primary Buttons */
.dokan-dashboard-content .dokan-btn-theme,
.dokan-dashboard-content .dokan-btn-primary,
.dokan-dashboard-content input[type="submit"].dokan-btn-theme {
  background-color: var(--rara-form-primary) !important;
  border-color: var(--rara-form-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--rara-form-radius) !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: var(--rara-form-transition) !important;
  box-shadow: 0 2px 4px rgba(109, 40, 217, 0.2) !important;
  cursor: pointer !important;
}

.dokan-dashboard-content .dokan-btn-theme:hover,
.dokan-dashboard-content .dokan-btn-primary:hover,
.dokan-dashboard-content input[type="submit"].dokan-btn-theme:hover {
  background-color: var(--rara-form-primary-hover) !important;
  border-color: var(--rara-form-primary-hover) !important;
  color: #FFFFFF !important;
}

/* Secondary / Default Buttons */
.dokan-dashboard-content .dokan-btn-default,
.dokan-dashboard-content .dokan-btn:not(.dokan-btn-theme):not(.dokan-btn-primary):not(.dokan-btn-danger) {
  background-color: #F3F4F6 !important;
  border: 1px solid #D1D5DB !important;
  color: #374151 !important;
  border-radius: var(--rara-form-radius) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: var(--rara-form-transition) !important;
  cursor: pointer !important;
}

.dokan-dashboard-content .dokan-btn-default:hover,
.dokan-dashboard-content .dokan-btn:not(.dokan-btn-theme):not(.dokan-btn-primary):not(.dokan-btn-danger):hover {
  background-color: #E5E7EB !important;
  color: #1F2937 !important;
}

/* Danger / Delete Buttons */
.dokan-dashboard-content .dokan-btn-danger {
  background-color: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
  border-radius: var(--rara-form-radius) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  transition: var(--rara-form-transition) !important;
}

.dokan-dashboard-content .dokan-btn-danger:hover {
  background-color: #B91C1C !important;
}

/* Disabled Form Control & Button States */
.dokan-dashboard-content button:disabled,
.dokan-dashboard-content input:disabled,
.dokan-dashboard-content .dokan-btn:disabled,
.dokan-dashboard-content .dokan-btn.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Form Label Spacing */
.dokan-dashboard-content label.dokan-control-label,
.dokan-dashboard-content label {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  display: inline-block !important;
}

/* ==========================================================================
   UNIFIED DESIGN TOKEN SYSTEM & CARD DESIGN CONSISTENCY (PHASE A - STEP 4)
   Standardizes dashboard stat cards, summary panels, and widget containers.
   Does NOT modify PHP, JS, AJAX, card data, charts, or navigation.
   ========================================================================== */

:root {
  /* Brand Tokens */
  --rara-primary: #6D28D9;
  --rara-primary-hover: #5B21B6;
  
  /* Surface Tokens */
  --rara-bg: #FFFFFF;
  --rara-surface: #F9FAFB;
  --rara-surface-accent: #F3F4F6;

  /* Border & Radius Tokens */
  --rara-border: #E5E7EB;
  --rara-radius-sm: 8px;
  --rara-radius-md: 12px;
  --rara-radius-lg: 16px;

  /* Shadow & Elevation Tokens */
  --rara-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --rara-shadow-md: 0 4px 16px rgba(109, 40, 217, 0.08);

  /* Transition Tokens */
  --rara-transition: all 0.2s ease-in-out;
}

/* Dashboard Stat Cards */
.dokan-dashboard-content .dokan-dashboard-item,
.dokan-dashboard-content .dashboard-stat-widget,
.dokan-dashboard-content .dokan-panel {
  background: var(--rara-bg) !important;
  border: 1px solid var(--rara-border) !important;
  border-radius: var(--rara-radius-md) !important;
  box-shadow: var(--rara-shadow-sm) !important;
  transition: var(--rara-transition) !important;
  margin-bottom: 20px !important;
}

.dokan-dashboard-content .dokan-dashboard-item:hover,
.dokan-dashboard-content .dashboard-stat-widget:hover {
  box-shadow: var(--rara-shadow-md) !important;
  border-color: rgba(109, 40, 217, 0.3) !important;
}

/* Stat Counter Title & Numbers */
.dokan-dashboard-content .dokan-dashboard-item .title,
.dokan-dashboard-content .dashboard-stat-widget .title {
  color: #6B7280 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.dokan-dashboard-content .dokan-dashboard-item .count,
.dokan-dashboard-content .dashboard-stat-widget .count {
  color: #111827 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin-top: 4px !important;
}

/* Stat Card Icons Accent Container */
.dokan-dashboard-content .dokan-dashboard-item .icon,
.dokan-dashboard-content .dashboard-stat-widget .icon {
  background: rgba(109, 40, 217, 0.08) !important;
  color: var(--rara-primary) !important;
  border-radius: var(--rara-radius-sm) !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Panel Header & Summary Titles */
.dokan-dashboard-content .dokan-panel-heading,
.dokan-dashboard-content .dashboard-widget .widget-title {
  background: var(--rara-surface) !important;
  border-bottom: 1px solid var(--rara-border) !important;
  padding: 14px 20px !important;
  border-top-left-radius: var(--rara-radius-md) !important;
  border-top-right-radius: var(--rara-radius-md) !important;
}

.dokan-dashboard-content .dokan-panel-heading h3,
.dokan-dashboard-content .dashboard-widget .widget-title h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1F2937 !important;
  margin: 0 !important;
}

/* Panel Body Padding */
.dokan-dashboard-content .dokan-panel-body,
.dokan-dashboard-content .dashboard-widget .widget-content {
  padding: 20px !important;
  background: var(--rara-bg) !important;
}

/* ==========================================================================
   RESPONSIVE POLISH & VIEWPORT ADAPTATION (PHASE A - STEP 5)
   Ensures clean tablet and mobile grid layouts, touch-friendly padding,
   and zero horizontal overflow on smaller screens.
   Does NOT modify PHP, JS, AJAX, or Dokan core templates.
   ========================================================================== */

@media (max-width: 921.99px) {
  .dokan-dashboard-content {
    padding: 12px 16px !important;
  }
  .dokan-dashboard-content .dokan-panel-body,
  .dokan-dashboard-content .dashboard-widget .widget-content {
    padding: 14px !important;
  }
  .dokan-dashboard-content .dokan-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 576px) {
  .dokan-dashboard-content .dokan-btn,
  .dokan-dashboard-content input[type="submit"] {
    width: 100% !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }
  .dokan-dashboard-header,
  .dokan-dashboard-content .entry-title {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }
}

/* ── Remove Quick View (Eye Icon) from Product Cards on Mobile ── */
@media (max-width: 921px) {
  .rara-card__quickview-btn,
  .rara-card__quickview,
  .rara-quickview-btn,
  .rara-card__action-btn--quickview,
  .ast-quick-view-text,
  .ast-quick-view-button,
  .yith-wcqv-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   MOBILE SELLER STORE NAVIGATION EXPERIENCE (MOBILE ONLY, <992px)
   ========================================================================== */
@media (max-width: 991px) {
  /* 1. Hide default header and search on mobile store page */
  body.dokan-store .rara-header,
  body.dokan-store .rara-header__top,
  body.dokan-store .rara-header__main,
  body.dokan-store .rara-header__search-row,
  body.dokan-store .rara-header__search-wrap {
    display: none !important;
  }

  /* 2. Hide WooCommerce breadcrumbs on mobile store page */
  body.dokan-store .woocommerce-breadcrumb,
  body.dokan-store nav.woocommerce-breadcrumb {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* 3. Push content below the 56px sticky mobile header, ensuring cover image goes flush */
  body.dokan-store #content.site-content,
  body.dokan-store .site-content,
  body.dokan-store #content {
    padding-top: 56px !important;
    margin-top: 0 !important;
  }

  body.dokan-store #content .ast-container,
  body.dokan-store .ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body.dokan-store #primary.content-area,
  body.dokan-store #main.site-main,
  body.dokan-store .ast-woocommerce-container,
  body.dokan-store .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body.dokan-store .dokan-store-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 4. Format Store Title in Mobile Header */
  body.dokan-store .rara-mnav__center {
    font-size: 17px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    display: block !important;
    line-height: 56px !important;
    padding-right: 12px !important;
  }

  /* 5. Ensure the mobile nav behaves as sticky flex */
  body.dokan-store .rara-mnav {
    display: flex !important;
    height: 56px !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    padding: 0 8px 0 4px !important;
    box-sizing: border-box !important;
  }

  /* 6. Hide sidebar completely on mobile to remove default blog widgets */
  body.dokan-store #dokan-secondary,
  body.dokan-store .dokan-store-sidebar {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  /* 7. Ensure content area expands to full width */
  body.dokan-store #dokan-primary,
  body.dokan-store #primary,
  body.dokan-store .dokan-single-store {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin: 0 !important;
  }
}