/*
Theme Name: Bloo Thread
Description: Block storefront theme for a WooCommerce + Printify apparel shop.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: bloo-thread
*/

:root { --bloo-radius: 18px; --bloo-shadow: 0 18px 40px -18px rgba(20,17,15,.35); }
body { -webkit-font-smoothing: antialiased; }
a { text-underline-offset: .18em; }

/* Header */
header.wp-block-template-part { display: contents; } /* lets .bloo-header stick past its own wrapper */
.bloo-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--cream); border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent); }
.admin-bar .bloo-header { top: var(--wp-admin--admin-bar--height, 32px); }
.bloo-header .wp-block-site-title a { text-decoration: none; letter-spacing: -.03em; }
.bloo-header .wp-block-navigation a { text-decoration: none; font-weight: 600; }
.bloo-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.bloo-announce { font-size: .85rem; letter-spacing: .02em; }
.bloo-announce a { color: inherit; font-weight: 700; }

/* Buttons */
.wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--bloo-shadow); }
.is-style-outline > .wp-block-button__link { border-width: 2px; }

/* Hero */
.bloo-hero { position: relative; overflow: hidden; }
.bloo-hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--sun) 55%, transparent), transparent 65%); pointer-events: none; }
.bloo-hero > * { position: relative; }
.bloo-eyebrow { display: inline-block; padding: .35em .9em; border-radius: 999px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bloo-hero h1 { line-height: .95; letter-spacing: -.045em; }
.bloo-hero h1 em { font-style: normal; color: var(--wp--preset--color--accent); }
.bloo-hero .has-large-font-size, .bloo-cta .has-large-font-size { line-height: 1.4; }
.bloo-hero-art { margin: 0; }
.bloo-hero-art img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(20,17,15,.25)); animation: bloo-float 6s ease-in-out infinite; }
@keyframes bloo-float { 50% { transform: translateY(-12px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .bloo-hero-art img { animation: none; } .wp-block-button__link:hover { transform: none; } }
.bloo-trust { gap: 1.5rem !important; font-size: .9rem; font-weight: 600; opacity: .85; }

/* Marquee strip */
.bloo-strip { overflow: hidden; white-space: nowrap; }
.bloo-strip p { display: inline-block; margin: 0; animation: bloo-marquee 28s linear infinite; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
@keyframes bloo-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bloo-strip p { animation: none; } }

/* Feature cards */
.bloo-card { border-radius: var(--bloo-radius); height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.bloo-card:hover { transform: translateY(-4px); box-shadow: var(--bloo-shadow); }
.bloo-icon { display: block; line-height: 0; color: var(--wp--preset--color--accent); }

/* Collection tiles */
.bloo-tile { border-radius: var(--bloo-radius); min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.bloo-tile h3 a { color: inherit; text-decoration: none; }
.bloo-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.bloo-tile:hover { box-shadow: var(--bloo-shadow); }
.bloo-tile .bloo-arrow { transition: transform .2s ease; display: inline-block; }
.bloo-tile:hover .bloo-arrow { transform: translateX(6px); }

/* WooCommerce product grids */
.woocommerce ul.products li.product, .wc-block-grid__product, .wc-block-product { text-align: left; }
.woocommerce ul.products li.product a img, .wc-block-components-product-image img { border-radius: var(--bloo-radius); background: var(--wp--preset--color--sand); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem; font-weight: 700; }
.woocommerce ul.products li.product .price { color: var(--wp--preset--color--ink); font-weight: 700; }
.woocommerce ul.products li.product .button, .woocommerce a.button, .woocommerce button.button { border-radius: 999px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); font-weight: 700; padding: .7em 1.4em; }
.woocommerce ul.products li.product .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--wp--preset--color--accent); color: #fff; }
.woocommerce-info, .woocommerce-message { border-top-color: var(--wp--preset--color--accent); }
.bloo-empty-note { border: 2px dashed color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent); border-radius: var(--bloo-radius); }
.bloo-products:has(ul.products li) + .bloo-empty-note { display: none; }

/* FAQ */
.bloo-faq details { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent); padding: 1.1rem 0; }
.bloo-faq summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.bloo-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.bloo-faq details[open] summary::after { transform: rotate(45deg); }

/* Final CTA */
.bloo-cta { border-radius: calc(var(--bloo-radius) * 1.5); position: relative; overflow: hidden; }
.bloo-cta::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid color-mix(in srgb, var(--wp--preset--color--sun) 70%, transparent); }
.bloo-cta > * { position: relative; z-index: 1; }

/* Stitched thread details */
.bloo-strip { position: relative; }
.bloo-strip::before, .bloo-strip::after { content: ""; position: absolute; left: 0; right: 0; border-top: 2px dashed color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent); pointer-events: none; }
.bloo-strip::before { top: 5px; }
.bloo-strip::after { bottom: 5px; }
.bloo-tile::before, .bloo-cta::before { content: ""; position: absolute; inset: 10px; border: 2px dashed color-mix(in srgb, currentColor 40%, transparent); border-radius: calc(var(--bloo-radius) - 6px); pointer-events: none; }
.bloo-cta::before { border-radius: calc(var(--bloo-radius) * 1.5 - 6px); }
.bloo-tile { padding: 2rem !important; }
.bloo-header .wp-block-site-title a { border-bottom: 2px dashed var(--wp--preset--color--accent); padding-bottom: .1em; }

/* Footer */
.bloo-footer a { color: inherit; text-decoration: none; opacity: .8; }
.bloo-footer a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 781px) {
  .bloo-hero h1 { font-size: clamp(2.6rem, 11vw, 3.6rem) !important; }
  .bloo-hero-art { max-width: 340px; margin-inline: auto; }
}
.bloo-cta .wp-block-button__link:hover, .bloo-strip a:hover { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--ink); }