/* ---- Material base components mapped onto Flatsome/Woo elements ---- */

/* Buttons (filled / tonal / outlined) */
.md-button, .button, .add_to_cart_button, .single_add_to_cart_button, .checkout-button, .woocommerce-button {
  border-radius: var(--md-shape-corner);
  padding: 10px 16px;
  font: var(--md-title-m);
  position: relative; overflow: hidden;
  border: none; box-shadow: var(--md-elev-1);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  transition: transform .02s ease, box-shadow .2s ease;
}
.md-button:hover, .button:hover, .add_to_cart_button:hover,
.single_add_to_cart_button:hover, .checkout-button:hover { box-shadow: var(--md-elev-2); }
.md-button:active { transform: translateY(0.5px); }

.md-button.tonal { 
  background: color-mix(in srgb, var(--md-sys-color-primary) 20%, white); 
  color: var(--md-sys-color-on-surface); 
  box-shadow: var(--md-elev-0); 
}
.md-button.outlined, .button.outlined { 
  background: transparent; 
  border: 1px solid var(--md-sys-color-outline); 
  color: var(--md-sys-color-on-surface); 
  box-shadow: none; 
}

/* Ripple effect */
.md-ripple {
  position:absolute; border-radius:50%; transform:scale(0);
  background: rgba(255,255,255,.35); animation: md-ripple .6s ease-out;
  pointer-events:none;
}
@keyframes md-ripple { to { transform: scale(4); opacity:0; } }

/* Card (PLP items, generic cards) */
.md-card, .product-small.box {
  background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  border-radius: var(--md-shape-corner);
  box-shadow: var(--md-elev-1); 
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 30%, transparent);
  overflow: hidden;
}
.product-small.box .title-wrapper, .md-card .card-title { 
  font: var(--md-title-m); padding: var(--md-space-3) var(--md-space-4); 
}

/* Header / App Bar */
.header-wrapper, .header-main { 
  background: var(--md-sys-color-surface); box-shadow: var(--md-elev-1); 
}

/* Navigation links appearance */
.nav > li > a { border-radius: 999px; padding: 10px 14px; }

/* Inputs & selects */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], 
input[type="number"], input[type="password"], textarea, select {
  background: #F3EDF7; border: 1px solid #CAC4D0; border-radius: var(--md-shape-corner);
  padding: 12px 14px; color: var(--md-sys-color-on-surface);
}
input:focus, textarea:focus, select:focus { 
  outline: 2px solid var(--md-sys-color-primary-container); border-color: var(--md-sys-color-primary); 
}

/* Chips (used for breadcrumb delimiter) */
.md-chip { 
  display:inline-flex; align-items:center; gap:6px; 
  padding: 2px 8px; border-radius: 999px; 
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, white); 
  color: var(--md-sys-color-on-surface);
}

/* Badges (cart count) */
.cart-icon strong, .badge-inner { 
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: 999px; 
}

/* Snackbar */
.md-snackbar { 
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; 
  background: #2B2B2B; color: #fff;
  padding: 12px 16px; border-radius: 8px; box-shadow: var(--md-elev-2); 
  display:none; z-index: 9999; 
}
.md-snackbar.show { display:block; }

/* Off-canvas drawer (mobile) */
.off-canvas .mfp-content { 
  border-radius: var(--md-shape-corner) 0 0 var(--md-shape-corner); 
  box-shadow: var(--md-elev-2); 
}

/* Focus ring accessibility */
:focus-visible { 
  outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 60%, white); 
  outline-offset: 2px; 
}

/* Blog cards */
.blog-archive .box, .post-item .box {
  border-radius: var(--md-shape-corner);
  box-shadow: var(--md-elev-1);
  overflow: hidden;
}