/* ═══════════════════════════════════════════════════════
   YUKI AYURVEDA — Premium Design System
   Mobile-first, full responsive, modern eCommerce
═══════════════════════════════════════════════════════ */

:root {
  --yk-primary:    #4a1a7a;
  --yk-secondary:  #794ABA;
  --yk-accent:     #a8ff78;
  --yk-gold:       #f59e0b;
  --yk-green:      #28a745;
  --yk-bg:         #faf8ff;
  --yk-card:       #ffffff;
  --yk-text:       #1a1a2e;
  --yk-muted:      #6b7280;
  --yk-border:     #e5e7eb;
  --yk-shadow:     0 4px 24px rgba(74,26,122,.10);
  --yk-shadow-lg:  0 8px 40px rgba(74,26,122,.18);
  --yk-radius:     14px;
  --yk-radius-sm:  8px;
  --yk-transition: all .25s cubic-bezier(.4,0,.2,1);
}

/* ── Base ── */
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--yk-bg); color: var(--yk-text); }
img { max-width: 100%; }

/* ── Topbar ── */
.header-top-area {
  background: linear-gradient(90deg, var(--yk-primary) 0%, var(--yk-secondary) 100%) !important;
  padding: 8px 0 !important;
}
@media(max-width:767px) { .header-top-area { display: none !important; } }

/* ── Header / Navbar ── */
.header-area {
  background: #fff !important;
  box-shadow: 0 2px 16px rgba(74,26,122,.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}
.header-middle { padding: 12px 0 !important; }
.navbar-brand img { max-height: 52px !important; }

/* Mobile header */
.mobile-header-area {
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(74,26,122,.10) !important;
  padding: 10px 0 !important;
}
@media(max-width:991px) {
  .mobile-header-area { display: flex !important; }
  .header-area .header-middle { display: none !important; }
}
@media(min-width:992px) {
  .mobile-header-area { display: none !important; }
}

/* ── Navigation ── */
.main-menu ul li a {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--yk-text) !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  transition: var(--yk-transition) !important;
}
.main-menu ul li a:hover,
.main-menu ul li.active a {
  color: var(--yk-secondary) !important;
  background: rgba(121,74,186,.08) !important;
}

/* ── Hero/Banner ── */
.slider-area, .banner-area { position: relative; overflow: hidden; }
.slider-area img, .banner-area img { width: 100%; object-fit: cover; }
@media(max-width:767px) {
  .slider-area { min-height: 220px; }
  .slider-area img { height: 240px; object-fit: cover; object-position: center; }
}

/* ── Section Titles ── */
.section-title { text-align: center; margin-bottom: 36px; }
.section-title h2 {
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 800;
  color: var(--yk-text);
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--yk-secondary), var(--yk-accent));
  border-radius: 2px;
}

/* ── Product Cards ── */
.single-grid-product {
  background: var(--yk-card) !important;
  border-radius: var(--yk-radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--yk-border) !important;
  transition: var(--yk-transition) !important;
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.single-grid-product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--yk-shadow-lg) !important;
  border-color: rgba(121,74,186,.3) !important;
}

/* Product image */
.single-grid-product .product-img {
  overflow: hidden !important;
  aspect-ratio: 4/5 !important;
  background: #f8f5ff !important;
}
.single-grid-product .product-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .4s ease !important;
}
.single-grid-product:hover .product-img img { transform: scale(1.06) !important; }

/* Product info */
.single-grid-product .product-content {
  padding: 14px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.single-grid-product .product-name a {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--yk-text) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.single-grid-product .price-box {
  margin-top: auto !important;
  padding-top: 10px !important;
}
.single-grid-product .price { font-size: 16px !important; font-weight: 800 !important; color: var(--yk-primary) !important; }

/* Product grid - responsive */
@media(max-width:575px) {
  .product-list .row { margin: 0 -6px !important; }
  .product-list .row > [class*="col-"] { padding: 0 6px !important; margin-bottom: 12px !important; }
  .product-list .col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* ── Add to Cart Button ── */
.add-cart, .add-cart.addtocartbtns {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, var(--yk-secondary), var(--yk-primary)) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--yk-transition) !important;
  text-decoration: none !important;
  margin-top: 10px !important;
}
.add-cart:hover {
  background: linear-gradient(135deg, var(--yk-primary), #2d0f4e) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(74,26,122,.35) !important;
}

/* ── Quantity Controls ── */
.yk-qty-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border: 1.5px solid var(--yk-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  width: fit-content !important;
  margin: 8px auto 0 !important;
}
.yk-qty-dec, .yk-qty-inc {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: #f8f5ff !important;
  color: var(--yk-secondary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--yk-transition) !important;
}
.yk-qty-dec:hover, .yk-qty-inc:hover { background: var(--yk-secondary) !important; color: #fff !important; }
.yk-qty-input {
  width: 36px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid var(--yk-border) !important;
  border-right: 1px solid var(--yk-border) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 4px 0 !important;
  background: #fff !important;
}

/* ── Stock Badges ── */
.limited-stock-badge, .in-stock-badge, .out-stock-badge {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
}
.limited-stock-badge { background: #fff3cd !important; color: #856404 !important; }
.in-stock-badge      { background: #d1e7dd !important; color: #0a3622 !important; }
.out-stock-badge     { background: #f8d7da !important; color: #58151c !important; }

/* ── Side Cart ── */
.offcanvas.offcanvas-cart {
  width: min(380px, 95vw) !important;
  box-shadow: var(--yk-shadow-lg) !important;
}
@media(max-width:480px) { .offcanvas.offcanvas-cart { width: 100vw !important; } }

/* ── Category Grid ── */
.category-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media(max-width:767px) {
  .yk-cat-grid { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; padding-bottom: 8px !important; }
  .yk-cat-grid > * { flex: 0 0 130px !important; }
}

/* ── Shop Page Layout ── */
@media(max-width:991px) {
  .shop-page-sidebar { display: none !important; }
  .shop-page-content { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── Filter Bar (shop) ── */
.yk-filter-wrap {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}
@media(max-width:575px) {
  .yk-filter-wrap { padding: 10px 12px !important; gap: 8px !important; }
  .yk-filter-wrap select, .yk-filter-wrap input { font-size: 13px !important; padding: 7px 10px !important; }
}

/* ── Product Detail Page ── */
@media(max-width:991px) {
  .product-single-details .row { flex-direction: column !important; }
  .product-single-details .col-lg-6 { max-width: 100% !important; flex: 0 0 100% !important; }
  .yk-gal-main { max-height: 320px !important; }
  .yk-gal-thumbs { justify-content: center !important; }
}

/* ── Color Swatches (mobile) ── */
@media(max-width:575px) {
  .yk-color-swatch { padding: 4px 10px !important; font-size: 11px !important; }
  .product-variable-color { flex-wrap: wrap !important; }
}

/* ── Size Variations (mobile) ── */
@media(max-width:575px) {
  .product-size-area ul, .product-size-area-wt ul { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .single-size { padding: 4px 12px !important; font-size: 12px !important; }
}

/* ── Checkout Page ── */
@media(max-width:767px) {
  .checkout-area .row { flex-direction: column !important; }
  .checkout-area .col-lg-7,
  .checkout-area .col-lg-5 { max-width: 100% !important; flex: 0 0 100% !important; }
  .checkout-area .col-lg-5 { margin-top: 24px !important; }
  .yk-pay-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .yk-pay-card { padding: 10px 6px 8px !important; }
  .yk-pay-logo { height: 28px !important; }
  .yk-pay-name { font-size: 10px !important; }
  .yk-pay-sub { display: none !important; }
}
@media(max-width:400px) {
  .yk-pay-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Order Summary Mobile ── */
@media(max-width:575px) {
  .summary-list li { font-size: 13px !important; }
  .total-amount h3 { font-size: 16px !important; }
  .yk-coupon-wrap input { font-size: 13px !important; }
}

/* ── Footer ── */
.footer-area {
  background: linear-gradient(135deg, #1a0a2e 0%, var(--yk-primary) 100%) !important;
  color: #c8b8e0 !important;
}
.footer-area h4 { color: #fff !important; font-weight: 700 !important; margin-bottom: 16px !important; }
.footer-area a { color: #c8b8e0 !important; text-decoration: none !important; transition: color .2s !important; }
.footer-area a:hover { color: var(--yk-accent) !important; }
@media(max-width:767px) {
  .footer-area .col-md-3, .footer-area .col-md-4 { margin-bottom: 24px !important; }
}

/* ── Breadcrumb ── */
.breadcrumb-area {
  background: linear-gradient(135deg, var(--yk-primary), var(--yk-secondary)) !important;
  padding: 32px 0 !important;
}
.breadcrumb-area .page-title { color: #fff !important; font-size: clamp(18px, 4vw, 28px) !important; font-weight: 800 !important; margin-bottom: 8px !important; }
.breadcrumb-pages .page-item { color: rgba(255,255,255,.7) !important; font-size: 13px !important; }
.breadcrumb-pages .page-item a { color: rgba(255,255,255,.9) !important; }

/* ── Testimonials ── */
.testimonial-single {
  background: #fff !important;
  border-radius: var(--yk-radius) !important;
  padding: 24px !important;
  box-shadow: var(--yk-shadow) !important;
  border: 1px solid var(--yk-border) !important;
  transition: var(--yk-transition) !important;
}
.testimonial-single:hover { transform: translateY(-4px) !important; box-shadow: var(--yk-shadow-lg) !important; }

/* ── Pagination ── */
.pagination .page-item .page-link {
  border-radius: 8px !important;
  margin: 0 3px !important;
  color: var(--yk-secondary) !important;
  border-color: var(--yk-border) !important;
  font-weight: 600 !important;
}
.pagination .page-item.active .page-link {
  background: var(--yk-secondary) !important;
  border-color: var(--yk-secondary) !important;
  color: #fff !important;
}

/* ── Buttons global ── */
.btn-primary, .checkout-btn {
  background: linear-gradient(135deg, var(--yk-secondary), var(--yk-primary)) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  transition: var(--yk-transition) !important;
}
.btn-primary:hover, .checkout-btn:hover {
  background: linear-gradient(135deg, var(--yk-primary), #2d0f4e) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(74,26,122,.35) !important;
}

/* ── Mobile floating cart button ── */
@media(max-width:991px) {
  .yk-mobile-cart-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border-top: 1px solid var(--yk-border) !important;
    padding: 10px 16px !important;
    z-index: 999 !important;
    display: flex !important;
    gap: 10px !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08) !important;
  }
  body { padding-bottom: 70px !important; }
}

/* ── Home sections cards ── */
.yk-home-section-card {
  border-radius: var(--yk-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--yk-shadow) !important;
  transition: var(--yk-transition) !important;
}
.yk-home-section-card:hover { transform: translateY(-4px) !important; box-shadow: var(--yk-shadow-lg) !important; }

/* ── Section spacing ── */
.section-top { padding-top: 60px !important; }
.pb-5 { padding-bottom: 60px !important; }
@media(max-width:767px) {
  .section-top { padding-top: 36px !important; }
  .pb-5 { padding-bottom: 36px !important; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--yk-secondary); border-radius: 4px; }

/* ── Focus styles ── */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--yk-secondary) !important;
  box-shadow: 0 0 0 3px rgba(121,74,186,.15) !important;
}

/* ── Toast position fix mobile ── */
@media(max-width:575px) {
  .swal2-container.swal2-top-end { top: 60px !important; right: 8px !important; left: 8px !important; }
}

/* ── Loading spinner ── */
.yk-loading { display: inline-block; width: 18px; height: 18px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════
   CRITICAL CART FIXES
═══════════════════════════════════════════ */

/* Prevent href="" reload - add-to-cart */
a.addtocartbtns[href=""], a.addtocartbtns[href="#"] {
  display: block;
}

/* Ensure product grid shows 2 cols on mobile */
@media (max-width: 576px) {
  .product-list .col-6,
  .product-list .col-sm-6,
  .product-list .col-md-4,
  .product-list .col-lg-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .product-list .row { margin-left: -6px !important; margin-right: -6px !important; }
}

/* Fix product card text overflow on mobile */
@media (max-width: 576px) {
  .single-grid-product .product-name h4 a { font-size: 12px !important; }
  .single-grid-product .price { font-size: 14px !important; }
  .add-cart { font-size: 12px !important; padding: 8px 10px !important; }
}

/* ── Navigation mobile fix ── */
@media (max-width: 991px) {
  .main-nav-wrap { display: none !important; }
}

/* ── Cart sidebar mobile ── */
@media (max-width: 480px) {
  #cartOffcanvasSidebar { width: 100vw !important; max-width: 100vw !important; }
}

/* ── Fix header cart count badge ── */
.header-btn.cart-btn .counts,
.header-btn.cart-btn .count {
  background: var(--yk-secondary, #794ABA) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Fix mobile header cart button ── */
@media (max-width: 991px) {
  .mobile-header-area .cart-btn { position: relative; }
  .mobile-header-area .counts,
  .mobile-header-area .count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
  }
}

/* ── Shop filter bar mobile ── */
@media (max-width: 575px) {
  #ykShopSort, .yk-search-wrap { width: 100% !important; }
  .yk-shop-filter-row { flex-direction: column !important; gap: 8px !important; }
}

/* ── Product single page mobile ── */
@media (max-width: 767px) {
  .product-single-area .col-lg-6 { flex: 0 0 100% !important; max-width: 100% !important; }
  .product-single-details { margin-top: 0 !important; }
  .product-single-left { margin-bottom: 24px !important; }
  .yk-gal-main { max-height: 300px !important; }
}

/* ── Fix variation display mobile ── */
@media (max-width: 575px) {
  .product-size-area .product-size { flex-wrap: wrap !important; gap: 6px !important; }
  .single-size { min-width: 40px !important; text-align: center !important; padding: 4px 8px !important; }
}

/* ── Checkout form mobile ── */
@media (max-width: 767px) {
  .checkout-area .form-group { margin-bottom: 12px !important; }
  .checkout-area .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
  .checkout-btn { font-size: 14px !important; padding: 12px !important; }
}