@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');

/* GLOBAL BRANDING FOR MELRON */
:root {
  --melron-pink: #D53F8C;
  --melron-pink-light: #FFF5F7;
  --melron-pink-hover: #B83280;
  --melron-bg: #FFFDFD;
  --melron-text: #4A5568;
  --melron-heading: #2D3748;
  --melron-border: #FFE4E6;
  --melron-shadow: 0 8px 24px rgba(255, 182, 193, 0.1);
}

body {
  font-family: 'Quicksand', sans-serif !important;
  background-color: var(--melron-bg) !important;
  color: var(--melron-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.wp-block-site-title,
.wp-block-post-title {
  font-family: 'Fredoka', sans-serif !important;
  color: var(--melron-heading) !important;
  font-weight: 600 !important;
}

/* HEADER STYLE */
header.wp-block-template-part {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--melron-border) !important;
  box-shadow: 0 4px 15px rgba(255, 182, 193, 0.05) !important;
  padding: 16px 24px !important;
}

/* Logo / Site Title */
.wp-block-site-title {
  font-size: 1.8rem !important;
  margin: 0 !important;
}

.wp-block-site-title a {
  color: var(--melron-pink) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wp-block-site-title a:hover {
  opacity: 0.85;
}

.wp-block-site-title a::after {
  content: '🌸';
  font-size: 1.2rem;
}

/* Navigation Links */
.wp-block-navigation {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1rem !important;
}

.wp-block-navigation-item a {
  color: var(--wp--preset--color--contrast, #4A5568) !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  transition: all 0.2s ease !important;
}

.wp-block-navigation-item a:hover {
  background-color: var(--melron-pink-light) !important;
  color: var(--melron-pink) !important;
  text-decoration: none !important;
}

/* Highlight Cart Item if it exists in header */
.wp-block-navigation-item:has(a[href*="cart"]) a,
.wp-block-navigation-item a[href*="cart"] {
  background-color: var(--melron-pink-light) !important;
  color: var(--melron-pink) !important;
  font-weight: 600 !important;
  border: 1px solid var(--melron-border) !important;
}

.wp-block-navigation-item:has(a[href*="cart"]) a:hover,
.wp-block-navigation-item a[href*="cart"]:hover {
  background-color: var(--melron-pink) !important;
  color: #FFFFFF !important;
}

/* SEARCH BLOCK STYLING */
.wp-block-search {
  max-width: 250px !important;
  margin: 0 !important;
}

/* HIDE HEADER ON HOMEPAGE */
.home .wp-site-blocks > header {
  display: none !important;
}

/* WOOCOMMERCE MAIN CONTENT WRAPPER STYLING */
body.woocommerce .wp-site-blocks {
    background: radial-gradient(circle at 8% 7%, rgba(255, 182, 193, .36), transparent 27%),
                radial-gradient(circle at 88% 17%, rgba(232, 250, 240, .80), transparent 26%),
                linear-gradient(180deg, #FFFDFD 0%, #FFF5F7 45%, #FFFDFD 100%) !important;
    padding-top: 15px !important;
    padding-bottom: 80px !important;
    min-height: 100vh;
}

/* HIDE WOOCOMMERCE SHOP PAGE ELEMENTS & THEME HEADER/FOOTER CONTAINERS */
.woocommerce-breadcrumb,
.woocommerce-products-header,
.woocommerce-products-header__title,
.woocommerce-result-count,
.woocommerce-ordering,
h1.wp-block-query-title,
.wp-block-query-title,
.wp-site-blocks > .wp-block-template-part:first-child,
.wp-site-blocks > .wp-block-template-part:last-child {
    display: none !important;
}

.wp-block-search__label {
  display: none !important; /* Hide Search Label for cleaner UI */
}

.wp-block-search__inside-wrapper {
  display: flex !important;
  border: 2px solid var(--melron-border) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background-color: #FFFFFF !important;
}

.wp-block-search__input {
  border: none !important;
  outline: none !important;
  background-color: #FFFFFF !important;
  color: var(--melron-text) !important;
  padding: 8px 16px !important;
  font-family: 'Quicksand', sans-serif !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wp-block-search__button {
  background: linear-gradient(135deg, #FF69B4 0%, #D53F8C 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 8px 20px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
}

.wp-block-search__button:hover {
  opacity: 0.9 !important;
}



/* BODY CONTENT / BLOG CARD DESIGN */
main.wp-block-group {
  max-width: 1100px !important;
  margin: 40px auto !important;
  padding: 0 20px !important;
}

.wp-block-post {
  background: #FFFFFF !important;
  border: 1px solid var(--melron-border) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  margin-bottom: 30px !important;
  box-shadow: var(--melron-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.wp-block-post:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(255, 182, 193, 0.15) !important;
}

.wp-block-post-title a {
  color: var(--melron-heading) !important;
  text-decoration: none !important;
  font-size: 2rem !important;
  transition: color 0.2s;
}

.wp-block-post-title a:hover {
  color: var(--melron-pink) !important;
}

/* BUTTONS */
.wp-block-button__link,
button.button,
a.button,
.woocommerce .button,
.wp-block-search__button {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #FF69B4 0%, #D53F8C 100%) !important;
  color: #FFFFFF !important;
  border-radius: 30px !important;
  padding: 12px 28px !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(213, 63, 140, 0.15) !important;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.wp-block-button__link:hover,
button.button:hover,
a.button:hover,
.woocommerce .button:hover,
.wp-block-search__button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(213, 63, 140, 0.25) !important;
  opacity: 0.95 !important;
}

/* Override WooCommerce Block Grid - force desktop auto-fit, mobile 1 column */
ul.products,
ul.wp-block-post-template,
ul.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.products::before, ul.products::after,
ul.wp-block-post-template::before, ul.wp-block-post-template::after,
ul.wc-block-product-template::before, ul.wc-block-product-template::after {
  display: none !important;
}

@media (max-width: 767px) {
  ul.products,
  ul.wp-block-post-template,
  ul.wc-block-product-template {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

li.product,
li.wc-block-product,
.wp-block-post,
.products .product {
  position: relative !important;
  background: #FFFFFF !important;
  border: 1px solid var(--melron-border) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  box-shadow: var(--melron-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin: 0 !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  li.product,
  .wp-block-post,
  .products .product {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Image wrapper/container alignment */
li.product .woocommerce-loop-product__link,
.wp-block-post .woocommerce-loop-product__link,
.wc-block-components-product-image,
.wc-block-components-product-image a {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  width: 100% !important;
}

li.product img,
li.wc-block-product img,
.wp-block-post img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
  border-radius: 16px !important;
  background-color: #FFF5F7 !important;
  border: 1px dashed #FFE4E6 !important;
  padding: 4px !important;
  margin: 0 auto 12px !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}
body header img,
body .wp-block-site-logo img,
body nav img {
  width: auto !important;
  height: 40px !important;
  max-height: 40px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  body header img,
  body .wp-block-site-logo img,
  body nav img {
    height: 48px !important;
    max-height: 48px !important;
  }
}

/* Title Container - NO fixed height, let text flow naturally */
li.product h2,
li.product h3,
.wp-block-post h2,
.wp-block-post h3,
.woocommerce-loop-product__title,
.wp-block-post-title {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.05rem !important;
  margin: 12px 0 8px !important;
  padding: 0 !important;
  font-weight: 600 !important;
  display: block !important;
  overflow: visible !important;
  text-align: center !important;
  min-height: 44px !important; /* Guarantees space for 2 lines, pushing prices down equally */
}

/* Title text link - clamp to exactly 2 lines inside the container */
li.product h2 a,
li.product h3 a,
.wp-block-post h2 a,
.wp-block-post h3 a,
.woocommerce-loop-product__title a,
.wp-block-post-title a {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.05rem !important;
  color: var(--melron-heading) !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Price alignment - make sure it's prominent pink */
.price,
.price .woocommerce-Price-amount,
.woocommerce-Price-amount,
li.product .price,
.wp-block-post .price,
.woocommerce-loop-product__link + .price,
.wp-block-woocommerce-product-price {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.25rem !important;
  color: var(--melron-pink) !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  display: block !important;
  margin-top: auto !important; /* Push price and button to bottom */
}

/* Button styling - now in normal flow at the bottom, always visible, full width and short height */
li.product a.button,
li.product .wp-block-button__link,
.wp-block-post a.button,
.wp-block-post .wp-block-button__link,
.products .product .button,
.wp-block-woocommerce-product-button a {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #FF69B4 0%, #D53F8C 100%) !important;
  color: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 8px 16px !important; /* Shrunk height */
  font-size: 0.9rem !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(213, 63, 140, 0.15) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: flex !important; /* Flex to center text */
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important; /* Spans the card width */
  height: 38px !important; /* Fixed height so they are always identical */
  margin: 12px 0 0 0 !important;
  box-sizing: border-box !important;
  
  /* Always visible */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

li.product:hover,
.products .product:hover,
.wp-block-post:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 30px rgba(255, 182, 193, 0.18) !important;
}

li.product:hover a.button,
li.product:hover .wp-block-button__link,
.wp-block-post:hover a.button,
.wp-block-post:hover .wp-block-button__link,
.products .product:hover .button {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-2px) !important;
}




/* FOOTER STYLE */
footer.wp-block-template-part {
  background-color: var(--melron-pink-light) !important;
  border-top: 1px solid var(--melron-border) !important;
  padding: 40px 24px !important;
  margin-top: 60px !important;
  text-align: center !important;
}

footer.wp-block-template-part p {
  margin: 0 !important;
  color: #718096 !important;
  font-size: 0.9rem !important;
}

footer.wp-block-template-part a {
  color: var(--melron-pink) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

footer.wp-block-template-part a:hover {
  text-decoration: underline !important;
}

/* HEADER LAYOUT - Spacing and alignment */
header.wp-block-template-part,
.wp-block-template-part header {
  background: #FFFDFD !important;
  border-bottom: 1px solid var(--melron-border) !important;
  padding: 16px 24px !important;
}

header.wp-block-template-part .wp-block-group.alignwide {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
}

/* Column 1: Logo & Title (Left) */
header.wp-block-template-part .wp-block-group.alignwide > .wp-block-group:nth-child(1) {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Column 2: Navigation Links & Icons */
header.wp-block-template-part .wp-block-group.alignwide > .wp-block-group:nth-child(2) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important; /* Allow auto margin of nav to push icons together */
  align-items: center !important;
  flex-wrap: nowrap !important; /* Force all menu items and icons on a single row */
  margin: 0 !important;
  width: auto !important;
}

header.wp-block-template-part .wp-block-navigation {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto !important; /* Centered in the middle of the available space */
  width: auto !important;
}

header.wp-block-template-part .wp-block-navigation__container {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Style and spacing for sibling icons next to navigation */
header.wp-block-template-part .wp-block-group.alignwide > .wp-block-group:nth-child(2) > *:not(.wp-block-navigation) {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-left: 16px !important;
}

/* SMART STICKY HEADER */
header.wp-block-template-part,
.wp-block-template-part header {
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease !important;
}

header.wp-block-template-part.is-sticky,
.wp-block-template-part header.is-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 25px rgba(255, 182, 193, 0.15) !important;
  background-color: rgba(255, 253, 253, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  padding: 10px 24px !important;
}

/* Hide header completely when scrolling down in sticky state */
header.wp-block-template-part.is-sticky.header-hidden,
.wp-block-template-part header.is-sticky.header-hidden {
  transform: translateY(-100%) !important;
}

/* Remove default focus outline on Site Logo and Site Title */
.wp-block-site-title a:focus,
.wp-block-site-logo a:focus,
.wp-block-site-title a:active,
.wp-block-site-logo a:active {
  outline: none !important;
  box-shadow: none !important;
}

/* 1. HIDE CATEGORIES IN METADATA */
.taxonomy-product_cat,
.product_meta .posted_in {
  display: none !important;
}

/* 2. MAKE PRODUCT TITLE LARGER */
.single-product .wp-block-post-title,
.single-product h1.wp-block-post-title,
h1.product_title,
.product_title,
.entry-title {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  color: #2D3748 !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  display: block !important;
}

/* 3. WOOCOMMERCE TABS & REVIEWS CUSTOMIZATION */
.woocommerce-tabs {
  margin-top: 48px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  border: 1px solid var(--melron-border) !important;
  box-shadow: 0 10px 25px rgba(255, 182, 193, 0.05) !important;
}

.woocommerce-tabs ul.tabs {
  display: flex !important;
  border-bottom: 2px solid var(--melron-border) !important;
  padding-left: 0 !important;
  margin: 0 0 28px 0 !important;
  list-style: none !important;
  gap: 16px !important;
}

.woocommerce-tabs ul.tabs li {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.woocommerce-tabs ul.tabs li a {
  display: block !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: #718096 !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.woocommerce-tabs ul.tabs li.active a {
  color: #D53F8C !important;
}

.woocommerce-tabs ul.tabs li.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #D53F8C !important;
  border-radius: 3px 3px 0 0 !important;
}

/* Review list styles */
#comments {
  margin-bottom: 32px !important;
}

#comments h2.woocommerce-Reviews-title {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: #2D3748 !important;
  margin-bottom: 24px !important;
}

.commentlist {
  padding-left: 0 !important;
  list-style: none !important;
}

.commentlist li.review {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  border: 1px solid #FFE4E6 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.01) !important;
  display: flex !important;
  gap: 16px !important;
}

.commentlist li.review img.avatar {
  border-radius: 50% !important;
  border: 2px solid #FFE4E6 !important;
  width: 48px !important;
  height: 48px !important;
}

.commentlist li.review .comment-text {
  flex-grow: 1 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.commentlist li.review .comment-text .meta {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.commentlist li.review .comment-text .meta strong {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  color: #2D3748 !important;
}

.commentlist li.review .comment-text .meta time {
  font-size: 0.85rem !important;
  color: #A0AEC0 !important;
}

.commentlist li.review .comment-text .description {
  font-size: 0.95rem !important;
  color: #4A5568 !important;
  line-height: 1.5 !important;
}

/* Star rating custom look */
.star-rating {
  font-family: 'star' !important;
  font-size: 1rem !important;
  color: #FFB6C1 !important; /* light pink stars */
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Review form custom look */
#review_form_wrapper {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 24px !important;
  border: 1px solid #FFE4E6 !important;
}

#review_form_wrapper #reply-title {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: #2D3748 !important;
  margin-bottom: 16px !important;
  display: block !important;
}

#review_form_wrapper #respond input[type="text"],
#review_form_wrapper #respond input[type="email"],
#review_form_wrapper #respond textarea {
  background: #FFFFFF !important;
  border: 2px solid var(--melron-border) !important;
  border-radius: 12px !important;
  color: var(--melron-text) !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  font-family: inherit !important;
}

#review_form_wrapper #respond input[type="text"]:focus,
#review_form_wrapper #respond input[type="email"]:focus,
#review_form_wrapper #respond textarea:focus {
  border-color: #F687B3 !important;
}

.comment-form-rating {
  margin-bottom: 16px !important;
}

.comment-form-rating label {
  font-weight: 600 !important;
  color: #2D3748 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.comment-form-comment {
  margin-bottom: 16px !important;
}

.comment-form-comment label {
  font-weight: 600 !important;
  color: #2D3748 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.form-submit #submit {
  background: linear-gradient(135deg, #ED64A6 0%, #D53F8C 100%) !important;
  color: white !important;
  border: none !important;
  padding: 12px 28px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(213, 63, 140, 0.2) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.form-submit #submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(213, 63, 140, 0.3) !important;
}

/* 4. PRODUCT DESCRIPTION RICH CONTENT SPACING */
.woocommerce-Tabs-panel--description {
  color: #4A5568 !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
}

.woocommerce-Tabs-panel--description p {
  margin-bottom: 20px !important;
  line-height: 1.8 !important;
}

.woocommerce-Tabs-panel--description h3 {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #2D3748 !important;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
  border-left: 4px solid #D53F8C !important;
  padding-left: 12px !important;
}

.woocommerce-Tabs-panel--description ul {
  list-style: disc !important;
  padding-left: 24px !important;
  margin-bottom: 24px !important;
}

.woocommerce-Tabs-panel--description li {
  margin-bottom: 10px !important;
  line-height: 1.7 !important;
  list-style-type: disc !important;
}

.woocommerce-Tabs-panel--description strong {
  color: #2D3748 !important;
}