/*
 * ============================================================
 *  VELORA GROWTH – MASTER CUSTOM STYLESHEET
 *  File: /wp-content/themes/hello-elementor-child/css/velora-custom.css
 *
 *  This is the single source of truth for all hand-written CSS.
 *  Auto-generated Elementor element CSS lives separately in
 *  /uploads/elementor/css/ and is managed by Elementor itself.
 *
 *  After adding this file, clear the following from Elementor:
 *    › Elementor → Site Settings → Custom CSS  (all content)
 *    › Cart page shortcode element → Advanced → Custom CSS  (all content)
 *    › Header menu-cart widget → Advanced → Custom CSS  (all content)
 *
 *  TABLE OF CONTENTS
 *  ─────────────────────────────────────────────────────────
 *   1.  Design Tokens (CSS custom properties)
 *   2.  Social Login  (Nextend – Google button)
 *   3.  Authentication Forms  (User Registration plugin)
 *   4.  Stats Bar
 *   5.  Pricing Cards & Tab Navigation
 *   6.  Pricing Panels  (anchor-switch system)
 *   7.  Feature Cards  (.velora-card)
 *   8.  FAQ Cards  (.velora-faq-card)
 *   9.  WooCommerce Cart Page
 *       9a. Layout
 *       9b. Notices
 *       9c. Empty Cart
 *       9d. Cart Table
 *       9e. Order Totals
 *       9f. Checkout Button
 *       9g. Responsive
 *  10.  WooCommerce Side Cart  (Elementor Menu Cart)
 *       10a. Container & shell
 *       10b. Cart items  (grid layout)
 *       10c. Quantity controls
 *       10d. Totals & action buttons
 *       10e. Empty cart state
 *       10f. Close button & scrollbar
 *  11.  Responsive Overrides
 *       11a. Tablet  (max-width: 1024px)
 *       11b. Mobile  (max-width: 767px)
 *       11c. Small mobile  (max-width: 480px)
 * ─────────────────────────────────────────────────────────
 */


/* ============================================================
   1.  DESIGN TOKENS
   These mirror the values set in Elementor → Site Settings →
   Global Colors/Typography.  Update both places if you change
   a brand colour.
   ============================================================ */

:root {
  /* Brand colours */
  --velora-gold:            #D4B15F;
  --velora-gold-hover:      #C9A94E;
  --velora-gold-bright:     #e7c979;
  --velora-gold-border:     rgba(212, 177, 95, 0.45);
  --velora-gold-border-dim: rgba(212, 177, 95, 0.12);

  /* Backgrounds */
  --velora-bg:              #0B0E11;
  --velora-bg-page:         #0B0F14;
  --velora-bg-card:         linear-gradient(145deg, #11161d, #0d1117);
  --velora-bg-surface:      rgba(255, 255, 255, 0.03);
  --velora-bg-surface-md:   rgba(255, 255, 255, 0.05);

  /* Text */
  --velora-text:            #FFFFFF;
  --velora-text-muted:      rgba(229, 231, 235, 0.75);
  --velora-text-subtle:     rgba(229, 231, 235, 0.55);
  --velora-text-dim:        rgba(229, 231, 235, 0.45);
  --velora-text-secondary:  #9AA6B2;  /* also used as #9CA3AF / #9eb0cc */

  /* Borders */
  --velora-border:          rgba(255, 255, 255, 0.06);
  --velora-border-md:       rgba(255, 255, 255, 0.10);
  --velora-border-strong:   rgba(255, 255, 255, 0.14);

  /* Shadows */
  --velora-shadow-card:     0 12px 28px rgba(0, 0, 0, 0.35);
  --velora-shadow-lg:       0 20px 60px rgba(0, 0, 0, 0.35);

  /* Radius */
  --velora-radius-sm:       10px;
  --velora-radius-md:       14px;
  --velora-radius-lg:       18px;
  --velora-radius-xl:       22px;
  --velora-radius-pill:     999px;

  /* Transitions */
  --velora-transition:      0.2s ease;
  --velora-transition-slow: 0.3s ease;
}


/* ============================================================
   2.  SOCIAL LOGIN  (Nextend – Google button)
   ============================================================ */

.nsl-container {
  width: 100%;
}

.nsl-button {
  width: 100% !important;
  justify-content: center !important;
  border-radius: var(--velora-radius-md) !important;
}


/* ============================================================
   3.  AUTHENTICATION FORMS  (User Registration plugin)
   Scope: .velora-auth wrapper placed around the shortcode
   ============================================================ */

/* --- Base reset --- */
.velora-auth .user-registration,
.velora-auth .ur-frontend-form,
.velora-auth form.ur-frontend-form {
  background:  transparent !important;
  border:      0 !important;
  box-shadow:  none !important;
  padding:     0 !important;
  margin:      0 !important;
}

/* --- Single-column layout --- */
.velora-auth .ur-form-row {
  display:               block !important;
  grid-template-columns: 1fr !important;
}

.velora-auth .ur-form-row > .ur-form-grid,
.velora-auth .ur-form-grid.ur-grid-1,
.velora-auth .ur-form-grid.ur-grid-2 {
  width:     100% !important;
  max-width: 100% !important;
  flex:      0 0 100% !important;
}

.velora-auth .ur-frontend-form,
.velora-auth .ur-frontend-form .ur-form-row,
.velora-auth .ur-frontend-form .ur-form-grid,
.velora-auth .ur-frontend-form .ur-field-item,
.velora-auth .ur-frontend-form .ur-field-item input,
.velora-auth .ur-frontend-form .ur-field-item textarea,
.velora-auth .ur-frontend-form .ur-field-item select {
  width:     100% !important;
  max-width: 100% !important;
}

/* --- Typography --- */
.velora-auth h1,
.velora-auth h2,
.velora-auth h3 {
  color: #E5E7EB !important;
}

.velora-auth a {
  color:           var(--velora-gold) !important;
  text-decoration: none;
}
.velora-auth a:hover {
  text-decoration: underline;
}

/* --- Labels --- */
.velora-auth .ur-frontend-form label {
  display:      block;
  margin:       0 0 8px;
  font-size:    13px;
  font-weight:  500;
  color:        var(--velora-text-muted) !important;
}

/* --- Inputs --- */
.velora-auth .ur-frontend-form input[type="text"],
.velora-auth .ur-frontend-form input[type="email"],
.velora-auth .ur-frontend-form input[type="password"],
.velora-auth .ur-frontend-form input[type="tel"],
.velora-auth .ur-frontend-form select,
.velora-auth .ur-frontend-form textarea {
  display:       block !important;
  width:         100% !important;
  background:    rgba(17, 20, 24, 0.90) !important;
  border:        1px solid var(--velora-border-md) !important;
  border-radius: var(--velora-radius-md) !important;
  padding:       18px !important;
  min-height:    54px;
  line-height:   1.4 !important;
  color:         var(--velora-text) !important;
  font-size:     14px !important;
  box-shadow:    none !important;
  outline:       none !important;
}

.velora-auth .ur-frontend-form input::placeholder,
.velora-auth .ur-frontend-form textarea::placeholder {
  color: rgba(229, 231, 235, 0.35) !important;
}

.velora-auth .ur-frontend-form input:focus,
.velora-auth .ur-frontend-form select:focus,
.velora-auth .ur-frontend-form textarea:focus {
  border-color: rgba(212, 177, 95, 0.60) !important;
}

/* --- Field spacing --- */
.velora-auth .ur-frontend-form .ur-form-row {
  margin-bottom: 16px !important;
}

/* --- Help / description text --- */
.velora-auth .ur-frontend-form .ur-frontend-field-description,
.velora-auth .ur-frontend-form .description,
.velora-auth .ur-frontend-form small,
.velora-auth .ur-frontend-form .user-registration-password-strength {
  display:       block;
  margin-top:    10px !important;
  padding:       12px 14px;
  background:    rgba(255, 255, 255, 0.03);
  border:        1px solid var(--velora-border);
  border-radius: 12px;
  font-size:     12px;
  line-height:   1.6;
  color:         var(--velora-text-subtle) !important;
  max-width:     100%;
  white-space:   normal;
}

/* --- Submit button --- */
.velora-auth .ur-frontend-form .ur-button-container {
  width:     100% !important;
  max-width: 100% !important;
}

.velora-auth .ur-frontend-form button[type="submit"],
.velora-auth .ur-frontend-form input[type="submit"],
.velora-auth .ur-frontend-form .ur-submit-button {
  display:       block !important;
  width:         100% !important;
  background:    var(--velora-gold) !important;
  color:         var(--velora-bg) !important;
  border:        none !important;
  border-radius: var(--velora-radius-md) !important;
  padding:       16px 18px !important;
  font-size:     15px !important;
  font-weight:   600 !important;
  cursor:        pointer !important;
  transition:    background var(--velora-transition), transform var(--velora-transition);
}

.velora-auth .ur-frontend-form button[type="submit"]:hover,
.velora-auth .ur-frontend-form input[type="submit"]:hover,
.velora-auth .ur-frontend-form .ur-submit-button:hover {
  background:  var(--velora-gold-hover) !important;
  transform:   translateY(-1px);
}

/* --- Notices / errors --- */
.velora-auth .ur-error,
.velora-auth .user-registration-error,
.velora-auth .user-registration-message,
.velora-auth .ur-message {
  background:    rgba(255, 255, 255, 0.06) !important;
  border:        1px solid var(--velora-border-md) !important;
  color:         rgba(229, 231, 235, 0.9) !important;
  border-radius: 12px !important;
  padding:       12px 14px !important;
  margin-bottom: 14px !important;
}

/* --- Legal text --- */
.velora-auth .ur-frontend-form p,
.velora-auth .ur-frontend-form .privacy-policy-text,
.velora-auth .ur-frontend-form .terms {
  color:     var(--velora-text-dim) !important;
  font-size: 12px;
}


/* ============================================================
   4.  STATS BAR  (.velora-stats)
   ============================================================ */

.velora-stats {
  display:         flex;
  justify-content: space-between;
  align-items:     stretch;
  max-width:       620px;
  margin:          0 auto;
  padding-top:     18px;
}

.velora-stats > div {
  flex:            1;
  text-align:      center;
  padding:         0 28px;
  position:        relative;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
}

/* Vertical divider between items */
.velora-stats > div:not(:last-child)::after {
  content:    "";
  position:   absolute;
  right:      0;
  top:        50%;
  transform:  translateY(-50%);
  width:      1px;
  height:     52px;
  background: var(--velora-border-md);
}

.velora-stats .elementor-heading-title {
  color:       #E5E7EB;
  font-weight: 600;
  font-size:   18px;
  line-height: 1.1;
  margin:      0;
}

.velora-stats .elementor-widget-text-editor {
  margin-top:  6px;
  color:       var(--velora-text-subtle);
  font-size:   12px;
  line-height: 1.2;
}

@media (max-width: 520px) {
  .velora-stats {
    flex-direction: column;
    gap:            14px;
  }
  .velora-stats > div {
    padding: 0;
  }
  .velora-stats > div:not(:last-child)::after {
    display: none;
  }
}


/* ============================================================
   5.  PRICING CARDS & TAB NAVIGATION
   ============================================================ */

/* --- Tab buttons --- */
.velora-pricing-tabs .elementor-button.velora-tab {
  background:    var(--velora-bg-surface) !important;
  border:        1px solid var(--velora-border-md) !important;
  color:         var(--velora-text-muted) !important;
  border-radius: var(--velora-radius-md) !important;
  padding:       12px 22px !important;
  box-shadow:    none !important;
}

.velora-pricing-tabs .elementor-button.velora-tab.is-active {
  border-color: rgba(212, 177, 95, 0.55) !important;
  background:   rgba(212, 177, 95, 0.08) !important;
  color:        #E5E7EB !important;
}

/* --- Grid wrapper --- */
.velora-pricing-grid {
  max-width: 1120px;
  margin:    0 auto;
}

@media (max-width: 900px) {
  .velora-pricing-grid {
    padding: 0 18px;
  }
}

/* --- Plan card base --- */
.velora-plan {
  background:    var(--velora-bg-surface);
  border:        1px solid var(--velora-border-md);
  border-radius: var(--velora-radius-xl);
  padding:       34px 34px 28px;
  position:      relative;
  box-shadow:    var(--velora-shadow-lg);
}

.velora-plan--featured {
  border-color: var(--velora-gold-border);
  background:   linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

/* --- "Most Popular" pill --- */
.velora-popular-pill {
  position:      absolute;
  top:           -14px;
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--velora-gold);
  color:         var(--velora-bg);
  border-radius: var(--velora-radius-pill);
  padding:       6px 14px;
  font-size:     11px;
  font-weight:   600;
  letter-spacing: 0.06em;
}

/* --- Card typography --- */
.velora-plan .elementor-heading-title {
  color: #E5E7EB;
}
.velora-plan p {
  color: var(--velora-text-subtle);
}
.velora-plan h2,
.velora-plan h3 {
  margin: 0;
}

/* --- Divider inside cards --- */
.velora-plan .elementor-divider-separator {
  border-top-color: var(--velora-border-md) !important;
}

/* --- Icon lists --- */
.velora-plan .elementor-icon-list-text {
  color: rgba(229, 231, 235, 0.70) !important;
}
.velora-plan .elementor-icon-list-icon i {
  color: rgba(212, 177, 95, 0.9) !important;
}

/* --- CTA buttons --- */
.velora-plan .elementor-button {
  width:         100%;
  border-radius: var(--velora-radius-md) !important;
  padding:       14px 16px !important;
  border:        1px solid var(--velora-border-strong) !important;
  background:    var(--velora-bg-surface-md) !important;
  color:         #E5E7EB !important;
}

.velora-plan--featured .elementor-button {
  background:   var(--velora-gold) !important;
  color:        var(--velora-bg) !important;
  border-color: transparent !important;
}


/* ============================================================
   6.  PRICING PANELS  (anchor-switch system)
   Panels hide/show based on URL fragment (#pricing-instagram etc.)
   ============================================================ */

.velora-pricing-panel {
  display:           none;
  scroll-margin-top: 120px;
}

.velora-pricing-panel:first-of-type {
  display: flex;
}
.velora-pricing-panel:target {
  display: flex;
}

/* Tab link opacity states */
.velora-pricing-tabs a.velora-tab-btn {
  opacity:    0.6;
  transition: opacity var(--velora-transition), transform var(--velora-transition);
}
.velora-pricing-tabs a.velora-tab-btn:hover {
  opacity: 1;
}

/* Default "active" look – Instagram is the first/default panel */
.velora-pricing-tabs a.velora-tab-btn[href="#pricing-instagram"] {
  opacity: 1;
}


/* ============================================================
   7.  FEATURE CARDS  (.velora-card)
   ============================================================ */

.velora-card {
  background:    var(--velora-bg-card);
  border:        1px solid var(--velora-border);
  border-radius: 16px;
  padding:       40px 30px;
  text-align:    center;
  position:      relative;
  overflow:      hidden;
  transition:    transform var(--velora-transition-slow),
                 border-color var(--velora-transition-slow),
                 box-shadow var(--velora-transition-slow);
}

.velora-card:hover {
  transform:    translateY(-6px);
  border-color: rgba(255, 190, 92, 0.4);
  box-shadow:   0 20px 40px rgba(0, 0, 0, 0.4);
}

.velora-card i {
  text-shadow: 0 0 15px rgba(255, 190, 92, 0.6);
}

/* Gradient border glow on hover */
.velora-card::before {
  content:       "";
  position:      absolute;
  inset:         -1px;
  border-radius: 16px;
  padding:       1px;
  background:    linear-gradient(120deg, transparent, rgba(255, 190, 92, 0.4), transparent);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:    0;
  transition: opacity var(--velora-transition-slow);
}

.velora-card:hover::before {
  opacity: 1;
}


/* ============================================================
   8.  FAQ CARDS  (.velora-faq-card)
   ============================================================ */

.velora-faq-wrap {
  max-width: 860px;
  margin:    0 auto;
}

.velora-faq-card {
  background:    var(--velora-bg-card);
  border:        1px solid var(--velora-border);
  border-radius: var(--velora-radius-lg);
  padding:       26px 28px;
  box-shadow:    var(--velora-shadow-card);
  transition:    transform 0.25s ease, border-color 0.25s ease;
}

.velora-faq-card:hover {
  transform:    translateY(-2px);
  border-color: rgba(255, 190, 92, 0.35);
}

.velora-faq-card .elementor-heading-title {
  color:       var(--velora-text);
  font-weight: 600;
  font-size:   18px;
  margin:      0 0 10px;
}

.velora-faq-card .elementor-widget-text-editor {
  color:       #9AA6B2;
  font-size:   14.5px;
  line-height: 1.7;
  margin:      0;
}

@media (max-width: 767px) {
  .velora-faq-card {
    padding: 20px 18px;
  }
}


/* ============================================================
   9.  WOOCOMMERCE CART PAGE
   ============================================================ */

body.woocommerce-cart {
  background: var(--velora-bg-page);
}

/* Hide theme page headers (Elementor headings replace these) */
body.woocommerce-cart .entry-header,
body.woocommerce-cart .woocommerce-products-header {
  display: none;
}

/* Hide "View cart" link that appears after AJAX add-to-cart */
.elementor-widget-wc-add-to-cart a.added_to_cart.wc-forward {
  display: none !important;
}


/* --- 9a. Layout --- */

.woocommerce-cart .woocommerce {
  max-width:   1180px !important;
  margin:      0 auto !important;
  padding:     40px 20px 80px !important;
  display:     flex !important;
  align-items: flex-start !important;
  gap:         28px !important;
  flex-wrap:   nowrap !important;
  overflow:    visible !important;
}

/* Notices span the full row */
.woocommerce-cart .woocommerce-notices-wrapper {
  width:  100% !important;
  flex:   0 0 100% !important;
}

/* Left column: cart form */
.woocommerce-cart form.woocommerce-cart-form {
  flex:      1 1 auto !important;
  width:     auto !important;
  max-width: none !important;
  margin:    0 !important;
  float:     none !important;
  min-width: 0 !important;
  display:   block !important;
}

/* Right column: order totals */
.woocommerce-cart .cart-collaterals {
  flex:      0 0 300px !important;
  width:     300px !important;
  max-width: 300px !important;
  margin:    0 !important;
  float:     none !important;
  clear:     none !important;
  display:   block !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  width:     100% !important;
  max-width: 100% !important;
  float:     none !important;
  margin:    0 !important;
}


/* --- 9b. Notices --- */

.woocommerce-cart .woocommerce-notices-wrapper {
  margin: 28px 0 22px;
}

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
  background:      #EDEDED !important;
  color:           var(--velora-bg-page) !important;
  border:          0 !important;
  outline:         none !important;
  border-radius:   16px !important;
  padding:         18px 22px !important;
  box-shadow:      0 10px 24px rgba(0, 0, 0, 0.25) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  gap:             16px !important;
}

.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before {
  position: static !important;
  margin:   0 10px 0 0 !important;
}

.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-info .button {
  background:    transparent !important;
  border:        1px solid rgba(11, 15, 20, 0.25) !important;
  color:         var(--velora-bg-page) !important;
  border-radius: 12px !important;
  padding:       10px 16px !important;
  font-weight:   600;
  white-space:   nowrap;
}


/* --- 9c. Empty Cart --- */

body.woocommerce-cart .cart-empty,
body.woocommerce-cart .woocommerce-cart-empty {
  background:    var(--velora-bg-card);
  border:        1px solid var(--velora-border);
  border-radius: var(--velora-radius-lg);
  padding:       70px 24px;
  box-shadow:    var(--velora-shadow-card);
  margin:        0 auto;
  color:         #9AA6B2;
  text-align:    center;
}

/* Empty cart icon via mask */
body.woocommerce-cart .cart-empty::before,
body.woocommerce-cart .woocommerce-cart-empty::before {
  content:    "";
  display:    block;
  width:      56px;
  height:     56px;
  margin:     0 auto 18px;
  opacity:    0.6;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 7.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7.5m16 0A2.5 2.5 0 0 0 17.5 5h-11A2.5 2.5 0 0 0 4 7.5m16 0v.5H4v-.5"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 7.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7.5m16 0A2.5 2.5 0 0 0 17.5 5h-11A2.5 2.5 0 0 0 4 7.5m16 0v.5H4v-.5"/></svg>') center/contain no-repeat;
  background-color: rgba(255, 190, 92, 0.55);
}

/* Hide default WooCommerce text; inject custom via ::after */
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .woocommerce-cart-empty {
  font-size: 0;
}
body.woocommerce-cart .cart-empty::after,
body.woocommerce-cart .woocommerce-cart-empty::after {
  content:       "Your cart is empty";
  display:       block;
  font-size:     22px;
  font-weight:   600;
  color:         var(--velora-text);
  margin-bottom: 10px;
}

/* Return to shop link */
body.woocommerce-cart .return-to-shop {
  margin-top: 18px !important;
}
body.woocommerce-cart .return-to-shop a.button {
  background:  var(--velora-gold);
  color:       var(--velora-bg-page);
  border:      0;
  border-radius: var(--velora-radius-md);
  padding:     14px 22px;
  font-weight: 600;
  box-shadow:  0 10px 24px rgba(0, 0, 0, 0.35);
  transition:  transform 0.25s ease, filter 0.25s ease;
}
body.woocommerce-cart .return-to-shop a.button:hover {
  transform: translateY(-2px);
  filter:    brightness(1.05);
}


/* --- 9d. Cart Table --- */

.woocommerce-cart .woocommerce-cart-form table.shop_table {
  width:            100% !important;
  table-layout:     fixed !important;
  border-collapse:  separate !important;
  border-spacing:   0 !important;
  background:       linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)) !important;
  border:           1px solid var(--velora-gold-border-dim) !important;
  border-radius:    24px !important;
  overflow:         hidden !important;
  box-shadow:       0 12px 40px rgba(0, 0, 0, 0.22) !important;
  color:            var(--velora-text) !important;
}

/* Header row */
.woocommerce-cart .woocommerce-cart-form table.shop_table thead th {
  padding:       22px 18px !important;
  color:         var(--velora-text) !important;
  font-size:     15px !important;
  font-weight:   500 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:    transparent !important;
  text-align:    left !important;
}

/* Body cells */
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody td {
  padding:        18px !important;
  vertical-align: middle !important;
  border-top:     1px solid rgba(255, 255, 255, 0.06) !important;
  background:     transparent !important;
  color:          var(--velora-text) !important;
}

/* Column widths */
.woocommerce-cart td.product-remove    { width: 42px !important;  }
.woocommerce-cart td.product-thumbnail { width: 90px !important;  }
.woocommerce-cart td.product-name      { width: auto !important;  }
.woocommerce-cart td.product-price     { width: 110px !important; }
.woocommerce-cart td.product-quantity  { width: 95px !important;  }
.woocommerce-cart td.product-subtotal  { width: 130px !important; }

.woocommerce-cart td.product-remove {
  padding-left:  10px !important;
  padding-right: 6px !important;
  text-align:    center !important;
}
.woocommerce-cart td.product-thumbnail {
  padding-left:  6px !important;
  padding-right: 12px !important;
}

/* Remove button */
.woocommerce-cart a.remove {
  width:         34px !important;
  height:        34px !important;
  line-height:   30px !important;
  border-radius: var(--velora-radius-pill) !important;
  border:        1px solid var(--velora-border-strong) !important;
  color:         rgba(255, 255, 255, 0.7) !important;
  background:    var(--velora-bg-surface) !important;
  text-align:    center !important;
  font-size:     22px !important;
  transition:    all var(--velora-transition) !important;
}
.woocommerce-cart a.remove:hover {
  background:   rgba(212, 177, 95, 0.14) !important;
  border-color: rgba(212, 177, 95, 0.35) !important;
  color:        var(--velora-gold) !important;
}

/* Product thumbnail image */
.woocommerce-cart td.product-thumbnail a {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
}
.woocommerce-cart td.product-thumbnail img {
  width:         64px !important;
  height:        64px !important;
  min-width:     64px !important;
  object-fit:    cover !important;
  border-radius: 12px !important;
  display:       block !important;
  background:    var(--velora-bg-surface) !important;
}

/* Product name link */
.woocommerce-cart td.product-name a {
  color:          var(--velora-gold) !important;
  font-weight:    500 !important;
  text-decoration: none !important;
  line-height:    1.35 !important;
  word-break:     normal !important;
  overflow-wrap:  break-word !important;
}
.woocommerce-cart td.product-name a:hover {
  color: var(--velora-gold-bright) !important;
}

/* Price / subtotal */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal,
.woocommerce-cart .amount,
.woocommerce-cart .woocommerce-Price-amount {
  color:       var(--velora-text) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Quantity input */
.woocommerce-cart .quantity {
  display:         flex !important;
  justify-content: center !important;
}
.woocommerce-cart .quantity .qty {
  width:         62px !important;
  min-height:    42px !important;
  border-radius: var(--velora-radius-sm) !important;
  border:        1px solid var(--velora-border-md) !important;
  background:    rgba(255, 255, 255, 0.04) !important;
  color:         var(--velora-text) !important;
  text-align:    center !important;
  box-shadow:    none !important;
  outline:       none !important;
  -moz-appearance: textfield !important;
  appearance:    textfield !important;
}
.woocommerce-cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin:             0 !important;
}

/* Actions row (coupon + update button) */
.woocommerce-cart table.shop_table td.actions {
  padding:    18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.woocommerce-cart td.actions .coupon {
  display:     flex !important;
  align-items: center !important;
  gap:         14px !important;
  flex-wrap:   nowrap !important;
}
.woocommerce-cart td.actions .coupon input.input-text {
  flex:          1 1 auto !important;
  min-width:     0 !important;
  width:         auto !important;
  max-width:     none !important;
  height:        48px !important;
  padding:       0 16px !important;
  border-radius: 12px !important;
  border:        1px solid var(--velora-border-md) !important;
  background:    var(--velora-bg-surface) !important;
  color:         var(--velora-text) !important;
}
.woocommerce-cart td.actions .coupon input.input-text::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Generic cart buttons */
.woocommerce-cart .button,
.woocommerce-cart button.button,
.woocommerce-cart input.button {
  min-height:    48px !important;
  padding:       0 20px !important;
  border-radius: 12px !important;
  border:        1px solid var(--velora-border-md) !important;
  background:    var(--velora-bg-surface-md) !important;
  color:         var(--velora-text) !important;
  font-weight:   600 !important;
  box-shadow:    none !important;
  transition:    all var(--velora-transition) !important;
}
.woocommerce-cart .button:hover,
.woocommerce-cart button.button:hover,
.woocommerce-cart input.button:hover {
  background:   rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Hide "Update cart" button (auto-updates via AJAX) */
.woocommerce-cart button[name="update_cart"] {
  display: none !important;
}


/* --- 9e. Order Totals --- */

.woocommerce-cart .cart-collaterals .cart_totals {
  background:    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)) !important;
  border:        1px solid var(--velora-gold-border-dim) !important;
  border-radius: 24px !important;
  padding:       24px !important;
  box-shadow:    0 12px 40px rgba(0, 0, 0, 0.22) !important;
  color:         var(--velora-text) !important;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
  margin:      0 0 18px !important;
  font-size:   20px !important;
  font-weight: 600 !important;
  color:       var(--velora-text) !important;
}

.woocommerce-cart .cart-collaterals .shop_table {
  width:         100% !important;
  background:    transparent !important;
  border:        0 !important;
  box-shadow:    none !important;
  border-radius: 0 !important;
}

.woocommerce-cart .cart-collaterals .shop_table th,
.woocommerce-cart .cart-collaterals .shop_table td {
  padding:    16px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

.woocommerce-cart .cart-collaterals .shop_table tr:first-child th,
.woocommerce-cart .cart-collaterals .shop_table tr:first-child td {
  border-top: 0 !important;
}

.woocommerce-cart .cart-collaterals .shop_table th {
  color:      rgba(255, 255, 255, 0.8) !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.woocommerce-cart .cart-collaterals .shop_table td {
  text-align: right !important;
}

.woocommerce-cart .cart-collaterals .order-total th,
.woocommerce-cart .cart-collaterals .order-total td,
.woocommerce-cart .cart-collaterals .order-total .amount {
  color:       var(--velora-text) !important;
  font-size:   18px !important;
  font-weight: 700 !important;
}


/* --- 9f. Checkout Button --- */

.woocommerce-cart .wc-proceed-to-checkout {
  padding-top: 16px !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  width:           100% !important;
  min-height:      54px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  border-radius:   var(--velora-radius-md) !important;
  background:      var(--velora-gold) !important;
  border:          1px solid var(--velora-gold) !important;
  color:           #111 !important;
  font-weight:     600 !important;
  text-align:      center !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  filter: brightness(1.05) !important;
}


/* --- 9g. Responsive --- */

@media (max-width: 980px) {
  .woocommerce-cart .woocommerce {
    display: block !important;
  }
  .woocommerce-cart form.woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals {
    width:     100% !important;
    max-width: 100% !important;
  }
  .woocommerce-cart .cart-collaterals {
    margin-top: 24px !important;
  }
}

@media (max-width: 767px) {
  .woocommerce-cart .woocommerce {
    padding: 24px 16px 60px !important;
  }
  .woocommerce-cart .woocommerce-cart-form table.shop_table thead th,
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody td {
    padding: 14px 12px !important;
  }
  .woocommerce-cart td.actions .coupon {
    flex-direction: column !important;
    align-items:    stretch !important;
  }
  .woocommerce-cart td.actions .coupon input.input-text,
  .woocommerce-cart td.actions .coupon .button {
    width: 100% !important;
  }
  .woocommerce-cart .woocommerce-message,
  .woocommerce-cart .woocommerce-info,
  .woocommerce-cart .woocommerce-error {
    flex-direction: column !important;
    align-items:    flex-start !important;
  }
  .woocommerce-cart .woocommerce-message .button,
  .woocommerce-cart .woocommerce-info .button {
    width:      100%;
    text-align: center;
  }
}


/* ============================================================
   10.  WOOCOMMERCE SIDE CART  (Elementor Menu Cart widget)
   ============================================================ */


/* --- 10a. Container & shell --- */

.elementor-menu-cart__container .elementor-menu-cart__main {
  background:   #06080f !important;
  color:        var(--velora-text);
  padding:      26px 24px 22px !important;
  border-left:  1px solid rgba(255, 255, 255, 0.08);
  box-shadow:   -10px 0 40px rgba(0, 0, 0, 0.45);
  display:      flex;
  flex-direction: column;
  height:       100%;
  min-height:   0;
}

.elementor-menu-cart__container .widget_shopping_cart_content {
  display:        flex;
  flex-direction: column;
  height:         100%;
  min-height:     0;
}

.elementor-menu-cart__container .woocommerce-mini-cart {
  flex:       1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin:     0;
  padding:    0 6px 0 0;
  list-style: none;
}


/* --- 10b. Cart items (grid layout) --- */

.elementor-menu-cart__container .woocommerce-mini-cart-item {
  position:              relative;
  display:               grid !important;
  grid-template-columns: 50px 1fr 18px;
  gap:                   14px;
  align-items:           start;
  background:            #0b1018;
  border:                1px solid rgba(255, 255, 255, 0.07);
  border-radius:         16px;
  padding:               16px !important;
  margin:                0 0 18px !important;
  box-shadow:            inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Remove button (top-right of each item) */
.elementor-menu-cart__container .woocommerce-mini-cart-item > a.remove {
  grid-column:  3;
  grid-row:     1;
  justify-self: end;
  align-self:   start;
  position:     static !important;
  width:        18px;
  height:       18px;
  line-height:  18px !important;
  text-align:   center;
  font-size:    18px !important;
  color:        rgba(255, 255, 255, 0.55) !important;
  background:   transparent !important;
  border:       0 !important;
  border-radius: 0 !important;
  box-shadow:   none !important;
  text-decoration: none;
}
.elementor-menu-cart__container .woocommerce-mini-cart-item > a.remove:hover {
  color: var(--velora-text) !important;
}

/* Product thumbnail */
.elementor-menu-cart__container .woocommerce-mini-cart-item img {
  grid-column:  1;
  grid-row:     1 / span 3;
  width:        50px !important;
  height:       50px !important;
  min-width:    50px;
  object-fit:   cover;
  border-radius: 10px;
  margin:       0 !important;
  float:        none !important;
  background:   rgba(255, 255, 255, 0.04);
}

/* Text block */
.elementor-menu-cart__container .velora-mini-cart-text {
  grid-column:    2;
  grid-row:       1;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0;
}

/* Product title link */
.elementor-menu-cart__container .velora-mini-cart-title,
.elementor-menu-cart__container .woocommerce-mini-cart-item > a:not(.remove) {
  display:         block;
  color:           var(--velora-text) !important;
  font-size:       15px;
  font-weight:     600;
  line-height:     1.3;
  text-decoration: none;
  margin:          0;
}

/* Product description */
.elementor-menu-cart__container .velora-mini-cart-desc {
  font-size:   13px;
  line-height: 1.45;
  color:       #9eb0cc;
  margin:      0;
}

/* Product variations */
.elementor-menu-cart__container .woocommerce-mini-cart-item .variation,
.elementor-menu-cart__container .woocommerce-mini-cart-item dl.variation {
  grid-column: 2;
  margin:      0;
  color:       #8e9bb3;
  font-size:   12px;
  line-height: 1.45;
}
.elementor-menu-cart__container .woocommerce-mini-cart-item dl.variation dt,
.elementor-menu-cart__container .woocommerce-mini-cart-item dl.variation dd,
.elementor-menu-cart__container .woocommerce-mini-cart-item dl.variation p {
  display: inline;
  margin:  0;
}


/* --- 10c. Quantity controls --- */

.elementor-menu-cart__container .velora-mini-cart-qty-row {
  grid-column:    2 / span 2;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            8px;
  margin-top:     10px;
  padding-top:    12px;
  border-top:     1px solid rgba(255, 255, 255, 0.07);
}

.elementor-menu-cart__container .velora-mini-cart-qty {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
}

.elementor-menu-cart__container .velora-qty-btn {
  width:           30px;
  height:          30px;
  min-width:       30px;
  border-radius:   8px;
  border:          1px solid var(--velora-border-md);
  background:      var(--velora-bg-surface);
  color:           var(--velora-text);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
  margin:          0;
  line-height:     1;
  cursor:          pointer;
}

.elementor-menu-cart__container .velora-qty-minus {
  font-size:      20px;
  padding-bottom: 1px;
}

.elementor-menu-cart__container .velora-qty-plus {
  font-size: 18px;
}

.elementor-menu-cart__container .velora-qty-input {
  width:      36px !important;
  min-width:  36px !important;
  max-width:  36px !important;
  flex:       0 0 36px !important;
  height:     30px !important;
  border:     1px solid var(--velora-border-md) !important;
  border-radius: 8px !important;
  background: var(--velora-bg-surface) !important;
  color:      var(--velora-text) !important;
  -webkit-text-fill-color: var(--velora-text) !important;
  font-size:  16px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  text-align: center !important;
  padding:    0 !important;
  margin:     0 !important;
  box-shadow: none !important;
  outline:    none !important;
  appearance: textfield !important;
}

.elementor-menu-cart__container .velora-qty-input::-webkit-outer-spin-button,
.elementor-menu-cart__container .velora-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin:             0;
}

.elementor-menu-cart__container .velora-mini-cart-price .woocommerce-Price-amount {
  color:       #d4b15a;
  font-weight: 500;
  font-size:   16px;
}


/* --- 10d. Totals & action buttons --- */

.elementor-menu-cart__container .woocommerce-mini-cart__total,
.elementor-menu-cart__container .woocommerce-mini-cart__buttons {
  flex: 0 0 auto;
}

.elementor-menu-cart__container .woocommerce-mini-cart__total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-top:      1px solid rgba(255, 255, 255, 0.08);
  margin-top:      16px;
  padding-top:     20px;
  margin-bottom:   16px;
  color:           #9eb0cc;
  font-size:       16px;
}
.elementor-menu-cart__container .woocommerce-mini-cart__total .woocommerce-Price-amount {
  color:       var(--velora-text) !important;
  font-size:   18px;
  font-weight: 500;
}

.elementor-menu-cart__container .woocommerce-mini-cart__buttons {
  display:        flex;
  flex-direction: column-reverse;
  gap:            14px;
  margin:         0;
}

.elementor-menu-cart__container .woocommerce-mini-cart__buttons a.button {
  width:           100%;
  min-height:      52px;
  border-radius:   var(--velora-radius-md) !important;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  text-decoration: none;
  font-size:       15px;
  font-weight:     500;
  margin:          0 !important;
  box-shadow:      none !important;
}

/* Checkout button – gold fill */
.elementor-menu-cart__container .woocommerce-mini-cart__buttons a.checkout {
  background: #d4b15a !important;
  color:      #111 !important;
  border:     none !important;
}

/* "View cart" link – minimal */
.elementor-menu-cart__container .woocommerce-mini-cart__buttons a:not(.checkout) {
  background:    transparent !important;
  color:         #9eb0cc !important;
  border:        none !important;
  min-height:    auto;
  padding:       0;
  border-radius: 0 !important;
}
.elementor-menu-cart__container .woocommerce-mini-cart__buttons a:not(.checkout):hover {
  color: var(--velora-text) !important;
}


/* --- 10e. Empty cart state --- */

.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  min-height:      55vh;
  margin:          24px 0 0;
  padding:         32px 22px;
  background:      #0b1018;
  border:          1px solid rgba(255, 255, 255, 0.07);
  border-radius:   var(--velora-radius-lg);
  color:           #9eb0cc;
  font-size:       15px;
  line-height:     1.6;
}

/* Cart icon above the empty message */
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message::before {
  content:         "🛒";
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           68px;
  height:          68px;
  margin-bottom:   18px;
  border-radius:   var(--velora-radius-lg);
  background:      rgba(255, 255, 255, 0.04);
  border:          1px solid rgba(255, 255, 255, 0.08);
  font-size:       28px;
  box-shadow:      inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Sub-text below the empty message */
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message::after {
  content:     "Explore our growth packages and start building momentum.";
  display:     block;
  margin-top:  8px;
  max-width:   260px;
  color:       #7f8da8;
  font-size:   13px;
  line-height: 1.5;
}


/* --- 10f. Close button & scrollbar --- */

.elementor-menu-cart__close-button {
  color: rgba(255, 255, 255, 0.75) !important;
}
.elementor-menu-cart__close-button:hover {
  color: var(--velora-text) !important;
}

.elementor-menu-cart__container .woocommerce-mini-cart::-webkit-scrollbar {
  width: 8px;
}
.elementor-menu-cart__container .woocommerce-mini-cart::-webkit-scrollbar-thumb {
  background:    rgba(255, 255, 255, 0.16);
  border-radius: var(--velora-radius-pill);
}


/* ============================================================
   11.  RESPONSIVE OVERRIDES
   Breakpoints mirror Elementor defaults:
     Tablet  →  max-width: 1024px
     Mobile  →  max-width: 767px
     S-Mobile→  max-width: 480px
   These rules sit at the end of the file so they win cleanly
   over the base declarations above.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   11a.  TABLET  (768px – 1024px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* ── 1. Design tokens: tighten spacing on tablet ── */
  :root {
    --velora-radius-xl: 18px;
  }

  /* ── 2. Social login: already 100% wide, no changes needed ── */

  /* ── 3. Auth forms: slightly reduced padding ── */
  .velora-auth .ur-frontend-form input[type="text"],
  .velora-auth .ur-frontend-form input[type="email"],
  .velora-auth .ur-frontend-form input[type="password"],
  .velora-auth .ur-frontend-form input[type="tel"],
  .velora-auth .ur-frontend-form select,
  .velora-auth .ur-frontend-form textarea {
    padding: 15px !important;
    min-height: 50px;
  }

  /* ── 4. Stats bar: tighten divider spacing ── */
  .velora-stats {
    max-width: 100%;
    padding-top: 14px;
  }
  .velora-stats > div {
    padding: 0 18px;
  }

  /* ── 5. Pricing: tab buttons smaller, cards go 2-col ── */
  .velora-pricing-tabs .elementor-button.velora-tab {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  .velora-plan {
    padding: 28px 24px 22px;
  }

  /* ── 6. Pricing panels: allow wrapping so 2+ cards per row ── */
  .velora-pricing-panel {
    flex-wrap: wrap;
    gap: 20px;
  }

  /* ── 7. Feature cards: reduce padding ── */
  .velora-card {
    padding: 30px 22px;
  }

  /* ── 8. FAQ cards: already handled, minor tightening ── */
  .velora-faq-wrap {
    max-width: 100%;
  }
  .velora-faq-card {
    padding: 22px 22px;
  }

  /* ── 9. Cart: switch to stacked column at 1024px ── */
  .woocommerce-cart .woocommerce {
    flex-wrap: wrap !important;
    padding: 32px 20px 60px !important;
  }
  .woocommerce-cart form.woocommerce-cart-form {
    flex: 1 1 100% !important;
  }
  .woocommerce-cart .cart-collaterals {
    flex:      0 0 100% !important;
    width:     100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
  }

  /* ── 10. Side cart: slightly narrower panel on tablet ── */
  .elementor-menu-cart__container .elementor-menu-cart__main {
    padding: 22px 20px 18px !important;
  }
  .elementor-menu-cart__container .woocommerce-mini-cart-item {
    padding: 14px !important;
    gap: 12px;
  }
}


/* ────────────────────────────────────────────────────────────
   11b.  MOBILE  (max-width: 767px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── 1. Design tokens: smaller radius & tighter shadows on mobile ── */
  :root {
    --velora-radius-md: 12px;
    --velora-radius-lg: 14px;
    --velora-radius-xl: 16px;
    --velora-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.30);
    --velora-shadow-lg:   0 12px 36px rgba(0, 0, 0, 0.30);
  }

  /* ── 0a. Hero H1: override Elementor Kit's 72px on mobile ── */
  h1 {
    font-size:   38px !important;
    line-height: 1.2  !important;
  }

  /* ── 0b. Section H2 headings: scale down from 48px ── */
  .elementor-widget-heading h2.elementor-heading-title {
    font-size:   32px !important;
    line-height: 1.25 !important;
  }

  /* ── 0c. Header: mobile layout ─────────────────────────────────
     Target: Logo (left) | Cart + Hamburger (right)
     Create Account + Login live inside the hamburger panel overlay.
     Logo image capped at ~100px wide (was rendering at 213px).
     Hamburger was black on dark BG — make it white.
     ────────────────────────────────────────────────────────────── */

  /* Outer header container — reduce side padding on mobile */
  .elementor-element-14abf448 {
    padding-left:  16px !important;
    padding-right: 16px !important;
  }

  /* Inner flex row — all columns on one line */
  .elementor-element-61914a53 {
    flex-wrap:       nowrap         !important;
    gap:             8px            !important;
    align-items:     center         !important;
    justify-content: space-between  !important;
    padding:         10px 0         !important;
    min-height:      0              !important;
  }

  /* Logo column: takes remaining space, logo image capped at ~100px */
  .elementor-element-3e8bfcf1 {
    width:     auto      !important;
    flex:      1 1 auto  !important;
    min-width: 0         !important;
  }
  .elementor-element-3e8bfcf1 img {
    max-height: 36px  !important;
    width:      auto  !important;
    max-width:  110px !important;
  }

  /* Nav column (hamburger toggle) — shrink to the toggle itself */
  .elementor-element-469dab0e {
    width:     auto      !important;
    flex:      0 0 auto  !important;
    min-width: 0         !important;
  }

  /* Cart + CTA column — only cart visible in header bar */
  .elementor-element-493dc79d {
    flex-wrap:   nowrap    !important;
    width:       auto      !important;
    flex:        0 0 auto  !important;
    gap:         0         !important;
    align-items: center    !important;
  }

  /* Hide Create Account + Login from the header bar —
     they appear inside the hamburger panel via velora-mobile.js */
  .elementor-element-5cf94f9c,
  .elementor-element-2e9dd3e9 {
    display: none !important;
  }

  /* Hamburger toggle — white icon & border, visible on dark header */
  .elementor-location-header .elementor-menu-toggle {
    color:        #ffffff                   !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    background:   transparent              !important;
    flex-shrink:  0                         !important;
  }
  .elementor-location-header .elementor-menu-toggle svg {
    fill: currentColor !important;
  }

  /* When menu is open: hide the Elementor toggle — our overlay has its own × button */
  .elementor-location-header .elementor-menu-toggle[aria-expanded="true"] {
    opacity:    0          !important;
    pointer-events: none   !important;
  }

  /* ── 0e. Full-screen hamburger overlay ──────────────────────────
     velora-mobile.js builds a separate #velora-mobile-overlay <div>
     appended to <body> — completely independent of Elementor's dropdown.
     Elementor's own dropdown is hidden; we watch its aria-expanded
     attribute to open/close our overlay.
     ────────────────────────────────────────────────────────────── */

  /* Hide Elementor's conflicted dropdown — we replace it */
  .elementor-location-header .elementor-nav-menu--dropdown {
    display: none !important;
  }

  /* ── Our overlay shell ── */
  #velora-mobile-overlay {
    display:  none;
    position: fixed;
    inset:    0;
    z-index:  99999;   /* above Elementor header stacking context */
    background: #090909;
    overflow-y: auto;
  }
  #velora-mobile-overlay.vmo-open {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: flex-start;
  }

  /* Topbar: logo left, × close right — spans full overlay width */
  .vmo-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         18px 22px;
    box-sizing:      border-box;
    flex-shrink:     0;
  }

  /* Logo inside topbar */
  .vmo-logo img {
    max-height: 36px;
    width:      auto;
    max-width:  110px;
    display:    block;
  }

  /* × close button */
  .vmo-close {
    display:         flex           !important;
    align-items:     center         !important;
    justify-content: center         !important;
    width:           40px           !important;
    height:          40px           !important;
    padding:         0              !important;
    background:      transparent    !important;
    border:          1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius:   50%            !important;
    color:           #ffffff        !important;
    cursor:          pointer        !important;
    flex-shrink:     0              !important;
    line-height:     1              !important;
  }
  .vmo-close svg {
    width:  18px  !important;
    height: 18px  !important;
    stroke: #ffffff !important;
    fill:   none    !important;
    display: block  !important;
  }
  .vmo-close svg line {
    stroke: #ffffff !important;
  }
  .vmo-close:hover {
    border-color: rgba(255, 255, 255, 0.7) !important;
  }

  /* Inner wrapper: content flows below the topbar */
  .vmo-inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          100%;
    max-width:      420px;
    padding:        40px 32px 60px;
    box-sizing:     border-box;
    flex:           1 1 auto;
  }

  /* Nav list */
  .vmo-nav {
    width: 100%;
  }
  .vmo-nav ul {
    list-style: none;
    padding:    0;
    margin:     0;
    width:      100%;
  }
  .vmo-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .vmo-nav li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .vmo-nav a,
  .vmo-nav a:link,
  .vmo-nav a:visited {
    display:                  block                  !important;
    padding:                  18px 0                 !important;
    font-size:                18px                   !important;
    font-weight:              300                    !important;
    letter-spacing:           0.06em                 !important;
    text-transform:           uppercase              !important;
    color:                    rgba(255,255,255,0.80) !important;
    -webkit-text-fill-color:  rgba(255,255,255,0.80) !important;
    text-align:               center                 !important;
    text-decoration:          none                   !important;
    background:               none                   !important;
    -webkit-background-clip:  unset                  !important;
    background-clip:          unset                  !important;
  }
  .vmo-nav a:hover,
  .vmo-nav a:active {
    color:                   var(--velora-gold) !important;
    -webkit-text-fill-color: var(--velora-gold) !important;
    text-decoration:         none               !important;
  }

  /* CTA buttons */
  .vmo-cta {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    width:          100%;
    margin-top:     40px;
  }
  .vmo-btn {
    display:         block;
    width:           100%;
    padding:         15px 24px;
    font-size:       15px;
    font-weight:     500;
    text-align:      center;
    border-radius:   50px;
    text-decoration: none;
    letter-spacing:  0.02em;
    cursor:          pointer;
    box-sizing:      border-box;
  }
  .vmo-btn--primary {
    background: var(--velora-gold);
    color:      #0a0a0a;
    border:     2px solid transparent;
  }
  .vmo-btn--primary:hover { opacity: 0.9; }
  .vmo-btn--outline {
    background:   transparent;
    color:        rgba(255, 255, 255, 0.85);
    border:       2px solid rgba(255, 255, 255, 0.30);
  }
  .vmo-btn--outline:hover {
    border-color: var(--velora-gold);
    color:        var(--velora-gold);
  }

  /* ── 2. Social login: full-width, comfortable tap target ── */
  .nsl-button {
    min-height: 52px !important;
    font-size:  15px !important;
  }

  /* ── 3. Auth forms: compact inputs, smaller submit ── */
  .velora-auth .ur-frontend-form input[type="text"],
  .velora-auth .ur-frontend-form input[type="email"],
  .velora-auth .ur-frontend-form input[type="password"],
  .velora-auth .ur-frontend-form input[type="tel"],
  .velora-auth .ur-frontend-form select,
  .velora-auth .ur-frontend-form textarea {
    padding:    14px 16px !important;
    min-height: 48px;
    font-size:  15px !important;
  }

  .velora-auth .ur-frontend-form button[type="submit"],
  .velora-auth .ur-frontend-form input[type="submit"],
  .velora-auth .ur-frontend-form .ur-submit-button {
    padding:   15px 18px !important;
    font-size: 16px !important;
  }

  /* ── 4. Stats bar: already stacks at 520px via existing rule ──
     Tighten spacing here for 520–767px range              ── */
  .velora-stats {
    padding-top: 10px;
    gap: 10px;
  }
  .velora-stats .elementor-heading-title {
    font-size: 16px;
  }
  .velora-stats .elementor-widget-text-editor {
    font-size: 11px;
  }

  /* ── 5. Pricing: tabs scroll horizontally, cards single column ── */
  .velora-pricing-tabs {
    flex-wrap: nowrap !important;    /* prevent buttons wrapping to 2nd row */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none; /* Firefox */
  }
  .velora-pricing-tabs::-webkit-scrollbar {
    display: none;
  }
  .velora-pricing-tabs .elementor-button.velora-tab {
    display:   inline-flex !important;
    padding:   10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  .velora-pricing-grid {
    padding: 0 16px;
  }

  .velora-plan {
    padding: 24px 20px 20px;
  }

  .velora-popular-pill {
    font-size: 10px;
    padding:   5px 12px;
    top:       -12px;
  }

  /* ── 6. Pricing panels: stack to single column ── */
  .velora-pricing-panel {
    display:        none;
    flex-direction: column !important;
    gap:            16px;
    scroll-margin-top: 90px;
  }
  .velora-pricing-panel:first-of-type {
    display: flex;
  }
  .velora-pricing-panel:target {
    display: flex;
  }

  /* Tab-btn row: allow wrapping */
  .velora-pricing-tabs a.velora-tab-btn {
    font-size: 13px;
  }

  /* ── 7. Feature cards: full-width on mobile ── */
  .velora-card {
    padding:       28px 20px;
    border-radius: 14px;
  }
  /* Disable lift hover on touch screens */
  @media (hover: none) {
    .velora-card:hover {
      transform: none;
    }
    .velora-card:hover::before {
      opacity: 0;
    }
  }

  /* ── 8. FAQ cards ── */
  .velora-faq-wrap {
    padding: 0 4px;
  }
  .velora-faq-card {
    padding: 18px 16px;
  }
  .velora-faq-card .elementor-heading-title {
    font-size: 16px;
  }
  .velora-faq-card .elementor-widget-text-editor {
    font-size: 14px;
  }
  /* Disable lift hover on touch */
  @media (hover: none) {
    .velora-faq-card:hover {
      transform: none;
    }
  }

  /* ── 9. Cart page: mobile-first single-column ──
     (base 9g rules already handle 767px, these add detail) ── */
  .woocommerce-cart .woocommerce {
    padding: 20px 14px 56px !important;
    gap:     0 !important;
  }

  /* Hide the product thumbnail column on very small screens */
  .woocommerce-cart td.product-thumbnail,
  .woocommerce-cart th.product-thumbnail {
    display: none !important;
  }

  /* Expand product name to fill freed space */
  .woocommerce-cart td.product-name {
    width: auto !important;
  }

  /* Column widths recalibrated for mobile */
  .woocommerce-cart td.product-remove   { width: 36px !important; }
  .woocommerce-cart td.product-price    { width: 80px !important; }
  .woocommerce-cart td.product-quantity { width: 72px !important; }
  .woocommerce-cart td.product-subtotal { width: 90px !important; }

  /* Smaller quantity input */
  .woocommerce-cart .quantity .qty {
    width:      54px !important;
    min-height: 38px !important;
    font-size:  14px !important;
  }

  /* Totals card full-width */
  .woocommerce-cart .cart-collaterals .cart_totals {
    padding: 18px !important;
  }
  .woocommerce-cart .cart-collaterals .cart_totals h2 {
    font-size: 17px !important;
  }

  /* Checkout button bigger tap target */
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    min-height: 58px !important;
    font-size:  17px !important;
    border-radius: 16px !important;
  }

  /* Empty cart state more compact */
  body.woocommerce-cart .cart-empty,
  body.woocommerce-cart .woocommerce-cart-empty {
    padding: 48px 20px;
  }
  body.woocommerce-cart .cart-empty::after,
  body.woocommerce-cart .woocommerce-cart-empty::after {
    font-size: 19px;
  }

  /* ── 10. Side cart: full-width slide-over on mobile ── */
  .elementor-menu-cart__container .elementor-menu-cart__main {
    padding: 20px 16px 16px !important;
  }

  /* Tighter item cards */
  .elementor-menu-cart__container .woocommerce-mini-cart-item {
    grid-template-columns: 44px 1fr 16px;
    gap:                   10px;
    padding:               12px !important;
    margin:                0 0 12px !important;
    border-radius:         12px;
  }

  .elementor-menu-cart__container .woocommerce-mini-cart-item img {
    width:     44px !important;
    height:    44px !important;
    min-width: 44px;
    border-radius: 8px;
  }

  .elementor-menu-cart__container .velora-mini-cart-title,
  .elementor-menu-cart__container .woocommerce-mini-cart-item > a:not(.remove) {
    font-size: 14px;
  }

  .elementor-menu-cart__container .velora-mini-cart-desc {
    font-size: 12px;
  }

  /* Smaller qty controls */
  .elementor-menu-cart__container .velora-qty-btn {
    width:     28px;
    height:    28px;
    min-width: 28px;
  }
  .elementor-menu-cart__container .velora-qty-minus {
    font-size: 18px;
  }
  .elementor-menu-cart__container .velora-qty-plus {
    font-size: 16px;
  }
  .elementor-menu-cart__container .velora-qty-input {
    width:      32px !important;
    min-width:  32px !important;
    max-width:  32px !important;
    flex:       0 0 32px !important;
    height:     28px !important;
    font-size:  14px !important;
    line-height: 28px !important;
  }

  /* Checkout / view cart buttons */
  .elementor-menu-cart__container .woocommerce-mini-cart__buttons a.button {
    min-height: 50px;
    font-size:  15px;
  }

  /* Total row */
  .elementor-menu-cart__container .woocommerce-mini-cart__total {
    font-size:     15px;
    padding-top:   16px;
    margin-bottom: 12px;
  }
  .elementor-menu-cart__container .woocommerce-mini-cart__total .woocommerce-Price-amount {
    font-size: 17px;
  }

  /* Empty state: more compact */
  .elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
    min-height: 45vh;
    padding:    24px 16px;
    font-size:  14px;
  }
  .elementor-menu-cart__main .woocommerce-mini-cart__empty-message::before {
    width:         56px;
    height:        56px;
    font-size:     24px;
    margin-bottom: 14px;
  }

  /* ── 0d. Header: disable sticky on mobile ─────────────────────
     Elementor JS sets position:fixed via inline style when the
     sticky element gains .elementor-sticky--active. Override it.
     ────────────────────────────────────────────────────────────── */
  .elementor-location-header .elementor-sticky--active {
    position:  relative !important;
    top:       auto     !important;
    left:      auto     !important;
    width:     100%     !important;
    z-index:   auto     !important;
    transform: none     !important;
  }
  /* Remove Elementor's height-compensating spacer div */
  .elementor-location-header .elementor-sticky--spacer {
    display: none !important;
  }

  /* ── 11. Footer: mobile redesign ──────────────────────────────
     Current issues:
       • General h2 rule inflated footer headings to 32px
       • Nav links hidden (height: 0) behind hamburger toggles
       • 3 nav columns stacking vertically instead of row
     ────────────────────────────────────────────────────────────── */

  /* Reduce footer h2 headings (overrides the general 32px rule) */
  .elementor-location-footer .elementor-widget-heading h2.elementor-heading-title {
    font-size:      13px              !important;
    line-height:    1.4               !important;
    text-transform: uppercase         !important;
    letter-spacing: 0.08em            !important;
    color:          var(--velora-gold)!important;
    margin-bottom:  12px              !important;
  }

  /* Logo column: center-align on mobile */
  .elementor-element-3cee0f5 {
    text-align: center !important;
  }
  .elementor-element-3cee0f5 .elementor-widget {
    text-align: center !important;
  }
  .elementor-element-3cee0f5 .elementor-social-icons-wrapper,
  .elementor-element-3cee0f5 .elementor-icon-list-items {
    justify-content: center !important;
  }

  /* Nav columns container: keep all 3 as a horizontal row */
  .elementor-element-7d91040 {
    flex-direction: row    !important;
    flex-wrap:      nowrap !important;
    gap:            10px   !important;
    align-items:    flex-start !important;
  }

  /* Individual nav section columns: equal thirds */
  .elementor-element-bcade7d,
  .elementor-element-e3c2ae2,
  .elementor-element-fb4403a {
    flex:      1 1 0 !important;
    min-width: 0     !important;
    width:     0     !important;
    padding:   0 2px !important;
  }

  /* Show footer nav links always — hide the ≡ toggle button */
  .elementor-location-footer .elementor-menu-toggle {
    display: none !important;
  }

  /* Force dropdown open: Smartmenus collapses with transform:scaleY(0) on mobile */
  .elementor-location-footer .elementor-nav-menu--dropdown {
    max-height:  none        !important;
    height:      auto        !important;
    overflow:    visible     !important;
    position:    static      !important;
    transform:   none        !important;   /* Smartmenus uses scaleY(0) — kill it */
    opacity:     1           !important;
    visibility:  visible     !important;
    background:  transparent !important;
    border:      none        !important;
    box-shadow:  none        !important;
    padding:     0           !important;
    --menu-height: auto      !important;
  }
  .elementor-location-footer .elementor-nav-menu--dropdown .elementor-nav-menu,
  .elementor-location-footer .elementor-nav-menu--dropdown ul,
  .elementor-location-footer .elementor-nav-menu--dropdown li {
    display:    block        !important;
    max-height: none         !important;
    height:     auto         !important;
    background: transparent  !important;
    border:     none         !important;
    padding:    0            !important;
  }

  /* Footer nav link style */
  .elementor-location-footer .elementor-nav-menu--dropdown a {
    display:     block                      !important;
    padding:     5px 0                      !important;
    font-size:   12px                       !important;
    line-height: 1.5                        !important;
    color:       rgba(255, 255, 255, 0.65)  !important;
    white-space: normal                     !important;
    word-break:  break-word                 !important;
  }
  .elementor-location-footer .elementor-nav-menu--dropdown a:hover {
    color: var(--velora-gold) !important;
  }

  /* Copyright bar: centered, compact */
  .elementor-element-3ab6b0c {
    text-align:     center !important;
    padding-top:    14px   !important;
    padding-bottom: 14px   !important;
  }
}


/* ────────────────────────────────────────────────────────────
   11c.  SMALL MOBILE  (max-width: 480px)
   Fine-tuning for phones 480px and below.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── 1. Design tokens ── */
  :root {
    --velora-radius-md: 10px;
    --velora-radius-lg: 12px;
    --velora-radius-xl: 14px;
  }

  /* ── 3. Auth: full-bleed form wrapper ── */
  .velora-auth .ur-frontend-form input[type="text"],
  .velora-auth .ur-frontend-form input[type="email"],
  .velora-auth .ur-frontend-form input[type="password"],
  .velora-auth .ur-frontend-form input[type="tel"],
  .velora-auth .ur-frontend-form select,
  .velora-auth .ur-frontend-form textarea {
    padding:    12px 14px !important;
    font-size:  14px !important;
    min-height: 46px;
  }

  /* ── 5. Pricing cards: tighter inner padding ── */
  .velora-plan {
    padding: 20px 16px 18px;
  }
  .velora-pricing-grid {
    padding: 0 12px;
  }

  /* ── 7. Feature cards ── */
  .velora-card {
    padding: 24px 16px;
  }

  /* ── 8. FAQ cards ── */
  .velora-faq-card {
    padding: 16px 14px;
  }
  .velora-faq-card .elementor-heading-title {
    font-size: 15px;
  }

  /* ── 9. Cart: hide price column, show only subtotal ── */
  .woocommerce-cart td.product-price,
  .woocommerce-cart th.product-price {
    display: none !important;
  }
  .woocommerce-cart td.product-subtotal { width: 80px !important; }
  .woocommerce-cart td.product-quantity { width: 66px !important; }

  .woocommerce-cart .woocommerce {
    padding: 16px 12px 48px !important;
  }

  /* Cart table header smaller */
  .woocommerce-cart .woocommerce-cart-form table.shop_table thead th {
    font-size: 13px !important;
    padding:   14px 10px !important;
  }
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody td {
    padding: 12px 10px !important;
  }

  /* Checkout button */
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    font-size: 16px !important;
  }

  /* ── 10. Side cart: maximum use of screen width ── */
  .elementor-menu-cart__container .elementor-menu-cart__main {
    padding: 16px 14px 14px !important;
  }

  .elementor-menu-cart__container .woocommerce-mini-cart-item {
    grid-template-columns: 40px 1fr 14px;
    gap:                   8px;
    padding:               10px !important;
    margin:                0 0 10px !important;
  }

  .elementor-menu-cart__container .woocommerce-mini-cart-item img {
    width:     40px !important;
    height:    40px !important;
    min-width: 40px;
  }

  .elementor-menu-cart__container .velora-mini-cart-title,
  .elementor-menu-cart__container .woocommerce-mini-cart-item > a:not(.remove) {
    font-size: 13px;
  }

  .elementor-menu-cart__container .woocommerce-mini-cart__buttons a.button {
    min-height: 48px;
    font-size:  14px;
  }
}