/* Shop Tattitude — small layer on top of theme.json. Keep it short. */
:root { --tt-radius: 10px; }

body { -webkit-font-smoothing: antialiased; }
img { border-radius: 0; }
.tt-rounded img, .tt-hero-img img { border-radius: var(--tt-radius); }
.tt-hero-img img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; box-shadow: 0 18px 40px -24px rgba(38, 35, 42, .45); }

.tt-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: .25rem !important; }

/* header */
.tt-header .wp-block-navigation a { text-decoration: none; }
/* Logo (inline SVG from functions.php): 40px desktop, 32px mobile; width follows the 372:64 viewBox. */
.tt-brand { margin: 0; line-height: 0; }
.tt-brand a { display: inline-block; }
.tt-logo { display: block; height: 40px; width: auto; aspect-ratio: 372 / 64; }
@media (max-width: 600px) { .tt-logo { height: 32px; } }
.tt-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.tt-announce p { margin: 0; letter-spacing: .02em; }

/* outline button */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--contrast);
	border: 1.5px solid var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* promises: inline list with small separators, no icons */
.tt-promises { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; color: var(--wp--preset--color--muted); margin-top: 1.25rem; }
.tt-promises li { position: relative; padding-left: 1rem; }
.tt-promises li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--wp--preset--color--sage); }

/* steps */
.tt-step-num { font-family: var(--wp--preset--font-family--heading); font-size: 2.75rem; line-height: 1; color: var(--wp--preset--color--accent); margin-bottom: .25rem; }
.tt-steps h3, .tt-crafts h3 { margin-top: .4rem; }
.tt-crafts h3 a { text-decoration: none; }
.tt-crafts h3 a:hover { text-decoration: underline; }

/* footer */
.tt-plain-list { list-style: none; padding-left: 0; }
.tt-plain-list li { margin: .35rem 0; }
.tt-footer a { text-decoration: none; }
.tt-footer a:hover { text-decoration: underline; }

/* product grids (blocks + classic loop) */
.wc-block-grid__product, .wc-block-product, ul.products li.product { text-align: left; }
.wc-block-grid__product-image img, .wc-block-components-product-image img, ul.products li.product img {
	border-radius: var(--tt-radius); aspect-ratio: 1 / 1; object-fit: cover; background: var(--wp--preset--color--surface);
}
.wc-block-grid__product-title, .wp-block-post-title a, ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--body) !important; font-size: 1rem !important; font-weight: 600; text-decoration: none; color: var(--wp--preset--color--contrast);
}
.wc-block-grid__product-price, .wc-block-components-product-price { font-weight: 600; color: var(--wp--preset--color--contrast); }
.wc-block-grid__product .wp-block-button__link, .wc-block-components-product-button .wp-block-button__link { font-size: .9rem; padding: .6rem 1rem; }

/* single product */
.tt-trust { list-style: none; padding: 1rem 0 0; margin: 1rem 0 0; border-top: 1px solid var(--wp--preset--color--line); display: grid; gap: .45rem; font-size: .95rem; color: var(--wp--preset--color--muted); }
.tt-trust li { padding-left: 1.4rem; position: relative; }
.tt-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--sage); font-weight: 700; }
.single-product .wp-block-woocommerce-product-price { font-size: 1.5rem; font-weight: 600; }
.woocommerce div.product form.cart .button.disabled, .single_add_to_cart_button.disabled { opacity: 1 !important; background: var(--wp--preset--color--muted) !important; }
.woocommerce div.product form.cart .button, .wp-block-add-to-cart-form .single_add_to_cart_button {
	background: var(--wp--preset--color--accent) !important; color: #fff !important; border-radius: var(--tt-radius) !important; padding: .9rem 1.8rem !important; font-weight: 600 !important;
}
.wc-block-components-product-details h3, .woocommerce-Tabs-panel h3 { font-size: 1.15rem; margin-top: 1.5rem; }

/* Gallery WITHOUT flexslider (disabled in functions.php — its init frame stacked every slide and caused CLS).
   Static layout from first paint: main image full width, the rest as a 4-column grid; click opens the lightbox. */
.woocommerce-product-gallery { opacity: 1 !important; }
.woocommerce-product-gallery__wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; }
/* Woo core CSS gives non-slider thumbs width:25% + inline-block; inside our grid cell that shrank them to ~19px. */
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2),
.woocommerce-product-gallery__image { width: 100% !important; display: block !important; margin: 0 !important; }
.woocommerce-product-gallery__image a { display: block; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: var(--wp--preset--color--surface); }

/* variation swatches: plain selects look fine; give them room */
.variations select { min-height: 44px; padding: 0 .75rem; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); background: #fff; }

@media (max-width: 781px) {
	.tt-hero .wp-block-columns { flex-direction: column-reverse; }
	.tt-crafts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1rem; }
	.tt-crafts > .wp-block-column { flex-basis: auto !important; }
	/* product page: title close to the photo */
	.single-product .wp-block-woocommerce-product-image-gallery, .single-product .woocommerce-product-gallery { margin-bottom: 1rem !important; }
	.single-product h1.wp-block-post-title, .single-product .product_title { font-size: 1.9rem; margin-top: .5rem; }
}
/* related products on phones: 2 columns (static from first paint) — images use sizes="auto" so they fetch 300w files, not 768w/full */
@media (max-width: 599px) {
	.single-product .wc-block-product-template.is-flex-container > li { width: calc(50% - .625em); }
	.single-product .wc-block-product-template .wp-block-button__link { padding: .55rem .7rem; font-size: .85rem; }
}
/* category intro (term description) */
.tax-product_cat .wp-block-term-description, .tax-product_cat .term-description { max-width: 70ch; color: var(--wp--preset--color--muted); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* track order */
.tt-track-form input { width: 100%; max-width: 420px; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; background: #fff; font: inherit; }
.tt-track-result { padding: 1rem 1.25rem; background: var(--wp--preset--color--sand); border-radius: var(--tt-radius); margin-bottom: 1.5rem; }
.tt-track-error { color: var(--wp--preset--color--accent-dark); }

/* Product video under gallery + "Complete your kit" upsells (catalog v2, Etsy-style) */
.tt-product-video{margin:1rem 0 0}
.tt-product-video video{width:100%;max-width:512px;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#F1E9DD}
.tt-product-video figcaption{font-size:.85rem;color:#5E5862;margin-top:.35rem}
.tt-upsells{margin:1.25rem 0 .5rem;border-top:1px solid #E4DACB;padding-top:1rem}
.tt-upsells-title{font-weight:600;margin:0 0 .6rem;font-size:.95rem}
.tt-upsell{display:grid;grid-template-columns:56px 1fr auto;gap:.75rem;align-items:center;padding:.45rem 0;text-decoration:none;color:inherit;border-bottom:1px dashed #E4DACB}
.tt-upsell img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.tt-upsell-name{font-size:.92rem;line-height:1.3}
.tt-upsell-price{font-size:.92rem;font-weight:600;white-space:nowrap}
.tt-upsell:hover .tt-upsell-name{text-decoration:underline}

/* Guides: breadcrumb above post title, hub list (inc/guides.php, catalog/blog_publish.php) */
.tt-crumbs{font-size:.875rem;margin:0 0 .5rem;opacity:.8}
.tt-crumbs a{text-decoration:none}
.tt-guides{list-style:none;padding-left:0}
.tt-guides li{margin:0 0 1.1rem;line-height:1.5}
.tt-post-meta{margin:.5rem 0 var(--wp--preset--spacing--60);opacity:.8}


/* SEO buyer-journey bridge: contextual beginner guides on category + product pages. */
.tt-learning{margin:24px 0 30px;padding:22px 24px;border:2px solid var(--wp--preset--color--contrast-2,#2a211c);border-radius:16px;background:var(--wp--preset--color--base-2,#faf6f0)}
.tt-learning .tt-kicker{margin:0 0 6px}
.tt-learning h2{font-size:clamp(24px,3vw,32px);line-height:1.1;margin:0 0 14px}
.tt-learning ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.tt-learning li{margin:0}
.tt-learning li a{display:block;padding:8px 0;font-weight:700;text-decoration-thickness:1px;text-underline-offset:3px}
.tt-learning-all{margin:12px 0 0;font-size:.92em}
@media(max-width:680px){.tt-learning{padding:18px}.tt-learning ul{grid-template-columns:1fr}}