/*
Theme Name: Astra Child 02
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.12.1.1770043545
Updated: 2026-02-02 19:45:45

*/


/* =====================================================
   FILTER BUTTON (STICKY TOP BUTTON)
   ===================================================== */

#mm-filter-wrapper {
  position: sticky;
  top: 120px;                 /* ⬅ CHANGE STICKY DISTANCE */
  z-index: 100;
  display: inline-block;
  margin: 15px 0;             /* ⬅ CHANGE BUTTON SPACING */
}

#mm-open-filter {
  padding: 10px 22px;         /* ⬅ CHANGE BUTTON PADDING */
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  /* 🎨 FILTER BUTTON COLOR */
  background-color: #6fcbff;
  color: #ffffff;

  transition: all 0.3s ease;
}

#mm-open-filter:hover {
  background-color: #AEE6CF;  /* 🎨 FILTER BUTTON HOVER */
}

/* ===============================
   FILTER OVERLAY
   =============================== */

#mm-filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4); /* 👈 overlay darkness */
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* SHOW OVERLAY WHEN DRAWER IS OPEN */
#mm-filter-drawer.active + #mm-filter-overlay,
#mm-filter-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* =====================================================
   FILTER DRAWER
   ===================================================== */

#mm-filter-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 320px;
  height: 100vh;
  background: #ffffff;
  z-index: 99999;
  box-shadow: 4px 0 30px rgba(0,0,0,0.15);
  transition: left 0.35s ease;
}

#mm-filter-drawer.active {
  left: 0;
}

/* =====================================================
   FILTER HEADER
   ===================================================== */

.mm-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

#mm-close-filter {
  background: #6fcbff;
  border: none;
  font-size: 21px;
  cursor: pointer;
}

/* =====================================================
   FILTER CONTENT
   ===================================================== */

.mm-filter-content {
  padding: 18px;
}

/* =====================================================
   RESET & APPLY BUTTONS
   ===================================================== */

#mm-reset-filter,
#mm-apply-filter {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;     /* ⬅ SPACE BETWEEN BUTTONS */
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

/* 🎨 APPLY BUTTON */
#mm-apply-filter {
  background-color: #F6B1C3;
  color: #ffffff;
}

#mm-apply-filter:hover {
  background-color: #AEE6CF;
}

/* 🎨 RESET BUTTON */
#mm-reset-filter {
  background-color: #f3f3f3;
  color: #000000;
}

#mm-reset-filter:hover {
  background-color: #dddddd;
}

/* =====================================================
   FILTER GROUPS
   ===================================================== */

.mm-filter-group {
  margin-top: -5px;
}

/* FILTER TITLES */
.mm-filter-group h4 {
  margin-bottom: 8px;        /* ⬅ SPACE BELOW HEADING */
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =====================================================
   SINGLE PRICE SLIDER (ONE TRACK, TWO HANDLES)
   ===================================================== */

.mm-filter-group {
  position: relative;
  padding-top: 0px;         /* ⬅ SPACE BELOW "Price" */
  padding-bottom: 30px;      /* ⬅ SPACE FOR VALUES */
}

/* STACK BOTH SLIDERS */
.mm-filter-group input[type="range"] {
  position: absolute;
  left: 0;
  top: 25px;
  width: 100%;
  pointer-events: none;
  background: none;
  -webkit-appearance: none;
}

/* TRACK (ONLY FIRST SLIDER) */
.mm-filter-group input[type="range"]:first-of-type::-webkit-slider-runnable-track {
  height: 4px;
  background: #dddddd;       /* 🎨 SLIDER TRACK COLOR */
  border-radius: 5px;
}

/* HIDE SECOND TRACK */
.mm-filter-group input[type="range"]:last-of-type::-webkit-slider-runnable-track {
  background: transparent;
}

/* SLIDER HANDLES */
.mm-filter-group input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  height: 18px;              /* ⬅ HANDLE SIZE */
  width: 18px;
  border-radius: 50%;
  cursor: pointer;

  /* 🎨 HANDLE COLOR */
  background-color: #F6B1C3;
}

/* PRICE VALUES */
.mm-price-values {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  font-size: 14px;
}

/* =====================================================
   SIZE CHECKBOXES
   ===================================================== */

.mm-checkbox {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;        /* ⬅ SPACE BETWEEN OPTIONS */
  cursor: pointer;
}

.mm-checkbox input {
  margin-right: 8px;
}

/* =====================================================
   MOBILE FIXES
   ===================================================== */

@media (max-width: 768px) {
  #mm-filter-wrapper {
    margin: 15px;
  }
}

/* ===============================
   FILTER DRAWER SCROLL FIX
   =============================== */

#mm-filter-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 320px;
  height: 100vh;                 /* full screen height */
  background: #fff;
  z-index: 99999;
  box-shadow: 4px 0 30px rgba(0,0,0,0.15);
  transition: left 0.35s ease;
  display: flex;
  flex-direction: column;       /* header + content layout */
}

#mm-filter-drawer.active {
  left: 0;
}

/* HEADER stays fixed */
.mm-filter-header {
  flex-shrink: 0;
}

/* CONTENT becomes scrollable */
.mm-filter-content {
  flex: 1;                      /* take remaining height */
  overflow-y: auto;             /* ✅ ENABLE SCROLL */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 40px;         /* breathing room at bottom */
}

/* Size buttons on single product page */
.mm-size-button {
    padding: 10px 14px;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mm-size-button:hover {
    background: #1a1a1a;
    color: #ffffff;
}

.mm-size-button.active {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

/* Sticky Header - Mommy&Me */

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
}

/* =========================================
 * Mommy&Me Newsletter Popup
 * ========================================= */

#mommyme-newsletter-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
	z-index: 1000;
}

#mommyme-newsletter-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	background: #fff;
	padding: 30px;
	width: 90%;
	max-width: 480px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.15);
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
	z-index: 1001;
}

#mommyme-newsletter-popup.active {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

#mommyme-newsletter-overlay.active {
	opacity: 1;
	visibility: visible;
}

.mommyme-newsletter-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: #FAE3E9;
	border: none;
	font-size: 22px;
	cursor: pointer;
}

/* =========================================
 * Mommy&Me Footer
 * ========================================= */

.mommyme-footer {
	background: #f8f8f8;
	padding: 50px 20px 20px;
	font-size: 14px;
	color: #333;
}

.mommyme-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	gap: 40px;
	justify-content: space-between;
	flex-wrap: wrap;
}

.mommyme-footer-col h4 {
	font-size: 16px;
	margin-bottom: 10px;
	font-weight: 600;
}

.mommyme-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mommyme-footer-col ul li {
	margin-bottom: 6px;
}

.mommyme-footer-col a {
	color: #333;
	text-decoration: none;
}

.mommyme-footer-col a:hover {
	text-decoration: underline;
}

.mommyme-footer-bottom {
	margin-top: 30px;
	text-align: center;
	font-size: 13px;
	color: #777;
}

.mommyme-footer {
	margin-top: 60px;
}

/* =========================================
 * Mommy&Me Footer Logo (Header-Style Match)
 * ========================================= */

.mommyme-footer-logo {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	letter-spacing: 3px;
	color: #FF6F91;
	font-size: clamp(28px, 4vw, 34px);
	line-height: 1.1;
	margin-bottom: 12px;
	display: inline-block;
}

.mommyme-footer-logo .logo-spin {
	display: inline-block;
	animation: spin-x-axis 4s infinite linear;
	backface-visibility: visible;
}

/* Subtle hover (footer-appropriate) */
.mommyme-footer-logo:hover {
	color: #FF9671;
}

/* Mobile adjustment */
@media (max-width: 767px) {
	.mommyme-footer-logo {
		font-size: 24px;
		letter-spacing: 2px;
	}
}

/* =========================================
 * Mommy&Me Footer Tagline
 * ========================================= */

.mommyme-footer-brand {
	display: flex;
	flex-direction: column;
}

.mommyme-footer-tagline {
	margin-top: -10px;
	margin-left: 20px;	
	font-size: 12px;
	letter-spacing: 1.5px;
	color: #777;
	text-transform: uppercase;
}

/* =========================================
 * Footer Newsletter
 * ========================================= */

.mommyme-footer-newsletter {
	max-width: 320px;
}

.mommyme-newsletter-text {
	font-size: 13px;
	line-height: 1.6;
	color: #777;
	margin-bottom: 12px;
}

.mommyme-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mommyme-newsletter-form input {
	padding: 10px 12px;
	font-size: 13px;
	border: 1px solid #ddd;
	border-radius: 3px;
	outline: none;
}

.mommyme-newsletter-form input:focus {
	border-color: #FF6F91;
}

.mommyme-newsletter-form button {
	background: #FF6F91;
	color: #fff;
	border: none;
	padding: 10px;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s ease;
}

.mommyme-newsletter-form button:hover {
	background: #FF9671;
}

/* =========================================
 * Footer Mobile — PERFECT 3-Column Layout
 * ========================================= */

@media (max-width: 767px) {

	/* Main footer stack */
	.mommyme-footer-inner {
		display: flex;
		flex-direction: column;
	}

	/* Brand full width */
	.mommyme-footer-inner > .mommyme-footer-col:first-child {
		width: 100%;
		margin-bottom: 30px;
	}

	/* Wrap Shop + Company + Policies in a GRID row */
	.mommyme-footer-inner {
		row-gap: 30px;
	}

	/* Create grid for link columns */
	.mommyme-footer-inner {
		grid-auto-flow: row;
	}

	.mommyme-footer-inner {
		display: grid;
		grid-template-columns: 1fr;
	}

	/* Links row (Shop, Company, Policies) */
	.mommyme-footer-inner > .mommyme-footer-col:nth-child(2),
	.mommyme-footer-inner > .mommyme-footer-col:nth-child(3),
	.mommyme-footer-inner > .mommyme-footer-col:nth-child(4) {
		grid-column: span 1;
	}

	/* Create a 3-column grid only for links */
	.mommyme-footer-inner {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Force Brand & Newsletter full width */
	.mommyme-footer-inner > .mommyme-footer-col:first-child,
	.mommyme-footer-newsletter {
		grid-column: 1 / -1;
	}

	/* Newsletter spacing */
	.mommyme-footer-newsletter {
		margin-top: 30px;
	}
}

/* ===== Mommy&Me – Premium Checkout ===== */

/* Checkout container */
.woocommerce-checkout {
  max-width: 640px;
  margin: 0 auto;
}

/* Card sections */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: #ffffff;
  padding: 28px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  margin-bottom: 30px;
}

/* Inputs */
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e5e5;
  font-size: 15px;
}

/* Place order button */
#place_order {
  width: 100%;
  border-radius: 50px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
}

/* Secure checkout text */
.mm-secure-checkout {
  margin-top: 14px;
  font-size: 14px;
  color: #666;
  text-align: center;
}

/* Thank you page button */
.mm-continue-shopping {
  margin-top: 40px;
  text-align: center;
}

.mm-shop-btn {
  padding: 14px 36px;
  border-radius: 50px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.mm-shop-btn:hover {
  background: #333;
}