/**
 * Kawaii Merchandise — Design Override CSS
 * Version: 2.0.0
 * Prefix: km2- for new classes, direct overrides for existing selectors
 */

/* =============================================
   GOOGLE FONTS — Nunito (rounded, kawaii-feeling)
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&display=swap');

/* =============================================
   BODY TYPOGRAPHY
============================================= */
body {
  font-family: 'Nunito', 'Montserrat', sans-serif;
  line-height: 1.7;
  color: #3D1A5E;
  background: #FFFBFE;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* =============================================
   HEADER OVERRIDES — slim, modern
============================================= */
.site-header {
  box-shadow: 0 2px 20px rgba(176, 111, 216, 0.12);
  border-bottom: 2px solid #F0E0FA;
}

/* Nav item pill-style active/hover states */
.main-nav a,
.site-nav a {
  border-radius: 99px;
  padding: 6px 14px !important;
  transition: background 0.18s, color 0.18s !important;
  font-weight: 700;
}

.main-nav a:hover,
.site-nav a:hover,
.main-nav .current-menu-item > a,
.site-nav .current-menu-item > a {
  background: linear-gradient(135deg, #FF6EB4, #9650C8) !important;
  color: #fff !important;
  text-decoration: none;
}

/* =============================================
   PRODUCT CARDS — more rounded + gradient border hover
============================================= */
.product-card {
  border-radius: 20px !important;
  border: 2px solid transparent !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
  overflow: hidden;
}

.product-card:hover {
  border-color: #FF6EB4 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(176, 111, 216, 0.2) !important;
}

/* Price — accessible dark purple (WCAG AA 4.67:1 on white) */
.product-card__price,
.product-card .price,
.woocommerce-Price-amount {
  color: #9650C8 !important;
  font-weight: 800 !important;
}

/* Quick-add button: always visible but pumped on hover */
.product-card__quick-add {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.product-card:hover .product-card__quick-add {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   SHOP / ARCHIVE PAGE IMPROVEMENTS
============================================= */
.woocommerce-products-header__title,
.woocommerce-products-header h1,
.page-title,
.archive-title {
  background: linear-gradient(135deg, #FF6EB4, #9650C8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: clamp(1.6rem, 3vw, 2.8rem) !important;
  font-weight: 900 !important;
}

/* Category description in a pink callout box */
.woocommerce-products-header .term-description,
.term-description,
.category-description {
  background: linear-gradient(135deg, #FFF0FA, #F5E8FF) !important;
  border-left: 4px solid #FF6EB4 !important;
  border-radius: 0 16px 16px 0 !important;
  padding: 16px 24px !important;
  color: #6B4088 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin-bottom: 32px !important;
}

/* =============================================
   SINGLE PRODUCT PAGE IMPROVEMENTS
============================================= */
.single-product .product_title,
.woocommerce div.product .product_title {
  color: #3D1A5E !important;
  font-size: clamp(1.5rem, 3vw, 2.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* Product price — accessible gradient (both stops pass WCAG AA on white) */
.single-product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #C4007A, #7B2D96);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.single-product .price .woocommerce-Price-amount,
.woocommerce div.product .price .woocommerce-Price-amount {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #C4007A, #7B2D96);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Add to cart — full-width gradient button */
.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
  width: 100% !important;
  background: linear-gradient(135deg, #FF6EB4, #9650C8) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  padding: 16px 32px !important;
  letter-spacing: 0.02em !important;
  transition: opacity 0.2s, transform 0.2s !important;
  box-shadow: 0 6px 24px rgba(150, 80, 200, 0.35) !important;
}

.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  opacity: 0.92 !important;
  transform: translateY(-2px) !important;
}

/* =============================================
   BREADCRUMBS — smaller, pill-style
============================================= */
.woocommerce-breadcrumb,
.breadcrumb,
nav.woocommerce-breadcrumb {
  font-size: 0.78rem !important;
  color: #9B70B8 !important;
  background: #FFF0FA !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 16px !important;
  border-radius: 99px !important;
  margin-bottom: 24px !important;
  font-weight: 600 !important;
}

.woocommerce-breadcrumb a,
.breadcrumb a {
  color: #B06FD8 !important;
  text-decoration: none !important;
}
.woocommerce-breadcrumb a:hover,
.breadcrumb a:hover {
  color: #FF6EB4 !important;
}

/* =============================================
   GLOBAL BUTTONS — consistent gradient style
============================================= */
.btn--primary,
button.btn--primary,
a.btn--primary,
input[type="submit"].btn--primary {
  background: linear-gradient(135deg, #FF6EB4, #9650C8) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #fff !important;
  font-weight: 800 !important;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
.btn--primary:hover,
a.btn--primary:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(150, 80, 200, 0.3) !important;
  color: #fff !important;
}

.btn--outline {
  border-radius: 50px !important;
  font-weight: 800 !important;
}

/* WooCommerce default buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: 50px !important;
  font-weight: 800 !important;
  transition: opacity 0.2s, transform 0.2s !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: linear-gradient(135deg, #FF6EB4, #9650C8) !important;
  color: #fff !important;
  border: none !important;
}

/* =============================================
   PAGINATION — pill-style
============================================= */
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  border-radius: 99px !important;
  border: 2px solid #EDD5F5 !important;
  color: #B06FD8 !important;
  font-weight: 700 !important;
  transition: background 0.18s, color 0.18s !important;
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
  background: linear-gradient(135deg, #FF6EB4, #9650C8) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* =============================================
   PRODUCT RATING STARS — pink
============================================= */
.star-rating span::before,
.star-rating::before {
  color: #FF6EB4 !important;
}

/* =============================================
   SALE BADGE
============================================= */
.woocommerce span.onsale,
.product-card__badge--sale {
  background: linear-gradient(135deg, #FF6EB4, #9650C8) !important;
  border-radius: 99px !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
}

/* =============================================
   FOOTER IMPROVEMENTS
============================================= */
.site-footer {
  border-top: 3px solid #F0E0FA;
}

/* =============================================
   INPUT FOCUS STATES
============================================= */
input:focus,
textarea:focus,
select:focus {
  border-color: #FF6EB4 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 110, 180, 0.15) !important;
}

/* =============================================
   CART / CHECKOUT IMPROVEMENTS
============================================= */
.woocommerce-cart table.cart td.actions .coupon .input-text {
  border-radius: 50px 0 0 50px !important;
}
.woocommerce-cart table.cart td.actions .coupon .button {
  border-radius: 0 50px 50px 0 !important;
}

/* Checkout fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border-radius: 12px !important;
  border: 2px solid #EDD5F5 !important;
}

/* Place order button */
#place_order {
  background: linear-gradient(135deg, #FF6EB4, #9650C8) !important;
  border-radius: 50px !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  width: 100% !important;
  padding: 18px !important;
}

/* =============================================
   SEARCH FORM
============================================= */
.search-form .search-field {
  border-radius: 50px 0 0 50px !important;
  border: 2px solid #EDD5F5 !important;
  border-right: none !important;
  padding: 12px 20px !important;
}
.search-form .search-submit {
  border-radius: 0 50px 50px 0 !important;
  background: linear-gradient(135deg, #FF6EB4, #9650C8) !important;
  color: #fff !important;
  border: none !important;
}

/* =============================================
   SECTION HEADERS (existing theme classes)
============================================= */
.section-header__title {
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.section-header__eyebrow {
  font-weight: 800 !important;
}

/* =============================================
   SCROLLBAR — kawaii pink thin
============================================= */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #FFF0FA;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(#FF6EB4, #9650C8);
  border-radius: 99px;
}

/* =============================================
   SMOOTH SCROLL
============================================= */
html {
  scroll-behavior: smooth;
}

/* =============================================
   SELECTION COLOR
============================================= */
::selection {
  background: #FF6EB4;
  color: #fff;
}

/* =============================================
   NAVIGATION — FONT SIZE + SPACING FIX
   Root cause: 0.72rem is too small; space-evenly
   causes dead space on right; breakpoint at 1280px
   hides nav on most laptops.
============================================= */

/* ── Bigger, bolder nav text ── */
.nav-menu > li > a {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 10px 14px !important;
  white-space: nowrap;
}

/* ── Fix the right-side gap: center items instead of space-evenly ── */
.nav-menu {
  justify-content: center !important;
  gap: 2px !important;
  width: auto !important;   /* don't force 100% — let it hug items */
}

/* ── Nav wrapper: centered in the remaining flex space ── */
.site-header__nav {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 8px !important;
  overflow: visible !important;
}

/* ── Active / hover pill ── */
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a {
  background: linear-gradient(135deg, #FF6EB4, #9650C8) !important;
  color: #fff !important;
  border-radius: 50px !important;
}

/* ── Dropdown sub-menu styles ── */
.nav-menu .sub-menu a {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
}
.nav-menu .sub-menu a:hover {
  background: #FFF0FA !important;
  color: #9650C8 !important;
}

/* ── Dropdown show on hover ── */
.nav-menu > li:hover .sub-menu,
.nav-menu > li:focus-within .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* =============================================
   PILL BAR — FIX RIGHT-SIDE EMPTY SPACE
   Center the pills instead of left-aligning
============================================= */
.km2-pill-bar__track {
  justify-content: center !important;
  flex-wrap: wrap !important;
  overflow-x: auto;
  gap: 8px !important;
}
/* On large screens pills wrap + center naturally */
@media (min-width: 1100px) {
  .km2-pill-bar__track {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 8px 40px !important;
  }
}
/* On mobile/tablet keep horizontal scroll */
@media (max-width: 1099px) {
  .km2-pill-bar__track {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
}

/* =============================================
   RESPONSIVE BREAKPOINTS — FULL OVERHAUL
   Mobile < 768px | Tablet 768–1024px
   Laptop 1025–1440px | Large desktop > 1440px
============================================= */

/* ──────────────────────────────────────────
   LARGE DESKTOP (> 1440px) — show full nav
────────────────────────────────────────── */
@media (min-width: 1441px) {
  .site-header__nav { display: flex !important; }
  .header-action--menu { display: none !important; }
  .nav-menu > li > a { font-size: 0.95rem !important; padding: 10px 16px !important; }
  .header-inner { gap: 24px !important; }
}

/* ──────────────────────────────────────────
   LAPTOP (1025px – 1440px) — show full nav
────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1440px) {
  .site-header__nav { display: flex !important; }
  .header-action--menu { display: none !important; }
  .header-search--tablet { display: none !important; }
  .nav-menu > li > a { font-size: 0.88rem !important; padding: 9px 12px !important; }
  .header-inner { gap: 16px !important; min-height: 140px !important; }
  /* Logo scales down slightly on laptop */
  .site-header__logo .custom-logo {
    width: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
  }
}

/* ──────────────────────────────────────────
   TABLET (768px – 1024px) — hamburger menu
────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-header__nav { display: none !important; }
  .header-action--menu { display: flex !important; }
  .header-search--tablet { display: flex !important; flex: 1 !important; max-width: 340px !important; }
  .header-inner { gap: 12px !important; min-height: 110px !important; }
  .site-header__logo .custom-logo {
    width: 100px !important;
    height: 100px !important;
    max-height: 100px !important;
  }
  /* Hero responsive */
  .km2-hero { grid-template-columns: 1fr !important; min-height: auto !important; }
  .km2-hero__left { padding: 48px 40px 32px !important; text-align: center !important; align-items: center !important; }
  .km2-hero__right { min-height: 360px !important; }
  .km2-hero__ctas { justify-content: center !important; }
  .km2-hero__stats { justify-content: center !important; }
  /* Products grid */
  .km2-products-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .km2-carousel { grid-template-columns: repeat(2, 1fr) !important; }
  /* Why grid */
  .km2-why__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ──────────────────────────────────────────
   MOBILE (< 768px) — hamburger, stacked layout
────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Header */
  .site-header__nav { display: none !important; }
  .header-action--menu { display: flex !important; }
  .header-action--wishlist { display: none !important; }
  .header-search--tablet { display: none !important; }
  .header-inner { gap: 8px !important; min-height: 90px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
  .site-header__logo .custom-logo {
    width: 80px !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  /* Actions smaller */
  .header-action { width: 36px !important; height: 36px !important; font-size: 1rem !important; }

  /* Hero */
  .km2-hero { grid-template-columns: 1fr !important; min-height: auto !important; }
  .km2-hero__left {
    padding: 36px 20px 28px !important;
    text-align: center !important;
    align-items: center !important;
  }
  .km2-hero__left::before { display: none !important; }
  .km2-hero__heading { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .km2-hero__sub { font-size: 0.95rem !important; }
  .km2-hero__ctas { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .km2-hero__btn { width: 100% !important; max-width: 280px !important; justify-content: center !important; }
  .km2-hero__stats { gap: 10px !important; justify-content: center !important; }
  .km2-stat-badge { padding: 10px 14px !important; }
  .km2-hero__right { min-height: 280px !important; }

  /* Products grid — 2 columns */
  .km2-products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  /* New arrivals — horizontal scroll */
  .km2-carousel {
    display: flex !important;
    overflow-x: auto !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 8px !important;
  }
  .km2-carousel .km2-prod-card { min-width: 180px !important; scroll-snap-align: start !important; }

  /* Category bento — single column */
  .km2-cat-bento { grid-template-columns: 1fr !important; }
  .km2-cat-card--big { grid-column: span 1 !important; }

  /* Why grid — single column */
  .km2-why__grid { grid-template-columns: 1fr !important; }

  /* Manifesto */
  .km2-manifesto__text { padding: 48px 20px !important; text-align: center !important; }
  .km2-manifesto__features { align-items: center !important; }

  /* Newsletter */
  .km2-newsletter__inner { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Section containers */
  .km2-container { padding: 0 16px !important; }
  .km2-section { padding: 0 !important; }
  .km2-most-loved, .km2-shop-vibes, .km2-new-arrivals, .km2-why { padding: 48px 0 !important; }
}

/* ──────────────────────────────────────────
   SMALL MOBILE (< 400px) — tighten further
────────────────────────────────────────── */
@media (max-width: 400px) {
  .km2-products-grid { grid-template-columns: 1fr !important; }
  .km2-hero__heading { font-size: 1.9rem !important; }
  .km2-stat-badge__number { font-size: 1.1rem !important; }
}

/* =============================================
   HEADER INNER — full-width, Logo | Nav | Actions
   Balanced inset padding across all breakpoints
============================================= */

/* Header spans full viewport width — override container max-width */
#masthead,
.site-header {
  width: 100% !important;
  max-width: 100% !important;
}
#masthead .header-inner,
#masthead .header-inner.container,
.header-inner,
.header-inner.container {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Large desktop default — balanced inset */
  padding-left: 80px !important;
  padding-right: 80px !important;
  box-sizing: border-box !important;
}

/* Logo: never shrinks */
.site-header__logo { flex-shrink: 0 !important; }

/* Nav: grow to fill all available space */
.site-header__nav { flex: 1 1 auto !important; }

/* Actions: never shrinks, pinned to right edge */
.site-header__actions {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* ── Laptop (1024px – 1440px) ── */
@media (max-width: 1440px) {
  #masthead .header-inner,
  #masthead .header-inner.container,
  .header-inner,
  .header-inner.container {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
}

/* ── Small laptop / large tablet (768px – 1024px) ── */
@media (max-width: 1024px) {
  #masthead .header-inner,
  #masthead .header-inner.container,
  .header-inner,
  .header-inner.container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  #masthead .header-inner,
  #masthead .header-inner.container,
  .header-inner,
  .header-inner.container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =============================================
   PLUSHIE PROCESS — square images
============================================= */
.plushie-process__step-img-wrap {
  aspect-ratio: 1 / 1 !important;
}
.plushie-process__step-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* =============================================
   CATEGORY PAGE HERO — TRUE 50/50 SPLIT
   <header> IS the grid — breaks free of container
   Text left | Product image right
   Mobile: image on top, text below
============================================= */

/* Base hero — both split and non-split */
.shop-page__hero {
  padding: 0 !important;
  margin-bottom: 0 !important;
  background: linear-gradient(135deg, #FFF0FA 0%, #F8E8FF 100%) !important;
  overflow: hidden !important;
}

/* ── SPLIT VARIANT: header itself is the 50/50 grid ── */
.shop-page__hero--split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  min-height: 460px !important;
}

/* Left column: text, centred vertically, padded like a container */
.shop-page__hero-text {
  display: flex;
  align-items: stretch;
}
.shop-page__hero-text-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 56px 48px 56px 40px;
  max-width: 680px;
  margin-left: auto; /* push to right edge of left half */
  text-align: left;
  width: 100%;
}

/* Right column: image fills full column height */
.shop-page__hero-img-col {
  position: relative;
  overflow: hidden;
  min-height: 460px;
}
.shop-page__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.6s ease;
}
.shop-page__hero--split:hover .shop-page__hero-img {
  transform: scale(1.04);
}

/* Title & description in split layout */
.shop-page__hero--split .shop-page__title {
  text-align: left !important;
  font-size: clamp(1.8rem, 2.8vw, 2.8rem) !important;
  margin-bottom: 0 !important;
  color: #3D1A5E !important;
}
.shop-page__hero--split .shop-page__description {
  text-align: left !important;
  font-size: 0.97rem !important;
  line-height: 1.75 !important;
  color: #5A3A7E !important;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-page__hero--split .product-breadcrumb { margin-bottom: 4px; }
.shop-page__hero--split .cat-occasions {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  margin-top: 4px;
}

/* ── Tablet (768–1024px): keep split, tighter padding ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .shop-page__hero--split { min-height: 380px !important; }
  .shop-page__hero-text-inner { padding: 36px 28px 36px 24px; }
  .shop-page__hero--split .shop-page__title { font-size: 1.6rem !important; }
  .shop-page__hero-img-col { min-height: 380px; }
}

/* ── Mobile (<768px): image on top, full-width; text below ── */
@media (max-width: 767px) {
  .shop-page__hero--split {
    grid-template-columns: 1fr !important;
    grid-template-rows: 260px auto !important;
    min-height: unset !important;
  }
  .shop-page__hero-img-col {
    order: -1;
    min-height: 260px !important;
    position: relative;
  }
  .shop-page__hero-text { order: 1; }
  .shop-page__hero-text-inner {
    padding: 28px 20px 24px !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }
  .shop-page__hero--split .shop-page__title { text-align: center !important; font-size: 1.6rem !important; }
  .shop-page__hero--split .shop-page__description { text-align: center !important; }
  .shop-page__hero--split .cat-occasions { justify-content: center !important; }
  .shop-page__hero--split .product-breadcrumb ol { justify-content: center !important; }
}