/*
Theme Name: MILAshop
Theme URI: https://milashop.eu
Description: MILAshop child theme (handmade kids' goods). "Siuvėjos ateljė" art direction over Kadence: linen + dusty rose from the real teepee, stitch-line motif, Fraunces SOFT/WONK + Karla + handwritten Caveat accents.
Author: built.lt
Template: kadence
Version: 0.3.2
Text Domain: milashop
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..700,0..100,0..1&family=Karla:wght@400;500;700&family=Caveat:wght@500;600&display=swap');

:root {
  /* atelier palette */
  --ms-linen: #FAF6F2;   /* page background */
  --ms-paper: #FFFFFF;   /* cards */
  --ms-ink: #33291F;     /* warm near-black */
  --ms-rose: #C9848A;    /* dusty rose, sampled from the real teepee */
  --ms-rose-deep: #A96065;
  --ms-sage: #92A183;
  --ms-sand: #E4D3BC;    /* soft borders / fills */
  --ms-thread: #B99C7A;  /* stitch lines */
  --ms-muted: #7A6C5C;

  /* legacy aliases (markup/palette classes still reference these) */
  --ms-cream: var(--ms-linen);
  --ms-clay: var(--ms-rose);
  --ms-white: var(--ms-paper);

  /* the stitch: a repeating dashed thread line */
  --ms-stitch: repeating-linear-gradient(90deg, var(--ms-thread) 0 10px, transparent 10px 17px);
}

/* ---------- base ---------- */
body {
  background: var(--ms-linen);
  color: var(--ms-ink);
  font-family: "Karla", system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
}

h1, h2, h3, h4, .entry-title, .site-title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ms-ink);
}

a { color: var(--ms-rose-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ms-ink); }

::selection { background: var(--ms-sand); color: var(--ms-ink); }

:focus-visible { outline: 2px solid var(--ms-rose); outline-offset: 2px; }

/* ---------- header ---------- */
.site-header, #masthead { background: var(--ms-linen); }
.site-header .site-header-upper-wrap,
.site-header .site-main-header-wrap { border-bottom: 0; }
#masthead .site-header-row-container-inner { border: 0; }
.site-header::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--ms-stitch);
  opacity: .7;
}
.site-branding .site-title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 640;
  font-size: 1.7rem;
  letter-spacing: .01em;
}
.site-branding .site-title a { color: var(--ms-ink); text-decoration: none; }
.main-navigation .primary-menu-container > ul > li > a {
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ms-ink);
}
.main-navigation .primary-menu-container > ul > li > a:hover { color: var(--ms-rose-deep); }

/* ---------- footer ---------- */
.site-footer { background: var(--ms-ink); color: var(--ms-linen); }
.site-footer::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--ms-stitch);
  opacity: .5;
}
.site-footer, .site-footer .footer-html { font-size: .92rem; }
.site-footer a { color: var(--ms-linen); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--ms-sand); }

/* ---------- homepage hero (cover block) ---------- */
.home .wp-block-cover.alignfull { min-height: 74vh; }
.home .wp-block-cover .wp-block-cover__background {
  background: linear-gradient(to top, rgba(38,28,20,.62) 0%, rgba(38,28,20,.18) 45%, rgba(38,28,20,.10) 100%) !important;
  opacity: 1 !important;
}
.home .wp-block-cover h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.6rem);
  font-variation-settings: "SOFT" 70, "WONK" 0;
  font-weight: 590;
  line-height: 1.12;
  text-shadow: 0 1px 24px rgba(30,22,14,.35);
}
.home .wp-block-cover h1::after {
  content: "";
  display: block;
  width: 130px;
  height: 3px;
  margin: 1.1rem auto 0;
  background: repeating-linear-gradient(90deg, var(--ms-linen) 0 10px, transparent 10px 17px);
  opacity: .9;
}
.home .wp-block-cover p {
  font-size: 1.08rem;
  letter-spacing: .01em;
  text-shadow: 0 1px 16px rgba(30,22,14,.45);
}

/* ---------- buttons ---------- */
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button.button,
.woocommerce-checkout .button.alt,
.wc-block-components-checkout-place-order-button {
  background-color: var(--ms-rose) !important;
  color: #fff !important;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  border: 0;
  border-radius: 12px;
  padding: .78em 1.5em;
  box-shadow: 0 2px 0 rgba(51,41,31,.14);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button.button:hover {
  background-color: var(--ms-ink) !important;
  color: var(--ms-linen) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(51,41,31,.18);
}
.woocommerce .single_add_to_cart_button.button.disabled,
.woocommerce .single_add_to_cart_button.button:disabled {
  background: var(--ms-sand) !important;
  color: var(--ms-muted) !important;
  box-shadow: none;
}

/* ---------- homepage USP columns: swatch cards ---------- */
.home .wp-block-columns.alignwide .wp-block-column {
  background: var(--ms-paper);
  border-radius: 16px;
  padding: 1.6rem 1.4rem 1.4rem;
  position: relative;
  box-shadow: 0 2px 14px rgba(51,41,31,.05);
}
.home .wp-block-columns.alignwide .wp-block-column::before {
  content: "";
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 54px; height: 2px;
  background: var(--ms-stitch);
}
.home .wp-block-columns.alignwide .wp-block-column h3 {
  font-size: 1.18rem;
  margin-top: .5rem;
}
.home .wp-block-columns.alignwide .wp-block-column p { color: var(--ms-muted); margin-bottom: 0; }

/* section heading with centered stitch */
.home h2.has-text-align-center {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}
.home h2.has-text-align-center::after {
  content: "";
  display: block;
  width: 90px; height: 2px;
  margin: .8rem auto 0;
  background: var(--ms-stitch);
}

/* ---------- shop grid: fabric-swatch cards ---------- */
ul.products li.product, .loop-entry.product {
  background: var(--ms-paper);
  border-radius: 16px;
  padding: .9rem .9rem 1.1rem;
  border: 1px solid transparent;
  box-shadow: 0 2px 12px rgba(51,41,31,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
ul.products li.product:hover, .loop-entry.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(51,41,31,.10);
  border: 1px dashed var(--ms-thread);
}
ul.products li.product img, .loop-entry.product img { border-radius: 12px; }
.woocommerce-loop-product__title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-weight: 560;
  font-size: 1.12rem !important;
  color: var(--ms-ink);
}
ul.products li.product .price, .loop-entry.product .price { color: var(--ms-rose-deep); font-weight: 700; }
ul.products li.product .price del, .loop-entry.product .price del { color: var(--ms-muted); font-weight: 400; opacity: .8; }

/* ---------- sale badge: handwritten fabric tag ---------- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce div.product .onsale,
.loop-entry.product .onsale {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  background: var(--ms-paper);
  color: var(--ms-rose-deep);
  border: 1.5px dashed var(--ms-rose);
  border-radius: 10px;
  padding: .45em .7em;
  min-height: 0; min-width: 0;
  transform: rotate(-4deg);
  box-shadow: 0 2px 8px rgba(51,41,31,.10);
  text-transform: none;
}

/* ---------- single product ---------- */
.woocommerce div.product .product_title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-weight: 590;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.woocommerce div.product p.price { color: var(--ms-rose-deep); font-weight: 700; font-size: 1.35rem; }
.woocommerce div.product p.price del { color: var(--ms-muted); font-weight: 400; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 16px; }
.woocommerce div.product .flex-control-thumbs img { border-radius: 10px; }
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .quantity .qty {
  border: 1px solid var(--ms-sand);
  border-radius: 10px;
  padding: .55rem .65rem;
  background: var(--ms-paper);
  color: var(--ms-ink);
  font-family: "Karla", sans-serif;
}
/* product meta (SKU/category) quieter */
.woocommerce div.product .product_meta { color: var(--ms-muted); font-size: .88rem; }

/* tabs: stitch underline for the active tab */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--ms-sand); padding-left: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: 0; border-radius: 0; margin: 0 1.2rem 0 0; padding: 0 0 .4rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: "Karla", sans-serif; font-weight: 700; color: var(--ms-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ms-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 3px solid transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  content: ""; display: block; height: 2px; margin-top: .35rem; background: var(--ms-stitch);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

/* ---------- fabric colour field ---------- */
.ms-fabric-field { display: block; margin: 0 0 1.3rem; }
.ms-fabric-field label { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--ms-ink); font-family: "Karla", sans-serif; }
.ms-fabric-field .required { color: var(--ms-rose-deep); border: 0; text-decoration: none; }
.ms-fabric-select {
  width: 100%; max-width: 340px;
  padding: .6rem .7rem;
  border: 1px solid var(--ms-sand);
  border-radius: 10px;
  background: var(--ms-paper);
  color: var(--ms-ink);
  font-family: "Karla", sans-serif;
}
.ms-fabric-note {
  display: block;
  margin-top: .45rem;
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  color: var(--ms-rose-deep);
}
.ms-fabric-note a { color: var(--ms-rose-deep); text-decoration: underline; }

/* ---------- colour chart page ---------- */
.ms-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 640px) { .ms-swatches { grid-template-columns: 1fr; } }
.ms-swatches img {
  width: 100%; height: auto;
  border-radius: 12px;
  border: 1px dashed var(--ms-thread);
  padding: 6px;
  background: var(--ms-paper);
  box-shadow: 0 2px 10px rgba(51,41,31,.06);
}

/* ---------- cart / checkout ---------- */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table { border-radius: 14px; overflow: hidden; border: 1px solid var(--ms-sand); }
.woocommerce #payment, .woocommerce-checkout #payment { background: var(--ms-paper); border-radius: 14px; border: 1px solid var(--ms-sand); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  border: 1px solid var(--ms-sand); border-radius: 10px; padding: .6rem .7rem; background: var(--ms-paper);
}

/* notices */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--ms-sage);
  background: var(--ms-paper);
  border-radius: 0 0 12px 12px;
}
.woocommerce-error { border-top-color: var(--ms-rose-deep); background: var(--ms-paper); }

/* ---------- TranslatePress floating switcher ---------- */
.trp-language-switcher.trp-floating-switcher {
  font-family: "Karla", sans-serif;
}
.trp-language-switcher.trp-floating-switcher > div {
  background: var(--ms-paper) !important;
  border: 1px dashed var(--ms-thread) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 10px rgba(51,41,31,.10) !important;
}

/* ---------- misc ---------- */
/* Hide Kadence page-title hero band on the static front page */
.home .entry-hero, .home .entry-hero-container-inner, .home .page-title, .home .entry-hero-container { display: none !important; }

/* Kadence page-title band: linen, not the default blue-grey */
.entry-hero-container, .entry-hero-container-inner, .entry-hero,
.entry-hero .hero-section-overlay {
  background: var(--ms-linen) !important;
}
.entry-hero .page-title, .entry-hero h1 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 0;
}
.entry-hero-container-inner { position: relative; }
.entry-hero-container-inner::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  width: 90px; height: 2px;
  background: var(--ms-stitch);
}

/* breadcrumbs quieter */
.woocommerce .woocommerce-breadcrumb { color: var(--ms-muted); font-size: .85rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--ms-muted); }

/* ---------- mobile burger + drawer ---------- */
.menu-toggle-open, .menu-toggle-open.drawer-toggle {
  color: var(--ms-ink);
  background: transparent;
}
.menu-toggle-open:hover, .menu-toggle-open:focus { color: var(--ms-rose-deep); background: transparent; }

#mobile-drawer.popup-drawer { background: rgba(51,41,31,.45); }
#mobile-drawer .drawer-inner {
  background: var(--ms-linen);
  color: var(--ms-ink);
  box-shadow: -8px 0 30px rgba(51,41,31,.18);
}
#mobile-drawer .drawer-header { border-bottom: 2px solid transparent; position: relative; }
#mobile-drawer .drawer-header::after {
  content: "";
  position: absolute; left: 1.2rem; right: 1.2rem; bottom: 0;
  height: 2px; background: var(--ms-stitch);
}
#mobile-drawer .drawer-header .drawer-toggle {
  color: var(--ms-ink);
  background: transparent;
}
#mobile-drawer .drawer-header .drawer-toggle:hover { color: var(--ms-rose-deep); }

#mobile-drawer .mobile-navigation ul li {
  border-bottom: 1px dashed var(--ms-thread);
}
#mobile-drawer .mobile-navigation ul li:last-child { border-bottom: 0; }
#mobile-drawer .mobile-navigation ul li a {
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ms-ink);
  padding: 1rem 0;
}
#mobile-drawer .mobile-navigation ul li a:hover,
#mobile-drawer .mobile-navigation ul li.current-menu-item > a { color: var(--ms-rose-deep); }

/* ---------- motion: the store breathes (only when JS adds .ms-anim) ---------- */
/* hero: slow "breathing" zoom on the photo */
.ms-anim.ms-loaded .home-hero-zoom,
.ms-anim .home .wp-block-cover .wp-block-cover__image-background {
  animation: ms-kenburns 26s ease-in-out infinite alternate;
}
@keyframes ms-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06) translateY(-1.2%); }
}
/* hero entrance: headline, sub, button settle in */
.ms-anim .home .wp-block-cover h1,
.ms-anim .home .wp-block-cover p,
.ms-anim .home .wp-block-cover .wp-block-buttons {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.ms-anim.ms-loaded .home .wp-block-cover h1 { opacity: 1; transform: none; transition-delay: .15s; }
.ms-anim.ms-loaded .home .wp-block-cover p { opacity: 1; transform: none; transition-delay: .34s; }
.ms-anim.ms-loaded .home .wp-block-cover .wp-block-buttons { opacity: 1; transform: none; transition-delay: .52s; }
/* the hero stitch "sews itself" */
.ms-anim .home .wp-block-cover h1::after { width: 0; transition: width .9s ease .6s; }
.ms-anim.ms-loaded .home .wp-block-cover h1::after { width: 130px; }

/* scroll reveals: cards + headings settle up, staggered */
.ms-anim .home .wp-block-columns.alignwide .wp-block-column,
.ms-anim ul.products li.product, .ms-anim .loop-entry.product,
.ms-anim .ms-swatches img,
.ms-anim .home h2.has-text-align-center {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease var(--ms-stagger, 0ms), transform .6s ease var(--ms-stagger, 0ms);
}
.ms-anim .ms-inview { opacity: 1 !important; transform: none !important; }

/* section-heading stitch sews on reveal */
.ms-anim .home h2.has-text-align-center::after { width: 0; transition: width .8s ease .25s; }
.ms-anim .home h2.has-text-align-center.ms-inview::after { width: 90px; }

/* product-card photo: gentle zoom on hover */
ul.products li.product .woocommerce-loop-image-link { display: block; overflow: hidden; border-radius: 12px; }
ul.products li.product .woocommerce-loop-image-link img { transition: transform .45s ease; }
ul.products li.product:hover .woocommerce-loop-image-link img { transform: scale(1.045); }

/* Akcija tag wiggles when the card is hovered */
@keyframes ms-wiggle {
  0%,100% { transform: rotate(-4deg); }
  40% { transform: rotate(-7deg) translateY(-1px); }
  70% { transform: rotate(-2deg); }
}
ul.products li.product:hover .onsale, .loop-entry.product:hover .onsale { animation: ms-wiggle .6s ease 1; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  ul.products li.product, .loop-entry.product,
  .wp-block-button__link, .woocommerce .button { transition: none; }
  ul.products li.product:hover, .loop-entry.product:hover { transform: none; }
  .ms-anim .home .wp-block-cover .wp-block-cover__image-background { animation: none; }
}
