/*
Theme Name: NIAA Kids
Theme URI: https://niaakids.com
Author: NIAA Kids
Author URI: https://niaakids.com
Description: Custom WooCommerce theme for NIAA Kids — a soft, hand-illustrated storefront for premium kidswear built around the brand's blush-and-sage bear mark. Includes a full custom homepage, category and product styling, and WooCommerce cart/checkout support.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Requires Plugins: woocommerce
Text Domain: niaa-kids
*/

/* -------------------------------------------------
   1. TOKENS
------------------------------------------------- */
:root{
  /* brand palette — from NIAA Kids brand kit */
  --pink:        #F7B6C2;
  --pink-deep:   #EF93A6;
  --pink-tint:   #FDEBEE;
  --sage:        #A8C5A0;
  --sage-deep:   #8AAE80;
  --sage-tint:   #EEF3EC;
  --sand:        #F2E7D6;
  --cream:       #FFF8F2;
  --ink:         #6D6A67;
  --ink-strong:  #4A4744;
  --white:       #FFFFFF;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 10px 30px rgba(109,106,103,0.10);
  --shadow-pop:  0 16px 40px rgba(239,147,166,0.28);

  --font-display: 'Baloo 2', 'Segoe UI Rounded', sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;

  --maxw: 1240px;
}

/* -------------------------------------------------
   2. RESET & BASE
------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink-strong);
  margin:0 0 0.5em;
  font-weight:600;
  line-height:1.2;
}
p{ margin:0 0 1em; }
button{ font-family:var(--font-body); cursor:pointer; }
:focus-visible{ outline:3px solid var(--sage-deep); outline-offset:2px; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink-strong); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:9999; }
.skip-link:focus{ left:0; }

/* section rhythm */
.section{ padding:64px 0; }
.section--tight{ padding:40px 0; }
.section--sage{ background:var(--sage-tint); }
.section--sand{ background:var(--sand); }
.section--pink{ background:var(--pink-tint); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.section-head .eyebrow{
  display:inline-block; font-family:var(--font-display); font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--pink-deep);
  background:var(--pink-tint); padding:6px 16px; border-radius:999px; margin-bottom:12px;
}
.section-head h2{ font-size:clamp(26px,3.6vw,38px); }
.section-head p{ color:var(--ink); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  padding:14px 30px; border-radius:999px; border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--sage); color:var(--white); box-shadow:var(--shadow-soft); }
.btn-primary:hover{ background:var(--sage-deep); }
.btn-outline{ background:transparent; border-color:var(--sage); color:var(--sage-deep); }
.btn-outline:hover{ background:var(--sage); color:#fff; }
.btn-pink{ background:var(--pink); color:var(--ink-strong); box-shadow:var(--shadow-pop); }
.btn-pink:hover{ background:var(--pink-deep); color:#fff; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--white); border-radius:999px; padding:6px 14px;
  font-size:13px; font-weight:700; color:var(--ink-strong); box-shadow:var(--shadow-soft);
}

/* -------------------------------------------------
   3. SITE HEADER
------------------------------------------------- */
.site-topbar{
  background:var(--sage); color:#fff; font-size:13px; text-align:center; padding:8px 16px;
}
.site-header{
  background:var(--cream);
  border-bottom:1px solid rgba(109,106,103,0.08);
  position:sticky; top:0; z-index:500;
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px 24px;
}
.site-logo{ display:flex; align-items:center; }
.site-logo img{ height:56px; width:auto; }
.site-logo .site-title{
  font-family:var(--font-display); font-size:22px; color:var(--pink-deep);
}
.site-logo .site-title span{ color:var(--sage-deep); }

.header-search{
  flex:1; max-width:420px; display:flex; align-items:center;
  background:var(--white); border:1px solid var(--sand); border-radius:999px;
  padding:6px 8px 6px 18px;
}
.header-search input{
  flex:1; border:0; background:transparent; font-family:var(--font-body); font-size:14px; padding:6px 0;
}
.header-search input:focus{ outline:0; }
.header-search button{
  background:var(--sage); border:0; color:#fff; width:36px; height:36px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}

.header-actions{ display:flex; align-items:center; gap:22px; }
.header-actions a{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:12px; font-weight:700; color:var(--ink-strong); position:relative;
}
.header-actions .icon{ font-size:20px; }
.header-actions .count{
  position:absolute; top:-6px; right:-10px; background:var(--pink-deep); color:#fff;
  font-size:10px; min-width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.menu-toggle{
  display:none; background:none; border:0; font-size:24px; color:var(--ink-strong);
}

.primary-nav{ background:var(--white); border-top:1px solid var(--sand); }
.primary-nav ul{ display:flex; justify-content:center; gap:34px; flex-wrap:wrap; }
.primary-nav a{
  display:block; padding:14px 2px; font-family:var(--font-display); font-weight:600;
  font-size:14.5px; color:var(--ink-strong); border-bottom:3px solid transparent;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a{
  color:var(--pink-deep); border-color:var(--pink);
}

@media (max-width: 880px){
  .header-search{ display:none; }
  .menu-toggle{ display:block; }
  .primary-nav{ display:none; }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; gap:0; text-align:center; }
}

/* -------------------------------------------------
   4. HERO
------------------------------------------------- */
.hero{
  background:var(--sand);
  overflow:hidden;
  position:relative;
}
.hero__inner{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px;
  padding:70px 24px;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display);
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--sage-deep);
  background:var(--sage-tint); padding:7px 16px; border-radius:999px; margin-bottom:18px;
}
.hero h1{
  font-size:clamp(34px,5vw,56px); line-height:1.08; margin-bottom:18px;
}
.hero h1 em{ font-style:normal; color:var(--pink-deep); }
.hero p{ font-size:18px; max-width:440px; color:var(--ink); margin-bottom:28px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__art{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3.1; box-shadow:var(--shadow-soft);
}
.hero__art img{ width:100%; height:100%; object-fit:cover; }
.hero__badge-float{
  position:absolute; bottom:18px; left:18px;
}

.usp-strip{ background:var(--white); border-bottom:1px solid var(--sand); }
.usp-strip ul{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:26px 24px; max-width:var(--maxw); margin:0 auto;
}
.usp-strip li{
  display:flex; align-items:center; gap:10px; flex:1; min-width:150px; justify-content:center;
}
.usp-strip .icon{
  width:42px; height:42px; border-radius:50%; background:var(--pink-tint);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
}
.usp-strip span.label{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink-strong); }

@media (max-width:820px){
  .hero__inner{ grid-template-columns:1fr; padding:44px 20px; }
  .hero__art{ order:-1; }
}

/* -------------------------------------------------
   5. CATEGORY GRID
------------------------------------------------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:20px;
}
.cat-card{ text-align:center; }
.cat-card__img{
  border-radius:50%; overflow:hidden; aspect-ratio:1/1; margin-bottom:12px;
  box-shadow:var(--shadow-soft); border:4px solid var(--white);
}
.cat-card__img img{ width:100%; height:100%; object-fit:cover; }
.cat-card__label{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink-strong); }

@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }

/* -------------------------------------------------
   6. PRODUCT GRID (home + WooCommerce archive)
------------------------------------------------- */
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.product-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .18s ease;
  position:relative; display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(109,106,103,0.16); }
.product-card__img{ aspect-ratio:1/1.05; overflow:hidden; background:var(--sand); }
.product-card__img img{ width:100%; height:100%; object-fit:cover; }
.product-card__wish{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--pink-deep); box-shadow:var(--shadow-soft);
}
.product-card__body{ padding:16px; flex:1; display:flex; flex-direction:column; }
.product-card__title{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink-strong); margin-bottom:6px; }
.product-card__price{ font-weight:800; color:var(--sage-deep); margin-top:auto; font-size:15px; }
.product-card__price del{ color:var(--ink); opacity:.5; font-weight:600; margin-right:6px; }

@media (max-width:980px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }

/* -------------------------------------------------
   7. FEATURE / WHY-US / TESTIMONIAL BLOCKS
------------------------------------------------- */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature-card{
  background:var(--white); border-radius:var(--radius-md); padding:26px 20px; text-align:center;
  box-shadow:var(--shadow-soft);
}
.feature-card .icon{ font-size:30px; margin-bottom:10px; }
.feature-card h4{ font-size:16px; margin-bottom:6px; }
.feature-card p{ font-size:13.5px; margin:0; color:var(--ink); }

.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testimonial-card{
  background:var(--white); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-soft);
}
.testimonial-card__stars{ color:var(--pink-deep); margin-bottom:10px; letter-spacing:2px; }
.testimonial-card__name{ font-family:var(--font-display); font-weight:700; margin-top:12px; font-size:14px; }

@media (max-width:900px){ .feature-grid, .testimonial-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feature-grid, .testimonial-grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------
   8. NEWSLETTER BANNER
------------------------------------------------- */
.newsletter{
  background:var(--pink); border-radius:var(--radius-lg); padding:44px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.newsletter h3{ color:var(--ink-strong); margin-bottom:6px; }
.newsletter p{ margin:0; color:var(--ink-strong); opacity:.85; }
.newsletter form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter input[type=email]{
  border:0; border-radius:999px; padding:14px 20px; font-family:var(--font-body); min-width:240px;
}
.newsletter input[type=email]:focus{ outline:3px solid var(--ink-strong); }

/* -------------------------------------------------
   9. FOOTER
------------------------------------------------- */
.site-footer{ background:var(--ink-strong); color:#EFE9E4; padding:64px 0 24px; margin-top:24px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; margin-bottom:40px; }
.footer-brand .site-title{ font-family:var(--font-display); font-size:22px; color:var(--pink); }
.footer-brand p{ font-size:13.5px; opacity:.75; margin-top:10px; }
.footer-col h5{ font-family:var(--font-display); color:#fff; font-size:14px; margin-bottom:14px; }
.footer-col li{ margin-bottom:9px; font-size:13.5px; opacity:.82; }
.footer-col a:hover{ opacity:1; color:var(--pink); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:12.5px; opacity:.7;
}
.payment-icons{ display:flex; gap:10px; font-size:12px; }
.payment-icons span{ background:rgba(255,255,255,.1); padding:5px 10px; border-radius:6px; }

@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------
   10. INNER PAGES / BLOG / 404
------------------------------------------------- */
.page-hero{ background:var(--sand); padding:40px 0; text-align:center; }
.page-hero h1{ margin:0; }
.entry-content{ max-width:760px; margin:0 auto; padding:50px 24px; }
.entry-content img{ border-radius:var(--radius-md); }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:var(--maxw); margin:0 auto; padding:50px 24px; }
.blog-card{ background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); }
.blog-card__img{ aspect-ratio:16/10; overflow:hidden; }
.blog-card__img img{ width:100%; height:100%; object-fit:cover; }
.blog-card__body{ padding:18px; }
.blog-card h3{ font-size:17px; margin-bottom:8px; }
.blog-card .meta{ font-size:12px; color:var(--sage-deep); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
@media (max-width:820px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; } }

.not-found{ text-align:center; padding:100px 24px; }
.not-found h1{ font-size:60px; color:var(--pink-deep); }

/* -------------------------------------------------
   11. WOOCOMMERCE OVERRIDES
   (WooCommerce ships its own markup/classes — we theme them
   here rather than overriding templates, for easy upgrades.)
------------------------------------------------- */
.woocommerce{ padding:50px 0; }
.woocommerce .container-woo{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.woocommerce ul.products{
  display:grid !important; grid-template-columns:repeat(4,1fr); gap:24px; list-style:none;
}
.woocommerce ul.products li.product{
  background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:14px 14px 20px; text-align:left; transition:transform .18s ease;
}
.woocommerce ul.products li.product:hover{ transform:translateY(-4px); }
.woocommerce ul.products li.product img{ border-radius:var(--radius-sm); aspect-ratio:1/1; object-fit:cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display); font-size:15px; color:var(--ink-strong); margin:10px 0 4px;
}
.woocommerce ul.products li.product .price{ color:var(--sage-deep); font-weight:800; }
.woocommerce ul.products li.product .price del{ opacity:.5; font-weight:600; }
.woocommerce ul.products li.product .button{
  margin-top:10px; display:inline-block; background:var(--sage); color:#fff !important;
  border-radius:999px; padding:10px 18px; font-family:var(--font-display); font-weight:600; font-size:13px;
}
.woocommerce ul.products li.product .button:hover{ background:var(--sage-deep); }
.woocommerce ul.products li.product .onsale{
  background:var(--pink-deep) !important; color:#fff; border-radius:999px; font-family:var(--font-display);
}

.woocommerce nav.woocommerce-pagination ul{ display:flex; gap:8px; justify-content:center; margin-top:30px; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
  border-radius:8px !important; border-color:var(--sand) !important; color:var(--ink-strong) !important;
}
.woocommerce nav.woocommerce-pagination ul li .current{ background:var(--sage) !important; color:#fff !important; }

.woocommerce div.product .woocommerce-tabs ul.tabs li{ border-radius:8px 8px 0 0 !important; }
.woocommerce div.product form.cart .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--sage); color:#fff !important; border-radius:999px !important;
  font-family:var(--font-display); font-weight:600; border:0 !important; padding:12px 26px !important;
}
.woocommerce div.product form.cart .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--sage-deep); }
.woocommerce span.onsale{ background:var(--pink-deep); }
.woocommerce .star-rating{ color:var(--pink-deep); }
.woocommerce #respond input#submit, .woocommerce a.added_to_cart{ border-radius:999px !important; }

.woocommerce-cart table.cart td, .woocommerce-checkout table.cart td{ vertical-align:middle; }
.woocommerce table.shop_table{ border-radius:var(--radius-md); overflow:hidden; border-color:var(--sand) !important; }
.woocommerce #payment div.payment_box{ background:var(--pink-tint) !important; border-radius:var(--radius-sm); }
.woocommerce-checkout #payment ul.payment_methods{ border-color:var(--sand) !important; }
.woocommerce-message, .woocommerce-info{
  border-top-color:var(--sage) !important; border-radius:var(--radius-sm);
}
.woocommerce-message::before, .woocommerce-info::before{ color:var(--sage-deep) !important; }
.woocommerce-error{ border-top-color:var(--pink-deep) !important; border-radius:var(--radius-sm); }

@media (max-width:980px){ .woocommerce ul.products{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:640px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; } }

/* -------------------------------------------------
   12. UTILITIES
------------------------------------------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}