/* WooCommerce integration */
.kcb-woo-main{padding:clamp(3rem,7vw,6rem) 0}
.woocommerce .woocommerce-breadcrumb{margin:0 0 1.5rem;color:var(--kcb-muted);font-size:.85rem}
.woocommerce .woocommerce-breadcrumb a{color:var(--kcb-ink)}
.woocommerce .woocommerce-products-header{margin-bottom:2.5rem}
.woocommerce .woocommerce-products-header__title.page-title{font-size:clamp(2.5rem,6vw,4.2rem);max-width:14ch}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{margin-bottom:2rem}
.woocommerce .woocommerce-ordering select{min-height:44px}
.woocommerce ul.products,.kcb-product-grid.products{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;list-style:none!important;padding:0!important;margin:0!important}
.woocommerce ul.products::before,.woocommerce ul.products::after,.kcb-product-grid.products::before,.kcb-product-grid.products::after{display:none!important}
.woocommerce ul.products li.product,.kcb-product-grid.products li.product{float:none!important;width:auto!important;margin:0!important;position:relative;border-top:1px solid var(--kcb-border);padding-top:1rem}
.woocommerce ul.products li.product a.woocommerce-loop-product__link{display:block;text-decoration:none}
.woocommerce ul.products li.product a img{aspect-ratio:4/5;object-fit:cover;margin:0 0 1rem;background:var(--kcb-surface);border-radius:8px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1.15rem;padding:0;margin:.15rem 0 .35rem;line-height:1.25}
.woocommerce ul.products li.product .price{display:block;color:var(--kcb-ink);font-weight:800;margin:.45rem 0}
.woocommerce ul.products li.product .button{margin-top:.7rem}
.kcb-product-type{display:inline-block;margin:.1rem 0 .4rem;color:var(--kcb-muted);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
/* WooCommerce's own stylesheet puts white text on this badge, which is 3.05:1 on
   the coral and it is set at .72rem, so it needs 4.5:1 rather than the
   large-text 3:1. Ink on the same coral is 5.31:1 and suits the paper-craft look
   better than white did. */
.woocommerce span.onsale{min-height:auto;min-width:auto;line-height:1.2;border-radius:4px;background:var(--kcb-coral);color:var(--kcb-ink);padding:.42rem .55rem;font-size:.72rem}
.woocommerce .quantity .qty{min-height:48px;width:5rem}
.kcb-purchase-reassurance{display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:1rem 0;color:var(--kcb-muted);font-size:.86rem;font-weight:700}
.kcb-purchase-reassurance span::before{content:'✓';margin-right:.35rem;color:var(--kcb-green-text)}
.kcb-catalog-message,.kcb-checkout-trust{margin:1.2rem 0;padding:1rem 1.1rem;border:1px solid var(--kcb-border);border-left:4px solid var(--kcb-sky);border-radius:8px;background:#fff}
.kcb-catalog-message p{margin:.3rem 0}.kcb-catalog-message a{font-weight:750}
.woocommerce table.shop_table{border:1px solid var(--kcb-border);border-radius:8px;background:#fff}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:1rem;border-color:var(--kcb-border)}
.woocommerce-cart table.cart img{width:90px;border-radius:6px}
.woocommerce .cart-collaterals .cart_totals{width:min(100%,480px);float:right}
.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{border-color:var(--kcb-border);border-radius:10px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{min-height:48px;border:1px solid #bcb8ae;border-radius:10px;background:#fff;padding:.7rem .8rem}
.woocommerce form .form-row label{font-weight:680}
.woocommerce-checkout #customer_details{display:grid;grid-template-columns:1fr;gap:0}
.woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{float:none;width:100%}
.woocommerce-checkout #order_review_heading{margin-top:2.5rem}
.woocommerce-checkout #payment{background:var(--kcb-surface);border-radius:10px}
.woocommerce-checkout #payment ul.payment_methods{border-color:var(--kcb-border)}
.woocommerce-checkout #payment div.payment_box{background:#fff}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#fff}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:#fff;border:1px solid var(--kcb-border);border-top-width:4px;padding:1rem 1.2rem 1rem 3.2rem!important}
.woocommerce-message a.button,.woocommerce-info a.button,.woocommerce-error a.button{min-height:40px}
.woocommerce-message{border-top-color:var(--kcb-green)}
.woocommerce-info{border-top-color:var(--kcb-sky)}
.woocommerce-error{border-top-color:var(--kcb-coral)}
.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:24%}
.woocommerce-account .woocommerce-MyAccount-content{float:right;width:72%}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--kcb-border)}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:block;padding:.8rem 0;text-decoration:none;font-weight:700}
.wc-block-components-button,.wc-block-cart__submit-button{border-radius:12px!important}
/* .98 to match the header's drawer edge in main.css: a whole-pixel max-width leaves a
   gap at fractional viewport widths where neither this block nor min-width:960px runs. */
@media(max-width:959.98px){
	.woocommerce ul.products,.kcb-product-grid.products{grid-template-columns:repeat(2,minmax(0,1fr))}
	.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{float:none;width:100%}
	.woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:2rem}
}
@media(max-width:540px){
	.woocommerce ul.products,.kcb-product-grid.products{gap:1rem}
	.woocommerce ul.products li.product .button{width:100%;text-align:center}
	.woocommerce .quantity .qty{width:100%}
	.woocommerce .cart-collaterals .cart_totals{width:100%;float:none}
}

/* Shop category chips
   ------------------------------------------------------------------ */
.kcb-shop-cats{margin:0 0 2rem}
.kcb-shop-cats__row{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;list-style:none}
.kcb-shop-cats__row+.kcb-shop-cats__row{margin-top:.6rem}
.kcb-shop-cats__row--sub{padding-left:.1rem}
.kcb-shop-cat{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.5rem .95rem;border:1px solid var(--kcb-border);border-radius:999px;background:#fff;color:var(--kcb-ink);font-size:.86rem;font-weight:700;line-height:1.2;text-decoration:none;transition:border-color var(--kcb-dur-fast) ease,background-color var(--kcb-dur-fast) ease,color var(--kcb-dur-fast) ease,transform var(--kcb-dur-fast) ease}
.kcb-shop-cat:hover,.kcb-shop-cat:focus-visible{border-color:var(--kcb-ink);background:var(--kcb-surface);transform:translateY(-1px)}
.kcb-shop-cat.is-current{border-color:var(--kcb-ink);background:var(--kcb-ink);color:var(--kcb-paper)}
.kcb-shop-cat.is-current .kcb-shop-cat__count{color:var(--kcb-paper);opacity:.7}
.kcb-shop-cat.is-ancestor{border-color:var(--kcb-ink)}
.kcb-shop-cat--sub{min-height:34px;padding:.35rem .75rem;background:var(--kcb-surface);font-size:.8rem;font-weight:600}
.kcb-shop-cat__count{color:var(--kcb-muted);font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}

@media (max-width:600px){
	/* One line that scrolls beats four lines of wrapped chips pushing the first
	   product below the fold on a phone. */
	.kcb-shop-cats__row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
	.kcb-shop-cats__row>li{flex:0 0 auto;scroll-snap-align:start}
}

@media (prefers-reduced-motion:reduce){
	.kcb-shop-cat{transition:border-color var(--kcb-dur-fast) ease,background-color var(--kcb-dur-fast) ease,color var(--kcb-dur-fast) ease}
	.kcb-shop-cat:hover,.kcb-shop-cat:focus-visible{transform:none}
}

/* Breadcrumbs
   ------------------------------------------------------------------ */
.kcb-breadcrumbs{margin:0 0 1.1rem;font-size:.82rem;color:var(--kcb-muted)}
.kcb-breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin:0;padding:0;list-style:none}
.kcb-breadcrumbs li{display:flex;align-items:center;gap:.5rem}
.kcb-breadcrumbs li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--kcb-border)}
.kcb-breadcrumbs a{color:var(--kcb-muted);text-decoration:none;border-bottom:1px solid transparent}
.kcb-breadcrumbs a:hover,.kcb-breadcrumbs a:focus-visible{color:var(--kcb-ink);border-bottom-color:var(--kcb-ink)}
.kcb-breadcrumbs [aria-current="page"]{color:var(--kcb-ink);font-weight:600}

/* Designed archive header
   ------------------------------------------------------------------ */
.kcb-archive-head{--kcb-accent:var(--kcb-coral);position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin:0 0 clamp(1.75rem,4vw,2.75rem);padding:clamp(1.75rem,4vw,2.75rem);border:1px solid var(--kcb-border);border-radius:calc(var(--kcb-radius) * 1.6);background:var(--kcb-paper);overflow:hidden}
.kcb-archive-head::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.55));pointer-events:none}
.kcb-archive-head__copy{position:relative;z-index:1;max-width:var(--kcb-copy)}
.kcb-archive-head h1{margin:.15rem 0 .75rem;font-size:clamp(1.85rem,3.6vw,2.9rem);line-height:1.1}
.kcb-archive-head .kcb-lead{margin:0;max-width:56ch}
.kcb-archive-head__count{margin:1.15rem 0 0;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--kcb-muted);font-variant-numeric:tabular-nums}

/* Drawn in CSS on purpose: a category created this afternoon looks finished
   before anyone has made artwork for it. */
.kcb-archive-head__art{position:relative;z-index:1;min-height:190px}
.kcb-archive-blob{position:absolute;border-radius:50%;opacity:.9}
.kcb-archive-blob--1{width:44%;padding-bottom:44%;top:4%;left:6%;background:var(--kcb-accent)}
.kcb-archive-blob--2{width:30%;padding-bottom:30%;bottom:6%;left:36%;background:var(--kcb-yellow)}
.kcb-archive-blob--3{width:26%;padding-bottom:26%;top:16%;right:8%;background:var(--kcb-sky)}
.kcb-archive-sheet{position:absolute;right:14%;bottom:12%;width:46%;padding-bottom:56%;border:1px solid var(--kcb-border);border-radius:10px;background:#fff;box-shadow:0 14px 30px rgba(32,33,31,.12);transform:rotate(-6deg)}
.kcb-archive-sheet::before,.kcb-archive-sheet::after{content:"";position:absolute;left:14%;right:22%;height:6px;border-radius:99px;background:var(--kcb-surface)}
.kcb-archive-sheet::before{top:22%}
.kcb-archive-sheet::after{top:40%;right:38%}

.kcb-archive-head--coloring-pages{--kcb-accent:var(--kcb-coral)}
.kcb-archive-head--learning-activities{--kcb-accent:var(--kcb-sky)}
.kcb-archive-head--screen-free-activities{--kcb-accent:var(--kcb-green)}
.kcb-archive-head--games-puzzles{--kcb-accent:var(--kcb-yellow)}
.kcb-archive-head--activity-packs{--kcb-accent:#B49BD8}
.kcb-archive-head--free-printables{--kcb-accent:var(--kcb-green)}
.kcb-archive-head--events,.kcb-archive-head--halloween{--kcb-accent:#E8892F}
.kcb-archive-head--christmas{--kcb-accent:#C4574A}
.kcb-archive-head--winter,.kcb-archive-head--easter{--kcb-accent:#8FB9D9}
.kcb-archive-head--valentines-day{--kcb-accent:#E58AA0}
.kcb-archive-head--summer{--kcb-accent:var(--kcb-yellow)}

/* Filters
   ------------------------------------------------------------------ */
.kcb-filters{margin:0 0 1.75rem;padding:1.1rem 1.25rem 1.25rem;border:1px solid var(--kcb-border);border-radius:var(--kcb-radius);background:var(--kcb-surface)}
.kcb-filters__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.9rem}
.kcb-filters__title{margin:0;font-size:.86rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--kcb-muted)}
.kcb-filters__reset{font-size:.82rem;font-weight:700;color:var(--kcb-ink);text-decoration:none;border-bottom:1px solid var(--kcb-ink)}
.kcb-filters__reset:hover,.kcb-filters__reset:focus-visible{color:var(--kcb-coral-text);border-bottom-color:var(--kcb-coral-text)}
.kcb-filters__groups{display:flex;flex-wrap:wrap;gap:.6rem}
.kcb-filter-group{flex:1 1 200px;min-width:0;border:1px solid var(--kcb-border);border-radius:10px;background:#fff}
.kcb-filter-group>summary{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:44px;padding:.6rem .85rem;font-size:.85rem;font-weight:700;cursor:pointer;list-style:none}
.kcb-filter-group>summary::-webkit-details-marker{display:none}
.kcb-filter-group>summary::after{content:"";flex:0 0 auto;width:7px;height:7px;border-right:2px solid var(--kcb-muted);border-bottom:2px solid var(--kcb-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--kcb-dur-fast) ease}
.kcb-filter-group[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.kcb-filter-group>summary:focus-visible{outline:2px solid var(--kcb-ink);outline-offset:2px}
.kcb-filter-group__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 .35rem;border-radius:99px;background:var(--kcb-ink);color:var(--kcb-paper);font-size:.72rem;font-variant-numeric:tabular-nums}
.kcb-filter-group__list{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0 .85rem .9rem;list-style:none}
.kcb-filter-chip{display:inline-flex;align-items:center;min-height:34px;padding:.35rem .7rem;border:1px solid var(--kcb-border);border-radius:999px;background:var(--kcb-paper);color:var(--kcb-ink);font-size:.8rem;font-weight:600;text-decoration:none;transition:border-color var(--kcb-dur-fast) ease,background-color var(--kcb-dur-fast) ease,color var(--kcb-dur-fast) ease}
.kcb-filter-chip:hover,.kcb-filter-chip:focus-visible{border-color:var(--kcb-ink);background:var(--kcb-surface)}
.kcb-filter-chip.is-on{border-color:var(--kcb-ink);background:var(--kcb-ink);color:var(--kcb-paper)}
.kcb-filter-chip.is-on::after{content:"";width:8px;height:8px;margin-left:.45rem;background:currentColor;clip-path:polygon(14% 44%,0 58%,42% 100%,100% 22%,86% 8%,40% 70%)}

/* Events hub
   ------------------------------------------------------------------ */
.kcb-events-hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--kcb-border);background:linear-gradient(180deg,var(--kcb-surface),var(--kcb-paper))}
.kcb-events-hero__inner{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.kcb-events-hero__copy{max-width:var(--kcb-copy)}
.kcb-events-hero h1{margin:.2rem 0 .9rem;font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.05}
.kcb-events-hero .kcb-lead{margin:0;max-width:54ch}
.kcb-events-hero__art{position:relative;min-height:230px}
.kcb-events-blob{position:absolute;border-radius:50%}
.kcb-events-blob--1{width:46%;padding-bottom:46%;top:2%;left:2%;background:#E8892F}
.kcb-events-blob--2{width:30%;padding-bottom:30%;bottom:2%;left:30%;background:var(--kcb-sky)}
.kcb-events-blob--3{width:26%;padding-bottom:26%;top:12%;right:4%;background:var(--kcb-green)}
.kcb-events-sheet{position:absolute;right:12%;bottom:8%;width:44%;padding-bottom:54%;border:1px solid var(--kcb-border);border-radius:10px;background:#fff;box-shadow:0 16px 34px rgba(32,33,31,.14);transform:rotate(5deg)}

.kcb-featured-event__panel{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;padding:clamp(1.75rem,4vw,3rem);border:1px solid var(--kcb-border);border-radius:calc(var(--kcb-radius) * 1.6);background:var(--kcb-paper);overflow:hidden}
.kcb-featured-event__copy h2{margin:.2rem 0 .8rem;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1}
.kcb-featured-event__copy .kcb-lead{margin:0 0 1.5rem;max-width:52ch}
.kcb-featured-event__art{position:relative;min-height:180px}
.kcb-featured-event__ring{position:absolute;top:6%;left:8%;width:78%;padding-bottom:78%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#F2B061,#E8892F 62%,rgba(232,137,47,0) 63%)}
.kcb-featured-event__sheet{position:absolute;right:6%;bottom:6%;width:48%;padding-bottom:58%;border:1px solid var(--kcb-border);border-radius:10px;background:#fff;box-shadow:0 14px 30px rgba(32,33,31,.12);transform:rotate(-7deg)}
.kcb-featured-event__products{margin-top:clamp(1.75rem,4vw,2.75rem)}

.kcb-event-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem;margin:0;padding:0;list-style:none}
.kcb-event-card{margin:0}
.kcb-event-card__link{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--kcb-border);border-radius:var(--kcb-radius);background:#fff;color:var(--kcb-ink);text-decoration:none;overflow:hidden;transition:border-color var(--kcb-dur-fast) ease,box-shadow var(--kcb-dur-fast) ease,transform var(--kcb-dur-fast) ease}
.kcb-event-card__link:hover,.kcb-event-card__link:focus-visible{border-color:var(--kcb-ink);box-shadow:0 16px 34px rgba(32,33,31,.12);transform:translateY(-3px)}
.kcb-event-card__art{--kcb-accent:var(--kcb-coral);display:block;height:104px;background:radial-gradient(circle at 22% 30%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%),var(--kcb-accent)}
.kcb-event-card__body{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.1rem 1.15rem}
.kcb-event-card__flag{align-self:flex-start;padding:.2rem .55rem;border-radius:999px;background:var(--kcb-ink);color:var(--kcb-paper);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.kcb-event-card__title{font-size:1.06rem;font-weight:800;line-height:1.25}
.kcb-event-card__text{color:var(--kcb-muted);font-size:.88rem;line-height:1.45}
.kcb-event-card__count{margin-top:.25rem;color:var(--kcb-muted);font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.kcb-event-card--halloween .kcb-event-card__art{--kcb-accent:#E8892F}
.kcb-event-card--christmas .kcb-event-card__art{--kcb-accent:#C4574A}
.kcb-event-card--back-to-school .kcb-event-card__art{--kcb-accent:var(--kcb-sky)}
.kcb-event-card--fall-autumn .kcb-event-card__art{--kcb-accent:#CE8A4C}
.kcb-event-card--thanksgiving .kcb-event-card__art{--kcb-accent:#B4753F}
.kcb-event-card--winter .kcb-event-card__art{--kcb-accent:#9CC3DE}
.kcb-event-card--valentines-day .kcb-event-card__art{--kcb-accent:#E58AA0}
.kcb-event-card--easter .kcb-event-card__art{--kcb-accent:#B7D3A8}
.kcb-event-card--summer .kcb-event-card__art{--kcb-accent:var(--kcb-yellow)}

@media (max-width:900px){
	/* The decorative panels are the first thing to go: on a narrow screen they
	   would push the words that sell the collection off the first screen. */
	.kcb-archive-head,.kcb-events-hero__inner,.kcb-featured-event__panel{grid-template-columns:minmax(0,1fr)}
	.kcb-archive-head__art,.kcb-featured-event__art{display:none}
	.kcb-events-hero__art{min-height:150px;order:-1}
}

@media (max-width:600px){
	.kcb-archive-head{padding:1.25rem}
	.kcb-filters{padding:.9rem 1rem 1rem}
	.kcb-filter-group{flex:1 1 100%}
	.kcb-event-cards{grid-template-columns:minmax(0,1fr)}
	.kcb-events-hero__art{display:none}
}

/* A coarse pointer is the real condition for a touch target, not a narrow window: a
   finger needs the same room on a touch laptop as it does on a phone. 40px is the
   comfortable size that still fits three chips across a phone-width group, where a
   full 44px starts pushing them one per row and makes the panel taller than the
   products it filters. The group summaries are already 44px. */
@media (pointer:coarse){
	.kcb-filter-chip{min-height:40px;padding-inline:.85rem}
}

@media (prefers-reduced-motion:reduce){
	.kcb-event-card__link:hover,.kcb-event-card__link:focus-visible{transform:none}
	.kcb-filter-group>summary::after,.kcb-filter-group[open]>summary::after{transition:none}
}