/* RoboticWorld mobile compatibility and accessibility fixes. */

/* Width is fluid on phones; reset the intrinsic height attribute so responsive
 * images keep their natural aspect ratio instead of stretching vertically. */
.hero-img-wrap img,
.bundle-img img,
.product-gallery-wrap img {
  height: auto;
}

/* Keep compact product cards usable on the narrowest phones. The two-column
 * layout is preserved, but the price and action stack below 380px so the
 * no-wrap action cannot be clipped inside a small card. */
@media (max-width: 380px) {
  .product-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .product-card-footer .product-price {
    display: flex;
    align-items: center;
    min-height: 28px;
  }

  .product-card-footer .add-to-cart-btn,
  .product-card-footer .button {
    width: 100%;
    min-height: 44px;
    padding: 8px 6px;
    white-space: normal;
  }
}

/* Give the primary mobile controls a comfortable hit area. */
@media (max-width: 768px) {
  .nav-cart,
  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .rw-cart-close {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: 10px;
  }

  .rw-minicart-remove,
  .woocommerce-cart a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.25rem;
    line-height: 1;
  }
}

/* Compact cart-drawer quantity control. Each action stays large enough to
 * tap on phones while matching the site's neutral visual language. */
.rw-minicart-quantity {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(77, 111, 145, 0.26);
  border-radius: 9px;
  background: rgba(15, 15, 28, 0.78);
}

.rw-minicart-quantity-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: 600 1rem/1 var(--ff-body);
  cursor: pointer;
}

.rw-minicart-quantity-btn:hover,
.rw-minicart-quantity-btn:focus-visible {
  background: rgba(77, 111, 145, 0.18);
  color: var(--text);
  outline: none;
}

.rw-minicart-quantity-btn:disabled {
  color: rgba(255, 255, 255, 0.24);
  cursor: default;
}

.rw-minicart-quantity-value {
  min-width: 28px;
  color: var(--text);
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 768px) {
  .rw-minicart-quantity-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

/* The product stepper keeps its vertical up/down design while making each
 * mobile action large enough to tap reliably. */
@media (max-width: 480px) {
  .single-product-page form.cart .quantity {
    min-height: 88px;
  }

  .single-product-page form.cart .quantity input.qty {
    height: 88px;
  }

  .rw-quantity-stepper {
    width: 44px;
  }

  .rw-quantity-step {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Respect operating-system reduced-motion preferences, including the custom
 * hero, scroll reveals, hover transitions, and smooth anchor scrolling. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #hero-wave-canvas {
    display: none !important;
  }
}


/* ── Clean neutral brand system ─────────────────────────────── */
:root {
  --bg: #f6f7f9;
  --bg-1: #ffffff;
  --bg-card: #ffffff;
  --bg-img: #edf1f4;
  --border: rgba(31, 41, 51, 0.14);
  --border-acc: rgba(77, 111, 145, 0.34);
  --text: #1f2933;
  --text-dim: #5e6b77;
  --text-dimmer: #8b96a1;
  --acc: #4d6f91;
  --acc-2: #4d6f91;
  --acc-glow: rgba(77, 111, 145, 0.14);
  --acc-glow-lg: rgba(77, 111, 145, 0.10);
  --nav-h: 78px;
}

html, body { background: var(--bg); color: var(--text); }
body::before { display: none !important; }

.site-nav {
  background: #11161c !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 18px rgba(17, 22, 28, 0.14);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-nav .nav-logo { color: #f8fafc; }
.site-nav .nav-links a { color: rgba(248,250,252,0.72); }
.site-nav .nav-links a:hover { color: #ffffff; }
.site-nav .nav-cart {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: rgba(248,250,252,0.82);
}
.site-nav .nav-cart:hover { background: rgba(255,255,255,0.12); color: #fff; }
.site-nav .cart-count { background: var(--acc); color: #fff; }
.site-nav .btn-primary { background: var(--acc) !important; box-shadow: none !important; }
.site-nav .btn-primary:hover { background: #3f5d78 !important; }

.nav-logo-image {
  width: 156px !important;
  height: 70px !important;
  flex: 0 0 156px !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.nav-toggle {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}
.nav-toggle:hover, .nav-toggle:focus-visible, .nav-toggle.active {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow: none !important;
}
.nav-toggle span { background: rgba(248,250,252,0.88) !important; }

.hero::after, .hero-img-wrap::before, .bundle-inner::before { display: none !important; }
#hero-wave-canvas { display: none !important; }
.hero-title .dim { color: rgba(31,41,51,0.38) !important; }
.hero-img-wrap img { filter: drop-shadow(0 24px 40px rgba(31,41,51,0.16)); animation: none; }

.btn-primary, .woocommerce #place_order, #place_order {
  background: var(--acc) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover, .woocommerce #place_order:hover, #place_order:hover {
  background: #3f5d78 !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}
.btn-ghost {
  background: #fff !important;
  color: var(--text-dim) !important;
  border-color: var(--border) !important;
}
.btn-ghost:hover { background: #eef1f4 !important; color: var(--text) !important; border-color: #c5ced7 !important; }

.hero-badge, .bundle-label, .bundle-price-save {
  background: #e9eef3 !important;
  border-color: rgba(77,111,145,0.28) !important;
  color: var(--acc) !important;
}
.hero-badge::before { background: var(--acc) !important; box-shadow: none !important; animation: none !important; }
.bundle-inner { background: #edf1f4 !important; border-color: var(--border-acc) !important; }

.product-card,
.shop-page .woocommerce ul.products li.product,
.woocommerce .cart_totals,
.woocommerce-checkout form.checkout,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce,
.woocommerce-MyAccount-content,
.cart-empty-state,
.rw-cart-sidebar {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 10px 28px rgba(31,41,51,0.06) !important;
}
.product-card:hover,
.shop-page .woocommerce ul.products li.product:hover {
  border-color: var(--border-acc) !important;
  box-shadow: 0 16px 32px rgba(31,41,51,0.10) !important;
  transform: translateY(-4px);
}

.add-to-cart-btn, .product-card .button,
.shop-page .woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.checkout-button, .woocommerce .cart_totals .checkout-button,
.single_add_to_cart_button {
  background: #e9eef3 !important;
  color: var(--acc) !important;
  border-color: rgba(77,111,145,0.28) !important;
  box-shadow: none !important;
}
.add-to-cart-btn:hover, .product-card .button:hover,
.shop-page .woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.checkout-button:hover, .woocommerce .cart_totals .checkout-button:hover,
.single_add_to_cart_button:hover {
  background: var(--acc) !important;
  color: #fff !important;
  border-color: var(--acc) !important;
  box-shadow: none !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity,
.woocommerce .quantity input.qty,
.woocommerce td.actions .coupon input[type="text"] {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce td.actions .coupon input[type="text"]:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 3px var(--acc-glow) !important;
}
.woocommerce-message, .woocommerce-info { background: #eef5f0 !important; border-top-color: #5d9b72 !important; color: var(--text) !important; }
.woocommerce-error { background: #fff1f0 !important; color: #a43d37 !important; }

#payment .payment_box .testmode-info { background: #f7f2df !important; color: #795f28 !important; border-color: #e8d59a !important; }
#wc-stripe-hidden-style-input,
#wc-stripe-hidden-input,
#wc-stripe-hidden-div input {
  background-color: #fff !important;
  color: #1f2933 !important;
  border-width: 1px !important;
  border-color: #d6dde4 !important;
  border-radius: 10px !important;
  font-family: var(--ff-body) !important;
  box-shadow: none !important;
}
.wc-stripe-elements-field { background: #fff !important; border-color: var(--border) !important; }
.wc-stripe-elements-field.focused, .wc-stripe-elements-field:focus-within { border-color: var(--acc) !important; box-shadow: 0 0 0 3px var(--acc-glow) !important; }

.site-footer {
  background: #11161c !important;
  color: #f8fafc !important;
  border-top-color: rgba(255,255,255,0.12) !important;
}
.site-footer .footer-brand p, .site-footer .footer-col ul a, .site-footer .footer-bottom { color: rgba(248,250,252,0.68) !important; }
.site-footer .footer-col h4, .site-footer .footer-col ul a:hover { color: #f8fafc !important; }
.site-footer .nav-logo { color: #f8fafc; }
.site-footer .nav-logo-image { width: 190px !important; height: 96px !important; flex-basis: 190px !important; }

.single-product-page #wc-stripe-express-checkout-element.rw-express-loading::before {
  background: #eef1f4 !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}

.rw-minicart-quantity {
  background: #f2f5f7 !important;
  border-color: var(--border) !important;
}
.rw-minicart-quantity-btn { color: var(--text-dim) !important; }
.rw-minicart-quantity-btn:hover, .rw-minicart-quantity-btn:focus-visible { background: #e1e8ee !important; color: var(--text) !important; }
.rw-minicart-quantity-btn:disabled { color: #b7c0c8 !important; }
.rw-minicart-quantity-value { color: var(--text) !important; }

@media (max-width: 768px) {
  :root { --nav-h: 72px; }
  .site-nav { background: #11161c !important; }
  .site-nav .nav-links.open { background: #11161c !important; border-bottom-color: rgba(255,255,255,0.12) !important; box-shadow: 0 12px 24px rgba(17,22,28,0.18) !important; }
  .nav-logo-image { width: 136px !important; height: 64px !important; flex-basis: 136px !important; }
  .site-footer .nav-logo-image { width: 170px !important; height: 86px !important; flex-basis: 170px !important; }
  .section, .bundle-section { padding-top: 72px; padding-bottom: 72px; }
}

@media (max-width: 380px) {
  .nav-logo-image { width: 124px !important; height: 60px !important; flex-basis: 124px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img-wrap img { animation: none !important; }
}