/*
Theme Name: CooBaby
Theme URI: https://coobaby.co
Author: Coo Baby Co.
Description: CooBaby & Mom store theme, built on the CooBaby brand kit (Cloud Burst, Ash Grey, Powder Pink; Visby Round CF). WooCommerce-ready and fully editable in the Site Editor.
Version: 2.1.2
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coobaby
*/

/* =========================================================
   Brand tokens
   ========================================================= */
:root {
	--cb-navy: #252667;
	--cb-navy-deep: #1B1C4F;
	--cb-pink: #EDB5D3;
	--cb-pink-soft: #FCEFF6;
	--cb-berry: #A8467D;
	--cb-grey: #BEB5B6;
	--cb-grey-soft: #F4F1F1;
	--cb-ink-soft: #4A4B7A;
	--cb-line: #EADFE3;
	--cb-sticker: 0 6px 0 var(--cb-navy);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
p.has-large-font-size { line-height: 1.65; max-width: 560px; }

/* Section tag: rounded pill label above headings (replaces the old script accent) */
.coobaby-script {
	display: inline-block;
	align-self: flex-start;
	width: fit-content;
	font-family: var(--wp--preset--font-family--visby) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	color: var(--cb-berry) !important;
	background: #fff;
	border: 2px solid var(--cb-pink);
	border-radius: 999px;
	padding: 7px 14px !important;
	margin: 0 0 14px !important;
}
.has-navy-background-color .coobaby-script {
	background: rgba(237, 181, 211, 0.14);
	color: var(--cb-pink) !important;
	border-color: rgba(237, 181, 211, 0.6);
}
.coobaby-heading-stack .coobaby-script { margin-bottom: 10px !important; }

/* Eyebrow label */
.coobaby-eyebrow { font-weight: 800; letter-spacing: 0.1em; font-size: 13px; text-transform: uppercase; margin: 0; }

/* Sub-brand logos: CooBaby Comfort (baby) and CooBaby & Mom (mom) */
.coobaby-sublogo { margin: 0 0 6px !important; }
.coobaby-sublogo img { height: 84px; width: auto; display: block; }
@media (max-width: 781px) { .coobaby-sublogo img { height: 64px; } }

/* Section heading block (script + title) */
.coobaby-heading-stack { gap: 4px !important; }
.coobaby-heading-stack > * { margin-block: 0 !important; }

/* =========================================================
   Sticky header
   ========================================================= */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
@media (max-width: 600px) { .admin-bar header.wp-block-template-part { top: 0; } }

.coobaby-topbar p { margin: 0; letter-spacing: 0.02em; }
.coobaby-header { position: relative; z-index: 50; box-shadow: 0 4px 0 var(--cb-pink); }
.coobaby-header .wp-block-image { margin: 0; }
.coobaby-header .wp-block-navigation a { text-decoration: none; }
.coobaby-header .wp-block-navigation-item__content:hover { color: var(--cb-berry); }
.coobaby-header .wp-block-navigation__submenu-container {
	border: 3px solid var(--cb-navy) !important;
	border-radius: 20px;
	padding: 8px !important;
	box-shadow: var(--cb-sticker);
	min-width: 230px !important;
}
.coobaby-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 14px !important; border-radius: 12px; }
.coobaby-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--cb-pink-soft); color: var(--cb-navy); }
.coobaby-nav-highlight > a { color: var(--cb-berry) !important; }
.coobaby-header .wp-block-search__button {
	width: 44px; height: 44px; min-width: 44px; padding: 0 !important;
	border-radius: 22px !important; border: 0;
	background: var(--cb-pink-soft) !important;
	color: var(--cb-navy) !important;
	display: inline-flex; align-items: center; justify-content: center;
}
.coobaby-header .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }
.coobaby-header .wc-block-mini-cart__button,
.coobaby-header .wc-block-customer-account a { color: var(--cb-navy); }

/* =========================================================
   Buttons
   ========================================================= */
.wp-block-button__link { box-shadow: 0 4px 0 var(--cb-navy-deep); transition: transform .12s ease, box-shadow .12s ease; }
.wp-block-button__link:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--cb-navy-deep); }
.wp-block-button.is-style-outline .wp-block-button__link { box-shadow: 0 4px 0 var(--cb-navy); }
.coobaby-btn-pink .wp-block-button__link { background: var(--cb-pink) !important; color: var(--cb-navy) !important; }

/* =========================================================
   Hero
   ========================================================= */
.coobaby-hero { position: relative; overflow: hidden; }
.coobaby-hero::after {
	content: "";
	position: absolute;
	right: -120px; top: -120px;
	width: 420px; height: 420px;
	border-radius: 50%;
	background: var(--cb-pink);
	opacity: .35;
	pointer-events: none;
}
.coobaby-hero > * { position: relative; z-index: 1; }
.coobaby-hero h1 { margin-top: 0 !important; }
.coobaby-hero-media { position: relative; }
.coobaby-hero-photo { margin: 0; }
.coobaby-hero-photo img {
	width: 100%; height: 470px; object-fit: cover;
	border-radius: 36px;
	border: 4px solid var(--cb-navy);
	box-shadow: 12px 12px 0 var(--cb-pink);
	box-sizing: border-box;
}
.coobaby-hero-koala { position: absolute !important; left: -38px; bottom: -34px; width: 150px; margin: 0 !important; z-index: 2; }
.coobaby-hero-koala img { width: 150px; height: auto; filter: drop-shadow(0 6px 0 rgba(37,38,103,.15)); }
.coobaby-hero-badge {
	position: absolute !important; right: 18px; top: 18px; z-index: 2;
	margin: 0 !important;
	background: #fff; border: 3px solid var(--cb-navy); border-radius: 999px;
	padding: 8px 16px !important; font-weight: 800; font-size: 14px;
	box-shadow: 0 4px 0 var(--cb-navy);
}

/* =========================================================
   Trust bar
   ========================================================= */
.coobaby-trust .wp-block-column { display: flex; align-items: center; gap: 12px; }
.coobaby-trust .wp-block-column p { margin: 0; line-height: 1.45; font-size: 15px; color: var(--cb-ink-soft); }
.coobaby-trust .wp-block-column p strong { font-size: 16px; font-weight: 800; color: var(--cb-navy); }
.coobaby-trust .wp-block-column::before {
	content: "";
	flex: none;
	width: 48px; height: 48px;
	border-radius: 24px;
	background-color: var(--cb-pink-soft);
	border: 2px solid var(--cb-pink);
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}
.coobaby-trust .coobaby-trust-truck::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252667' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.coobaby-trust .coobaby-trust-card::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252667' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.coobaby-trust .coobaby-trust-refresh::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252667' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 11-3-6.2'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E"); }
.coobaby-trust .coobaby-trust-shield::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252667' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }

/* =========================================================
   Sticker cards (thick navy outline like the logo)
   ========================================================= */
.coobaby-card {
	display: flex !important;
	flex-direction: column;
	gap: 8px;
	border: 3px solid var(--cb-navy);
	border-radius: 28px;
	padding: 16px 16px 20px !important;
	height: 100%;
	box-sizing: border-box;
	box-shadow: var(--cb-sticker);
	transition: transform .15s ease, box-shadow .15s ease;
}
.coobaby-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--cb-navy); }
.coobaby-card > * { margin-block: 0 !important; }
.coobaby-card figure { margin: 0 0 6px !important; }
.coobaby-card figure img { border-radius: 20px; width: 100%; height: 200px; object-fit: cover; display: block; }
.coobaby-card .wp-block-heading { margin-top: 4px !important; }
.coobaby-card .wp-block-heading a { text-decoration: none; color: inherit; }
.coobaby-card p { margin: 0; }
.coobaby-card-white { background: #fff; }
.coobaby-card .coobaby-more a {
	font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.coobaby-card .coobaby-more a::after {
	content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252667' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.coobaby-card .coobaby-price { font-size: 22px !important; font-weight: 900 !important; margin-top: auto !important; padding-top: 6px; }

/* Grid wrappers */
.coobaby-grid { gap: 24px !important; }

/* Soft tiles */
.coobaby-tile {
	border-radius: 24px;
	padding: 22px !important;
	height: 100%;
	box-sizing: border-box;
}
.coobaby-tile > * { margin-block: 0 !important; }
.coobaby-tile p { margin: 0; }
.coobaby-tile .wp-block-heading { margin: 6px 0 4px !important; }
.coobaby-tile .wp-block-heading a { text-decoration: none; color: inherit; }
.coobaby-tile figure { margin: 0 0 12px !important; }
.coobaby-tile figure img { width: 100%; height: 130px; object-fit: cover; border-radius: 16px; display: block; }
.coobaby-tile-num { font-size: 40px !important; font-weight: 900 !important; line-height: 1 !important; color: var(--cb-pink); }

/* Brand tiles */
.coobaby-brand-tile {
	background: #fff;
	border: 2px solid var(--cb-line);
	border-radius: 22px;
	min-height: 120px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px !important;
	box-sizing: border-box;
}
.coobaby-brand-tile p { margin: 0; font-weight: 800; color: var(--cb-ink-soft); }
.coobaby-brand-tile.is-own { border: 3px solid var(--cb-navy); box-shadow: var(--cb-sticker); }
.coobaby-brand-tile figure { margin: 0; }
.coobaby-brand-tile img { max-height: 76px; width: auto; }

/* Banner */
.coobaby-banner { border-radius: 36px; border: 3px solid var(--cb-navy); box-shadow: 0 8px 0 var(--cb-navy); overflow: hidden; }
.coobaby-banner figure { margin: 0; }
.coobaby-banner-koala img { width: 220px; height: auto; display: block; margin-left: auto; }

/* Coming soon */
.coobaby-soon-koala img { width: 120px; height: auto; }


/* =========================================================
   Motion (gentle, respects reduced-motion settings)
   ========================================================= */
@keyframes cbFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes cbBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cbUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cbPop { 0% { opacity: 0; transform: scale(.85); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cbBlob { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.coobaby-hero-koala img, .coobaby-banner-koala img { animation: cbFloat 4s ease-in-out infinite; transform-origin: 50% 80%; }
.coobaby-soon-koala img { animation: cbBob 3s ease-in-out infinite; }
.coobaby-hero h1, .coobaby-hero .coobaby-script, .coobaby-hero p.has-large-font-size, .coobaby-hero .wp-block-buttons { animation: cbUp .7s ease both; }
.coobaby-hero h1 { animation-delay: .08s; }
.coobaby-hero p.has-large-font-size { animation-delay: .18s; }
.coobaby-hero .wp-block-buttons { animation-delay: .28s; }
.coobaby-hero-photo { animation: cbUp .8s .15s ease both; }
.coobaby-hero-badge { animation: cbPop .6s .6s ease both; }
.coobaby-hero::after { animation: cbBlob 8s ease-in-out infinite; }
.wp-block-button__link:active { transform: translateY(4px); box-shadow: 0 0 0 var(--cb-navy-deep); }

/* Scroll reveal (class added by assets/js/motion.js) */
.coobaby-motion main .coobaby-card,
.coobaby-motion main .coobaby-tile,
.coobaby-motion main .coobaby-brand-tile,
.coobaby-motion main .coobaby-banner,
.coobaby-motion main .coobaby-heading-stack,
.coobaby-motion main .coobaby-trust .wp-block-column {
	opacity: 0; transform: translateY(22px);
	transition: opacity .6s ease, transform .6s ease, box-shadow .15s ease;
}
.coobaby-motion main .is-visible { opacity: 1 !important; transform: none !important; }
.coobaby-motion main .coobaby-card.is-visible:hover { transform: translateY(-4px) !important; }


/* Why washable: 1, 2, 3 appear one after another */
@keyframes cbNum { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
.coobaby-motion main .coobaby-steps .coobaby-tile { transition: opacity .6s cubic-bezier(.2,.8,.3,1.15), transform .6s cubic-bezier(.2,.8,.3,1.15); transform: translateY(28px) scale(.94); }
.coobaby-motion main .coobaby-steps .coobaby-tile .coobaby-tile-num { display: inline-block; opacity: 0; transform-origin: left bottom; }
.coobaby-motion main .coobaby-steps .coobaby-tile.is-visible .coobaby-tile-num { animation: cbNum .55s ease both; animation-delay: inherit; }

@media (prefers-reduced-motion: reduce) {
	.coobaby-tile-num { opacity: 1 !important; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}


/* =========================================================
   Our story (founder)
   ========================================================= */
.coobaby-about-body > * { margin-left: 0 !important; }
.coobaby-about-signature { gap: 14px !important; margin-top: 12px; }
.coobaby-about-avatar { margin: 0 !important; flex: none; }
.coobaby-about-avatar img { width: 72px !important; height: 72px !important; border-radius: 50%; object-fit: cover; border: 3px solid var(--cb-navy); box-shadow: 0 4px 0 var(--cb-pink); box-sizing: border-box; }
.coobaby-about-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.coobaby-about-chips span { background: var(--cb-pink-soft); border: 2px solid var(--cb-pink); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 14px; }
.coobaby-about-chips span:nth-child(2) { background: var(--cb-grey-soft); border-color: var(--cb-grey); }
.coobaby-about-sign { font-size: 15px; color: var(--cb-ink-soft); }
.coobaby-about-sign strong { font-size: 20px; font-weight: 900; color: var(--cb-navy); }

/* =========================================================
   Blog & FAQ
   ========================================================= */
.coobaby-post-card { background: #fff; border: 3px solid var(--cb-navy); border-radius: 28px; box-shadow: var(--cb-sticker); padding: 14px 14px 20px !important; height: 100%; box-sizing: border-box; transition: transform .15s ease, box-shadow .15s ease; }
.coobaby-post-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--cb-navy); }
.coobaby-post-card .wp-block-post-featured-image img { border-radius: 20px; }
.coobaby-post-card .wp-block-post-title a { text-decoration: none; }
.coobaby-byline { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cb-ink-soft); }
.coobaby-byline .wp-block-post-author-name { font-weight: 800; color: var(--cb-navy); }
.coobaby-faq .wp-block-details {
	background: #fff; border: 3px solid var(--cb-navy); border-radius: 20px;
	padding: 18px 22px; margin-bottom: 14px; box-shadow: 0 4px 0 var(--cb-navy);
}
.coobaby-faq .wp-block-details summary { font-weight: 800; font-size: 17px; cursor: pointer; }
.coobaby-faq .wp-block-details[open] { background: var(--cb-pink-soft); }
.coobaby-faq .wp-block-details p { margin: 10px 0 0; color: var(--cb-ink-soft); }

/* Breadcrumbs */
.coobaby-breadcrumbs, .woocommerce-breadcrumb, .wc-block-breadcrumbs { font-weight: 700; color: var(--cb-ink-soft); margin-bottom: 16px !important; }
.coobaby-breadcrumbs a, .woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: var(--cb-ink-soft); }

/* =========================================================
   Footer
   ========================================================= */
.coobaby-footer a { color: #DCDBF2; text-decoration: none; }
.coobaby-footer a:hover { color: var(--cb-pink); }
.coobaby-footer h4 { color: #fff !important; font-size: 17px !important; }
.coobaby-footer .coobaby-footer-logo img { height: 80px; width: auto; }
.coobaby-footer ul { list-style: none; padding-left: 0; margin: 0; }
.coobaby-footer li { margin-bottom: 10px; }
.coobaby-footer .coobaby-footer-line { border: 0; border-top: 1px solid #3A3B80; background: none; max-width: var(--wp--style--global--wide-size); }

/* =========================================================
   WooCommerce
   ========================================================= */
.woocommerce ul.products li.product {
	background: #fff;
	border: 3px solid var(--cb-navy);
	border-radius: 24px;
	padding: 14px !important;
	box-sizing: border-box;
	box-shadow: var(--cb-sticker);
}
.woocommerce ul.products li.product img { border-radius: 18px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-weight: 800; font-size: 17px !important; color: var(--cb-navy); }
.woocommerce ul.products li.product .price { font-weight: 900; font-size: 20px; color: var(--cb-navy) !important; }
.woocommerce a.button, .woocommerce button.button, .wc-block-components-button:not(.is-link) {
	border-radius: 999px !important;
	background: var(--cb-navy) !important;
	color: #fff !important;
	font-weight: 800 !important;
}
.woocommerce span.onsale { background: var(--cb-pink); color: var(--cb-navy); border-radius: 999px; font-weight: 800; }


/* Phones: two cards per row */
@media (max-width: 700px) {
	.coobaby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
	.coobaby-grid.coobaby-steps { grid-template-columns: 1fr !important; }
	.coobaby-grid .coobaby-card { padding: 10px 10px 14px !important; border-radius: 20px; box-shadow: 0 4px 0 var(--cb-navy); }
	.coobaby-grid .coobaby-card figure img { height: 120px; border-radius: 14px; }
	.coobaby-grid .coobaby-card h3 { font-size: 16px !important; }
	.coobaby-grid .coobaby-card p { font-size: 13px !important; }
	.coobaby-grid .coobaby-card .coobaby-price { font-size: 17px !important; }
	.coobaby-grid .coobaby-tile { padding: 14px !important; }
	.coobaby-grid .coobaby-tile figure img { height: 90px; }
	.coobaby-grid .coobaby-tile h4 { font-size: 15px !important; }
	.coobaby-grid .coobaby-brand-tile { min-height: 96px; }
	.woocommerce ul.products[class*="columns-"] li.product { width: 48% !important; float: left !important; clear: none !important; margin: 0 4% 16px 0 !important; }
	.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n) { margin-right: 0 !important; }
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 781px) {
	.coobaby-hero-photo img { height: 320px; box-shadow: 8px 8px 0 var(--cb-pink); }
	.coobaby-hero-koala { width: 100px; left: -8px; bottom: -26px; }
	.coobaby-hero-koala img { width: 100px; }
	.coobaby-banner { border-radius: 26px; }
	.coobaby-banner-koala img { width: 150px; margin: 0 auto; }
	.coobaby-hero::after { width: 260px; height: 260px; }
}